Download as PDF, PPTX
Uploaded bySteve Fisher
Turning That UX Frown Upside Down
The document discusses the fundamentals of user experience (UX) design, emphasizing the importance of understanding user needs to improve overall web experience. It outlines a structured approach to UX design, including defining project objectives, conducting user research, and utilizing web conventions to enhance usability. The text also highlights the need for iterative testing and design revisions based on user feedback.
Turning That UX Frown Upside Down
- 1. Turning that UX frown upside-down Saturday, October 2, 2010
- 2. #uxfrown @hellofisher Saturday, October 2, 2010
- 3. Hello. I’m a UX designer Saturday, October 2, 2010
- 4. A Drupal designer? Saturday, October 2, 2010
- 5. a simple answer Saturday, October 2, 2010
- 6. a simple answer Saturday, October 2, 2010
- 7. So what is UX design? Saturday, October 2, 2010
- 8. The creation, integration and harmonization of all user-facing aspects within an organization or project, with the goal of impacting perceptions and behavior. Saturday, October 2, 2010
- 9. The creation, integration and Make it harmonization of make sense all user-facing aspects within an and work well organization or for the site project, with the users goal of impacting perceptions and behavior. Saturday, October 2, 2010
- 10.
- 11. Any project should have goals but most people seem to lose sight of who the audience is. Saturday, October 2, 2010
- 12. Even a little bit of time spent getting to know your users will improve the overall experience Saturday, October 2, 2010
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. Ok. You’ve doing user research and testing. How long do you really stick with it? Saturday, October 2, 2010
- 23. If you have a group of 10 and the first 3 people tell you the same thing is broken it’s broken. Saturday, October 2, 2010
- 24. If you have a group of 10 and the first 3 people tell you Fix it now. the same thing is broken it’s broken. Saturday, October 2, 2010
- 25. Don’t make me talk to the hand! Saturday, October 2, 2010
- 26. Don’t make me talk to the hand! Saturday, October 2, 2010
- 27. If your siteisn’t cute.com, don’t get cute use conventions Saturday, October 2, 2010
- 28. Make it obvious Saturday,October 2, 2010
- 29. People get lostat any turn. Too many choices, bad directions and noise create a bad situation. Saturday, October 2, 2010
- 30. People get lostat any turn. Too many choices, bad directions and noise create a bad situation. Saturday, October 2, 2010
- 31. What might be obvious to you isn’t obvious to someone who is new to the website. Saturday, October 2, 2010
- 32.
- 33.
- 34. As a rule conventions only become conventions if they work. Use them. They are your friends! Saturday, October 2, 2010
- 35. All conventions start life as somebody’s bright idea. (Steve Krug - Don’t Make Me Think) Saturday, October 2, 2010
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. Sample Prooocess Saturday, October 2, 2010
- 51. Sample Prooocess Saturday, October 2, 2010
- 52. Sample Prooocess Saturday, October 2, 2010
- 53.
- 54. 1. Identify thetype of site 1. Branding, marketing, content source, task-based... 2. Determine the team make-up required 3. Discover and understand the client and industry culture 4. Define the project objectives 5. Understand the current state (Heuristic Analysis) 6. Gather ideas from stakeholders 7. CONTENT STRATEGY!!! Saturday, October 2, 2010
- 55.
- 56. 1. User Research(internal and external) 1. Define user groups 2. Choose research techniques (what will the project's budget allow) 2. Personas 1. Really this could be just a short, visual reminder or representation for the people working on the project of the user groups. I like to have something in front of me that helps me keep my focus user-centric. Saturday, October 2, 2010
- 57.
- 58. 1. Envision features 1. This will allow us to flesh things out and see what it will take to build before to prioritizing 2. Prioritize requirements Saturday, October 2, 2010
- 59. Wireframe and Design Saturday, October 2, 2010
- 60. 1. Task flows 2. Wireframes and annotations (function) 1. Basic/draft wireframes 2. Filled out wireframes 3. Prototyping - functionality testing with users. 4. UI Graphic Design 1. Design testing 5. UI Design revisions 1. Design testing 6. Style guide documentation Saturday, October 2, 2010
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67. 1.0 WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS 1.2 CONTACT US 1.1 LOGO 1.3 1. CPM Homepage - alt 1.4 MEMBERS SPONSORS SUPPORT CAREERS FINANCIALS BOARD ABOUT Components 1.0 Utility nav bar to separate nav elements that take you offsite to another CPM website. 1.1 Logo used as link to home and below utility nav bar to give the FEATURE CPM site a clear separation from the other site nav. 2.0 INFO INFO INFO 4.0 ITEM GRAPHIC GRAPHIC GRAPHIC 1.2 Global links to common actions. 1.3 Site search. Separated from utility nav to indicate that it will only search the current site. 5.1 1.4 Primary nav bar (see next LATEST PRESS OTHER LIST wireframe for functionality). 5.0 5.3 Defogging the Defogging the 2.0 Info graphics linked to related Economic Crisis Economic Crisis stories. This is done manually. 03.22.10 03.22.10 3.0 3.0 Homepage specific item. Created HOMEPAGE SPECIFIC ITEM TITLE Chicago Public Radio Chicago Public Radio just for the homepage and Presents... Global Presents... Global overwritten with new content as Under his leadership, Chicago Public Radio has developed its most significant national needed. Activism Expo 2010 Activism Expo 2010 initiatives and programs including The Third Coast International Audio Festival in 2000, 03.01.10 03.01.10 4.0 Feature item area. This could be Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National another info graphic or a call to Public Radio in Washington, D.C. in 1998. In addition he has created numerous award- Defogging the Defogging the action to donate. winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty- Economic Crisis Economic Crisis Eight, both in 1998. 03.22.10 03.22.10 5.0 Latest press area shows the last 5.2 three press items in reverse cron order. Torey has an M.A. and B.A. in English Literature from Arizona State University and has More Press... More Lists... done postgraduate work at the University of Toronto in Middle English literature at U of 5.1 RSS feed link for press items. T’s Medieval Centre. 5.2 Link to view a listing of all press items. Under his leadership, Chicago Public Radio has developed its most significant national initiatives and programs including The Third Coast International Audio Festival in 2000, N ON - C ON TE N T 5.3 Additional list. This list would 6.0 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National have identical functionality to the Latest Press list. Public Radio in Washington, D.C. in 1998. SERVICES 6.1 6.0 Graphic Representing non- Torey has an M.A. and B.A. in English Literature from Arizona State University and has content related services. This Teaser text on the non-content related services graphic links to an overview done postgraduate work at the University of Toronto in Middle English literature at U of that CPM offers. Studios spaces, mobile page for the services. This will T’s Medieval Centre. also be found in the overall IA. application, training, and community room. 6.1 Teaser text for the non-content 7.0 7.1 7.2 7.3 related services. The text itself can deep link into the individual WE ARE SOCIAL: OUR WEBSITES: SITE INFO: Anchoring message that could be a final items. call to action for the site. A final call to f Join us on Facebook ▪ WBEZ 91.5 ▪ FAQ action for the site. 7.0 Listing of social network pages. Follow us on Twitter ▪ :VOCALO ▪ Site Map 7.1 Listing of related websites. See us on Flickr ▪ THIS AMERICAN LIFE ▪ Privacy Policy LOGO 7.2 General 2, 2010 Saturday, October site info. ▪ SOUND OPINIONS
- 68. 1.0 WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS 1.2 CONTACT US 1.1 LOGO 1.3 1. CPM Homepage - alt 1.4 MEMBERS SPONSORS SUPPORT CAREERS FINANCIALS BOARD ABOUT Components 1.0 Utility nav bar to separate nav elements that take you offsite to another CPM website. 1.1 Logo used as link to home and below utility nav bar to give the FEATURE CPM site a clear separation from the other site nav. 2.0 INFO INFO INFO 4.0 ITEM GRAPHIC GRAPHIC GRAPHIC 1.2 Global links to common actions. 1.3 Site search. Separated from utility nav to indicate that it will only search the current site. 5.1 1.4 Primary nav bar (see next LATEST PRESS OTHER LIST wireframe for functionality). 5.0 5.3 Defogging the Defogging the 2.0 Info graphics linked to related Economic Crisis Economic Crisis stories. This is done manually. 03.22.10 03.22.10 3.0 3.0 Homepage specific item. Created HOMEPAGE SPECIFIC ITEM TITLE Chicago Public Radio Chicago Public Radio just for the homepage and Presents... Global Presents... Global overwritten with new content as Under his leadership, Chicago Public Radio has developed its most significant national needed. Activism Expo 2010 Activism Expo 2010 initiatives and programs including The Third Coast International Audio Festival in 2000, 03.01.10 03.01.10 4.0 Feature item area. This could be Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National another info graphic or a call to Public Radio in Washington, D.C. in 1998. In addition he has created numerous award- Defogging the Defogging the action to donate. winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty- Economic Crisis Economic Crisis Eight, both in 1998. 03.22.10 03.22.10 5.0 Latest press area shows the last 5.2 three press items in reverse cron order. Torey has an M.A. and B.A. in English Literature from Arizona State University and has More Press... More Lists... done postgraduate work at the University of Toronto in Middle English literature at U of 5.1 RSS feed link for press items. T’s Medieval Centre. 5.2 Link to view a listing of all press items. Under his leadership, Chicago Public Radio has developed its most significant national initiatives and programs including The Third Coast International Audio Festival in 2000, N ON - C ON TE N T 5.3 Additional list. This list would 6.0 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National have identical functionality to the Latest Press list. Public Radio in Washington, D.C. in 1998. SERVICES 6.1 6.0 Graphic Representing non- Torey has an M.A. and B.A. in English Literature from Arizona State University and has content related services. This Teaser text on the non-content related services graphic links to an overview done postgraduate work at the University of Toronto in Middle English literature at U of that CPM offers. Studios spaces, mobile page for the services. This will T’s Medieval Centre. also be found in the overall IA. application, training, and community room. 6.1 Teaser text for the non-content 7.0 7.1 7.2 7.3 related services. The text itself can deep link into the individual WE ARE SOCIAL: OUR WEBSITES: SITE INFO: Anchoring message that could be a final items. call to action for the site. A final call to f Join us on Facebook ▪ WBEZ 91.5 ▪ FAQ action for the site. 7.0 Listing of social network pages. Follow us on Twitter ▪ :VOCALO ▪ Site Map 7.1 Listing of related websites. See us on Flickr ▪ THIS AMERICAN LIFE ▪ Privacy Policy LOGO 7.2 General 2, 2010 Saturday, October site info. ▪ SOUND OPINIONS
- 69. 1.0 WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS 1.2 CONTACT US 1.1 LOGO 1.3 1. CPM Homepage - alt 1.4 MEMBERS SPONSORS SUPPORT CAREERS FINANCIALS BOARD ABOUT Components 1.0 Utility nav bar to separate nav elements that take you offsite to another CPM website. 1.1 Logo used as link to home and below utility nav bar to give the FEATURE CPM site a clear separation from the other site nav. 2.0 INFO INFO INFO 4.0 ITEM GRAPHIC GRAPHIC GRAPHIC 1.2 Global links to common actions. 1.3 Site search. Separated from utility nav to indicate that it will only search the current site. 5.1 1.4 Primary nav bar (see next LATEST PRESS OTHER LIST wireframe for functionality). 5.0 5.3 Defogging the Defogging the 2.0 Info graphics linked to related Economic Crisis Economic Crisis stories. This is done manually. 03.22.10 03.22.10 3.0 3.0 Homepage specific item. Created HOMEPAGE SPECIFIC ITEM TITLE Chicago Public Radio Chicago Public Radio just for the homepage and Presents... Global Presents... Global overwritten with new content as Under his leadership, Chicago Public Radio has developed its most significant national needed. Activism Expo 2010 Activism Expo 2010 initiatives and programs including The Third Coast International Audio Festival in 2000, 03.01.10 03.01.10 4.0 Feature item area. This could be Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National another info graphic or a call to Public Radio in Washington, D.C. in 1998. In addition he has created numerous award- Defogging the Defogging the action to donate. winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty- Economic Crisis Economic Crisis Eight, both in 1998. 03.22.10 03.22.10 5.0 Latest press area shows the last 5.2 three press items in reverse cron order. Torey has an M.A. and B.A. in English Literature from Arizona State University and has More Press... More Lists... done postgraduate work at the University of Toronto in Middle English literature at U of 5.1 RSS feed link for press items. T’s Medieval Centre. 5.2 Link to view a listing of all press items. Under his leadership, Chicago Public Radio has developed its most significant national initiatives and programs including The Third Coast International Audio Festival in 2000, N ON - C ON TE N T 5.3 Additional list. This list would 6.0 Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National have identical functionality to the Latest Press list. Public Radio in Washington, D.C. in 1998. SERVICES 6.1 6.0 Graphic Representing non- Torey has an M.A. and B.A. in English Literature from Arizona State University and has content related services. This Teaser text on the non-content related services graphic links to an overview done postgraduate work at the University of Toronto in Middle English literature at U of that CPM offers. Studios spaces, mobile page for the services. This will T’s Medieval Centre. also be found in the overall IA. application, training, and community room. 6.1 Teaser text for the non-content 7.0 7.1 7.2 7.3 related services. The text itself can deep link into the individual WE ARE SOCIAL: OUR WEBSITES: SITE INFO: Anchoring message that could be a final items. call to action for the site. A final call to f Join us on Facebook ▪ WBEZ 91.5 ▪ FAQ action for the site. 7.0 Listing of social network pages. Follow us on Twitter ▪ :VOCALO ▪ Site Map 7.1 Listing of related websites. See us on Flickr ▪ THIS AMERICAN LIFE ▪ Privacy Policy LOGO 7.2 General 2, 2010 Saturday, October site info. ▪ SOUND OPINIONS
- 70. All the otherstuff Saturday, October 2, 2010
- 71. 1. Build... 2. User testing 3. QA (internal and with client) 4. It never ends! Saturday, October 2, 2010
- 72. delicious.com/ hellosteve/ ux Saturday, October 2, 2010
- 73. Find me at hellofisher.com Saturday, October 2, 2010
Editor's Notes
- #3 Steve International design week Handing off a design From strategy to QA. What do I do?
- #4 Steve International design week Handing off a design From strategy to QA. What do I do?
- #5 Steve International design week Handing off a design From strategy to QA. What do I do?
- #6 Steve International design week Handing off a design From strategy to QA. What do I do?
- #7 Steve International design week Handing off a design From strategy to QA. What do I do?
- #8 Steve International design week Handing off a design From strategy to QA. What do I do?
- #9 Steve International design week Handing off a design From strategy to QA. What do I do?
- #10 Steve International design week Handing off a design From strategy to QA. What do I do?
- #11 Steve International design week Handing off a design From strategy to QA. What do I do?
- #12 Your navigation needs to make sense otherwise I will run into roadblocks!
- #13 Users are there to accomplish tasks. How does that move them towards the website’s goals?
- #14 Users are there to accomplish tasks. How does that move them towards the website’s goals?
- #15 Users are there to accomplish tasks. How does that move them towards the website’s goals?
- #16 Users are there to accomplish tasks. How does that move them towards the website’s goals?
- #35 Budgets? Timelines? The horror! Test only 3 people?! It is extreme, but there are a lot of reasons for it. If you keep it that simple then you can do all the testing in one morning. My suggested serving is that you do three test in one morning and then de-brief over lunch. And that way you’re team’s investment in usability testing; and you do it once a month.
- #36 Budgets? Timelines? The horror! Test only 3 people?! It is extreme, but there are a lot of reasons for it. If you keep it that simple then you can do all the testing in one morning. My suggested serving is that you do three test in one morning and then de-brief over lunch. And that way you’re team’s investment in usability testing; and you do it once a month.
- #37 Budgets? Timelines? The horror! Test only 3 people?! It is extreme, but there are a lot of reasons for it. If you keep it that simple then you can do all the testing in one morning. My suggested serving is that you do three test in one morning and then de-brief over lunch. And that way you’re team’s investment in usability testing; and you do it once a month.
- #38 Budgets? Timelines? The horror! Test only 3 people?! It is extreme, but there are a lot of reasons for it. If you keep it that simple then you can do all the testing in one morning. My suggested serving is that you do three test in one morning and then de-brief over lunch. And that way you’re team’s investment in usability testing; and you do it once a month.
- #39 Steve International design week Handing off a design From strategy to QA. What do I do?
- #40 Steve International design week Handing off a design From strategy to QA. What do I do?
- #41 It is ok to be clever, but not cute. Your navigation needs to make sense otherwise I will run into roadblocks!
- #42 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
- #43 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
- #44 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
- #45 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
- #46 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
- #47 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
- #48 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
- #49 Make it obvious. Instant Chewbacca.com ... irony is it is in flash and is inaccessible on my iPhone. I’d love to have my instant chewy where ever I go!
- #50 Your navigation needs to make sense otherwise I will run into roadblocks!
- #66 That’s right. I’m Canadian, but I’m coming to America!
- #67 That’s right. I’m Canadian, but I’m coming to America!
- #68 Your navigation needs to make sense otherwise I will run into roadblocks!
- #74 Your navigation needs to make sense otherwise I will run into roadblocks!
- #75 Your navigation needs to make sense otherwise I will run into roadblocks!
- #76 Your navigation needs to make sense otherwise I will run into roadblocks!
- #77 Your navigation needs to make sense otherwise I will run into roadblocks!
- #78 Your navigation needs to make sense otherwise I will run into roadblocks!
- #79 Your navigation needs to make sense otherwise I will run into roadblocks!
- #80 Your navigation needs to make sense otherwise I will run into roadblocks!
- #81 Steve International design week Handing off a design From strategy to QA. What do I do?
- #82 Steve International design week Handing off a design From strategy to QA. What do I do?
- #83 Steve International design week Handing off a design From strategy to QA. What do I do?
- #84 Steve International design week Handing off a design From strategy to QA. What do I do?