Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have an issue with a simple image slider on a mobile application. The slider uses bullets to indicate the pages of the slider. Now, it became quickly evident that the navigation bullets could easily overflow the screen...

I tried to search what the common way was to deal with an overflowing navigation list in sliders and usually in jQuery sliders, they either overflow too or they stack up making two rows.

Does anyone know a proper way to deal with navigation bullets overflowing on a mobile device?

overflowing navigation bullets

share|improve this question
    
With some more searching, i came across a similar question: ux.stackexchange.com/questions/35121/… –  DennisW Nov 15 '13 at 14:18
    
I'd say the solution is to not use bullets. –  DA01 Nov 15 '13 at 22:52
    
You might want to consider actually creating a couple semi-functional prototypes of this view so that you can actually let the PM try out the suggestions you like best from the answers. All I know is that UX by fiat is certainly not the way to go. –  Robert Kaucher Nov 16 '13 at 3:10

5 Answers 5

up vote 8 down vote accepted

Without knowing the full details I would think of a common pagination like

< 5 / 23 >

The previous/next arrows should be bigger than the text - and touchable. Although the swipe still should be the main interaction to go from one page to the other.

I guess this would make things perfectly clear. Although you'll loose the option to directly jump to a page other than the previous / next one. However, this would have been a problem with your approach as well due to the size and number of dots.

share|improve this answer
    
I suggested the pagenumber/totalpages too, but the project manager insisted that we would use bullets as navigation. Is it acceptable that you use bullets, but if you reach the maximum width you switch to 5 / 23? It kinda differs if you hold the phone in portrait or in landscape mode.... –  DennisW Nov 15 '13 at 9:35
1  
The question is: What's the purpose of the pagination? In my eyes the following reasons are applicable (sorted by priority) 1 indicate the user's current position within the sequence of pages 2 provide the total number of pages 3 enable users to navigate Using more than a certain number of dots (maybe 6 or 7) will still give the user an orientation about his approx. position but will already make it hard to capture the total of pages. Adding more and more dots will make it impossible. When dots overflow the viewport you won't even be able to navigate. So does this solution still make sense? –  John Sample Nov 15 '13 at 16:52

Volume controls commonly use a long list of bullet-like elements.

In your current design, the bullets look too small to be clickable. Since they are only being used informatively, you can shrink their shape even further. Horizontally stacking the bullets and using rectangles instead can save a significant amount of space. Could not find a better example, but the rectangles can be even thinner than in the image, e.g. |||||||||||||||||||||||||||||

share|improve this answer

Once you have more than just a handful of bullets their value to the user decreases. They aren't really used that often for navigation anyway especially on a touch device where swipe is primarily used, bullets are mostly there to indicate location within the slider. So I would drop the bullets and just show a progress bar or rethink the UI pattern altogether, maybe there is a better pattern to use to display and interact with that content?

share|improve this answer

My suggestion is to keep it the way it is, but fade the left and right sides of the bullets. That might make it look like they are spinning around a cylinder. That way it won't look as cluttered but the user will still be able to see that there are pages to the left and right.

share|improve this answer
    
you mean like this? Edit- Not sure how to make an image appear :p –  DennisW Nov 19 '13 at 13:00
    
@DennisW, yes, that is what I had in mind. –  John Leehey Nov 19 '13 at 18:05

Why not allow them to overflow? As long as the empty bullets seems to partially extend beyond the edge of the screen the user will able to discern there are further pages to the left/right.

enter image description here

share|improve this answer
    
Well, this is how it is now... however, it just looks very clustered. –  DennisW Nov 15 '13 at 13:14
    
I can't find an appropriate screenshot, but TweetDeck (on my phone) uses this approach. –  RedSirius Nov 15 '13 at 13:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.