Everett McKay: Dont design like a programmer

11/11/2014

1

Everett McKay Principal UXDesignEdge

Who is this guy?

• I’m Principal of UX Design Edge (in Vermont)

• I offer UI design training and consulting services,

primarily to software teams that don’t have

sufficient design talent

• Previously was a Windows PM at Microsoft, where

I wrote the Windows UX Guidelines

• Didn’t work on Windows 8

• Before that, was a developer of Windows and Mac

Uis

• Recently wrote UI is Communication, which is

targeted at non-designers

Copyright 2014 UX Design Edge

So, yes, I am a programmer!!


What I will cover today

• “The Revelation”—a personal story

• What I mean by “designing like a

programmer”

• Three solutions

• Scenario-based design

• Communication-based design

• Inductive UI for intuitive task flows

• Improving your design culture


My top goal for today

• To fundamentally change how you think

about UI design


11/11/2014

2

Users!

Users!

Users!

Users!

Users!

Users!

Users!

Users!

Users!

11/11/2014

3

“I don’t

want to

copy over all

that crap!”

11/11/2014

4

The revelation

We were focused on the mechanics!

The user was focused on his goals!


The revelation, part 2

For true user-centered design,

designers and users must be

focused on the same thing!


The revelation, part 3

There is a significant difference

between thinking about users and

thinking like users


“We need a

wizard to

copy files &

settings to a

new PC.”

11/11/2014

5

“What am I

supposed to

do here?”

“What does

this page

do?”

“What am I

supposed to

do here?

“Am I even

in the right

place?”

“What does

this label

mean?”

“Is this

going to

meet my

needs? Do I

trust it?”

“Is this

really going

to do what I

want?”

“Why is this

button red?

Did I do

something

wrong?”

11/11/2014

6

Users aren’t stupid

• …so we don’t need “dumbed down” UI

• Rather, they are busy, focused on their work

• Unlike us, they have fundamental questions

and challenges that we take for granted

• Unlike us, they don’t know how our UIs work

• And don’t really want to know

• They do know how to click on stuff!!

None of the previous UI changes addressed

any of the fundamental questions! Copyright 2014 UX Design Edge

The biggest mistake I see:

• Assuming that sophisticated software for

sophisticated tasks should require training

and documentation

• Not just anybody can do Finite Element

Analysis…!

• True, but your users should be able to figure

out what the Done button does without

training or reading a manual


Users won’t proceed in a task

until they are confident!


The classic programmer design mistakes

• Designing for yourself (works for me!)

• Focusing on technology and features, not users and

their goals

• Thinking that solving problem mechanically is good

enough (problem, solution, done!)

• Exposing raw data structures instead of something

meaningful to users

• Having unintuitive, non-standard interaction, icons

• Having unnecessary complexity, overwhelming UIs

• Not making self-explanatory UIs (RTFM!)

• Designing by copy (or committee)


Don’t play UI Tetris


Why do we do this?

• It’s easier to develop

• We aren’t aware that there are better

solutions

• We don’t notice the usability problems

As programmers, we don’t create bad

designs intentionally…we just don’t know

better


11/11/2014

7

What can we do about it?

Copyright 2014 UX Design Edge. All rights reserved.

The most useful tools here

• Scenario-based design

• Effective human communication

• Intuitive task flows

• Improving our design culture


Scenario-based design

Scenarios help you make design

decisions from the target user’s

point of view


11/11/2014

8

A scenario

A specific target user trying to

achieve a specific goal or task

in a specific environment Scenario = user + goal/task + environment


Don’t be random!

Random people doing random

things for random reasons in

random contexts This leads to random design decisions!


Feature-based design

We need a file and settings

transfer wizard


Task-based design

Transfer files and settings from

old PC to new PC


User story-based design

As a user, I need to transfer

files and settings from my old

PC to my new PC


Scenario-based design?

Joe just bought a new PC. He

discovered the FAST wizard, which

enables him to copy files and settings

from his old PC to his new one. Joe is

thrilled!


11/11/2014

9

Scenario-based design, Part 1

Joe just bought a new PC. While he was

thrilled with his old PC when he first

bought it, its performance has degraded

over time. He isn’t entirely sure why—

perhaps it just has too much junk

installed, or perhaps it has viruses and

malware. Regardless, Joe has decided to

upgrade.


Scenario-based design, Part 2

Joe would like to copy the files and

settings from his old PC that he still uses

and leave all the other stuff behind. He

knows the programs and documents that

he uses frequently from memory, he can

recognize files he uses occasionally, but

isn’t too sure about the rest. He doesn’t

know the specific file names and locations.


What does this scenario tell you?

• Joe doesn’t want to transfer

everything—just what he still uses and

cares about

• He doesn’t want files or settings—he

wants both

• He doesn’t know specifically what to

transfer

• His PC might have malware!


Context is essential to good scenarios!

• The old PC’s files and settings

aren’t all wanted!

• The old PC might be infected!


New requirements

• Tool must assist users in

selecting files and settings to

transfer

• Tool must scan everything

transferred for security and

performance

• Tool must not infect new PC! Copyright 2014 UX Design Edge

Without scenarios, we are

doomed to thinking about

features and technology, and

solving problems mechanically!


11/11/2014

10

Some insights

• User-centered design isn’t happy

talk—this is real!

• It requires us to understand

users and their goals

• Offering a pile of features based

on arbitrary requirements isn’t a

good substitute


Scenarios vs. use cases and user stories

• User stories capture a user’s goal or task as part of

his or her role in using a product, using this

format:

• As a <user role>, I want to <do something

supported by the program> so that I <can

achieve something of value>

• Use cases

• A detailed analysis of a solution-specific

scenario

• Both better for development more than design


Good scenarios are:

• Raw (rather than analyzed, like user stories)

• Complete (rather than partial, like user stories)

• User centered (rather than solution centered, like

use cases)

• Solution independent (rather than solution

specific, like use cases)


Wait a minute—you’ve gone

and changed the product!


Exactly!


11/11/2014

11

A UI isn’t a thin veneer


“Design is not

just what it looks

like and feels

like. Design is

how it works.”

Steve Jobs


The user experience needs to drive

It’s UX features, technology

Not features, technology UX


“I need a

tool to securely

transfer the

settings for the

programs I use

and the files I

care about.”

“I need a

wizard to infect

my brand new

PC with viruses,

malware, and

bloatware.”

Scenarios summary

• Help us see the design problem

from the user’s point of view

• Focused on user goals—which

isn’t to do the task mechanically

• Challenge the design to make it

better

• (It’s not just happy talk!) Copyright 2014 UX Design Edge

11/11/2014

12

Short break (15 minutes)



My expectations

• Their initial UI design won’t be

very good

• Their explanation to us will be

excellent

• What is surprising: that the two

are so different!


Why does this happen?

• When we communicate in person, we’re

totally focused on the user’s goals:

What does the user care about now?

• When we communicate through UI, we

are focused on the technology and

details: What does the program need

now?


Effective human communication

• A UI is ultimately about

communicating tasks to users

• Intuitive, user-centered UIs

communicate well

• A good UI feels like a natural,

friendly conversation

• We should have the same approach

and standards! Copyright 2014 UX Design Edge

11/11/2014

13

Imagine a conversation between friends

• Suppose you are looking over a user’s shoulder

and he or she asks, “What do I do here?” Think

about the explanation you would give—the steps,

their order, the language you’d use, and the way

you explain things. Also think about what you

wouldn’t say

• This is a high-level guide to design and evaluate

task flows

• Look for discrepancies—they reveal problems


Bottom line

• We think UX design is difficult

because it is a subjective,

personal art

• Communication-based design

makes it an objective, principled

form of human communication!


Inductive UI

• An inductive UI is designed to be

self-explanatory to lead users

through the task steps

• Goal: To eliminate thought,

experimentation, documentation,

training at the task level


A clear sign your UI isn’t intuitive


An intuitive UI shouldn’t need a manual or training

11/11/2014

14

A “deductive” UI example An “inductive” UI example

Elements of inductivity

• A clear main instruction that

explains the purpose of a

page

• Page content that is related

to the main instruction


To be clear

• The main instruction is a

design tool

• We don’t have to have the

instruction on the page

unless we need it


The goals of inductivity

• To eliminate thought, experimentation,

documentation and training

• Not to have a lot of text!

• To answer the first question everyone

has: what am I supposed to do here?

• To give pages integrity

• And avoid playing UI Tetris


What are you supposed to do here?

http://www.uxdesignedge.com/2010/03/dont-design-like-a-programmer/user-options/

11/11/2014

15

Can you see the data structures?


This is designing like a programmer!

What are you supposed to do here?

What are you supposed to do here? What are you supposed to do here?


“If I had an hour to solve a problem and my life depended on it, I would use the first 55 minutes determining the proper question to ask, for once I knew the proper question, I could solve the problem in less than five minutes.”

Albert Einstein

My new book!

http://www.uxdesignedge.com/2011/11/don%e2%80%99t-design-like-a-programmer-part-3/sitenabber1/

11/11/2014

16

Good UX to Great UX


11/11/2014

17

Bottom line for business

• Great design sells!

• Bad design costs!


Mobile apps are setting the UX bar


• Radical claim: Mobile apps are setting the UX quality bar and raising customer expectations

If I can get a $2 mobile app with a great UX, why doesn’t my $20K business app have a great UX?

RTFM doesn’t work anymore


Users actually expect to figure out your UI

Some shocking facts

Many software development teams just

don’t care!

They are completely focused on

shipping features—on time

This “artsy” fussing over user details is

just an annoyance


This is a team culture

problem!


Every artifact an

organization

creates is an

embodiment of its

culture

11/11/2014

18

If you want a better user experience…

You need to make sure your team

culture will support it!

Why? Because you ship your culture!

Homework: Does your team’s design

culture match its aspirations?


Don’t design like a programmer

• Don’t design for yourself

• Don’t let features and technology drive the

user experience

• It’s not enough to enable a task mechanically

• Don’t expose the raw internal data structures

• Don’t expose everything all at once


Some solutions

• Scenario-based design is a great way to view

a task from the user’s point of view

• Intuitive, user centered designs communicate

well on a human level

• The inductive UI helps us design better, more

intuitive task flows

• You ship your culture! If you want to improve,

your team needs to value having a great UX


Everett’s Law of UI Design:

If a UI merely exposes the raw

technology to enable a task, it’s

probably not usable!


11/11/2014

19

Great products solve users’ goals

in a way that reflects how the

product is actually going to be

used


If you remember only one thing:

Want to learn more?

Check my website uxdesignedge.com

Contact me at [email protected]

Let’s connect on LinkedIn and Twitter

(@uxdesignedge)

Subscribe to my blog Read the Don’t Design Like a Programmer

series


Have UX Design Essentials Workshop

at your company! Train your entire team, learn by doing with

customized to use your product in the

exercises

Canadian customers include ANSYS and

InnovMetric


Want to learn more?

“I hear and I forget.

I see and I remember.

I do a UX Design

Essentials Workshop

and I totally get it!”

Confucius

Take UX Design Essentials! Will be holding a public class in Montreal

June 1 – 3, 2015

Check uxdesignessentials.com if you are interested!

Canadian customers include CAE, CGI, BMC,

HealthlinkBC, Spafax, Osram Sylvania, Quest

Software


Want to learn more?

mailto:[email protected]

11/11/2014

20

Questions? Swag Time!!

Thank you!

Everett McKay: Dont design like a programmer

Technology

Transcript of Everett McKay: Dont design like a programmer