Design & UX
Article

15 Steps To Better Usability (and Happier Users)

By Vinay Raghu

This article is the first of a three part series on increasing user engagement through better usability.

Today I want to focus exclusively on new users — those who are getting acquainted with your website. This is often make or break for a web app. Users that give up at this stage are unlikely to try again.

We will look at some of the common and often-overlooked usability issues in web apps. We'll also learn how we can enhance usability during those critical initial stages of a user's interaction with our web/mobile app.

Clear and concise communication

1. Choose usable font sizes

With the mobile web increasingly dominating our web usage, there has already been a shift towards more thoughtful font sizing on most websites. Thanks to responsive web design, there has been an increase in the number of websites paying close attention to providing usable font sizes for mobile devices.

Often websites will focus closely on the usability of buttons, icons, accordions, tabs and other click targets while overlooking how important it is to have easily clickable text links.

Always test your text links on real devices with real fingers — not just emulators.

2. Write meaningful error messages

The language and tone used in your error messages can often be considered unimportant or secondary to other development items. Often the people building an app know how to avoid errors, so rarely even encounter them — let alone consider their content.

Real users aren't so lucky.

The truth is, if users are not clearly instructed on how to recover from errors, you will lose business.

Error messages are a great opportunity to be playful but at a minimum, we should allow the users to quickly diagnose and recover from the error.

The language used in errors should always be non-technical. Do not give out information that the user does not have any use for. Even validation errors can be rephrased to use more user-friendly language.

Compare the example below with the infamous earlier versions of the same screen.

Microsoft's updated BSOD

BSOD used in Win XP

Usability of forms

3. Go easy on password requirements

Postcard: Sorry, but your password must contain an uppercase letter, a number, a haiku and the blood of a virgin,

It is common practice to mandate high security passwords. This should be a positive, encouraging helping hand, not a roadblock.

Usability of forms have been one of my pet peeves forever.

A lot of forms are beautifully designed to be unusable.

As we mentioned earlier, forms do, and will always, have a direct impact on your business. Sign-up forms, login forms and checkout forms are all critical parts of any web app. As such, the focus on usability on your forms needs to be laser-sharp.

Select boxes, for instance, have historically been difficult to style. A lot of existing options including Bootstrap's dropdown or Harvest's option tend to hide the original select input, while clone it into a more styleable DOM element. They then bind the data from the cloned element back to the original input.

That's a whole lot of work to simply take design control of a dropdown. But, is it worth all the trouble?

Keep in mind that each mobile user has developed a hard-earned familiarity with the native controls on their preferred OS.

Windows dev central guidelines for combobox

For instance, Windows mobile users are accustomed to being presented with dropdown options as a full screen of choices, as opposed to a field within the form itself. This is a vastly different expectation to Android users, who are trained to expect a modal window.

Going to such great lengths to undo this expected behavior for your own design reasons may not be doing your users any favours. In all likelihood it will simply slow your users and negatively impact their experience.

Ultimately you're creating more problems than you're solving.

4. Using the right input forms

A lot of people recommend using appropriate input types for forms. Adding input[type="email"], input[type="tel"] helps by switching the keyboard input appropriately. This is counter-intuitive and actually prevents them from quickly filling out the form.

If you have a form with multiple fields it is better to stick to one input type, because it is actually easier for the user to be presented with the same keyboard for every input, rather than providing them with a different keyboard for every new item on the form.

Google 2 factor authentication

The right place to use the various HTML 5 input types are when the changes are minimal. Google's Two-factor authentication has a single form of input and this expects only numbers. This is an ideal place to provide the user with the number keypad.

However, in more complex forms, such as Lyft's signup as a driver form, it can be frustrating to be given a different keyboard for every different type of input. This actually increases cognitive load – especially when switching between regular keyboard and a numeric keypad.

Lyft's signup form switches between different input types for numbers and text

5. Create a stellar onboarding experience

A poor onboarding experience is analogous to being a rude host at a dinner party. It doesn't matter how good your food is if nobody stays to try it.

It is easy for developers to overlook how a naive user might interact with their app for the first time. A dashboard full of icons and sections isn't exactly intuitive. Thoughtful tooltips and alert messages that can be easily dismissed can help smooth the onboarding process.

6. The devil is in detail

Small things like defaulting the cursor to the first input field on a form can go a long way to making the experience faster and more seamless. Ideally we want our users to move through our app on autopilot.

Clippy the lippy paperclip - Being too helpful is bad!

The flipside of a lack of training for new users is bombarding them with every single feature of your app on the very first visit. As we know from Microsoft’s short-lived Clippy feature, offering help at the wrong times, or in the wrong way can prove more irritating than offering no help at all.

Creating a successful onboarding experience is like walking a tight rope –t's hard to get it right, but when you do, it can become a delightful experience. Stumbleupon does an excellent job of training new users on the core concepts of the app.

Stumbleupon onboarding

Stumbleupon onboarding - step 2

Integrating teaching into the normal usage of your app can be a successful approach. An email app might follow up an action such as archiving with "Hey, did you know you can archive using ctrl + k?".

This is a much gentler approach to training your users compared to the brain-dump tour of everything.

7. Microcopy shouldn’t be an afterthought

'Microcopy' refers to all the tiny instructions and reassurances we scatter through our apps.

  • 'Don't worry, we will never sell your email address'
  • 'No credit card required'

Microcopy is the ideal place to begin building trust and elevating the user experience. It is also a great place for educating users who are unsure of what to do.

Signing up with a credit card or providing email addresses can be friction points for users. Unless you are an established and trusted brand, people are always going to worry about being charged unfairly or being sent spam.

Microcopy can go a long way in addressing these concerns for users.

StumbleUpon

8. Always provide context

Users hate to lose context. Given the deluge of information they already have to comprehend, users try to block everything else on the screen in order to focus on the task at hand.

When infinite scrolling was all the rage, websites faced a common problem. One wrong click and the user loses their position in the app. This is deeply frustrating if the user is five scrolls in and makes a click by accident.

Most of the websites today have solved this problem by using modals and other patterns to aid single page applications.

For instance, clicking on any item in Pinterest opens it in a modal instead of loading it in a separate page. This allows the user to indulge in the details, without losing context, position or having to waiting for a new page to load.

Pinterest modal

Facebook's mobile app uses a similar technique. Loading an image from an album takes you to a full screen modal. It almost looks like you've have spawned a new page, but when you navigate back, it elegantly eases you into your original context.

Google's material design champions the use of animation to provide context. Clicking on an item will initiate an flowing animation between the existing page and the item detail being loaded. You understand where things came from and where they're likely to return to.

However, it might have been even better if this animation was executed in reverse when you close an item.

Stackoverflow does an excellent job of this on their notifications. Clicking a note takes you to a page and scrolls to the exact position of the content you requested.

Although that is very helpful, they go one step further and provide context through a gentle highlight animation. It is subtle yet powerful in drawing the user's focus immediately to what's important. It helps them filter out the other noise on screen.

9. Atomic actions

Users can often find it easier to accomplish a task when we're able to blank out or mask anything not relevant to what they are doing. This helps reduce the cognitive load and provides for a more relaxed UX.

'Compose a tweet' modal dims all competing activity

Twitter's 'compose a tweet' modal is a perfect case study on this idea. Compose a tweeting is a unit task and one of the most important actions for this application. Twitter eventually dies if people stop tweeting.

Twitter has built this modal to help users block one of the most fiendishly distracting forces in the known universe – your twitter feed!

This allows the user to focus entirely on writing their tweet.

This method is most appropriate when used for atomic actions. Wherein, you are able to provide everything this action needs within that modal itself.

10. Error Messages

Error messages are another location where users need to be given context. It really helps to mark or highlight the specific text boxes that need to be taken care of.

Some error messages are very blunt and do not help the user recover from it. The name of the field and a visual cue goes a long way to helping the user quickly resolve the issue.

Screen cap of basecamp with error state clearly indicating where the error is

Basecamp's sign up form clearly indicates the problem areas that need resolution.

It might seem fairly obvious if your form only has two or three fields to be filled. But even in these cases, providing a visual cue is infinitely more useful than simply spitting out a list of errors.

Amazon's onerous password requirements

Amazon's sign up form presents you with a vertiable 'shopping list' of errors you need to fix.

11. Centralize All Notifications

With single page applications gaining more traction, we now have the capability to unify notifications that we want to send the user. The divide between web apps and native apps is slowly blurring.

When an app needs to communicate with a user, it's easier for them to expect this correspondence to always arrive in a common place rather, than in context. Of course, there are exceptions to this rule, but Google Inbox is a good example of all notifications displaying in the same place.

Growl notifications can prevent the possibility that the user might not notice important communication.

Inbox notifications on bottom left

Feedly's notifications are always top-center. This trains users to look for important communication even if they perform an action and move away from the original context. A good example might be marking an article as 'read' and moving to the next one.

images of feedly's notification which are global

All of Feedly's notifications are global and always displayed in the same place. Links or action items are clearly discerned from the text content.

12. Avoid dead end states

Modals are a useful pattern, but don't use them to block to the user, preventing them from proceeding until they respond to what is in the modal.

You should always leave the user in charge. Such dead end states leave them with no choice but to abandon whatever they are doing. In some rare cases it may be necessary, but try to avoid this outcome as much as possible.

13. Give users control

A carousel with no navigation buttons gives very little control to the user. Avoid using a timed carousel slide. How long it might take a user to notice and comprehend information varies greatly from user to user. In fact, it even varies day-to-day for the same user.

This is considered an outdated pattern and bad for UX because there are simply too many variables involved. This is especially true if you are using a carousel on the top of a page.

In this case, it is likely the first point of engagement for the user with your app. Restricting their ability to control this interaction sets a bad tone for your relationship with the user.

The solution to is to follow a simple thumb rule:

Respond only to explicit user actions

When we don't know precisely what a user wants, we need to provide them with the ability to control of the experience.

14. Avoid stealing focus

Javascript alerts are highly disruptive. They steal focus from any tab you are working on and demand attention. Use it only when it is absolutely essential. There are sweeter alternatives to it.

Users, especially mobile users, find it disorientating when the content on screen changes abruptly. You should always avoid any changes to screen / viewport content without explicit user action.

Twitter and Facebook both deal with surging streams of real time data that require constant updating.

Does this sound familiar? You're reading a tweet when some background process triggers a reload and a sudden surge of new tweets sweeps away what you were reading.

It's like a gusty breeze snatching away your newspaper — you stand there feeling a little lost and silly.

Twitter alerts you of new tweets, then waits  for your response.

Thankfully the official Twitter app gently informs the user of these new tweets and waits for explicit action from the users before loading them. The user is in complete control of how the screen content changes, thus preventing any confusion that could arise from the situation.

15. Chunk large complex tasks into smaller portions

Nobody likes filling out a page full of form fields. Settings page, profiles, and signup forms can all benefit from the logically grouping items into smaller chunks.

Cards, sections, tabs, side navs are all great patterns to tackle this problem. It doesn't even hurt to employ more than one on the same page.

Breaking complex pages into logical groups reduces the strain the user may have to go to. You want them to be able come into the settings page and get things done. This shouldn't feel like a dreaded activity.

Forms suck. And they especially suck on mobile devices. – Brad Frost

Facebooks 'chunked' settings

Facebook has spent many years trying to make it easy for people to configure their privacy settings. In the past the process was such an intricate minefield that many actively avoided changing it.

However by logically grouping these settings into manageable chunks, they've increased the amount of people who will engage with these pages – rather than abandoning them in despair.

Flipcart

Checkout workflows are another good use case where chunking items into logical groups is a great way to avoid overwhelming the user.

For many web apps, the moment of purchase is a critical juncture with direct business impacts. Breaking the purchase process into digestible portions allows the user to feel like they are making progress — even when things don't go quite to plan.

Simpler steps also makes it easier for users to identify and solve any potential friction points. Nobody wants a form message asking us 'Could you please fix these 4 things?'.

By contrast, providing a single, complex page requiring all details that require to be filled, concentrates all your failure risk in one place. A single mistake generally prevents all the other good data from being submitted.

The same goes for donation forms, especially on mobile. You want the user to think "Wow that was simple" instead of "Oh dear. This is gonna take a while". Increasing usability on forms directly impacts revenue.

Most of the issues we've discussed above are relatively simple to see when we isolate them.
They often become become less visible to the people working on them everyday.

The true challenge for most of us is to step back far enough to see these issues with fresh, ‘new user’ eyes.

Comments
StevieD

While generally I agree with the article, there's a couple of things I would add, to point out that it is rarely as simple as you would like...

Small things like defaulting the cursor to the first input field on a form can go a long way to making the experience faster and more seamless.

But only do that if you can guarantee that your form will load instantly. When I try to log into my online bank website, I frequently get enough of the page on the screen that I can click in the first field, type in my memorable word, tab to the next field and type in my passcode ... except that the page hadn't finished loading, there was still some background crap going on, so I'm half-way through typing my passcode in and the cursor jumps back to the first field and suddenly I'm typing in the wrong place and it won't let me log in.

Checkout workflows are another good use case where chunking items into logical groups is a great way to avoid overwhelming the user. ...
You want the user to think "Wow that was simple" instead of "Oh dear. This is gonna take a while".

But by the same token, you need to provide a progress indicator. I'm a pretty patient person, the kind who tries to persevere rather than give up. But on plenty of occasions, I've got half-way through filling in a multi-step web form and just got so bored that I have bailed, because the form gave me no indication how far through I was. For all I know, I might have been on the last screen ... or I might have been barely a quarter of the way through. If I had known I was nearly at the end, I might have stuck with it.

alexmwalker

That's a really good point, StevieD.

I guess the real issue in that situation is the slow page load. Sometimes you can't control when some resources arrive, but you can treat those items differently, and load them invisibly. If they're crucial to the way the page works, then you need to find a way to deliver them quickly.

If you look at the load time, I find it's usually some kind of third party JS library or third-party service that the page is waiting for.

rvinay88

@StevieD, All these pointers are guidelines for better usability. Every website requires to study their user bases. In your case, if a majority of the bank's users face a similar problem, then it is definitely not worth auto-focusing the cursor. But the general expectation is, if there is a field right on top, save the user a click.

Regarding checkout indicators, they are usually step wizards similar to this link. They usually have numbered steps. I think that should solve the progress indication problem?

bootle

Very good tips, but couldn't get my head around:

Modals are a useful pattern, but don't modals is to make them block the user. Preventing them from proceeding further unless they respond to what is in the modal.

rvinay88

Woah! Looks like a typo. Will work on getting that fixed. Thanks for noticing.
What I wanted to communicate there was never block the user. Sometimes there are modals that won't let you do anything else until you take care of them. That's great if the use case is "save a file" because that is inevitable. But sometimes websites use that to ask people to sign up for their newsletters or create an account. Unless they part with this information, people cannot continue using the site. That is a bad pattern and should be avoided. I hope this clarifies.

alexmwalker

Oops, I missed that one in the edit. Fixed. Thanks for the headsup, @bootle.

IanVS

Technically, isn't the traditional definition of a modal window one which prevents further action until dealt with?

rvinay88

@IanVS Technically, yes. I am glad you pointed that out. I think, the terms modal and non modal are understood better in a desktop environment. This is just my opinion, but on the web, a modal is more akin to a popup or a lightbox. Because, that's the vocabulary used by most popular frameworks. Bootstrap calls it modal and foundation call is Reveal modal. But if we are talking semantics, you're absolutely right. In that case, my recommendation for usability is to avoid modals. Non modals are okay. Even those I wouldn't use too much. I hope this clarifies

nvrau

+1 on form drama...

Suggestion: When an address is required in a form, start with the broadest required range first.

e.g. Don't ask the user to enter address, suburb, state, post code and then country. Start with country, post code (This will typically allow the user to skip state and possibly suburb when using a smart form) and then filter address as the user types the street name.

Just because we read addresses in the former order doesn't mean we should enter them in the same order.

rvinay88

True. It looks like the current state of forms are mostly just developer convenience. And, I get that. There is so much to be improved in that space. Addresses and credit cards are similar in that fashion. We don't have to require all the fields we currently do. Some of them can be deduced, like whether a card is visa or mastercard.

Imagine, this is where someone is giving you money out of their pocket. I'd do anything to make this process easier for the user. I want that money smile

StevieD

This strikes me as one of those things that's a bit like the "content before navigation improves accessibility" theory that was doing the rounds a few years ago. It's one of those things that could help people, but actually probably won't, because (in most countries that I know of, at least) people are completely habituated into writing their address along the lines of
1 Alphabet Street
Town
State
P05T COD3

and so anything that breaks that mould is going to require more cognitive processing for them to realise that they are being asked for the information in reverse than it will save them in workstream by having the information asked for in a more streamlined and personalised way.

And the programming that would be required to get an internationally compatible form that recognises address formats in even a dozen major countries is going to be a headache.

A lot of websites in the UK that are aimed at a UK audience will ask for your postcode first, because that typically pinpoints your address to within about 50 properties, and then all you have to do is pick your house number or name off a list and you're there, which massively reduces both the effort needed from the site user and the risk of people making a mistake when typing their address in (or the age old problem of people who insist on not using the post office's preferred form of their address). But to generalise that to more than one country? That's a whole lot more work. I'm not saying it can't be done, of course it can, but you have to look at whether it is worth your while to do it.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.