Is this clickable? – Change how you look at the web – Don't make me think!
Is this clickable? – Change how you look at the web – Don't make me think!
0 0
Is-this-clickable
IS this clickable presentationOn Github colincalnan / Is-this-clickable
Is this clickable?
Change how you look at the web
Colin Calnan / @colincalnan / colin.calnan@gmail.com
Introduction. Colin - Tech Manager @ Raised Eyebrow - Over 10 years working on the web. Masters Degree in Design and Digital Media - Built > 100 websites. Work mostly in Drupal and WordPress. NEXT: Here's a question a lot of people ask...."What's the most important thing I should do if I want to make sure my Web site is easy to use?"
There are many right and wrong answers to this question. It all depends on which department answers it. Everyone has their agenda and angle. There's a popular idea that you hear a lot....Nothing should be ever more than 2 clicks away.
This has merit and when you think about it makes sense, but it's not necessarily the most important thing to achieve. Trying to keep everything within 2 clicks could be difficult. Its a good benchmark. There is however a much broader strokes idea that is easier to understand and implement.....Steve Krug condensed the answer into one short sentence
Don't make me think!
He actually wrote a book on it. A lot of which inspired this talk and some of the content I use for part of these. What does it mean. Talk about Usability and UX Design and Don Norman.Applied to everyday items
Applied to scary things
Visual Perception is very important. People’s eyes and brains are wired to detect certain kinds of visual properties, like color, size, orientation, and movement. We can leverage these visual properties to make graphic elements pop out from what surrounds them. Three Mile Island Nuclear disaster. Misunderstanding or not seeing alerts and read outs.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's but this requires thinking. It's always best to go for the more obvious.
Simple links & buttons
Another needless source of question marks over people’s heads is links and buttons that aren’t obviously clickable. A user should never have to devote a millisecond of thought to whether things are clickable—or not.Reducing the need to think
Obvious Self evident Self explanatory So how does this apply to webpages. The goal is not make the visitor to the website think about how to use the site. How is this achieved.How Obvious?
Obvious
Can anyone tell me what this website is for?Self Evident
Self evident enough that if you're next door neighbour looked at your home page they would say...
"Oh, it's a _ _ _".
"And that's a __" not "Hmm, where should I start", or "Can I click on that". You shouldn't have to think about how to use it, you should just have to think about the content.Self Explanatory
- Navigation and menu links are clear, requiring no explanation or additional thought.
- Page titles are concise and clearly identify the page's topic.
- Links are obviously decorated and there is no need to instruct visitors to 'click here'.
- Calls-to-action and buttons are easily distinguished.
The blindfold drop test
If 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
Choose a page anywhere in a site at random, and print a screenshot of it. Hold it at arm's length or squint so you can't really study it closely. As quickly as possible, try to find and circle each of the following items. (You won’t find all of the items on every page.)Try the test yourself
Find the following areas on this page:
Site ID Page name Sections & Subsections Local Navigation "Where am I" indicatorsExample
Creating Usable Navigation
- About 60% of the time, people cannot find the information they're seeking on a website.
- Approximately 50% of potential sales are lost because users can't find information they're looking for.
Put navigation in a standard place
People expect navigation to be at the top of the page, that's where it should be. Don't make them think.No more than 7 items in main menu
Limit the number of web pages in the navigation menu to a maximum of 7 pages. Why seven? Short-term memory only holds seven items. If you have eight tabs in your navigation menu, visitors may overlook important information.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
These say nothing about your business or what you do. Users are looking for concise and specific terms that look familiar. Think about what your users are looking for, and what words would resonate with them. Instead of using a generic label like “Our Services” we used “Marketing Solutions”. Instead of using a generic label like “About Us”, we used “What is BcHydro.Order is important
Items that appear at thebeginning & end of a list are most effective
Items the appear at the beginning and end of a list are most effective. So put your most important items at the beginning of the navigation and the least important items in the middle. “Contact” should be the last item on the list, putting it at the far right in top-level horizontal navigation, a standard location.Creating Nice Links
"Click" Puts Too Much Focus On Mouse Mechanics
Credit: smashingmagazine.com
Using the word “click” on your links takes the user’s attention away from the interface and on to their mouse. Users know what a link is and how to use a mouse. Calling attention to the mechanics is unnecessary and diminishes their experience. Instead of focusing them on the interface and its content, “Click here” diverts their attention to themselves and their mouse"Here" Conceals What Users Are Clicking
Credit: smashingmagazine.com
Some links use the word “here” instead of “click.” The problem with using “here” in a link is that it conceals what the user is clicking. The text around the link might explain what they’re clicking, but when the user reads the link itself they won’t have a clue. This means that the user has to read the text all around the link to understand the context of the link, thus impeding them from taking the quick and short route of clicking the link directly. If there’s a lot of text, this could slow the user down a lot.Multiple "Here" Links Confuse Even More
Credit: smashingmagazine.com
Not only that, but if multiple links say “here,” “here” and “here,” the user has to go through the trouble of differentiating between each link, opening each one to see how it’s different. And if the user wants to return to a particular source, they have to remember which “here” it belongs to.Phrasing Links
Link to Nouns
Credit: smashingmagazine.com
Instead of saying “click here,” it’s probably better to make concrete and proper nouns in a sentence the link anchors. Concrete nouns are best because they are more immediate and vidid and give users a better idea of what they will get when they click through. Nouns enable the user to easily scan the link anchor and quickly grasp what they’re clicking to without having to read the entire sentence or paragraph.Phrasing Links
End on a link
Credit: smashingmagazine.com
You might want to try to structure your sentences so that the link anchors fall at the end. This will make links easier to spot because users will see each one as soon as they finish reading the sentence. Thus, they will be able to take action immediately, rather than having to go back and hunt for the link in the middle of the sentence.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 Result
When driving in Vancouver, you can devote less energy and attention to dealing with where you are and more to traffic and pedestrians.
Page names are the street signs of the Web.
When things are going well we may not notice page names at 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 page name effortlessly so we can get our bearings.
Just as with street signs, when things are going well I may not notice page names at all. But as soon as I start to sense that I may not be headed in the right direction, I need to be able to spot the page name effortlessly so I can get my bearings.Every page needs a name
Just as every corner should have a street sign, every page should have a name.The name should match what you clicked
Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug Even though nobody ever mentions it, every site makes an implicit social contract with its visitors: The name of the page will match the words I clicked to get there. In other words, if I click on a link or button that says “Hot mashed potatoes,” the site will take me to a page named “Hot mashed potatoes.” It may seem trivial, but it’s actually a crucial agreement. Each time a site violates it, I’m forced to think, even if only for milliseconds, “Why are those two things different?” And if there’s a major discrepancy between the link name and the page name or a lot of minor discrepancies, my trust in the site— and the competence of the people who publish it—will be diminished."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 Content
Why?
We search for keywords, read in a non-linear fashion. We skip around instead of reading it from top to bottom.
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 and phrases.
- Avoid long paragraphs and sentences.
Test your content
read-able.com
The Readability Test Tool 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.
Use Headings to break up content
Internet readers inspect webpages in blocks and sections, or what is called "block reading." - Web content management expert Gerry McGovern That is, when we look at a webpage, we tend to see it not as a whole, but rather as compartmentalized chunks of information. We tend to read in blocks, going directly to items that seem to match what we're actively looking for.F-shaped Pattern
Credit: http://mashable.com/ Another study by Nielsen revealed that swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.Break into Blocks
Credit: http://mashable.com To accommodate these reading patterns break up long articles into sections so that users can easily skim down the page.Use the Inverted Pyramid
Credit: mashable.com Use the inverted pyramid writing style to place important information at the top of your articles.Use the Inverted Pyramid
Credit: ontentmarketinginstitute.com Notice how it's related to the F-Shaped pattern revealed in eye tracking survey.Use Bulleted Lists & Text Formatting
Users fixate longer on bulleted lists and text formatting (such as bolding and italics)
These text-styling tools can garner attention because of their distinctive appearance as well as help speed up reading by way of breaking down information into discrete parts and highlighting important keywords and phrases.Examples
Smith Bros. - Descriptive, Concise Navigation
Navigation on the Smith Brothers site is descriptive and concise. Just four items, starting with the first and second most important services and ending with a contact link.Examples
Kiefer Swimwear - Descriptive, Ordered navigation
The Kiefer site has a huge catalog, but the categories are available as main navigation throughout the site. The most important items to visitors (swimwear and swim gear) are listed first. An important item for Kiefer (sale) is listed last. Less popular categories are in the middle.THE END
by Colin Calnan @colincalnan / colin.calnan@gmail.com / ca.linkedin.com/in/colincalnan