This document discusses web design and usability. It covers key aspects of usability like information architecture, presentation design, and interaction design. Specific topics discussed include communication on websites, color choices and their effects, evolving designs over time, and developing user personas. Examples are provided of both good and poor design practices. The overall message is that usability should be a top priority in web design.

1. Design and Usability
Yvonne Doll
Creative Director
content design & access tools & technologies content development &
management

2. HELLO I LOVE YOU WON’T YOU TELL ME YOUR NAME?
Every web site regardless of industry succeeds or fails for the
exact same reason–
Communication
A successful web site is like a good conversation:
– Are you speaking the same language?
– Are you listening?
– Is it engaging?

3. HELLO, IS THERE ANYBODY IN THERE?
3 tiers of web design for usability :
Information Architecture Design
Presentation Design
Interaction Design

4. I DON’T KNOW WHY YOU SAY GOODBYE WHEN I SAY HELLO
What is Usability?
– Very Simply- Ease of Use
– Usability also means thinking about how and why
people use a product
– Designing for the user’s task list and your
business goals
– Meeting users expectations

5. DANCING WITH MYSELF
Questions you should to be able to
answer :
What is my website’s job description?
Who is coming to my site and why?
How are you different (better) than the
competition?
He’s Billy Idol That’s Why..
BillyIdol.com contains some serious
usability Faux pas…
Is Billy Idol ABOVE the rules of usability?
Or is he still just dancing with himself?

6. DANCING WITH MYSELF
Billy Idol’s Usability Faux Pas
Say No To Splash Pages
– Poor User experience
– Terrible for your SEO placement
– Obstacle in way to more relevant
content
Timed animation auto-loads the next page
– Confusing to the user
Does Billy Idol Get it?
- He’s already got brand recognition and
organic traffic
- His is an entertainment website.
- People will hunt and explore more

7. Ch-Ch-Ch-Changes
Evolving with your
audience
Redefining your
brand

8. YOU MAY ASK YOURSELF, “HOW DID I GET HERE”
Questions your web sites
visitor should be able to
answer :
What is this site about?
Where am I?
Where Have I been?
The “Leafy Coat”
Where Can I Go? Non- Functional Design
Design for the end use.

9. WHAT’S THE FREQUENCY KENNETH?
Browser Stats 508c Compliance
Portion of the United States Federal
Rehabilitation Act discussing equal
access to information technology for
people with disabilities
Code Design- your site is
understandable to people using
assistive devices such as screen
readers
Screen Resolution

10. LAKE FOREST GRADUATE SCHOOL OF MGMT

11. PLEASE DON’T LET ME BE MISUNDERSTOOD
Unified Behavior Model
An established framework that user’s understand
Proven “best practices” from the global web
experience
Collective baseline information we know of most
users and their interactions with sites- satisfying a
larger audience base. Innovation?
Use time-tested, user
affirmed design tenants
“If 80% or more of the big sites do things in a single way, then this is the de- Don’t reinvent the basics.
facto standard and you have to comply. Only deviate from a design
standard if your alternative design has at least 100% higher measured
usability.“ Jakob Nielson

12. BECKERCPA.COM

13. YOU’RE SUCH A LOVELY AUDIENCE,
WE WANT TO TAKE YOU HOME WITH US
Developing User
Personas
Balance business
needs with user
appeal
Ask your audience
Reflect your
audience

14. I’M THE EYE IN THE SKY
How do we know it works?
Eye Tracking:
– Special cameras designed to pick up
eye movement & fixation
Web History:
– Repetitive use trains user, it then
becomes the standard
– Examples: Standard link colors, RSS
logo
Usability Testing

15. TURN AND FACE THE STRANGE CHANGES
It’s up for debate…
When is it time to innovate?
Navigation Position Using new technology to
address cumbersome outdated
– Upside down “L” Shaped nav is
processes.
most common
“Fitts' Law dictates that shorter
mouse movements are better: it is
– Nav on right, right next to scroll
always faster to click a target if it is
bar- faster for right handed closer to your starting position.
Thus, placing the navigation rail
people.
next to the scroll bar will usually
save users time over placing these
– Tasks are slower, but user’s
two frequently-accessed areas on
have a greater understanding opposite sides of the window.”
of your content Jakob Nielson

16. OOOOOOOH, I’M ON FIRE.

17. CHICAGOPARKDISTRICT.COM
ChicagoParkDistrict.com
– Ajax to clean things up
on server level.
– Not what users are used
to, but a logical and easy
to learn process
– Pain of learning is
outweighed by the end
benefit to the user

18. DON’T CHANGE A HAIR FOR ME, NOT IF YOU CARE FOR ME

19. IT’S TIME FOR A COOL CHANGE
Freshen your site
– Using color to keep
users engaged and
interested.
– Be on par with the
rest of “the web”
– Re-energize your user
base and make new
“friends”

20. IT’S NOT EASY BEING GREEN.
What Color Can Do?
Gives personality
Help define tone and mood- reinforce your brand
Help users understand what your website is about
Create visual unity
Choose the right voice for your site
Creates emotional impact…

21. COLOR MY WORLD

22. COLOR MY WORLD
Interesting Color Facts..
Green:
Yellow:
• Has a calming influence-
It’s perceived as being fast,
•
neutral effect on human
that is why a lot of taxis are
nervous system
yellow
• Green Rooms TV waiting
High energy, quickly
•
rooms
becomes overwhelming
Blue:
• Natural Appetite
Suppressant
• Overall- Men prefer blue to
red, women prefer red to
blue
• In Darker Shades increases
productivity

23. “99 LUFTBALOONS”
Color Choices: Industry / Culture
– Use of the color red on accounting sites.
– In South Africa, red is the color of mourning.
– In Greece, eggs are dyed red for good luck at
Easter time.
– Also….

24. RIGHT BEHIND YOU I SEE THE MILLIONS
Articulating your message through
– Information Architecture
– Organization Design
– Interaction Design
Distinct Visual Language/Good visual
communication will:
Clarify mood
Engage and invite users
User understands, what you are about, what you have to offer

25. http://www.goodexperience.com/
http://www.usabilityfirst.com
http://www.useit.com/
http://www.boxesandarrows.com/
http://jodi.ecs.soton.ac.uk/