Show link: .NET Rocks! 1378 (Science of Great UI with Mark Miller)
Guest: Mark Miller
Show Notes
- What’s is the training course on UI you’ve been working on?
- It contains cognitive science research (experiments) with original conclusions that lead to guidelines for good design.
- For example, how do the senses and the brain work together, and what are implications (e.g., filled vs. hollow icons, round vs. sharp corners)?
- Is this course like Brain Games?
- Many people have mentioned this; however, the television series doesn’t present any UI guidelines.
- Optical illusions provide insights into the shortcuts our brain is taking to present a version of reality (e.g., the blind spot)
- We all think we experience things in real-time, but we’re about 100 ms behind.
- Mark presents critiques of user interfaces to advocate that it’s worth the time to fix the UI.
- Mark approached several training companies with his course, and they passed for legal/finance reasons.
- Latency of the senses
- Suppose you’re reaching out toward a glass of water on a table. The decision to lift the glass takes 40 ms. Next, the motor cortex is involved (15 ms) to get the muscles to move. The feedback takes about 140 ms in total.
- Between moving the muscles and getting feedback, if you have a machine (e.g., computer keyboard, tablet) involved, the feedback takes even longer.
- Tablet/mouse movements need to feel instantaneous. When you exceed that 140 ms threshold, the user will notice.
- If an operation takes between 140 ms and 1 s, we don’t think “I’m doing this;” we think “I’m making the computer do this.”
- In speech recognition, you need something to fill the gap while processing is happening (e.g., “hmm” or “let me think about that”).
- If an operation takes less than 1 s, don’t respond. If it’s between 1 s and 4.5 s, give some response (e.g., a spinning work indicator). If it’s over 4.5 s, you need a progress bar with a cancel button.
- Don’t give feedback too soon (e.g., if the audio and video aren’t in sync, we experience high cognitive load). If feedback comes too late, you get pilot-induced oscillations (i.e., you over-correct).
- Comments about the Microsoft Surface Studio
- The Surface Dial provides another means of input. However, picking it up and moving it has a transitional cost.
- There are two modalities: a display with the keyboard and mouse away from it; the display with the pen or Dial.
- With a Dial and mouse combined, you could have better 2D or 3D model sculpting tools.
- Comments about the Microsoft HoloLens
- Microsoft HoloStudio let’s you put 3D things together; however, you end up with gorilla arm.
- Having something on your head increases strain.
- Being creative is not as important as communicating in the HoloLens world.
- Mark wants to create a system with a camera aimed behind you combined with tactile sensors on your back to give you a radar picture of what’s behind you. (Echolocation was posed as a non-technological solution.)
- What are channels?
- Channels are lines of input into the brain.
- Visual: brightness, hue, saturation
- Tactile: pressure, temperature, deep pain
- Auditory: pace, volume, silence
- Gustatory (taste)
- Temporal
- Proprioception (where things are in space)
- One reason we don’t use temperature and deep pain in user interfaces is because inputs are incredibly slow. For example, when you stub your toe, it can take 2-3 s to get feedback.
- Proprioception is very fast; tactile feedback is faster.
- Auditory input is the first to come in, which is why we start races with a gunshot instead of a light flash. The organs involved are simpler, and the auditory regions of the brain are smaller than those for other systems.
- Granularity
- Humans can differentiate about 4 shades of colors without errors. Using a data table as an application, make the background the lightest, the border slightly darker, the headers darker still, and the data the darkest.
- If it’s too granular, it’s useless.
- Humans can differentiate about 8 hues. If you have reference context (e.g., a color sample), we can discern more. We can differentiate about 4 levels of brightness and 3 levels (unofficially) of saturation.
- You can increase channel bandwidth by combining channels. It’s not multiplicative though (e.g., when combining hues (8) and brightness (4), we can’t distinguish all 32 combinations without error).
- Color alone can be misleading. For example, yellow is perceived with two cones (red and green), which makes it seem brighter than blue, which only uses the blue cone.
- Channels are lines of input into the brain.
- Where can we find the course?
- Use the following questions to assess your UI:
- Does emphasis match information relevance (e.g., low-contrast borders, easy-to-read text, solid color background with low saturation)?
- For readability, is there sufficient contrast between the text and the background?
- Are channel bandwidth limits followed?
- Is color used consistently and meaningfully?
- Does physical proximity match contextual proximity? For example, a person’s picture and name are related contextually, but if they’re far apart on the screen, they may not be correctly associated.
- There are sample applications on GitHub.
- Step Diagrammer — “A tool to objectively measure the cost of the user interface in Windows desktop apps.”
- Feedback Loop Explorer — e.g., what happens when your mouse moves more slowly than you expect
- Highlight Explorer — “Allows you to explore various color options for highlighting.”
Better Know a Framework
SkillFlow — “Get real-time help from expert developers on any Slack team.”
Carl said it may be better to go to Stack Overflow, where questions are curated, rated, and the most valuable answer is selected; you also see links to related questions. Mark said that “efficiency wins,” so if this tool helps you get your answer faster, SkillFlow is a better use of your time. He believes that eventually the answering engine could be replaced by an intelligent bot. However, there’s the aspect of researching answers on StackOverflow, which helps you retain the information for longer.
Listener E-mail
From show #1027 (The Biology of UI with Mark Miller); using the Microsoft Sculpt Comfort Desktop, but the function keys are much smaller than they should be. In response, the listener started using the Colemak keyboard layout.
Technology Giveaway Ideas
A Microsoft Surface Studio (Intel Core i7) and an SSD drive.