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


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#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


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

A quick word about design


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Business Goals Customer Goals

Good design integrates


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s Business Goals

Good design integrates


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Customer Goals

Good design also integrates


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

How do we prioritize these goals?

Business

Users

Tech


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

XDD suggests the opposite

Business

Users

Tech


#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/

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


#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!


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

XDD aligns with Executive priorities

Business

Users

Tech

Strategy

Design

Execution


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Strategy

Design

Execution

That links back to...


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Good design aligns with a vision

Vision

Release

Feature


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Iterative

Credit: Jeff Patton via Steve Rogalsky

Incremental


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

How do we recognize a good UX?


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Jesse James Garrett’s Elements of UX


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Peter Moreville’s UX honeycomb


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Peter Moreville’s UX honeycomb

Too complicated!


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s Learnable Usable

Enjoyable

A Customer-Centric UX Philosophy


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

What makes software Learnable?

What makes software Learnable?


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

What makes software Usable?


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

What makes software Enjoyable?


#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?


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!



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


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

wayfinding

http://shige-wallpaper-images.com/sceneries/canada1-e.html�


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

wayfinding

http://www.themobilecity.nl/2009/03/29/semantic-wayfinding-mental-maps-and-the-keyhole-problem-of-gps-navigation/�

http://www.flickr.com/photos/krooooop/4153791455/sizes/m/in/photostream/�


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Navigation as “streetsigns”


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Guide Copy “guide copy”


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

more “guide copy” in action


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!



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


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

calls to action


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Can you spot 7 calls to action?


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

What does “search” do?


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!



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


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

http://www.flickr.com/photos/balakov/3732202289/sizes/z/in/set-72157602602191858/�


#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

http://www.lukew.com/resources/articles/web_forms.html�

http://www.lukew.com/resources/articles/web_forms.html�

http://www.lukew.com/about/�


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

2009


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

2010


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

2011


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

http://peanutweeter.com/�


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!


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



#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Demo


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Sample A Sample A Sample A


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!


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



#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Real-time status


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!

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




#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#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.”


#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




#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!




David Alpert Web:

Email: Twitter:

http://blog.spinthemoose.com [email protected] @davidalpert

http://blog.spinthemoose.com/�

mailto:[email protected]�

http://twitter.com/davidalpert�


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s Case Study #1:

FogBugz redesign


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s Case Study #2:

wesabe vs mint.com


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s


#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/

http://www.90percentofeverything.com/�

http://www.agileproductdesign.com/blog/index.html�

http://www.uie.com/brainsparks/�

http://www.lukew.com/ff/�

http://aneventapart.com/�

http://www.edwardtufte.com/tufte/books_vdqi�

http://www.useit.com/�

http://www.boxesandarrows.com/�


#sdec11

D

es

ig

n

fo

r

Su

cc

es

s

Design for Success!




David Alpert Web:

Email: Twitter:

http://blog.spinthemoose.com [email protected] @davidalpert

http://blog.spinthemoose.com/�

mailto:[email protected]�

http://twitter.com/davidalpert�

D alpert ux102

Technology

Transcript of D alpert ux102