-
Let’s continue our journey of these design heuristics.
-
Before we do, I’d like to remind you that many of the interfaces
-
that we’re going to look at could fit into multiple different heuristics,
-
and the most important thing is to identify the problem:
-
If you identify and fix the problem, the label is of secondary importance.
-
Our next heuristic is “recognition over recall.”
-
Create interfaces that make objects, actions, options, and directions visible or easily retrievable.
-
And one of my favorite examples of this is [that] any time you see a Post-It note,
-
that probably means that the relevant information isn’t as ready at hand as it ought to be.
-
Here’s a photograph I took of one of our lunch meetings.
-
And here you can see we have shwarma and falafel.
-
They each have a number on them.
-
And we have a code that’s used to distinguish which number means which kind of sandwich.
-
And of course, the reason for this is that someone spent all their time making these delicious,
-
and didn’t take the time to write out the whole label on it.
-
So it’s understandable and fixable.
-
But, from an interface design perspective, it would be faster to find the chicken shwarma
-
if it was written directly on there, as opposed to in code.
-
Here’s a screen shot of a ticket-buying website, and what you can see
-
is that it gives you a couple of options like buy tickets for today or for a future day.
-
There’s a couple of problems from a heuristics perspective with this screen.
-
For starters — and we’ll get to this in a little bit — the layout is kind of all over the place.
-
But also the thing that we’re going to look at here is the fact that we have this intermediate screen
-
which I think could be done away with with clever design.
-
It, for example, brings you to a page
-
that offers up show times for today and offers you a dialog box to switch the day.
-
And so, by setting up reasonable defaults, you can avoid extra hurdles .
-
In addition to leading with reasonable defaults, it can be valuable to provide previews.
-
This is a screen shot of a web design tool where there are many templates available.
-
However, all of the templates are shown in textural listing, which is not well suited for the task.
-
You have to think through whether that’s what you want, and that’s a difficult thing to do reliably.
-
By contrast this is a different web design tool that offers previews of all of the templates available,
-
and it’s much easier to see if that’s the design that you’d like.
-
Next up, flexibility and efficiency.
-
An simple and straight forward example of this
-
is to provide keyboard accelerator shortcuts and similar things like that for experts.
-
This is the View menu of the Firefox web browser.
-
And this is a great example of offering flexibility and support for experts in two ways.
-
First, we can see that there’s keyboard shortcuts available.
-
And second, the View Source menu will let you retrieve the page source of any page that you’re looking at,
-
so you can look under the hood — not something that most people want to do; valuable for experts.
-
This is the Expedia hotel search,
-
and it does a really nice job of making the common cases quite easy to get to.
-
Popular cities are shown with a radio button.
-
But also, if you’d like to go to a less popular city,
-
there’s a free entry field that you can type in anything that you want.
-
And so this is a nice example of defaults with options.
-
Flexible interfaces can also foreground and push relevant ambient information.
-
This is a screen shot of BusyCal,
-
which will allow you to view the weather forecast on your weekly view of your calendar.
-
Here’s another example of productivity in the user interface: This is Google’s Gmail,
-
which, if you click Spam on a recipient that it knows how to unsubscribe you from,
-
it will offer the opportunity to directly unsubscribe you from that email as well.
-
And I think this is an example of how, if you’re going to be proactive in an interface,
-
you need to do it well and offer a clear, immediate, task-relevant benefit.
-
People generally don’t like proactive interfaces that distract, interrupt, break flow, or provide irrelevant information.
-
Another nice example of support for richer use is to offer recommendations on a particular page.
-
And so here you can see if you like this one beverage here, [there are] other beverages you might like.
-
And again, if you’re going to offer recommendations, or other kinds of proactivity, keep it relevant.
-
This is an example from Amazon, of discussion fora for products
-
that are almost entirely unrelated to the product that is being shown.
-
And it just distracts from the user’s main goal — Mostly they’re wondering
-
“Why on earth did these things end up at the bottom of some completely unrelated webpage?”
-
And finally, [while] flexibility can be incredibly valuable, it is possible to go overboard.
-
This is a photograph from Bill Moggridge who shows an interview with a user
-
who had hacked their remote control to limit it to just the relevant functionality that they needed.
-
And so, flexibility can sometimes be at tension with minimalism.
-
Our eighth heuristic is “aesthetic and minimalist design.”
-
When people view your webpage, for example, they’re viewing it on a screen,
-
and so they see not the entire page, but one screen’s worth at a given time.
-
What they see is what’s called “above the fold” — it comes from newspapers.
-
Here’s an example of a screen where the relevant information —
-
what the weather forecast is — is not even visible anywhere above the fold.
-
Everything above the fold is all of the chrome and extra stuff,
-
but the core information you have to scroll down for.
-
And to the extent that you’re trying to optimize for user experience,
-
it would be better to have the core information above the fold.
-
As we’ll talk about in visual design, if you’re going to use color and other cues,
-
have them mean something, and do so judiciously.
-
Here’s an example of a check out page that’s using lots of different colors,
-
and has a real cacophony in terms of its hierarchical organization on screen, for no apparent purpose.
-
And here’s a screen shot from Google’s help system.
-
Google is often thought of as an example of minimalist design and they often do this quite well.
-
I wanted to show one example where, I think, some more information could be stripped out,
-
or rather some more noise could be stripped out.
-
And what I’m looking at in particular is this stuff here,
-
where all of the table borders and other stuff are what you most see,
-
whereas what you actually most care about is the data in the survey,
-
and so, if you get rid of all of the extra lines and chart junk,
-
it can be clearer to see the parts that you cared the most about.
-
Here’s a log in screen that I think does a nice job of keeping the email address only in one place
-
because it’s right up top here, and then you get to say
-
whether or not you’re a returning customer or a new customer.
-
If you’re a returning customer you enter your password; or if you’re a new customer,
-
like the screen shows here, you create a new password and then type it in and go on from there.
-
By contrast, this flight search website has the exact same information —
-
number of stops — in two separate places.
-
And it’s possible that this increased clarity.
-
However, there is a cost of complexity, and there’s also a cost of vertical screen real estate,
-
where by listing the same thing twice, you’re pushing other stuff down.
-
Often by being dynamic about what you show or figuring out how to show things just once,
-
you can have all of the relevant information fit more clearly and in a less cluttered way on the screen.
-
One of the easiest conceits to make as a design team is that the people using your site will care as deeply
-
and will want to spend as much time using the site as you’ve spent building the site.
-
And so it can be easy to have feature creep and lots of bells and whistles and doodads.
-
But that’s not necessarily what people want.
-
Here’s an example of a student loan website that offers you the ability to add widgets to your home screen.
-
Now this is the kind of site that you log in to probably a couple times a year? [laugh]
-
It’s not likely to be a site that you’re going to want to festoon with all sorts of gadgets.
-
Next let’s talk about helping users recognize, diagnose, and recover from errors.
-
One of the first steps of doing this is making the problem clear.
-
Here’s a hotel reservation site where all it says is: “Mistake. month. back.”
-
It’s hard to know what to do.
-
Here’s one that’s a little bit better: It’s a registration site for an event.
-
And what we see here is that it says you must fill out all the required fields.
-
Okay, that’s a little better. But which fields didn’t I fill out?
-
This page is screens and screens long; there’s lots and lots of things that need to be checked.
-
Which of the myriad things on this page did I forget to check?
-
Maybe you could show me just a page that has the one or two things forgotten
-
rather than the whole pile of stuff and force me to scroll through it again.
-
Here’s a dialog box that shows the error and explains it clearly,
-
but it doesn’t offer you much in terms of solving the problem.
-
It says that there’s not enough space on your iPod. Too bad.
-
A more effective solution would be to offer some view into what’s taking up all the space,
-
or to offer reasonable ways of limiting the amount of media
-
that you’re trying to put on the device so that it can all fit.
-
And in this particular case, more recent versions of this application handle this problem better.
-
A common mistake in writing error messages is to offer one dialog box for all of the possibilities.
-
Here’s a screen shot of trying to open a file where it doesn’t know the file type.
-
And it says, “The application that you chose (‘(null)’), could not found.
-
Check the file name or choose another application.”
-
Well this would be a whole lot better if we were speaking the user’s language:
-
“Null” may not be the best choice.
-
And also if we offered up a reasonable application for that file type.
-
A lot of common tasks on the web are search-based tasks.
-
So here’s a screenshot from searching for a flight,
-
where the constraint specified yielded no possible solution.
-
For complex search tasks. if a user specifies an unreasonable set of constraints,
-
one of the most powerful things that you can do as a designer
-
is to offer a relaxation of those constraints that makes this more workable.
-
Many years ago, I worked with Chuck Rich at Mitsubishi Research in Boston.
-
And he was working on a research system called Collagen
-
that would find ways to intelligently relax these constraints —
-
among other things — to help users get their work done better.
-
And this kind of smart relaxation can be a really powerful technique.
-
I wanted to end talking about errors on a good note.
-
Here’s a web browser dialog box that lets you know
-
if you go to a URL that it believes to be suspect,
-
it will let you know that you probably don’t want to be here,
-
and it offers to get you out of here and explain more about why this webpage was blocked.
-
There’s probably future further innovations that can happen in this kind of error work.
-
But I think that this is a pretty good darn start and a lot better than the way things used to be.
-
And that brings us to our last heuristic, which is better help and documentation.
-
It can be easy to think about help as somebody else’s problem and not part of the real app.
-
Fortunately, I think on the web, help and documents have become more integrated.
-
One of my favorite examples for this is learning programming systems where websites like PHP, .NET
-
can help you learn programming systems by providing examples.
-
Here’s another example-driven strategy from UPS’s website.
-
It offers you the opportunity to subscribe to a number of mailing lists.
-
And if you wonder what each of these mailing lists might give you,
-
on another screen I’ve batched them together here.
-
It will show you examples from each of those mailing lists of the content you are likely to receive.
-
That’s a really powerful kind of preview strategy.
-
And here is an example of a print dialog box to tell you what the problem is,
-
but doesn’t help you find the solution.
-
For starters, I think somebody wants to know, is the stuff that’s outside the margins relevant?
-
Is it just formally outside the margins, but nothing’s actually getting cut off?
-
or is there important document parts that I care about that are being cut off from the page?
-
And, what do you think the most reasonable path is to solving this problem?
-
Should I change the page size, or orientation, or move the header and footer? Help me solve it!
-
Here’s a dialog box for the photo merge feature of Adobe’s Photoshop Elements,
-
which is a very cool feature if you set it up right.
-
However, you need to specify multiple photos as input from the project bin.
-
And this is something that the dialog box actually could do a better job of leading you through.
-
It could then say let me show you and it could highlight the project bin on the screen or something like that.
-
Here are two screenshots from eBay.
-
On the left we have an interesting approach, where eBay has built its own internal messaging system.
-
And if, for the sake of argument, we decided that’s the right thing to do,
-
and that the internal messaging is better than directly responding to email —
-
I’m not sure about that, but we’ll go with it for now —
-
they’ve done a clever thing, which is, when you reply, the reply mail address says,
-
“Hey, use the yellow button,” and in the middle of replying it, you can see, “Oops, I made a mistake.
-
That’s right… I need to use the internal messaging system.”
-
It’s an interesting hack.
-
And here’s another screenshot from eBay, on the right hand side,
-
where when new functionality is introduced —
-
for example the ability to compare multiple options in your card —
-
it can call that out inside the user interface.
-
And I think the ability to combine help directly into the user interface
-
is one of the most exciting advances in this area.
-
And it’s something that was less common in previous desktop applications.
-
And here’s an example that I think is interesting.
-
This is the unsubscription dialog box for a mailing list,
-
and if you click “I receive too many emails,”
-
it says “Wait, you can change the frequency,”
-
and you have the opportunity to receive mailing list mails at a less frequent interval.
-
I think that this is an actually a really nice solution,
-
because sometimes you want to receive some mail, but not too much.
-
In other cases, maybe you’ll view this as harassing
-
and you’ll wish that you could just be done with this task quickly,
-
but in either case, I thought it was an interesting and creative solution.
-
I think it’s really important that help be sincere,
-
and there’s one class of help and additional information
-
that I think is, at least in effect, not providing users with the information that they need,
-
and that’s EULA’s, or end-user licensing agreements.
-
Here’re two examples of EULA screens where it’s very easy to click through without ever read the EULA.
-
And my hunch is that nearly all users do click through without reading the EULA.
-
If nobody needs to know the terms of the licensing agreement, that’s very reasonable,
-
but my hunch is that the reason these things exist is
-
because they have consequence of some sort the user should probably be informed about.
-
And so if you’re designing a site that has terms for users,
-
think about “Is there a way that you can at least summarize what the key things somebody’s agreeing to are”
-
without having them click through it or having never even seen or read a lick of the agreement at all.
-
And to close on a positive note, one nice thing
-
that you can do with help on a website is to help people have fun.
-
Filling out forms can often be really boring,
-
and here’s an example from a hotel website where one of the options has a little joke on the inside,
-
and so that bit of levity can help increase the user experience.