D alpert ux102

Post on 02-Dec-2014

353 views 3 download

description

User Experience 102

Transcript of D alpert ux102

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s D4S102 - 7 ways to make your app

Learnable, Usable, & Enjoyable

David Alpert - @davidalpert

Track 1: Agile Methods Tuesday, October 18th 2011 11:15am -12:30pm

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

The plan

How do we recognize a good UX?

7 ways to make a better UX

Case studies

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

A quick word about design

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Business Goals Customer Goals

Good design integrates

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s Business Goals

Good design integrates

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Customer Goals

Good design also integrates

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

How do we prioritize these goals?

Business

Users

Tech

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

XDD suggests the opposite

Business

Users

Tech

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Increase revenue

Decrease expense

Increase market share (new customers)

Deepen current business (from existing customers)

Increase value to the shareholders

Executives have 5 Priorities…

http://www.uie.com/articles/recession_strategy_webapps/

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Increase revenue

Decrease expense

Increase market share (new customers)

Deepen current business (from existing customers)

Increase value to the shareholders

… they all boil down to

Make more money!

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

XDD aligns with Executive priorities

Business

Users

Tech

Strategy

Design

Execution

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Strategy

Design

Execution

That links back to...

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Good design aligns with a vision

Vision

Release

Feature

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Iterative

Credit: Jeff Patton via Steve Rogalsky

Incremental

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

How do we recognize a good UX?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Jesse James Garrett’s Elements of UX

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Peter Moreville’s UX honeycomb

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Peter Moreville’s UX honeycomb

Too complicated!

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s Learnable Usable

Enjoyable

A Customer-Centric UX Philosophy

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

What makes software Learnable?

What makes software Learnable?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

What makes software Usable?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

What makes software Usable?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

What makes software Enjoyable?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in?

Usable – Will I stay in?

Learnable – Can I get (back) in?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in?

Usable – Will I stay in?

Learnable – Can I get (back) in? 1. Where am I?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

wayfinding

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Navigation as “streetsigns”

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Guide Copy “guide copy”

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

more “guide copy” in action

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in?

Usable – Will I stay in?

Learnable – Can I get (back) in? 1. Where am I? 2. What can I do next?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

calls to action

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Can you spot 7 calls to action?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

What does “search” do?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in?

Usable – Will I stay in?

Learnable – Can I get (back) in? 1. Where am I? 2. What can I do next? 3. What should I do next?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

http://www.lukew.com/resources/articles/web_forms.html Web Application Form Design

January 22, 2005 by Luke Wroblewski

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

2009

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

2010

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

2011

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

2011

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in?

Usable – Will I stay in? 4. Stay out of my way

Learnable – Can I get (back) in? 1. Where am I? 2. What can I do next? 3. What should I do next?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Demo

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Sample A Sample A Sample A

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in?

Usable – Will I stay in? 4. Stay out of my way 5. Let me run the show

Learnable – Can I get (back) in? 1. Where am I? 2. What can I do next? 3. What should I do next?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Real-time status

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in? 6. Engage me

Usable – Will I stay in? 4. Stay out of my way 5. Let me run the show

Learnable – Can I get (back) in? 1. Where am I? 2. What can I do next? 3. What should I do next?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

“The egg, therefore, becomes more than an ingredient, and more than

just an extra pleasurable step. It becomes a prop, enabling the customer to play a social role.”

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in? 6. Engage me 7. Delight me

Usable – Will I stay in? 4. Stay out of my way 5. Let me run the show

Learnable – Can I get (back) in? 1. Where am I? 2. What can I do next? 3. What should I do next?

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in? 6. Engage me 7. Delight me

Usable – Will I stay in? 4. Stay out of my way 5. Let me run the show

Learnable – Can I get (back) in? 1. Where am I? 2. What can I do next? 3. What should I do next?

David Alpert Web:

Email: Twitter:

http://blog.spinthemoose.com david@spinthemoose.com @davidalpert

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s Case Study #1:

FogBugz redesign

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s Case Study #2:

wesabe vs mint.com

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

References & Resources (in no particular order)

• 90 percent of everything http://www.90percentofeverything.com/

• Agile Product Design [ Jeff Patton ] http://www.agileproductdesign.com/blog/index.html

• User Interface Engineering http://www.uie.com/brainsparks/

• Luke Wroblewski http://www.lukew.com/ff/

• An Event Apart http://aneventapart.com/

• Edward Tufte http://www.edwardtufte.com/tufte/books_vdqi

• Jakob Nielsen http://www.useit.com/

• Boxes and Arrows http://www.boxesandarrows.com/

David Alpert @davidalpert http://blog.spinthemoose.com

#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

Enjoyable – Will I bring others in? 6. Engage me 7. Delight me

Usable – Will I stay in? 4. Stay out of my way 5. Let me run the show

Learnable – Can I get (back) in? 1. Where am I? 2. What can I do next? 3. What should I do next?

David Alpert Web:

Email: Twitter:

http://blog.spinthemoose.com david@spinthemoose.com @davidalpert