Challenging the Usability of Bullet-style Slider Navigation

Preface

I was inspired to write this post after browsing the new Galaxy Nexus microsite and coming across the bullet navigational technique that I have struggled to interact with on various websites in the past. Lets get something straight, it's not that I feel users do not understand how to use this style of navigation, but rather I feel there are some simple improvements that can be applied to accomplish a more user friendly navigational element using the same concept.

Lets get something straight, it's not that I feel users do not understand how to use this style of navigation, but rather I feel there are some simple improvements that can be applied to accomplish a more user friendly navigational element using the same concept.

You have probably seen and even interacted with this bullet style navigation on the web. It's a common approach for providing visible navigation for content panels or image slides used throughout the web and even included as options from popular JavaScript libraries like jQuery Tools. Well I do think that this bullet style navigation can enhance the usability of such widgets, it's often implemented in a way that is not so user friendly and can actually be difficult and unclear to the user how the bullet navigation is supposed to be used. For reference I have included a screenshot of the bullet navigation technique as used on the Google Galaxy Nexus microsite. You can view the live page to get a feel for the navigation.

Galaxy Nexus - Bullet Navigation Example

Let's take a look at a few reasons why this bullet style navigation has become popular and how it provides usability enhancements to a content/image slider.

- Identification of the number of slides in a slider. - Identification of the current position in a series of slides/panels. - Allows the user to click on an individual bullet to jump to a particular slide/panel.

The usability issue

Based on my experience with this bullet style navigation, I feel that it's missing one key element, continuity. This technique requires the user to move the mouse over each individual bullet and click to advance the slide/panel. Although it may not seem like much of a challenge for the user, it's annoying and unnecessary. As mentioned above, this technique is great for navigating to a specific slide/panel, but when the user want's to browse through all slides, there should be a more efficient and simple way to do so.

Improving bullet style navigation

There are a few simple techniques that come to mind when thinking, how can we solve this relatively simple usability issue.

1) Add mousewheel functionality (allows the user to scroll the page to advance slides) 2) Add "previous" and "next" buttons. 3) Add a continuous "Advance" button.

1 - This "solution" is actually implemented on the example page, however I do not feel that it fully address' the issue as it's somewhat disconnected from bullet navigation.

2 - Most content/image sliders will include next/previous buttons to allow the user to navigate through content. Well this does help address the issue, often the next or previous button will become disabled once the user has reached the first/last item, and would require the user to navigate back/forward to enable the control again.

3 - Using a single advance button would allow the user to maintain a single mouse position and navigate through the entire set of panels/slides. Once the user has reached the last slide, they would be brought back to the first slide. This work particularly well if positioned in a way that the user can visually follow the bullets and maintain reference to their current position in the slider.

I have mocked up a simple "Advance" control illustrating the technique described in #3. I feel that this would be the most appropriate control to complement the design and implementation of the bullet navigation on the Google Galaxy Nexus microsite.

Galaxy Nexus Bullet Navigation with Advance Button

This solution/suggestion may not apply to every slider or use case for bullet style navigation on the web, but in general it provides a more user friendly control and helps to achieve continuity.

[Side-Note: I am aware that you can scroll Google Galaxy Nexus example page to advance the panels, but we are focusing on the bullet navigation element as an individual component.]
  1. in your blog on How to Batch Convert DOC files to PDF format Using Mac OSX Automator. You metion in step 5 to select “Documents” in the lIbrary…I dont have a “Documents” option…..what am I missing?

    David
    Jan 30th, 2012

Add a comment

Comment feed
The better to greet you with
No one will ever see this
Your pride and joy
The reason this comment form exists

The crew behind ASOT

We're a team of interactive, software, and business intelligence experts skilled in the design, construction, and management of online enterprise systems.

Visit The Jonah Group site

Get in touch with us