Originally published at: http://www.sitepoint.com/making-happy-users-better-usability/
To get started, today I want to focus on new users who are getting acquainted with your website. We will look at some of the common and often-overlooked usability issues in web apps. We will also learn how we can enhance the usability during the initial stages of a user’s interaction with our web / mobile app.
Clear and concise communication
Usable font sizes
With the mobile web increasingly dominating our web usage, there has already been a shift towards bigger font sizes on most websites. Thanks to concepts like responsive web design, there has been an increase in the number of websites focusing on usable font sizes for mobile devices.
A good base font size is imperative for mobile experience. Often websites focus a lot on the usability buttons, icons, accordions, tabs and other click targets. Sometimes, they forget to focus on how important it is to have text links clickable.
The language and tone used in error messages can be easily overlooked as unimportant or secondary to other development items. However, lack of usability in error messages could have a direct impact on conversions.
If users are not instructed clearly about recovering 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 be non-technical. Do not give out information that the user does not have any use for. Validation errors can easily be rephrased to more user-friendly terms.
Compare the below with the earlier versions of the same.
Usability of forms
Go easy on password requirements. It is common practice to mandate high security passwords. This should be an encouraging experience not one that hinders or prevents people from signing up.
Usability of forms have been one of my pet peeves forever.
A lot of forms are beautifully designed to be unusable.
As discussed before, forms are 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. Hence, the focus for usability on 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 chosen tend to hide the original select input, clone it into a more styleable DOM element. Then bind the data on the cloned element back to the original input. That’s a whole lot of work just to get the dropdown to look beautiful. But, is it worth all the trouble? Considering how mobile users are accustomed to the native controls on their OS.
Windows mobile users are more used to being presented dropdown options as a full screen of choices as opposed to a field within the form itself. This is vastly different from what android users are accustomed to – a modal window.
Going through great lengths to undo this behavior to achieve consistency or for design purposes is counter-intuitive. It might end up slowing your users, who work on similar controls all day and expect it to behave in a certain way. This will pose more challenges than help them.
Using the right input forms
A lot of people recommend using appropriate input types for forms. Adding
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 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 2 factor authentication has a single form of input and this expects only numbers. This is a great 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. It actually increases cognitive load. Especially when switching between regular keyboard and a numeric keypad.
Give a stellar onboarding experience
Lack of good onboarding is analogous to being a rude host.
It is easy for developers to overlook how the naive user would interact with their app for the first time. A dashboard full of icons and sections isn’t exactly intuitive. Friendly tooltips and alert messages that can be dismissed help ease the onboarding process.Continue reading this article on SitePoint