Ask HN: What topics are good for a UI/UX Primer?
83 comments
The best resources I know are these two video lectures [1][2] from MIT's 2018 6.170 course [3]. They consist of a set of heuristics that summarize the best of decades of UI/UX research, very well presented by Professor Daniel Jackson.
There is also the deeper MIT's 6.813 " User Interface Design & Implementation" [4]
[1] https://drive.google.com/file/d/1qblmdoZIJQ4rYGgCPLNusEn2yWi...
[2] https://drive.google.com/file/d/1Cvco6r8a6oV3Sy89RKdIfrZCrGi...
[3] https://stellar.mit.edu/S/course/6/fa18/6.170/materials.html
[4] http://web.mit.edu/6.813/www/sp18/
There is also the deeper MIT's 6.813 " User Interface Design & Implementation" [4]
[1] https://drive.google.com/file/d/1qblmdoZIJQ4rYGgCPLNusEn2yWi...
[2] https://drive.google.com/file/d/1Cvco6r8a6oV3Sy89RKdIfrZCrGi...
[3] https://stellar.mit.edu/S/course/6/fa18/6.170/materials.html
[4] http://web.mit.edu/6.813/www/sp18/
Don't have any good resources unfortunately but I've seen my share of UI/UX people who are plenty good at creating "beautiful" UIs which end up being giant unusable pieces of crap. So I would place a whole lot of emphasis on understanding the user first. What kind of device will the user be interacting with your UI on? Where will they be? What does their existing workflow look like? Some of this overlaps with the field of human factors and ergonomics, which very few in the industry have even heard of.
I would also include a chapter on accessibility. I've been unfortunate enough to have worked with UI people who genuinely didn't give a crap about it. And they'd even get defensive about stuff around colour blindness, attempting to justify their bad choices through poorly made assumptions about the end user (see paragraph one). That's just one small part. I could rant and rave for hours about screen readers, the size of text and fonts.
I would also include a chapter on accessibility. I've been unfortunate enough to have worked with UI people who genuinely didn't give a crap about it. And they'd even get defensive about stuff around colour blindness, attempting to justify their bad choices through poorly made assumptions about the end user (see paragraph one). That's just one small part. I could rant and rave for hours about screen readers, the size of text and fonts.
I was so intimidated by the WCAG guidelines, but after a while I realized that A encodes “don’t make your app a steaming pile” and AA encodes “don’t make your app a steaming pile, plus 4-5 extra accessibility related tweaks”
Thanks. I'll add your idea about accessibility this week. For your idea about workflow etc., do you have specific words/phrases that I should try?
Depends on the context. But if for example you aim to replace a legacy system you might sit down with your user(s) and watch how they interact with it first. What works well? What are their pain points? What could you improve? Basically don't dive in completely oblivious. If the system didn't exist before things become even harder, and I don't have any advice there other than working with subject matter experts where possible.
Whether this is out of scope for your book I don't know. But the key take away here is that you can't presume to know better than your own users.
Whether this is out of scope for your book I don't know. But the key take away here is that you can't presume to know better than your own users.
Copywriting.
I rarely see it ever mentioned in UI/UX but Copywriting has the single biggest factor in UI/UX.
The number of words you write, what you write, and information hierarchy has massive impact on page layout which then ultimately changes the design of the page.
You could be like Yahoo back in the day and have an information hierchacy literally coprywritten onto the page.
https://www.versionmuseum.com/history-of/yahoo-website
Or you could be like Google, and only have a search box.
https://www.versionmuseum.com/history-of/google-search
I rarely see it ever mentioned in UI/UX but Copywriting has the single biggest factor in UI/UX.
The number of words you write, what you write, and information hierarchy has massive impact on page layout which then ultimately changes the design of the page.
You could be like Yahoo back in the day and have an information hierchacy literally coprywritten onto the page.
https://www.versionmuseum.com/history-of/yahoo-website
Or you could be like Google, and only have a search box.
https://www.versionmuseum.com/history-of/google-search
Microcopy (https://www.writingmicrocopy.com/) is a great book about the principles of writing snappy, functional UX copy.
Super, I'll add microcopy this week.
I agree but I'd round it out by saying copywriting and information architecture are the keys to the kingdom.
Nhs.uk has excellent guides about clear writing. Other governments do too.
Perfect thank you. I'll add copywriting this week.
Take a close look at Inside Macintosh. Volume 1 if memory serves.
One thing I do recall is that a menu should be +/- 7 menu items. The reasoning is that people can remember about seven things.
Default buttons (ok/cancel) should always be non-destructive. You don’t want your default button to delete a file, for instance. The reasoning is that users will hit return by default on a dialog box.
The most important thing I’ve learnt over the years is workflow. Build your UI by having actual users use it and critique it. As an example, if you’re filling a form or table in, move to the next cell/field when they hit tab or return. That’s one thing that makes an application good versus useable.
One thing I do recall is that a menu should be +/- 7 menu items. The reasoning is that people can remember about seven things.
Default buttons (ok/cancel) should always be non-destructive. You don’t want your default button to delete a file, for instance. The reasoning is that users will hit return by default on a dialog box.
The most important thing I’ve learnt over the years is workflow. Build your UI by having actual users use it and critique it. As an example, if you’re filling a form or table in, move to the next cell/field when they hit tab or return. That’s one thing that makes an application good versus useable.
Rather than an OK button instead use the verb as the button label to describe will happen: Rename, Delete, Don’t Save, …
Apple's Human Interface Guidelines
https://developer.apple.com/design/human-interface-guideline...
The Windows Interface Guidelines - A Guide for Designing Software (pdf 1995) (as @andai mentioned)
https://www.ics.uci.edu/~kobsa/courses/ICS104/course-notes/M...
User Interface Design For Programmers (as @mmmm2 mentioned)
The cable modem example is one of my favorites
https://www.joelonsoftware.com/2001/10/24/user-interface-des...
--- Topics:
Guidelines for Checkboxes
https://blog.uidrafter.com/guidelines-for-checkboxes
Radio Buttons vs Dropdowns
https://blog.uidrafter.com/radio-buttons-vs-dropdowns
https://developer.apple.com/design/human-interface-guideline...
The Windows Interface Guidelines - A Guide for Designing Software (pdf 1995) (as @andai mentioned)
https://www.ics.uci.edu/~kobsa/courses/ICS104/course-notes/M...
User Interface Design For Programmers (as @mmmm2 mentioned)
The cable modem example is one of my favorites
https://www.joelonsoftware.com/2001/10/24/user-interface-des...
--- Topics:
Guidelines for Checkboxes
https://blog.uidrafter.com/guidelines-for-checkboxes
Radio Buttons vs Dropdowns
https://blog.uidrafter.com/radio-buttons-vs-dropdowns
Thanks! I'll add HIG now, and read up on the rest of your ideas.
Lots of great stuff in https://www.refactoringui.com
This appears to focus on looks (“awesome”, “beautiful”), which is exactly the wrong thing to teach.
+1 for RefactoringUI, amazing stuff!
“Once you've confirmed your email, we'll send the preview chapters to you right away.”
Never received the chapters, but got signed up to a newsletter :/
Never received the chapters, but got signed up to a newsletter :/
Not the creator, but here are links to 3 free chapters:
https://www.refactoringui.com/previews/labels-are-a-last-res...
https://www.refactoringui.com/previews/building-your-color-p...
https://www.refactoringui.com/previews/line-height-is-propor...
I can really recommend the book. It’s not cheap, but it’s very actionable advice
https://www.refactoringui.com/previews/labels-are-a-last-res...
https://www.refactoringui.com/previews/building-your-color-p...
https://www.refactoringui.com/previews/line-height-is-propor...
I can really recommend the book. It’s not cheap, but it’s very actionable advice
Basically the 10 topics from here: https://www.gov.uk/guidance/government-design-principles#sta...
Start with user needs, Do less, Design with data, Do the hard work to make it simple, Iterate. Then iterate again, This is for everyone, Understand context, Build digital services, not websites, Be consistent, not uniform, Make things open: it makes things better.
Start with user needs, Do less, Design with data, Do the hard work to make it simple, Iterate. Then iterate again, This is for everyone, Understand context, Build digital services, not websites, Be consistent, not uniform, Make things open: it makes things better.
Thank you Tom. I'll add those now.
https://www.refactoringui.com/ is a great resource for practical UI design concepts.
His youtube channel is inactive, but also great: https://youtube.com/@SteveSchoger
The review of Derrick Reimer shows the 5 stars as grey, looks a little bit like 0 from 5.
Ironic for a site about UI design.
Ironic for a site about UI design.
My favourite books on design, both fundamental and UI/UX specifically:
- Universal Principles of Design
- The Design of Everyday Things
- Don't Make me Think
- Rocket Surgery Made Easy
- Defensive Design for the Web
- Forms that Work
- Universal Principles of Design
- The Design of Everyday Things
- Don't Make me Think
- Rocket Surgery Made Easy
- Defensive Design for the Web
- Forms that Work
Thank you! I'll add a section for books, and add yours this week.
User Interface Design for Programmers (by Joel Spolsky) is pretty good. I think it's available for free at this point: https://www.joelonsoftware.com/2001/10/24/user-interface-des...
It covers some foundational ideas of what makes a good interface.
It covers some foundational ideas of what makes a good interface.
Nielsen/Norman. No other resource quoted here comes even close to distilling important first principles and citing research to back it up.
Bonus Round: "100 things" series by Dr. Weinschenk and coglode.com maybe after you finish N/N.
Bonus Round: "100 things" series by Dr. Weinschenk and coglode.com maybe after you finish N/N.
This is a good list.
One thing I've seen junior UI/UX people struggle with is preparing their designs to be understood by other people. That could be stakeholders, yes, but I'm thinking of the developers tasked with using them to implement the feature.
Teaching this could touch on softer communications topics: how and when to run a meeting, or give a demo, or ask for feedback. But, I'm also thinking specifically about things like annotating and redlining designs to focus engineers on the important parts, and reduce ambiguity. Also, how to write stories in (e.g.) Jira and document components in (e.g.) Figma.
Even just "how to keep a tidy design canvas, knowing other people are going to be poking around in there, and will rely on it not being a chaotic pigsty"
Another thing to think about: what skills differentiate a successful designer working in a remote, asynchronous environment, versus one working in a traditional office? In my view, it's important to spend even more time gathering clear requirements, and document everything (especially decisions, risks, questions, and so on) in a public way.
One thing I've seen junior UI/UX people struggle with is preparing their designs to be understood by other people. That could be stakeholders, yes, but I'm thinking of the developers tasked with using them to implement the feature.
Teaching this could touch on softer communications topics: how and when to run a meeting, or give a demo, or ask for feedback. But, I'm also thinking specifically about things like annotating and redlining designs to focus engineers on the important parts, and reduce ambiguity. Also, how to write stories in (e.g.) Jira and document components in (e.g.) Figma.
Even just "how to keep a tidy design canvas, knowing other people are going to be poking around in there, and will rely on it not being a chaotic pigsty"
Another thing to think about: what skills differentiate a successful designer working in a remote, asynchronous environment, versus one working in a traditional office? In my view, it's important to spend even more time gathering clear requirements, and document everything (especially decisions, risks, questions, and so on) in a public way.
Thank you. This is really good advice. I'll work on these areas this week.
Refactoring UI is by the authors of tailwind css. Definitely helped me a lot.
Came here to upvote this. It's a book about UI design, but targeted at software engineers. Turned me into the "resident designer" on my last team. Can't recommend enough.
This is my recommended reading list for UI/UX, books that changed the way I think about design and user interfaces:
The Design of Everyday Things, Donald Norman
The Humane Interface, Jef Raskin
Everything by Edward Tufte
The Design of Everyday Things, Donald Norman
The Humane Interface, Jef Raskin
Everything by Edward Tufte
I came here to recommend these exact three life changing authors.
Bonus items
Don't Make Me Think - Steve Krug Information Architecture - Louis Rosenfeld, Peter Morville
Bonus items
Don't Make Me Think - Steve Krug Information Architecture - Louis Rosenfeld, Peter Morville
The Windows Interface Guidelines are quite comprehensive. Appendix C (p. 361) is a bullet ppint summary of the design principles.
https://news.ycombinator.com/item?id=36469181
https://news.ycombinator.com/item?id=36469181
webOS was miles ahead of the competition when it came out in terms of UX, and its innovations are still present in iOS and Android today.
Jeremy Lyon gave a very good 101 explanation about the concepts and thought process:
https://www.youtube.com/watch?v=SEwCRpTEgA0
Jeremy Lyon gave a very good 101 explanation about the concepts and thought process:
https://www.youtube.com/watch?v=SEwCRpTEgA0
I would say start getting deep into Figma. Watch their tutorials and some of the keynotes and you’ll not only learn the important parts of theory, you’ll learn what people do in practice.
I would think that spending time watching videos and playing with Figma would be infinitely more valuable than reading a book. Not only that, it’s funner. Read the book afterwards because by then you’ll have questions in your mind and books can help to fill those holes.
Also, Figma is completely free for students and teachers.
I would think that spending time watching videos and playing with Figma would be infinitely more valuable than reading a book. Not only that, it’s funner. Read the book afterwards because by then you’ll have questions in your mind and books can help to fill those holes.
Also, Figma is completely free for students and teachers.
Where there are existing standards:
* Windows, Mac, iOS, Android, KDE, Gnome, etc... all have existing human interface guidelines, and those should be respected if you are making software for those platforms.
* For the web, PWAs and electron-ish apps, I'd love to see guidelines that help developers understand where you should not go: i.e. disable zoom, left-click, etc... and then jump into the usual discussion about layout, widgets and so on.
* Windows, Mac, iOS, Android, KDE, Gnome, etc... all have existing human interface guidelines, and those should be respected if you are making software for those platforms.
* For the web, PWAs and electron-ish apps, I'd love to see guidelines that help developers understand where you should not go: i.e. disable zoom, left-click, etc... and then jump into the usual discussion about layout, widgets and so on.
A revelation for me happened back in 2010. I was working on a mobile app for a festival and trying to research the best UI. I saw the quote "A cheeseburger is an intuitive interface. It shows you how to eat it with the wrapper and arrangement." I started to watch people use every day interfaces. Gas pumps, self-checkout kiosks, ATMs, signage and number taking at the DMV, Facebook on phones, car radios, drink dispensers, restaurant menus, bus ticket terminals. Even the simplest interface can cause complete confusion. Adding any kind of advertising or screen motion makes it worse. That's not a specific book or website recommendation, but my whole process changed because of that new approach. I still observe these things, especially with al ubiquity of touchscreens in modern life. Way more helpful and practical than what I read.
It sounds like you're sort of describing affordances, which Don Norman talks a lot about in The Design of Everyday Things. :)
https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things
https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things
Found this post insightful on the topic: https://blog.mobile-patterns.com/practical-ux-design-tips-fo...
I’d bump Localisation and Internationalisation higher that just subtopics, because it is such a cross-cutting concern. Cultural differences, algorithmic differences like number/date formatting, sorting orders, but also design differences like longer text or RTL.
Good ideas, will do. I'll add bidi, locale, etc. Thank you!
I would point you to the excellent book “The Design of Everyday Things”, and “Don’t make me think”.
The Object Oriented UX approach defined and evangelized by Sophia Prater is an excellent starting point for organizing complex problems:
https://www.ooux.com/
https://www.ooux.com/
Check out these syllabi/ebooks, lots of focus on history of UI/UX and foundational patterns:
https://faculty.washington.edu/ajko/books/user-interface-sof...
http://faculty.washington.edu/ajko/books/foundations-of-info...
https://faculty.washington.edu/ajko/books/user-interface-sof...
http://faculty.washington.edu/ajko/books/foundations-of-info...
I've heard good things about IxDF and had it recommended to me by UX designers. I started taking this UX beginners guide course on their site. They have an annual membership you need to subscribe to that gets you access to their entire course library and their community.
https://www.interaction-design.org/courses/user-experience-t...
https://www.interaction-design.org/courses/user-experience-t...
The book “The Non-Designers Design Book” is very good. This is where the acronym CRAP comes from, which is Contrast, Repetition, Alignment, and Proximity.
I'm a big fan of Kathy Sierra's "Badass: Making Users Awesome" [1]
Less about UI but really focused on what users feel and how they experience what you build.
1. https://www.amazon.com/Badass-Making-Awesome-Kathy-Sierra/dp...
Less about UI but really focused on what users feel and how they experience what you build.
1. https://www.amazon.com/Badass-Making-Awesome-Kathy-Sierra/dp...
I liked Cadence & Slang:
https://cadence.cc/
https://cadence.cc/
Steve Krug's Don't make me think is one of the best resources on UI/UX https://sensible.com/dont-make-me-think/
I would put on the book recommendation list for a UI/UX Primer
Added. Thank you!
Accessibility. All UI/UX is about making computers accessible to humans so start with A11Y basics. Once you've got those down, and your software is accessible to as many people as possible, then refine and shape and craft to create something that's got your distinct voice.
Added. Thank you.
Have everyone skim "Don't Make Me Think" and go from there.
https://www.amazon.com/Dont-Make-Think-Revisited-Usability/d...
https://www.amazon.com/Dont-Make-Think-Revisited-Usability/d...
Added. Thanks!
A lot of the text reads like it was written by ChatGPT. Probably was, no?
It's openly acknowledged in the published material: "OpenAI ChatGPT generated text for this book. The editor provided direction to generate prototype text for each topic, then edited all of it by hand for clarity, correctness, coherence, fitness, and the like."
Thank you for fielding that. Much appreciated!
Yes. I generate a topic then edit it. ChatGPT text comes out similar-enough to my own writing style, meaning summaries then bullet lists, that using ChatGPT feels a bit like a really good autocomplete.
How to write UX Documentation for the user and for the developer is missing. Commenting code. Testing seems light also, what about record/playback testing? Code coverage testing?
You should check out this previous post https://news.ycombinator.com/item?id=27210022
* don’t make me think
* refactoring UI
* rocket surgery
Added DMMT & RS. Refactoring UI is in the works. Thanks! (
Probably should start with ISO 9241-220:2019
Ergonomics of human-system interaction
Sketching and talking to customers.
Ethical design practices anyone?
Start with Google and apples design process. Really standing on the shoulders of giants.
I have 100 topics or so thus far. What topics do you suggest that UI/UX practitioners should learn a bit about in a primer?
https://github.com/sixarm/ui-ux-primer