Common User Interface Elements for Better Usability

Web Usability

When it comes to UI design, most designers accept most user interface elements as they are. But improving these simple looking elements can lead to a big difference in your site’s web usability. One critical thing to remember is that users use the web by scanning and often miss out on what you may think are obvious website elements. Here are some common user interface you can improve to make sure your users get it right the first time around.

1. Collapsible and Expandable Content

Collapsible and expandable content are very useful for many websites and especially so for mobile websites. They’re great for providing content in a way that doesn’t detract from the main content or the website’s visual presentation. Many websites use collapsible/expandable content but never clearly indicate that the user can interact with it. By clearly labeling the button to expand/collapse, you can make sure that your users understands that it can be done. Another idea is to make it a different color with bold arrows to make it clear.

This is probably the most basic thing you can think of, but there are always websites that have problems with how their links appear. Obviously, these websites make links a different color from their regular font. However, the color of the links can often be dull (like a dark maroon) and make it seem like it is just regular text in a different color. You want the color of clickable text links to be clearly distinguishable yet not too striking to the eyes (think sky blue) in a way that constantly draws attention away from the main content.

3. Shopping Cart Accessibility

There are many ecommerce stores that make the mistake of making a link to their shopping cart hard to access. Either they only appear on the main page or a link to the shopping cart is on the top right with a very small text and an indistinguishable font color. Don’t give your potential customers a headache by doing this. Make sure that the shopping cart is accessible on every page and make sure that it is clearly labeled so that users can easily find it to make any necessary changes.

4. Zoomable Images and Rotatable Models

A common feature you see in ecommerce stores is the ability to zoom in/out pictures and even rotate the models of physical products. The problem is that some ecommerce stores forget to mention that users can manipulate the picture/object or do not mention how they can go about manipulating it. All that’s needed is a label under or above the picture/object to get the user to use it and a helpful mouse-over box that indicates how to use it.

5. Quicker Sharable Options

Many websites now embed social sharing buttons to their content. The problem with these buttons are that they take up a lot of space or require you go to another page to share the content. The easy way to make it easier for users to interact with this element is to provide a drop down or expandable menu that provides links to all the different social networking and sharing sites. This removes clutter and the need to open another page.

There are many more user interface elements that can be improved with a few simple tweaks. Go through your website and look through all the elements that users can interact with. Do you think you can come up with a few ways to improve them?