UX Design for the Web


Published on

A slide set about "What is UX design for the web" and how it works. This follows a step by step web project.

Published in: Design, Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

UX Design for the Web

  1. 1. What is UX design?<br />Understanding User Experience for the Web<br />Oct 2009<br />Adrian Mendoza<br />UX principal<br />Mendoza Design & Marlin Mobile<br />
  2. 2. UX or User Experience? Say what?<br /><ul><li>Is the field of creating architecture and interaction models that impact use of space, objects, and media.
  3. 3. The skill of UX design can be translated into architecture (space), industrial (objects), and graphic design (media).
  4. 4. In short, UX is understanding what people do and how we can make it better.</li></li></ul><li>How can you describe UX?<br />Clients always ask me to describe what I do. <br />(please feel free to use this analogy)<br />Client:<br />“I want to build a better mousetrap”<br />I tell them:<br />Adrian:<br />“What cheese <br />to use”<br />And if they are lucky…<br />Adrian:<br />“What type of mice will go there”<br />Adrian:<br />“What kind of mouse trap to build”<br />Adrian:<br />“What color to paint the mouse trap”<br />Getting the mice to go there, that’s up to your client!<br />
  5. 5. How is UX for the web different?<br /><ul><li>Working in the web, we call content consumers Users.
  6. 6. UX designers are part of the design process. They participate in the beginning stages of design, sometimes even throughout the life of the project.
  7. 7. UX designers can have a focus/specialty in Usability, Design, Information Architecture, or Software Development.</li></li></ul><li>Look at the Competition<br /><ul><li>We use documents called Competitive Audits in order to compare Functionality and User Experience across competitors.
  8. 8. These audits help our clients define what they want their product to do and how they want to compare against their competitors.
  9. 9. We use images and text to describe user interactions and pages.</li></li></ul><li>People are Archetypes<br /><ul><li>User Personas help us define who is using the site (market audience) and who we want to use the site (target audience).
  10. 10. We create a personality based on ages, culture, usage patterns and communities.
  11. 11. We can then do research to help support who these users are and what they will do on the site.</li></li></ul><li>User Matrix<br /><ul><li>After creating User Personas, we develop a user matrix to better understand actions each user will perform on the site.
  12. 12. This matrix allows us to see common functionality across all users.</li></ul>Create Login <br />Purchase Online <br />Save Purchases <br />View Past Purchases <br />Personalize Products <br />Send Products via email <br />✗<br />✔<br />✔<br />✔<br />✗<br />✗<br />✔<br />✗<br />✗<br />✗<br />✔<br />✔<br />
  13. 13. Sitemaps<br /><ul><li>Sitemaps create an overall map of pages and paths that will occur within the website.
  14. 14. We focus on trying to cover as much of the pages and paths that the user will interact with.
  15. 15. Using the sitemap, we will begin to help suggest or define an interaction model.</li></li></ul><li>User Scenarios<br /><ul><li>Using personas and the user matrix, we help determine a user’s specific path on the site.
  16. 16. User Scenarios help map out this detailed functionality in actual pages and process.
  17. 17. User Scenarios show more detail as compared to the sitemap.</li></ul>“Jennifer commonly shops online”<br />
  18. 18. Wireframes<br /><ul><li>Wireframes help us figure out placement, size, and location of page elements.
  19. 19. Wireframes show a basic layout that expresses a visual interpretation of the interaction model.
  20. 20. We strip out any design or formatting. Focus should be on the layout. This will help with visualizing the design.</li></li></ul><li>Now Don’t forget to test!<br /><ul><li>Now that we have a web site or prototype, we use the user personas that we created to find real users that match those archetypes.
  21. 21. Real users will tell us whether or not the functionality works or needs improvement.</li></li></ul><li>What’s next for UX?mUX!<br />
  22. 22. mUX – mobile User Experience<br /><ul><li>Just because your users use the mobile web, DOES NOT mean you can convert your site over just by changing the code.
  23. 23. The mobile web is both your point of entry and your barrier to entry for many users.
  24. 24. Understand what the intended mobile User Experience is for your User before you start.</li></ul>Use our Twitter hash tag #mUX to discuss mobile UX topics<br />
  25. 25. mUX – mobile User Experience<br /><ul><li>Keep the mobile web site, clean, simple, and direct.
  26. 26. Understanding your site’s performance and how to optimize it is key to sound mUX.</li></ul>Examples:<br /><ul><li>See www.marlinmobile.com vs. mobile.marlinmobile.com</li></ul>“Do one thing, and do it well” <br />Dom Sagolla onbuilding Mobile Web apps.<br />Use our Twitter hash tag #mUX to discuss mobile UX topics<br />
  27. 27. Who is Adrian?<br />Adrian&apos;s career is highlighted by over 10 years of design and user experience in the handheld, pharmaceutical, financial, and education sectors. His first studio, Synthesis3, worked with several Palm OS software companies in creating their brand for both a web and retail presence. In the financial and education sector, customers included Sovereign Bank, Houghton Mifflin, MIT and Harvard. Adrian has consulted in UX and Information Architect lead roles for Fidelity&apos;s E-business design group, Thomson Financial, and T.Rowe Price. Adrian earned his Bachelors from the University of Southern California and his Masters from the Harvard Graduate School of Design.<br />Currently, he is the UX principal at Mendoza Design a Brookline, MA based UX consultancy, and the mobile UX principal at Marlin Mobile, a user experience, performance, and optimization company. Additionally, he is a senior lecturer at the School of Art and Design at Suffolk University in Boston, MA.<br />Questions? Contact:<br />adrian@mendoza-design.com<br />adrian@marlinmobile.com<br />Follow Adrian on Twitter @marlinUX<br />Or read his mobile UX blog at http://www.marlinmobile.com/blog/<br />