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

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.

32. The convergence
of real and online
experiences
Image copyright: Jeff Sexton

33. Changes the
entire model for
user behaviors,
patterns, etc.
Image copyright: Apple

34. What’s next with
touch interfaces?
Image copyright: GizmoWatch

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

36. Thank You. rtooms@savagebrands.com
http://blog.savagebrands.com
http://twitter.com/rtooms
http://twitter.com/savagebrands
Smart.Fresh.Human.