UX Issues & Solutions

Wizard

Problem Summary: The customer needs to specify a large amount of information
Pattern Key: WIZARD
Example:

Use When:
  1. The information the customer must provide is too intimidating or complicated to request all of it from a single page.
    • The Wizard is an especially good choice if we want to entice the customer to do or try something.
  2. Different information is needed according to early choices the customer makes.  The early choices can determine which wizard pages are shown later.
    • Also consider using a single page and having one choice at the top of the page determine what is displayed at the bottom.
  3. The requested information can be broken up into pages that are suitable to be worked with one at a time, so the customer rarely needs to go back to a previous page.
  4. The customer is not in a blazing hurry, and it's unlikely that the same customer will have to do it over and over.
    • Note:  Wizards are friendly, allowing the customer to focus on one part of the task at a time, but they also require more interactions and server trips.  Some sites are moving to a smaller number of larger pages, or even a single page, for placing orders.
Solution: Use a wizard, as shown above.
  1. All four buttons are always present, but the ones that are not applicable are disabled.
    Exception:  The Cancel button is not required, but it can be useful if there are a lot of steps.
  2. The Cancel button cancels the wizard and returns to the page that invoked the wizard, the one from which the first step was invoked.  If significant information will be lost, confirmation is required.
    Example:  "Are you sure you want to cancel this registration and discard your work?"
  3. The progress bar at the top is not required, but is often very useful.  In cases where the number of steps in wizard changes according to the customer's choices, progress information may not be useful.
  4. Clicking an item on the progress bar takes the customer to that page, when practical.  Many wizards will let you jump back, but not always jump forward.

Note:  Be careful about using a Wizard with Tabbed Panels inside of it.  Customers may think that the Previous and Next buttons apply to the tabs instead of the Wizard steps.  Consider using a Collapsible Panel instead of a Tabbed Panel.

Great Site for Web Based UI developers

If you work on web based UI much, and you're a standards junkie...

Subscribe to http://www.alistapart.com

Great GREAT articles there. He just recently posted http://www.alistapart.com/articles/previewofhtml5

Got me all excited about HTML 5!

creating social change and affecting impact – good reading

This past week, I have caught up on a lot of traffic about a new book called Forces for Good: The Six Practices of High-Impact Nonprofits and a supporting article both by Heather McLeod Grant & Leslie R. Crutchfield. I am also working on looking at how we organize and structure iMIS moving forward for the UX Team. The article refocused some of my thoughts.

There has been a trend in the non-profit world to adopt more for-profit business practices to succeed. I have seen, as an example, more people with advanced degrees and experience in the for-profit world recruited into customer organizations. I have often wondered about the overall impact of this direction, whether over the long-term it would bear greater results or just somehow make it more mechanical, lose a little bit of the magic. I am an idealist and I want to be believe that through my work at ASI, I am affecting social change and having an impact on the greater good, regardless of how small or indirect. It’s one of the main reasons I work here. I guess, like most relationships, there are benefits to both the non-profit and for-profit sectors from these trends.

Another Control for consistent HTML generation

Always a stickler for UI patterns and consistency, I’ve found another pattern that seems to be repeating a lot…

An object that has a title, a description and optionally a Thumbnail Image and (optionally again) a HighRes image.

Cross Browser More Info Control

So, I had quite a few senarios where I needed to display information that took up a whole lot of real estate, but was only needed for a short period of time. Sort of a "hover help" kinda thing. I googled it for a while, and really wanted a "pure css" solution, but after realizing how much "fussing" with it that was needed for it to actually work in IE6 (even IE7 requires a strict doctype to get the hover pseudo element to work properly on non anchor elements), I decided to just go with a JS solution.

Link: Free usability advice

Too good not to share: Free Usability Advice, from our friends at Expero. (See my prior blog entry.)

It's intended to provide short, general answers to broad topics about user-centered design. (They're considering adding a separate section to handle the non-usability questions, which do, of course, get submitted. Should be fun!)

Usability review of new Helpsite

This week several of us in InfoDev attended a 2-day seminar on Web Content Usability, taught by Expero, a local usability firm. Lots to say about that, but I'll start with the end, where we asked for and received a quick evaluation of usability issues with our new Helpsite. Here's what we got, in the order they were brainstormed: