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.
Usability of forms
3. Go easy on password requirements
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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
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.
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.
Vinay RaghuVinay Raghu is a UI/UX developer passionate about experimenting with the latest frontend technologies. He is an avid open source contributor and loves meetup groups. You can learn more about him at viii.in.
