Compete on Usability

So far, wireframing web apps are disappointing

I use Visio all too frequently in my job to create Web application wireframes.  It's a good desktop application, but I'd like to move to an online equivalent to:

• Share files and collaborate with remote coworkers
• Work from home on my Mac, and at the office on my PC
• Use web apps to build web apps!  I feel virtuous when I use the types of products I make.

I've had good experiences with the Mindmeister concept mapping tool, and so I had high expectations for online wireframing. Here I'll generalize a personal point about transitioning: Users happy with a desktop software solution will not jump to a Web app that's missing key features. There are clear benefits to Web apps, but they're not worth losing efficiency and functionality.

As a result, Gliffy doesn't make the cut for me.  It's missing keyboard shortcuts and paste from the OS clipboard, two features I use constantly in Visio.  (At least, I couldn't find them in the interface or in Help.)  You can copy and paste within the application, but you can't bring in content from outside.

In addition, on an aesthetic level, I didn't care for the application's Visio-esque UI.  Those tiny, monochromatic icons are ugly and undifferentiated.  Fitts's Law says that relying on those little targets would make my experience slow and error-prone.  Besides, guys, the Web is a new platform you're building for. Some visual creativity would signal trial users that you're setting them free from the anesthesizing blue and gray prison of Windows desktop apps.

The makers of Jumpchart must have had the same interface insight, because their UI is radically different from Visio and Gliffy. They appear to optimize for classic text-based web pages.  In fact, the tool eschews icons and buttons entirely.  It's much more like a wiki than a typical Web app, and that could be a problem.  Jumpchart's page-centric model feels very dated in 2008.

I was turned off immediately when I saw Jumpchart uses something called Textile markup to edit its pages. Like many folks, I've learned HTML and wiki markup already. Why should I learn yet another markup language?

At least, since the tool is not Flash, you can easily paste in text.  But where are the visuals? This application should be called Jumpword, because I couldn't find features involving charts or graphics of any kind.

For now, I'm stuck using Visio, and probably purchasing Omnigraffle for my Mac at home.  Gliffy and Jumpchart must move fast to add features, because old-school corporations like Adobe are bring their big brands to bear in the Web space.

Update:  I received an email, plus a comment below, from Gliffy representatives who say they're following up on the issues I raised.  Perhaps we'll see keyboard shortcuts and improved copy-and-paste soon!

Update 2: Next, a review of Balsamiq Mockups.

Simplicity is not the ultimate goal

I saw a hotel telephone last week that perfectly illustrates one of my favorite themes: simple is not always more usable.
Here's a phone without any buttons. It doesn't get much simpler than that!  Yet most people wouldn't even consider it a real telephone, because essential features are missing. How do you choose who you want to call?

If a simple interface is your goal, it's critical to know the essential feature set. Simplify past a certain point, and you risk making your product or system unrecognizable. The best way to know the essential feature set is user research, although a survey of competitive products can substitute in the short term.

But wait, there's more!  Over time, the essential feature set increases for a given product.  Early phones used to come like this one, with no controls other than a crank to signal an operator to help you. These days, most people won't buy a phone without a display for caller ID, redial and  volume controls, and more.  Heck, wired phones can seem like a relic compared with the versatility of mobiles.

The ultimate goal is user satisfaction. Meet expectations by delivering the essential feature set, then delight users with a better, more usable interface on those features.

What will we do with cognitive surplus?

Bloggers I follow are buzzing about the Clay Shirky talk on the post-TV cognitive surplus.  I understood it as "Passive TV-style media is going away, replaced by the interactive Internet, and now we'll all use our free time being busy content creators."

His actual talk, however, was more nuanced and believable than a simple, en-masse transition of humanity from passive consumers to active creators.  He managed to address two shortcomings I predicted with cognitive surplus.

TV is fodder for social interaction. When my coworkers chat about the TV shows Lost or 30 Rock, I can't do much but smile and nod, because I watch very little TV. In the workplace, opting out of TV talk is a real sacrifice. In diverse contemporary society, what can you chat with people about, without risk of confusion or giving offense? It's just easier to have safe common experiences outside of work to talk about.

However, Shirky was careful to emphasize that even a small amount of redirected TV time could spawn multiple Wikipedias per year of Net content. If it only takes a little attention to contribute, it's easy to see people playing an online game or posting to an online community while watching TV. They're doing it now, all the time.

TV is rest time. People like being passive. Depending on what you read, television is either the world's most tranquilizing addiction, or a cognitively demanding cultural simulator. Either way, for a long time pundits doubted the PC would ever replace the TV, because peoples' behavior is quite different using these two mediums. No one "watches computer," and no one "uses TV." It's not easy to find exactly what the difference is. Supporting these naysayers, hybrid systems like WebTV and the Apple TV have had no great commercial success.

In the past ten years, though, television has evolved into convergence with personal computing.
Or rather, the TV interface, not the content, is much more like computers now. Tivo changed everything, and new TV sites like Hulu promise to change things further.

My take is that we still must make online content creation easier. It's great that people can watch less TV, but creating anything interesting online is still inconsistent and frustrating for most people. We need standardized widgets for common functions, so that every rich interface isn't a new learning experience for users. We must clearly communicate state in Web applications, so people always know what to expect from our tools. And we need very quick feedback and results when using these applications.

 

Dasher interface types by pointing

This YouTube movie demonstrates the Dasher interface, developed at the University of Cambridge in the UK.  Dasher works by pointing to a letter in a vertical list.  The subsequent letters, weighted in order of probability, unfurl and you can keep pointing to make words and sentences.  Try Dasher in Java here.

It's flashy and interactive, and even elegant somehow. It's very quick with English dictionary words, but slow on proper nouns like names and places. I can imagine Dasher having great potential for disabled users, as well as for simple touchscreen interfaces.

Even cooler, what about a similar interface for choosing complementary colors or configuring a set of related product options?

(Link via GUUUI)

Google Charts API

If you do any display of usability result online, try out the Google Charts open API at http://code.google.com/apis/chart/. Unlike other chart APIs I have seen (Yahoo, for example), you don't need Javascript or any embedded code.  Just a correctly formatted URL.  There are plenty of examples at the Google code URL to get you started.  Don't forget to avoid legends whenever possible, though I'm disappointed the API doesn't currently support much in the way of labeling.

I wouldn't mind seeing a Web form to help with formatting the URLs though.  Anyone seen one yet?

UX practitioners rated

Edit: Please note the chart at the left is to satirize the "guru factor" in user experience. It does not represent my thoughts, and it's not taken from any site listed here.

The recent redesign of information architecture site Boxes & Arrows puts heavy emphasis on reputation ratings. Online ratings are applied to all registered users on the site (authors and commenters) as well as site articles. I've almost always agreed with the article ratings on Boxes & Arrows, so it seems like a useful feature to me.

Ratings of people, however, is less straightforward. The rating system is heavily weighted towards content contributors, in effect making them "superusers" with scores or hundreds of reputation points. Whenever they post their opinions in comments, their status is obvious. Although rating points are meant to be a broad range, the system as implemented creates a clear binary divide among members.

Taking the ratings trend a step further is a new site, UX Zeitgeist. They attempt to rank books, user experience topics, and even people. Its publishers "believe our ranking system is wildly, brilliantly innovative and one of the most useful features of UX Zeitgeist." Perhaps it is, but they beg the question why is it useful to rank people at all.

UX rating sites bring to my mind the concept of A-list bloggers. Popularity equals wisdom and power in the blogosphere.  But the problem is, you can't accurately judge the value of information in a single swift rating. An article useless for one person with one kind of goal, is priceless to the next person with different goals.  A-list ratings create a winner-take-all information ecology that can obscure a long tail of personally relevant content. Instead, user experience experts ought to professionalize and promote the field with a system that less resembles the United States homeland security threat indicator.

Scratch the surface of UX Zeitgeist, and there's one immediate hole in the person rankings. Where's Jakob Nielsen? Perhaps he didn't reveal his favorite books -- participation that appears to be required for listing. If so, I think opting out of this attempted Who's Who of UX is laudable.

Successful Web Workflow, Part I

I have worked online for years, and I've become inured to the tedium of completing forms whenever I register for an account or buy something online. So it's a good reality check to run a user study, and hear sighs and the unhappy words, "Do you want me to fill this out?" when participants realize they're in a workflow.

Workflows are multistep processes where a user must enter information and make decisions to complete a task. Always remember the subconscious "quid pro quo" of Web forms. Users never want to fill out your forms! They only want what's behind them, and they will tolerate your forms as long as the anticipated reward seems worth the effort. So it's very much in your interest to minimize their efforts with thoughtful, usable workflow design.

The following guidelines are more general heuristics than hard-and-fast rules. When it comes to Web workflows, there's as many kinds of good designs as there are types of information to gather.

• The fewer fields, the better. Here's a contentious one. Businesses will always want to gather more information about customers, and users always will want fewer fields to fill out. Keep in mind the ultimate objective is to get users to the finish line successfully. Ecommerce sites in particular will find extra questions to be costly.
• The fewer pages, the better. This is more of a marketing guideline than a principle of usability. Generally speaking, each additional page is another opportunity for users to drop out of the process. Sites like eBay and Microsoft are removing pages from their workflows with AJAX forms that dynamically change questions to reflect prior inputs.
• Use a progress indicator. Your users have no idea how many steps there are to go unless you communicate it to them. Users who feel lost are likely to abandon your workflow.
• Forms are for your users, not your servers. Don't force users to conform to your fields. Ensure forms don't choke on currency symbols, punctuation, and other normal language inputs. More examples: allow user to select dates from a calendar widget. Support keyboard shortcuts (tabbing, Enter to submit). Consider accessibility.
• Label buttons to clearly indicate the next step. "Submit" is usually an unhelpful label. Use Purchase, Sign Up, Download, and the like. Be consistent too --  don't use Continue on one page and Next on the subsequent page.

More guidelines to come.

Agile and Social Networks Challenge Usability

On Wednesday, I attended the 2007 Boston Mini-UPA conference. There were over 300 user experience professionals in attendance, and believe it or not, more hiring companies than job seekers! This is a great time for the field.

One conference meme was the growing use of Agile development methods, and the increased pressure Agile can place on usability. Deadlines are forcing practitioners to conduct less formal usability testing, and to fall back on quicker methods such as heuristic evaluations and user surveys. Fortunately for interaction designers, two tools I saw for rapid prototyping are improving to keep up the pace.

Jared Spool of UIE brought up another interesting usability head-scratcher. When evaluating social networking sites, where the whole experience revolves around people interacting, how can you test the site one participant at a time? You might need hundreds or thousands of other people rating, responding, and creating their own content, or it's not a valid test. It's another reason why Web 2.0 companies might conduct less formal usability testing in the future.

How does MySpace win?

The social networking site MySpace.com is a polarizing force among design and usability advocates. There are certain aesthetic principles that ought to be universal, so how can MySpace be so ugly, so difficult to use, and yet remain so popular?

Let's get some of the less satisfactory explanations out of the way:

• It's just a fad. Well, MySpace visits keep increasing.  Its popularity may not last forever, but what does?
• Kids don't know what's good. Tell that to Nike, Burger King,  or Apple. Style and brand are extremely important to teenagers.
• Teenagers follow their friends, and rebel against what adults value. These cliches don't explain why MySpace topped other websites built for rebellious youth.

I'm not sure anyone has definitively established the secret to MySpace's success, but here are a few partial explanations that make sense to me:

• Believe it or not, it's user-centered design. MySpace has focused on the features their target audience wants, and better site design or nicer-looking templates simply aren't on the list.
• "I'm with the band." When you're talking about the American Idol, Paris Hilton generation, nothing is more important than being famous. MySpace optimized itself for musicians to set up websites, and their fans join just to watch for concert photos, score free tracks, and hope that a rock star will respond to their comments.
• It's a mess, just like a teenager's bedroom. MySpace may not be intuitive or easy to use, but it is extremely flexible, allowing all the garish colors, bizarre pictures, and trend-of-the-moment videos its users want to post.
• It doesn't put on airs. It seems odd that the main website, at least, doesn't have a better design. But that's a strength for MySpace because it keeps them close to their audience of enthusiastic non-designers. 

Cutting edge usability: where the conventions aren't

There is a large body of usability research available on standard web interface, but recent UI advances such as AJAX have many sites breaking new ground. The field is in need of new standards to help users over their learning curves.

A more interactive web will improve usability when functions related better to people's
existing mental models. For example, Google Maps allows users to grab and pull the map to
scroll in two dimensions. This is an intuitive model because it's similar to how we use
real-world paper maps, and it's clearly more usable than separate scroll buttons.

Other mapping sites quickly adopted the click-and-drag navigation metaphor, but many
common interactive behaviors have no standard. Millions of pieces of user-generated content, such as photos uploaded to Flickr or blog posts to TypePad, are created every day, and even using keyword search it's a challenge for users to figure out what content is worth their time. However, there is no standard method of rating user-created content. Digg articles may accumulate "up" ratings, but other sites give 1-5 stars, and still others, like Wikipedia, eschew ratings altogether.

Social networking sites have no standard visual metaphors to describe the rich interactions they make possible. Typically, it's all or nothing: either you're connected to a person and "in" their network, or you're "out." Filters to show and hide content among subsets of your network tend to be text-only and awkward.

The winners in the Web 2.0 space will shake out in part due to the success of their interfaces. Watch market leaders like YouTube and emerging sites like Eons to ensure your company chooses familiar design metaphors that become standards.