How To Critique An Interface
Non-designers are often called upon to make judgments about interfaces. Perhaps you are a business owner evaluating your new website, or a project manager looking at mockups from your designer. What do you look for in the design? And how do you give feedback in a more meaningful way than “It looks nice” or “It seems hard to use”.
While the full-depth of understanding design cannot be covered in a short article, here are some guidelines to help you out.
To get you started, here is an example of a critique I recently did of the interface for the yet-to-be-released Add-On Builder* for Firefox. The Add-On Builder is part of the Jetpack project and is a web-app of medium complexity that allows you to easily build Firefox and Thunderbird extensions online and then publish them to the world. I took screenshots of each screen of the interface, put them into one large document, and commented ex vivo.
[*] The Add-On Builder is a mix between Github and an IDE: you can make and share code libraries, build on top of other people’s code, and instantly try and retry your add-on after you write each each line of code.
When are you critiquing?
The first factor in how you critique is determined by when you are giving it. If you are reviewing an interface just before a product or website launches, there won’t be enough time for your feedback to have a big effect and you’ll have to give smaller-scale suggestions. The earlier you can review the product, the more impact your words will have.
The User’s Train of Thought is Sacred
Look for things that break the users train of thought: any time they have to think about how to use your product and not what they are doing, your interface is frustrating them. Modal dialog boxes, confirmations, settings screens, anything that requires them to think about more than one thing simultaneously, and filling out unnecessary forms before being are allowed to enter the site, etc. All of these things get in the way of the user actually using your product.
Reduce Interaction
The goal of interface design is to get rid of the interface. While interfaces with lots of interaction can look snazzy, you’ll have fewer usability issues when you minimize the amount of work someone has to do to use your product. You know those news sites where the articles are paginated into tiny chunks so that you keep having to hit “next” just to wait for dozens of ads to load? If you are like most people, you hate them and often never finish reading the article. That’s interaction overload at work.
Think long and hard about every little step a person has to do to use your product. Write them out. If you get fatigued, you know you need to simplify.
Visual Placement Matters
Make sure that your buttons, links, and actions are logically grouped. Often you will see interfaces with “save” right next to “close”, meaning a little user mistake can cause dire repercussions.
Beware Too Many Icons
Icons can be difficult to understand, even while they look pretty. Users often have to hover over an icon each time they want to use it to discover what it means. Instead of using an esoteric hieroglyph, use text to say what you mean.
Give a Good Starting Point and Keep Consistent
The best interfaces are incrementally learnable: you shouldn’t have to tackle a fifteen-minute seminar before you can do a basic task—you should be able to just learn the one thing you need to do and be on your way. Does your product give a good indication of where and how to start? And is what you’ve learned should be applicable in helping you learn the next thing. Keep the mechanisms simple and the metaphors consistent.
Fewer choices mean fewer worries
Try to avoid burdening your users with choices on how to perform an action. Giving them lots of options may seem like a good idea but it isn’t. It ends up bloating an interface and burdening your users with decisions they shouldn’t have to make. If you see more than one way to do something, ask the designer to take the time to make one simple mechanism that the user can use for all their purposes. Don’t just dump an indecision into a preference. The less burdened a user’s mind is with irrelevant decisions, the more clear their mind is to accomplish what they need to get done.
Look is Important. Interaction is More Important
The look of a product often gets much more attention than the “how” of a product. Avoid the trap of spending the bulk of the time on look: it’s like rearranging the chairs in the Hindenburg. Look is much easier to change and polish, and it is much more apparent when something is broken. Interaction is the heart of your product—spend all of your time making it act right and at the end make it look right.
More
For more information continue reading this blog or the following books and blogs:
* Marked suggestions provided by Dave Malouf.
- The Humane Interface by Jef Raskin
- First Principles of Interaction Design by Bruce Tognazzini*
- 10 Heuristics by Jakob Nielsen*
- The Design of Everyday Things by Don Norman
- Understanding Comics by Scott McCloud
- The Resonant Interface by Steven Heim
- Don’t Make Me Think by Steve Krug
For the designers out there, what resources would you recommend? If you’ve got some I’ve undoubtedly missed, please leave your suggestions in a comment.
RT @azaaza How To Critique An Interface | Follow @azaaza on Twitter | All blog posts
Dave Malouf
2 important resources that may be quicker to put into action and supplement your own nice stuff above:
Bruce “Tog” Tognazzini’s “First Principles of Interaction Design” – http://www.asktog.com/basics/firstPrinciples.html
Jakob Nielsen’s “10 Heuristics” – http://www.useit.com/papers/heuristic/heuristic_list.html
- dave
Aza Raskin
Thanks for calling those out; I’ve added them to the list.
B. Moore
Excellent post, thank you for taking the time to write it layman’s terms!
Now to show my boss to help him understand why & how to give me feedback on my designs!
Any chance of another post on how you used that google map interface for that image? or a link to another resource for that info?
Aza Raskin
I originally used GMapUploader but the traffic for this article caused them to respond very slowly. I switched to using SeaDragon.
Ian Gilman
The above Seadragon link is broken. The link should be: http://seadragon.com/
William
Favorite line:
“The goal of interface design is to get rid of the interface”
Keep up the good work!
William
Great Article!
My favorite line of the article.
“The goal of interface design is to get rid of the interface”
A great interface really disappears; just like Facebook’s design.
http://www.uxrewind.com
胆晓茹鼠
I will translate this aticle to Chinese,here you can see it:http://www.haoxiaoru.info/archives/447
RC
Aza,
There is something I really consider important about interface design: that the interface works correctly in the platform/s it is going be used.
In the case of a web interface design, the platforms are usually not limited to a single browser except in rare cases, so it should be crossbrowser, and at least work correctly in the most popular ones.
If you take a look of the homepage of your blog from Internet Explorer 8, you will see that it is near impossible to reach the footer with your e-mail, as it dynamically loads more posts and displaces again and again the footer to the bottom.
I believe you really should correct that, because to IE users it looks really wrong. Much more for an interface expert as you are, to the point of being even laughable.
Ron
What tools did you use to create the diagram?
Aza Raskin
Hi Ron, I used OmniGraffle to layout the critique.
Mansoor Ahmed
Hey Aza!
What I basically do is before designing an interface I sort of all basic things, and review related designs, like if I am going to design a site, like I did mine I review the related sites, and then start something of my kind. Yeh I do copy some features from other designs as well. But thanks aza for this great great post.
Marco
Can I critique the headline style you use on this site? Or the big, cheesy logo up top? :)
Max Soe
Love your work, but why do you not have an RSS feed on your site?
Andrew Trumper
I’d also add “The Inmates Are Running the Asylum” (if you’re a developer) or “About Face 3: The Essentials of Interaction Design” if you’re not.
http://www.amazon.com/Inmates-Are-Running-Asylum/dp/0672316498
http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111
A hugely important aspect of design is making sure you’re actually solving the right problem! These books can help you to figure out what you want your interface/product to solve and help you make sure that your development efforts stay focused on that.
gucci belts
The basis of its mens belts investigation indicates that cheap gucci belts they operate on a sustainable path of poverty, cheap louis vuitton belts for men job security and low wages. The Department cheap desiger belts for Work and Pensions, gucci belts on sale said, with louis vuitton belts cheap five billion people return to work undertaken. The charity said that about one-fifth of the poverty and again and again where people escape from poverty on a temporary basis.
Drugoy
Your site has a bad interface.
Top banner on the main page that leads to the main page shouldn’t be clickable on the mainpage.
Along with the “I am” block, it also eats up too much vertical space, so as a reader of your blog, I have to scroll much, to get a full view of 1st topic in content area of the site.
The idea of removing posts’ timestamps is really bad, as it might be important information for someone (at least for me).
Your “I am” block’s transiting text should have buttons “”, so in case a reader reads faster than they switch – he doesn’t have to wait. And in case if the reader is reading slowly and the text has already switched – the reader should be able to click “<" to read the text he has missed.
Drugoy
Oh, and the appearing word “Home” disappears only in case you move the cursor down. And if you move it right (or left) and then down – it won’t disappear. And it looks ugly and harmful for eyes, as reading words is painful if they are written on the half-transparent background.
And comments parser ate symbols from my previous comment for some reason. All those “clever” parsers are more harmful than comfortable.
Drugoy
See? Once again it ate “” (next) symbols from my comment.
Drugoy
The input area that has a parser behind it should have a “preview” button then. Like on forums.
Stevo
Interesting article.
Icons can definitely become too much; but there is a balance – sometimes I don’t want to read lines of text for everything, a picture, a colour, a recognizable feature like an arrow is quicker. If users are using a product regularly they will learn the icons, and understand them in new and different contexts. Text on the other hand must be re-read each time, and if there are a number of options each of those must be read to find the one you want. I think it depends what kind of users (regular/sporadic) the product caters for, and what the function of the icon/text is.
I also think there is a point where it is too early to give feedback, although the words of the critquer will have more power early on, that doesn’t mean they are more useful, it can stifle creativity and lead to a lack of innovation when an outside party starts telling the design team what to do too early.
thats my 2p.
Brian
Like Stevo, above, I think your article, Aza, has some good points, such as “When are your critiquing?” and some bad ones such as “Look is important, interaction is more important.” Look and interaction should go hand in hand. Correct, one should not get so wrapped up in a design element that they lose sight of the interaction, but neither should they get so focused on the interaction that they loose sight that the first impression someone has of an interface is how it looks.
More importantly, something that is really starting to get to me is the notion that “The goal of interface design is to get rid of the interface”. This sad and pitiful notion about design sounds like it’s from someone who has been beaten so badly by developers and focus group administrators that their only solace is curl up and hide in a dark corner.
I’m not talking about overwrought geared-out monstrosities complete with bevelled type and drop shadows, but design that works hand in hand with the communication. For example, since you need a navigation system on a website why not design it so that it works gracefully with a company’s brand?
There are many situations where a design must distinguish itself and in those cases the interface must work in concert with that distinction, not simply disappear.
Facebook works for Facebook, but what a sad world we’d have if everything looked like Facebook, or Google for that matter.
Kalin
Normally I’m against killing but this article slaughtered my ingranoce.
mejlbiak
L9Zvwr klptlmywjofw
ufoixajytj
HwQyMM yhqyklriuxcq
شات كتابي
University on her work; that lecture was similar to the one
شات صوتي
University on
wholesale beads
very good post and thanks
porno
I sort of all basic things, and review related designs, like if I am going to design a site, like I did mine I review the related sites, and then start something of my kind.
ataşehir evden eve nakliyat
ataşehir evden eve nakliyat KENT ataşehir evden eve nakliyat firnaları
Karlis
This info was great! Will try to critique something for training purposes :))
pellet mill manufacturer
I also think there is a point where it is too early to give feedback, although the words of the critquer will have more power early on, that doesn’t mean they are more useful, it can stifle creativity and lead to a lack of innovation when an outside party starts telling the design team what to do too early.
Baseball Hats
hello have a nice weeken
精力剤
ething, ask the designer to take the time to make one simple mechanism that the user can use for all their purposes. Don’t just dump an indecision into a preference. The less burdened a user’s mind is with
pellet mill cooler
Facebook works for Facebook, but what a sad world we’d have if everything looked like Facebook, or Google for that matter.