Design Resources & Educational Material

Archive User Interface
1

In this thread we can collect material on design topics. Book recommendations, papers, articles, courses, quotes, …
Let’s just be a bit careful about not making recommendations seem like advertisement.

To avoid the thread from being flooded, please do not comment if you’re not a UI module member. If you are not and have interesting resources to share, let us know in the #user-interface-module channel on blender.chat.

6 Likes
2

Let me make a quick start.

More to come…

13 Likes
4
With the permission of Julian (blender.chat)

Aviation

For me the gold standard for UI/UX/ergonomics is the cockpit designs of jets. Even if this industry seems remote, I think these can be useful for inspiration, get ideas from a very different perspective, thinking out of the box…

Check back later for updates.
2 Likes
5

Here’s a list of ressources from the UX in CG Discord server (will poaste URL as soon as I have it). The original document can be found here and will be updated from time to time. I got permission to post the list here.

UX in CG Reading Recommendations

Hey everyone! This document aggregates all the excellent books, articles, and probably other media (like videos and podcasts!) that we recommend from the UX in CG Discord server.

Please feel free to add recommendations, make comments on recommendations, and create new topics to help us organize the document.

Evergreen / Required Reading

Accessibility / Inclusion

Data Analytics / Data Visualization

Graphic Design

Iconography, Typography, and Visual Design. (All subjects are also applicable to UI design!)

  • The Non-Designers Design Book - Robin Williams
    • Very applicable to UI design!! This is a fantastic book for anyone who doesn’t have a background in graphic design / UI design but find themself in a position where they have to make design decisions while they work. – Jordan Wild (Wayfair)

Information Architecture

  • Foraging Theory - David W. Stephens, John R. Krebs
    • Stephens/Krebs “Foraging Theory” is often taught in academic courses and this branch of thinking was the basis for all the work Nielsen/Norman did on information foraging and information scent. – Alan Wexelblat (Wayfair)

Interaction Design

Psychology / Perception

Psychology, cognition, perception, and bias.

  • Embodied Cognition (New Problems of Philosophy) - Lawrence Shapiro
    • Pick your favorite author’s take on Embodied Cognition. I can’t find the one I first read, which really set me on my arse in terms of how I thought about thinking. Shapiro put out a new edition of his book with that title in 2019 and I haven’t read it, but it promises to be more up to date. – Alan Wexelblat (Wayfair)
  • Metaphors We Live By - George Lakoff, Mark Johnson
    • Old school “Metaphors We Live By”. Lakoff is kind of a hero of mine and this book is one of the reasons. Pair with “Judgment Under Uncertainty”, another book that changed my life.
  • Judgement Under Uncertainty: Heuristics and Biases - Daniel Kahneman, Paul Slovic, Amos Tversky

UI Design

UX Design

  • Living With Complexity - Don Norman

    • I can really recommend this book for every UX designer who is building tools for artists. It’s about complexity management, which we always do when designing workflows and interfaces. – Matthäus Niedoba (Anchorpoint)

  • Mental Models - Philip N. Johnson-Laird

    • Johnson-Laird’s “Mental Models” is dense and academic AF but I don’t know of a better, more modern reference on how people form mental models. – Alan Wexelblat (Wayfair)

  • Sketching User Experiences: Getting the design right and the right design - Bill Buxton

    • While we’re on the models topic, Buxton’s book “Sketching User Experiences” is interesting. Buxton is an academic, sort of, and he’s trying to address two audiences with this book and it kind of hurts the book. But it’s a great book on sketching and models. This one you want in physical form. – Alan Wexelblat (Wayfair)

  • UX Strategy - Jaime Levy (O’Reilly)

  • Things That Make Us Smart: Defending Human Attributes in the Age of the Machine - Don Norman

UX Research

  • Universal Methods of Design - Bella Martin, Bruce Hanington
    • This book is basically an encyclopedia of UX research and design methods. It’s a really helpful reminder of all the possibilities available to you when you’re at each of the turning points in your project! (I linked the revised and expanded version here but I personally have the original book.) – Jordan Wild (Wayfair)

Great Books that Help Others Understand UX

Books Surprisingly Applicable to UX Design

These recommendations aren’t directly about UX design, but there’s much to learn from them that can be applied to our craft!

5 Likes
7

Icon Usage Guidelines

References

https://ia.net/topics/on-icons
https://uxmyths.com/post/715009009/myth-icons-enhance-usability
https://sympli.io/blog/when-you-should-and-shouldnt-use-icons/
https://archive.uie.com/brainsparks/2006/02/20/orbitz-cant-get-a-date/
https://www.nngroup.com/articles/icon-usability/
https://ux.stackexchange.com/a/5087

Summary

Naturally, you should use an icon when you don’t have enough space for a text label, but this isn’t always the best reason to use an icon. First you should consider creating space in other ways.

Many researchers have shown that icons are hard to memorize and are often highly inefficient. Icons are very difficult to get right and need a lot of testing. Icons add width and clutter, distract the user from the content of the app, and, contrary to intuition, do not necessarily help the user find an UI item better than a text label alone. It’s not worth it.

Even though icons can certainly make a design look more visually appealing, visual appeal doesn’t necessarily equal optimal user experience. They can be very distracting, especially when it isn’t clear what an icon represents, so use them with caution and minimise whenever you can.

While icons depict tangible objects fairly well, for anything abstract, icons rarely work well, since abstract things generally do not have any clear visual image. Icons are especially bad for actions, it’s hard to clearly show a process with a picture. We can eye-scan over icons faster than we can text, however images rarely give us the information we need.

Yes, icons are used all the time in toolbars for actions, but toolbars were intended for experts, and nonetheless users are frequently confused by them. Expert users will learn a set of icons (perhaps), but you will be surprised how long the learning curve is.

The research community has long demonstrated that people cannot remember the meaning of more than a small number of icons. The location of the icon is more important than the visual imagery. People remember where things are, not what they look like.

Always consider the reason for using icons, and never assume icons will enhance the user experience.

Use an icon only when it provides additional clarity or is necessary to draw attention to a UI element.

  • Icons can save space over text, but at the price of recognition.
  • Good icons can make the look of an app more pleasing, but it’s hard to get the right icons.
  • Icons represents an object with a strong physical analog or a visual attribute work well.
  • Icons can serve as bulletpoints and also for structuring content, e.g. file type icons.
  • Don’t overuse them or use them for decoration.

Remember the best icon is a text label.

Icon Design Guidelines

Summary

Icons need to be recognizable by themselves, they need to illustrate the notion they represent clearly, and they need to work together with all other icons and notions you use, in context.

Use icons that people have seen and used before. Universally understood icons work well, i.e. home, print, close, play/pause, magnifying glass for search, etc.

A user’s understanding of an icon is based on previous experience. Remember that different cultures may interpret the same image in different ways.

Simplify icons for greater clarity and legibility. The best icons are simple shapes and pictograms that users can instantly identify. A distinct silhouette is the most important feature of an icon.

Make sure there’s enough contrast between states, like active versus inactive. Avoid using similar icons for different purposes or different icons for the same purpose.

Links

https://medium.com/bpxl-craft/10-essential-tips-for-user-interface-icons-e7d04b5988a5
https://www.designsystems.com/iconography-guide/
https://design.gitlab.com/product-foundations/iconography

4 Likes
8

I think it’s a great opportunity for people to learn about design, whether they’re just starting out or are looking for some inspiration. The resources page is full of useful articles and blogs that cover a variety of topics related to design.
I’ve never seen anything like this on any other site. It’s definitely worth checking out!

3 Likes