Propelrr Blog

The TAO of All Things Digital.

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.

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

clickout
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

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

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

4. Sticky Menu/Navigation

sticky menu
Social Media: where most of your time is spent on scrolling
Photo courtesy of Propelrr

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.

sticky
No need to scroll back-up just to check on my messages.
Photo courtesy of Propelrr

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.

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

7. Breadcrumbs

hansel and gretel
We all know the story of Hansel and Gretel (or a quick Google search can fill you in).
Photo courtesy of Photobucket

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.

breadcrumbs
More than an indicator, breadcrumbs are an easy way to navigate the category you are browsing.
Photo courtesy of Propelrr

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)

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.

10. Link color

colored link
There’s no such thing as rainbow colored link.
Photo courtesy of Pixabay

This is so obvious that it really cracks me up when I see it not implemented. I mean dude, seriously why would you do that.

This paragraph has a link. But because there are no color changes, it’s hard to find. You have to hover through all the text here to find it, but the question is “Who does that?”.

A line of text, when it’s meant to be “clicked”, must have some form of indicator. We all know that because that’s our way of knowing when a text is a link or not. The question is what color to use? When choosing link colors, blue has always been the best choice. This not because of some magic that makes it clickable rather it is something about what we call affordance.

We’ve been used to seeing blue colored links as “clickable” text since who knows when, and suddenly changing that can cause, even for a split second, a moment of confusion. But of course, it’s not just always blue. You can get creative here. Maybe for purposes of branding and aesthetics, you might want to use other colors. But before choosing one, you might want to check out what Google had done to address this matter.

link color is blue
Blue is the undisputed color for web links.
Photo courtesy of Propelrr

Regardless, whether to use blue or not, always use contrast and establish a standardized method of presenting your “clickable” links. Never use a color you used for links for a text that is not. Additionally, a “clicked” or already visited link should have a different color than its default state. This eliminates unnecessary and unwanted clicks.

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

autocomplete
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!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

  I want to receive Propelrr’s newsletter

Services Offered