Science of Great UI (Part 1)... · Avoid modal\ഠinstruction that takes customers off task and into the UI of the modal dialog.\爀屲[PgDn] Discoverability should be placed close

$Page 1: Science of Great UI (Part 1)... · Avoid modal\ഠinstruction that takes customers off task and into the UI of the modal dialog.\爀屲[PgDn] Discoverability should be placed close$
Science of Great UI (Part 1)

Mark Millerdevexpress.com/mark

@greatUI, @MillerMark

Efficiency in Thought and Motion

SummaryReading takes time.

Average adult reading speed in the US is 300 words a minute.

Each word, on average, adds about 200ms to your customer consumption time.The more words a customer sees, the less likely they are to read it (tl;dr).If the customer is on an important path, such as purchasing, use fewer words.

There will always be a foreground and backgroundForeground and background colors should be distinctPatterned backgrounds make it difficult to read textBackground should not call attention to itselfA wide background/foreground gap improves communicationExcessive background saturation makes text harder to read

Lessons Learned - Backgrounds

Presenter

Presentation Notes

So we’ve seen this list already in chapter 9, Foreground & Background part 1. Now we’ve learned some new lessons in our study of backgrounds that we can add to our existing list. [PgDn] We’ve learned that a wide gap between the foreground and background colors allows us a greater distance between our granularity points, which means more effective and more reliable communication, which reduces cognitive load. [PgDn] We’ve also learned that excessive background saturation (e.g., above 30%), makes symbols harder to recognize and text harder to read.

Guidelines - BackgroundsShould be a solid color, low-saturation, ideally white or black

If you ignore this guideline:Gradients: minimal transition (start and stop colors should be very close)

Graphic or texture: it should be very low contrast (e.g., light gray on white)

Saturated color: keep saturation low

Like this NOT this

Like this NOT this

NOT this

NOT thisLike this

Like this

NOT thisLike this

Like this NOT this

!

Presenter

Presentation Notes

So if you must ignore this guideline (and I should emphasize, this is NOT recommended)… If you [PgDn] decide to use a gradient, the transition between start and stop colors should be minimal. For example, [PgDn] something like this. [PgDn] Avoid multi-hue or abrupt transitions like these. [PgDn] If you [PgDn] decide to fill your background with a graphic or a texture, contrast should be extremely low. For example, [PgDn] something like this. [PgDn] Avoid high-contrast textures or graphics. [PgDn] And if you [PgDn] decide to make your background a solid color other than black or white, saturation should be low. For example, [PgDn] something like this. [PgDn] Avoid highly saturated colors. [PgDn] Again, these suggestions are only here in case you decide to ignore the guideline at the top. For the best, safest results, stick with the guidelines. [2 sec] Alright, this wraps up our discussion of backgrounds. Coming up next, we’ll talk about noise.

Two kinds of noise:Excessive irrelevant informationOver-emphasis of unimportant data (visual noise)

Noise increases cognitive loadNoise distracts from important detailsNoise is bad

Work to identify and suppress it

Noise Takeaways

Presenter

Presentation Notes

[PgDn] These are your Noise Takeaways. There are two kinds of Noise: The first kind of noise comes from [PgDn] large quantities of irrelevant information appearing in the sensory field. The second kind of noise happens when there is an [PgDn] over-emphasis of unimportant data, or low relevance information. When this happens in the visual field, we call this visual noise. The presence of noise in a sensory field [PgDn] increases cognitive load, which [PgDn] distracts us from efficiently detecting the important details. From the standpoint of good design, [PgDn] noise is bad. And your job is to [PgDn] work to identify it and suppress it.

Weak signal Under-emphasis of important dataThe opposite of visual noise

Weak signal increases cognitive loadWeak signal makes it hard to see important detailsWeak signal is bad

Work to identify and adjust emphasis appropriately

Weak Signal Takeaways

Under-emphasis

Presenter

Presentation Notes

[PgDn] These are your Weak Signal Takeaways. [PgDn] Weak signal is the [PgDn] under-emphasis of important data, and it’s the [PgDn] reflected opposite of visual noise. Weak signal [PgDn] increases cognitive load, and [PgDn] makes it hard to detect important details. And from the standpoint of good design, [PgDn] weak signal is bad. Your job is to [PgDn] work to identify it, and increase emphasis appropriately.

Redundancy = 0Noise = 0Ambiguity = 0Emphasis ≈ ImportanceConsumption occurs with maximum efficiency

Cognitive load 0

Clarity Is:

Presenter

Presentation Notes

Here are your clarity takeaways. For the purest clarity… redundancy, noise, and ambiguity all approach zero, and emphasis closely matches information relevance (again, constrained by a granularity of three). Reaching clarity means consumption occurs with maximum efficiency, and as a result extraneous cognitive load (that might otherwise be tasked with understanding the UI), approaches zero. // Related: Beauty is the consumption of information under minimal cognitive load

Communicating important information about the user interface:How to useFeatures/functionalityLimits/boundaries

Discoverability

Presenter

Presentation Notes

[PgDn] It’s all about helping customers discover the what’s important, including: [PgDn] using the interface, [PgDn] understanding and accessing important features and functionality, and [PgDn] understanding any limits or boundaries of the software.

Discoverability is importantDiscoverability is often forgotten, or designed with low priorityWhen discoverability gets verbose, you might have a design issueModal discoverability disrupts task flow

Lessons Learned – Discoverability

Presenter

Presentation Notes

We learned that [PgDn] discoverability is important, but often [PgDn] forgotten or deprioritized in the planning stages. [Wait for bullet transition] We also learned that when [PgDn] discoverability gets too verbose, you might have a design issue. For example, if disposing of trash requires two hands, maybe we can simplify to a design that requires no hands. And we learned that Modal discoverability is disruptive.

Discoverability should be fluid & in parallel (avoid modal instruction)Discoverability should be close in proximity to the content of interestDiscoverability content should be concise and clearUse images (especially when the text can become more concise)Live preview is the best discoverabilityWhen you invent new UI (or bypass convention):

Set aside time in the schedule to design and implement a good discoverability solution

Guidelines - Discoverability

Presenter

Presentation Notes

Discoverability Guidelines [PgDn] Discoverability should be fluid through time & happen in parallel to the task. Avoid modal instruction that takes customers off task and into the UI of the modal dialog. [PgDn] Discoverability should be placed close in proximity, both in space and time, to the features or content you are trying to explain. [PgDn] Discoverability content needs to be concise and clear. [PgDn] Use images (especially when images can make the text more concise) [PgDn] Live preview is the best discoverability. And finally, [PgDn] When you invent new UI (or circumvent convention): [PgDn] Set aside time in the schedule to design and implement a good discoverability solution

Strive for the tightest feedback loop possible. If response time:

< 140ms: No additional feedback is needed.

140ms-1 sec: Additional feedback is usually not needed.

1-5 sec: Animated indicator (subtle => low contrast, small, smooth).

> 5 sec: Progress bar, ideally with Cancel capabilities.

There are significant consequences for straying from these guidelines.Feedback too soon => disruptive to concentration and flow.Feedback too late => cognitive load & negative emotional state go up.

(increase risk of pilot induced oscillation)

Guidelines – Feedback Loop

Presenter

Presentation Notes

So, for any interactive presentation of information… [PgDn] We want to strive for the fastest feedback loop possible. In some cases, [PgDn] we may need to let users know the machine is working on their request. [PgDn] If application responsiveness is less than 140ms, customers will believe they are directly manipulating the machine. [PgDn] If application responsiveness is less than one full second, customers will notice the latency, but additional feedback is not required. For some activities such as typing or moving a pointer where zero latency is expected, you really have no choice but to ensure a faster feedback loop. [PgDn] If application responsiveness is between one full second and five seconds, you should show some kind of subtle, animated indicator. And by subtle I mean it should be low contrast, small, and the animation should be smooth. [PgDn] If application responsiveness is greater than five seconds, you should show a progress bar. [PgDn] Now, when interacting with human beings, these are great guidelines to stick with. Straying too far from these guidelines can introduce significant consequences. For example, if you show [PgDn] feedback too soon, it can easily disrupt concentration and flow. If you show [PgDn] feedback too late, cognitive load can increase and a negative emotional state can follow, and you can [PgDn] increase the likelihood of user errors due to pilot induced oscillation.

What We’ve LearnedIt’s all an illusion (umwelt).Reading is an act of simplifying a complex array of inputs at different levels.Backgrounds should approach white or black and be solid (saturation → 0).Every onscreen element is information. But not every element is equally important.Emphasis should match importance.Cognitive load limits the breadth of our perception.Granularity limits the number of data points we can use on a channel.Noise (2 forms) – unneeded data & visual noise (overemphasize the unimportant).Weak signal (underemphasize the important).Discoverability allows customers learn how to use the interface.Feedback loop gives you 140ms to respond. Longer response needs special handling.

More Science of Great UI:

sgui.com

Contact Mark Miller:Twitter: @MillerMarkTwitch: twitch.tv/coderushedEmail: [email protected]

Documents

Science of Great UI (Part 1)... · Avoid modal\ഠinstruction that takes customers off task and into the UI of the modal dialog.\爀屲[PgDn] Discoverability should be placed close