How to Create User-Focused Webpages
These are the main points of Steve Krug’s 2013 book: Don’t Make Me Think: A Commonsense Approach to Usability. It's a great read about learning how to put the user first in design and content creation.
FIRST, MOST IMPORTANT RULE
Don’t make the user think. If you remember nothing else, remember this. Users spend seconds on a page. Need to make things obvious and easy to use — especially call to action buttons.
REIN IN YOUR DESIRE TO BE A CREATIVE GENIUS.
“We’re thinking great literature while the user is thinking ‘billboard going by at 60 mph.’” We want to showcase how talented we are, but the user doesn’t care. They just want to get to what they’re looking for.
USER HAS ONLY SO MUCH GOODWILL.
What diminishes goodwill:
- Hiding details
- Asking for unnecessary information
- Not specifiying format requirements (adding dashes in phone numbers, soc sec nos. etc.)
- Cluttering a page with graphics and images that deter the user's attention away from the main content
What increases goodwill:
- Making it obvious and easy
- Answering my questions
- Saving my steps
- Tell me what I want to know
- Make pages printer friendly
- Help me recover from errors
FACTS OF LIFE ON WEB USAGE
- We scan. We don’t read pages. Want to find that button we’re looking for: to buy, contact, learn more…
- We satisfice. We don’t make optimal choices. We pick the first reasonable option, and then if it doesn’t work, we hit the back button. No biggie.
- We muddle through. We don’t figure out how things work. We click, back up, click again.
DESIGNING FOR SCANNING
- Take advantage of conventions. Innovate when you know you have a better idea. Otherwise, use conventional designs -- like button styles, scroll bar, navigation menu on top, etc. Users know the conventional styles. Eliminates confusion. Be consistent, but clarity trumps consistency.
- Create effective visual hierarchies.
- Prominence — most important things are bigger
- Grouping — like things go together
- Nesting — subsets for each section
- Break up pages into clearly defined areas.
- Make it obvious what’s clickable.
- Think about buttons — shape, location and formatting.
- Think about touchscreens and how touchscreen users don’t use cursors (cursors normally change to hand when something is linked).
- Don’t use same color for links and non-clickable heds.
- Eliminate distractions. Start off thinking that everything on the page is noise, and keep only the things that are contributing to your goal.
- Make content scannable.
- Use lots of thoughtfully-written headings to break up copy.
- Short grafs
- Use bulleted lists.
- Bold key terms.
Miscellaneous
- Number of clicks. There’s no set rule about the optimal number of times to make a user click. It’s OK to make them click more as long as they are confident about where they’re going. To make them confident, you need clearly worded links.
-
Keep mobile in mind. No cursor, no hover, no clue. Same for touch screens.
DESIGNING NAVIGATION
- Purposes of navigation
- Tells us what’s here.
- Tells us how to use the site.
- Gives us confidence in the ppl who built it. Make a good first impression.
- Following conventions is important. Helps user know where to find stuff. So it’s important to make navigation on pages across your site consistent.
- Persistent navigation — the navigation elements that are on every page (except forms). Helps user know they’re still in same site. Only have to learn it once.
- Show navigation for all potential levels of the site, not just the top pages. People spend time on those lower pages, too. This is important because people need to know where they are on the site and be confident while navigating.
- Name every page. It should match the link, what the user clicked to get there.
- Show me where I am. Highlight where I am in the nav bar. Make it ital., bold, etc.
- Every page needs to orient them to where they are on the site. They may not enter site thru home page, but still will go there to figure out more about the site and see what else you offer.
Exercise to check on the usability of your page.
Think about being abducted and dropped into the middle of a website. Print out a page and squint at it, try to find:
- Site id
- Page name
- Major sections
- Local navigation (what are my options)
- You are here indicators (where am I in the scheme of things)
- Search function