On top of the web’s ubiquity, the web has gotten to an interactive all time high. Users don’t just seek information, they interact with it in more novel ways than we can ever imagine.
And it’s only going to get better: we are seeing a myriad of emerging web apps and website trends that are revolutionizing the way we use and obtain information on the web.
With this concept in mind, usability, how effortless it is to interact and use your website, is critical to its success. This article discusses five important usability tips that your site can’t live without.
1. Have a search feature
A basic site feature nowadays is a search feature. It allows your users to jump to the pages that may contain the information they’re currently seeking.
Locate the search box where users can immediately find it. Placing it on the top left or top right of the webpage will ensure that users see it almost immediately. Make it stand out.
The submit button can also be made to stand out by using vivid colors that fits the design theme.
The "GO" button on Amazon.com is bright orange, congruent with the company colors, to help users quickly see it.
Very often, the magnifying glass icon is used to associate the search function and is now becoming a reasonably identifiable symbol for "site search".
Ubisoft uses the magnifying glass icon to identify their search input field.
On deviantART, the search is identified with a magnifying glass icon and the word "Search…"
2. Pay special attention to web page organization and layout
The use of headings, lists, and consistent structure cannot be overly emphasized. Users tend to scan through web pages in an F-shaped pattern. They pick out what stands out from the rest of the text: headings, links, bold text and bullet points. Use headings and subheadings that are eye-catching so that users can focus on them and quickly process the content while scanning through the page.
Use CSS for layout and style where possible. This ensures that structure and presentation are kept totally separated, giving you an edge when it comes to experimenting on page organization and structure by trial and error.
3. Keep the user interface consistent
A good interface design influences user behavior, prompting them to take an action or route that will result in their desired outcome. This ultimately translates to saying that the design should be intuitive. Keeping the interface simple makes navigation easier for the user. First time users quickly become regulars if the interface design is clear and consistent.
Use a global navigation that appears on every page of your site in the same place. Make your buttons or links consistent with the central theme of the website. Choose the right color schemes.
Apple features a primary navigation that visually indicates what section you’re in.
When hovering over a primary menu item, it becomes recessed, indicating that it’s the focused element.
4. Structure web forms correctly
When you have web forms on your site, you want to make it as easy as possible to fill out. To illustrate key design tips for designing usable web forms, let’s look at the Yahoo! sign up form.
In the figure above, you can see that there are text hints in the input fields for First Name, Last Name, birth Day and birth Year so that there’s no ambiguity to the order that the input fields require. For example, there is no question as how to format your name: Last Name, First Name or First Name, Last Name.
You can remove these inline hints when the user focuses on the input field.
Group form items into logical chunks so that each section has a distinct topic; this makes it easier to quickly fill out form items.
In the figure above, you can see three logical groupings of web form input fields: (1) information about the user, (2) account information, (3) alternative contact information. Grouping it this way makes it easier to fill out related data in chunks.
Whenever a user performs a certain action, give them feedback and/or confirmation so that they aren’t left guessing as to whether they’ve filled out the form correctly or not. This avoids needless repetition of action (such as filling out the form again to ensure that they have in fact been successful in submitting it).
Shown above is how the Yahoo! sign up form deals with errors in filling out the web form. It gives instant inline feedback so that the user immediately knows that the information they provided is erroneous or lacking. The feedback provided for web form errors are: What the error is and suggestions on how to correct the errors.
5. Make help features available
A good user interface will be intuitive and logical enough so that users will know straight away what to do in order to get what they want, but the level of technical know-how that each user has will be different.
In addition, help features can be a way to prevent the user from being discouraged from using your site; if they can’t figure it out and there’s no way for them to seek help, then they’ll look for a site that they can figure out.
