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

billyhollis@live.com or billyhollis@gmail.com