4

I'm in the process of designing an introduction/tutorial for our iOS/Android application. It will consist of 4-5 pages and be ordered in a carousel control. It will look somewhat similar to that of Google Play:

enter image description here

With bleeding page titles to cue more content (Previous and Next page titles are cut in the out skirts of the view port). However, when discussing my first draft one of the wishes was to display how many pages there are in the carousel, since we don't want users to drop out of it prematurely on the third page thinking that there are 10'ths to come. In the conventional carousel this is done with a dotted row.

enter image description here

However, I'm not very thrilled of using this approach. Partly because I think it would be somewhat redundant combined with the carousel title bar, but mainly because I don't have any good place to put it.

Google Play doesn't have any indicator to my knowledge of where the user is in the carousel and how many pages it contains. Maybe the prerequisites are different for an actual navigation control compared to that of an introduction/tutorial where hopefully all pages will be visited?

I'm looking for some inspiration for a possible solution, either from your own creative thinking or if you've seen another solution to my dilemma.

Improve this question

3 Answers 3

Reset to default
5

If UI space is your issue, why not take inspiration from Jelly Bean's own minimal, and familiar, carousel indicator?

Jelly bean home screen carousel indicator

Improve this answer
5
  • 1
    Hmmm... I have JB but my dashboard has the dot indicator, interesting. Maybe it's another one of those Samsung shenanigans. It's valid candidate definitely!
    – AndroidHustle
    Jan 8, 2013 at 14:59
  • Adhering to OS standards is always a good idea when it comes to mobile.
    – kontur
    Jan 8, 2013 at 15:03
  • @AndroidHustle More for trivia than anything else, but your Samsung issue could be a carrier-specific ROM issue. This is a Samsung Nexus S running 4.1.1
    – msanford
    Jan 8, 2013 at 15:04
  • 1
    @msanford that sounds complicated enough to be correct. I run 4.1.2 and still see no bar indicator. =S
    – AndroidHustle
    Jan 8, 2013 at 15:09
  • @AndroidHustle It occurs to me that since you can't see it, it might be handy to know how it behaves: the coloured portion of the slider only appears when scrolling carousel elements; it fades out after about one second on a frame. I don't particularly like that behaviour and it certainly doesn't need to be imitated in your case.
    – msanford
    Jan 8, 2013 at 16:08
4

It isn't redundant. It's a function people already use on a regular basis. Don't over-think it. People are used to slide to the right, and people are used to see bullets on how far they have progressed. If you truly think it's redundant, than I would ditch the carousel, since I believe it's better suited for navigating to different destinations in your app than skipping to a page. Don't just use the carousel because you can; use it because it adds value and a better UX to your user. I'm not trying to convince you or to discuss this: just really think about it if you truly need it, because otherwise you're making things more difficult than they should be ;)

But, below I've put some images on how I would do it, if I were you. By using bullets and by inputting numbers in them, people know how many steps there are. I would also make use of text for letting them know that they are only a couple of steps away from completion. Success!

enter image description here enter image description here enter image description here enter image description here enter image description here

Improve this answer
2
  • Good advise there: "Don't over-think it"
    – kontur
    Jan 8, 2013 at 19:21
  • +1 I really like how you presented your case. The carousel is however how it will be structured since it's, as you also say, a recognized interaction pattern plus it suits the purpose of visiting all the pages is a set from beginning to end perfectly. It's also the conventional approach for most introduction/tutorial -esc features, see Evernote for an example. An indicator is needed, and recent changes has made the dotted structure a somewhat valid alternative again. I will definitely take your points into consideration, thank you.
    – AndroidHustle
    Jan 9, 2013 at 10:02
1

How about a good old plain and simple x/5 or x of 5 after the heading? I.e. referencing your screenshot, it could say ...ategories 2/5 ______ Featured 3/5 ______ Top ..., and so on.

This way, you communicate the progress, the overall page count, nor do you have to sacrifice the screenspace a clickable-sized controll would require to be usable. However, the solution obviously adds a bit of clutter to the heading and assumes your heading spaces can add the extra couple of characters.

Edit: I just thought of it, obviously, you could also use a visual indicator of the page count, like so, for example:

enter image description here

Improve this answer
1
  • Thanks for your answer kontur! You get a +1 for your second suggestion, which is very creative. However is still graphically pretty much entails the same thing as the dotted row in the OP, which is something I try to steer away from. I considered your first option also, just forgot to mention it in the OP. Problem there is that is doesn't blend too well, you can't in my mind mix it in with the title in a smooth way. Putting it in an outer corner could be an alternative, but then you'd have to make it prevalent for the user to notice it, which also could create an unbalance in the page.
    – AndroidHustle
    Jan 8, 2013 at 14:49

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.