30 Essential Controls for RIA Design

Theresa Neill, co-author of Designing Web Interfaces lists her 30 essential controls for Rich Interface Application design, and provides a list of frameworks that provide these controls, in the second article in a three part series on patterns and principles for RIA design.

1) Standard Screen Patterns: 12 patterns w/100 examples

2) Essential Controls: 30 controls for RIA design and development

3) Components for Commonly Requested Features: 15 patterns and examples (Forthcoming)


CompareNetworks jQuery'd Bread Crumb

The JQuery’d Breadcrumb is an odd breadcrumb interface that collapses all nodes in the branch upon page load, and then expands to show each node the user mouses over. Their explanation:

This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages. Rather than limit the amount of elements shown on the sever side, we decided to go with a client side solution for usability and SEO reasons.

I don’t see how this is a usability improvement over an exposed breadcrumb. If they needed/wanted to use breadcrumbs for whatever reason, it would seem more usable to show a larger truncated portion of each string with an elipsis, and expose the string on hover, rather than just show these strange portions of the string. I don’t even see the whole first character, so it just looks kind of broken in a way.

I like the attempt to do something about minimizing breadcrumbs in deep paths. But it might even be more useful to use something like the path control we’re accustomed to in the Finder and Windows Explorer. You’d have to do a lot to make it look less like a form control to make it unobtrusive, but provide some context. Do it with ULs and CSS, and I think you’d still be ok with regard to SEO, although someone might correct me if I’m wrong. I don’t know why you’d allow horrendously long titles as in their example, but clearly you don’t need to have the current node in the branch visible if the point is to minimize the weight of this UI element.


NY Times Article Skimmer

The New York Times’ Article Skimmer prototype provides a nice gallery view of top articles, and utilizes a categories sidebar to filter articles. Keyboard shortcuts are also provided to navigate prev/next category, or to jump to a specific category. Very nice way to view articles. The dense tabloid style of the regular site can be overwhelming sometimes.

Via SwissMiss


Starting Work on OmniGraffle Sketch Stencils

If you’ve been following this blog, you may know how I’ve wanted to do sketch/jitter line styles in OmniGraffle to produce sketchy diagrams and wireframes. After David’s demo of his method for doing sketch shapes on the Design Commission blog got me started figuring out how to get the effect natively in OG, I’ve started to finally create sketch versions of the Wireframe Stencils. Above is a screenshot of the forms set. I expect this will take me a few days, but hope to release these in a few weeks.

Interaction Design Reading Recommendations

Requested Reading Recommendations from the School of Visual Arts, MFA in Interaction Design program.

Upon the request of readers, we asked faculty to recommend books for an interaction design reading list. These could be landmark texts, underdogs, or critical reads, or stepping stones to other fields. The following is what resulted from our request, comprising in part: a sneak preview of what will be assigned in courses; what some consider to be cornerstone interaction design texts; and what some consider important connections to other fields.


NYPL Labs Infomaki: A lightweight usability testing service

The New York Public Library Labs has begun testing a light usability testing system to supplement their formal tests, inspired by the Five Second Test method which was devised by Jared Spool and turned into a service by the guys at mayhem(method). The service, nicknamed Infomaki (info roll?), combines the type of service 5 second test provides, as well as allowing single question surveys for checking on things like simple labeling issues, which you might have tested using card sorting.

The test lets you answer only 1 question, or continue answering as you like, which makes the task feel very game like, and reminds me of crowdsourcing apps like Amazon’s Mechanical Turk. I love that the types of questions you can ask require simple twitch-like responses, so you can get through a lot very quickly. Here’s a bit more from the NYPL Labs site about the project:

It has become apparent that we needed a tool in our kit that would allow us to get simple usability questions in front of users with a minimum of fuss.

[O]ften, what is needed is just a sanity check– a reassurance to our team that we are on the right track.

Our design sessions frequently result in debate about which of two words is more compelling or accurate for our users, or whether a particular button is noticeable in a particular location. When we can, we test designs on real people using paper or digital prototypes, but it is impractical to test every day; sitting down with real people is not always as simple as you’d expect, what with the schedules of busy New Yorkers.

We’ve used SurveyMonkey in the past for full-fledged traditional surveys, and we’ve also evaluated OptimalSort for online card sorting, and been inspired by the Five Second Test. But none of them were a perfect fit, for reasons including complicated interfaces, inflexible setup, privacy policy hassles, and/or lack of a way to embed a link back to our site when the test is completed.

So, we set out to create our own rapid-testing usability laboratory from scratch, and last Tuesday we launched it, in rough beta form.

Having worked on information systems in research libraries, I’m always excited to see libraries that are ahead of the curve in terms of technology, and the NYPL never fails to impress. The NYPL Labs is testing the system with a small number of usability questions related to NYPL sites now, so you might get some repeat questions, as I did. It would be great if the system could cookie sessions to ensure that questions aren’t repeated. This is a terrific start though. The NYPL Labs plan to release Infomaki as an open source application, which is great news for us.


Designing by Writing

I love what tiny gigantic has written in this great short post about designing by writing (or the non-iterative design process). I agree wholeheartedly, although I think of writing as part of design to be accretive and/or iterative.

A few choice bits from the entry:

[W]hen someone asks you why you used green, or why you included that crumpled-paper background, or why there’s a bird in the logo, you’re gonna need to know. What’s more, you’re going to need to be able to articulate it in a way that makes them care. I’ve been in graphic design classes in which I’ve asked students presenting their work why they did what they did. And 90% of them have said something like: “because it’s like, I don’t know. It’s like I thought that color looked super good right there. And I like birds.”


It’s not enough to make pretty things. You’ve got to be able to talk about them, to present them, to parse their meaning. And the truth of it is that if you can’t articulate what the thing you’re making means, you’re gonna have a helluva time making it mean something to someone else. Which is a problem, because that’s the job.

I like to write before I do anything related to interaction design. I like to read, gather and summarize loads of user feedback, to talk among my team about ideas we have to solve problems, and then distill it all into statements of the problem, proposals for design concepts, and stories (use cases and scenarios). This is all the intellectual work of design. Where I work now, it happens in a wiki article with users adding paragraph comments, all before I start to sketch. Then it continues to happen when my team annotates sketches.

In any case, the point is that the thought process that leads to design is what's important, and if there is none, then maybe writing can help in that case. Perhaps not everyone needs to write so much as communicate and capture in some way, even if it's only in discussion and notetalking or what have you.


Is Good Design Replicable?

Joshua Porter's post about whether good design can be replicated is fabulous. What I like is the idea that there isn't a solid set of methods that you can reuse in every case and think it might guarantee success or "good design". There's an interesting thought in there about process:

I wonder if the real issue is that most of the time designers simply don’t know if what they’re building is great, and they end up relying on process to get as far as they can. If they go through the right process, they think, then they’ll produce maybe not the best solution, but the best solution possible. This may be true…and it is comforting, in a way, because if you feel like you are doing it right then you can sleep soundly.

Couldn't we just say that all this activity that leads to design, whether it uses one methodology or another, just helps frame the problem and start the discussion about understanding what you're trying to solve before the eureka moments hits. We're not talking about sticking to rigor here, but maybe using tools and methods to get to some moment of clarity before carrying on to the design that can now be given focus.

The Michael Bierut passage is a great one, in that he suggests that he works at the problem in one way or another until the solution manifests almost magically. And Joshua suggests that perhaps it's just hard work, and I would say experience, that makes good design. I'd side with that opinion, if I had to side with anything.


Smart Experience on Carousels

Smart Experience has posted a 5 minute video showing different kinds of carousels in action and teaches you the three key design criteria you need to know to create your own. Excellent stuff and the best discussion of why carousels are effective, and a thorough review of the different kinds of carousels you might use. Check it for free now. This micro-seminar goes on sale soon.


Website Redesign: Tips and Thoughts from the Creattica Inspire Design

Creatica writes about the redesign of FaveUp, which will be relaunched as Creatica Inspire. The lengthy article discusses the process of designing Creatica Inspire and includes links to HTML mockups for the new site, and for illustration purposes shows the evolution of PSDtuts, which will also come in line with the new Creatica family of sites. Great read for anyone considering redesigning an existing site with an established set of users, especially with regard to improving funcitonalities, IXD and IA, without upsetting users.