Lecture 5.3: Design Heuristics (Part 2/2) (17:00)

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.