From the Web and UX Design Accidental Encyclopedia – BUY IT HERE
For a while, it was very popular to create “personas” – studies of the type of users that might use your website and what their motivation could be. This trend is now being rejected by many as being just that – “made up people” with no footing in the real world. Here’s my take on what a real person may look like that visits your site, and often their motivations may have nothing to do with you, your site or even the product you are selling. Let’s meet Frank, Kelly, Dan, Jerome and Joyce.
Think of a website as a holistic experience. It’s not code, it’s not images, and it’s not text. It’s not graphic elements or clever transitions and multimedia. It’s not the sum of those things, but it’s more. It is also people, it’s products, it’s computer speeds, it’s many large and small pieces that make up a total experience. A website is more than just a book or a TV show. It’s interactive, it responds to you – it does things for you, it affects you emotionally. It’s unique to you.
So let’s take a look then at a website journey from a holistic stand point.
The user experience begins BEFORE the user even turns on his computer and ends AFTER the user turns off his computer after his second or third return visit to the site. Here’s how.
First, let’s make a user journey to your site. You own a site that sells tickets to a select group of theaters in upstate New York. You have been smart and managed to get the business to sell these tickets but there is competition, so to make money, you need to do it better than the competition to get the repeat business.
That is your goal.
The journey has already started. You have a business model all worked out. A business model could be one of the several things. For example, it could be:
• Freemium, (for example Dropbox) where you get some services free, but are enticed to upgrade, or there is advertising.
• Collaborative Consumption, examples are Air BnB and Uber
• Self-service and transactional (Turbo Tax)
• Custom made/bespoke products and services.
In other words, is the product you are selling sold in the most optimum way on your site?
Let’s look at the visitors to your site, who are they are what their needs are? Each persona will follow a segment of this holistic user journey, let’s see how they interact with your site.
Frank heads towards his computer to turn it on, but are you ready? Have you checked how fast your site is? Is the content up to date? Are there any spelling mistakes (people lose confidence in a site if they think the owner is sloppy). Is the domain name up to date and is it easy to remember?
Frank turns on his computer, starts up his browser, and searches for tickets at the local theater. The computer is broken, so instead, he looks at your site on his Smartphone. Is your site responsive?
Frank gets frustrated with scrolling and decides to call the box office instead. Never mind.
She is young and tech savvy. She has optimized her computer / smartphone /tablet experience. She loves shopping (as you can see) and knows what she wants. She has seen many websites, she knows the good from the bad. She highly values recommendations from friends highly and you got lucky, a friend commented that they like your site on Facebook, so she’s going to check it out. People are influenced by what others say. People are influenced by what others says, a concept known as Social Validation. Reviews on your website are a great motivator. A good reference for these concepts is the book by Susan M. Weinschenk, Neuro Web Design: What Makes Them Click?
Kelly has expectations and judges the site on its look and feel. If the design is not contemporary, then her confidence in the site will drop. People learn to trust a site through design. They make quick trust decisions based on design, and only then on content and credibility. Branding is a useful tool in maintaining loyalty and trust, and although you may not have a brand yet, even the idea that it is branded helps build trust.
Also, Kelly, like many of us, is susceptible to the “Attractiveness bias” (Dion et al., 1972; Miller, 1970) – the assumption that attractive people are more moral, intelligent and sociable. That’s why on the websites, the images of the people at call centers or in the chat box, are very happy attractive people. Unlike people at the call centers I’ve been to.
This might not have been a deal breaker for her, but she has lost money before on unprofessional sites, so you need to keep her confidence up. Kelly is easily distracted. She sees a photo of a scene from one of the plays and the leading lady is wearing a pair of shoes that Kelly likes, so she starts to drift off and see if she can find them at Zappos. You need to keep her focused. If she leaves your site chances are she forget you and will never return.
Let’s talk about memory.
Short-term memory is limited, don’t make people remember stuff. Kelly will not remember anything about a page she left ten minutes ago. In fact, brain scans have shown that most people only remember 4 things at a time. Try remembering a phone number someone calls out to you. So if possible, Kelly needs help with tools like calendars and notes. Keeping Kelly active will keep her engaged.
Activity stimulates memory – make people do something, if possible repeatedly. An idea for the ticket site is to engage the user with newsletters about upcoming shows. This keeps reminding them about your site and demonstrates engagement on your part. Help Kelly’s memory by showing her stuff, visual recognition is easier to recall than written text. Distraction reduces memory, clutter, and noise reduce focus, and this is incredibly important. Remove any distractions, for example, consider if third party advertising gives a high enough return to compensate for the distraction. One good tip to reduce clutter is progressive disclosure – deliver options only when needed. Like most people, Kelly processes information in bite-sized chunks, so deliver information in context and in a structured way. Throwing a ton of links onto a page may look cool, but it will only clutter the experience. Less is more.
If we want to get technical, Hermann Ebbinghaus in 1886 created a “forgetting curve” which showed how quickly we forget (after 1 day it’s down to 40%, and after a month it’s gone…). Also, people do not selectively forget, forgetting is an unconscious act. People will forget so tips and references are important. The user’s attention may drift – if they start wandering, help them get back to where you want them to be (e.g. breadcrumbs). People love stories. – makes it less dry, helps with concepts
Like everyone, Kelly’s attention is selective – That is, she focuses on one thing, but her unconscious looks for distractions. People filter information – they may not see what you want them to see, so don’t assume they do. Use design to attract attention to the right places. Attention span is only 7 to 10 minutes, if you need longer attention, introduce something novel. Keep videos to less than 10 minutes. (My apologies to Kelly if she seems flaky, but we are all easily distracted.) This is not even limited to the content you put on your site, but phone calls, the dog barking, a song on the radio. In this hyper-media age, you need to have a very clear and concise message. You have done a good job, on every page, it is clear what the site does and how it can help the visitor do what they want – buy tickets.
Kelly rocks, she gets to the right page to buy tickets, but then calls her friend Trish to ask if she wants to go as well, and you lose her. She’ll be back, and fortunately, you captured some of her information in a cookie so she doesn’t have to work as hard to get to her goal.
Never mind, here’s Dan
Dan is taking his girlfriend out so he needs to buy the tickets. Let’s talk about Dan’s motivation. He wants to take his girlfriend out, but he needs to work within a budget. He likes your site, but he has had some bad experiences with websites, and he is a lawyer. He is very, very detailed orientated, and spends all day unraveling complex ambiguities from intricate legal documents. But now it’s party time so let’s help get Dan motivated. People are more motivated the closer they are to a goal, so let’s get Dan to the box office as quick as possible. Let’s consider giving Dan with a “reward program”, like every tenth ticket he buys he gets a discount.
Information is a drug, it actually releases dopamine –finding good information stimulates more so let’s keep Dan high. People are motivated by progress, mastery, and control, and Dan is no exception. Making him feel in control gives him confidence in using your site. Clear language on the site placates the lawyer in him.
Like most people, Dan is lazy, and he will look for short cuts to get to where he wants. This is not a bad thing, as long as you control what those short cuts are and that it leads him to where you want him to go. Dan loves autonomy – so let him do things, offer self-service as much as possible. Dan is a smart guy, and he likes choice, but too much choice is paralyzing. 3-4 options are best at any given moment. Dan expects you to be nice Online, he expects you to follow the social rules. He is not only concerned about politeness, but also about sneaky tricks to get him to do stuff. For example, he signs up for a newsletter but inadvertently agrees to third-party usage of this email address. That is a big no-no to Dan and he will leave and never return if he sees that. Time is as important as money to many people, and certainly to Dan. There is even a law, called Hick’s Law – which states that more options results in more time to decision. So don’t make Dan think. (See the excellent book by Steve Krug – “Don’t make me think”), but definitely don’t make him wait. People make mistakes, and the site should anticipate this. Dan considers himself smart, so if the site gives error messages, make sure you do it well and in a helpful way. Your error messages should have a tone of forgiveness and helpfulness. See the section “A State of Error”in this book. Dan has become distracted with some legalese about the cancellation policy, and goes off to find out if that is market conform or even legal. Pity, but we still have Jerome.
Jerome is a graphic designer. He grew up in the Bahamas but now works for a design agency in Manhattan. Like most people his age, he is tech-savvy and spends most of his day either on a laptop, a desktop, a tablet or a smartphone. He is very much visually inclined, making his decisions from what he sees more from what he reads. This has its draw backs. The brain is easily deceived, as it sees what it’s trained to see, not what is there. Also, his cultural background, his personal knowledge, familiarity (for example branding), and other expectations will influence him.
For Jerome, legibility is the whole enchilada. Even though he is visually oriented, for a graphic designer, legibility is basically his job. He sees text not as words but as pictures. They are graphic elements that adorn and illustrate a page. He is sensitive to colors, so avoid clashing colors, especially with colored text on a colored background. Jerome, as a designer, has taken classes in universal design (design for people with special needs). The introduction of the internet has been liberating for many people, who can make up to 20% of your market. Color also has meaning and an emotional value, which can change from culture to culture. When you want to reach a global market, ethnographic aspects are an important consideration. A great resource to check this out is http://www.informationisbeautiful.net/visualizations/colours-in-cultures/ – which shows examples of the meaning of colors from different cultures.
As a designer, Jerome is aware of patterns that are easily recognized, so icons can work to help comprehension.
Also, faces are readily recognized and understood more so than any other shape. What the emotion is, and what that person is looking at. In the design of your site, people will scan, and scan based on past experiences and expectations. Develop a pattern of reading that makes sense, instead of bouncing all over the page. Keep it Consistent.
In design, people assume that things close together belong together. Also, things aligned with each other, or have the same color are related in some way. These are the basic tools of a graphic designer to bring logic and order to a design. Use this on your site to your advantage. Make clusters of logical elements – like menus, forms, images and text.
“Affordances” – people need cues to understand how objects function – for example a 3D shape or a button. If a button looks like something you click on, then people will click on it. If it looks like something else (for example just an image), people may not get that this is an (important) link (see James Gibson: “The theory of Affordances”).
For Jerome, and for many people, reading on a screen is difficult – so break it up, use bullets, short paragraphs, and pictures. Short sentences make for a longer reading experience but are far easier to digest. Make each sentence about 100 characters maximum. It’s hard for a reader on a screen to keep the eye following a long sentence, the eye might slip down to the sentence underneath and then the text will become confusing. Don’t make a line of text more than fifty words. Don’t put blurb and “content-free content” on your site. Dare I keep saying it more and more – Less is more!
Jerome likes the site, gets to the page where he can see the reviews of the plays, but the small white font on the dark blue background is not really easy to read. No problem, Jerome decides to print out the review from the handy pdf option offered by the site. He prints the reviews out of the plays he is interested in, stuffs the paper into his briefcase and goes home. He is gone from the site. Pity, no sale. Good job you put your sites details on every printout, but still – he is gone.
Never mind, here is Joyce.
Joyce is a former school teacher and community volunteer and beloved by many. She is intimidated by computers and assumes that everything she does on the computer will create a mistake, that she is “doing something stupid.”. However, she bites the bullet and is grateful for the convenience it gives her now her husband is dead and she is semi-house bound with a bad hip. Joyce is a potential repeat customer. If it’s an easy and uncomplicated experience for her, she will adopt it into her comfort zone and become a loyal customer. Joyce, like many people, scans a web site. She thinks because it’s a computer she has to do it fast, and it makes her flustered. This habit of scanning, where we choose the first reasonable option, was first described as “Satisficing, between satisfying and sufficing” by the economist Herbert Simon – “Models of Man, Social and Rational” (Wiley, 1957).
Joyce, for her own reasons, is, therefore, opportunistic, clicking madly on the links that will get to where she wants to be. To help her scan your site , remember SSCC – simple, structured, clear and concise, will teach her how to read your site and have confidence. Unlike Jerome, Joyce is a reader. She loves reading. For her, clear, well-written headings, sub-headings, text, and even labels, help her enormously. Use the layout of your site to assist the reading flow, lay-out to support scanning – short paragraphs, sub headings – and bulleted lists are king. Always highlight key terms that remind her why she is on the site. With Joyce in mind, when your site is nearly ready, go back and have an Omit-fest. Omit needless words. Omit marketing blah blah, Omit complicated instructions. Omit content you put in just because you wanted to have less white on the page. This is often called Ockham’s Razor (or Occam’s Razor). Ockham’s Razor, which states if you cut away all useless or irrelevant information, in the end you will have the purest, most logical form. Another way to look at it is the 80/20 rule – Pareto’s Principle. This states that most of the value in something – not just websites, but for example the way you work at the office –is where you spend 20% of your time on. 80% is just superfluous. Try and cut away that 80% and exploit that 20%. If you look at your website, try and see if you can cut away 80% of the site to make it more lean and efficient. Looking at the statistics of your site will help you with this.
Don’t worry about white pages, if it has something important to it – keep the focus on that. Don’t make Joyce read unnecessary, irrelevant text.
This was first noted by the Italian critic of art and literature Mario Praz, who noted of the clothes shop windows that were full of clothes, they had a “Horror Vacui” – a fear of the empty space. Yet the simplicity of just showing a few clothes had much more finesse. Compare the marketing of Apple to Microsoft.
If Joyce gets lost and needs help, give it to her. Help needs to be:
• Helpful. – What? Helpful?
Yes, help needs to be helpful. Don’t just put a general description of a function, understand the user and what their problem might be. Lost you password, forgot your user name? Be helpful, and polite. Don’t make Joyce be any more defensive than she already is.
Remember, a site is, for the most part, invisible. You see one page of what potentially could be hundreds. To help Joyce, make a consistent navigation structure that will teach her to navigate your site. Always let her get back to the starting point if she gets lost.
As a community worker, and partially disabled herself, Joyce appreciates the attention to detail that helps her. Text size that is legible, aspects of color blindness. Even putting closed captioning on video for the deaf and hard of hearing. For a user with special needs or a handicap, the frustration level increases if the site is not accessible for everyone. Check out the Online WCAG validator – http://www.w3.org/WAI/ER/tools/ – and check your website at the great color blindness checker at http://colorfilter.wickline.org/. As 8% of the population is color blind, you need to make sure your site passes muster.
As an “old-school” former teacher, Joyce thinks logically. In fact, most people look for the logic in your website much more than looking at the navigational labeling. If the site is not logical, they will get lost, lose confidence, and leave. You have helped Joyce enormously by categorizing your site in a logical way. Dramas, Comedies, Musicals etc. There are basically five ways to categorize information: Category (such as Dramas, Comedies, Musicals etc), Time, Location, Alphabet, and Hierarchy.
But your site rocks. By far the timidest, Joyce has persevered and her finger now hovers over the BUY TICKETS button. It’s a nice big clear button, next to the price and quantity of tickets, the date and the time and the title of the show. All confirming Joyce that she is getting what she wants. She pauses, not because she doubts that if she clicks the button she will get the tickets, but she wonders if they have wheelchair access. On the page she sees an icon indicating that the theater does have wheelchair access, so, finally, she clicks!
Well done! You made a sale, and even more importantly, maybe even a repeat customer. Considering that almost 60% of visitors spend less than 15 seconds on your site, you did a great job.
The user experience is not over. It’s not over when Jerome comes back and books the tickets. It’s not over when Kelly agrees with Trish (finally) which play they want to see. It’s not over when Frank has a good experience on his smartphone to easily buy the ticket…
It’s over when they come back for more…
From the Web and UX Design Accidental Encyclopedia – BUY IT HERE