Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX process

Presportal
February 06, 2018

UX process

www.presportal.ru is the biggest Russian knowledge bank about presentations. We publish best presentations.

Presportal

February 06, 2018
Tweet

More Decks by Presportal

Other Decks in Design

Transcript

  1. An Introduction to User Experience Design & User Testing AJ

    Kandy • Marks & Pixels marksandpixels.com
  2. On today’s agenda.... What is User Experience Design? Why should

    we care? Where can we apply UX processes?
  3. On today’s agenda.... What is User Experience Design? Why should

    we care? Where can we apply UX processes? How can we measure its effectiveness?
  4. On today’s agenda.... What is User Experience Design? Why should

    we care? Where can we apply UX processes? How can we measure its effectiveness? Who needs to be involved?
  5. On today’s agenda.... What is User Experience Design? Why should

    we care? Where can we apply UX processes? How can we measure its effectiveness? Who needs to be involved?
  6. What is user experience design? Usually, some or all of

    the following Information design Information architecture
  7. What is user experience design? Usually, some or all of

    the following Information design Information architecture Interaction design
  8. What is user experience design? Usually, some or all of

    the following Information design Information architecture Interaction design Visual Design
  9. What is user experience design? Usually, some or all of

    the following Information design Information architecture Interaction design Visual Design Human Factors / Cognition
  10. What is user experience design? Usually, some or all of

    the following Information design Information architecture Interaction design Visual Design Human Factors / Cognition Usability / Accessibility
  11. adapted from “The Elements of User Experience,” Jesse James Garrett,

    2000 Web as Task-Oriented Software Interface Graphic Treatment of interface elements (the “look” in “look-and-feel”) Design of UI elements to facilitate user interaction with functionality Information presentation to facilitate understanding Feature set: detailed description of functionality to meet user needs Externally derived goals identified through user research, ethnography, psychographics, etc. Business, creative or other internally derived goals for the site
  12. adapted from “The Elements of User Experience,” Jesse James Garrett,

    2000 Web as Information- Oriented Content Destination Visual treatment of text, graphic page elements and navigational components Design of UI elements to facilitate user’s movement through the IA Information presentation to facilitate understanding Content elements required in the site to meet user needs Externally derived goals identified through user research, ethnography, psychographics, etc. Business, creative or other internally derived goals for the site Web as Task-Oriented Software Interface Graphic Treatment of interface elements (the “look” in “look-and-feel”) Design of UI elements to facilitate user interaction with functionality Information presentation to facilitate understanding Feature set: detailed description of functionality to meet user needs Externally derived goals identified through user research, ethnography, psychographics, etc. Business, creative or other internally derived goals for the site
  13. The development cycle Needs Specs Information Architecture Interaction Design Visual

    Design Coding, Testing & QA 1 2 3 4 5 6 Market & user research User Experience Team development & QA teams
  14. There’s something cool on the Web! We’ve gotta have that!

    You can’t start from the surface Start your photocopier Paste and then
  15. There’s something cool on the Web! We’ve gotta have that!

    You can’t start from the surface Start your photocopier Paste and then MAGIC occurs here
  16. The development cycle Needs Specs Information Architecture Interaction Design Visual

    Design Coding, Testing & QA 1 2 3 4 5 6 Market & user research User Experience Team development & QA teams
  17. What, and who, is your product for? Business or user

    needs Research, abstract, big-picture goals
  18. What, and who, is your product for? Business or user

    needs “A thousand songs in your pocket.” Research, abstract, big-picture goals
  19. What, and who, is your product for? Business or user

    needs “A thousand songs in your pocket.” “Provide voting info to US seniors” Research, abstract, big-picture goals
  20. What, and who, is your product for? Business or user

    needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks” Research, abstract, big-picture goals
  21. What, and who, is your product for? Business or user

    needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks” External: “Play a fun online game” Research, abstract, big-picture goals
  22. What, and who, is your product for? Business or user

    needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks” External: “Play a fun online game” Research, abstract, big-picture goals No decisions are being made about form or design yet
  23. Business or user needs How do you address those needs?

    Specs ...An MP3 player & software Decisions about form
  24. Business or user needs How do you address those needs?

    Specs ...An MP3 player & software ...A find-your-voting-office tool Decisions about form
  25. Business or user needs How do you address those needs?

    Specs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles Decisions about form
  26. Business or user needs How do you address those needs?

    Specs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles ...A stock market contest Decisions about form
  27. Business or user needs How do you address those needs?

    Specs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles ...A stock market contest Decisions about form Still no design decisions here
  28. Structure & taxonomy SURVIVOR U - SITEMAP 1.2 Survivor U

    landing page Feature articles home Columnists Expert Picks Newsletter Home Register / Forgot Login Financial News news articles news articles news articles news articles news articles Feature articles news articles news articles Individual Experts news articles news articles individual column articles news articles news articles Blogs Individual Expert Articles news articles news articles Individual Columns news articles news articles Individual Newsletters Learn Trading news articles news articles Individual Lessons Survivor U Video Tutorials Home news articles news articles Individual Tutorials with Tran- scripts Survivor U Video Channels Home news articles news articles Individual video posts FAQs Home news articles news articles Individual Q + As Glossary Home news articles news articles Individual Glossary Terms news articles news articles Alphabet Lettergroup pages (skip letters with no content) news articles news articles FAQ Topic Groups news articles news articles Beginner, Intermediate and Advanced sections Wall Street Survivor nav scheme (links to appropriate WSS pages) - Dashboard, Trade, Research, News, Survivor U, Community, Video, Store, Support Login / Registration on Survivor U is for this section only (for now), no integration with the main ASP.NET single-sign-on login Aggregate feed with all new posted official content comments feed per post comments feed per post comments feed per post comments feed per post news articles news articles What’s This? info items Ideally, on-page Ajax popups with explanatory notes for things like RSS feeds, etc. comments feed per post news articles news articles Newsroom, INO TV and ClipSyndicate channel pages comments feed per post Business or user needs Specs Information Architecture Function and content organization
  29. How people will actually use your site / software Business

    or user needs Specs Information Architecture
  30. Information Architecture How people will actually use your site /

    software Thinking about user flows High-level process flow Interaction Design
  31. Information Architecture How people will actually use your site /

    software Thinking about user flows Detailed process flowchart Interaction Design
  32. Approaching the surface, Captain This isn’t just about decoration, slickness,

    or branding Look & Feel Information Architecture Interaction Design Visual Design
  33. Approaching the surface, Captain This isn’t just about decoration, slickness,

    or branding How it looks is how it works. Look & Feel Information Architecture Interaction Design Visual Design
  34. Typographical grids & hierarchy Header and nav { image {

    first item { looks like date and time
  35. Typographical grids & hierarchy Header and nav { image {

    first item { looks like date and time looks like content summaries
  36. Typographical grids & hierarchy Header and nav { image {

    first item { looks like date and time looks like content summaries looks like archive or search?
  37. Typographical grids & hierarchy Header and nav { image {

    first item { looks like date and time looks like content summaries looks like archive or search? looks like more info?
  38. Typographical grids & hierarchy Site layout conforms to our expectations

    based on our experiences Header and nav { image { first item { looks like date and time looks like content summaries looks like archive or search? looks like more info?
  39. How it looks is how well it works. Affective design

    •Aesthetic pleasure •Practical needs •Emotional benefits
  40. Visual Design Building actual working products Double-checks your assumptions. If

    done well, helps nail low-hanging fruit to improve usability Coding, Testing & QA A note on user testing
  41. Visual Design Building actual working products Double-checks your assumptions. If

    done well, helps nail low-hanging fruit to improve usability Can be done for “10 cents a day” Coding, Testing & QA A note on user testing
  42. Visual Design Building actual working products “Guerrilla” usability testing 3-4

    users. once a month, is all it takes Coding, Testing & QA A note on user testing
  43. Visual Design Building actual working products “Guerrilla” usability testing 3-4

    users. once a month, is all it takes Test on paper prototypes, use simple apps like Silverback Coding, Testing & QA A note on user testing
  44. Fourscore and seven years ago.... Win Big! Options Are Fun!

    Learn Options Today Play our Options Game, Make Friends & Win Cash! Become an Options Master Absolutely FREE! You’ve got nothing to lose. Sign up today!
  45. Needs Specs Information Architecture Interaction Design Visual Design Coding, Testing

    & QA 1 2 3 4 5 6 Rinse & Repeat 7 The circle of life(cycle), Simba
  46. Needs Specs Information Architecture Interaction Design Visual Design Coding, Testing

    & QA 1 2 3 4 5 6 Rinse & Repeat 7 The circle of life(cycle), Simba
  47. Needs Specs Information Architecture Interaction Design Visual Design Coding, Testing

    & QA 1 2 3 4 5 6 Rinse & Repeat 7 In reality, feedback is constant
  48. project management technology implementation The Nine Pillars of Successful Web

    Teams user research concrete design site strategy abstract design d i trateg bstra design content strategy tactical d d strategic content production technology strategy http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/ Jesse James Garrett <[email protected]> 9 July 2003 adaptive path The most successful Web teams build their team structures and their processes on these nine essential competencies: Project Management: The hub that binds all the tactical competencies together as well as the engine that drives the project forward to completion, project management requires a highly specialized set of skills all its own. Neglecting this area often results in missed deadlines and cost overruns. Concrete Design: Before the abstract design can become a fully realized user experience, you must determine the specific details of interfaces, navigation, information design, and visual design. This realm of concrete design is essential to creating the final product. Content Production: Knowing what content you need isn't enough. You also need to know how you'll produce it. Gathering raw information, writing and editing, and defining editorial workflows and approvals are all part of content production. Technology Implementation: Building technical systems involves a lot of hard work and specialized knowledge: languages and protocols, coding and debugging, testing and refactoring. The more complex your site, the more important a competency in technology implementation becomes. Abstract Design: Information architecture and interaction design translate strategic objectives into a conceptual framework for the final user experience. These emerging disciplines addressing abstract design are increasingly recognized for their value in the Web development process. Content Strategy: Content is often the reason users come to your site. But what content can you offer to meet your users' expectations? How much content is appropriate, and what form should it take? What style or tone should it have? Before you can produce that content, you need to answer fundamental content strategy questions such as these. Technology Strategy: Web sites are technologically complex, and getting more intricate all the time. Identifying the technology strategy for the site – platforms, standards, technologies, and how they can all interoperate – is essential to avoiding costly mistakes. Site Strategy: Defining your own goals for the site can be surprisingly tricky. Arriving at a common understanding of the site's purpose for your organization, how you'll prioritize the site's various goals, and the means by which you'll measure the site's success are all matters of site strategy. User Research: User-centered design means understanding what your users need, how they think, and how they behave – and incorporating that understanding into every aspect of your process. User research provides the raw observations that fuel this insight into the people your site must serve. Where do you sit on this map? adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003
  49. project management technology implementation The Nine Pillars of Successful Web

    Teams user research concrete design site strategy abstract design d i trateg bstra design content strategy tactical d d strategic content production technology strategy http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/ Jesse James Garrett <[email protected]> 9 July 2003 adaptive path The most successful Web teams build their team structures and their processes on these nine essential competencies: Project Management: The hub that binds all the tactical competencies together as well as the engine that drives the project forward to completion, project management requires a highly specialized set of skills all its own. Neglecting this area often results in missed deadlines and cost overruns. Concrete Design: Before the abstract design can become a fully realized user experience, you must determine the specific details of interfaces, navigation, information design, and visual design. This realm of concrete design is essential to creating the final product. Content Production: Knowing what content you need isn't enough. You also need to know how you'll produce it. Gathering raw information, writing and editing, and defining editorial workflows and approvals are all part of content production. Technology Implementation: Building technical systems involves a lot of hard work and specialized knowledge: languages and protocols, coding and debugging, testing and refactoring. The more complex your site, the more important a competency in technology implementation becomes. Abstract Design: Information architecture and interaction design translate strategic objectives into a conceptual framework for the final user experience. These emerging disciplines addressing abstract design are increasingly recognized for their value in the Web development process. Content Strategy: Content is often the reason users come to your site. But what content can you offer to meet your users' expectations? How much content is appropriate, and what form should it take? What style or tone should it have? Before you can produce that content, you need to answer fundamental content strategy questions such as these. Technology Strategy: Web sites are technologically complex, and getting more intricate all the time. Identifying the technology strategy for the site – platforms, standards, technologies, and how they can all interoperate – is essential to avoiding costly mistakes. Site Strategy: Defining your own goals for the site can be surprisingly tricky. Arriving at a common understanding of the site's purpose for your organization, how you'll prioritize the site's various goals, and the means by which you'll measure the site's success are all matters of site strategy. User Research: User-centered design means understanding what your users need, how they think, and how they behave – and incorporating that understanding into every aspect of your process. User research provides the raw observations that fuel this insight into the people your site must serve. Where do you sit on this map? Probably in more than one neat, tidy area adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003
  50. UX Design Engineering Product Management What’s usable, useful & desirable

    What’s needed & therefore valuable What’s possible, and what’s not
  51. UX Design Engineering Product Management adapted from ‘Sharing Ownership of

    UX,” Pabini Gabriel-Petit, 2007 A constant cycle of design and testing
  52. So what does all this get us? Clearer direction from

    the start - saves time Design process driven by knowledge
  53. So what does all this get us? Clearer direction from

    the start - saves time Design process driven by knowledge Documentation of planning & design decisions
  54. So what does all this get us? Clearer direction from

    the start - saves time Design process driven by knowledge Documentation of planning & design decisions Improved functioning between teams
  55. So what does all this get us? Clearer direction from

    the start - saves time Design process driven by knowledge Documentation of planning & design decisions Improved functioning between teams Better products, and happier users