UX Movement » Navigation http://uxmovement.com User Experience Movement Sun, 14 Jan 2018 02:59:05 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.19 5 Common Design Mistakes on Navigation Bar Buttonshttp://uxmovement.com/navigation/5-common-design-mistakes-on-navigation-bar-buttons/ http://uxmovement.com/navigation/5-common-design-mistakes-on-navigation-bar-buttons/#comments Wed, 29 Mar 2017 17:40:50 +0000 http://uxmovement.com/?p=10222

]]>
The navigation bar is one of the most important elements on a site. Users rely on it to find the information they need. When designers don’t design navigation bar buttons correctly they force more work on the user.

This can lead to users getting lost and not knowing where they are in the navigation flow. It can also make it hard for them to read the labels and click buttons.

Below are the 5 most common mistakes designers make on navigation bar buttons. If you’re making these mistakes, it’s time to fix your navigation bar.

1. Not Highlighting the Selected Button

Many designers fail to highlight the selected button on their navigation bar. When users click on a button, they need visual feedback on what they selected.

Without it, they won’t know where they are in their task flow. They could mistake the page they’re on for another similar looking page.

navbarbutton_highlighted

Use both shape and color contrast to highlight the selected button. Using color only may make it hard for colorblind users to distinguish it.

The standard way to highlight with shape is to place a strong underline under the label. You could also place an outline around the label. But make sure it doesn’t compete with any call to action buttons in the bar.

The button label should also appear as the main page heading. But highlighting it in the navigation bar makes it extra clear to prevent any confusion.

2. Low Color Contrast on Selected Button

Many sites use low color contrast to distinguish the selected button. This is a mistake because it slows users down from recognizing where they are in the site hierarchy.

navbarbutton_selected

The low color contrast makes the button label hard to read. This forces the user to have to recall what they clicked. It’s much faster if users can recognize the selected button through a visual cue.

The selected button should have the highest color contrast of all the buttons. This allows users to recognize the active button at a quick glance.

Use a contrast checker to get the contrast ratio between the button label and background.

3. Low Color Contrast on Inactive Buttons

The color contrast of inactive buttons should have lower contrast than the selected. But not so low that the labels are hard to read. Too low of contrast can make users miss buttons and think they are disabled.

navbarbutton_inactive

4. Not Making Area Around Label Clickable

Navigation bar buttons have whitespace around it that separates it from other buttons. You should make each button’s peripheral whitespace a clickable area. This will give the buttons a larger click target so that users can navigate faster.

navbarbutton_peripheralarea

5. No Hover and Focus Effect on Buttons

Putting a hover effect on your navigation buttons makes them easier to click. This lets users know when their mouse cursor is in a clickable area. Without a hover effect, users will assume their cursor always needs to hit the text label to activate the button. This makes the hit target smaller which requires more precision from the user.

Not every user uses a mouse. Screen reader users who use a keyboard to navigate need a focus effect when they tab between options. The focus effect is a good accessibility practice for all types of clickable elements.

Visual Cues on the Navigation Bar

The navigation bar is often the first thing the user clicks to navigate a site. Users need visual cues when they click a button so that they know where they are and where they can go.

Make your buttons intuitive by avoiding these common mistakes. Neglecting the visual cues on your navigation bar can affect user engagement. Without clear visual cues, users are navigating in the dark.


]]>
http://uxmovement.com/navigation/5-common-design-mistakes-on-navigation-bar-buttons/feed/ 2
Progress Bars vs. Spinners: When to Use Whichhttp://uxmovement.com/navigation/progress-bars-vs-spinners-when-to-use-which/ http://uxmovement.com/navigation/progress-bars-vs-spinners-when-to-use-which/#comments Wed, 16 Nov 2016 02:13:39 +0000 http://uxmovement.com/?p=9770

]]>
How would you feel if you asked someone at the store where an item was and they just stood there? You would probably get frustrated and move on. Users find themselves in this situation when same they see a spinner on their screen for a long time.

Spinners Are Not For Long Processes

Spinners don’t tell users how long the process will take to load. If you use it for long processes, they’ll end up wondering if something went wrong with the app. The lack of feedback creates uncertainty which makes users assume the worst.

They’ll assume that it’ll take a long time to load which discourages them from waiting. Impatience will set in and they may hit the back button or exit out of the app.

spinner-bar-4seconds

4-Second Rule

If you want users to stay on your app, don’t use spinners for processes that take longer than 4 seconds to load. A research study has found that most users’ tolerable wait time is 4 seconds. This means that their behavioral intentions begin to change after 4 seconds.

When to Display a Spinner

Users expect an app’s response time to be immediate. An immediate response time is less than 1 second. If they don’t get any visual feedback after a second, they start to worry.

If you have a process that takes longer than a second, you should display a spinner. This lets users know that the app is loading which will ease their worries.

spinner-second

Progress Bars Make Long Processes Tolerable

If a process takes longer than 4 seconds to load, you should use a progress bar. Users are more willing to tolerate a long wait time if they see a progress bar.

spinner-bar-tolerable

This is because it sets a clear expectation of the load time. The linear bar allows them to see that progress is being made which encourages them to wait. If they see a spinner, they can’t see any progress and don’t know if their action even processed. This gives them no incentive to wait.

How to Display a Progress Bar

A progress bar needs to show users how much progress is being made. Your bar should animate from left to right at a gradual and consistent pace. If the animation pauses for too long, users will think it’s stuck and won’t want to wait.

progress-bar-minutes

You should also add a numeric estimation to your progress bar. If the process is under a minute, display the percent done or number of items loaded. Inform them what activity the app is doing as it loads.

If it’s over a minute, you should give them an estimated time remaining. This lets them know that they can expect a longer than usual wait time. Displaying the number of minutes allows them to leave and come back to their screen.

Don’t Go Spinner Crazy

Many designers have a habit of using spinners for all their processes. But when you use spinners for long processes, you create user frustration. Avoid this by using progress bars when needed.

Progress bars make longer processes tolerable. Users don’t mind waiting if they know the app is doing work for them. But if it’s taking longer than expected, they need visual feedback. Not knowing what they’re waiting for makes them impatient and leave.


]]>
http://uxmovement.com/navigation/progress-bars-vs-spinners-when-to-use-which/feed/ 6
Why the Footer Is the New Site Maphttp://uxmovement.com/navigation/why-the-footer-is-the-new-site-map/ http://uxmovement.com/navigation/why-the-footer-is-the-new-site-map/#comments Tue, 27 Sep 2016 17:05:23 +0000 http://uxmovement.com/?p=9712

]]>
Years ago it was common practice to place a link to your sitemap in the footer navigation. Those days are over because the footer itself has become the new site map.

A sitemap is where users can go to find a directory of all site links on one page. But this is no longer necessary for most sites if you design your footer right (although XML sitemaps are still necessary for SEO).

Traditional Footers

Back then, the footer was rarely considered an important usability element. One study shows that most sites would use a traditional footer. It would contain a short line of administrative links and copyright info. The belief was that most users don’t use the footer because it’s at the bottom of the page.

The traditional footer has now evolved into the mini sitemap. Mini sitemap footers are not only gaining more but more effective than traditional footers. Testing found that a mini sitemap footer resulted in more sales and clickthroughs.

Mini Sitemap

If you have a large site, you should make your footer a mini sitemap of its own. When users can’t find what they’re looking for in the header, they’re going to look in the footer. This is where they should see a comprehensive list of your site links organized by category.

Cramming too many links in your header can make your menus messy and overwhelming. Reserve the header for your most important content links and use the footer for all others.

mini-sitemap-footer

When you make your footer a mini sitemap, users can rely on it to find what they want faster. This is because the links are all laid out and not tucked inside dropdown menus. Users don’t have to open and sift through dropdown.

Not only that, but they also don’t have to click a category link to get to more specific links. They can just click the specific link directly.

It also saves them time from using the search field. They don’t have to type in a keyword to the page they want. Once they scroll to the footer, the link is there.

Designing the Footer

An effective mini sitemap footer needs distinct category labels that contrast with links. If you don’t include them, you’ll make it hard for users to scan the list of links. Users need to be able to spot a category and scan that list without wasting time on others.

scannable-footer

You should have ample spacing between your links so that they’re easy for mobile users to tap. If you have many links and categories you should consider using an accordion menu to display them. This not only saves space but it’ll prevent errors from tapping smaller targets.

accordion-footer

Mind the Footer

Not all sites need a mini sitemap footer. If you have a large site that holds a lot of content, you should consider it. This is especially important for ecommerce sites where users need to find products quick.

Designers should no longer ignore the footer. It’s a site element that needs care and attention. Organize it with lists of links that will make all your site’s content quicker to get to.


]]>
http://uxmovement.com/navigation/why-the-footer-is-the-new-site-map/feed/ 6
When to Use “Your” or “My” on Menu Itemshttp://uxmovement.com/navigation/when-to-use-your-or-my-on-menu-items/ http://uxmovement.com/navigation/when-to-use-your-or-my-on-menu-items/#comments Tue, 06 Sep 2016 12:05:53 +0000 http://uxmovement.com/?p=9668

]]>
Is the user interface an extension of the user or a separate entity that speaks to the user? This is a question designers need to answer when labeling their menu items.

If it’s an extension of the user, you would label items using “my”. If it’s a separate entity, you would label items using “your”. Choosing the right label can help users find what they want quicker. It’ll also help distinguish between site-generated content and user-created content.

The difference between “your” and “my” is user perspective. There are contexts where you would want the user to view an item from a 1st person perspective. And there are other contexts where you want them to view it from a 2nd person perspective.

Customized vs. Personalized

The word “my” implies possession to an absolute degree. But the word “your” implies possession only to a relative degree. For example, if someone were to say, “I like your dog”, you only own the dog from their perspective. But this is not necessarily the case. It could be someone else’s dog that you’re taking care of.

If you were to say, “This is my dog”, you own the dog from your perspective and theirs. The word “my” implies a higher degree of possession and ownership.

your-vs-my

This is why you should use “my” on items that users own or have control over. In other words, use it on items that users can personalize. Use “your” on items that are relevant to the user. In other words, use it on items that the interface has customized for the user.

For example, a site might recommend events for the user based on their location. But they might also offer a way for the user to save events they want to go to.

The recommended events should use the label “Your Local Events” because it’s customized to the user. The events that the user saved should use the label “My Events” because it’s what they have personalized.

What About Neither?

If you didn’t use “your” or “my”, you would make it harder for users to find items that belong to them. When users log in to a site, they immediately want to know where their content is. The word “my” serves as a visual cue for them to identify that.

Not using “your” will make it harder for users to identify items that a site customizes for them. They won’t know whether it’s content that’s displayed for everyone or just them. If it’s displayed just for them, users will have more of an incentive to view it. Not knowing can cause them to miss content they might like.

Differentiate Your Items

The words “your” and “my” affect how users view your menu. Users need them in labels so that they can distinguish what belongs to them and what’s relevant to them. Differentiate customized menu items from personalized ones and you’ll know when to use which.


]]>
http://uxmovement.com/navigation/when-to-use-your-or-my-on-menu-items/feed/ 2
When You Should Use a Breadcrumb Navigationhttp://uxmovement.com/navigation/when-you-should-use-a-breadcrumb-navigation/ http://uxmovement.com/navigation/when-you-should-use-a-breadcrumb-navigation/#comments Tue, 10 May 2016 19:27:37 +0000 http://uxmovement.com/?p=9412

]]>
If you’re ever lost in a large territory, the first thing you’d want to know is where you are. Once you know that you can figure out how far you are from your destination. This is why shopping malls offer wayfinding maps with “You are here” indicators.

wayfinding-map

Users want to know where they are when they’re lost deep in a site’s navigation. Knowing where they are will inform them on where they should go. You should offer them a wayfinding map in the form of a breadcrumb navigation. This will give them a “You are here” indicator in the site’s hierarchy.

3 Levels or More

All sites organize their content by a hierarchy. Some are shallow and some are deep depending on the amount of content. If your hierarchy contains 3 levels or more, you should use a breadcrumb navigation.

breadcrumb-levels

A site with only 2 levels doesn’t need breadcrumbs. This is because the user is navigating from the homepage to the next level which is shallow and not as easy to get lost in.

But when you have 3 levels, users are more likely to get lost. Users will navigate back and forth from main to subcategory a lot. It’s easy for them to confuse whether they’re on a main or subcategory page.

Home Page Is the First Level

All breadcrumbs need to start with the home page. The home page is the first level because it’s almost always the user’s starting point. It gives them a reference point to gauge how deep in the site they are. Displaying the home page first helps users recognize the hierarchy.

breadcrumb-homepage

It’s not necessary to use the word “home” for the homepage link. You can use a home icon or a small site logo instead. This makes the base level more distinct and easier to spot. It’s like how elevators use a star icon and the letter ‘G’ to distinguish the ground level of a building.

elevator-star

Use Arrowheads, Not Slashes

You should use arrowheads as visual cues for breadcrumbs because they signal direction. It makes it look more like a trail of pages the user has navigated through. Avoid slashes because they only function as separators.

breadcrumb-cues

Don’t Link to the Page the User Is on

The last breadcrumb level is the page the user is on. Make that a text label, not a link. If you make it a link, you’ll confuse users when they click it. They’ll end up on the same page and wonder what changed. Use a text label to make it clear where the user is.

Differentiate Where the User Is

The text label for the page the user is on should look different than the preceding links. This allows users to spot where they are through appearance. A way to do this is to bold the text label and make it a darker or different color than the links.

breadcrumb-textlabel

Benefits of Breadcrumbs

Breadcrumbs aren’t an option, but a necessity if your site has 3 or more category levels of content. Testing shows that there are only benefits and no downsides to using breadcrumbs.

Users want to know where they are in relation to the rest of the site when they navigate. Not knowing can cause them to get lost and waste time. Make it easier for them to find their destination by leaving a trail of breadcrumbs behind.


]]>
http://uxmovement.com/navigation/when-you-should-use-a-breadcrumb-navigation/feed/ 6