Mobile App Development Blog 8 min read
12 Simple and Often-ignored UI Elements That Improve Usability
- 16 Nov 2015 13 min read
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:
1. Click out function or an obvious close button (for modal views and pop ups)
This item deserves to be the first one to be called out because of the level of frustration this “error” delivers.
I’m pretty sure that if you are an active web user, you already encountered pop ups and modal views. And wow, they are quite popular! A trend is going on that this actually becomes a welcome message, with an inclusion of an immediate action they want you to take. Can’t help but ask myself “Hey! I just arrived and you are already offering me this? C’mon. Court me first.” So a more obvious step is to close that box, and apparently, I’m not the only one. A study by the Nielsen Norman Group shows that pop-ups tops the list of most hated advertising technique. That aside, the thing that hurts the most is how teeny-weeny those “close” buttons are, that it probably cost you a good five seconds to find it. Now making the close button more visible is the most obvious solution, but adding a click out function offers a more intuitive way of closing it.
This makes closing boxes more interactive because, as a user, you just don’t want to close that box, you want to go back to what you were doing before this popped out. What better way to return by just clicking on it? Hassle-free, right?
2. Return/Back to top button
Long scrolling websites are awesome. Just look at the websites that we have today! This popularity can be traced back to it’s roots in printing. With all the added function and claims that the age of “above the fold” was dead. It’s great, but there is something that we as users have something else to deal with.
There’s a pretty interesting entry on Reddit that calculated and found out that users scroll around 915 km or 567.6 miles on a daily basis. Some of that time was probably wasted on just trying to scroll back up.
Hey, some may get smartass here as some will claim the “home” key in the keyboard will suffice. Dude, not everyone who browses these websites are well versed with those keyboard functions/shortcuts. It’s not even underestimating the user’s capabilities; it’s the placement of a “back to top” button makes it more a “no-brainer” scenario.
It’s like having someone say, “Hey are you done here and going home? Let me call a cab for you”. Who the hell doesn’t want that? I just can’t find a reason why you wouldn’t have this in your UI.
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.
4. Sticky Menu/Navigation
Name the most visited, highly-functional websites with real-time updates in the web: Google, Facebook, Twitter (mostly social media), and what do they have in common? Aside from their extremely awesome functions… Sticky top bar! Because these websites present long pages that are updated in realtime, they are aware that it will be a drag (pun intended) to scroll all the way up just to hit that function that’s included in the top bar.
It is proven, sticky menus are quicker to navigate. This very simple solution is just so effective, it actually reduces time to navigate these sites by 22%, and it’s not a surprise that 100% of these users doesn’t even know why they like it this way! This is not really hard to do and it doesn’t disrupt anything. You cannot consider this as a distraction as it is already there when they got in your site in the first place. If your website requires your top bar navigation to skim through your pages, you definitely need to implement this. It reduces the steps required to go to the next function. This is also a subtle message saying, “You’re in control.”
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.
6. Secondary Navigation
Users scan the page. If they don’t find what they’re looking for, they’ll leave. What makes this worse is that you probably have what they’re looking for, but that item is hidden in plain sight.
If you are handling huge websites with multitudes of pages and large amount of products, you should always opt for a secondary navigation. Don’t try to cram everything in that single nav bar. You’ll never get it right. Worse, you’ll resort to endless levels of drop downs. Which according to Jakob Nielsen:
“Drop-down menus are often more trouble than they are worth and can be confusing because Web designers use them for several different purposes. Also, scrolling menus reduce usability when they prevent users from seeing all their options in a single glance.“
When implementing secondary nav, don’t forget to integrate the other small UI elements written here (indicators). Secondary nav helps greatly in categorization, especially when handling products or e-commerce websites. In effect, it helps greatly in siloing.
Opting for a secondary navigation also makes your UI more focused, as it naturally separates itself from the nav. It’s an obvious way of telling the users that in this section, these are the things that they can find. It’s like having an index that can instantly teleport you to a specific area. Having a clean, focused main nav and a well-categorized secondary nav makes navigating through huge websites easier.
You may not need to implement breadcrumbs all the time, but if you are handling pages with subcategories, you better have one. Breadcrumbs shows the user not only where they are currently in (like indicators), it also shows them precisely what part of a certain section they are and how deep they are within the pages.
Now this may not sound like a big of a deal but seriously, people tend to forget or quickly get distracted. Sometimes, users need to be reminded that they are actually in a certain “level deep.” This means that they are inside something that is not in the scope of the main navigation. Breadcrumbs is almost self explanatory and it will not even require savviness to use one. It is also highly suggested to make it clickable, making it a more precise action when you want to go back to the previous page or item. Like all other usability-centered interface, this feels natural. You don’t even need to explain what it does. Just leave it there and let it do its work. Why natural? Well, we can see them implemented in malls and groceries where it is important that users (shoppers) get reminded of what else they can find in that place.
A study conducted back in 2006, shows that users who are taught how “breadcrumbs” function shows that they were able to finish tasks faster than without using one. And as Nielsen has stated, the usage of breadcrumbs is becoming more and more popular. It also guarantees that there will be more users who will interact with it in time.
8. Bullet Navigation (on Image Sliders)
Image sliders, carousels, accordions—no matter what you call it, it had been slammed many times already due to their usability issues and uselessness.
In my personal experience, scouring through the web while studying other websites’ functionality, I find it horrible not to know if a slider is a slider (no indicator), or how many slides are actually there. It gives me a feeling that somehow, there are pretty good content being buried, never seeing the light. I just don’t like the idea that you will be left standing there, confused, without actually knowing what’s in there and when it’s going to end.
But still, image sliders are a great addition to your website when done right. The key lies within the principles of user interface design: keeping users in control. And that’s what makes this little UI element way more important than it looks like.
You see, these are small hints of what to expect, giving you an idea of what to come. We need that indicator to somehow know if we should wait, because there’s more or that’s it and we should move on. Now another thing about this is making it clickable, and/or including arrows in it. This makes a more functional and user-centric UI because you can switch back to a specific slide where you’re interested the most.
Of course, when using bullet navigations, do not forget to use indicators. Because it’s always important to know where you are.
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!