Is This Clickable? - Change how you look at the web
description
Transcript of Is This Clickable? - Change how you look at the web
![Page 2: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/2.jpg)
"WHAT'S THE MOSTIMPORTANT THING ISHOULD DO IF IWANT TO MAKESURE MY WEB SITEIS EASY TO USE?"
![Page 3: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/3.jpg)
NOTHING SHOULD BE EVERMORE THAN 2 CLICKS AWAY.
![Page 4: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/4.jpg)
Steve Krug condensed the answer into one short sentence
DON'T MAKE METHINK!
![Page 5: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/5.jpg)
APPLIED TO EVERYDAY ITEMS
![Page 6: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/6.jpg)
APPLIED TO SCARY THINGS
![Page 7: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/7.jpg)
WHAT MAKES US THINK?All kinds of things make you think unnecessarily.
Clever names
Marketing names
Company-specific names
![Page 8: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/8.jpg)
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.
![Page 9: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/9.jpg)
SIMPLE LINKS & BUTTONS
![Page 10: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/10.jpg)
REDUCING THE NEED TOTHINK
1. Obvious
2. Self evident
3. Self explanatory
![Page 11: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/11.jpg)
HOW OBVIOUS?
![Page 13: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/13.jpg)
SELF EVIDENTSelf evident enough that if you're next door neighbour
looked at your home page they would say...
"OH, IT'S A _ _ _".
![Page 14: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/14.jpg)
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.
![Page 15: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/15.jpg)
![Page 16: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/16.jpg)
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)
![Page 17: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/17.jpg)
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.)
![Page 18: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/18.jpg)
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
![Page 19: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/19.jpg)
EXAMPLE
![Page 20: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/20.jpg)
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
![Page 23: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/23.jpg)
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
![Page 24: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/24.jpg)
ORDER IS IMPORTANTItems that appear at the
beginning & endof a list are most effective
![Page 25: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/25.jpg)
CREATING NICE LINKS
![Page 26: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/26.jpg)
"CLICK" PUTS TOO MUCH FOCUS ONMOUSE MECHANICS
Credit: smashingmagazine.com
![Page 27: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/27.jpg)
"HERE" CONCEALS WHAT USERS ARECLICKING
Credit: smashingmagazine.com
![Page 28: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/28.jpg)
MULTIPLE "HERE" LINKS CONFUSEEVEN MORE
Credit: smashingmagazine.com
![Page 29: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/29.jpg)
PHRASING LINKSLINK TO NOUNS
Credit: smashingmagazine.com
![Page 30: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/30.jpg)
PHRASING LINKSEND ON A LINK
Credit: smashingmagazine.com
![Page 31: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/31.jpg)
PAGE TITLES & LAYOUT
![Page 32: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/32.jpg)
DUBLIN STREET SIGNS
On side of builings, out of view, unreadable from a distance
![Page 33: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/33.jpg)
VANCOUVER STREET SIGNS
Above intersection, highly visible, easily read from a distance
![Page 34: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/34.jpg)
THE RESULTWhen driving in Vancouver, you can devote less energy andattention to dealing with where you are and more to traffic
and pedestrians.
![Page 35: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/35.jpg)
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.
![Page 36: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/36.jpg)
EVERY PAGE NEEDS A NAME
![Page 37: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/37.jpg)
THE NAME SHOULD MATCH WHAT YOUCLICKED
by Steve KrugDon't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
![Page 38: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/38.jpg)
"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)
![Page 39: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/39.jpg)
USE CONCISE CONTENTWHY?
We search for keywords, read in a non-linear fashion. Weskip around instead of reading it from top to bottom.
![Page 40: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/40.jpg)
A 58% increase in usability can be achievedsimply by cutting roughly half the words on
the webpages being studied.
Source: Jakob Nielsen Usability Report
![Page 41: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/41.jpg)
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.
![Page 42: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/42.jpg)
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
![Page 43: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/43.jpg)
USE HEADINGS TO BREAK UPCONTENT
Internet readers inspect webpages in blocksand sections, or what is called "block
reading."
- Web content management expert Gerry McGovern
![Page 44: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/44.jpg)
FSHAPED PATTERN
Credit: http://mashable.com/
![Page 45: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/45.jpg)
BREAK INTO BLOCKS
Credit: http://mashable.com
![Page 46: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/46.jpg)
USE THE INVERTED PYRAMID
Credit: mashable.com
![Page 47: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/47.jpg)
USE THE INVERTED PYRAMID
Credit: ontentmarketinginstitute.com
![Page 48: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/48.jpg)
USE BULLETED LISTS & TEXTFORMATTING
Users fixate longer on bulleted lists and text formatting(such as bolding and italics)
![Page 49: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/49.jpg)
EXAMPLES DESCRIPTIVE, CONCISE NAVIGATIONSMITH BROS.
![Page 50: Is This Clickable? - Change how you look at the web](https://reader034.fdocuments.net/reader034/viewer/2022052618/5485ab835806b590588b4793/html5/thumbnails/50.jpg)
EXAMPLES DESCRIPTIVE, ORDERED NAVIGATIONKIEFER SWIMWEAR