4

I'm working on an iPhone app with a detail view that fits exactly on a (vertical) iPhone screen. Here's a screenshot of the view in question:

http://screencast.com/t/NDBjZWRkMWQt

The problem is that I also need to display a Tool Bar in the Detail View and that Tool Bar does not fit on the screen anymore.

So I have two options to make room for the Tool Bar:

  • Use a Scroll View. This works, of course but it's not ideal, especially since it's not very obvious that there is more content at the bottom of the screen.
  • Hide the Tab Bar on the very bottom of the screen while the detail view is visible.

I'd be inclined to use the second approach, but Apple's iPhone Human Interface Guidelines seem to suggest that the Tool Bar should always be visible.

How strict is Apple with regards to these guidelines? And what would you do?

1
  • 1
    Have you considered redesigning the screen so that you don't have this problem?
    – Rahul
    Oct 5, 2010 at 11:35

4 Answers 4

2

Firstly, I'd suggest you don't go with option two (having to scroll to see the tabs).

The suggestion of a tap to show/hide the tab bars is a good one - this is a fairly standard practice, but there is a further option still

There are several iPhone apps which do have a main navigation in the form of a tab bar at the bottom, which isn't always present. Take a look at this example from the Foodspotting app.

enter image description here

The tabs are usually on the screen, except for when you are anywhere in the 'spot a dish' process e.g. selecting/taking a photo, describing dish etc, right up until you have finished spotting. Note there is always an 'out' at the top, in the form of a 'back' or 'cancel' button.

Hope this helps.

3

I think that putting the toolbar at the bottom of the screen (i.e. beneath the fold) is not good practice.

It's not a question of Apple approving the application, it's just something that the user will not expect.

Scrolling on the other hand is something users are very accustomed to do on the iPhone, so you'd probably be safe putting the extra fields there.

If that's not enough, you can try one of the following (but I recommend against it):

  • Unify some related fields to show one value, which will be editable in another screen.
    For example (I hope my German is not failing me), the button two could just say:
    2 hours on 23.5.2006 >
    And pressing the carat would take you to a screen showing the two separate fields that can be edited in place.
    It takes another click and deviates from the "key - value" paradigm, but it's all trade-offs.
  • Use a non-standard tool bar. For example, this menu opens only once the middle icon is clicked. You could potentially just display a smaller icon, and thus taking up very little vertical space, instead of a full height toolbar
    alt text
  • Use a regular toolbar, but add a transparency element. You'll still get the regular toolbar functionality, but the user will be able to see that there's something behind it.
1

Have you seen the app Brushes? The author uses a translucent tool bar. One tap, and the bars go away. Another tap brings them back. Simple and effective.

alt text

3
  • Thanks for your suggestion, but it's not really the same scenario. I'm looking for input whether or not to hide the Tab Bar, not the Tool Bar. Oct 4, 2010 at 17:21
  • Can you post a screen snapshot of the detail view that you're working with?
    – Hisham
    Oct 4, 2010 at 17:39
  • Sure, I've added one in my OP Oct 5, 2010 at 8:27
1

We used a auto-hiding tab bar in Tokyo Teleport (similar to the ffffound.com app)

By hideable, I mean the tab bar moves down off screen when the user begins to scroll content, but it can be revealed at any time by tapping a small "reveal tab bar" icon that is always visible.

We started by auto hiding the tab bar on every screen of the app but this confused users. Our final solution is to only hide the tab bar automatically if the user has navigated away from the root view. Returning to the root view reveals the tab bar if it's hidden.

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.