paper & pencil

Label Placement in Forms

Matteo Penzo summarizes the results of a usability study on Label Placement in Forms in the July 2006 issue of UXMatters. The tests were based on Luke Wroblewski's guidelines on Web  Application Form Design.

Here are the author's conclusions:

• Label position—Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.
• Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.
• Bold labels—Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.
• Drop-down list boxes—Use them with care, because they’re so eye-catching. Either use them for important data or, when using them for less important data, place them well below more important input fields.
• Label placement for drop-down list boxes—To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappears.

The Elements of Style for Designers

Christina Wodtke repurposes E.B. White's reminders at the end of The Elements of Style to create The Elements of Style for Designers.

5. Revise and rewrite.
Revising is part of writing. Few writers are so expert that they can produce what they are after on the first try.

It’s painful when a client or a boss rejects your first design. Sometimes that initial effort seems perfect. But revision is a way to reach a better design. Or sometimes—and only sometimes—shed light on the perfection of the first. When this odd event occurs, it’s best not to be upset because no one recognized your initial brilliance. Instead, remember that design is as much process as result, and part of your job is to get everyone participating in the design to the end goal.

UIE Interview with Luke W

UIE recently interviewed Luke Wroblewski on the relationship of visual design and usability.

Part 1 tidbits

overview:

When properly applied, visual design is all about communication. The better at communicating we are, the easier it is for our users to use and appreciate the web sites we design.

many usability findings only focus on what happened and don't delve into why:

What’s missing in this scenario is the reason why the user overlooked that particular feature and what the designer changed to address that. Odds are the visual contrast between all the elements on the page was too low and everything looked the same to users, so they glossed over the feature. Or, perhaps the visual contrast was too high, so every element was screaming “look at me,” in which case none of them got noticed. Whatever the exact reason, there’s likely a visual organization issue at the heart of the problem.

"ugly design" of Craigslist, MySpace, etc.:

Sites like Craiglist and Del.icio.us remain popular on the merits of their content. But, does their audience enjoy bumping through the site’s awkward graphics and hard to read text? No, but the personality of the content — It could be high quality, funny, worthwhile, and more—makes the rest more than bearable. Would their audience be happier if the personality of the presentation matched the personality of the content? Of course. They like the content, don’t they?

Part 2 tidbits

visual hierarchy:

Too often, everything on a Web page looks the same and users don’t know where to start. Conversely, everything looks very different and users end up bouncing between elements that are competing for their attention. An effective hierarchy employs just enough meaningful differentiation to walk users through the unique content and actions on a page in a purposeful order.

continuous exploration:

You mentioned sites like Craigslist and MySpace [in Part I] and I think you’ll see a lot less visual hierarchy there because the predominate user action is continuous exploration. Little visual hierarchy however would be a very bad thing for a task-specific site. In that case, using hierarchy to communicate how to accomplish a task clearly is indispensable. The fluid, flattened, exploratory nature of MySpace would quickly become aggravating when you are trying to book a flight.

AJAX:

Other rich interactions that technologies like Ajax enable, however, don’t just show up when they are useful. In fact, actions like right-click and drag-and-drop aren’t visible at all and are not expected within the Web browser. In these instances, we’ve increased the need for effective visual communication because through the presentation of the interface, we have to tell users these features are available and how to use them.

Currently, many sites do this through Help text that explains what’s possible. Moving forward though, I think we’ll see more conventions emerge that use visual indicators to better communicate the availability of rich interactions.

Consider the shopping cart icon. No e-commerce sites explain what that indicates with inline Help text anymore. Over time, it becomes part of the vernacular online.

staffing:

I recommend having a full time interface, interaction, or Web designer—call them what you will—who is either capable of developing the visual design for a Web site or versed enough in the principles behind visual design to work with a visual designer. I say this because, in most cases, Web sites have moved beyond the simple navigation of information.

Web applications, instead, enable people to communicate with each other, to get work done, or to create and share content. These interactions require a holistic approach to task flows, information architecture, and more. Your core design talent needs to have the ability to see the big picture and translate it to a series of Web pages and/or UI elements. If that person can represent the big picture visually—all the better. If not, they need to communicate with a visual designer that can.

UI Design is about Compromise

Mike Padilla writes in Digital Web Magazine on User Interface Design - Taking the Good with the Bad. The articles describes the choices and compromises that take place during the UI design process.

Padilla offers this handy chart of example design decisions with their cost and benefits:

Some Contrasting Design Decisions

Costs and Benefits of Design Decisions

Design	Benefit	Cost
Shallow information architecture	Fewer clicks to find info	More clutter
Deep information architecture	Clean, reduced clutter	More clicks to find info
Small font	More information per screen	More difficult to read for some users
Large font	Easier to read	Less information per screen
Drop-down box	Selection amongst many choices using limited space	Hidden choices
Radio buttons	See all selections at all times	Additional space required, clutter
Icons	Quick recognition once learned, aesthetically pleasing	Must be learned
Text links	Always understood	Must be read, do not stand out as actionable items as much from other text
Abbreviations	Save space	Must learn or recognize
Full text	Easily understood	Requires additional space
Keyboard shortcuts	High speed of data entry	Must be learned
Point and click	Intuitive	Additional time required for interaction due to increase motor skills required

Understanding that compromise is part of the process is necessary in order to make more informed design decision and to defend these choices to stakeholders.

Without understanding the true nature of compromise in UI design, you will likely make flawed design suggestions. To effectively evaluate the cost and benefit of each design decision that affects the UI, you need insight across many fields, from cognitive psychology to human factors to graphic design. A large knowledge base centered on an understanding of how users interact with applications is necessary to accurately evaluate a UI. It is often not a simple black-and-white issue, because the respective costs and benefits have to be gauged relative to alternative solutions.

For example, the font on your web page may be small, and consequently a bit more difficult to read for some older users. That’s the cost. But it affords a lot more information on each screen, which means less scrolling. Less scrolling means fewer motor tasks and less cognitive load, because now with more information on a single screen, comparative tasks are more likely to involve information that is currently viewable. Now assume with this example that user demographics show that 90% of your users are between the ages of 21 and 30. So while the font may be more difficult to read than a larger size for some users, the net usability of the design decision is highest, compared with other solutions.

Four factors to use in measuring net usability:

When evaluating the net usability of one design versus another, a logical process should be followed to effectively evaluate the compromises that accompany each. To judge the good with the bad, you need a UI ruler by which to measure. You can assess the quality of a UI with a handful of factors:

• Ease of learning and memorability
• Efficiency of use
• Error frequency, severity, and recovery
• Subjective satisfaction

Depending on the ultimate use of the application, each factor may be of variable importance. For example, efficiency of use would be more important for a highly used application than for a brochure-like marketing website, whereas the reverse may be true when it comes to subjective satisfaction. Each UI design decision that is challenged can be evaluated by judging it against each of these four factors.

IxD in Business Week!

Liz Danico interviews Dan Saffer on his new book Designing for Interaction. Some bits & pieces from the interview:

A informal definition:

Interaction design is about behavior, how things work. I push a button on my mobile phone and something happens. Or I enter a fast food restaurant, walk up to the counter, and something happens. Defining what happens when a person uses a product or service is what interaction designers do.

The fourth approach to IxD - "genius design":

Each of the approaches has produced great products over the years, and perhaps none more so (because it is used the most often) than what I call "genius design." Genius design is when the designer relies on his or her own experience and skill to design, without any input from users. It's done by designers who either don't have the resources or the inclination or temperament to do research. Too often, it is practiced by inexperienced designers with little skill, but it can and has been used by many designers to create impressive things. Reportedly, the iPod was made with no user research, for example.

When Saffer employ's this approach:

Of course, even if you do have the resources and inclination for one of the other approaches, I find there are always moments on every project when I employ genius design. I have hunches and make educated guesses based on previous experience. One could argue (and many have) that this is why people hire designers: for this sort of genius.

Defining IxD as "making connections between people":

Traditional industrial design is about making a connection to an artifact: This is a great chair. Traditional communication design is about making a connection to information: Yes, I will attend the event this poster is advertising. Human-Computer Interaction is about connecting with the computer: I enjoy using my Mac OS X operating system. But interaction design, although it draws on all these fields (and many more), is subtly different in its purpose: to connect people via our products and services: I know you better because I read your blog.

As I think about it, an interaction is really a communication. It can either be one-to-one, like a telephone call. It can be one to many, like a podcast or a blog post. Or it can be many-to-many, like a giant system like the stock market. All these things are surrounded by tools that make the communication possible, and those tools, for the best experience, should be designed.

Recognizing good IxD:

In the book, I list the characteristics of good interaction design, things like trustworthy, appropriate, and smart. Things that are hard to visualize, although there are certainly visual cues for these things. And users certainly notice, usually unconsciously, both their absence and their inclusion. My mobile phone, for instance, is a beautiful piece of industrial design. But the interaction design is terrible. I simply can't use it easily and well to make phone calls and do all the other things a mobile phone does these days. It annoys me and causes me angst and embarrassment. It is the opposite of another trait I mention: clever. It doesn't anticipate any of my needs and tailor itself to help me accomplish them.

New technologies effect on the designer's sphere of influence:

The history of design can be thought of as the history of materials. Now that we've gotten this new material — the digital — wherever it goes, hopefully we'll go as well. Bill Moggridge says, for instance, that the reason interaction designers are getting involved in services now is because technology is involved in them. There are opportunities everywhere for interaction designers, in all areas of life. RFID and similar technologies are about to change the way we shop, cross international borders, and find objects. Robots are in our homes now, vacuuming floors. People are wearing devices on their arms to monitor their bodies. And the internet...well, don't get me started.

With all this technology, we really can't help but have an influence on people's lives, on public discourse, on the future of the planet. Certainly, I don't want to overstate the power of designers (that's been done enough lately), but I don't want to understate it either. We're almost an invisible force, shaping the tools that shape us as human beings, to paraphrase Marshall McLuhan.