This is just a quick post to share good resources for designing usable interfaces. (It always helps to have a handy set of links).

• 20 Websites to Help You Master User Interface Design
• 10 Tools for Evaluating Web Design Accessibility
• 11 Inspiring Lessons from Web Design Experts
• Best Practices for Hints and Validation in Web Forms

Hope you find these helpful,

-Jon Fukuda

So, you’re lead engineer on the front end web team and you’ve just been handed your UI specs hot off the press.  They look great, the product management and design team are throwing high-fives…  but you’re worried about how to implement all of their fancy ideas; drag and drop, sortable tables, in-line editing, etc.  Moreover, how do you know when it’s appropriate to use them?  What are the rules?  When do you use an accordion over a tabbed UI and why?

Thankfully there are a bunch of UI Pattern libraries out there on the web.  Some are heavily information design focused others have user generated content and some that are more developer centric. In this post I’ll share some example sites, discuss their significance, benefits and short comings, then I’ll shamelessly plug the need for working with an experienced professional to help you navigate through UI Patterns… aka Limina.

The O’Reilly Guys

http://designinginterfaces.com/ (formerly http://time-tripper.com/uipatterns - soon to no-longer exist, or the 3yr old claim states).  Now, this is a great source of information if you’re looking to understand when, how and why to use various UI patterns.  Their web UI counterpart: http://designingwebinterfaces.com/explore.

Benefit: Both sites provide visual examples (not live demos) along with comprehensive writeups on each pattern.  If ever faced with making the decision between checkboxes vs. multi-slection lists or radio buttons and single selection lists.  This is your destination for truth.

Falling Short:  The site is static, no comments from the community, examples are slowly becoming out dated.  Most importantly, there is a lost opportunity to link out to live demos, and sample code to help the wayward front end developer to get their feet wet.

The New Guys

Okay, maybe Infragistics has been around for a while, but they just recently released Quince, while this site is yet to support user commentary, it does have a number of bells and whistles that give the O’reilly folks  a run for their money.  (Here is one other  dynamic / community oriented repository that I won’t expand on, but feel is worth mentioning -  http://ui-patterns.com/)

I have a personal problem with the over-use of  Silverlight which mearly adds “Pizzaz, for the sake of Pizzaz”.  The features, functions, organization and structure alone are what make this a great site, I can do without the crazy coverflow and overlays which is really tiresome after the first 5 minutes.  It’s a good example of “Just because you can, doesn’t mean you should.

Benefits: This repository is dynamically fed by a community of UI experts and patrons of the topic.  It provides a rating system which tracks implementations and approval of the patterns.  Community members can submit further examples and write ups of patterns.  Comprehensive write ups on the patters addressing; The Problem, Solution, Context, Rationale, Implementation, Resources and Tags.  They’ve integrated distribution and syndication tools to post or subscribe to content on their site.  They’ve categorized the repository by User Tasks, Tags and Wireframes and added some niceties like; Recently Viewed , and Simple Search and Filters.  Their broad and  deep repository is rich with examples and is growing daily.  Subscribing to the site makes it easier to keep up with the changes.

Previously overlooked by the Limina team: User Comments – currently below the fold on the Pattern Viewer. This will be addressed in their next major release.

Falling Short: While Quince took one step further to link out to live examples, they still don’t provide technical details or code samples for back and front end support for the patterns.  This may have to do with Infragistic’s presentation layer product and the need to conceal their secret sauce.  Correction: This is out of scope for Quince’s technology-agnostic and UX-centric UI pattern guidance. This is why the next category is so much more intriguing…

The Developers – JQuery

Who, in all User Experience Cocky-dom, would have thought that it would take a couple of smart developers to start pulling it all together?  Over that past 10 years a slow movement of front end javascript, css and html developers to iteratively produce, share and modify non-standardized functions, effects, controls and more on various repositories like DynamicDrive and JavaScript.com.  While these repositories had the beginnings of some good ideas, it lacked a stable framework for extensibility, consistency, and clean standards that would make for a manageable UI.

Not too long ago, frameworks like Script.aculous. Protoype, MooTools and JQuery unleashed their powerful js libraries.   For the most part, pitting these libraries against one another will demonstrate a mish-mash of pros and cons that more or less put them on a level playing field.  I singled out JQuery due to the earnest effort that have made to compile their components, modules, widgets, effects and interactions into a UI pattern repository, built on top of the JQuery Javascript library to create highly interactive interfaces.

Benefits:  One of the best parts about the JQueryUI library is that they not only provide working demo’s, but that their demos are hooked up to demonstrate subtle modifications that impact their use.  They provide code samples and technical overview and configuration options.  In all of their examples, they have taken into consideration; user feedback, interaction affordances, and high-level CHI principals, which makes huge strides towards closing the gap between standard usability heuristics and front-end development.

Falling Short: Granted, this is just their first pass at compiling their patterns and not to discount JQuery UI achievements, but they have just begin to scratch the surface.  Their repository will be greatly improved by rolling up components and widgets into mature UI patterns that take context into consideration.  Both Oreilly and Quince got this part right.

You have your homework cut out for you.  We recommend you study up on your pattern libraries, usage rules and stable code repositories.   Keep in mind, no combination of, or independant,  UI Pattern repositories are sufficient to replace a good user expereince research and design team.  Even the most rich interactions and highly functional UI’s will fall short in the face of un-met or miscalculated requirements.  We’ll be here for you when you need us.

-Jon

Design tips for Rich Clients

RIA’s have been sprouting all around us and every web application (and website) seems to have some ‘richness’ in the interaction that it provides to its users. From information browsing to task based applications, users now have a rich set of controls and interactions that allow them to have a more efficient and satisfying experience.

The interaction guidelines for making web applications ‘rich’ traditionally came from Rich clients (Desktop Clients). But as web applications were deployed in a web browser, they were unable to simply follow the guidelines; instead they had to adapt them to the platform.  As web applications evolved into RIA’s, they introduced some new interface and interaction styles.

Desktop applications have already implemented a few typical web idioms (Hyperlinks, Back buttons), and here are some newer interface and interactions that can be ported back to Rich Clients. These may not apply to all Rich clients but could be used creatively to enhance the user experience where possible.

Organizing without Menu’s (Tabs and toolbars)
Many RIA’s do not use traditional cascading menus as means of organising the applications functionality (normally this is to avoid having 2 sets of menus); instead they use tabs and toolbars. This reduces the time spent searching for functions and also allows for a better way to view and manage content.

Integrated popups

In order to reduce window clutter and to keep the interface visually lightweight, many RIA’s have rich interactive integrated pop-ups.  This allows the users to see the context of the popup content and also have multiple popups open. These popups can show details (Image and text) and also be used to add or edit object properties.

Motion

Although traditionally motion and animation has not been used widely, many RIA’s do a very good job of using transitions and effects to present information, convey organization and show movement from one part of the application to another. Motion provides the user with an added feedback of space and time rather than objects magically appearing and disappearing. Examples of this are: Steps in a Wizard flying in and out, panels sliding, window and objects growing/shrinking as they are brought into view.

Look and Feel/ Branding

Rather than simply inheriting from the operating system, RIA’s have their own look & feel and branding. We are seeing more of this in rich clients (Yahoo messenger, MS Office 2007), but there is a lot more that can be done to help products both stand out and achieve higher usability.

Although it may seem ironic that Rich clients are adapting designs from web applications, as designs evolve and more applications and users take to the internet, this maybe something that can help provide the users have a unified experience.

Creating and using the best design to make your product more usable is just one of the services provided by Limina.

-Vikram Dere

At Limina we spend a lot of time working on complex information display where users are making critical decisions based off of key content, often displayed in tables.  Therefore, it is very important that the formatting of tables be as consistent and clear as possible. Tables should clarify and enhance the information they present, not obscure it.

I like to think that most of us involved in GUI design (be it on the interface design or development end) have either read Tufte’s books or heard about his useful guidelines for laying out and designing tabular data. Yet, one of the most common issues we run into when performing Expert UI Evaluations is poor table design.

Googling around the web I found few sites discussing the topic of table design other than those providing libraries of CSS table designs; however in many cases these reference libraries actually add to the proliferation of bad table design. Developers get excited when they figure out a way to code up a new table style or interaction method and post it for others to use. But there is little discussion on where and when (if ever) these solutions are appropriate. Remember, just because you can doesn’t mean you should.

Here are the three areas where we commonly see the most UI design and usability mistakes and some guidelines that should help you create more useful and usable tables:

Design Style:

Help users focus on what they can learn from table data; the data should stand out, not the design of the table.

Minimize visual clutter and avoid over styling

• Do you really need horizontal and vertical grid lines and an alternating row color?
• I can’t think of any good reason to ever use a patterned background

Avoid over use of color

• A basic table shell does not need more than 2 or 3 colors to differentiate column headers, a content/grid and a selection highlight
• When you use colors use them consistently. Users need to know they can count on the visual cues you provide them so they can act efficiently
• When using an alternating line color keep the contrast to a minimum and use soft colors that are easy on the eye
• Don’t make the alternating line color too similar to your line item selection color

Content alignment (left, right, center)

• Know your content alignment rules. Typically content is aligned left. But numerical content can only be revealing if the column is appropriately aligned and left alignment is not usually the best choice.


SOURCE: http://blog.editage.com/?q=Aligning-Columns

Use cell padding and spacing – cramped table cells are much harder to read, make sure you provide enough space to allow users to easily scan content

Interaction style:

Unless explicitly called out, a user will typically need to spend time “discovering” interaction features.  In the case of tables, there are a number of visual cues you can provide to direct their interactions.

• Define a set of table styles that lets users know how they can interact with table content; read-only, editable, selectable, etc
• Apply the styles consistently
• Consider revealing controls on-hover to decrease visual clutter for scanning, but enable the table for interaction when necessary
• When designing complex tables that have mixed content types (e.g. read only and editable and/or selectable) provide a visual style that illustrates these key differences
• Clearly indicate which columns are sortable and which is the default
• Indicate whether users can resize columns and rows
• Consider using mouse over text to display lengthy cell data when truncating
• Avoid using fixed tables inside panes or windows that horizontally resize. The reason for this is because it will be easy for users to accidentally lose some columns by resizing a table-containing pane to be horizontally smaller

Table usage:

Is a table the best format for displaying your content? Sometimes viewing data in a tabular format doesn’t help your users see trends in the data. Ask yourself if the information would be better displayed using a simple (or sometimes complex) visualization. Or, consider providing both a tabular and visualization view of the content.

This list of considerations is not meant to be the definitive guide for good table design but it should help you avoid the most obvious pitfalls and put you on the right track.

-Maria