The 8 most common ways developers get UX wrong Billy Hollis Agent Provocateur billyhollis –at– live.com
The 8 most common ways developers get UX wrong
Billy Hollis
Agent Provocateur
billyhollis –at– live.com
This session is interactive
•Better UX comes from active attempts to do better
• You need to practice thinking of better ways
• Start now
#1 – Crowded screens
Crowded screens violate several design principles
• Inattentional Blindness
•Preference for openness
•Cognitive load
•Horror vacui
Inattentional Blindness
•A design principle that stems from the way the human visual system works•Only a small part of the visual
system has high resolution• You automatically focus that
part on the task at hand•Anything you brain doesn’t
consider relevant is filtered out
A test
• I will show three slides for a few seconds each
• Each slide will have drawings of common tools you might find around your house or workshop
• Your task: how many slides contain a hammer?
Users see what they expect to see
•Crowded screens are “filtered” on the fly to just what the user needs right now
• If you know what the user needs, you can speed them up and reduce their stress by just showing that
Alternative designs
•Hub and spoke
• Linear flow
• Expand / collapse
• Etc.
Header area – holds most important information and stays in place
Subarea 1
Subarea 2
Subarea 3
Subarea 4
Subarea 5
Subarea 7
Subarea 6
Subarea 8
Sub area detail
Progress indicator
NavigationControls
Expand / collapse
#2 – Bad signaling
A simple software example of what you can do immediately to get better UX
•A simple screen for entering some levels• Screen has been anonymized – don’t worry about what the data
means
• Functionally, it works
OriginalVersion
UX issues
• Labels look same as entry fields
• (Bottom) Editable cells look same as read-only cells
•Bright color
• Textboxes for entry don’t take up whole cell
• Top title looks like a button
Revamped version
Sports Equipment Data:
Count the number of American football items
There are three footballs, but…
•How many basketballs did you see? How many baseballs?
• Your eye filtered them out for the most part
•Why? Inattentional blindness.
• Let’s look at ways to do better
Leveraging more design principles
•We already know things close together are visually grouped
•We’ve just seen that size helps the visual system group
•Color helps grouping too
•Put all of that together
•Our visual system groups by size, shape, color, and proximity
• You’ve just seen four major Gestalt design principles
#3 – No indication of information importance
Emphasize importance with:
• Size
•Color
•Position
#4 – Lack of visual cues
#5 – Too many data grids
#6 – Too many options
Hick’s Law
• Hick's law - The time required to locate and use an option increases as the number of options increases.
> 400 options on menu
Several thousand users in several hundred offices
Why was this done? Requirements:
• Every user must have access to every application function
• Any operation might involve talking to any person in the company
• Favorites
• Recently used list
• Frequently used list
• Role-based menus
• Configurable menus – let the user create their own
• Make available actions context dependent
• A filter to narrow down items
• Windows 10 style search
• Reorganize with wizard
• Voice commands
• Predictive menus
• Hotkeys and shortcuts
• Task-based searching(“I want to…”)
• Menu item heat map
Some ideas to make it better
Windows 10 Start illustrates many of these
#7 – Bad search experience
#8 – UI is too static
Scenarios where dynamic UI works better
• Sizing to different users/hardware
• Editing different data types
•Phases of a process – change view for each phase
•Dashboards
Honorable Mentions
•Keeping obsolete, clunky designs for “consistency”
•Garish colors
•Design by accretion• Also known as “design by backlog”
• Lack of mapping to real world
Billy Hollis• User interface design and prototyping
• Corporate design facilitation and strategy
• Native app development – UWP/WPF/XAML
• Training on user experience design
• Training on XAML • Windows 10 / WPF / mobile / touch
• Beginning through advanced
www.nextver.com for samples and videos