Published on June 20, 2007
Design and Usability Yvonne Doll Creative Director content design & access tools & technologies content development & management
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?
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 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
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? 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 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. 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 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… 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
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.. 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
“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.com http://www.useit.com/ http://www.boxesandarrows.com/ http://jodi.ecs.soton.ac.uk/