Is it easy to scan?
Time and again, I come across webpages with too much text, including that of a client I’m working with right now. I know it is hard to edit yourself because you have a message you really want to get across. But users do not read a pages like they might a magazine article. Users scan the page foraging for information that looks relevant or interesting. In fact, users probably only read about 20% of the content on an average page. And for every 100 words over average, the percentages drop even lower.
Think of text on the website like “life advice” you may give to your kids or spouse. The less you say the more influence your words actually have.
What’s the best way to accommodate the reading style of web users? Follow these pointers from Jakob Nielsen to make your content very easy to scan.
- highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)
- meaningful sub-headings (not "clever" ones)
- bulleted lists
- one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph)
- the inverted pyramid style, starting with the conclusion
- half the word count (or less) than conventional writing
Imagine you only have a few seconds of your user's attention (which is true), what are the one or two things you'd want him to get from the page? Make sure those items are the easiest to find with a quick scan.
Credits
Image:Steve Krug, Don't Make Me Think
Stats: Jakob Nielsen, How Little Do Users Read
Pointers: Jakob Nielsen, How Users Read on the Web
usability tip
Designing for bargain shoppers – keep up the bargain buzz.
Want to know how your checkout process could be failing to convert bargain hunters into customers? Here’s an example…
An enticing email with a 25% off promo code for LittleMissMatched last week, lured me into a little shopping on the website. Although I arrived at the site courtesy of the giant “25% off” link in the email, there was no acknowledgement of that on the landing page.
Tip: When users arrive on your site using a link in an email about a discount or sale, acknowledge that in an obvious way right on the landing page. This builds trust and excitement, two marvelous persuasive elements for shoppers.
I found a couple of bargains, put them in my cart, decided I was done, and went to check out.
Not only was the discount not acknowledged on the landing page, it was also not acknowledged on the shopping cart page. In fact, there was no box to enter the promo code and no button to apply it, so the page doesn’t show me the final discounted price. Instead I see the full price glaring at me. The excitement over my discount purchase, my bargain buzz, is beginning to fade.
Just then, I see the note at the top informing me that I can enter my code later on in the process. That’s fine, but I can feel myself losing the urge to complete my purchase now. The checkout process is not delivering on the promise the email hooked me with. I know I could use my head to figure out what my final cost will be (afterall, my undergrad was in mathematics), but that’s not fun and it kills the momentum.
Tip: When designing for a bargain hunter, you must do one thing well. Show her how much of a bargain she’s getting. Show her in bold and color. Show her in dollars and percentage. Show her in dimes and nickels (ok, just kidding about that one). Deliver loud and clear on the promise she is getting a deal.
Things go downhill from there. I find myself on a login page, no promo code entry box in sight. In addition, the screen on this page starts to look sketchy. There is already an error message on the page when I arrive. What?
The next page asks for my payment information. All the usual questions start to pop up in my mind. Where is my final total? Where is the promo code box so I can apply my coupon code and see what I’m saving? Did I miss the box in an earlier step? Is my credit card going to be charged here? My excitement is dwindling, and I’m starting to think about other things now. Then I notice the text above the credit card images telling me I can enter the promo code later in the process. Later? How much later? How much longer is this process? Now, I’m starting to wonder if this is worth it.
Tip: Before asking a user to input her payment information, make sure she knows the final price.
Once you start asking a user to exert effort (like inputting her credit card info), the potential for abandonment begins to increase. To combat that, make sure to maintain the user's excitement and focus about what's waiting at the end.
I abandoned my purchase at this point. It was late, and I drifted off to something else. Interestingly enough, the next day I noticed an email from LittleMissMatched telling me I left some items in my cart. It was an attractive email, but the fact that the company has a process in place to address abandonment implies there is a known problem. I believe if they fix their checkout process they’ll find they are sending out fewer of these emails.
Bottom line: To improve conversions, generate excitement about the purchase. When it comes to bargain purchases, you have to do it first and foremost with the discounted price. You can pack another punch with messages like “Place your order now and you could be sleeping in your new super soft pajamas by then end of the week!” or “The weather is getting cooler. These socks will look adorable on your toddler!”
usability tip
Usability Tip: Let users be on their merry way as fast as possible
Typically my usability tips apply to visual interfaces, but this week an auditory interface has roused my usability sensibility. Keep in mind that all of your customer touch points, including phone messages, communicate something about your company and how it values its customers.
Leaving a message at the doctor’s office last week, I encountered this recording, “For doctors Ashburn, Rogers, Floyd, Gonzalez, or Miller, press 1. For doctors Harrison, Brown, or Peters, press 2...” Partly because I’m a usability professional, but mostly because I’m a busy human being, I found myself a little aggitated by this message. The doctor I was trying to reach was Ashburn, the first one in the list. When I heard my doctor’s name, I was ready to act. However, I couldn’t because I didn’t have the instruction yet. Instead, I had to sit through the entire list of names until I'm told what to do, “press 1.”
In many cases like this, you can get away with something once. But, I was cut off during my first call. So, yes, I had to call back again and listen to the same message. That’s when it really struck me that if the message was simply reworded to state the action first, “Press 2 for doctors Asher…“ I could be off and on my way to actually leaving a message already.
This might seem like a small thing, but small things add up and get annoying over time. Generally speaking, many of your most loyal customers are the ones who are forced to encounter these small things over and over. Honor your customers by letting them be as efficient as possible.
What about the callers who aren’t paying attention until they hear their doctor’s name called? Ah yes, we know the types. The distracted “Huh, what? Did you just call my name?” types. It is possible these users will be less efficient if the message is changed to present the action first. However, some percentage of these users will recall the earlier instruction even if they weren’t actively listening. The remainder will probably guess they should press 1 when the next sentence in the message begins with, “Press 2…” These phone message systems don’t always start with 1, but they don't typically skip numbers.
usability tip
Usability tip: Put buttons where users need them
Usability testing is an excellent way to identify where buttons should be placed on your forms. Watching users go through your ordering process will show you where and when they want to take specific actions. It can also provide insights into why users are abandoning their order during checkout. Do they need more information about the item, shipping costs, or return policies? Was there a similar item they want to compare before making a final purchase? Would customer or expert reviews give them confidence about their decision? Or did they never intend to purchase the item today, but rather added it to their cart because your site doesn't have an "Add to Wish List" option?
My own recent experience illustrates this point. While ordering a canvas print of my sweet son's six-month photo, I was asked to review and confirm my purchase. I obeyed, scrolling all the way down the long form checking my inputs for accuracy. What did I find when I reached the bottom? Nothing. Where are my Confirm and Cancel buttons? Well, they are all the way back up at the top.
My recommendation? Put another set of buttons where users need them. Keep the ones at the top for the self-assured who mock the thought of reviewing their inputs. But, put another set at the bottom. There is nothing wrong with duplicating buttons, particularly in this case where much scrolling separates the two.


