Ux Design In 60 Seconds
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
Navigation#
- 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
Site Search#
- Top right
- smaller text entry field === shorter queries
- Search results page should repeat search term: ‘Search Results for “<
>”’
search result item:
Link text…description…url
Add images for share
Links#
- 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 (especially 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.