Software Design Class: Session 8- The Inexact Science of Interface Design

8/9/2019 Software Design Class: Session 8- The Inexact Science of Interface Design

1/39

2015 COWAN+

SOFTWARE DESIGN: SESSION 8

CONSULTING THE ATLAS-THE INEXACT SCIENCE OF

INTERFACE DESIGNAlex Cowan


2/39

2015 COWAN+

WHERE YOU SHOULD BE NOW

SCALE?

PIVOT?

PRODUCT &

PROMOTION

USER STORIES

& PROTOTYPES

CUSTOMER

DISCOVERY &

EXPERIMENTS

VALUE

PROPOSITIONS &

ASSUMPTIONS

SHOW

ME

?

WHAT

IF?

WHO?PERSONAS

WHAT?

PROBLEM

SCENARIOS &

ALTERNATIVES

Personas,

includingThink-See-Feel-

Do Problem Scenarios

Alternatives

Value Propositions

Before & After

Storyboards

Interview Guide

2 (or more) Interviews

Summary Value

Hypothesis

MVP Ideas

Assumptions for Value

Hypothesis

Experiment(s) for

hypothesis testing Epic Stories

Child Stories

Supporting

Storyboards


3/39

2015 COWAN+

WHAT WELL FOCUS ON TODAY

USER STORIES

& PROTOTYPES


4/39

2015 COWAN+

YOUR USABILITY HYPOTHESIS

USABILITY HYPOTHESIS

QUESTIONS

Is a strong narrative (user story) guiding your work?

Do the UIs affordance deliver against those narratives?

TOOLS

User Stories

Comparables

Prototypes/Wireframes

Test Plans


5/39

2015 COWAN+

WHAT WELL WORK ON TODAYFinding the Right

PROBLEMFinding the Right

SOLUTION

time

alternatives

divergence convergence divergence convergence

source: adapted from The Design of Everyday Things

Personas

Problems

Alternatives

Field

Discovery

Value Hypothesis &

Assumptions

Product

Hypothesis

Experiments on Motivation

User Stories

Comparables

Prototypes

Usability Tests

Software

(input to)


6/39

2015 COWAN+

WHAT THE DESIGN PROCESS IS NOTABOUT

Pizazz

Using the latest

technology

Doing what everyone elseis doing now

Lots of colors and shapes

Flashy demos

Doing what the user says

Always having the answer

Art


7/39

2015 COWAN+

WHAT THE DESIGN PROCESS IS ABOUT

1. Focus

2. Consistency

3. Experimentation


8/39

2015 COWAN+

ALEX COWAN

alexandercowan.com

@cowanSF

ACHIEVING FOCUS- EASIER SAID THAN DONE

Just keep it simple.

Simplicity!FocusConfidenceUnderstanding

PERSONA

HYPOTHESIS

PROBLEM

HYPOTHESIS

VALUE

HYPOTHESIS

Validated Learning


9/39

2015 COWAN+

ACHIEVING CONSISTENCY- USER INTERFACE

User InterfaceIf a magnifying glass means search, it cant

also mean zoom.

Silver bullet: Leverage existing patterns &best practices.

(But do not violate others copyrights).

source: UX Matters M. Zuschlag, Banksy (and Pablo Pio)


10/39

2015 COWAN+

ACHIEVING CONSISTENCY- BRANDING & VISUAL

Dont overdo it

Stay simpleStay consistent

Style Guide Reference:bit.ly/3tostyleguide


11/39

2015 COWAN+

DONALD NORMANS 7 STEPS

Signifier: The dial suggest anup/down affordance

JUST ANOTHER

YUCKY TUB?

Affordance: The tub dial in fact

offers an up & down movement

Constraint: The dial only goes up anddown (not side to side, etc.)

Feedback: When water is running,you can tell whether the drain isstopping the water.

Mapping: The dial controls theopening of the drain- a wellunderstood conceptual model.



12/39

2015 COWAN+


Goal

Plan

Specify

Perform

Compare

Interpret

Perceive

World



13/39

2015 COWAN+


What do I want to accomplish?

World

What alternatives?

What can I do?

How do I do it?

Is this okay?

What does it mean?

What happened?feedforward fe

edback



14/39

2015 COWAN+


Goal

Plan

Specify

Perform

Compare

Interpret

Perceive

World

signifiershelp initiate theright action, mapping toappropriate affordances;

prompt, actionable

feedbackis critical here

a clear mapping& wellunderstood modelhelp

constraintshelp

avoid error



15/39

2015 COWAN+


Goal

Plan

Specify

Perform

Compare

Interpret

Perceive

World

Reflective

Behavioral

Visceral



16/39

2015 COWAN+

VISCERAL REACTIONS

source: Hans Hillewaert/, via Wikimedia Commons


17/39

2015 COWAN+

VISCERAL REACTIONS

source: ManuelFD, via Wikimedia Commons


18/39

2015 COWAN+

Plan

Specify

Perform


Goal

Compare

Interpret

Perceive

World

Reflective

Behavioral

Visceral



19/39

2015 COWAN+

BEHAVIORAL PATTERNS

source: ManuelFD, via Wikimedia Commons

You put your right foot in

You take your right foot out

You put your right foot in

And you shake it all about

How did you do all that?

Did you have to think about it?


20/39

2015 COWAN+


Goal

Plan

Specify

Perform

Compare

Interpret

Perceive

World

Reflective

Behavioral

Visceral



21/39

2015 COWAN+

DONALD NORMANS 7 STEPS: EXAMPLE


22/39

2015 COWAN+

DONALD NORMANS 7 STEPS: ANOTHER EXAMPLE


23/39

2015 COWAN+

STEP 1: ID WHAT YOU NEED & FIND COMPS

Dont reinvent the wheel.Startups have enough risk.

Ask yourself what the users expecting-

what models relevant?

Identify the interface elements youneed, then find comps and patterns.

Pro Tip: If youre serious about it, find

>1 set of patterns.ui-patterns.compatternry.com/patterns

web-patterns.netpatterntap.commobile-patterns.comsmileycat.com/design_elements


24/39

2015 COWAN+

EXAMPLE: HVAC IN A HURRY

EPIC

As Ted the HVAC

technician, I want to

identify a part that needs

replacing so I can decide

my next steps.


25/39

2015 COWAN+

IDEAS?

1. Online Shopping?

2. Used Car Purchase?

4. General Record Search (CRM, Email, )?

3. Photo Search?


26/39

2015 COWAN+

PATTERN IDEA: ONLINE SHOPPING

source: ui-patterns.com

source: jet.com source: walmart.com source: target.com

source: bestbuy.com source: ui-patterns.com


27/39

2015 COWAN+

PATTERN IDEA: ONLINE SHOPPING

source: amazon.com


28/39

2015 COWAN+

PATTERN IDEA: USED CAR PURCHASE

source: ui-patterns.com

source: autotrader.com source: carfax.com source: cars.com

source: craigslist.org source: ui-patterns.com


29/39

2015 COWAN+

PATTERN IDEA: USED CAR PURCHASE

source: truecar.com


30/39

2015 COWAN+

PATTERN IDEA: PHOTO SEARCH

flickr.com instagram.com

google.com


31/39

2015 COWAN+

STEP 2: PROTOTYPING

NEEDED: What are the key functional elements

you need?

COMPS: You dont necessarily organize your

prototypes by areas youve investigated, but youshould draft >1 parallel concepts that are distinct

from each other.

REFERENCE: bit.ly/protonow


32/39

2015 COWAN+

A) I know the part and I want toorder it so I can figure out nextsteps on the repair.

B) I dont know the part and I wantto try to identify it online so I canmove the job forward.

C) I dont know the part and I cantdetermine it and I want help so I canmove the job forward.

CONCEPT 1


33/39

2015 COWAN+

A) I know the part and I want toorder it so I can figure out nextsteps on the repair.

B) I dont know the part and Iwant to try to identify it onlineso I can move the job forward.

CONCEPT 1


34/39

2015 COWAN+

D) I want to see thecost of the part and

time to receive it so Idecide on next stepsand get agreementfrom the customer.

CONCEPT 1


35/39

2015 COWAN+

A) I know the part and I want

to order it so I can figure outnext steps on the repair.

B) I dont know the part and Iwant to try to identify it online soI can move the job forward.

C) I dont know the part and Icant determine it and I want

help so I can move the jobforward.

CONCEPT 2


36/39

2015 COWAN+

D) I want to see thecost of the part and

time to receive it so Idecide on next stepsand get agreementfrom the customer.

CONCEPT 2


37/39

2015 COWAN+

ABOUT PROTOTYPING

Stay focused to the persona, problem.Sketch solutions for them via user stories.

All solutions are temporary, especially at this stage.


38/39

2015 COWAN+

EXERCISE: USING BALSAMIQ ON G.APPS

1: Visit Google Apps for Drive

-Go to Google Docs (via Gmail, etc. account)-Click on Create then see menu at bottom

2: Get the Balsamiq (trial)

3: On the Create menu, youll now see an optionalfor Balsamiq Mockups


39/39

2015 COWAN+

ASSIGNMENTS

1. Do/Individual: Evaluate Comparables for a User Story(45-90 minutes)

2. Do/Individual: Parallel Prototype (Two Versions) a User Story(45-90 minutes)

v10

Software Design Class: Session 8- The Inexact Science of Interface Design

Documents

Transcript of Software Design Class: Session 8- The Inexact Science of Interface Design