Ask HN: Good books or articles on UI design?

363 points by nahcub ↗ HN
Coming from a newbie perspective. It's something I'm interested in learning more about on the side

90 comments

[ 4.8 ms ] story [ 187 ms ] thread
"The Design of Everyday Things" is a classic.
I also loved his follow up book, "Emotional Design: Why We Love (Or Hate) Everyday Things".

One of the best design books I've ever read.

The Visual Display of Quantitative Information - Edward Tufte

All UI's are graphs at their heart

Can you elaborate more? This sounds like an interesting thought.
One of Tufte's main themes was, I thought, that only information that directly conveys meaning should be included, and everything else should be thrown out. Where everything else, in the context of UI design, would probably be excess styling. On the other hand, I forget where I read it but we know that people are biased into finding more attractive interfaces more usable, even if a "usability expert" might disagree. So personally, I find Tufte's title fitting - he really is talking about effectively displaying quantitative information.
Sure.

The book, and Tufte, focuses on effectively displaying quantitative information. He takes a relatively hard line about it and I have found it one of the most useful texts for helping me take "some truth the system knows" to "some truth the user knows".

Of course you have to take it with a few pinches of salt.

Firstly it is largely his opinion. Studies into this area are rather good on the general points however the fine detail is incredibly hard to study accurately.

Secondly you may not actually want to make a UI that conveys the "truth it knows" above all else. Often you want to convince the user that the UI is good at conveying information (which is not the same thing) or that it is very easy to use (which is again, not the same thing).

I heartily recommend this book because it teaches one very hard thing very well. You just have to understand that you do not always want to do this thing (yet you now have a way to start to understand the trade-offs you are making).

There are two more books, on concepts I believe, and verbs.

It's not the most practical way to learn UI design, but I enjoy how well it makes the case for good UI. Too often, I see programmers dismiss design. It seems not to fit into their scheme of values, i. e. "it's not scientific" or "it's just shiny packaging " or "it's something for beginners – I'm an expert". Then you get some guy replace all custom fonts on npmjs.com wit Arial because "all sans-serifs look the same anyway".

(the example is more "design" than "user interface" but it's the best one I remember)

> All UI's are graphs at their heart

A bit of an overstatement, considering /bin/rm, Amazon Echo, NFC (e.g. Apple Pay), car pedals, shake gestures (e.g. camera activation on Moto X), and keyboard shortcuts (e.g. Win-L to lock the computer).

I know, you were probably talking about GUIs specifically, but how you interact with a GUI is not really covered by Tufte. I second the recommendation for The Humane Interface for that.

Yes I'll give you that

I have essentially written four mini-essays exploring the topic today in attempts to reply to your message. I'll suffice with:

"All UI's are communicators of quantitative information at heart. And many are shit"

Slightly OT, but 'Sprint' written by Jake Knapp is a pretty cool book on working on all kinds of projects, UI/UX projects included.
Don't Make Me Think - Steve Krug

Information Dashboard Design - Stephen Few

Don't make me think is awesome and I believe you can get a free PDF version of it online. (Possibly an older edition, but it is just a great book.)
Yes, this is the first book that came to my mind too because for any good UI design, you first need to get your priorities straight which is common sense of design comes first, the graphics and cosmetic part comes second (though they're not mutually exclusive).

On a related noted, I've often wondered how Material design and all these latest skeuomorphic designs kind of go against this advice of Don't make me think. Is it text, is it a button, is it a drop-down? You're making me think too much.

"The non-designer's design book : design and typographic principles for the visual novice" - very easy to follow.
Universal Principles of Design - William Lidwell

It's not explicitly computer UI design, but the book is essentially an alphabetical list of design concepts with illustrations/examples, and they're very applicable to computers. Amazon has "look inside" if you want to see what it's about.

Here's a list of all design books that I give to new hires:

Branded Interactions: Creating the Digital Experience - (https://www.amazon.com/Branded-Interactions-Creating-Digital...)

The Visual Display of Quantitative Information - https://www.amazon.com/Visual-Display-Quantitative-Informati...

Universal Principles of Design - https://www.amazon.com/Universal-Principles-Design-Revised-U...

The Interface: IBM and the Transformation of Corporate Design, 1945-1976 - https://www.amazon.com/Interface-Transformation-Corporate-19...

Multiple Signatures: On Designers, Authors, Readers and Users - https://www.amazon.com/Multiple-Signatures-Designers-Authors...

Change by Design: How Design Thinking Transforms Organizations and Inspires Innovation - https://www.amazon.com/Change-Design-Transforms-Organization...

Thoughts on Design - https://www.amazon.com/Thoughts-Design-Paul-Rand/dp/08118754...

Notes on the Synthesis of Form - https://www.amazon.com/Notes-Synthesis-Form-Harvard-Paperbac...

..and a list of ones I'm considering adding:

Unflattening - https://www.amazon.com/gp/product/0674744438/ref=oh_aui_deta...

Creative Confidence: Unleashing the Creative Potential Within Us All - https://www.amazon.com/gp/product/038534936X/ref=oh_aui_deta...

The Design Method - https://www.amazon.com/gp/product/0321928849/ref=oh_aui_deta...

Product Design for the Web: Principles of Designing and Releasing Web Products- https://www.amazon.com...

It's a little dated (is it sad that 2006 is "dated"?), but I still find "Designing Interfaces" by Jenifer Tidwell (it's an O'Reilly book) helpful once in a while for basic UI/interaction thoughts.
Agreed on this: it's handy because it has a catalog of design elements and tells you when you should and shouldn't use them. That's pretty helpful compared to more abstract theories about UI stuff, for some people.
Joel Spolsky's "User Interface Design for Programmers" is concise, educational, entertaining... and free (even an easy-to-read all-in-one HTML page):

http://www.joelonsoftware.com/uibook/fog0000000249.html

Also highly recommend Steve Krug's "Don't Make Me Think" (as others have already commented): http://www.sensible.com/dmmt.html

If there is one UI design book to read, "dont make me think" is it. And if you don't have time for it's already speedy read, the entire book gets summed up in the title: Don't make your users think about how to use your software.
From Joel Spolskey page:

> "Another example from the world of Microsoft Windows is the Alt+Tab key combination which switches to the "next" window. Most users would probably assume that it simply rotates among all available windows. If you have window A, B, and C, with A active, Alt+Tab should take you to B. Alt+Tab again would take you to C. Actually, what happens is that the second Alt+Tab takes you back to A. The only way to get to C is to hold down Alt and press Tab twice. It's a nice way to toggle between two applications, but almost nobody figures it out, because it's a slightly more complicated model than the rotate-among-available-windows model."

I don't think anybody who used OS before expects a different behavior, most users know that alt tab toggles between recent apps

Yes, it's a bit dated (check out those screenshots!)... but the fundamental concepts are still valid. He's trying to explain that you should make programs behave as the user would expect them to -- but it's up to you as the developer to use your judgement to know what the common expectations of the time and platform are.
I was taught this as "The Principle of Least Surprise" or do the thing that causes the least surprise.

Where it gets tricky is that as programmers we are also power users and our mental model of what we expect to happen and what a user expects to happen diverge, I try to have empathy for the user.

One of my tricks is to imagine what my mum would expect to happen (not because she's a woman, it's not a sexism thing I hasten to add) but because she's a 60yo woman who didn't start using a computer until she was in her 40's and is slightly wary of them still.

If it passes the mum test then I know I'm on the right track.

Insightful quote but I disagree that users 'get' Cmd+Tab. I have to explain it to most people.

Maybe you just have smarter friends. ;)

Alt Shift Tab makes the cycle go backwards.
This one is good at teaching both fundamental design principles and UI design in particular Designing Visual Interfaces: Communication Oriented Techniques

This is an introduction to UX The User Experience Team of One

It's from Rosenfeld Media and you should take a look at the rest of their books. They are of a high quality and cover a wide range of topics related to both UI design and UX.

Don't use anything less than 5 years old, because it'll try to get you to make PC software look like it belongs on a smartphone.
Actually a good comment :)
Shameless plug, since I recently wrote it: https://medium.com/the-craftsman/the-whoa-how-did-you-do-tha...

Basically, don't forget the human in human computer interaction/UI/UX. It's very easy to come out of the academic perspective on UI/UX design designing exclusively to efficiency formulas and words in a glossary. Keep the user, the human, and their context in mind.

I follow http://sidebar.io/ for a couple of years, it's a nice place to get the latest articles about UI, UX, fonts, etc.