1 / 0

User Experience Design demystified

User Experience Design demystified . April 29 th 2014 Nelly Mensah | Doug Van Wie. Agenda. Introductions What is UX and Why Is It Important? UX Methodology UX in Practice Useful Resources Q&A    . introductions. Introductions.

aerona
Télécharger la présentation

User Experience Design demystified

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. User Experience Designdemystified April 29th 2014Nelly Mensah | Doug Van Wie
  2. Agenda Introductions What is UX and Why Is It Important? UX Methodology UX in Practice Useful Resources Q&A   
  3. introductions
  4. Introductions Nelly has worked as a developer, UX designer, and product manager for Deloitte Digital for the last 5 years. She has also advised several start ups and is a freelance graphic designer and illustrator. She takes stock photo selection and white space very seriously. Dougstudied Graphic Design at Auburn University. After a career as a professional swimmer, he worked for a software company as an Interaction Designer developing prototypes and conducting user testing. He has also worked as a freelance web designer for the past eight years.
  5. What is UX?
  6. What is User Experience? UX
  7. Benefits of Caring About UX Increased Adoption Customer Loyalty Brand Differentiation Productivity Gains Operational Efficiencies Reduced Development Costs Better morale and employee satisfaction
  8. What is Usability? Learnability How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency Once users have learned the design, how quickly can they perform tasks? Memorability When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction How pleasant is it to use the design? 
  9. UX Methodology
  10. Determine Your Objective Set Goals e.g. Reduce shopping cart abandonment by 15% Select Channel / Platform e.g. Android vs iOS vs Web Establish Audience e.g. Existing customers Determine Content Type e.g. Product descriptions
  11. UX Methodology Overview User Insights Personas Information Architecture Wireframing Visual Design User Experience and Style Guides User Testing
  12. USER RESEARCH
  13. User Research Description The User Research phase focuses on identifying key pain points and areas for improvement from the end-users’ perspective. The outputs of this phase of work are used as guidelines in designing the application. This phase lays the foundation for the design and sets guidelines for making design decisions. Activities Engage Users Conduct User Research Compile Requirements Identify end users Write interview script Create Global Design Field Observation User Interviews User Workshops Requirements Compilation Scoping Requirements Prioritization
  14. PERSONAS
  15. Persona Definition Description The objective of Persona Definition is to paint a clear picture of the typical target users and describe how/why they will be using the system. Personas should be able to invoke empathy by providing insights into the real behaviors, goals, pain points, skills, and environments of real users. Activities Conduct Workshops Document User Personas Validate User Personas Identify key functions and content required for user tasks Determine high-level user goals, preferences, and pain-points Understand “day in the life” user scenarios Characterize user goals, preferences, and key tasks into personas Validate interview findings with SMEs Present and validate user personas
  16. Persona Definition Example
  17. “When you design for everyone, you design for no one.” - Anonymous
  18. Information Architecture
  19. Information Architecture Description Information Architecture (IA) is the analysis and design of the content structure of the application, as well as the interrelationships between the content. Essentially, it is a means by which to logically organize information in the app and involves modeling a top-down view of how users will interact with various pages, functions, and information across the application. Activities Develop High Level Site Map Draft Page Flows Annotate Page Flows Draft high-level site map Review tasks flows from the user’s perspective Construct page/screen flows based on high-level site map Map page flows to content outline Write detailed page flow annotations to provide user narratives. Review & iterate page flows w/ Process SMEs
  20. Site Map Example
  21. Wireframing
  22. Wireframe Development Description A proposed user interface design is articulated in wireframes. Wireframe development defines the standard structure, layout, and general real-estate for content and functions. Wireframes are developed in abstraction of visual, creative, and branding elements. Activities Review Requirements Design Wireframes Validate and Update Wireframes Iterations Review required fields Define controls and screen elements Brainstorm and draw wireframe sketches Develop wireframes for unique page layout types Review and obtain agreement on standard wireframes Review and validate wireframes with process SMEs and stakeholders Update wireframes Document visual styles and guidelines Document UX Guidelines
  23. Design Principles Hierarchy Call to action Contextual UI elements Response to action Appropriate language
  24. Wireframe Development Step 1: Get your thoughts on paper
  25. Wireframe Development Step 2: Prototype and test
  26. Wireframe Example Step 3: Refine and handoff
  27. Usability Testing
  28. Usability Testing UX and Style Guides User Testing Description Usability testing is a critical step in the user experience design process and must take place several times in the project lifecycle. It helps ensure that the design is going in the right direction and addresses the users’ needs. Activities Plan Usability Testing Approach Conduct Usability Testing Review and Act On Results Determine participants Prepare test scenarios Set up testing environment Brief participants Have participants complete a set of predetermined tasks Conduct satisfaction survey Aggregate results and analyze findings Prioritize findings Update design based on findings
  29. Usability Testing Example: Low Tech UX and Style Guides User Testing
  30. Usability Testing Example: High Tech UX and Style Guides User Testing
  31. Visual design
  32. Visual Design Description Visual design is the icing on the cake. It is the design of the final look and feel of the application and involves the selection of colors, fonts and icons for the interface. It has both practical and aesthetic implications for usability. Activities Develop Themes Finalize Visual Design Approve and Hand Off Design Develop visual themes that adhere to visual style guide and branding standards Design or obtain iconography Decide on typography options Write copy Narrow down design options Finalize visual theme of the application Clean up visual design Finalize visual style guide Hand over graphic assets to developers
  33. Visual Design Examples Style Tiles
  34. User Experience and Style Guidelines UX and Style Guides User Testing Description A UX Guidelines document is expected to be a living record that will be developed over several iterations. It ensures that the interface is consistent across screens and releases. Activities Document Screen Components Document UI Behavior Document Visual Design Standards Document global components including: Header Footer Navigation Panel Content Area Document standard UI behavior, such as: Drop-downs Drag & Drop Modal boxes Create Visual Style Guide to include visual design standards: Color Palettes Typography Iconography Screen resolutions Branding
  35. Visual Design Examples Pattern Library A collection of front-end patterns or code-snippets that can be reused to form the building blocks of a website. Pattern libraries can include CSS and HTML code blocks and elements like headers, footers, form elements and list items as well as more complex elements such as responsive galleries. Salesforce BBC Twitter Bootstrap
  36. Ux in practice
  37. UX Roles Project Manager
  38. Role Comparison
  39. Size of Company Matters Startup Enterprise Multiple practitioners Can be independent department or part of development teams Varying levels of importance to product Political challenges More time and resources available Small or one-person team Multiple responsibilities Product focus essential UX shapes strategy and product development Limited time and resources Bootstrap testing
  40. Integration with Development Involve developers early Document everything Push the limits
  41. Analytics: Goals Revisited Set Goals Select Channel / Platform Establish Audience Determine Content Type Measure Outcomes
  42. 10 Dos and Don’ts of User Experience DOevangelize user-centered design and usability within the organization DOdetermine appropriate metrics to measure user engagement and successDOinvolve stakeholders in workshops and review sessions DOstay in perpetual beta DOalign change management efforts with the usability approach DON’Tforget the users DON’Tlet politics or trends dictate the direction of design DON’Tleave out frequent user testing DON’Trely on waterfall methodology DON’Tset unrealistic expectations of what the UX will accomplish
  43. Resources
  44. Wireframing & Prototyping Tools Axure
  45. Wireframing & Prototyping Tools Balsamiq
  46. Wireframing & Prototyping Tools Mockingbird
  47. Wireframing & Prototyping Tools Proto.io
  48. Wireframing & Prototyping Tools Bootstrap
  49. User Testing Tools Remote Screenshare – GoToMeeting, Skype, Google Hangout, etc.
  50. User Testing Tools Silverback
  51. User Testing Tools A/B testing – Google Analytics, Optimizely
  52. Inspiration Dribbble
  53. Inspiration Behance
  54. Inspiration Abduzeedo
  55. Blogs to follow http://www.smashingmagazine.com/ http://uxmag.com/ http://www.boxesandarrows.com http://www.useit.com/ http://www.uxbooth.com/
  56. Q&A
More Related