User Experience (UX) Design in 60 Seconds

Overview

  • What is the most important thing to you?
  • Who is the site for? Persona the site is built for (Focus on a single user)

To see user goals look at User Search terms

Idea is to show user what page is about clearly and quickly

What makes users leave? - Things stopping user finding what they are looking for

  • Don’t use non-sensical / technical names in navigation
  • Don’t use technical language
  • Content must make sense to user, not you

Simple design

  • all elements must help tell the story (if not get rid of them)
  • must be similar to other sites on the net
  • Using elements that major sites do, avoiding what they avoid

  • Images should explain content

Consistent design

  • expected action happen eg. when user clicks a link the user knows what will happen (not indecision like could be dialog, modal etc.)
  • Make users comfortable

Show via navigation where they are in the site breadcrumbs

Type of navigation:

  • Task based (Analyse, Watch, Buy, )
  • Category based (Charts, Watchlist, Portfolio)
  • User based: (Business user, home user)
  • Popularity, Alphabetical, Time, Promotion [Secondary Menu Structure]
  • 7-9 menu items is best

sitemap can sometimes be placed in the footer of every page instead of a seperate page

  • Top right
  • smaller text entry field === shorter queries
  • Search results page should repeat search term: ‘Search Results for “«Search Term»”’

search result item: Link text…description…url

Add images for share

  • Try keep links as standard as possible blue and underlined
  • sometimes on hover underline works
  • visited links should change colour
  • select cursor (hand cursor) is good

“People tend to move through screens from top left to bottom right”, do put important elements on that access

Page Title

  • Title should lead with the most important information
  • Be unique for every page (reverse breadcrumb)
  • Use “pipe” to seperate

lots of content how to display: - scrolling - sequential - like tutorial or steps + need pagination (print needs pdf or single page) - sometimes high level overview is good - splitting

Layout

These days scrolling in common

Put summary of pages content on first paragraph load headings and bullet points with information carrying words

Lower literacy readers read every word - so keep it short and simple

25% slower reading from pc than page. Only 20% is read so looking to achieve a goal not be entertained.

  • avoid hype - keep key facts up front and an in depth part
  • Simple text - a study shows that more complexity, shows lower perceived intelligence

Never use more than 3 levels of headings

Writing content

Ordering writing

  • Most news worthy - explains whole story (Start with the conclusion)
  • Important detail
  • General background

Ranking List or levels use numbered List

Otherwise use bullets (unordered list)

'Readers love lists'

Home Page

Home page should clearly say what the site does - how do you support a need your visitors have

site tagline - appears on every page

home page:

  • freshest and most important content
  • No welcome message
  • high level data and what to checkout next

Call to action tell them what to do next

Even if just news stories the home should show new users what you offer

If site has singular focus the site can have a splash screen then only show navigation as you go deeper

Don’t clutter the homepage it should be simple - like research in motion (User should be able to say what site is about in just 5 seconds)

Remember to save searched terms for later analysis

Category and Detail Pages

  • On category pages it is good to make the whole item clickable instead of a Click Here/Read More
  • On hover underline
  • can show related products or articles to build trust
  • sometimes no need for category pages

Campaigns

  • (Keyworded) campaigns should have seperate landing pages
  • Campaigns with different messages need different content
  • Users sometimes want to click on other links before buying (So have secondary focuses)

Detail Page

  • detail pages - in-depth information users are looking for
  • users are looking for facts to make decisions
  • describe factually (no hype, no flowery language)
  • [price + call to action on ecommerce]

The last thing users want to see is useless information: overly complex info + marketing hype this actually loses the writers credibility on the topic Most people can detect marketing hype and that stops them paying attention . be truthful and honest (content they can link to)

Selling: give a showroom or shop experience (high quality photos and videos) + zoom + show relative size + show what product does

Images

Clear, helpful pictures showing what they need

Shoppers: most important is price (twice as important than contact us) Rather show price online than the call us tactic.

Give the user an idea of where you are in the industry (high end, or bulk discount) So customers can qualify themselves

Add differentiator text/images to pricing page (Features, Warranty, Quality)

Make it clear what you want the visitors to do reprocity - if you give something useful to people they are more likely to give something back to you

About Us page

no other page does more (Can I trust you page)

  • email address and phone number
  • can make or break relationship - must show it is trustworthy

Forms

form entry should be as painless as possible make them understand why they are giving info to you

let them use the site a bit first before forcing them to sign up or login People don’t like filling in forms especially when questions aren’t perceived as valuable

Forms should not look daunting

Labels and Inputs

  • More descriptive labels help: Say “Enter a New Password” instead of just Password
  • Labels above or on the side does not matter
  • better to right align (all forms must look the same)
  • Best to have a single column of inputs, sometimes users will miss filling out right hand column
  • All fields with the same length are neat but unhelpful to visitors
  • Different lengths give clues of how much info you expect them to provide
  • Give clue as to which fields are required and which are not (an asterisk)
  • limit options to a list (recollection easier than recall)
  • default selections reduce time to complete the form
  • radio and checkboxes - label must be on right
  • each option on its own line, otherwise it is harder to know which item goes with which label
  • help links are hardly clicked on for the risk of leaving the page (rather put the help text on the form)

Forms Overall

  • No reset button on forms (archaic pain causer)
  • Use a verb instead of submit telling user what is going to happen
  • Eg. Register, Sign up, Request Info

Forms Errors

  • Any error is disheartening to user
  • Put description of error on top of the form for each field
  • ajax validation if possible
  • don’t blame the user
  • turn field border red and describe issue

Let customer use the site even if not activated - point to things to do

Other media:

  • Page load time is still very important (Keep other media small in storage)
  • media should always serve a need and should be specific to the persona
  • it should enhance the experience
  • splash screen just cause impatience
on’t
  • don’t autoplay as it shocks user
  • don’t have media that requires specific plugin / update (users think its a broken site)

decorative elements should not take attention from the site and should match theme

Usage of stock photos

  • Improved trustworthiness on poorly performing sites
  • Decreased trustworthiness on good performing sites

interactive content

  • drag drop and such
  • demonstrate features or give immediate feedback (better if there is a level of entertainment)
  • sometimes the boring old fashioned approach is ok as well (espescially for personas you target)

Downloads

Give a specific page for each download Better for SEO and user if has a short description

Making money / Ads

  • Low-end site - Ads Income
  • High-end site - Sales Income

The more valuable the content the more ads you can give

Valuable content

  • targeted
  • concise
  • timely
  • up-to-date

Useless Content

  • generic
  • long-winded
  • overhyped
  • outdated

Don’t put ADs in your users’ face, put at consistent secondary spots. Maintain key area of page for content.

Brain seems to naturally censor the ad, that is why they use sneaky sponsored content, crazy ads etc. Ads frustrate users by taking them off-task They feel like they have been duped If people get frustrated, they less likely to return to your site Make ads relevant - is the trick/solution

Text ads should be consistent but distinctly different from actual content

3 principles

simple, consistent, standard

simple

content is there for a reason, graphical elements are relevant and not intrusive. They must add value.

consistent

menu, headings and body text work the same way throughout the site. Giving confidence to navigate to new areas.

standard

ensure you site behaves the same as other sites out there. Be kind to user, content should be unique not the way you present layout.

Letting your users find information quicker and more intuitively.

Be mindful of users time, build a reputation as a place for giving users what they need. A trusted site. Users actually will spend more time in the future.

Source

Lynda: Chris Nodder User Experience Fundementals