UX Principle: Quick… Quick!

Blink, 1… 2… 3… 4… 5… Blink. The 5 seconds between your blinks is how long you have to grab the attention of your website users. Your users need to be able to understand where they are, what’s going on and what they need to do… All within 5 seconds.

To meet this challenge, people usually focus on doing all sorts of things to speed up their website, but speeding up your site won’t solve the ‘Quick’ principle. Sure, website page load time is important.  The quicker you can load your site the better.

The quick principle is not so much about speed, but about how quick your users understand what’s going on. For your users to stick around on your site, you need to understand why they’re there and what they’re there for.

But how do you deliver information quickly, in a way that tells people who you are, what you do and why they’re there?

To solve the conundrum of quickness, we need to use 3 UX powertools:

  1. Simplify
  2. Why
  3. Scent

Simplify and Give Them What They Want

Simplifying the words on your page will allow your users to quickly understand what you’re about and also why they’re there. Once they understand these 2 things, they’re engaged and ready to take the next action.

To Simplify isn’t to Dumb Down

Simplifying doesn’t mean you fill your website with easy words. “It’s about elegance and prioritization, not dumbing down” Chip and Dan Heath, Make it Stick

In the book Make it Stick, Chip and Dan Heath recommend finding the core of an idea. This means “stripping an idea down to it’s most critical essence. To get to the core, we’ve got to weed out the superfluous”.

Example: A good example is Mailchimp’s home page. Mailchimp have an amazing email marketing tool. They could introduce their email marketing tool within the intro such as:

“Our industry leading email marketing software allows you to communicate with your customers and you can track everything they do and personalise your messages to drive more engagement and therefore traffic to your website”

But rather than waffle on about how great their software is, Mailchimp communicate value simply and also pepper on the solution to the problem they solve – all within 1 title (beautiful):

“Build Your Brand. Sell More Stuff.”

Mailchimp Homepage 2018

Wow, how quick and easy is that? I’m engaged because that’s what I want to achieve (“Sell more stuff”), now I’m ready to find out how Mailchimp helps me to do that.

Action: Amend the following message by simplifying it to it’s core: “Podio: Project Management and Collaboration Software”. This seems pretty short, but can be simplified to remove the superflous and make it quicker to understand.

Write down how you would simplify before reading an example below.

Example: “Get organised and focus on the task at hand”

Simplification Can be Done Wrong

Sometimes it feels like you have simplified, but your message can still be ambiguous and therefore slow to understand. It’s usually because the message is focused on the thing on offer, rather than the reason your users are there.

Compare Mailchimp to one of their major competitors Campaign Monitor.

Campaign Monitor lead with the message:

“Send Email Your Customers Can’t Ignore.”

Campaign Monitor Home Page

This message is short and simple, but is mediocre in comparison to Mailchimp’s “Build Your Brand. Sell More Stuff”.

You could argue that they have included a “why”, but it’s not very strong. I’d rather sell more stuff, than send emails that my customers can’t ignore (sorry Campaign Monitor).

The wrong message will slow your users down as they begin to start thinking about why they’re there. Using the quick principle reminds us that we need to simplify for speed in understanding and tell them when they’re there.

Once You’ve Simplified, Start with the Why

As Simon Sinek says, “Start With Why inspires people to do the things that inspire them”. So, whilst stripping down our messaging to the core, think about the reason your users are there.

Using the Mailchimp example; the majority of Mailchimp’s customers are people who run ecommerce sites so their priority and their why (reason they’re on the site) is to “Sell More Stuff”.

By the way Checkout Simon Sinek’s famous talk – Start With Why; it will change the way you think forever.

Action: Now go back to the simplified message we used for Podio and add the why:

Simplified example: “Get organised and focus on the task at hand”.

Simplify + Why: “Get organised. Get your best work done”

Once you’ve sped up your message with ‘simplification’ and ‘why’, it’s time to guide your users to the place they want to go, without them even knowing they’re doing it!

Do your Users Know that They’ll Meet Expectation?

If users get a sense of what they expect quickly, they’ll continue with their journey and meet their expectation e.g. finding a product, viewing a property, etc.

Follow your nose

When animals hunt for food, they follow their nose to get to what they want. In UX terms, this is known as information scent. Like good ‘ol Pluto below, he’s picked up the scent of food and predicts he’ll be eating something delicious soon (not sure if caterpillars are delicious).

Pluto Information Foraging

Your users should be able to predict what they will find if they pursue a certain path through a website, otherwise known as information foraging.

Information Foraging

This information foraging theory, explains how users interact with your website using the analogy of animals hunting for food.

A quick understanding of your page is vital so that your users can pick up the trail and further information should be related so that they continue down the path and meet the expected.

Example: If I land on a website selling fine wine, then I expect to find Red Wines quickly, upon finding the red wine category, my next expectation is a catalogue of red wines and I continue down the trail, following my nose until I get the wine I want.

If a website is quick and easy, I should be able to follow my nose to get what I want. However, if the journey is interrupted with the wrong information and it’s sent me down a path I didn’t expect, then I may have to stop and ask for directions.

Information scent refers to the strength of a cue or series of cues which lead to a point within a website – REF: Web User Behaviour Directed by Information Scent – Interaction Design Foundation.

“I Shouldn’t Have to Stop and Ask for Directions”

Once your users are confused and they start questioning where they are, they begin looking for alternate routes (i.e. other websites) to get what they want.

By remembering information scent, we can get users to where they want to be quickly and intuitively (without thinking too much).

Conclusion

  • Keep language simple, not dumbed down but instead plain English that your users will understand
  • Clearly show the value you provide and the problem you’ll fix – start with the why
  • Give your users clear signposts to lead them in the direction toward conversion. Nobody likes feeling lost, so be your users guiding light (a bit like Gandalf in Lord of the Rings)

References:

UX Principle: Involve

Involving real people in your design process will truly show you if your website will really work. As Brenda Laurel put it “A design isn’t finished until somebody is using it.”

Understanding how people use websites, apps or everyday objects is the key to successful design and this understanding is part of the process of UX design.

Involving Real People Results in more Comfortable Design

If it wasn’t for researching how people use things, you’d be very uncomfortable in your seat right now.

Pre-1970s, office chairs may have been aesthetically pleasing, but lacked comfort. Sitting for long periods of time was incredibly bad for your back. The user of the chair could certainly sit down, but the lasting experience was bad.

Sure, it’s not great for your back to be sat down for long periods, but Bill Stumpf (the designer who brought ergonomics to the office) went on a mission to create an office chair that was not only built for comfort and good for your health, but also aesthetically pleasing.

For 10 years Bill Stumpf worked alongside orthopaedic surgeons and cardiovascular specialists to understand the effects of chairs and the seated posture on the body.

Stumpf’s research focused on the following:

  • Consultations with orthopaedic surgeons and cardiovascular specialists to understand the effects of chairs and the seated posture on the body’s circulatory system, muscles and bones.
  • Examination of the human behaviour of sitting – the motions, actions, and posture patterns of people performing various tasks.
  • Exploration of how work chairs can be designed to support a wide range of body heights, weights and shapes effectively.

“For the first time, businesses could provide their workers with seating designed for the way they really sat — not for the way someone thought they should sit. With the Ergon chair, we established the reference point for comfortable, healthful, and visually appealing ergonomic seating.” – Bill Stumpf

So, the office chair you’re sitting in today is most definitely comfortable because it was designed by researching the way people sit.

Understand Your Design Better With User Testing

If involving people in the design of the office chair ensured a comfortable and therefore healthy seat, we should apply the principle of involving people when we design websites.

When designing a website, even if you don’t think your design is ready yet, get someone to test it.

Even if it’s one person testing your design; involve your user early and understand how they do things before your design is developed into a working website.

All too often, designs are launched without user testing.

User testing (or usability testing) is a technique used in UX design to evaluate a website by testing it on users (people).

This is an irreplaceable usability practice, since it gives direct feedback on how real users use your website design.

Case Study:

A 400% Increase in Click-through Rate

The UX team at Pan Macmillan began running UX tests to help the Company find out who its users are and what they want from the site. Pan Macmillan saw the following improvements:

  • Addition of a “Buy” button linking to popular retailers increased click-through rate by 400%
  • Goodreads ratings and reviews were added following feedback by users that this was essential
  • Formatting styles that persistently confused users and could only have been discovered through UX testing, were identified and easily fixed

Read all ‘12 fascinating stats about UX and user testing to help your business case’

Before User Testing Comes Prototyping

Before you run your user test, you’ll need to create a design that people can start using. This can be as simple as a paper prototype, a wireframe or a simple design mocked up in Sketch or Photoshop.

Paper Prototyping

Image from article: How to prototype websites on paper from Creative Bloq – http://www.creativebloq.com/ux/how-prototype-websites-paper-31514246

Creating paper prototypes is a speedy process (much quicker than creating digital prototypes) and is useful in creating useful yet quick designs that you can create within 20 minutes and get them in front of people fast.

Shawn Medero an Interface designer from University of Pennsylvania has this advice on how to run paper prototype testing:

“A paper usability-testing session works much like any other usability-testing session. Begin by selecting a range of testers who represent your expected audience.

Have scenarios ready for the user to perform. Document the testing sessions with video to review the users’ emotional state when using your mocked-up interface.

With paper, you can:

  • Mark on the prototype where a user attempted to “click” or otherwise interact with the interface.
  • Ask users to draw what they expect to happen next.
  • Keep going even if you don’t have access to a testing lab or if computers, networks, or high-tech prototypes don’t work as expected.“

Full article here ‘Paper Prototyping’

Digital Prototyping

Whilst paper may be a quick way to get your design on paper, you do lose out on actual feedback for the design (context).

Jake Knapp, author of Sprint states that paper prototypes are a waste of time.

“When you need to learn about a business or product, the last thing you want is people using their imaginations. You want to get as close as you can to real world observation. If the product doesn’t look real, the customer response won’t be real.”

Get Real World Feedback With a Digital Prototype

With designs created in Sketch or Photoshop you can create real world website designs which allow your users to test the design as if it was live, giving you feedback that’s realistic.

In other words, more accurate feedback…

To take these designs further you can add a layer of interactivity with tools such as UX Pin or Marvel.

Feedback & Change

Remember, even before your prototype is “ready”, get users (people) involved and ask them for feedback on your design.

Use paper prototypes for quick feedback or get more realistic results with digital user testing.

For digital feedback, I recommend a tool called Usability Hub. Usability Hub allows you to upload your designs and run up to 5 different tests:

  1. Five Second Test: Measure the clarity of your design by asking what people recall after viewing it for just five seconds.
  2. Click Test: Click tests help you measure how effective your designs are at letting users accomplish an intended task.
  3. Question Test: Get feedback from real people with incredibly straightforward design surveys.
  4. Navigation Test: Navigation tests let you see how effectively users navigate around your websites and applications.
  5. Preference Test: Preference tests help you to confidently choose between design options by asking users which one they prefer.

Action: To get into user testing, try a preference test. Test an existing web page vs a redesign of the webpage.

Take a screengrab of a web page you’ve designed or find a web page that you think could be improved – this will be version a. Now we need a version b, so we can test which version people prefer.

To create version b, open the screengrab in Sketch (or Photoshop) and make some changes such as colours, fonts and imagery.

Important: Don’t just make the changes for the sake of it, try and change an element (or elements) which you think would improve the usability of the design. Remember, your aim is to improve the design for a better user experience.

For example: if you notice there are huge paragraphs of text that aren’t easy to read, chunk up the text into 2-3 sentences andmake the font slightly larger (if necessary, add titles above the chunks of text to make it more scannable). For tips on this checkout the digestibility principle.

Once you’ve created version b, go to Usability Hub, signup (it’s free) and follow the instructions to run your preference test. Testing with 25 users will cost about $25. The test results usually come in within minutes or at maximum, 1 hour.

Have fun reading the results. Don’t be disheartened if they didn’t prefer the revised design.

The important bit is that you now have a set of results (comments and opinion from real people) to improve the design. Well done! You’ve completed your real test and involved real people in your design process.

Conclusion

Ask people to use your design early and often.

Real people are your users, it’s vital that they’re involved in the design process, otherwise we go back to the pre-1970s of uncomfortable design.

So what are you waiting for? Find out if your design is usable so that you can understand how to make it better. Remember “a design isn’t finished until somebody is using it”.

REF:

 

UX Principle: Digestibility

Summary: Why digestibility helps your users read and take action at the same time.

Imagine trying to eat a whole watermelon at once! Unless you’re a Hippo, that would be impossible. Melons are easier to digest when sliced into bite-size pieces allowing you to digest them properly. The same goes for websites; they’re easier to understand when broken down into bite-size pieces.

In order for people to understand things easily, it’s important that you break down information into small chunks or summaries.

These small chunks and summaries help your website visitors not only understand your message quicker, but they also absorb the information which means they’re more likely to take action.

Tip: Your design should make it easy for the brain to digest information by removing the need for paragraphs of explanations.

Your Users Should Only Need to Scan Content Understand it

When people read online, they scan content to find what they want. Whilst scanning, website users pick out the information they need to make a decision; bounce (to another site) or take action (e.g. buy a product or view internal pages). Summarising content, using key titles and imagery will lead your website visitors to what they want.

Example: Dropbox (see below) breaks up it’s home page into 3 main sections (2 of those sections shown below). Each section has a title, short summary (to backup the title) and a visual of the software. If you just read the titles and view the images, you quickly build an idea of Dropbox and have enough information to signup.

Good UX Example Dropbox

Action: Review a website you’ve worked on recently. Figure out ways in which you can breakdown and summarise the content. A good place to start is the home page – is your headline clear and simple? Are there paragraphs you can break down into shorter sentences.

We Remember the Big Picture Better Than the Detail

Did you know: 50% of your brain power goes to your eyes and processes what you see into information.

As you read this, your brain is interpreting each letter as an image. This makes reading incredibly inefficient when compared to how quickly and easily we can take in information from a picture.

We Process and Take Action at the Same Time

The fact that our brain works this way highlights the importance of digestibility. Easy to digest content allows people to process the information on your site, whilst deciding on the next action to take e.g. buy a product or download an ebook.

Action: Keep a large diagram that explains the big picture or the core message of what you’re doing and use it to determine each major concept or section on your website.

For example: Podio, a project management tool, gives people and businesses task management, meeting scheduling and everything that comes with project management. Take a look at the example below and see how the titles on each section of their home page relate to their “big picture”, in this case project management.

Podio Digestibility Headline Example

Podio highlights terms such as ‘Get your teams working in sync’ and ‘FAST COMMUNICATION’ – messages that are succinct and related to the big picture of project management.

Reader’s Digest – America in Your Pocket

It’s clear that DeWitt Wallace understood and loved the digestibility principle so much that he named his own magazine after it – Reader’s Digest.

Wallace wanted his readers to be able to get as much value from his magazine as possible by giving them interesting and valuable content that they’d actually be able to read in one month.

Here’s Wallace’s ‘big picture; statement:

“Thirty-one articles each month from leading magazines. Each article of enduring value and interest, in condensed and compact form.” DeWitt Wallace, Reader’s Digest 1922

Readers Digest 1922

Wallace had the idea to gather a sampling of articles on many subjects, condensing and rewriting them to combine them into one magazine.

Halving Time, but Not Halving the Value

With its pages half the size of most American magazines, Wallace condensed information into understandable summaries; hence the nickname “America in your pocket”.

This curation of content and the way it was broken down allowed it’s readers to understand more, by giving them less.

Reader’s Digest become the largest paid circulation magazine in the world because it was informative and easy to digest making it usable and useful.

Exercise: Take a screengrab of the next website you use, cut the depth or width of the page by half. Take the content (words, images, etc) and condense them on the page, but don’t lose any of the actions such as buttons or links.

Remember to consider the big picture or the core concept that the website is trying to communicate to ensure you’re still conveying the right message.

Conclusion: Big Picture + Summary = Digest

With attention spans getting shorter and websites loading at the speed of light, ‘digestibility’ is the key to communicating your message.

Break down paragraphs into sentences, use imagery and titles that are focused around your core message.

When designing a site with digestibility in mind, users will have an easier time understanding what you do, get more value from your content and therefore are more likely to take action.

Remember, your website is a delicious watermelon and your users are ready to eat.

References: