View
134
Download
2
Category
Preview:
DESCRIPTION
A straightforward usability and user experience presentation for content authors. Provides some useful tips for creating easy to use navigation, nice links and buttons, helpful page title and readable content.
Citation preview
IS THISCLICKABLE?
CHANGE HOW YOU LOOK AT THE WEBColin Calnan / / @colincalnan colin.calnan@gmail.com
"WHAT'S THE MOSTIMPORTANT THING ISHOULD DO IF IWANT TO MAKESURE MY WEB SITEIS EASY TO USE?"
NOTHING SHOULD BE EVERMORE THAN 2 CLICKS AWAY.
Steve Krug condensed the answer into one short sentence
DON'T MAKE METHINK!
APPLIED TO EVERYDAY ITEMS
APPLIED TO SCARY THINGS
WHAT MAKES US THINK?All kinds of things make you think unnecessarily.
Clever names
Marketing names
Company-specific names
SIMPLE NAMES
Due to company policy you may be locked into Hydro-ite'sbut this requires thinking. It's always best to go for the more
obvious.
SIMPLE LINKS & BUTTONS
REDUCING THE NEED TOTHINK
1. Obvious
2. Self evident
3. Self explanatory
HOW OBVIOUS?
SELF EVIDENTSelf evident enough that if you're next door neighbour
looked at your home page they would say...
"OH, IT'S A _ _ _".
SELF EXPLANATORYNavigation and menu links are clear, requiring noexplanation or additional thought.
Page titles are concise and clearly identify the page's topic.
Links are obviously decorated and there is no need toinstruct visitors to 'click here'.
Calls-to-action and buttons are easily distinguished.
THE BLINDFOLD DROP TESTIf you were dropped into a website and a blindfold taken off,
could you quickly answer these questions:
What site is this? (Site ID)
What page am I on? (Page name)
What are the major sections of this site? (Sections)
What are my options at this level? (Local navigation)
Where am I in the scheme of things? ("You are here"indicators)
TRY THE TEST YOURSELF
1. Choose a page anywhere in a site at random, and print ascreenshot of it.
2. Hold it at arm's length or squint so you can't really study itclosely.
3. As quickly as possible, try to find and circle each of thefollowing items. (You won’t find all of the items on everypage.)
TRY THE TEST YOURSELFFIND THE FOLLOWING AREAS :ON THIS PAGE
1. Site ID
2. Page name
3. Sections & Subsections
4. Local Navigation
5. "Where am I" indicators
EXAMPLE
CREATING USABLENAVIGATION
About 60% of the time, people cannot find theinformation they're seeking on a website.
Approximately 50% of potential sales are lost becauseusers can't find information they're looking for.
Source: usability.gov
BE SPECIFIC & DESCRIPTIVE
Don’t label your pages What We Do / Products / Services / Who We Are
Do use specific & descriptive labelsWhat is BCHydro / Powersmart Explained / Using HydroWeb
ORDER IS IMPORTANTItems that appear at the
beginning & endof a list are most effective
CREATING NICE LINKS
"CLICK" PUTS TOO MUCH FOCUS ONMOUSE MECHANICS
Credit: smashingmagazine.com
"HERE" CONCEALS WHAT USERS ARECLICKING
Credit: smashingmagazine.com
MULTIPLE "HERE" LINKS CONFUSEEVEN MORE
Credit: smashingmagazine.com
PHRASING LINKSLINK TO NOUNS
Credit: smashingmagazine.com
PHRASING LINKSEND ON A LINK
Credit: smashingmagazine.com
PAGE TITLES & LAYOUT
DUBLIN STREET SIGNS
On side of builings, out of view, unreadable from a distance
VANCOUVER STREET SIGNS
Above intersection, highly visible, easily read from a distance
THE RESULTWhen driving in Vancouver, you can devote less energy andattention to dealing with where you are and more to traffic
and pedestrians.
PAGE NAMES ARE THE STREET SIGNSOF THE WEB.
When things are going well we may not notice page namesat all. But as soon as we sense that we may not be headed in
the right direction, we need to be able to spot the pagename effortlessly so we can get our bearings.
EVERY PAGE NEEDS A NAME
THE NAME SHOULD MATCH WHAT YOUCLICKED
by Steve KrugDon't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
"CONTENT IS KING"Content is where I expect much of the real money will be made
on the Internet, just as it was in broadcasting.
BILL GATES (1/3/1996)
USE CONCISE CONTENTWHY?
We search for keywords, read in a non-linear fashion. Weskip around instead of reading it from top to bottom.
A 58% increase in usability can be achievedsimply by cutting roughly half the words on
the webpages being studied.
Source: Jakob Nielsen Usability Report
WHAT YOU CAN DO.
Get to the point as quickly as possible.
Cut out unnecessary information.
Omit needless words
Use easy-to-understand, shorter, common words andphrases.
Avoid long paragraphs and sentences.
TEST YOUR CONTENTREADABLE.COM
allows you to plug in a URL or text,then gives you scores based on popular readability formulas
such as the Flesch Kincaid Reading Ease.
The Readability Test Tool
USE HEADINGS TO BREAK UPCONTENT
Internet readers inspect webpages in blocksand sections, or what is called "block
reading."
- Web content management expert Gerry McGovern
FSHAPED PATTERN
Credit: http://mashable.com/
BREAK INTO BLOCKS
Credit: http://mashable.com
USE THE INVERTED PYRAMID
Credit: mashable.com
USE THE INVERTED PYRAMID
Credit: ontentmarketinginstitute.com
USE BULLETED LISTS & TEXTFORMATTING
Users fixate longer on bulleted lists and text formatting(such as bolding and italics)
EXAMPLES DESCRIPTIVE, CONCISE NAVIGATIONSMITH BROS.
EXAMPLES DESCRIPTIVE, ORDERED NAVIGATIONKIEFER SWIMWEAR
THE ENDby Colin Calnan / /@colincalnan colin.calnan@gmail.com
ca.linkedin.com/in/colincalnan
Recommended