Table of Contents
Welcome. This is a book that I'll be writing in installments,
published on this site, and interactive with visitors in that
installments are written when requested...
BY YOU!
|
Synopsis
|
|
What |
- A free, online book on user interface design.
|
|
Why |
- To stop the problem where it starts, with new programmers
starting over every day, recreating the mistakes of
the past.
|
|
How |
- Read it, reference it, make students print it and
read it, look for our paper version some day, a 4x6"
flip book version.
- Consider crediting www.usabilityInstitute.com at
your option.
- A single long page, for printing convenience (the
old justification of structuring pages because of slow
modems is dumb).
- The conventional textbook organization will not be
used, in favor of a more conversational flow and anecdotal
organization. I'm not trying to put people to sleep;
I'm trying to improve user interface design.
|
|
Who |
|
|
How Much? |
- Free; the paper version might be $12.95 if I make
it.
|
|
When |
- Updated 2006-Jan-29, Chapter
7: Grouping
- Updated 2005-May-28, Chapter 6
- Updated 2005-Apr-28,
Chapters 4 & 5
- Updated 2005-Apr-23,
Chapters 2 & 3
- Started February 19, 2005
|
Introduction
The other day I was trying to find an online manual for a
weedwacker that I saved from the trashheap some time ago.
I finally found the manufacturer's page, http://www.shindaiwa.com/product_support/ipl_trimmers.html,
and eventually selected my model number from a dropdown list:
There was no Go button so I waited a second.
Nothing happened so I pressed [Enter].
Again, nothing.
I opened the dropdown
again and there was something funny. It had changed from model
numbers to a list—well, sort of—of serial numbers
or so it said. The page hadn't responded because it was waiting
for me to make another selection—a second selection—from
the SAME dropdown list... ahhhh, the old Multi-Invocation,
Drop-Down Selection/Function control... how could I miss it?
Or as we say in the software world, how could I be such a stupid
user?
And at that moment this book was born. I've written a lot
about usability and user interface design over the years, but
I always ask myself, what is the real solution to the bigger
problem... not the individual UI fixes, but the whole industry.
How can we stop raising whole legions of developers who will
make the same mistake as on the weedwacker page? Where exactly
is the root cause that must be pinpointed correctly to improve
the situation. And I determined that it is in High School,
in 10th or 11th grade, maybe earlier. That is what this book
is for, to teach young programmers about the user side of software—what
makes software friendly, or not.
Jack Bellis —June 14, 2004
Chapter 1, Basics
1: Basics |
2:
Accuracy 2 |
3: Verbosity |
4:
Pyramid
5: Directness |
6:
Upper Left |
7:
Grouping |
8:
Noise
There are dozens of good books and maybe hundreds of good
websites on usability. In fact, this book is a follow-up to
my 1997 "Computers Stink." You can read the PDF on our
Resources page. All of the books have got concepts, rules,
ideas, and checklists galore. But somehow rules and concepts
are making slow progress in improving user interfaces. Or are
they? Perhaps it's possible that the universe of interface
design is exploding so rapidly that any improvement is actually
a great accomplishment. Maybe I shouldn't be disappointed at
the Shindaiwa page... maybe I should be amazed that I can go
three or four days between such experiences. And during that
interval I will have looked at over 100 sites, perhaps 1000
pages!
In any case, it does appear that concepts are slow to sink
in... slow to become inculturated. Checklists are good, too
but they seem to be the tool of experts, not the food on which
to grow. So our approach will be to simply supply a handful
of carefully selected examples. Examples are everything in
computer work. That's because everything is so new. Concepts
are nice but they're really just an exercise undertaken by
the pundits of the industy. What you need are techniques. That's
where the rubber meets the road, so that's what this book will
made of.
OK, Maybe Some Concepts Won't Hurt
So that the reviewers out there don't totally dis' us for
presenting a rambling, stream-of-conciousness pile of blog,
here's a summary of the principles we'll be demonstrating:
Explicitness |
Usability can't be boiled down to a single item, but
if you are forced to choose one, the best you can do
is explicitness. Users can put up with almost any software
shortcomings as long as they can figure things out. And
the only way they can figure them out is if they can
see what's going on.
|
Accuracy |
Be perfectly accurate. Users are dealing with extremely
detailed situations. Information that doesn't exactly zero-in
on the circumstances will eventually be a problem. |
Use Verbose Phrasing |
Don't try to name features or web links with a single
word. Use a noun and verb. Use several words if that's
what it takes. |
Directness |
Don't put intermediate words or links or buttons or images
in between the user and the specific instruction. |
Grouping |
Put related things together. |
General-to-Specific |
Put important things at the top and left. |
Segregation |
Now that you've got groups of things, separate and distinguish
them to signify them accordingly. |
Use Existing Solutions |
Creativity is great, but when it's unneccessary, it's
a mistake. |
Consistency? |
Everyone constantly says that you should be consistent,
but this is overplayed. There are times when you need to
differentiate things. The answer to many consistency questions
is the same as the answer to all computer questions: "It
depends." |
Make Everything Browsable |
Sometimes this means using menus instead of special techniques
or values. Sometimes it means using words instead of icons. |
Use Descriptive Values, Not Internal Codes |
Use words that any competent Windows user will understand,
not industry jargon, computerese, or even special business
language. Translate things into what users are trying to
do. |
Use Images as an Additional Option—Not
an Alternative—to Words |
Graphics are good for coming back to a feature, not for
figuring things out in the first place. |
Hopefully that didn't hurt too much. Beyond that, they get
too detailed... not really principles. And did you notice that
they're not particularly computer principles? They're actually
principles of traditional print publishing, book-writing, newpaper
layout, and so on... just general communication concepts. Yes,
that's right—that's write?—computer design is communication
design, just more dynamic.
The analogy to newspaper layout is from a great usability
book, "Don't Make Me Think," by Steve Krug. Read
my review.
If the list above is not detailed enough for you and you don't
want to wait for the rest of this book to be completed, see
Computers Stink on the Resources Page. Otherwise, please
be seated and pull the safety bar down. The ride is about to
start. We will attack the list in no particular order.
In the Shindaiwa example, the author tried using a creative
solution. That's fine in some cases, but users are already
accustomed to a different solution. The page should have a
Go button and load a different page with the next choice.
Too Much Creativity, Before
Here's the second part of the Shindaiwa page, after I selected
a Model Number. Remember, it was totally unnoticeable that
the dropdown label changed.
Too Much Creativity, After
To improve the page, there are several options, but the most
common one you'll see is to refresh the page after the first
selection so the user knows a second selection is being made:
The lesson here is to use simple techniques that you see in
use elsewhere, whenever they get the job done. If there are
times when you must create a new technique, fine. But don't
create new techniques just to save time or work, or because
you think it's a better way to write the code.
Chapter 2: Accuracy
1: Basics |
2:
Accuracy 2 |
3: Verbosity |
4:
Pyramid
5: Directness |
6:
Upper Left |
7:
Grouping |
8:
Noise
This motivation to finally commit this next block of content
to little blips of magnetism on some far-away platter is thanks
to Tim, a software engineer who's recently been nominated
"The
UI Guy"
at his
company. Other than that he gets no credit or blame for its
content, satirical, technical, or otherwise. Let's hope that
some day these little blips grow up to be proud pits on an
optical disk, or even someday—try to imagine it—ink
on a piece of paper.
The principle is as
simple
as can be: accuracy. You wouldn' think that would
be a problem for such folks as are attracted to the precision
on-off world of logic and algorithms, wudja? Well, my example
is from no less than IBM. If you're reading this in the year
2045, that was a crusty ol' company that Megamergercast (the
mega media conglomerate) bought and buried, indirectly by having
bought and buried Microsoft in 2014. Anyway, here's how IBM
did it in the good ol' days. What's wrong with this picture:? ...or
is it ?:
Accuracy, Before: IBM Login
Answer: the field label, "IBM ID" is inaccurate. It should simply
say Email Address. Here's the "After" version, not exactly
rocket surgery (give credit where it is due: Steve
Krug/book on Amazon), but
I promised before-and-after examples:
Accuracy, After: A Simple Fix
Now, I know what some of you are saying... "Hey, it says right
there in the blue text that it's their email address, right?"
No, it implies it. It's not in the field label, so it's
not direct. That's the problem with this UI stuff, you could
call this accuracy, or explicitness, or directness, or positioning.
But you can't mistake this for an issue of brevity versus verbosity.
So let's look at that next.
But first a note. Isn't it ironic that IBM, which ascended to
prominence on its ability to speak Computerese, descended to
dust on its inability to speak English?
Chapter 3: Verbosity
1: Basics |
2:
Accuracy 2 |
3: Verbosity |
4:
Pyramid
5: Directness |
6:
Upper Left |
7:
Grouping |
8:
Noise
This might be my favorite UI issue. For the last few months
I've been using this new source control system called Accurev.
(Source control means a program that manages shared files
on a network and prevents two people from
editing a file at the same time.) Now, Accurev is an incredible
product compared to the simpler tool I've used in the past.
It provides a whole regimen for what's called configuration
management, escalating software versions and so on. But it
has this little Achille's Heel. (Hmm, there's no such thing
as a little one, is there?) It tries to reduce all of its magic
to single words, a new vocabulary of file contention dynamics.
Look at the following figure:
Verbosity, Before: Accurev
Can you guess what the difference is between an external and
stranded file is? Or how about member versus member modified?
External,
maybe you can intuit that one if you've got some code in your
blood.
Verbosity, After: RoboHelp's Source Control System
Now lookie here. Here's a competing product, of sorts, that
takes an entirely different approach:
It spells out "external" and all the other statuses in descriptive
words. External becomes "not controlled." This is a file that
one has not yet incorporated into the system. Stranded is one
that was Removed from Version Control. Member/modified is "Checked
Out Exclusive" and so on. All of a sudden, the system becomes
self-training. And that is the goal of all usability if you
ask me. (I'll take your presence here as evidence that you
asked.)
The Goal of Usability
...
is to eliminate the need
for in-advance training.
Yes, usability also concerns itself with speed
after training, but we'll get back to the ivory-tower-pontificating
after we smother the topic of verbosity. The rationale for
the Accurev approach is that brevity is a virtue, and eventually
the short words are better, easier to scan, or more elegant
whatever that means. Well, if elegant means that even brilliant
programmers have to run around asking for help after they unintentionally
clobber each others' files, then elegance has its place. Accurev
has one of the worst and most dangerous learning curves I've
ever seen. Even the brightest people I've worked with for years
can't explain some of its statuses.
Getting back to the issue of speed after
training, do the single words have any value? Absolutely. But
there are
two fixes needed:
-
Make
them an option that one turns on after learning the system.
All complex systems, particularly business systems that
computerize a whole job category or industry, should have
a menu option for Beginner or Advanced Terminology.
- The information that causes the statuses should be explicitly
displayed, probably as additional columns in the same listing.
For intstance, it should list the date that the local and
server copies were edited, flags for presence or absence
in each place, and so on. Then one could account for the
conclusions implied by the statuses. This gets us into implicitness
versus explicitness. But that's another chapter.
Chapter 4: The Usability Pyramid
1: Basics |
2:
Accuracy 2 |
3: Verbosity |
4:
Pyramid
5: Directness |
6:
Upper Left |
7:
Grouping |
8:
Noise
It's time to interrupt our examples for another commercial
from our sponsors, the high priests of theory and concept.
This time they would like you to consider that the usability
principles are not an amorphous blob but indeed have a hidden
beauty to them. Consider the following pyramid. Since the
US FDA recently (April 2005) abandoned the pyramid for their
food recommendations, we've taken that now unemployed icon
and put it back to work.
Pyramid Diagram in High Resolution
for Printing (171K)
Actually, ours started out as a tetrahedron, but depicting
that left face cluttered the visual so poorly, we went back
to the old King Tut style. By the way, there are two mistakes
in the figure. Can you find them?
A picture being worth 1000
words, I'll let it speak for itself but
let me
clarify
a
couple
of the items:
-
Menus are one extreme of letting users access functions,
and I believe that
drop-down
menus are and will continue to be the ultimate (as
far as learning goes) for a long, long time. But that final
item in the Producing Tier, "
Functions Accessed by Data...
what's that all about. What that refers to is getting to
functions by accessing items in a collapsible outline
control, and seeing pertinent functions, either by right-clicking
or having them otherwise enabled in the interface. Here's
an example of a web application from approximately 1999,
Asymetrix Librarian:
I see this as the diametric opposite of drop-down menus. Once you
completely understand the metaphor/paradigm/data structure
(call it whatever you want) of a system, you want to get
to function in a single action, by finding the data on which
you want to act.
- The other thing to explain concerns "Multiple Metaphors"
and "Multiple
Paths to Functions."
Multiple paths means that users should be able to find a function in more than
one place, perhaps on a menu and in a toolbar... maybe even
in two places on the menus. Multiple metaphors means that
the most advanced programs should make themselves usable
in more than one way. The simplest example is that systems
with a robust GUI (graphical [point-and-click] user interface)
should also have an ASCII (American Standard Code for Information
Interchange, command line) interface.
Let me think of another one.
Directness, Before
How would
you improve this dialog?
This is one of the
most common problems I find in the programming world. The
example here was from approximately the year 2000. I came
across the identical flaw in the
system I'm working with today (in 2005). The "before" dialog
is probably a simple case of "the convenience of the programmer taking
precedence over the convenience of the user," (because it's easy
to make a dialog with standard buttons). Many software development "environments" providea
a standard "message box" capability and the programmer can choose
to display one, two, or three standard buttons such as OK, Cancel
and so on. So no matter how peculiar the actions are, the programmer
looks for a way to map the options to the standard buttons. Well,
that's fine if the choices naturally fit the words OK, No, and
Cancel. But they have no relevance to the printer dilemma. Let's
look at more explicit wording.
Directness, After
Stare at the before-and-after until it sinks in.
Put important things at the top and left. That's what our concept list
tells us.
In our part of the world, we read from left-to-right
so you should position the most general items in the upper
left. Our "before" poster child is from
Microsoft Hotmail. Notice the name of the page running off
the page to the right:
Before: Hotmail's Page Name
After: A Little Touch-Up Work
The page name is more general than the content of the page so it should
be above and/or to the left of the content. So that's what
we'll do.
We can't make this too complicated, there's just not that much to it.
But then, how could the world's biggest software something-or-other
get it wrong? (Maybe they wanted to advertise their Messenger
product where your eyes would be looking.) Yet this issue is
frequently the cause of complex problems. Let's look at another
one, a more serious one that has caused hundreds of thousands—probably
millions—of hours of lost time world-wide:
In this dialog from the world's most used software application, MS Word,
the Apply To field is the most general item in the dialog.
It controls something called the "scope" of the dialog... how
much of the document the dialog applies to. In this dialog
and a few others in Word, users don't realize until they mess
up their document that they should have chosen a different
scope. But not until spending a few minutes or hours backtracking
and debugging. Where should the field be moved to? We'll leave
that up to you.
Without reading every word, it's a little hard to tell what the relationship
is between the top two buttons. The following redesign groups
the Notify button with its explanation. Just as importantly,
it groups the Read Only button with Cancel. This helps clarify
that your basic choice is to either open the document as
read-only, or not. The notification feature is what you might
think of as a side track. This is admmitedly an interesting
situation, in that all three buttons are "terminating" buttons
and I'm recommending putting one of them in a box (instead
of at the bottom or side), but UI design is creative, folks.
You're not going to help people if you try to use simplistic
rules for complicated situations.
By grouping things separately, we let the 'mind's eye' quickly evaluate
the choices. The user can instantly ignore the notification
choice if they just want to read the document. And the usual
choices of OK/Cancel are respected even though OK has the
twist of being read-only.
Take a look at this table. It's fairly common for work you'll see if
you ask someone to take data from a database and put it in
an HTML page:
It's not horrible but would you recognize any of its shortcomings? Now
look at the "after" version:
Here are the techniques that were applied:
All of those techniques come under the umbrella of reducing "noise,"
which is visual stuff that hides or distracts from the real
story. Two more techniques were added that are just pure
judgment...
But if there were no room for judgment, then we wouldn't be needed
for this work in the first place, and it wouldn't be much
fun either.
The following figure is from a "source control" system, one that
has a shared database of files on the network. When you delete
a file, here' s the message you get.
Now, you have to picture that the experience of learning a new
source control system can be pretty harrowing since you're
risking what seems like the loss of otherpeople's work...
critical team work. Misunderstanding the system can be
harrowing. So what does "delete is just delete" mean? The
message is trying to tell you this:
"Explict" means "doesn't require any translation. Would you agree
that the reworded message is as close as we can get to
the issue?