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

EECS 394 Software Project Management Chris Riesbeck 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 � or even a low fidelity paper simulation 2 Thursday, May 26, 2011

Wireframes, mockups and prototypes, oh my! wireframes mockups demos Purpose: communication prototypes The real proofs of concept MVPs difference is Purpose: testing purpose, not content or structure. 3 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 A way to design and implement in slices that support valid informative user testing and a coherent but changing UI vision. 9 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 use cases � user stories 11 Thursday, May 26, 2011

UCD vs Agile 12 Thursday, May 26, 2011

UCD vs Agile UCD: Big Design Up Front all over again! 12 Thursday, May 26, 2011

UCD vs Agile UCD: Big Design Up Front all over again! Agile: ready, shoot, aim! 12 Thursday, May 26, 2011

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

UCD vs Agile UCD: Big Design Up Front all over again! Agile: ready, shoot, aim! UX can't make up its mind about the design! It isn't iteration if you only do it once! 12 Thursday, May 26, 2011

Incrementing vs Iterating http://www.agileproductdesign.com/blog/dont_know_what_i_want.html 13 Thursday, May 26, 2011

Incrementing vs Iterating http://www.agileproductdesign.com/blog/dont_know_what_i_want.html 13 Thursday, May 26, 2011

Incrementing vs Iterating http://www.agileproductdesign.com/blog/dont_know_what_i_want.html 13 Thursday, May 26, 2011

Staggered iterations AKA staggered sprints Iteration 0 Iteration 1 Iteration 2 Iteration 3 personas, design for design for UX Team design for wireframes, iteration 3, iteration 4, iteration 2 sitemap test 1 test 2 Developers CI setup test & code test & code test & code Gives design a small head start then interleaves design, implementation, user testing, and redesign. 14 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- of-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