Topic: Usability

Wireframing with incomplete requirements

The value of wireframing even with incomplete information

The task of wireframing in application development, as I've come to know it, should begin after user research has been performed, and a complete set of requirements gathered.  But what happens when, for whatever reason, you just don't have access to user research, or a full set of requirements?  What if all you have are some rather unspecific, vague notions of what the user should and should not be able to do?  Is wireframing at this juncture useful?  I say yes.  With incomplete or even almost non existent information about target users and or requirements, wireframes can still be a valuable tool in the interface designers toolkit.

The key to a wireframe's usefulness is that it is a visual document.  Presumably it will be presented to one or more product stakeholders, and they will have the opportunity to review it and comment.  Having something visual to respond to is one of the easiest ways to generate ideas, and identify incomplete specifications.  A good assumption is that if a product's requirements are incomplete, someone at the wireframe review will notice the gap by responding in the context of the visual presentation.  "Where is the Cancel button?  Oh...not in the requirements?  Well it's obvious that on this screen the user will need to be able to cancel, so we have to add that as a requirement."

In this way, a wireframe can be an ever evolving document, which begins by starting the requirements conversation.  Of course ultimately, just prior to feature development, the wireframe should have all of the necessary specifics so that the developers can use it as a guide (along with the relevant user stories).


Error Messages & Usability

I was starting up one of the Adobe apps the other day when this somewhat troublesome message was displayed:

error_adobe

Ack! On the one hand, good for them for alerting me that an error had occurred. On the other hand, what's up with that message? I had no idea what I could do beyond clicking ok (and after reading the message I wasn't sure all was ok). A bit unnerving, but it did get me thinking about how applications deal with error messages.

The idea that non-technical users will be viewing error messages is one of those things that tends to be overlooked. You’re so focused on getting all the features up and working that dealing with errors on the presentation layer are often left out of both design and implementation.

Even if time is crunched on a project, however, here are three scenarios you should always cover in a user-friendly fashion: Continue reading »

A First Impression of Flash Catalyst

Flash CatalystSpent some time playing around with Flash Catalyst, which was released by Adobe as a public Beta yesterday. I downloaded it today and got started on some of the tutorials Adobe labs has put up.
My impressions:
It's pretty neat stuff. I could see myself prototyping with it, although Keynote and Acrobat are my tools of choice at the moment.
From my limited time working with it, Catalyst's main function is to make it very easy to take Photoshop or Illustrator compositions and turn them into fully (front end) functional interfaces, complete with animations, transitions, fades, buttons states etc. One of the tutorials had me import artwork of a scrollbar, in 4 layers. Creating an actual scrollbar and hooking it up to a canvas was as easy as selecting the individual layers and telling catalyst which part of the scroll bar it was (up button, down button, track and thumb). It;s also super easy to connect user actions to specific screens (or states, as Catalyst calls them).
Continue reading »

Aesthetics and Web Design

Patrick Lynch over at A list apart has just written a great article about the role of aesthetics in web design.  In it, he specifically deals with the question of how much of a role visual aesthetic design should play in the design of web sites.  To answer the question, he delves into the somewhat controversial notion of visual decision making--the idea that aesthetics can help users in their decision making and aid in general website usability.

The article is written in response to assertions made by one Jakob Nielsson, who, citing numerous eye tracking studies that his team has performed over the years, concludes that any images, or other elements on a web page that are not integral to the site's content or function are routinely ignored, and hence superfluous or even distracting.

But the author says no.  Aesthetic elements on websites, while not recognized as helpful in eye tracking studies, do perform a vital role in website usability.  Mr. Lynch cites the work of early 20th century Gestalt psychologists that have proven that the brain responds to images in milliseconds.  And more recent studies of web sites suggest that users make visual impressions of pages in less than 1/20 of a second--before eye tracking movements begin--and that those impressions more or less stay through the length of the visit.

He goes on from there about why "attractive things work better", describing Don Norman's three levels of human psychological processing (Visceral, Behavioral and Reflective), and why they all work together to create an impression of a product like a website.

Read the full article over here.

The Importance of User Experience – Do You Understand It in Your Bones?

Business Week had an article earlier this week on Cloud Computing that made a complete hash of the subject. However, there was one paragraph that was right on the money:

Apple and Google understand in their bones that simplicity and ease of use are essential to broad adoption of products and services. That lesson doesn't come so naturally to Microsoft and IBM.

That's why we integrate user experience design into the agile development process, and that's why we advise our clients to release the simplest software they can early, so they can learn from real user feedback and continue to make improvements based on that learning.

It's like John Gruber writes over at Daring Fireball:

“A complex system that works is invariably found to have evolved from a simple system that worked. The inverse proposition also appears to be true: A complex system designed from scratch never works and cannot be made to work. You have to start over, beginning with a working simple system.”
John Gall

If there’s a formula to Apple’s success over the past 10 years, that’s it. Start with something simple and build it, grow it, improve it, steadily over time. Evolve it.

Do you understand that in your bones?

Safari’s Tabs on Top and Usability

picture-2Apple recently released a beta version of its Safari 4.  Naturally it has some really cool new features, including a helpful and slick start screen, and cover flow for your browsing history.  It's also much faster than any other browser currently out there.  However there is one substantial "new feature" to the Safari 4 user interface that's been generating lots of buzz (heat might be a better word).  Namely, in this new version of Safari, the tabs (which you use to browse multiple web pages simultaneously in one window) are physically located at the very top of the browser window.  The address bar, and all the other web page navigation controls are now situated underneath your tabs. Continue reading »

Visual Heuristics

spyglassHeuristic reviews are a great tool for finding usability issues in any existing interface, from web-based to desktop. It's a quick and relatively inexpensive way to uncover, document and prioritize usability problems.

From usability.gov:

The goal of heuristic evaluation is to find usability problems early in the design of a Web site so that improvements can be made as part of the iterative design process … The result of this analysis is a list of potential usability issues or problems.

While I use heuristic reviews and find the results to be very helpful, I've never been too thrilled with the final documentation. Even when formatted nicely, they’re nothing more than a laundry list with a bunch of words and numbers and no hints or ideas on how that information can be grouped together and translated over to an application. Quite frankly, after the second page my eyes do tend to glaze over. And if my eyes glaze over, I can't even imaging how it affects the client. So I was challenged to come up with something better.

My co-worker, John McCaffrey, wanted to give his client some ideas on how to improve their site -- a heuristic review but with a sort-of Cliffs Notes component that could highlight the value of the review but not induce eye fatigue. He was also looking for something more visual to grab the interest of the client and keep them there long enough to start looking at the data. He mentioned that he really likes our annotated wireframes and an idea was born. Create a mashup of annotated wireframes and heuristic evaluation.

Continue reading »

The courage to redesign

People are still griping about the recent redesigns of Facebook and iGoogle, but I think we should cheer on any company brave enough to disregard user feedback and embrace change.

Lots of big-name, highly successful sites eventually reach a state of paralysis in which they're too scared of alienating their customers to examine their interaction design and information architecture from a fresh perspective.

The cautionary tale of Amazon.com

Look at Amazon: The online retailer adopted DHTML navigation just last year - at least 5 years after most other big sites - because its tab interface had grown so comically large. Nevertheless, huge chunks of the Amazon user experience are still massively broken:

  • Once you've started down the checkout process, the site tries to keep you from getting back to your shopping cart to add or remove additional items. If you use your back button to do so, you've got to start the checkout process all over again.
  • Wish lists offer perhaps the most confusing, error-prone user interface I've ever had the displeasure to experience.
  • Link targets on a wide variety of UI controls are tiny and persnickety enough to elicit involuntary profanity.

Continue reading »

Web 2.0 context menus vs. Web 1.0 link lists: Style over usability?

As Ajax spreads new UI conventions to the masses, it's important to apply a critical eye to the usability of those conventions. Several big-name sites have launched extensive redesigns in the last few months, from Twitter and FriendFeed to Flickr and Facebook. Certain trends are solidifying, especially the use of context menus that are hidden until a user mouses over an item, then displayed as a series of icons, text or both.

Flickr

First up we have Flickr, whose homepage redesign emphasizes the social networking aspects of the service. A Recent Activity feed, modeled on Facebook's iconic News Feed, showcases favorites and comments from your contacts. The default view for each item displays its age. When the user hovers, though, the same real estate becomes home to two icons. One allows you to add your own comment; the other "mutes" activity related to that photo and removes it from your feed. Neither option is represented by an industry-standard icon, and no tooltip is provided. Even the status bar shows only an inscrutable URL: a hash sign.

Continue reading »

Four blatant iPhone usability blunders (and one constant annoyance)

photo of a broken iPhone

I've been an iPhone 3G owner for about six weeks now - six weeks of love, loathing, cool apps and connectivity problems. Rather than complain about poor network coverage, though, I'd like to delve into some of the vexing usability problems that hamper the phone's user experience.

No ability to disable autocorrect completely

Like pretty much every autocorrect feature ever built, the iPhone's does more harm than good. It always thinks it knows best. If you don't watch it like a hawk, it will render everything you type completely nonsensical. Proper nouns, abbreviations, profanity - all get turned into gibberish by this well-meaning but deeply flawed function. And god forbid you try to use the classic email e.e. cummings mode in which uppercase letters don't exist. The iPhone literally will not let you output the word "iPhone" without throwing in that capital "P." It's maddening.

If the purpose of autocorrect is to allow you to type quickly without having to monitor your output, it fails miserably. On the iPhone, if you want what you type to show up verbatim on the screen, you have to pause at the end of each word to ensure that the OS is not about to substitute its own wisdom for your actual intent. I would honestly rather type on a 1999-era StarTAC numeric keypad.

None of this would be as galling if there were a setting to turn this feature off. But there isn't. Elaborate, unwieldy workarounds have been suggested - all because Apple users know that the folks in Cupertino often paternalistically ignore their users. Microsoft's OS and apps may suck, but you can usually customize the hell out of them. Not so Apple's.

Continue reading »

Google Calendar: Finally, a search box that makes sense

I've been complaining for months about a usability problem with Google Calendar's default search behavior, so I figure I should document that it's finally been fixed. Ever since gCal introduced the concept of public calendars, hitting "enter" in the global search box has kicked off a trawl through the public-calendar database. Instead of searching MY OWN calendar for, say, my Aunt Donna's birthday, gCal instead searches public calendars of, like, sports schedules and Kazakhstanian bank holidays. Smart.

Now, though, that behavior seems to have been flipped. "Search My Calendars" is now the default action, while "Search Public Calendars" has become the secondary action. Bravo!

Chicago Front-End Web Developers group forms on LinkedIn

LinkedIn logo

LinkedIn's Groups feature hasn't quite reached maturity yet, but my friend and occasional colleague Zack Frazier hasn't let that get in his way. Zack recently launched the Chicago Front-End Web Developers group as a way to help UI specialists network and connect.

According to their site, the LinkedIn folks are apparently hard at work making Groups more useful:

The groups directory is not currently open. We are working on creating a searchable directory for all groups. If there are groups you wish to join, you may click on the group logo from the profile of a group member and request to join.

LinkedIn groups

In the meantime, you can join Chicago Front-End Web Developers using this direct link. Joining allows you to put your loyalties on display to prospective contacts (see screenshot).

UI folks, stand and be counted!

37signals and the pain of the below-the-fold button

Ta_da_list

Google Notebook finally got a feature I've been asking for since the beginning: The ability to remember whether I want my notebooks sorted alphabetically or by date of last update. When the service launched, notebooks were always sorted by last update. When they finally added the option of alphabetical sorting, they left out the ability to make your choice sticky across sessions. This little wrinkle annoyed me almost as much as the Google Calendar search box's default action of searching public calendars rather than my own. I can't believe what a difference it makes in your relationship with a webapp when you don't curse out loud every time you use it.

Many users have the tendency to get bent out of shape about deficiencies in a tiny, tertiary portions of an application - or, for that matter, an operating system. Mac users devote entire forums to complaining about changes to, or lack of changes to, the Dock. PC users are still cursing those stupid Windows XP "You have unused icons on your desktop" messages. When we spend increasingly endless stretches of our lives in front of a terminal, tiny annoyances add up.

I call this the Disproportionately Annoying Detail Syndrome, or DADS. It has a tendency to flare up worst when you're working late on a short deadline and your computing environment fails to read your mind.

A couple of years ago, when I first started abandoning desktop software for cloud computing, I gave Ta-Da List a shot. I couldn't get over the placement of the "Add another item" command. Instead of putting it at the top of the list, they stuck it at the bottom. Every time I wanted to add a task, I had to scroll down to the bottom of the page before I could start typing. I worked with this system for about a week before jumping ship to Remember the Milk, where I can hit the "t" key to add a task without ever picking up my mouse.

Continue reading »

Agile User Experience: If you don’t have a user, invent one of those too…

Following up on Brian's point...

A customer proxy of one kind or another is also important in integrating Agile practices with User Eexperience Design.

One of the long standing issues in combine Agile development with User Experience Design is just the differing time cycles between Agile developers, who are running on a test, develop, refactor cycle that could be mere minutes long, and the UXD designer, who is working on a longer, perhaps more traditional, cycle.

Gatorade gives audience an early look at Super Bowl ads - USATODAY.com.jpg

The problem comes in when the developers start making coding decisions for the interface. Without immediate feedback from the UXD designers, the developers are often left to their own devices for the initial versions, with revised designs coming weeks or months later.

Our goal is to keep the development team moving forward with current feedback from the design team. For exactly this reason, the original XP book listed Onsite Customer as a core XP practice. However, that's not always feasible, and in any case for User design you want the user's feedback, which may not be the same as the customer's.

What we try to do is use the idea of a customer or user proxy to allow us to have incremental refinement of design, and allow the development team to get quick feedback and continue with the next fine-grained task.

When a developer has a usability question, the developer asks a team member acting as a user proxy. This is either an analyst on the project or one of the designers. The user proxy makes a decision on the question -- if not a final decision on all details of the problem, at the very least a consensus on some aspect of the problem that the developer can do next. While the developer does that task, the user proxy goes off and consults with the design team and the customer.

Ideally, by the time the developer is ready for the rest of the task, the user proxy has more detailed requirements and design for the developer. The key is making sure the developer's next step is always covered.

This does require some effort from your team -- the developers have have awareness of usability issues and concerns and the design team has to have the ability to respond to developer concerns quickly. Again, though, the design team doesn't need to have all the answers at once, they just need to be able to give incremental details to the developer.

(The image of the floor appearing directly underfoot is from the ad campaign for Gatorade G2)


Have I mentioned my upcoming book Professional Ruby on Rails, yet? Available mid-February wherever fine computing books are sold.

A UXD Lesson from the Gas Station

This past weekend I was up on Howell Mountain in Napa, tasting the ultra tasty wines there and taking in the gorgeous views. On the way back to SF, we stopped at a Shell gas station. It took me a good 20 minutes to gas up. Why? Lousy user experience. Let me explain.

This was a new, fancy pump. It had a TV up top, a 4"x6" LCD screen just below crotch level (I'm 6'4"), a numeric keypad with a credit card reader about a foot to the right, and three fuel selectors another foot above. It was about 11:30, and the sun was shining right at the LCD screen. First I thought the TV was saying something relevant about my fueling my car. The Doppler effect of several other TV's saying the same thing at slight offsets around the gas station was also a little disconcerting. I finally figured out that the TV was just polishing the Shell brand and flogging sitcoms (aren't the writers on strike?).

Continue reading »

Launch: Pathfinder Newsletter

    Get a monthly update on best practices for delivering successful software.

    Subscribe via email


    Subscribe via RSS      RSS icon

Topics

Search

WordPress

Comments about this site: info@pathf.com