5

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

Improve this question
3
  • With some more searching, i came across a similar question: ux.stackexchange.com/questions/35121/…
    – DennisW
    Nov 15, 2013 at 14:18
  • I'd say the solution is to not use bullets.
    – DA01
    Nov 15, 2013 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, 2013 at 3:10

5 Answers 5

Reset to default
9

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.

Improve this answer
2
  • 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, 2013 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, 2013 at 16:52
1

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

Improve this answer
1

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?

Improve this answer
1

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.

Improve this answer
2
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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