View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
Design and Usability
content design & access tools & technologies content development &
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–
A successful web site is like a good conversation:
– Are you speaking the same language?
– Are you listening?
– Is it engaging?
HELLO, IS THERE ANYBODY IN THERE?
3 tiers of web design for usability :
Information Architecture Design
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
– Meeting users expectations
DANCING WITH MYSELF
Questions you should to be able to
What is my website’s job description?
Who is coming to my site and why?
How are you different (better) than the
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?
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
Timed animation auto-loads the next page
– Confusing to the user
Does Billy Idol Get it?
- He’s already got brand recognition and
- His is an entertainment website.
- People will hunt and explore more
Evolving with your
YOU MAY ASK YOURSELF, “HOW DID I GET HERE”
Questions your web sites
visitor should be able to
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.
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
PLEASE DON’T LET ME BE MISUNDERSTOOD
Unified Behavior Model
An established framework that user’s understand
Proven “best practices” from the global web
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
YOU’RE SUCH A LOVELY AUDIENCE,
WE WANT TO TAKE YOU HOME WITH US
needs with user
Ask your audience
I’M THE EYE IN THE SKY
How do we know it works?
– Special cameras designed to pick up
eye movement & fixation
– Repetitive use trains user, it then
becomes the standard
– Examples: Standard link colors, RSS
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
“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
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
– 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
DON’T CHANGE A HAIR FOR ME, NOT IF YOU CARE FOR ME
IT’S TIME FOR A COOL CHANGE
Freshen your site
– Using color to keep
users engaged and
– Be on par with the
rest of “the web”
– Re-energize your user
base and make new
IT’S NOT EASY BEING GREEN.
What Color Can Do?
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…
COLOR MY WORLD
Interesting Color Facts..
• Has a calming influence-
It’s perceived as being fast,
neutral effect on human
that is why a lot of taxis are
• Green Rooms TV waiting
High energy, quickly
• Natural Appetite
• Overall- Men prefer blue to
red, women prefer red to
• In Darker Shades increases
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
RIGHT BEHIND YOU I SEE THE MILLIONS
Articulating your message through
– Information Architecture
– Organization Design
– Interaction Design
Distinct Visual Language/Good visual
Engage and invite users
User understands, what you are about, what you have to offer