Creating user-centered
           websites that drive results
                     IS Conference 2010 | September 16, 2010...
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 ...
Creating User-Centered Websites
•   In this session, we’ll cover the methods and
    tools that will help:
       – Involv...
Design with:

Users
          empathy
Content
          perspective
Context
          purpose
Create:

Users
          engagement
Content
          consumption
Context
          action
easy to understand         perspective   I want it




               purpose                      empathy


easy to use
 ...
Design for Your Target Users
                                       Involve users in the beginning.
                      ...
Why is it that we hate
automated voice systems?




                           Photo courtesy flickr user: furryscaly
Designed a User-Centered Site
•   Designing for your users’ needs means
    understanding the:
       – Goals
       – Wan...
The User-Centered Myth
        Conventional Wisdom             The Better Way




                     User



The wants a...
Involve Users from the Beginning
• Discover their “mental            The Better Way
  models”
• Include them as part of
  ...
The User Research Myth
                                 • User research
                                   is not market
 ...
The User-Centered Process
User                               Information Visual          Evaluate/
Research               ...
The User-Centered Process
User                               Information Visual          Evaluate/
Research               ...
Photo courtesy flickr user: Todd Moy
Image copyright: Iain Lowe
Image copyright: Iain Lowe
Design for Basic User Preferences
                     (Really) understand how users view online pages.
                  ...
Heatmaps from user eyetracking studies of three websites. The areas where users
looked the most are colored red; the yello...
Guide Users to Important Content
•   Eye tracking studies show how most web
    users focus on information
       – TOP: U...
With news-oriented homepages, readers’ instincts are to first look at the logo,
navigation and top headlines in the upper ...
Eye Tracking Study Findings
                                Most sites use a variation of the “inverted-L”
               ...
Guide Users to Important Content
•   Implication on design
       – TOP NAVIGATION: more frequently accessed
         item...
The Science of Choosing Colors
•    Choosing colors for your website depends on
     many considerations, such as
       –...
Color Preferences – Gender

                               – Certain colors appeal
                                 to the...
Color Preferences – Age


                                                              – Certain colors appeal
          ...
Smart.Fresh.Human. | Page 27
Color Theory
•   Implication on design
       – BRAND COLORS: are chosen where needed to
         reflect major site eleme...
Designing for What’s Now/Next
                   Closing the typography gap in online experiences.
               We’re go...
The convergence
                               of real and online
                               experiences
Image copyrig...
Changes the
entire model for
user behaviors,
patterns, etc.




Image copyright: Apple
What’s next with
touch interfaces?




Image copyright: GizmoWatch
Drive Results with User-Centered Websites
•   Involve your users in the process (and often)
       – Start with your user ...
Thank You.        rtooms@savagebrands.com
                      http://blog.savagebrands.com
                        http:...
"Creating user-centered websites that drive results" by Savage at the HiMA IS2010 Conference
"Creating user-centered websites that drive results" by Savage at the HiMA IS2010 Conference
Upcoming SlideShare
Loading in …5
×

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

1,487 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,487
On SlideShare
0
From Embeds
0
Number of Embeds
128
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

"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.

×