5 tips for creating a more usable Web
Whether it’s your portfolio website or a game collection, we all want to attract visitors to our website and ensure a pleasant experience.
Usability measures a user’s experience level and can be characterized by the ease with which a given task can be completed; if it is done with previous knowledge, or by allowing the user to learnt a new way of interacting. I think Jakob Nielson probably explained it better when he said:
“Usability is a quality attribute that evaluates the ease of use of user interfaces. The word” usability “also refers to methods to improve ease of use during the design proces.”
I hope to give you some form of a usability checklist , covering topics from the design of the module to simple navigation suggestions that you can apply to any Web project.
1. Creation of active navigation
Allowing the user to know in which section of the site he is located or which category he is browsing can give a huge advantage to usability in any site. And we all have our way to create it.
The ideal situation for creating an active navigation is to do it on the server side, because it massively reduces the amount of HTML and CSS needed. If the generation of an active state on the server side is not an option, manipulating your body also directly drawing each navigation element is a good choices.
As a third option, you can easily create an active navigation with JavaScript .
The active browsing status should always be different from the hover state.
example of active navigation and hovering
2. Clickable labels and buttons
When taking the time to mark a form correctly, the user can click on to label simple way to show it. This is a great feature integrated directly into HTML. Unfortunately, very few users know this natural gem of the user interface.
By now everyone knows that the send buttons are selectable. I always thought it was strange that this element – obviously clickable – didn’t use the same cursor as a link. So I like to apply this CSS bit to the buttons too:
label, button, input[type=”submit”]{cursor:pointer;}
3. Linking the logo
Not linking a logos to your site’s home page is one of the most frustrating things I’ve encountered on the web. I can’t understand why someone wouldn’t do that. It’s so easy, and now it’s safe for users to expect it.
Linking your logo is so common problem nowadays that many sites are finding that having a link labeled “Home” is no longer useful, as users simply click on the logo to navigate to the home page.
Sites like Facebook, track user clicks by adding the “ref” parameter to each navigation element. Below is an example of how Facebook.
Facebook
4. Increase the active area on a link
About a year ago, 37Signals’ Ryan Singer wrote an article about how they laced padded targets for better mousing in Basecamp. This is another little usability trick that you can use simply by adding padding around the links to enlarge the clickable area.
This is a great addition to any site and can help prevent typos on a link, which can often be a bit frustrating. It also helps a lot in the design of mobile Web, where users click and really need an area of great impact on a link.
i phone
5. Addition of focus to form fields
Focusing on a form field is a growing trend in user interface design. It allows the user to know that what they have just done has caused something (does this make sense?). Saying something like, “Hey! You just clicked here.” It can be very useful.
