"1 of 20" count in navigation bar?

Discussion in 'iOS Apps' started by jtara, Mar 10, 2010.

  1. jtara macrumors 65816

    Joined:
    Mar 23, 2009
    #1
    A simple UI question I'm soliciting opinions on.

    I'm developing an app that requires the user to fill-out a "profile". Think of it as a survey. There are a number of statements, and the user selects "agree" or "disagree" for each. There are currently 20 statements.

    Eventually, there will be more profile statements/questions, broken into different sections. Other sections may not be agree/disagree answers. For example, they might have multiple-choice answers to questions.

    I present one statement/question per page, because I only want the user to think about that one statement/question when they are answering them, and because some of the new sections have questions/answers complicated enough to fill up the screen.

    I have a tab bar at the bottom of the app, and one of the tabs is "profile".

    When you are in the profile tab, there is a navigation bar at the top. I have up/down buttons implemented as a segmented control on the right-hand side of the navigation bar. This is a pretty common pattern for navigating a list one item per page. Eventually, the left-hand side will have a button to navigate back to the list of sections. (Once I have more than one section...) I'll probably also eventually support swipes to go to the next/previous statement/question.

    In the middle of the navigation bar right now, it just says "Profile". Of course, once I add sections, it will be the name of the section, and the left-hand button will say "Profile".

    I would like to add a count and total somewhere, so that the user knows how far along they are in answering the questions in a section. Such as "1 of 20".

    Does it seem appropriate to display this on the navigation bar? Have you seen apps that do this? (If so, please pass along the names so I can take a look at them and see if I like it.) I placed the count at the bottom of the page for now, but I really don't like it there.

    I think I would have to do this as two-line text. So, where now it says:

    Profile

    it would say:

    Profile
    1 of 20

    Of course, in smaller letters than currently.

    I tried this on a single line, and it gets too crowded.

    Alternatives:

    (1) Use the prompt line for this. (This seems seldom used in apps. It's an extra line of text that appears at the top of the navigation bar, and makes the navigation bar taller.)

    (2) Put the count underneath or above the arrow buttons in the upper-right. This would associate the count with the controls. But it leaves empty space under the left-hand button and the title in the middle. (Unless I make both the next/previous buttons and the count text tiny.)

    I think mostly I'm fishing for other apps that do this, so that I can judge the likelihood of having a problem with this with regard to app store approval. I'm pretty convinced of my first choice as the "right" way, but I'm willing to be convinced otherwise. If you do know of apps that do this, please pass them along!

    Thanks.
     
  2. jtara thread starter macrumors 65816

    Joined:
    Mar 23, 2009
    #2
    I think I have the answer. I didn't have to look any further than the standard Mail app, doh!

    Mail displays "1 of 200" as the navigation bar title. A button to the left has the name of the mail folder you are browsing.

    When I eventually add sections to the profile, then, if I have a left button with the name of the section, this will work exactly like mail. So, I don't think Apple can bitch about the UI.

    For now, I've done this as two lines:

    Profile
    1 of 20

    That would seem to be the right thing to do with only a single section.

    I think it may make sense to refine this such that the second line has smaller text than the first. I've already fiddled with the code for inserting a subview into the navigation bar, so this should be easy to do.

    I did try having the count underneath or above the segmented next/previous buttons to the right, but it made both the text and buttons too tiny.
     

Share This Page