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/