[HN Gopher] Ask HN: What topics are good for a UI/UX Primer?
___________________________________________________________________
Ask HN: What topics are good for a UI/UX Primer?
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
Author : jph
Score : 113 points
Date : 2023-06-25 14:31 UTC (8 hours ago)
| andreasmueller wrote:
| Great stuff (proven by actual-use-in-practice):
| https://uxqb.org/en/ Especially (from tab "Documents"):
| https://uxqb.org/public/documents/CPUX-F_EN_Curriculum.pdf
| paulcole wrote:
| I liked Cadence & Slang:
|
| https://cadence.cc/
| hcarvalhoalves wrote:
| 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
| karaterobot wrote:
| 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.
| codr7 wrote:
| 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
| dccoolgai wrote:
| 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.
| amelius wrote:
| Make sure to cover text-to-speech and speech-to-text, as they
| become increasingly important.
| asaddhamani wrote:
| 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...
| oDot wrote:
| 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
| anconia wrote:
| You should check out this previous post
| https://news.ycombinator.com/item?id=27210022
| perplex wrote:
| 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.
| OnlyMortal wrote:
| 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.
| asadotzler wrote:
| 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.
| snarkypixel wrote:
| Lots of great stuff in https://www.refactoringui.com
| NayamAmarshe wrote:
| +1 for RefactoringUI, amazing stuff!
| jwilber wrote:
| "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 :/
| andruby wrote:
| 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
| layer8 wrote:
| This appears to focus on looks ("awesome", "beautiful"), which
| is exactly the wrong thing to teach.
| krantic wrote:
| 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
| c0brac0bra wrote:
| 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...
| davidhariri wrote:
| https://hackdesign.org/
| alberth wrote:
| 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 wrote:
| I agree but I'd round it out by saying copywriting and
| information architecture are the keys to the kingdom.
| spondylosaurus wrote:
| _Microcopy_ (https://www.writingmicrocopy.com/) is a great book
| about the principles of writing snappy, functional UX copy.
| mmmm2 wrote:
| 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.
| indymike wrote:
| 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.
| krayz8 wrote:
| A lot of the text reads like it was written by ChatGPT. Probably
| was, no?
| richharms wrote:
| 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 wrote:
| 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.
| fzeindl wrote:
| Papercuts!
| r3trohack3r wrote:
| * don't make me think * refactoring UI * rocket surgery
| tjpnz wrote:
| 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 wrote:
| 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"
| elegant-codes wrote:
| [dead]
| scarnz wrote:
| The Object Oriented UX approach defined and evangelized by Sophia
| Prater is an excellent starting point for organizing complex
| problems:
|
| https://www.ooux.com/
| efortis wrote:
| 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
| Zolomon wrote:
| I would point you to the excellent book "The Design of Everyday
| Things", and "Don't make me think".
| charlysl wrote:
| 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 wrote:
| Your first two videos have been hackernews's, and can't be
| downloaded or viewed. But they look like they might be valuable
| content.
| charlysl wrote:
| Mmmm, how about the links to the videos at the bottom of link
| [3]?
| johnwheeler wrote:
| 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.
| pickpuck wrote:
| 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...
| nelsonic wrote:
| Found this post insightful on the topic: https://blog.mobile-
| patterns.com/practical-ux-design-tips-fo...
| freitzkriesler2 wrote:
| Start with Google and apples design process. Really standing on
| the shoulders of giants.
| Jabbles wrote:
| Your markdown is messed up:
|
| User Interface (UI)](user-interface) + [benefits
| jph wrote:
| Thank you, fixed now.
| dbg31415 wrote:
| Have everyone skim "Don't Make Me Think" and go from there.
|
| https://www.amazon.com/Dont-Make-Think-Revisited-Usability/d...
| moritonal wrote:
| 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.
| broof wrote:
| Refactoring UI is by the authors of tailwind css. Definitely
| helped me a lot.
| PaulStatezny wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Microsoft dropped the ball on consistent, comprehensive UI
| guidelines after Windows 7. The earlier ones are a great
| reference.
| m8s wrote:
| https://www.refactoringui.com/ is a great resource for practical
| UI design concepts.
| croes wrote:
| 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.
| _gllen wrote:
| His youtube channel is inactive, but also great:
| https://youtube.com/@SteveSchoger
___________________________________________________________________
(page generated 2023-06-25 23:02 UTC)