The Internet is great for taking a rapid look at what your competitors might be doing as you design a user interface. While this is a valuable learning opportunity, it can also be dangerous and inappropriate for your design.
The biggest problem I have found, is that user interface approaches or design elements do not carry neatly across contexts. Each design context is unique. By design context I mean a few things:
A forcing function is a constraint where the user "is forced" to complete a task based on a limited, paired down set of features or controls.
Forcing functions help streamline, simplify or minimize how a user interacts with a design. Designers benefit from this interaction design technique by reducing navigation redundancy, task effort and the complexity caused by "feature frenzy" (see my previous article on feature creep).
Not all forcing functions are based on good design decisions. Successful designs that make use of the forcing function interaction design technique are based on an empirical understanding of user default behavior, task expectations, error and failure analysis and context of use observations.
When should you use "forcing functions" in your design?
When you want to:
- Constrain a user interaction
- Speed up or re-direct a task
- Limit an interaction
- Eliminate confusion
- Simplify a design
- Protect users from danger or hazards
When forcing functions go wrong
Feature-forcing (making users interact with features they don't want) tends to be the end result of inappropriate use of the forcing-function technique. A forcing function is a disciplined use of force, the way a mother would give her child what they need, not what they want.
In general, products that lack good usability are characterized by designs where users are more error-prone, where defaults are inexact, where layout or instinctive behaviors don't feel right. In general designs that include error handling and/or error recovery as a component of the user experience, are lacking a forcing-function. This isn't to say error-handling is bad, it's just that many times error prevention should be the focus not error recovery.
Making a user do something an elegant way is far better than making a user do something a mediocre way and then offering them support as they fail and recover from the error.
The two extremes of forcing functions are too much force, and too little force. An example of too much force, is like making a user interact with implicit rules, hidden actions or metaphors that are unnatural. An example of too little force is making a user 'hunt around' to make something important happen (also a potentially inappropriate use of the progressive disclosure interaction design technique). DVD remote controls are a hideous example of "design minus forcing functions". Too many options get you in to trouble quickly.
Getting the right balance of force is important. Force can be a powerful design tool, but it can also be oppressive: poor user adoption is often the result of force that is difficult for the end user to get used to. When designing a forcing-function, there needs to be a good reason (user-validated) to justify the use of the technique.
Why do we use forcing functions?
Forcing functions are the mothering instinct of user-centered design. A forcing function should feel natural and transparent to the user. Users should never question why there is no "choice" in completing their task. The "dead-end" or directive action required should seem natural and protective either by way of the product experience or by way of the interface that limits all other options in that momentary task.
A razor blade company, after watching women shave their legs in the shower (wearing swimming costumes), realized that a design flaw would potentially cause the razor to slip, leading to dangerous cuts (and lawsuits). The razor handle and blade were constrained for wet hand use to prevent cuts or mistakes holding the razor.
An automotive manufacturer, after observing truck drivers driving on the highway, realized that an incoming email, while driving--could only display two sentences of text, before resulting in driver distraction and an accident. The messaging system was constrained to show no more than a short two sentence summary of the message- the rest of the message available when the vehicle was stopped.
The forcing function allows a design to follow user intuitions based on their expectations, derived from studying their behavior, environment and context of use.
However, designers should take precautions against imposing this powerful interaction design technique without first understanding the user task flow, context of use and error scenarios involved.
Frank Spillers, MS
When the term design is used it can mean many things, depending on who you are and which conversation you are having. Rarely do people stop to compare 'mental maps' and clarify which type of design they are talking about!
I believe this has to do with the multiple definitions of design and the lack of awareness of each specific type of design, its function and timing in a process. The other factor being how familiar you are with "design" based on your past experiences with different design roles.
Here are some examples of conversations I have and hear frequently that cause to stop and ask "What type of design are we talking here?":
- "We'll take care of that when we get to design"
- "That's something the designer will have to figure out..."
- "We're starting design now..."
- "We're bringing in a designer..."
- "Here are some early design concepts..."
- "This will be decided by the designer"
- "Have you started design yet?"
- "Why are these designs in Latin?"
- "The design looks great!"
- "This isn't the final design, we'll get to that later..."
Since the word "design" means many things to many people, let's define design as seen from a usability consultant's perspective.
Design for the Mind
Design that impacts cognitive processes (fit to the mind) including interpreting and understanding the experience.
#1 User Interface Design: Screen layout and design that focuses on user interactions and screen behaviors. User Interface (UI) design is an important component of user-centered and task-oriented design. The focus of UI Design is to improve the “user experience” or usability of the design. Since the mid 1980's, UI design has refined an understanding of human behavior and screen design. Also called "GUI" design, often confused for combined design and programming (see this post). UI Design is often seen as symbolic of green-screen era interfaces or coding, since developers used to be UI Designers before it was recognized that this was a special skill set...
#2 Information Architecture: Skeleton mock-ups or "wireframes" of screen interactions, layout, navigation and features. Used to review, concept and test initial functionality. Information Architecture (IA) is officially unrecognized by academic institutions, because it overlaps too closely with the already existing field of UI Design above. Few realize that IA was invented for commercial purposes originally by Argus Associates in the late 90's, (Rosenfeld & Morville, yes, the polar bear book guys) to promote consulting and book sales, as revealed by former employee Keith Instone at his 'alphabet soup' talk a few years ago in Portland, Oregon.
#3 Interaction Design: Focuses on how the user interacts with a page, application or product. Interaction design follows a task centered design approach ensuring the flow of the interaction as the central goal. Interaction design predates the Web world, and finds its roots in the wider field of Human Computer Interaction. Interaction design is a more general umbrella that many working on Web 2.0 interfaces and web applications prefer, since IA appears stuck in web-page centric paradigms.
Sanity check: Are the three design disciplines above different? Not really, their goals are all the same.
Design for the Heart
Design that impacts sensory processes (fit to the emotions) including the feelings and emotional or affective qualities of the experience.
#4 Graphic Design: The "eye-candy or look and feel". Graphic design is widely known and it's similarity to UI Design in what is often called "visual design" by people like Luke W at Yahoo! (Luke is a graphic design by background but does great UI design and visual design today).
In a usability process, once wire-frames are finalized, they are graphically treated to enhance the interaction design with aesthetic flavor. Graphic design focuses on enhancing layout, buttons, colors, icons and branding elements. The focus of graphic design is to improve the “look and feel” or stylistic aspects of the design. Because graphic designers operate from the heart, they are often accused of producing "fluff". If you give a graphic designer user interface specifications, however, their results can be outstanding. I see it every day at Experience Dynamics in Portland.
#5 Interactive Design: This Art college degree type is largely a hybrid discipline that captures a little of everything. An Interactive Designer produces good Flash pieces, animation, graphic design and some database programming or HTML. At the heart an Interactive Designer is great at graphic design and has a sensitivity and sensibility for usability. I taught Interactive Designers at the Art Institute of Portland (Oregon USA) and I kept telling the school the course should be called "Interaction Design" not "Interactive Design" but they wouldn't listen! My mistake.
#6 Emotion Design: Emotion design comes from the field of usability and product design. Emotion design is concerned with the specific social, environmental, personal and intimate qualities of user experience. Emotion design is a fringe discipline within the usability and user research communities that is gaining an "I told you so" voice with products like Apple's iPhone creating so many "ooooh, ahhhhs" from customers. Emotion design is an approach that can inform the outcome of any of the design types. e.g. "This user is influenced by this perception, expectation, color, shape, feeling..."
Design for the Body
Design that impacts anthropomorphic processes (fit to the human body) including the social and physical contexts of the experience.
#7 Industrial Design: Physical products that we can all relate to...the most obvious-- a mobile device. Like graphic design, industrial design is easy to spot in everyday experience. Physical product design has origins that can be found at any local history museum. Since the dawn of time, human civilization's has been defined by its tool or artifact creation abilities. Physical products with "good design" are intuitive: they feel, sound, look and work elegantly. Good industrial designers have, for much of the 20th century, mastered physically many of the design types described above, creating an impressive history of design for the human body, senses, environment and mind in a way that transcends, evokes and transforms experiences the user performs with the product.
The final group below are methodologies and approaches encompassing the design techniques above. Let's take a quick look at some of these approaches or methodologies that cross into the blurry line of "design".
Holistic approaches/ methodologies
#8 User Centered Design: The overall industry and ISO standard methodology and set of techniques that places the user at the center of the design. User-centered design (UCD) involves three key activities: User research; UI prototyping and Usability Testing. UCD is iterative by nature and has the most impact if conducted early on in a software, product or web development process. Its methods and techniques and general approach to design are proven from an ROI perspective and are widely accepted in industry, academia and in government sectors.
#9 User Experience Design: A relatively new term that updates the term and discipline of UCD or "usability engineering". User experience adding a more holistic element to the technique of designing the user experience (on web sites or web applications). User Experience or UX design I consider more an approach or umbrella of techniques or a general approach. It is not a type of design per say, as its practitioners will inevitably conduct UI design, IA or interaction design as the deliverable of the UX design approach.
#10 Experience Design: Experience design is often used as a short hand for User Experience Design, but is largely considered with what I call Environmental Design, or the design of the experience in retail or open space environments. Again, Experience Design is a general umbrella approach or methodology that penetrates all design decisions but with an experiential agenda.
"What will the customer experience as the do X?", must have been what the Starbucks experience designers were thinking...
Retail and public spaces can greatly benefit from improved loyalty (attachment feelings, comfort and personalization) and productivity (learning, exploring, browsing) studies have found. Experience Design makes use of the context, social and environmental phenomenon as well as the feelings, perceptions and intuitions of the user in that context.
In Summary: Perhaps at this point you can understand why understanding "design" can be so ambiguous at times. Now that we're on the same page, if you hear "design" and you haven't already had the "what design do you mean?" discussion with the person you are talking to, take a few minutes to level set and get on the same "design page".
Okay, I have to go, there's an email from my designer that I am giving some designs to, based on our client review of designs that we are redesigning...;-)
Frank Spillers, MS
Yes, Google has a tool for everything these days it seems, but it's not a consistent tool kit. Sometimes you get it and oftentimes you don't.
Is that why Google doesn't promote what I call their "world of widgets" (WoW's)? How is it some people know the secret handshake and many more don't?
This article focuses on why that is and speculates on whether Google may have taken a popular interaction design technique known to the usability community as "progressive disclosure" to heart, when deciding to roll out all those wonderful "WoW's" to you.
What's Google's problem with Hiding Information?
Well we know Google is very careful with their presentation layer (read user interface). Google's army of usability engineers must be under a lot of pressure. You don't win search out of Stanford because of your "I'm Feeling Lucky" button...
Side-note: So how do you win your market category? From my perspective it's no accident that you have a recipe in a few easy steps: 1) Your founders develop some solid technology; 2) Your founders respect and value usability and make sure it's entrenched in core infrastructure; 3) You get a usability leader on your technical board of advisory panel (Jakob Nielsen has been on Google's board for years); 4) You have some market conditions where everyone else thinks the average user configures interfaces. Instead, you decide simplicity is not just an Eastern philosophy, but a technology leadership imperative.
Google has come under a lot of criticism in the past few years for keeping that home page so simple that users don't know 90% of the features and widgets (tools) they offer even exist. Is that stupid or is it part of the plan?
If you look at how Google works, it only serves you up a tool when you "need" it. To your surprise (sometimes), "BAM!" an instant search result with some lightly-branded Google add-on.
Simplicity is sacred at Google
Google knows this is a problem, I think they just don't know what to do about it. How do I know? Look at how Gmail is being promoted on their home page: "Free email with 2.8GB storage and less spam. Try Gmail today." It seems to have become a common fixture with their "official" launch (Feb 07). With Desktop search Google started to add it to the bottom of each search results page, then other major products started to appear as contextual promotions for the new products.
Simplicity has become an imprint of their brand experience. Clutter that search page and you're likely to soil Google's virginity. The equivalent of putting words next to Nike's swoosh- you just don't do it ;-) (the swoosh stays a symbol without words, a testament to it's universality).
Is Google ignoring its early adopter "base"?
IT professionals who helped Google build the "base" in the late 1990's are starting to feel left in the cold by Google's simplicity (in a bad kind of way). Why? Because Google is like a box of chocolates that you have to explore to find the macadamia nut, because the little "contents map" is missing. User centered design pioneer Don Norman explains:
"Look, I like Google. It's a great search engine. But I am sick and tired of hearing people praise its clean, elegant look. Hell, all search engines have that clean elegant part to them: type your search terms into the box and hit "Enter."
"Oh," people rush to object, "the Google search page is so spare, clean, elegant, not crowded with other stuff."
True, but that's because you can only do one thing from their home page: search. Anybody can make a simple-looking interface if the system only does one thing. If you want to do one of the many other things Google is able to do, oops, first you have to figure out how to find it, then you have to figure out which of the many offerings to use, then you have to figure out how to use it. And because all those other things are not on the home page but, instead, are hidden away in various mysterious places, extra clicks and operations are required for even simple tasks — if you can remember how to get to them". from The truth about Google's so-called "simplicity" by Donald Norman, PhD
Norman speculates that this is reflective of the organizational culture. Matt at Signal vs. Noise agrees and further speculates that this un-tidyness is the "price you pay for innovation".
Progressive Disclosure as Business Model?
My guess is that Google is taking "progressive disclosure" too literally- from a business standpoint. Look at the problem: they are hiding what you don't need until you do need it. That is the spirit of progressive disclosure.
Reminder of the definition of progressive disclosure:
Progressive disclosure is an interaction design technique that sequences information and actions across several screens in order to reduce feelings of overwhelm for the user. By disclosing information progressively, you reveal only the essentials and help the user manage the complexity of feature-rich sites or applications.
The problem is, as a business- you don't know what Google has for you. Is this why Google Answers was shut down?? Google Answers was a great service for asking a question, answered by an expert. Just as Google announced it's shut-down, Yahoo! announced a re-launched "Web 2.0" style Yahoo! Answers with community features, intuitive user interfaces and more...
Google hides what it thinks you don't need until you, say, type in 'Vietnamese food portland', then you get enhanced results with Google Maps.
"BAM!"-- progressive disclosure to Google Maps... Any usability engineer would be proud. Except the surprise of it all is sometimes annoying (especially to IT professionals). And worse, the hidden WoW's are not consistent.
Even Google's 2-3 year private beta (wink, wink) release of Gmail (just officially launched last week) is a form of progressive disclosure. "It's here- let's get the tool out to your friends and colleagues, and if you really want it, they can disclose it to you". I would call this more of a clever marketing tactic but it seems to echo my analysis of progressive disclosure as a business model. I also use Google AdWords, Google Analytics and a few others and they do the same thing- for logging in to each- none are connected- each log-in progressively discloses another log-in...it can be really annoying.
Ironically, Jakob Nielsen is on Google's technical advisory board and he is a big proponent of progressive disclosure. Did Google misinterpret Jakob Nielsen?
I don't know, what do you think?
Frank Spillers, MS
Pop ups are dead- so what?
First of all, let me just get this out in the open: there is nothing wrong with pop-ups per say.
Next, let me qualify what I just said: Pop-ups are ineffective as an advertising tool and are not recommended on the web since pop-up blockers are ubiquitous. E.g. Every browser and search engine tool these days has a pop-up blocker: AOL pop-up blocker, Google Toolbar pop-up blocker, Yahoo Toolbar pop-up blocker, Firefox built in pop-up blocker, third party free pop-up blocker tools...etc.
Google Killed the Pop-Up
From the late 90's to the early 00's Google quietly used it's simple and easy to use design (read great user experience) to hijack the pop-up as a form of web advertising. If you remember every credible large and small website used pop-up windows for advertising and more. Google's text advertising (right column block short phrase with a link) wiped out the pop-up since the click through rates (CTR) for text based advertising (or contextual advertising) were higher: under .5% CTR for pop-ups to 2-3% CTR for text ads.
Back to "There is Nothing Wrong with Pop-ups"
Pop-ups are not the problem. It is the forcing of them on your users without telling them, which also violates the permission-based marketing model. This issue is rarely understood I find due to the culture of pop-up hating. Yeah, I hate them too.
However, if it is appropriate to provide more detail such as help text, or larger images or diagrams- then by all means use a pop-up dialog! Just be sure that it is self-selected. In other words the user clicks to activate. Remember, pop-ups became hated because they forced themselves on users, got in their face, redirected their attention and cluttered up their train of thought.
The Pop-Up Blocker Error Message
Alas, with so many pop-up blockers (thank you to all the pop-up blocker tools) there is a need for a new kind of error message to help users orient to that which is supposed to be happening which isn't happening.
You've done it right? Clicked on a link, page, image and then...(nothing). What happened? Oh it's the pop-up blocker that ate it. So while you figured that out, the average user who is not savvy to browser features and functionality (such as pop-up blocking) will probably blink and miss the hidden "aha"...and then move on.
(Click image above to see an example of a good pop-up blocker error message)
The American Automobile Association website has a great example of a user-friendly pop-up blocker error message. Bottom line- anyone using pop-ups on their site needs one. Leaving the recovery from a pop-up blocker's work to chance is not enough.
Usability Guidelines for Using Pop-ups?
So if you must use on of those pesky pop-ups (either self-selected or forced) be sure to follow the following usability guidelines for pop up dialog windows:
1. No intensive scrolling. Pop-up information (tables, images, text) should be short and sweet. e.g. 150-200 words max.
2. No left to right (horizontal) scrolling! Pop-ups are a limited attention adjunct to information. They serve the purpose on the web of the ellipse (...). We have seen pop-ups used that have long scrolling tables, buttons down, left, right, outside of easy reach. Our usability testing experience shows that users hate to scroll your pop-ups.
3. Tabs work well with Help Pop-Ups. A few tabs to help organize HELP information seems to work well. Again be careful the length of content. If you have that much to say, say it on a web page.
4. Use the pop-up blocker error message (above). No brain-er, but rarely used. Nice work AAA!
5. Let the user self-select a pop-up always. Unless you are doing some kind of intercept (for a survey or exit email capture offer).
So, next time someone says "I hate pop-ups" and everyone grumbles and says "yeah, me to" you can smile and say to yourself "yeah, but..."
Now, let me go close some of those pop-ups ;-)
Frank Spillers, MS
What is "progressive disclosure"?
Progressive disclosure is an interaction design technique that sequences information and actions across several screens in order to reduce feelings of overwhelm for the user. By disclosing information progressively, you reveal only the essentials and help the user manage the complexity of feature-rich sites or applications. Progressive disclosure follows the typical notion of moving from "abstract to specific"; only it may mean sequencing interactions and not necessarily level of detail (information). In other words, progressive disclosure is not just about displaying abstract then specific information, but rather about 'ramping up' the user from simple to more complex actions.
In its most formal definition, progressive disclosure means "to move complex and less frequently used options out of the main user interface and into secondary screens".
A few familiar examples of progressive disclosure
An example of progressive disclosure is an online news article that is spread across four screens (with a Next Page link at the bottom). This use of progressive disclosure serves advertising objectives (showing banners on each page) and not the user's task. Another example would be a site that explains a product by making the user click through 4-5 pages of overview/benefits information before revealing the price of the product. The idea here is that if the user reads the product information, they will accept the price more easily. The problem with that approach is that it does not accommodate free-form exploration, a typical behavior on the web.
In its purest format, progressive disclosure is about offering a good teaser. A good teaser can include the following:
* A sample of what is next
* An introductory task that is most common
* A high level view of what is expected
* A wizard that walks the user through the task
* A button that leads to more advanced functions (such as editing)
Progressive disclosure says: "Make more information available within reach, but don't overwhelm the user with all the features and possibilities".
Short History of Progressive Disclosure
Progressive disclosure is a concept that has been around since at least the early 1980's. The technique caught the attention of user interface specialists with Jack Carroll's lab work at IBM (1983), where he found that hiding advanced functionality early on led to an increased success of its use later on. The approach dubbed "training wheels" is one of the only references validating the technique. Carroll and Rosson (1997) pointed out that no empirical evidence exists regarding the effectiveness of progressive disclosure and that the training wheels approach only studied a "single computer application (word processor) and a single interface style (menu based control)". While independent usability studies and consultancy research (including our own) has shown that appropriate usage of the technique is valuable, more empirical research is clearly required.
The software vs. web design environment
Historically, progressive disclosure is a concept that came from the software usability experience. It is clearly easier to apply to software than it is on the web, which is probably why you don't hear all that much about how to do it effectively on the web. In software, the interaction is between dialogues and 'fixed state' interactions. On the web, interactions are chaotic, randomized and dynamic due to the fact that hypertext is a non-linear media.
In the software world the audience is predictable and targeted, making learning styles more predictable. On the web, it's anybody's guess who might be using the site. The website visitor might be a particle physicist, a teen or a grandma. Learning styles, comfort levels and expectations differ greatly. This is perhaps why you hear a lot of references to progressive disclosure in conversations and interviews, but rarely any ideas about how to apply it effectively.
Usability guru Jakob Nielsen mentions progressive disclosure regularly, but has never explored the subject in great length to my knowledge. Nielsen has stated:
"Good usability includes ideas like progressive disclosure where you show a small number of features to the less experienced user to lower the hurdle of getting started and yet have a larger number of features available for the expert to call up". Sitepoint interview with Jakob Nielsen
"Progressive disclosure is the best tool so far: show people the basics first, and once they understand that, allow them to get to the expert features. But don't show everything all at once or you will only confuse people and they will waste endless time messing with features that they don't need yet". Slashdot interview with Jakob Nielsen
There are dozens of references on the web (at least the first 7 pages of a Google search) of people saying progressive disclosure is valuable and recommended. Guidelines include it as an error control device and colleagues mention it often in corporate design rooms I personally frequent. The common notion is that it's good, everyone knows it, so just do it! I have yet to see anyone provide evidence of how to use it effectively on the web...
Using progressive disclosure effectively on the web
The marketing approach to progressive disclosure is to get excited about the features and force users to partake of the excitement by making them wade through them all. There's only one problem with that: if you want to get someone excited, creating a feeling of overwhelm does not strike me as a good way to get someone excited. Instead you want to roll a small snowball down a hill and hope it gets bigger and bigger leading to an avalanche! This is the goal of progressive disclosure from a marketing standpoint.
The best way to think about progressive disclosure on the web is: "Only show information that is relevant to the task the user wants to focus on, on any given page". Context sensitive advertising has finally figured this one out with regard to the text ads that Google pioneered.
Progressive disclosure is an interaction design technique that emerges out of the insights gained during Task Analysis (user observation of tasks). Observing users in the field, allows you to understand their workflow outside of your technology. This insight gives you the data you need to prioritize and sequence content functionality.
The main thing to remember about progressive disclosure is that it you will be able to use it correctly if you have conducted task analysis (behavioral observation) with your user base. Observing users in their native problem solving environment gives you the insight about how they interact with the information. By observing someone's eating habits, you'll know whether they typically look at the desert and drinks menu at the start, in the middle or at the end of the meal. You'll discover whether they like to eat the main course or their salad first and whether they drink before a meal or at the end of a meal.
Examples of progressive disclosure on the web:
* Learn more link
* Related topics link
* Overview of account information on the first screen
* View more details link
* Advanced search link
Why is progressive disclosure the most important interaction technique?
Progressive disclosure is powerful because it embraces several good design principles:
* Advocate for users with different needs (experienced and non-experienced users)
* Limit what you show on a screen
* Give access to the low hanging fruit and de-emphasize infrequent tasks
* Only show users what they need when they need it
* Focus the interface on making the user successful at the start
Benefits of Progressive Disclosure:
* Remove the need for the user to explore and examine the interface first
* Allow the user to chunk the task in a sequence that matches their expectation
* Reduce cognitive overload
* Increase the efficiency and ease of use of the site
Dangers of Progressive Disclosure:
* Users are forced to wait until you are ready to show them
* Repeat use may not require progressive disclosure (depends on the task)
* Over-constraining what users see (or dumbing it down too much)
* Assuming you understand what is the most popular, common or important task
Progressive disclosure has a good name as an interaction design technique and for good reason. The downside to it, is in its inappropriate usage. Microsoft Word, for example, is full of many inappropriate uses of progressive disclosure, such as the auto-hiding extra menus that you have to repeatedly activate even if you don't use the menu item (the down arrows that appear at the bottom of any menu).
Progressive disclosure can be powerful. It allows users to orient to a screen, figure out what they need to do, and do it in steps that reveal more complex information as they go along. As a design technique its fallacies can be prevented by basing the progressively disclosed tasks and information on actual observed user behavior. If you can realize that the technique is an outcome of data gathered in task analysis and not just a "design idea" you will get more mileage, more accuracy and you will be more successful using it as a tool.
Quote this as: (2003) Spillers, Frank. Web Usability Best Practice Handbook. Experience Dynamics.