UX Guidelines

Table of contents What is User Experience (UX)? UX case-studies Amazon Airbnb Evernote ESPN UX Statistics UX Principles Aesthetic Usability Effect Hick’s Law Law of Common Region Occam’s Razor Peak-End Rule Von Restorff effect UX Best Practices Websites Are Scanned, Not Read​ Users Prefer Clarity and Simplicity​ Visual Hierarchy Avoid Long Block of Text Plan Layout for Desktop and Mobile​ Narrative design Aesthetic matters Quick UX Checklist What is User Experience (UX)? UX (User Experience) is people’s perceptions and responses resulting from the use of a service. Put simply, it’s how easy and enjoyable it is for consumers to use a ...

Words
5 min read
Print
User Experience

What is User Experience (UX)?

UX (User Experience) is people’s perceptions and responses resulting from the use of a service. Put simply, it’s how easy and enjoyable it is for consumers to use a certain website. It combines aspects of interaction design, information architecture, visual design, usability and psychology.

UX case-studies

UX has a major impact on Conversion Rate. Being aware how UX can impact this metric, ensures that adequate attention will be focused to this aspect of a website.

Here are some renowned case-studies:

Amazon

Amazon increased sales by $300 million after changing their CTA text.
The story of the $300 million button made its creator Jared M. Spool a UX legend. The simple act of changing a button eliminated major user frustration with having to register in order to complete their purchase. Registration was made optional, and the primary CTA was turned from “register” into a much more welcomed “continue”.

(Source: UIE)

Airbnb

Airbnb attributes UX for taking them to being valued at $10 million.
According to the company’s co-founder Joe Gebbia, after realizing listings with bad quality photographs were performing poorly, the company took a risk and hired a professional photographer to reshoot the apartments. Weekly profits doubled, proving the importance of UX once again.

(Source: First Round Review)

Evernote

Evernote increased user retention by 15% after launching intuitive, helpful features.
The increase in user retention happened across all devices and was the result of some well-planned UX design.

(Source: UserTesting)

ESPN

ESPN’s revenue increased by 35% after a homepage redesign.
The company reached substantial gains by listening to their users’ suggestions and being receptive to feedback.

(Source: Inside Design) 

UX Statistics

There has been much testing and research around UX, here are some findings:

  • 88% of online shoppers wouldn’t return to a website after having a bad user experience.
    (Source: Amazon Web Services)
  • Conversions can grow up to 400% by applying intentional user experience.
    (Source: Forrester)
  • 75% of people form their judgment on a website purely on its aesthetics.
    (Source: University of Surrey)
  • Visual data is processed 60,000 times faster by the brain than text.
    (Source: Mainstreethost)
  • 86% of visitors want to see more information about a company’s products and services on its website.
    (Source: KoMarketing)
  • 85% of UX issues can be detected by performing a A/B usability test on a group of five users inside the company.
    (Source: MeasuringU)

UX Principles

Knowing the main UX principles is very helpful to acquire the right mindset during UX optimizations. Here are the most important to consider in creating web pages:

Aesthetic Usability Effect

UX Aesthetic
UX Aesthetic

Users often perceive aesthetically pleasing design as design that’s more usable.

Masaaki Kurosu and Kaori Kashimura

Takeaway: Aesthetically pleasing design creates a positive response in people’s brains and leads them to perceive the design easier to use.

Hick’s Law

UX - Hicks Law
UX – Hicks Law

The time it takes to make a decision increases with the number and complexity of choices.

William Edmund Hick and Ray Hyman

Takeaway: Simplify choices for the user by highlighting recommended options.

Law of Common Region

UX - Common Region
UX – Common Region

Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

Gestalt Theory of Perception

Takeaway: Adding a border or a background color around an component or group of elements is an easy way to create common regions that can be easily organized by the human eye.

Occam’s Razor

UX - Occam's Razor
UX – Occam’s Razor

Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.

William of Ockham

Takeaway: Analyze each element and remove as many as possible, without compromising the overall function.

Peak-End Rule

UX - Peak End Rule
UX – Peak End Rule

People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.

Kahneman, Fredrickson, Schreiber, Redelmeier

Takeaway: Pay close attention to the most intense points and the final moments of the user journey and design to make those moments even better.

Von Restorff effect

UX - Von Restoff
UX – Von Restoff

When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Hedwig von Restorff

Takeaway: Make important information or key actions such as CTAs visually distinctive.

UX Best Practices

Websites Are Scanned, Not Read​

Reading Pattern Eyetracking
Reading Pattern Eyetracking

It is a must that your website is scannable because people do not read websites, they scan them. Most will scan the content for something that strikes them and then they switch to reading when they want to find out more.

Users Prefer Clarity and Simplicity​

UX - Simplicity
UX – Simplicity

In a half of a second, users evaluate the design of a website, so you need to decide what you want users to do and make it apparent. Visually focus attention on the main button versus a bunch of texts on the home page. Also providing a clear, consistent design is simpler for users.

Visual Hierarchy

UX - Visual Hierarchy
UX – Visual Hierarchy

When putting the most important elements on the interface, highlight them so that users focus on them. In design, there are a lot of ways in which to highlight elements, from colors to make it larger than anything else on the screen.

Avoid Long Block of Text

UX - Text
UX – Text

Write concisely. The best UX writing is simple and concise; users should be able to read the copy and quickly know where to go and what to do next. Writing concise copy gets to the point. The rule of thumb for web typography is to write no more than nine words per line. If a line is too long, it is harder for their eyes to move on. And if a paragraph is not important, you should get rid of it.

Plan Layout for Desktop and Mobile​

UX - Desktop and Mobile
UX – Desktop and Mobile

As best practice the most attention-grabbing headlines and information should be on the top of the page above the fold both for mobile and desktop.The position of the CTA (Call To Actions) depends on the stage of the user journey:

  • Certain visitors bottom of the funnel: are likely to react to the call to action as they have probably made their mind up before visiting the site, placing a call to action above the fold is generally best practice.
    Example: Paid Campaigns Landing Pages
  • Uncertain visitors middle of the funnel: have some knowledge of the product or service, placing the call to action above the fold is generally good, although the informative content is also important.
    Example: Product Pages
  • New visitors top of the funnel: still don’t know the service, placing the call to action above the fold can sometimes appear pushy. It’s better to have in-depth USPs of why your call to action should be acted upon.
    Example: Homepage

Narrative design

Zendesk F-Z Patterns
Zendesk F-Z Patterns

Another important user experience principle is narrative design, or telling a story with design. The main storytelling elements are time and rhythm. Time is the pacing the design adopts – for example, how slowly or quickly the useful information is unveiled. Similarly, rhythm is the pattern of unfolding the content. at your narrative adopts. Slow pace can bore users, not giving the information to hold their interest. On the other side, a fast pace can confuse them. Therefore, pace and rhythm need to be balanced in the content progression.

Aesthetic matters

UX - Airbnb
UX – Airbnb

People tend to react positively to beautiful things, and websites are no different. The simple fact that a site is aesthetically pleasing will give the impression of professional polish. Making the experience of the website memorable is sometimes more important than what the website says. Users often forget the data and salient points of content, but they will remember how it made them feel. It works also in advertisements. Graphics, layout, text, and interactive elements work in synergy to present the user with an experience, not just present them with information.

Quick UX Checklist

These are the basic UX best practices derived from the UX principles and User Research:

  • Above the fold: Provide the user a concise overview of the service above the fold in the header
  • Layout: Use bullet lists, headers, components, colors and images to create a clear and easy to read layout
  • Images: Use the images to convey an emotional message, especially for hero-images on main pages or visuals for campaigns
  • Copy: Focus on readability with distinguished text blocks and break up text with visual variety. Short paragraphs allow the mind to breathe
  • CTA: Highlight the CTAs, but place them only where relevant, according to the stage of the user journey (top/bottom of the funnel), and do not use too many on the same page (max 2-3)
  • Useful: Content should fulfill a need
  • Trust: Branding must convey trust trough facts, rather than advertisement slogans
  • Emotional: Design elements bring about emotion
  • Usable: Website must be easy to use
  • Meet expectations: Maintain congruency between anchors and target pages, user must find what they expect by clicking on a link
  • User journey: Be sure to mark the user context, if top-of-the funnel to provide brad and useful information, or bottom-of the-funnel to show only the essential information to convert
  • A/B Tests: Do usability A/B testing during the UX optimization, one tweak at a time to isolate the impact of each change
  • KPI Monitoring: Monitor weekly the CTR (Click Through Rate) not the number of Clicks on CTAs in Analytics. The number of clicks varies in proportion to the visits, while CTR trends show the effectiveness of the UX tweaks.