UX Design

12 Simple and Often-ignored UI Elements That Improve Usability

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.

dumb users
Us using a website.
Photo courtesy of Wikimedia

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.

Trying to close that pop up.
Photo courtesy of Pexels

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.

That’s how it should be done, always. 
Photo courtesy of Propelrr

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.

Uhm, scroll up? Photo courtesy of Pexels
Uhm, scroll up?
Photo courtesy of Pexels

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.

3. Arrows

The sign probably says “Information”, but I’m pretty sure whatever that is, it’s to the right.
Photo courtesy of Pixabay

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”.

Directional arrows commonly found in websites — they tell you one thing. 
Photo courtesy of Propelrr

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.

search results
Users often comes from search engines and enters your site through an inner page.
Photo courtesy of Propelrr

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.

current page indicator
There are a lot of ways to do this, contrast is the key.
Photo courtesy of Propelrr

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.

disappointed man
When you can’t find that item you saw just a minute ago.
Photo courtesy of Free HD Pic

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.

Zappos have a very neat, focused, and well categorized secondary navigation.
Courtesy of Zappos

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.

8. Bullet Navigation (on Image Sliders)

traffic light on yellow
In reality, we need things to let us know when to stop and go.
Photo courtesy of Pexels

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.

bullet navigation
Note: Maintain good contrast, the bullet navigation should be highly visible.
Photo courtesy of Propelrr

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.

bullet navigation slide 2
Indicators in bullet navigation also suggest that it can be selected to jump on that specific item.
Photo courtesy of Propelrr

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.

Pin in button
Adding a “Pin it” button replaces a lengthy sequence of steps just to post an image on Pinterest.
Photo courtesy of Propelrr

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”.

I don’t even know…
Photo courtesy of Propelrr

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!

Never miss a beat.
Get regular updates in your inbox
on what's new on digital.