UX Explained

15,191 views

Published on

What UX is, how it works and why it matters. Train your teams to recognize and strengthen the links between customer experience indicators and your overall business performance. Learn how to work with your customers to design successful products, services and experiences.

Published in: Business, Technology

UX Explained

  1. 1. user experiencewhat it is, how it works and why it matters 11.18.09<br />
  2. 2. our topics<br />What is user experience (UX)?<br />What can UX do for MoM?<br />What processes ensure good UX?<br />What does a UX team do?<br />How does UX fit into the agile environment?<br />4<br />
  3. 3. what is user experience?<br />it’s more than usability.<br />User experience simply refers to the way a product behaves and is used in the real world. A positive user experience is one in which the goals of both the user and the organization that created the product are met. <br />Usability is one attribute of a successful user experience, but usability alone does not make an experience positive for the user. <br />Jesse James Garrett  Author of The Elements of User Experience<br />
  4. 4. what is user experience?<br />it’s the sum of a simple equation.<br /> Business goals<br />+ Customer goals<br />+ User interface<br />+ Interaction w/ back end system<br />= User Experience<br />
  5. 5. what is user experience?<br />it’s the combined result of all our efforts + processes.<br />PM+ business<br />analysis<br />visual design<br />application<br />architecture<br />user experience<br />system <br />design<br />interaction<br />design<br />Information<br />architecture<br />
  6. 6. what is user experience?<br />there are five elements of user experience.<br />concrete<br />Surface plane: on the surface you see a series of screens made up of images + text. Some are things you can click on to perform a function (e.g. save). <br />Skeleton plane: placement of buttons, tabs, images and text. The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiency – so you can find that save button when you need it. <br />Structure plane: if skeleton defines the placement of UI items, the structure defines how users got to that screen and where they could go when finished. If skeleton shows navigation category arrangement, structure defines what those categories actually are.<br />Scope plane: the number and variety of features + functions expressed in the structure plane – what’s included – is defined by the scope plane.<br />Strategy plane: scope is determined by strategy. It incorporates what both the product owners (clients) and the end-users want out of the product.<br />abstract<br />diagram courtesy of Jesse James Garrett, Elements of User Experience<br />
  7. 7. what is user experience?<br />the five planes encompass the interface (task oriented)…<br />concrete<br />Visual design : graphic treatment of interface elements (the &quot;look&quot; in &quot;look-and-feel&quot;)<br />Interface design: facilitate user interaction with functionalityinformation design: presentation of information to facilitate understanding<br />Interaction design: application flows to facilitate user tasks, defining how the user interacts with site functionality<br />Functional specifications: &quot;feature set”: detailed functionality the site or app must include in order to meet user needs<br />User needs: external; identified through user research, ethnographics, etc.site objectives: business, creative, or other internal site or app goals<br />abstract<br />diagram courtesy of Jesse James Garrett, Elements of User Experience<br />
  8. 8. what is user experience?<br />…and the system (information oriented).<br />concrete<br />completion<br />Visual design : graphic treatment of interface elements (the &quot;look&quot; in &quot;look-and-feel&quot;)<br />Visual design : visual treatment of text, graphic page elements and navigational components<br />Interface design: facilitate user interaction with functionalityinformation design: presentation of information to facilitate understanding<br />Navigation design: facilitate user’s movement through the information architecture information design: presentation of information to facilitate understanding<br />Interaction design: application flows to facilitate user tasks, defining how the user interacts with site functionality<br />Information architecture: structural design of the information space to facilitate intuitive access to content<br />Functional specifications: &quot;feature set”: detailed functionality the site or app must include in order to meet user needs<br />Content requirements: definition of content elements required in the site in order to meet user needs<br />User needs: external; identified through user research, ethnographics, etc.site objectives: business, creative, or other internal site or app goals<br />User needs: external; identified through user research, ethnographics, etc.site objectives: business, creative, or other internal site or app goals<br />abstract<br />conception<br />diagram courtesy of Jesse James Garrett, Elements of User Experience<br />
  9. 9. why is UX important for MoM?<br />because the MoM mission is essentially:<br />4 Understand the users’ needs – and our clients’ business goals – and evaluate our designs and products against both<br />4 Ensure that the products we design meet or exceed our user’s expectations in order to increase product adoption and reduce support intervention<br />4 Create high quality products that are implemented per business requirements and design specifications using best practices<br />
  10. 10. why is UX important for MoM?<br />A UX team brings multiple disciplines to bear:<br />4 User researchers<br />4 Interaction designers<br />4 Visual designers<br />4 Information architects<br />4 Front-end developers<br />4 Writers<br />4 User testing moderators<br />All work together, and with back-end teams, with extensive brainstorming, problem-solving and the same commitment as other project teams to stick to schedules and meet budgets.<br />
  11. 11. what processes ensure good UX?<br />UX strategy = design strategy = business strategy<br />What’s worth doing?<br />What are we creating?<br />What value does it provide?<br />How do we deliver it?<br />focus<br />definition<br />value<br />scope<br />
  12. 12. what processes ensure good UX?<br />focus: do we have an achievable mandate?<br />UX efforts must address these<br />UX efforts should accommodatethese<br />importance<br />Unwise use of time to address these<br />viability | feasibility<br />
  13. 13. what processes ensure good UX?<br />definition: do we have clear vision, obvious requirements + team alignment?<br />Client<br />Project Manager<br />Team Lead<br />
  14. 14. what processes ensure good UX?<br />value: how have we framed the value of the offering?<br />Who is the target audience?<br />What experiences are compelling to them?<br />How is the offering different from competitors and substitutes?<br />
  15. 15. what processes ensure good UX?<br />scope: what do we build first and what comes next?<br />Symptoms we haven’t clarified scope<br />TOO BIG<br />TOO SMALL<br />Unrealistic delivery expectations<br />Trouble creating a timely release (e.g. Vista vs. Mac OS X)<br />Battling “can’t we also have _____ ?”<br />Nervous designers + developers<br />Unclear path to the full vision<br />Unremarkable, unimpressive, watered-down releases<br />
  16. 16. what does a UX team do?<br />in every project we:<br />Analyze4<br />Work with product management at the beginning. Understand business objectives, the behavior and thinking of the users, and the competition.<br />Design4<br />Produce architecture, wireframes, design treatments until the product takes form.<br />Implement4<br />Rapid iteration: constantly refine the prototype in response to targeted inquiry into what aspects of the experience need work (through client reviews + feedback, internal analysis and user testing).<br />
  17. 17. what processes ensure good UX?<br />UX team deliverables:<br />Analysis + research<br />4 Personas<br />4 Qualitative user research and reports<br />4 Concept maps<br />4 Competitive analysis<br />4 Scorecards<br />Info. architecture (IA)<br />4 Functional specs<br />4 Use cases + task flow diagrams<br />4 UI specs + guidelines<br />4 Storyboards<br />4 IA maps<br />
  18. 18. sample concept map<br />
  19. 19. sample information architecture mapping<br />
  20. 20. sample wireframe<br />
  21. 21. what processes ensure good UX?<br />UX team deliverables:<br />Prototyping<br />4 Flat wireframes<br />4 Grey-screen prototypes<br />4 Paper prototypes<br />Visual design<br />4 Polished visual design + screen layout<br />4 Icons + graphic Components (assets)<br />4 CSS/XHTML<br />
  22. 22. what processes ensure good UX?<br />UX team deliverables:<br />Technical communications<br />4 Content<br />4 Help<br />4 User guides + reference manuals<br />4 Videos, flash demos, training materials<br />4 Localization (languages/locations)<br />
  23. 23. how does UX fit in an agile environment?<br />UX leverages agile in several ways:<br />4 User research and testing can be utilized to prioritize features in the product backlog – and to iteratively refine designs to achieve better usability<br />4 When UX is integrated in the planning phases of a project (post-win) – and early into the agile process –release schedules and budgets are not impacted or affected<br />4 Create high quality products that are implemented per the design specifications using best practices<br />
  24. 24. how does UX fit in an agile environment?<br />here’s how we do it:<br />
  25. 25. how does UX fit in an agile environment?<br />how we make agile work for UX:<br />Early-stage UX planning<br />4 High-level design<br />4 UX requirements<br />4 Detailed design + spec<br />Embed a designer on the team<br />4 No surprises<br />4 Designer iterates as development progresses<br />
  26. 26. how does UX fit in an agile environment?<br />how we make agile work for UX:<br />UX + development follow same schedule<br />4 Designers are one iteration ahead of developers<br />4 Hand off detailed designs or CSS/XHTML prototypes for developers to follow<br />4 Front-end development is part of UX team<br />Backlog contains UX design features<br />
  27. 27. key takeaway<br />UX is the combined result of all our efforts + processes.<br />PM+ business<br />analysis<br />visual design<br />application<br />architecture<br />user experience<br />system <br />design<br />interaction<br />design<br />Information<br />architecture<br />

×