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

Overview:
If you’ve ever watched an eye tracking enhanced usability study, you know how much influence visual perception and user feedback have on usability.  While in progress, eye tracking visualizations can be extremely entertaining, like watching search and destroy video games, but the visualizations also provide meaningful clues that help to unlock the mystery of why pages succeed and fail in usability.

Despite the best copy writing and most well intended navigational systems on the web… one of the most startling facts of web usage is… people don’t read. Sure, they see words and scan for key words and main points, but they don’t read in the traditional literary sense. Both focused web users on a mission to accomplish a task and casual web surfers, those just browsing freely, are not on a mission to read. Their purpose is more tactical and akin to hunting and gathering than reading.

Our reliance on visual and audio senses for survival and focused execution of tasks in the physical world, are equally important for successful orientation, navigation and consumption on the web.

In the majority of eye tracking usability sessions, you will note that the eye moves in a seemingly chaotic yet highly systematic way. Typically starting at the top left, the user will quickly scan across and down stopping a large and distinct blocks of color, chunky text and other visual punctuations. The same scan is repeated a number of times incrementally slowing and resting on the initial set of visual markers with some variance in sequence and jumps to neighboring content. Actual reading in a literal sense does not happen in the first three to five seconds.

You have roughly three seconds to accomplish the following:

• orient the user
• provide key visual markers
• enhance aesthetic experience
• avoid competing with high priority content and actions

It seems like a relatively simple set of tasks, but in three seconds it’s a relatively challenging task. The relative complexity and levels of difficulty vary depending on the site and content objectives. Fortunately, there are proven methods for optimizing the design for scanning and discovery.

1. be conservative. No matter how tempting, minimize the use of color and attractive design elements unless they directly align with a visual system to support content enhancement, clarity, and information of navigational visual cues.
2. be systematic. Patterns of use are driven by patterns in design. Establish punctuating visual treatments for key information, functions and features. Determine content and feature importance both from marketing, business, and functional aspects as well as from the users’ perspective. Once a clear priority is mapped, apply the appropriate visual emphasis the establish visual weighting and emphasis. You can use placement, size, proportion,spacing, color and graphic treatment to establish you visual hierarchy.
3. be consistent. Users rely on repetition to establish a mental map of your organizational system.
4. keep it simple. Users won’t be impressed with how much information you can get above the fold or on the page or in you navigation. Users are more apt to reward sites with clear, simple, and clean designs with repeat visits if they can consistently find what they’re looking for. Simplicity is the art of eliminating clutter while providing valuable content and contextually relevant visual markers for navigation and related features and functions.
5. have fun. Don’t be so serious… users will stay longer and take time to orient themselves if you can avoid chasing them off your site in boredom. Use informal and playful copy as appropriate, but remember the priority is not to distract, but to avoid banality.

Happy designing! Feel free to share examples of your work or other designs that achieve zen visual design.

-Jon Fukuda

The set up

In October 2007, GE Energy signed a memorandum to deploy advanced energy delivery and metering technologies that will give residential and industrial consumers greater control over their energy usage and costs.  November 2007, Google announces investment in energy technologies marking the tipping point of a new era on our energy experience.  Just this month, Google revealed the iceberg tip of their Smart Meter consumer solution, harnessing the power of their analytic tool set, Google has settled in the keystone position of the smart meter user experience.

Earlier this month, Limina had the privilege to compete against leading technology consulting firms for a contract to research, design, deploy and test a consumer facing portal that would empower consumers to make the smart consumption decisions and, in the future, play a key role in consumption based home automation.

Much of how this future scenario is already in the works as demonstrated by LucidDesignGroup’s Building Dashboard product for schools, companies and homes.  With this dashboard you will, not only monitor and your building’s usage, but chart it against your usage history and, if you have on-site renewable power generation such as wind and solar, you can make smart decisions on when to sell back to the grid to maximize your return.

This display panel was featured in a Michelle Kaughman home on an Episode of NextWorld on the Science Channel, where she discussed live scenarios for home and energy automation with the dashboard as the centerpiece.

The Challenge:

1) Getting the energy providers, homes and consumers ready: In October 2008 the Government in the UK announced a mandate to have every household outfitted with gas and electricity smart meters by the year 2020.  On March 19 2009, www.whitehouse.gov posted the recovery act with an $11billion dollar investment in a smart-grid.  While there are no mandates, one can predict action is imminent.

2) Ubiquity: Google is about as ubiquitous of a technology service provider as you can get, their interest and investment in this space is a key indicator that this challenge will be met.  LucidDesignGroup’s Dashboard has thought forward to live case for interfacing with consumers in an easy to use way making the information and more importantly calls to action accessible and elegant.

Limina is always looking forward to turnkey technological and experience innovations in any industry, but has a special interest in contributing to the global efforts to reduce energy waste and build awareness in renewable resources.

-Jon Fukuda

Submit your RFP’s to services at limina-ao dot com

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