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

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 · 2 years ago

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 · 2 years ago

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 · 2 years ago

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.

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

spondylosaurus · 2 years ago

Microcopy (https://www.writingmicrocopy.com/) is a great book about the principles of writing snappy, functional UX copy.

jph · 2 years ago

Super, I'll add microcopy this week.

Solvency · 2 years ago

I agree but I'd round it out by saying copywriting and information architecture are the keys to the kingdom.

nicbou · 2 years ago

Nhs.uk has excellent guides about clear writing. Other governments do too.

jph · 2 years ago

Perfect thank you. I'll add copywriting this week.

charlysl · 2 years ago

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/

mhuffman · 2 years ago

Your first two videos have been hackernews's, and can't be downloaded or viewed. But they look like they might be valuable content.

Mmmm, how about the links to the videos at the bottom of link [3]?

alberth · 2 years ago

OnlyMortal · 2 years ago

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.

mmphosis · 2 years ago

Rather than an OK button instead use the verb as the button label to describe will happen: Rename, Delete, Don’t Save, …

efortis · 2 years ago

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

Thanks! I'll add HIG now, and read up on the rest of your ideas.

snarkypixel · 2 years ago

Lots of great stuff in https://www.refactoringui.com

layer8 · 2 years ago

This appears to focus on looks (“awesome”, “beautiful”), which is exactly the wrong thing to teach.

NayamAmarshe · 2 years ago

+1 for RefactoringUI, amazing stuff!

jwilber · 2 years ago

“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 :/

moritonal · 2 years ago

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.

Thank you Tom. I'll add those now.

m8s · 2 years ago

https://www.refactoringui.com/ is a great resource for practical UI design concepts.

_gllen · 2 years ago

His youtube channel is inactive, but also great: https://youtube.com/@SteveSchoger

croes · 2 years ago

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.