12 Simple and Often-ignored UI Elements That Improve Usability
- 16 Nov 2015
These are UI elements that you should always consider when developing a website and designing digital experiences. The reason: they greatly improve usability and not using them is just plain laziness.
Most users, probably, don’t know that they are actually having a hard time navigating through a website. Well of course, how will you realize that when you are too busy trying to figure out what to do next? No, do not assume that users will know immediately what to do, or even assume that everything is quite obvious. You’ll be surprised how dumb we are as users.
On Steve Krug’s book, “Don’t Make Me think”, he stated that:
“One of the very few well-documented facts about Web use is that people tend to spend very little time reading most Web pages. Instead, we scan (or skim) them, looking for words or phrases that catch our eye.”
Our brain functions in a way that it only allows one action after another and we use our senses to navigate through what is the most logical (next) step to take. Yes, we tend to justify that via instincts, but your instinct only reacts according to the environment, or on a situational basis. Thus in reality, the only way we are able to maneuver in our current environment is because we are able to pick up cues (visuals) and figure the safest way out. Remember, in any situation, our brains is rigged to find our way out, looking for the “end”.
With that said, setting up your UI should lead the users to their next action, lead the way for interaction. Whatever your website or application’s purpose and call to actions, your UI should guide the users toward conversion.
There are a lot of things in a website that are really, really obvious but still users tend to not use it accordingly because, face it, it all depends on the user’s behaviour pattern and intent.
While a lot of things in your website clearly show its use, it’s not gonna hurt to make it more obvious that it deserves a “duuuh”. Even so, it’s not gonna cause any negative effect . If anything, it adds up to how well-designed and usable your interface will be.
So, I carefully analyzed countless websites and tried using it on a “dumber” level. I handpicked 12 often left-out UI elements that make website navigation “instinctive”.
(Note: I wrote this not in order of importance, rather in order of how irritating it is when it’s not there.)
Let’s begin with:
Ah, the humble arrow. Pointing us to the right direction since who knows when. These are small visual hints that are at times may or may not be click-able. Regardless, they serve their purpose. I’m not really sure why some leave this out, maybe because sometimes it’s ugly, sometimes it’s like making the user look dumb. All of these things, they are not even close to a good reason. Arrows tell a user where to go. Or in the case of pages or image slides, it tells you that you can browse left or right, back or forward. It immediately tells you: “There’s more content here”.
It’s a dynamic behavior, but the arrows make it streamlined. There are pages where it says “Find out more”, or “There’s more.” But the question there is, “Where?” A classic example are arrows that help users identify where more content is located. Some will argue that it doesn’t matter, they will use it anyway. That is also true. And what is also true is that everybody knows what arrows are and will definitely figure out what it tells them. Additionally, a simple arrow can provide a 76% chance that the user would click through the items again, especially on mobile e-commerce, higher than its other counterparts.
5. The “You Are Here” Indicator
Not everyone gets to enter your website from the front door, a quick Google search will show you what I mean.
If you are not implementing this UI element, please tell me why. Seriously. I don’t see any point why you should not implement this. Some will say “we have a page title”, “we have headlines”, “we already have whatever so we don’t need that”. Dude, this is plain laziness. These are page indicators, seen to indicate where in the “nav menu” you’re in.
Treat website navigation like a GPS; it is much much more useful when you know where you are before you start navigating through. Implementing this is as simple as having a change in color, size, displacement, or whatever that breaks the consistency of inactive menus. Combined with a sticky nav, they put your navigation into a dashboard level of ease of access.
9. Search function
search files We’ve been there, it’s unpleasant. Photo courtesy of Pixabay Some may say that your website doesn’t need it, because everything can be easily found. Some will argue that your website’s content is not that “thick” that it warrants a need for a search button. But let’s stop for a second and look at the world we live in right now. It’s the age of search. Ninety-two percent of all online American adults list search as their most popular online activity. Moreover, a study by Nielsen shows that half of all users are search-dominant. We are talking about 3.5 billion searches per day. People are more fond of searching rather than clicking through a multitude of buttons, that sometimes you have no idea where it goes. Search is the preferred method of initial interaction and having one in your own website makes it more easier for frequent visitors to find a specific content that they want. search bar Don’t break affordance, keep it where it’s supposed to be. Photo courtesy of Propelrr This one’s becoming more and more in demand, especially on websites that handle huge amount of information that are needed to be accessed by users on a regular basis. This is a must-have on e-commerce websites.
11. Pin it (or some form of sharing for photos)
Never underestimate the power of this tiny UI element. Combined with a well crafted content, this feature works like a back-door access to the social media world.
I’ve written about the value of visuals in content marketing and that is also the reason why you should always consider implementing this, simply because it’s the age of sharing. And the most shared content on social media are images. Oftentimes, we remember things by what we see, and that includes what we’ve read.
Apply this using a hover feature, or in the case of mobile, the first tap. But more than that, be sure to somehow give your images a customized and branded feel. Because it may not be all the time, but images included in your article are the ones that will be shared. But that’s for another story.
12. Search Suggestions (autocomplete & related)
You know, when you searched for something and nothing turns out, it feels like “Now what?” It suddenly feel like it’s the end of the road. What if I don’t really know the exact string of words to use? Or the term that I am using was actually wrong?
Google took the initiative on coming up with a way to make searching a better experience by implementing the autocomplete, an idea that started with a “what if”.
And the result was great. This feature eliminates the frustration caused by wrong queries and dead ends. Not only that, this feature makes for a great, non-obtrusive way of PR by suggesting content, highly relevant to what the users are looking for. This could either be a new product, new feature, or just some new info within your very own website.
There you are, small but really effective UI elements you should not ignore. Always remember that there is no such thing as overly obvious. In this age of imminent distraction, everybody needs help with focus, even if we are not aware of it. Also, remember that a great UI is all for the sake of leading your audience to the right content. So be sure you are writing the right stuff.
Thanks and see you again!