Upload
webcontent2007
View
3.354
Download
1
Tags:
Embed Size (px)
Citation preview
content design & access tools & technologies content development &management
Design and UsabilityYvonne Doll
Creative Director
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–
CommunicationA 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
Presentation Design
Interaction 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 business goals
– Meeting users expectations
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?
DANCING WITH MYSELF
Billy Idol’s Usability Faux PasSay 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
Ch-Ch-Ch-Changes
Evolving with your audience
Redefining your brand
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?
Where Can I Go? The “Leafy Coat”
Non- Functional Design
Design for the end use.
WHAT’S THE FREQUENCY KENNETH?
Browser Stats 508c CompliancePortion 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
LAKE FOREST GRADUATE SCHOOL OF MGMT
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.
“If 80% or more of the big sites do things in a single way, then this is the de-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
Innovation?Use time-tested, user
affirmed design tenants
Don’t reinvent the basics.
BECKERCPA.COM
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
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
TURN AND FACE THE STRANGE CHANGES
It’s up for debate…Navigation Position
– Upside down “L” Shaped nav is most common
– Nav on right, right next to scroll bar- faster for right handed people.
– Tasks are slower, but user’s have a greater understanding of your content
When is it time to innovate?
Using new technology to address cumbersome outdated processes.
“Fitts' Law dictates that shorter mouse movements are better: it is always faster to click a target if it is closer to your starting position. Thus, placing the navigation rail next to the scroll bar will usually save users time over placing these two frequently-accessed areas on opposite sides of the window.”Jakob Nielson
OOOOOOOH, I’M ON FIRE.
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
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 interested.
– Be on par with the rest of “the web”
– Re-energize your user base and make new “friends”
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…
COLOR MY WORLD
COLOR MY WORLD
Interesting Color Facts..Yellow:• It’s perceived as being fast,
that is why a lot of taxis are yellow
• High energy, quickly becomes overwhelming
Blue:• Natural Appetite
Suppressant• Overall- Men prefer blue to
red, women prefer red to blue
• In Darker Shades increases productivity
Green:• Has a calming influence-
neutral effect on human nervous system
• Green Rooms TV waiting rooms
“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….
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
http://www.goodexperience.com/http://www.usabilityfirst.comhttp://www.useit.com/http://www.boxesandarrows.com/http://jodi.ecs.soton.ac.uk/