Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

"Creating user-centered websites that drive results" by Savage at the HiMA IS2010 Conference

1,599 views

Published on

We all know that designing successful websites requires an understanding of how users consume and interact with information online, but taking the first steps toward a user-centric approach requires a process that will uncover the user’s needs and balance them against the site’s goals.

This presentation covers the methods and tools of observation and creation that help:
- Improve usability to generate the right actions
- Increase user engagement with your content and layouts
- Make sense of user data to find solutions

Published in: Design
  • Be the first to comment

"Creating user-centered websites that drive results" by Savage at the HiMA IS2010 Conference

  1. 1. Creating user-centered websites that drive results IS Conference 2010 | September 16, 2010 Hello. Smart.Fresh.Human.
  2. 2. This site doesn’t work. It takes too long to find anything. The site seems clunky and difficult to use. I can’t find what I’m looking for. I have to click too many times to do anything. This content isn’t meaningful to me. Why aren’t we seeing the ROI we anticipated?
  3. 3. Creating User-Centered Websites • In this session, we’ll cover the methods and tools that will help: – Involve users in the process (and often) – Improve usability to generate the right actions – Influence better website results and ROI • What’s the right approach? • Where do we start? Smart.Fresh.Human. | Page 3
  4. 4. Design with: Users empathy Content perspective Context purpose
  5. 5. Create: Users engagement Content consumption Context action
  6. 6. easy to understand perspective I want it purpose empathy easy to use USER I need it VALUE consumption engagement easy to find action I act on it
  7. 7. Design for Your Target Users Involve users in the beginning. Be user-centric in your process. Turn business goals into ROI through user acceptance. Smart.Fresh.Human.
  8. 8. Why is it that we hate automated voice systems? Photo courtesy flickr user: furryscaly
  9. 9. Designed a User-Centered Site • Designing for your users’ needs means understanding the: – Goals – Wants – Desires • Removing barriers • Balancing user needs with “persuasive guidance” Smart.Fresh.Human. | Page 9
  10. 10. The User-Centered Myth Conventional Wisdom The Better Way User The wants and needs of the user We begin by looking at the users’ are at the center of the process goals, motivations and needs. Smart.Fresh.Human. | Page 10
  11. 11. Involve Users from the Beginning • Discover their “mental The Better Way models” • Include them as part of the process • Observe and validate • Ask for feedback We begin by looking at the users’ goals, motivations and needs. Smart.Fresh.Human. | Page 11
  12. 12. The User Research Myth • User research is not market research • Behavior vs. opinions • Actions vs. words Image copyright RosenfeldMedia Smart.Fresh.Human. | Page 12
  13. 13. The User-Centered Process User Information Visual Evaluate/ Research Design Design Validate • Surveys Card Sorts Graphic Surveys • Interviews Taxonomies Design Usability • Focus Groups IA Information Testing Graphics Web • Personas Wireframes Prototyping Analytics • Scenarios Business Goals ROI Smart.Fresh.Human. | Page 13
  14. 14. The User-Centered Process User Information Visual Evaluate/ Research Design Design Validate • Surveys Card Sorts Graphic Surveys • Interviews Taxonomies Design Usability • Focus Groups IA Information Testing Graphics Web • Personas Wireframes Prototyping Analytics • Scenarios Business Goals ROI Smart.Fresh.Human. | Page 14
  15. 15. Photo courtesy flickr user: Todd Moy
  16. 16. Image copyright: Iain Lowe
  17. 17. Image copyright: Iain Lowe
  18. 18. Design for Basic User Preferences (Really) understand how users view online pages. The art and science of color preferences. Remove barriers for greater user engagement. Smart.Fresh.Human.
  19. 19. Heatmaps from user eyetracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations. Source: Jakob Nielsen, http://www.useit.com
  20. 20. Guide Users to Important Content • Eye tracking studies show how most web users focus on information – TOP: Users first read horizontally across the upper part of the content area – CENTER, LEFT: Next, users move down the page and read across in a second horizontal movement and scan the content’s left side in a vertical movement Smart.Fresh.Human. | Page 20
  21. 21. With news-oriented homepages, readers’ instincts are to first look at the logo, navigation and top headlines in the upper left. The graphic above shows the zones of importance formulated from Eyetrack data. Source: Eyetrack III, http://www.poynterextra.org/eyetrack2004/main.htm
  22. 22. Eye Tracking Study Findings Most sites use a variation of the “inverted-L” structure because of eye-scanning patterns Generally considered the area where most user’s look for important page content Smart.Fresh.Human. | Page 22
  23. 23. Guide Users to Important Content • Implication on design – TOP NAVIGATION: more frequently accessed items are top-left – FEATURE: featured content is typically given prime site real-estate – front and center – SUPPORTING LINKS: users expect to see this to the right of the content Smart.Fresh.Human. | Page 23
  24. 24. The Science of Choosing Colors • Choosing colors for your website depends on many considerations, such as – Brand colors: does the site reflect the brand palette? – Legibility: do the colors have sufficient contrast to be legible under different viewing conditions? – Consistency: are colors used in a consistent way? e.g.: using the same colors for links, headlines, etc. Smart.Fresh.Human. | Page 24
  25. 25. Color Preferences – Gender – Certain colors appeal to the general population of men and women differently Source: Birren, Faber., Color Psychology and Color Therapy. Smart.Fresh.Human. | Page 25
  26. 26. Color Preferences – Age – Certain colors appeal to general age groups differently Source: Birren, Faber., Color Psychology and Color Therapy. Smart.Fresh.Human. | Page 26
  27. 27. Smart.Fresh.Human. | Page 27
  28. 28. Color Theory • Implication on design – BRAND COLORS: are chosen where needed to reflect major site elements – ACCENT COLORS: that enhance the base brand palette can be used strategically – NEUTRAL COLORS: are chosen to group or ground elements on a page – WHITE SPACE: is used to give colors and elements “breathing room” Smart.Fresh.Human. | Page 28
  29. 29. Designing for What’s Now/Next Closing the typography gap in online experiences. We’re going mobile. What experience do users expect? How touch is changing our mouse-driven behaviors. Independence. The key to future user experiences. Smart.Fresh.Human.
  30. 30. The convergence of real and online experiences Image copyright: Jeff Sexton
  31. 31. Changes the entire model for user behaviors, patterns, etc. Image copyright: Apple
  32. 32. What’s next with touch interfaces? Image copyright: GizmoWatch
  33. 33. Drive Results with User-Centered Websites • Involve your users in the process (and often) – Start with your user research • Improve usability to generate the right actions – Remember eye-tracking and color perceptions • Explore how new trends/technologies are impacting your users’ actions – Augmented reality, touch screens and more are changing user behaviors Smart.Fresh.Human. | Page 35
  34. 34. Thank You. rtooms@savagebrands.com http://blog.savagebrands.com http://twitter.com/rtooms http://twitter.com/savagebrands Smart.Fresh.Human.

×