EECS 394 Software Project Management Chris Riesbeck User - - PowerPoint PPT Presentation

Chris Riesbeck

EECS 394 Software Project Management

User Experience Design

Thursday, May 26, 2011

Wireframes, mockups and prototypes, oh my!

Not to mention proofs of concept and demos Evolutionary view:

non-working wireframe sketches evolve into non-working fleshed out mockups evolve into interactive but not real demos evolve into running proofs of concept evolve into testable working prototypes

But prototype can also mean

an interactive mockup

• r even a low fidelity paper simulation

2

Thursday, May 26, 2011

Wireframes, mockups and prototypes, oh my!

3

wireframes mockups prototypes MVPs proofs of concept demos Purpose: communication Purpose: testing

The real difference is purpose, not content or structure.

Thursday, May 26, 2011

Wireframes

Sketchy All about functionality not form Built with pencil and paper, Powerpoint, wireframing

tool, e.g.,

http://www.cssgalleries.com/the-big-list-of-

wireframe-software/

http://stackoverflow.com/questions/156937/

balsamiq-mockups-alternative-for-building-wireframes

4

Thursday, May 26, 2011

Mockups

Visual look and feel Color palette, guiding metaphors and themes Built with HTML, Powerpoint, Photoshop, ...

5

Thursday, May 26, 2011

Prototypes

Interactive enough to support user stories. Lab-testable but not a marketable Some tools, many based on wireframes

http://www.uxforthemasses.com/rapid-prototyping/ http://www.agile-ux.com/tag/wireframe/

• 6

Thursday, May 26, 2011

Minimum Viable Products

Slices of product functionality Marketable or at least beta (non-lab) testable Supports one or more complete scenarios

7

Thursday, May 26, 2011

Pitfalls

Wireframes provide a needed UI overview but also

encourage premature UI design lead to overly complex initial UIs with many controls

that are non-functional or poorly thought out

Mockups provide a consistent testable aesthetics but

also

don't distinguish must-have from nice-to-have cause substantial misguided early implementation

effort to match the aesthetics precisely

lead to substantial rework in later iterations make UI promises that development can't keep

8

Thursday, May 26, 2011

The challenge

9

A way to design and implement in slices that support valid informative user testing and a coherent but changing UI vision.

Thursday, May 26, 2011

Integrating User Experience Design into Agile

10

Thursday, May 26, 2011

User-Centered Design

User-centered design (UCD) is about identifying and

meeting real user needs

Developed over decades of UI failures UCD is a mature ethnographically driven process

http://en.wikipedia.org/wiki/User-centered_design

Some key practices:

study users at the real locations of intended use do big picture analysis (workflows, affinity

relationships, ...)

develop target persona, scenarios, use cases

11

use cases user stories

Thursday, May 26, 2011

UCD vs Agile

12

Thursday, May 26, 2011

UCD vs Agile

12

UCD: Big Design Up Front all over again!

Thursday, May 26, 2011

UCD vs Agile

12

UCD: Big Design Up Front all over again! Agile: ready, shoot, aim!

Thursday, May 26, 2011

UCD vs Agile

12

UCD: Big Design Up Front all over again! UX can't make up its mind about the design! Agile: ready, shoot, aim!

Thursday, May 26, 2011

UCD vs Agile

12

UCD: Big Design Up Front all over again! UX can't make up its mind about the design! It isn't iteration if you

• nly do it once!

Agile: ready, shoot, aim!

Thursday, May 26, 2011

13

http://www.agileproductdesign.com/blog/dont_know_what_i_want.html

Incrementing vs Iterating

Thursday, May 26, 2011

13

http://www.agileproductdesign.com/blog/dont_know_what_i_want.html

Incrementing vs Iterating

Thursday, May 26, 2011

13

http://www.agileproductdesign.com/blog/dont_know_what_i_want.html

Incrementing vs Iterating

Thursday, May 26, 2011

Staggered iterations

14

Iteration 0 Iteration 1 Iteration 2 Iteration 3

personas, wireframes, sitemap design for iteration 2 design for iteration 3, test 1 design for iteration 4, test 2 CI setup test & code test & code test & code

UX Team Developers

Gives design a small head start then interleaves design, implementation, user testing, and redesign.

AKA staggered sprints

Thursday, May 26, 2011

Iteration 0

Designers sketch out the big picture

http://www.agileproductdesign.com/blog/

the_new_backlog.html

Developers set up the CI server and construct the

ZFR

Both of these are after the Inception Deck meeting

with the client

15

Thursday, May 26, 2011

Staggered iteration references

Desiree Sy's early articulation of Agile UCD and

staggered iterations

http://www.upassoc.org/upa_publications/jus/

2007may/agile-ucd.html

Getting real about agile design

http://www.alistapart.com/articles/

gettingrealaboutagiledesign/

Iteration 0

http://peterschuh.com/?p=129

16

Thursday, May 26, 2011

Case studies

Drupal experience from Iteration 0 to Iteration 1

http://johnnyholland.org/2009/0a6/15/d7ux-

designing-in-the-open-reflecting-on-the-cadence- between-iteration-zero-and-iteration-the-first/

ComputerWeekly case study

http://www.boxesandarrows.com/view/case-study-

• f-agile

TheLadder's detailed experience report

http://johnnyholland.org/2010/10/21/beyond-

staggered-sprints-how-theladders-com-integrated-ux- into-agile/

17

Thursday, May 26, 2011