HN Explorer

Ask HN: What topics are good for a UI/UX Primer?

157 points by jph ↗ HN
I'm creating a UI/UX Primer as an e-book to help students learn about user iterfaces, user experience, and usability in general.

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

83 comments

[ 2.2 ms ] story [ 172 ms ] thread
krayz8
A lot of the text reads like it was written by ChatGPT. Probably was, no?
richharms
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."
jph
Thank you for fielding that. Much appreciated!
jph
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.
Zolomon
I would point you to the excellent book “The Design of Everyday Things”, and “Don’t make me think”.
perplex
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.
tjpnz
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.

mikrl
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”
jph
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?
tjpnz
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.

broof
Refactoring UI is by the authors of tailwind css. Definitely helped me a lot.
PaulStatezny
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.
andai
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

Narishma
That's the Windows 95 HIG. I don't know how relevant it would be to current Windows. Microsoft themselves don't seem to care much for it.
layer8
Microsoft dropped the ball on consistent, comprehensive UI guidelines after Windows 7. The earlier ones are a great reference.
hcarvalhoalves
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

jph
Thank you! I'll add a section for books, and add yours this week.
karaterobot
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.

jph
Thank you. This is really good advice. I'll work on these areas this week.
alberth
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

Solvency
I agree but I'd round it out by saying copywriting and information architecture are the keys to the kingdom.
nicbou
Nhs.uk has excellent guides about clear writing. Other governments do too.
jph
Perfect thank you. I'll add copywriting this week.
indymike
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.

freitzkriesler2
Start with Google and apples design process. Really standing on the shoulders of giants.
Jabbles
Your markdown is messed up:

User Interface (UI)](user-interface) + [benefits

jph
Thank you, fixed now.
moritonal
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.

jph
Thank you Tom. I'll add those now.
amelius
Make sure to cover text-to-speech and speech-to-text, as they become increasingly important.
jph
Thank you. I'll add these now.
oDot
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

scarnz
The Object Oriented UX approach defined and evangelized by Sophia Prater is an excellent starting point for organizing complex problems:

https://www.ooux.com/