1

I'm working on a new web application specifically designed for android devices and consequently it needs to be based on the Material principles though this question is about IA in general not only the material design.

I would prefer to display the navigation controls at the bottom of the screen instead of top to make them easier to reach. I'm wondering does google advise exactly the opposite (i.e. on top)? Especially on bigger devices I find this very unintuitive. Are there materials (i.e. a/b tests) that prove people prefer the navigation controls to be displayed on top of the screen?

enter image description here

  • First thing to see, you understand what to do with the content following – Yohann V. Jun 2 '15 at 12:08
  • I think filling the form is the main action (i.e. what to do) not the save/cancel, isn't it? Save/Cancel is part of the navigation just like the standard Home/Back/Exit buttons which are placed at the bottom. – themihai Jun 2 '15 at 12:12
  • What I see : "I can go back", "I'm creating a New even" and "I must save it after fulfilled the form to go further" – Yohann V. Jun 2 '15 at 12:20
  • Yeah but to do any of that I need to use both of my hands. I guess that's the trade-off, right? – themihai Jun 2 '15 at 12:27
  • I'm just saying that having navigation on top give the user all the context with a single look. If you want to move to bottom for reaching purpose, do it, those navigations are common and well known. – Yohann V. Jun 2 '15 at 12:34
1

1. Visual orientation

  • Users generally process screens top to bottom, as the following eye-tracking heatmap illustrates: enter image description here

  • Since the nav bar typically indicates the orientation of the page within the site (or app), it makes sense to place the navbar at the top since that is the visual entry point for the page.

2. Interaction frequency

  • Typically, the user spends more time interacting with (or reading) the page content than with the navbar. This is not always the case, but it is usually the case.

  • Therefore, from a usability perspective it's convenient to tuck the nav controls near the top of the page where they are accessible but out of the way from the principal content of the page.

3. Scrolling intrusiveness

  • Content almost always scrolls/overflows downwards. As a user reads the content top-to-bottom, she will scroll to read the next page of content.
  • Having a navbar fixed at the bottom of the screen means the user has to tune-out that navbar again after reading the next page of content top-to-bottom, which induces more friction into the content reading experience.
| improve this answer | |
0

This is a very open-ended and potentially opinionated question, but I'll do my best to answer.

If I understand your question right, what you refer to as "navigation controls at the top" is actually called the Android Action Bar.

The action bar is a window feature that identifies the user location, and provides user actions and navigation modes. Using the action bar offers your users a familiar interface across applications that the system gracefully adapts for different screen configurations.

The key word in that quote is window. The action bar not only contains things for the user to interact with, but serves as a buffer between the status bar and the app running, almost like a sill to a window. And by displaying the current activity at the top of the app, it serves as an introduction to the rest of the content.

Other reasons why the action bar is at the top:

  • Tabs
  • Drop-down lists
  • Search

All of those elements would have to either appear from the top (relative to what without the action bar?) or display bottom-up, which would both look unappealing.

Finally, the actual Android on-screen navigation keys are at the bottom, as shown in your screenshot. Although it might be more accessible on larger screens if the action bar was at the bottom, having it right next to the navigation keys would make the interface look bottom-heavy. It also might create unintended actions from users, with the close proximity of so many elements.

| improve this answer | |
  • It makes sense to display the page/window title on top but I fail to see why the actionable items can't be displayed on a "bottom" bar except due the on-screen navigation issue which may be debatable too. I don't find the display bottom-up unappealing if I don't need to use my both hands anymore to reach the buttons I need. – themihai Jun 2 '15 at 14:58
  • Yes, this all is very debatable. But if the title bar was empty and all the buttons were at the bottom, then you're wasting available space for those items, and in doing so the activity's view is reduced. – Alan Jun 2 '15 at 15:02
  • If the title bar is empty i guess you don't display ant title bar thus no waste of space – themihai Jun 6 '15 at 17:03
0

Mobile devices as crammed full of menus and controls at the top of the screen and I agree it's annoying from a thumb-reach perspective, unfortunately it is quite a persistent pattern and in tests users (despite the interaction advantages) often prefer the top nav due to familiarity.

For what it's worth, here are a few examples of problems I've experienced with placing the controls (and/or navigation) at the bottom:

  1. The Android controls are there for home, back etc and user can hit those by mistake.
  2. Android places their primary action circle in the bottom left or middle left on most devices as that's easiest to reach so that plus the Android controls plus further controls would start to feel over crowded. Controls at the top aren't necessarily meant to be the easiest to reach e.g. the 'X' is a destructive action so arguably should take a deliberate (harder) movement.
  3. If you focus in a form input you end up (thought this can be troubleshooted) the controls, and the predictive text and the keyboard all in the way before the form field and you start to find yourself peering through a letter box.
  4. You can slide out the side menu control on Android from the edge of the screen so don't really need to use the 'hamburger' control in the top left (thank good as it's miles away for most peoples thumbs). Although the whole notion of side drawers has it's drawbacks

Also, on most form pages you're going to have to tap near the top of the screen anyway as you need to focus on the field you want to type in, so having controls up there doesn't matter too much.

In summary: It clashes with existing controls to put more at the bottom and most of the primary actions in material design are supposed to be provided via the circular button in a thumb-friendly location.

| improve this answer | |
0

Familiarity is the main reason.

The action bar is a window feature that identifies the user location, and provides user actions and navigation modes. Using the action bar offers your users a familiar interface across applications that the system gracefully adapts for different screen configurations.

-http://developer.android.com/guide/topics/ui/actionbar.html

Note that this page allows for a "split action bar" like you're requesting. Although I would argue there are other benefits to combining them at the top. Users would expect to see their location (in your case, "New Event") at the top, and if Save and Cancel can fit on the same line it allows more screen area for the form itself.

Also remember that many Android devices, unlike iOS devices, have the Home button (and back, etc.) at the bottom of the screen. So placing your action buttons to the top might reduce the risk of the user accidentally exiting your app when hitting Save (or vice versa).

| improve this answer | |
  • The consistency is a side effect of the pattern enforced but it should't validate the design decision. – themihai Jun 2 '15 at 14:50
  • I've updated my answer to change "consistency" to "familiarity" since "familiar" is the word used in the Android documentation. Familiarity is a great validator of a design decision. In other words, you've succeeded when you've placed an element exactly where a user would expect to find it. – Drew McDowell Jun 2 '15 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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