• Save
"Creating user-centered websites that drive results" by Savage at the HiMA IS2010 Conference
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 1,402 views
Uploaded 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......

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,402
On Slideshare
1,291
From Embeds
111
Number of Embeds
8

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 111

http://blog.savagebrands.com 76
http://savage.savageproject.com 17
http://smartfreshhuman.info 5
http://localhost 4
http://legacyblogsite.savageproject.com 3
https://www.linkedin.com 3
http://savagebrands.com 2
http://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Creating user-centered websites that drive results IS Conference 2010 | September 16, 2010 Hello. Smart.Fresh.Human.
  • 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. 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. Design with: Users empathy Content perspective Context purpose
  • 5. Create: Users engagement Content consumption Context action
  • 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. 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. Why is it that we hate automated voice systems? Photo courtesy flickr user: furryscaly
  • 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. 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. 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. 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. 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. 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. Photo courtesy flickr user: Todd Moy
  • 16. Image copyright: Iain Lowe
  • 17. Image copyright: Iain Lowe
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Smart.Fresh.Human. | Page 27
  • 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. 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. The convergence of real and online experiences Image copyright: Jeff Sexton
  • 31. Changes the entire model for user behaviors, patterns, etc. Image copyright: Apple
  • 32. What’s next with touch interfaces? Image copyright: GizmoWatch
  • 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. Thank You. rtooms@savagebrands.com http://blog.savagebrands.com http://twitter.com/rtooms http://twitter.com/savagebrands Smart.Fresh.Human.