Ask HN: Good books or articles on UI design? Coming from a newbie perspective. It's something I'm interested in learning more about on the side |
Ask HN: Good books or articles on UI design? Coming from a newbie perspective. It's something I'm interested in learning more about on the side |
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.
https://www.amazon.com/Design-Hackers-Reverse-Engineering-Be...
His Udemy course is also very good: User Experience (UX): The Ultimate Guide to Usability and UX [2]
* edit: meant this one
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/gp/product/0321929039/ref=oh_aui_deta...
https://github.com/kevindeasis/awesome-ui
I'll be adding more content in the last week of October and fixing the repo so it'll be easier to navigate
It's accessible, not too long, and yet still packed with good info on the basics of ui design and user experience.
http://ux.stackexchange.com/questions?sort=frequent
my favorite: http://ux.stackexchange.com/questions/9946/should-i-use-yes-...
https://www.amazon.com/About-Face-Essentials-Interaction-Des...
It's an ebook, but don't let that fool you.
Information Dashboard Design - Stephen Few
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.
http://cs.brown.edu/courses/csci1300/
Particularly (free links with pdfs),
Don Norman - Design of Everyday Things https://archive.org/details/DesignOfEverydayThings
Bill Buxton - Input Manuscript http://www.billbuxton.com/inputManuscript.html
Alan Cooper - About Face http://feiramoderna.net/download/pos-positivo/COOPER-Alan/Ab...
Vignelli - The Vignelli Canon http://www.vignelli.com/canon.pdf
Bill Buxton - Sketching User Experiences http://bscw.wineme.fb5.uni-siegen.de/pub/bscw.cgi/d807887/Sk...
(the workshop slides) https://www.medien.ifi.lmu.de/lehre/ss14/id/Day%202%20Sketch...
Udacity also has a mooc that follows the book and is taught by the author
https://www.udacity.com/course/intro-to-the-design-of-everyd...
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
> "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
Maybe you just have smarter friends. ;)
One of the best design books I've ever read.
To achieve really good results in UX design, to do it at the right time, I'd recommend to start not from the books, but from the interaction design specialization on Coursera at https://en.coursera.org/specializations/interaction-design or you can take just intro - https://en.coursera.org/learn/human-computer-interaction. You can take the courses for free and they'll give you the necessary mindset and understanding of process. You'll find that product design actually starts from UX, not ends with it and it defines the necessary requirements framework for the system architecture, which you can use later in combination with BDD/DDD. After that course you can start reading the books (Steve Krug, Don Norman, Alan Cooper, indeed!) and platform guidelines (my favorites are for Google Material Design and Microsoft's Modern UI).
It will be great if someone here recommends some books or articles about UX design process and integration of it into popular agile methodologies.
So tldr: the specialisation is a good experience, but make sure you know what you're committing to.
[1] http://rosenfeldmedia.com/books/build-better-products/ [2] https://soundcloud.com/lean-startup/4-season-3-combining-use...
"10 Usability Heuristics for User Interface Design" by Jakob Nielsen, January 1, 1995 [1]
[0] https://www.nngroup.com/articles/
[1] https://www.nngroup.com/articles/ten-usability-heuristics/
https://ux.stackexchange.com/questions?sort=votes
This question may be particularly relevant:
https://ux.stackexchange.com/questions/74/the-must-read-user...
All UI's are graphs at their heart
Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) - http://amzn.to/2e5Erfc
Design for Hackers: Reverse Engineering Beauty - http://amzn.to/2euMOUc
UX Design and Usability Mentor Book : With Best Practice Business Analysis and User Interface Design Tips and Techniques - http://amzn.to/2dXYZJT
I use it every time I need to craft an interface but especially for SaaS apps. The OP requested something from a 'newbie perspective'; this book will explain the basics but the real value comes from the explanations and advice with respect to why UI decisions lead to happier users.
I've copy/pasted the chapter headings from the site:
Introduction
Chapter 1. Your Product Strategy
Chapter 2. Navigation
Chapter 3. Dashboard & Homescreen
Chapter 4. Audit Your Screens
Chapter 5. The Problem of Style
Chapter 6. Get a Theme
Chapter 7. Plan for Improvements
Chapter 8. Deal With New Features
So I'm afraid I have to say: that UI really sucks :)
https://www.amazon.com/Tog-Software-Design-Bruce-Tognazzini/... https://www.amazon.com/Tog-Interface-Bruce-Tognazzini/dp/020...
see his short course on interaction design
http://asktog.com/atc/principles-of-interaction-design/
and
1) Want to make user interfaces that are actually useful to people? Read up on product management, UX and interaction design. Important skills: articulating the problem you are solving and for what kind of user, and being able to validate whether your hypothesis is on point. Iterating before committing further resources to building a prototype. Conducting user testing sessions (rocket surgery made easy is a good resource for this).
2) Want to make a specific view / flow of a product inviting and visually appealing? Study visual design and typography.
3) Want to be able to build a functional prototype that looks reasonably good? Study frontend design / development. There are a lot of frameworks that could get you up and running.
IMHO going for (1) and (3) first is smart; if you can't prototype and evaluate a user experience that has a shot in hell of being useful to an actual user, being able to make stuff look pretty is kind of irrelevant (unless you are specializing and collaborating with engineers and UX people). In any of the above cases, at least knowing more precisely what you want to learn will help you do better googling, e.g "best books on visual design" or "best books on interaction design".
Meanwhile https://www.designernews.co is Hackernews for designers
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.
It answered a lot of the questions about design process I had some ten years ago. (I am now involved in UX and product design)
http://scottberkun.com/making-things-happen/
If you go briefly through it, you'll certainly find some sections useful for clearing things up with information design, capturing design goals, singling out tasks etc. It sparked my own interest in user experience and service design back then.
To my opinion, after much thought and practice, UI design is very much a shell to everything that's preceeding it on the timeline. Try to cover UX as well as UI, capturing requirements, etc.
It is also important to find a book, a blog or a course that is mesmerizing particularly to you, and easy to grasp with your specific background. Good luck! Alice
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.
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.
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"
I also enjoyed his one-day course: https://www.edwardtufte.com/tufte/courses ($420, includes four books).
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).
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)
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.