paper & pencil

Sign Up Patterns #

This week I came across a couple of items all related to the sign up process. First, there is Luke Wroblewski's summary of a survey of sign up forms conducted by Smashing Magazine. Definitely check out the full survey report (part 1 and part 2) as it is interesting to see what most sites do.

Luke also references his own article, Sign Up Forms Must Die, which is an excerpt from his new book on forms, where he promotes "gradual engagement" - allowing users to try out a web service first before having to create an account.
The book: Web Forms Design: Filling In The Blanks.

Live by the Mockup, Die by the Mockup #

Luke's article, Live by the Mockup, Die by the Mockup, highlights a key point about mockups, that is they should not stand on their own. In order for mockups to be effective they need to:

- be accompanied by written description (use cases, annotations, etc.) of the functionality presented visually;

- be discussed with the client so that the mockups are viewed in the correct context.

When interface designers focus too much on mockups rather   than product solutions, the design profession may suffer. This   type of dilemma already exists for visual designers, who are   routinely called upon just to “make things pretty.” As   a result, every interface designer should focus on building   a reputation as a problem solver and communicating that through   the language of design and business. The presentation medium   will change, the need to solve problems will not.

Effective Prototyping Methods #

The following are notes from the Interaction08 session - Effective Prototyping Methods, presented by Jonathan Arnowitz of SAP Labs.

Video
Book site

• Sketching v.s Prototyping: not a dichotomy but a continuum
• Start 90% sketching, end 90% prototyping
• Everyone can prototype, prototyping is not always design, it's communication
• Transparency of the design process
• Don't start knowing exactly where you want to go, it's about making errors and fixing them quickly
• Exercise: define prototype = we all had different definitions
• Prototype = model of a design that is complete or incomplete, but is specific
• Most important design artifact in a software project
• Need to determine right level of specificity (phase of the project, audience, etc.)
• Everyone can prototype, as long as 1 person is in the driver seat
• Use the tool you know best
• Exercise: quick prototype of 1 screen of a contact system; we all made assumptions about the product
• Process: Understand users > Design UIs > Prototype > Ensure Usability
• Helps to verify requirements
• Select design criteria: ex. users should feel in control, speak the user's language, minimize user's memory load
• "Squishy", need to use your gut
• After prototype is done, set an expiration date on it and plan for that, communicate to stakeholders

Redesigning Sony-Ericsson's Product Catalog #

The following are notes from the Interaction08 session - Redesigning Sony Ericsson's Product Catalog, presented by Saskia Idzerda. She presented findings from a series of usability studies conducted around the world on the Sony Ericsson Mobile Phone Product Catalog web page. Check out the current page.

Unfortunately, the slides from the talk which show the design variations of the page don't seem to be online yet. But the video is available and they do a good job of showing the slides.

Notes:

• Was a product list but became too long as catalog grew from 10 to 20 to 70 different phones
• Customers indicated they wanted: 1) ways to filter the list and 2) summary info before the detail
• Usability Process: Created 3 throwaway protoypes > usability tests > from the findings created 1 prototype > usability test > final prototype > international usability tests.
• Used Agile development process
• 1st test with 7 testers in Sweden on all 3 prototypes
  • prototype #1 had a filter panel on the left with multi-steps, all white, mouseover photo provided detail
  • Didn't see the filter options, focused on the product photos
  • didn't see Next links in selection panels
  • got confused when combo of filter options and got 0 results
  • cannot underestimate the pull of product photos
• 2nd prototype had filter panel on left with expand/collapse categories of options
  • forgot selections when collapsed and wans't sure if list still couldn't take it into account
  • linked to large preview image
• 3rd prototype had 1 panel with all options visible and instant update of list, sliders for some options (size, etc.)
  • noticed more b/c of color choices
  • instantly updated list
  • size of the phone is an important selection factor
  • confused by how the sliders worked, did not get it at all
• Lessons learned
  • visibility is key
  • all controls visible all the time
  • immediate feedback necessary
  • avoid zero results
  • no innovative sliders
• 4th prototype included new marketing categories (In Focus = Camera phone, In Tune = Music Phone, In Style = Design Phones..) in tabs across top, filter panel also moved from the left to above the phone images
  • tested with 8 users in Sweden
  • users didn't see the categories, to separate from the phones
  • also even though some phones could play music they weren't considered music phones, those have additional functionality, same with camera phones. So, result is confusing to the user. Also, not easily translatable to other languages.
  • graphically the tabs looked like banners which resulted in users ignoring them
• Final prototype included categories within the filter panel, which remained above the images for better visibility
  • features written as user focused benefits "can take pictures" vs. "camera phone"
  • list is immediately update
  • as filters are chosen, any other filters that would result in 0 results is grayed out
  • click to preview w/large image and summary where filter panel was, instead of on mouseover, inline
  • comparison tool displays where filter panel is as needed, better imagery to "show" drag-n-drop
• International usability tests findings
  • everyone looked at phone images 1st
  • only US cared about styles
  • India users hated the color green, thought it was dull; everyone else said it was nice
  • No one noticed background image
  • 50% of China users preferred old design, tend to like dense layouts, to see all the phones at once
  • no one used the filters much in non-US countries
  • introduced an artificial progress bar to show the results were changing and it worked as the changes were quick and users didn't notice anything changed
  • users loved the drag-n-drop comparison tool but it had to be pointed out to them, didn't get it on their own
  • some filters had to be "only" (camera phones) and some had to be "and" (clamshell and slide out) so got a little confusing but result made sense to users
• what went live is similar to final prototype with some color changes
• Analytics since the implementation of the new design
  • 1/5 use the drag-n-drop comparison tool
  • filter options: 50% benefits (can take pics), 27% style (clamshell, stick, etc.), 22% category (music, camera, etc.)
• Usability studies were very valuable but they did see some conflicts with what occurs in reality
• about answering "can" people use it but doesn't answer "if" and "how"
• if & how users will use a feature is hard to test, hard to create the motivation in a test
• So, not a cure-all but still beneficial. Combine with other measurement tools such as surveys, field research and web analytics to get a more complete picture

Designing for SpaceTime #

The following are notes from the Interaction08 session - Designing for SpaceTime, Building in No Time, presented by Matt Jones of Dopplr. Dopplr is a site where you upload your travel itinerary, share it with friends, and it will show when connections of yours will be traveling to the same or nearby locations.

Slides
Video

Notes:

• Practices cybernetic serendipity, patterns to create unexpected and delightful results
• "Serendipity is looking in a haystack for a needle and discovering a farmer's daughter"
• Central object = the trip; where are you going = space and when = time
• Models: we make things to help us understand
• Dopplr: model of the future in spacetime
• Trying to find the perfect line through the world
• Inspiration: Recreating Movement
• How does a view of the past & future affect our interactions?
• Our social realities can be described as: Contextual, Interwoven, Fuzzy, Intertwingled
• Need to get more down & dirty with context; Tufte's recent redesign of the iPhone completely ignores context
• What we believe we cannot prove
• We're not even close to understanding how mobile devices devour our attention
• How to deliver bits of info in the right context at the right time?
• Interwoven + distributed: understanding how the very small has big implications
• Check out: Native to a Web of Data
• Web as coral reef: both architecture and organism
• Dopplr: web of data and movement
• Can we make a web site that no one has to go to?
• Deliver value wherever you need it
• Designing a distributed, interwoven identity
• Trying to focus on delight 1st; ex. hotels putting a rubber duck in your bathtub
• "Rational Delight"
• Fuzziness - no fuzziness on city search. Make a good guess on things based on past patterns; ex. searching for a city gets difficult when you hit N. America where there are 95 different Springfield's
• Ask for help when don't get it right; have users help correct
• Inject fuzziness in other places: you're in Oakland and a friend will be in SF around the same time
• Also show who's leaving or arriving just outside of your dates
• Play to find the perfect line; provide fuzzy ways to help people find the perfect line
• What you can do w/small teams (doesn't scale); main design tool: IM and speaking, continuous discussion; do you need to scale?
• Loves concept models: boundary objects create discussion
• To have 1 good idea you need lots of ideas
• Idea scaffolding: lots of sketching and talking
• You're never done!
• Prototype and test new features quickly
• Use tags to mark new features, versions
• Co-Design
• Constantly shifting, like the Hogwarts staircases
• Choreographer of SpaceTime
• "Creating the controversial conditions for an idea to survive"
• Trying to be more public with their ideas, opening the conversation up to users

Clear Signage #

Ever walk into a place and it did not match your expectations? A sign I saw in Savannah does an excellent job of setting expectations:

The sites we build need to achieve the same effect. That is we need to help our clients provide better signage. Signage is everywhere on a web site: it's in the visual design, navigation, headings, content and even the error and confirmation messages. All of this should reflect the purpose and personality of our customers in order to create a better user experience.

Don't Make Me Click #

The following are my notes from Aza Raskin's session, "Don't Make Me Click", from Interaction08.

• Fundamental web tension between boring and amazing
• Need to aim for just right somewhere in between these two
• To the user, the interface is the product and they lose sight of the real focus of the product
• The best interface is NO interface
• Ironic: need to design the best interface so that there is no interface, interaction designers need to work on minimizing interaction
• What's better than a shovel? A hole.
• Can't give in to the seduction of interaction
• With Google you can track flights, track shipments, do calculations, etc. But this is all done from ONE search field
• Our job is to say no
• RIA (Rich Internet Application) = MIA (Materialistic Internet Application)
• Want to aim for ZIA (Zen Internet Application) - act w/o doing
• When interaction (clicks) increases, content decreases and this is not good
• Don't force users to ask for more content, just give it to them
• Most people click on result #10 than #9 so why paginate - Continuous Scroll, ie. Google Reader. Interaction decreases, content increases.
• Scroll tabs - add tabs to the bottom instead of to the right, show breaks in scroll bar
• Bret Victor - worrydream.com
• Interaction decreases does not equal boring
• www.flashearth.com
• Take what already exists and try to remove unnecessary interaction
• Songza.com - youtube for music
• Inappropriate forms - ex. Google Calendar. See 30boxes.com for how to do it better.
• Another Bret Victor project - drag-n-drop To and From buttons on a map
• Don't force me to ask for content, just give it to me

Concept Models #

The following notes are from the Concept Models session, presented by Dan Brown, at Interaction08.

Presentation slides - click on Download File as the text is all garbled on the slideshow but the PDF is fine.
Video

• Have to create the tools to use in creating the design
• You have requirements now what? Sketch, scenarios, flow charts, mockups, wireframes, whiteboarding
• What if the requirements are unclear or incomplete?
• Can use Concept Models to flesh out underlying concepts (nouns) and connections between them (verbs)
• Ex. Design an expense report. Nouns = Employee, Expense, Amount, Manager, etc.
• Concept Models represent reality through nouns connected to verbs
• Helps to
  • establish an agreed upon vocabulary
  • bring out questions
  • understand new domains
  • synthesize new ideas and start designing
  • determine key concepts to focus on
  • determine relationships & interactions you need to design for
  • define scope, minimize concepts you don't need to focus on
  • define views (pages, states) and components (elements)
• From the model then blow out detail as needed for each concept. what should this look like online?
• Ex. concept is Expense, what are the components - amount, receipt, category, etc.
• The determine how to represent the lines = interactions, online?
• Collect & categorize all possible interactions which can then map to a pattern.
• Determine a particular kind of relationship always map to a particular interaction?
• Steps:
  1. Gather concepts
  2. Create connections
  3. Research and elaborate
  4. Validate concepts and connections (are these the right ones?)
  5. Simplify - remove redundant or unnecessary concepts
• Always ask questions!!
• Share concept models with stakeholders
  • set expectations, what this is, purpose, how to review it
  • generate questions
  • explain implications: if we take away X users will not be able to...
  • go in with a set of questions, generate conversation: what's missing?, are these correct?, do these relationships matter?, correct labels/wording?, can we enforce these relationships?
• Final thoughts
  • use when underlying structure is unclear to help get clarification
  • use to help escape the page metaphor
  • use to bridge gap between what & how
  • helps in understanding the problem and coming to a solution
  • useful in translating concepts into objects for developers, have them validate concepts

Fire Bad. Tree Pretty. #

At Interaction08 I attended a session called "Everyday Objects" presented by Bill DeRouchey. It was an entertaining session on the language of interaction. I highly recommend checking out the presentation and video:

In the meantime, here are my notes from the session:

• People use visual cues and past experience to figure out an interface
• Language of interaction evolves & spreads (ie. mouse pointer used in ads)
• Symbols start with 1 meaning; extend and add more meaning
• They can translate across products (ie. play/pause button in place of on/off on the LG washer & dryers)
• Meaning can survive a long time (ie. stacked list of short words)
• Need to see what people see; seek inspiration, look at objects around you
• Mixing - football stats integrated into the display
• We create and curate this language in the interfaces and interactions we design
• Components of language:
  • Elements - size, contour, motion, etc.
  • Relationships - proximity, repetition, etc.
  • Principles - clarity, appropriate, purpose, delight, etc.
• Command or label?
• Clarity or confusion? warmer v. colder; turbo cool v. express chill??
• Avoid redefinitions
• Colors used for meaning or just decoration? How did green come to represent start/on and red for stop/off? Bill's theory - it started with the "cavemen": Fire Bad. Tree Pretty.
• Icons used for habit or meaning? (ie. floppy disk icon = save)
• Gesture natural or cryptic? (ie. motion sensors in bathrooms)
• Priority, where is the focus? Create a hero (ie. Big yellow pause button on the TiVo remote)
• Clarity - action = results
• Appropriate, is it really necessary (ie. TV Remotes)
• Purpose - be yourself. Best. Interface. Ever. = garage door opener. single button, no label.

Check out Bill's www.historyofthebutton.com for more interface fun.

Interaction08 is Better #

I just returned from the very first Interaction Design conference and I'm exhausted and excited from all the fabulous ideas, people and conversations. I'll be posting my notes from the sessions but in the meantime here is a wrap-up from David Armano. This quote from his summary is excellent:

As interaction designers—or whatever we want to call ourselves, our goal should be to make things better.  We can make people feel less frustrated, more empowered and confident.  We can make people more productive, less stressed.  We can actually make lives better.

Absolutely!! This jives with the internal tagline I came up with as I integrate IxD and UX thinking and tools into our process: "Reduce Frustration, Increase Joy".

I also loved David's "clover" graphic of the agency ecosystem:

Account Sign-in: Many Mistakes to Learn From #

2-part UIE article I've sent out to our teams:

• Account Sign-in: 8 Design Mistakes to Avoid
• 8 More Design Mistakes with Account Sign-in

One of my favorites is "Mistake #10: Requiring Stricter Password Requirements Than The NSA".

Feeding Frenzy for IxD'ers #

Coroflot article attempts to define what interaction designers do in response to the "feeding frenzy going on".

The typical back-story for an Interaction Designer, as far as there appears to be one, features someone working in one of the above professions, finding certain aspects of a project falling through the cracks. Whether the project is a website being built or a laser printer being designed, it falls to someone to start making the calls about what it feels like to use it: whether the button layout makes sense, whether the next screen in a navigation structure follows logically, how you turn the thing on.

I certainly got into this profession by filling in gaps between what the project managers (myself included) and developers do.

Educating through the UI #

Evolve Your User Interface To Educate Your Users provides numerous ideas for providing assistance to your users within the UI.

The help section of most applications, Web-based or otherwise, end up being used by the power users who are already trying to figure out every nook and cranny of the application. The proper way to help users understand how your application works is to bring the help section to them and in a format that can  easily be understood.

Some of the ways to do this are:

• Inline
• Examples of correct content/data
• Contextual tips
• Descriptive default data (ex. email@domain.com in an email address field)
• Real-time validation

Playgrounds for Data: Inspiration from NYTimes.com Interactives #

Very inspiring article on UIE -Playgrounds for Data: Inspiration from NYTimes.com Interactives. Really great ideas for creating visualizations of data to tell a story.

The 5 Competencies of UX Design #

Steve Psomas describes the 5 Competencies of UX Design in UX Matters.

1. IA
2. IxD
3. Usability Engineering
4. Visual Design
5. Prototype Engineering

For each he outlines the questions to ask yourself and the options for doing the groundwork and delivering the output. The author advises using these competencies to help determine you strengths and weaknesses and as an individual and as a team.

If you, like me, are deep into making design decisions day after day, you might at times become disoriented and need to realign your thinking about the appropriateness and purpose of the task at hand. It’s important that we come up for air once in a while, not only in the midst of creating our deliverables, but also when managing our time and our team’s expectations.

Our industry is at a crossroads, scrambling to adjust to the demand for richness in Web applications. Design principles, processes, tools, and resources are changing, too. So, now we need to clarify the value of UX design and the competencies it offers to the greater product development process.

Intuition, Pleasure and Gestures #

Cooper article: "Intuition, Pleasure and Gestures"

Intuition:

    There you have what people really mean by "intuitive:" easy to explain,     powerful in its implications, impossible to forget. You get that through systems     that possess a clear, coherent internal logic that feels natural and obvious.     Of course, it can take hard work to figure out those "natural and obvious"     behaviors; we interaction designers call that work "interaction design."

Pleasure:

    I believe that this hits us at a deep, animal level. Just as we get pleasure     from the form and tactility of good industrial design, we get pleasure from     good interaction design, both as we learn it and as we work with it.     Learning things that make sense, working with tools that work right; these     things make us East African Plains Apes happy right down to our DNA. So instead     of saying "intuitive" or "easy-to-use," at Cooper we often     talk about designing interactive products that deliver power and pleasure     to the people who use them.

Gestures

    I believe that part of why I enjoy it so much comes from something we don't     get to do much when working with computers and other interactive tools: I     do the gestures from muscle memory, rather than cognitive memory, just like     I do with my typing on my computer keyboard. Most of the time tools that run     on software tax our cognitive capacity but leave the intelligence that lives     in our bodies relatively untapped, which makes us East African Plains Apes     a little uncomfortable; using those gestures makes me a happier animal.

Illuminate a Clear Path to Completion #

Luke Wroblewski presents the findings of a usability study on Primary & Secondary Actions in Web Forms. What's interesting about the results is that participants performed the task the quickest when there is no visual distinction between the Submit and Cancel buttons. However, in discussions with the participants they said they liked the visual distinctions better as it assured them they were clicking on the right choice. The analysis then is sometimes it's better to slow users down if it will results in less mistakes.

Common Pitfalls to Social Web Applications #

UIE 2-part article on "Common Pitfalls to Social Web Applications and How to Avoid Them" - Part I and Part II.

Flipping the pitfalls around into guidelines, these are...

1. Build for one user at a time, not the whole market
2. Focus on fewer things
3. Continuous improvements
4. Own up to your mistakes
5. Full-time management & personal attention
6. Build archived knowledge
7. Provide personal value
8. Enable recommendations
9. Set a good example
10.Focus on your long-term audience not the the "drive-bys"
11. Have a business plan that is more than just to grow big

Speed Up Application Development #

Companies like Citigroup are investing in simulation software, like iRise, to help speed up development.

At a time when businesses are asking CIOs to help deliver innovative changes quickly, old-world application development schedules simply may not fly. Simulation tools, targeted mostly toward business analysts, offer a novel solution. They also fit in well with the agile programming trend.

Continuous Little Changes #

Jeff Patton asks us in his blog to Consider Changing Your Product’s UI More Frequently. Prompted by a discussion with Alistair Cockburn, who just released the 2nd edition of Agile Software Development, on the flow of decisions in software development, Patton goes further in wondering how the frequent changes affects end users.

B'Bye Button #

Joel Spolsky has written a short and quite funny article called Choices = Headaches. In the article he describes the 9+ options available when shutting down a computer and slims them down to 1 option... the "b'bye" button.

This highlights a style of software design shared by Microsoft and the open source movement, in both cases driven by a desire for consensus and for "Making Everybody Happy," but it's based on the misconceived notion that lots of choices make people happy, which we really need to rethink.

Freedom of Fast Iterations #

A new UIE article looks the design cycles of Netflix and Google: The Freedom of Fast Iterations: How Netflix Designs a Winning Web Site.

This "try and see" attitude is taking hold. The designers at Netflix told us they try out many new features with every site iteration to keep pace with the rapidly changing landscape of the Web, as well as their customers' increasing comfort with the current site. Much of what they do try doesn't survive to the next iteration.

So how often does Netflix update its site? Every 2 weeks.

Every 2 weeks they make significant changes. They understand that some of the changes will work, but most won't.

The article summarizes the benefits and side effects of fast iterations.

Five Usability Challenges of Web-based Applications #

A new UIE article summarizes the Five Usability Challenges of Web-based Applications to help advertise their latest research report.

#1 Scalability

Many e-commerce sites give users the option of storing their shipping and billing information. What happens when users have multiple payment methods (such as a work credit card and a home credit card) or have multiple shipping addresses? For some gift sites, such as Proflowers.com, users could have many people they wish to send flowers to on a regular basis. That implies building sophisticated address book functionality into their order processing application.

#2 Visual Design

Take the common practice of supplying an “Advanced Search” capability alongside the standard search. A typical implementation will have a text box (for entering the query), a “Search” function (for the standard search), and an “Advanced Search” function. Should the designers make both functions into buttons? Will that confuse the user? If they make “Advanced Search” a link, will users understand it’s an alternative command (versus an explanation or some other site feature)?

#3 Comprehension

Web-based applications often help people by doing things outside their expertise. They turn to the application to help guide them through a decision making process they couldn’t do on their own. Yet, if they make the wrong decision, it negatively affects their experience and their relationship with the organization.

#4 Interactivity

Users don’t always follow the “happy path.” They enter data incorrectly. They decide they need to go back and change something they’ve already entered. They discover they need to learn more about what the application is asking of them and, thereby, need more detailed assistance.

#5 Change Management

While users are resistant to change, they are willing to do it when given enough support and structure. The problem with quick changes often happens when users frequently use an application and the old design conditioned them to things being a certain way. Even when the change is to their advantage, they often need warning and support to go from the old to the new.

Real Wireframes Get Real Results #

Stephen Turbek writes on the need to make wireframes more "real" in the B&A article: Real Wireframes Get Real Results.

Real people don’t understand wireframes
Usability tests are done to get early feedback on content and functionality decisions from people outside the project team. These participants, unfortunately, are not sure how to respond to a wireframe. It is not intuitively clear what they should be doing, which site they are looking at (public site, intranet, client site)—it may not even be clear that they are looking at a web page. This lack of information and context adds a bit of cognitive friction to each step in the process. This level of confusion results in less confident answers and fewer opinions.

The comments that follow the article are more useful in that it provides a good set of pros and cons for testing with low-fi and high-fi wireframes and prototypes. For example, with a high-fi prototype testers may expect the functionality of the prototype to work but on the other hand users don't have as much context available to them when testing with low-fi wireframes. All seem to agree that you need to manage the test participant's expectations and provide context. Use of real text and making links and buttons looks clickable is a must for all types of wireframes and prototypes.

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.

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.

One-screen vs. Multi-Step Hotel Reservations #

Max Starkov and Jason Price of Hospitality eBusiness Strategies (HeBS) decide in favor of the multi-step form for booking engines. The article lists an extensive set of pros for the multi-step form and cons for the single step. Here are just a few:

User-Friendliness:

• The multi-step booking process 'is easier on the eye' as it presents the information in 'installments', one step at the time.
• The one-screen booking screen is exceptionally busy. The information is presented in one 'concentrated chunk', requiring extra time and focus on behalf of the user to figure out what is what, and where to begin and end.
• Layout of the one-screen is confusing: Do you start top left and go to the right, and then move top to bottom (i.e. the Yahoo model)? Do you read the information column after column as it is in your local newspaper?
• The fonts are too small and difficult to read (think senior citizen, baby boomers that all wear at least reading glasses, etc.).
• The room descriptions are too 'skinny'-you have to scroll down to read more as opposed to having a page describing room descriptions and availability as it is currently on all major brands and intermediaries.
• Rich Media: all of the images are so small and un-appealing.

Elements of IxD #

On the UXMatters.com, Dan Saffer provides an excerpt of his upcoming book, Designing for Interaction: Creating Smart Applications and Clever Devices. In the excerpt, Dan describes the building blocks of interaction design:

• Motion
• Space
• Time
• Appearance
• Texture
• Sound

From the description of Time:

Time creates rhythm. How fast something pops up on the screen or how long it takes to complete an action like renewing your driver’s license controls the rhythm of the interaction. Games are often about rhythm: how many aliens come at you at any given moment, or how long does it take to complete a level. Rhythm is also an important component of animation: how quickly does a folder open or close on the desktop, how slowly does a drop-down menu slide open. Interaction designers control this rhythm.

David (heller) Malouf posted the additional elements of Context, Linguistics, and Dialog. Dan and Dave discuss these a little further in the comments.

Usability of Functional Specifications #

In early 2005 Jason Fried of 37signals declared "Don't write a functional specifications document."

Functional specifications documents lead to an illusion of agreement. A bunch of people agreeing on paragraphs of text is not real agreement. Everyone is reading the same thing, but they’re often thinking something different. This inevitably comes out in the future when it’s too late. “Wait, that’s not what I had in mind…” “Huh? That’s not how we described it.” “Yes it was and we all agreed on it — you even signed off on it.” You know the drill.

Instead the 37signals team prefers to get agreeement on a 1-page story describing the application and then start building the interface - "the interface is the functional spec".

The comments following the article contain some interesting anecdotes that go a long way in supporting "the interface is the spec" method. Many of the commenters agree but say you still need supporting documentation, annotations, etc. to identify the "what if's", assumptions, and other notes that are not easily inferred from the interface.

Yahoo! Pattern Library Open to the Public #

Now available to the public on the Yahoo! Developer Network is the Design Pattern Library and a companion UI Code Library.

The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM  scripting, HTML and AJAX. The UI Library Utilities facilitate the implementation of rich client-side  features by enhancing and normalizing the developer's interface to important elements of the browser  infrastructure (such as events, in-page HTTP requests and the DOM). The Yahoo UI Library Controls produce visual, interactive user interface elements on the page with just a few lines of code and an included CSS file. All the components in the Yahoo! User Interface Library have been released as open source under a BSD license and are free for all uses.

Each pattern contains the following information:

• Summary
• Example image
• Use When
• Solution (Layout, Interaction)
• Rationale
• Accessibility
• Links to related patterns
• Links to where it is used on Yahoo! sites
• Link to the related blog entry on the Yahoo! User Interface Blog
• Link to code example, if available

Not all of Yahoo!'s design patterns are available to the public but the site says they hope to release them monthly.

Joel's Introduction to Great Design #

Joel Spolsky published his first draft of Introduction to Great Design, where he begins his quest to write a series on "great design".

While most products were became increasingly incomprehensible, like the typical home entertainment remote control, with dozens of mushy little buttons marked "MTS" or "SURR" or "PTY" that nobody has any hope of understanding, something else was happening: a very few, very good designers were, somehow, coming up with truly great designs that were beautiful, easy to understand, fun, and which made people happy. You know who they are because those products became bestsellers. The Apple iPod. TiVo. Google. Even the Motorola RAZR, which is so hard to turn on, is, in most ways, a great design.

The first article in the series aims to define design. His definition simply boils down to making tradeoffs between constraints, many of which are conflicting.

Every new feature is a tradeoff, between the people who could really use such a feature and the people who are just going to get overwhelmed by all the options.

Joel ends this first installment on the importance of design and set things up for the next article, where he will define "great design."

Design is something you only have to pay for once for your product. It's a part of the fixed costs in the equation, not the variable costs. But it adds value to every unit sold. That's what Thomas C. Gale, the famous Chrysler automobile designer who retired in 2001, meant when he said that "Good design adds value faster than it adds cost."

(Footnote: AUTOS ON FRIDAY/Design; He Put a New Face on Chrysler, The New York Times, Published: February 9, 2001, by By JIM MCCRAW , Late Edition - Final, Section F, Page 1, Column 1)

Google UI - Both Science & Art #

DM News reports on Google's plans to keep their home page clutter-free. Part of this is due to co-founder Sergey Brin's directive "don't put things in people's way." And partly due to the extensive and detailed user research and testing they conduct.

The company combines internal testing, user studies, log analysis and customer feedback to constantly track its user experience. And there is room for mistakes and adjustment.

"As we launch products, we expect not to get things right on the first try," Fitzpatrick said.

Experimentation, analysis and iteration by closely seated Google engineering teams of three to five executives help maintain a friendly user interface.

Thoughts on Multifunction Devices #

Lada Gorlenko posts a December 6 Forrester article, "Devices, Media, & Marketing First Look",  on the IxDA Discussion List.

The article includes some rules for "portable multitasking":

No. 4. Watch users carefully. In his book Democratizing Innovation, Eric von Hippel cites that depending on industry, 10% to 40% of customers modify products for their own use. Keeping a close eye on the habits of these "lead users" is critical to innovating quickly and avoiding the risk of multifunction overload. One interesting example is the iPod shuffle. After seeing that lead users of the iPod were using the shuffle feature with great regularity, Apple decided to actually strip down features to better serve these users at a lower price point. This is a great example of consumer-driven innovation — going against the multifunction device tide — with great success, by keeping a close eye on users.

The Need for New Interface Metaphors #

Amy Wohl writes in IEEE Spectrum on the need for new interface metaphors and how some of these have begun to surface.

Sources for interface metaphors abound. In the past, we leaned heavily on the world of the office and its folders and desktops, because we thought we were building interfaces mainly for office workers. But today, information work and information workers are everywhere. The FedEx carrier is an information worker, collecting data on packages picked up and delivered and submitting it to FedEx's giant, very accessible, online database. Retail store clerks may be information workers when they enter new inventory into the store's database as they stock the shelves. Nurses are information workers when they feed notes previously scrawled on illegible or inaccessible charts directly to digital systems, making the data available to the patient as well as the doctors anywhere, anytime.

This means new metaphors. Many will come from life sciences. Others may come from the health care or other industries, as these become information-dense environments. An interface for a next-generation technology might come from the gaming world, where fast visualization metaphors abound. What is sure is that someday our great-grandchildren will look back and laugh at the unsophisticated ways we accessed and navigated data.

The author goes on to describe new interfaces being researched and developed that fall under three types of interfaces:

1. Browser
2. Navigating large collections
3. 3-D

(via Montague.com Knowledge Base Editor)

Contextual Help #

The membership creation screen on the BBC web site is an interesting example of providing contextual help. There are links such as "What is a secret question" beneath the field labels. And additional explanatory text appears to the right of a field when it is in focus. Lastly, audio help is available.

(via IxDA Discuss)

UI components for ASP.NET #

ComponentArt Web.UI 3.0: The Essential Suite of Advanced User Interface Controls for ASP.NET

lots of examples to play with and many in multiple running modes.

(via IxD Discuss)

AJAX & Interface Design #

Luke Wroblewski's article, AJAX & Interface Design, examines some of the design implications of "quick, incremental updates" that AJAX enables.

AJAX allows every element within a Web interface to be individually and quickly updated without affecting the rest of the interface. This, of course, is not what most Web users are accustomed to. Initiating an action within most Web sites triggers the inevitable blank screen and page loading process. Though not very responsive, the full-page update makes it very clear to users that their action has resulted in a reaction and that a response will be available as soon as the page is refreshed. Because AJAX-based updates are very fast and incremental (often affecting only a small portion of the UI), users may not notice them -especially when they are used to seeing full-page rewrites.

IxDG Resource Library #

The Interaction Design Group (IxDG) launched a new Resource Library:

The IxDG Resource Library is a repository of information about interaction design (IxD) that the IxDG community has created. It includes documents, compilations of discussions from the IxD Discussion mailing list, and descriptions of and links to many interaction design resources on the Web. IxDG members may also comment on resources and contribute items to the Library.

Queer Eye for the Toolbar Guy #

Creative Bits has a really good overview as well as tips and guidelines on toolbar icon design for OSX.

The urge to be clever and inventive in design is a natural one, but with toolbar and application icon design, you are taking people's gut reaction into account. An icon needs clarity above all else. You have under a second to communicate a function no matter how complicated or esoteric.

let word do it #

Rick Schaut blogs on the dangers of "dumbing down" software: Let Word Do It:

Making smart software isn’t about handholding allegedly stupid users. Frankly, that kind of thinking is just plain foreign to me. Aunt Tillie is a figment of Eric Raymond’s imagination, and there she should forever remain. I don’t make software for Aunt Tillie. I make software for real people who need to get real work done.

Guide to Web App Technologies #

Luke Wroblewski and Frank Ramirez published a guide on the various front-end technologies available — Web Application Solutions: A Designer's Guide.

Overview: Web Application Solutions is a guide that helps designers, product managers, and business owners evaluate some of the most popular Web application presentation layer solutions available today. We compare each solution through consistent criteria (deployment & reach, user interactions, processing, interface components & customization, back-end integration, future proofing, staffing & cost, unique features) and provide an overview, set of examples, and references for each.

Yahoo! Pattern Library #

From the 2005 IA Summit: Implementing a Pattern Library in the Real World: A Yahoo! Case Study

This presentation will discuss the realization of the need for a pattern and standards library at Yahoo!, the process for defining the requirements of a repository and how the library would be implemented and stored, the building of the CMS tool and the process for defining the lifecycle of a pattern. We will also discuss the organizational challenges, the process for evangelization, for authorship and consensus for use in the lifecycle of the patterns themselves.

History of the Tab #

A Technology Review article, Keeping Tabs, provides a brief history of the tab to organize information.

It took decades to add tabs to cards. In 1876, Melvil Dewey, inventor of decimal classification, helped organize a company called the Library Bureau, which sold both cards and wooden cases. An aca­demic entrepreneur, Dewey was a perfectionist supplier. His cards were made to last, made from linen recycled from the shirt factories of Troy, NY. His card cabi­nets were so sturdy that I have found at least one set still in use, in excellent order. Dewey also standardized the dimension of the catalogue card, at three inches by five inches, or rather 75 millimeters by 125 millimeters. (He was a tireless advocate of the metric system.)

Even the Library Bureau did not offer a convenient way to separate groups of cards, apart from thin metal partitions that wrapped around them, or taller cards. The tab was the idea of a young man named James Newton Gunn (18671927), who started using file cards to achieve savings in cost accounting while working for a manufacturer of portable forges. After further experience as a railroad cashier, Gunn developed a new way to access the contents of a set of index cards, separating them with other cards distinguished by projections marked with letters of the alphabet, dates, or other information.

(via dave heller)

ucd process visual #

fantastic diagram of the user-centered design process with specific tasks defined for the IxD'er and the Usability Engineer. Created by John Stickley for PeopleSoft.

more tips for personas #

kim goodwin's new uie article Perfecting Personas offers some good tips to keep in mind when developing personas.

represent behavioral patterns, not job descriptions

A persona answers critical questions that a job description or task list doesn’t, such as: Which pieces of information are required at what points in the day? Do users focus on one thing at a time, carrying it through to completion, or are there a lot of interruptions? Why are they using this product in the first place?

keep your set small

Ideally, you should have only the minimum number of personas required to illustrate key goals and behavior patterns. … The important distinctions among personas are behavioral, not demographic.

marketing and sales targets may not be the same as your design targets

If you were designing an in-flight entertainment system, a frequent business traveler—every airline’s most valued customer—would be a tempting design target. A business traveler would actually make a poor design target, though, because she would be too familiar with flying and with using computers and other gadgets. If you design for the business traveler, the retired bricklayer going to see his grandchildren won’t be able to use the system. If you design for the bricklayer, you may need to add a little something extra to satisfy the business traveler, but the bulk of the interaction will satisfy them both.

keep the personal details to a minimum

Personal details can be fun to come up with, but if there are too many of them they just get in the way. To avoid this problem, focus first on the behavior patterns, goals, environment, and attitudes of the persona—the information that’s critical for design—without adding any personality.

use the right goals

Most persona goals should be end goals that focus on what the persona could get out of using a well-designed product or service. End goals may involve the work product th