• 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

Limina is often faced with products that have been in the market for years with little to no professional user centered and UI design methodology applied. It’s typically apparent in the interface before delving into the history of development through issues including but, not limited to the following examples:

• inconsistent UI patterning
• obtuse, or in many cases, non-existent workflows where users are either left to their own devices to develop their own approach to the system or spend time in manuals or training
• random color and graphic treatments with little or no usage rationale
• core features and functions hidden in right click menus with no alternative access
• extensive use of dialogs and workspace changes to complete primary tasks
• random and inconsistent screen layout
• chop-shop iconography, cut and pasted from other applications

Most of these issues can be attributed to an engineering driven culture where usability has not been a core part of the methodology. Sure, the code is clean, the feature works, QA and Unit Tests have passed with flying colors… but is it usable or useful from an end to end experience?

A typical engineering approach to incorporating customer feedback
As a stop-gap to implementing user centered design practices, we’ve heard: “We’re meeting with our customers regularly to hear what they need and we keep them happy by feeding these requirements directly to the engineers to implement.”

First of all, we applaud you for going directly to the users with your product and taking back their requests into the design… but this is a slippery slope.

Although you may know your users and even have some working for you, how well are you capturing their needs? Are you asking the right questions? Are your users able to articulate what they need? You may have voluminous user feedback, support call logs, or error log reports on file, but have you put the user data into a framework that generates an actionable set of UI enhancements?

Equally important; when you have captured their feedback, how do you use it? Without a clear definition or roadmap for incorporating the user feedback, your product is at risk of losing competitive ground. When a company has to spend additional revenue in extensive training sessions, help documentation, call centers and product revisions, the margin of return on investment can take a massive beating.

Here are some activities to help you to incorporate user feedback into your agile development practice:

1) Give the feedback some context – What were users doing or attempting to do when they encountered the issue, and what are their roles? Usability specialists conduct a set of contextual inquiries to interview and observe users as they are performing various tasks in the context of their workplace to determine both system and non-system based activities, documents, and tools that are used to complete their tasks.

2) Quantify and qualify the user data – Where do you see common issues reaching a critical mass? Which are the exceptions and how do you prioritize them? What issues constitute a completely new set of features and possibly a new product?

3) Organize it – Once you have synthesized and prioritized the issues, determine their relationship not only to the system, but also to each other. Which comments are related and which ones are specific to a given task or feature?

The result is a set of researched usability issues that can be organized into enhancements prioritized by issue, prevalence, technical complexity, business, and user benefit.

Such a framework should be employed when embarking on a product definition or enhancement process. It allows parties from marketing, product management, and engineering to uncover the root of software design issues that challenge usability, and ultimately to gain a deeper understanding of their users. Product managers and engineers who gather and process user feedback assist their company by developing the right products and tools for their customers.

This post includes an excerpt from Limina’s white paper “Nine Ways to Improve Software Usability and Increase Market Share“.

Skipping this step leads to an iterative path of organically distorting the original design of the system and frankin-hacking patches and appendages to the product to the point where rebuilding from scratch is easier than overhauling the UI when your users start running to your competitors.

There are a great many development teams using agile methods, SCRUMing it out, getting the features out the door to see what sticks. In many ways, this is a helpful model to beat the first-to-market and innovation clocks, but if the net result is revisiting the feature again and again or playing “pass the trouble ticket” from developer to developer as the feature enhancement is punted to the next iterations for months… something isn’t working.

We are all for engineering driven product teams. In most cases, massive leaps in technical innovation are paved by developer teams and individuals unhindered by business and user requirements. But we’re talking about products in the market that have ROI, user adoption, marketability, competitiveness and other business considerations to name a few.

There’s something to be said for dealing with the cost up-front; for taking the time to build a sustainable product whether in its initial incarnation or when producing the next generation of its kind, because the hidden cost of maintenance, marketing and training can work against you in the long run.

Give us your thoughts and share your experiences with us and our readers!

Years ago, various UX gurus touted the coming of the ubiquitous computer– every device would have a computer built in and they would all talk to one another. Mark Weiser coined the term while at Xerox PARC in 1988 and Alan Kay of Apple called this the “Third Paradigm”. It began with mainframe computers (one compute -> many people), followed by the personal computer (one person -> one computer), bringing us to ubiquitous computing (one person -> many computers). Ubiquitous computing can be considered the opposite of virtual reality, rather than surrounding the person within a computer-generated environment, ubiquitous computing surrounds the individual with computers (in between, lies augmented reality). In other words, computers are made to live in our world and not the other way around. Donald Norman updated the term in 1999 and used the term invisible computer and information appliance to refer to the coming revolution of devices that that would have embedded computer chips and effortlessly communicate with one another.

To some degree that has happened, even if you disregard the multiple computers that most people own (desktop, laptop, netbook) even the simple electronic devices that surround us have considerable computing power. According to futurists, my toaster should be talking with my refrigerator to know what kind of bread I have and how I like it toasted or to notify my online grocer that I only had two slices left (some of the early predictions were pretty bizarre and stretched the definition of “usefulness”). But why did their prediction fail to materialize and we’re all living in remedial houses rather than the smarthouse we were promised? Even though my appliances are much smarter than the ones my parents had there is little chatter between my toaster, coffeemaker, or any other smart appliances in my household. Most of the things I own don’t really need to communicate with one another, nor do they have much to say to Net. In fact, most of devices don’t have much to say about anything. My refrigerator still doesn’t know when I’m almost out of orange juice, though, given Tropicana’s new packaging I wish it could tell me what kind I just bought and why it was not the one I wanted. Is ubiquitous computing just one more failed prediction like fifth generation computing (expert systems) or has ubiquitous computing shifting to something else?

Apple takes an interesting two-pronged approach to ubiquitous computing, instead of everything communicating with everything else, the iPhone says – “talk to me, and I’ll talk to those that need to know” and asks “no need for multiple devices, just give me a simple focused task and I can do that.” The latter approach is familiar to everyone who has ever downloaded an app from the iTunes Store, while the former is somewhat new and is made possible by the introduction of OS 3.0 and APIs that allow for easy communication with other devices. The application approach is akin to a universal Turing machine, and the API model is more like a universal interface. It’s not quite two-pronged, rather applications are developed that allow devices to integrate seamlessly with iPhone – I consider it a different enough model as to warrant it’s unique status. For example, Johnson & Johnson made a bit of splash at the Apple developer conference with their demo of LifeScan a tool that integrates a glucose monitor with the iPhone and provides a range of features from simple visualizations of historical data to food tracking to uploading data to your healthcare provider.

Whether or not one believes the hype surrounding LifeScan (is it vaporware or will it see production?), it’s easy to imagine a range of medical devices (or any category of devices) all communicating through the iPhone, all using the iPhone’s screen and its Samsung S5PC100 processor – one person, one user interface with many devices.

I’m not sure if Apple is going to be the one that finally surrounds us with computers or smart devices, but I think their model puts us in more control than the previous one of smart appliances “deciding” for us – when to order OJ, how to toast my bread, etc. My toaster can simply communicate with my iPhone, and I can set how the bread is toasted (silly ideas never really die, they just move around the ether). I think the future is looking less like Terminator Salvation and maybe more like Star Trek [Note: It is very hard to find good science fiction movies or shows that paint a bright picture].

–kipp

Big news! Apple just announced the much anticipated iPhone3G S, along with the new 3.0 platform. As usual, Apple has done a stellar job of hyping the release, providing the 3.0 SDK (Software Development Kit) to their huge following of app developers in advance, encouraging them to take advantage of the new capabilities such as copy/paste, voice dialing, compass positioning, video support with editing, and, of course, improved speed (brought to you by the letter “S”).

New iPhone3G S

These are exciting times for Mac fanatics, and for those who were waiting for the new and improved version to be released before jumping on the iPhone bandwagon. The pricing structure for newbies appears relatively reasonable and assures Apple of many new iPhone customers. However, for existing iPhone customers it’s a bit more confusing, and expensive. This is where the ever present Apple user experience gets interrupted. AT&T, in their ultimate, and very typical wisdom, are essentially punishing their customer base for upgrading to the new iPhone – by charging premiums of two or three hundred dollars for those users who haven’t yet fulfilled their 2-year contract; which by the way is practically impossible seeing as it hasn’t yet been 2 years since the iPhone was released! In other words, just when everyone is getting excited about the new iPhone, loving their experience with the brilliant Apple brand, they get hit in the face with the harsh, predictably bad experience provided by AT&T. Not only are they charging premiums for making the upgrade, but there are doubts about whether the AT&T network will actually support the speed at which the iPhone3G S is programmed to run. And, one of the key features that will be supported across the globe (but not in the U.S. thanks to AT&T) is tethering – a feature many customers have looked forward to since the beginning.

During the preview of the new iPhone there were many app demos that didn’t go as planned, and actually completely flopped, but that doesn’t come anywhere close to turning the fan base away from their beloved brand. But now, thanks to AT&T, the supreme user experience has been interrupted. The question is, given today’s economy, how many current iPhone users will go for the upgrade and sustain the blows from AT&T? I know at least one who is determined to keep up with the Jones’, but how many more will do the same? Unlike AT&T, Apple’s user experience has only improved over the past few years. Let’s see how many users overlook the grey cloud of AT&T to continue their journey with new products from Apple.

- Mimi Knowles

pssst! Limina has embarked on developing our own iPhone app – “Top Secret” for now – but be on the lookout for the official announcement!

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