I’m reviewing Mark Miller‘s online course, The Science of Great UI. This course is the first in a series, with the forthcoming Design Like a Pro as the second, and several more planned after that. Mark’s pace in the course is very measured, so even if English isn’t your first language, you should have no trouble following along. For me, I was able to adjust the player speed to 1.5x and still follow most of the material, slowing down or pausing only occasionally.
In the intro, Mark does a good job of setting up the series (I really want to know about “Dark Design Patterns” now, which he says will show how the guidelines covered in the course are being used by real companies for nefarious purposes). I was also impressed with his green screen introduction, which you can also see in the course’s trailer. I’ve recorded a number of courses myself, like the ASP.NET Core Quick Start, but I haven’t ventured into live video in them (yet).
In Chapter 2, you learn some interesting details about light and color and how we use it to process information.
Chapter 3 uses an optical illusion to explain how our brain deals with contradictory information, often resulting in increased cognitive load and/or emotional response. A real world case study is shown that incorporates this same problem, demonstrated in the form of confusing public transportation signage. Mark does a good job of explaining the problem, asking us to conceive our own solution, and then identifies a solution he might use to address the issues.
Chapter 4 looks at how we can use grouping to convey meaning, through a variety of means, and why our brains are wired to look for natural groupings in what we observe.
Chapter 5 describes symbols, and how they have been used in the past, and today. Symbols are “the graphical equivalent of an acronym”, compressing a great deal of information into a simple, concise graphic. A real world case study involving the Pioneer 10 plaque helps us try to avoid vaporization of the planet Earth by reducing symbol ambiguity.
Chapter 6 describes cognitive load, which we want to minimize in our designs and interfaces. We’ve all worked with software that was painful to use and required constant attention to avoid screwing up. This chapter describes why some interfaces require our brains to work harder than others, and how excess cognitive load can lead to inattentional blindness. I also learned a new term, saccade, in this chapter. The chapter also describes when to use sharp corners versus rounded edges.
Chapter 7 covers granularity, and provides a great deal of well-presented charts and data on how many pieces of information people can encode at a time. That is, if you were to encode data into, say, brightness of buttons (ranging from black to white), there is a limit of how many different shades of gray a user could successfully identify. Mark then describes some ways to improve this channel capacity using a few different techniques.
Chapter 8 discusses visual search. That is, how we perceive images, scanning them for details, and how this should impact our design. There are some great interactive exercises in this chapter.
Chapters 9-11 cover differences between foreground and background, and how to associate relevance with emphasis. Chapter 11 dives deeply into backgrounds, distances, and gradients, offering a lot of good guidelines. It also goes over a tool which lets you play with different combinations of text color, background color, and highlight colors, and see if they’re easy to read and comply with WCAG minimums.
Chapter 12 discusses signal, noise, and clarity, and how to apply guidelines to increase clarity of information. Again, there are some great real world examples that demonstrate problems, and how to correct them.
Chapter 13 contrasts the use of recognition and recall in orienteering through user interfaces. It describes the paths it takes to perform actions with a variety of real-world examples.
Chapter 14 discusses responsiveness and feedback loops. As I was watching it, I started wondering how I could test out different responsiveness rates, and that’s just when Mark introduced a free tool to do just that.
Chapter 15 concerns discoverability, and teaches several lessons through real world software and signage examples.
Chapter 16 briefly discusses how our brains work and interact with the world, and then summarizes the course with a series of short clips set to music.
The course also includes an eBook in PDF format with additional case studies.
Other Reviews for Science of Great UI and other DevIQ courses
Really impressive UX/UI video course with a *LOT* of detail. “The Science of Great UI” (two free chapters!) https://t.co/hC3mqezNmc
— Scott Hanselman (@shanselman) March 14, 2017