On Android, how do you design a very shallow navigation?

Question

I need to create a simple account section in my mobile app with 1-level deep navigation:

           ___ Register
          /
Account --
          \___ Login

On iPhone, I'm using a grouped table view:

__________________
|_____Account_____|
|  ____________   |
| /            \  |
| | Log in    > | |
| --------------| |
| | Register  > | |
| \____________/  |
|                 |
|_________________|

When you tap a table cell, it navigates to a new screen with a back button on top back to the root account page. I think this works pretty good on iOS, because the rounded edges on a grouped table view make each cell look like a button.

On Android, the analogy to a table view is called a list view. Unfortunately, there is no built-in way to make each cell rounded in Android. Here's what it looks like:

__________________
|_____Account_____|
| Login           |
|-----------------|
| Register        |
|-----------------|
|                 |
|                 |
|_________________|

Is this an acceptable design on Android? My worry is that the list view in Android doesn't look tappable. It's just plain text with dividers. Secondly, there's two tiny lines of text on top and the bottom of the page is blank.

Answer 1

I agree with Roman about minimizing input/operation ratio. But instead of mixing the two forms (you might have different input forms for registration, and it might confuse the user), I would use tabs. It would still need a click if you want to register, but I guess you're not doing that every day. It would be quite unbotrusive for the logging user, and for the new registering user the "register" tab would be just at the top to be seen.

Partially OT: if you still want to use a two buttons activity, I wouldn't use a ListView, that's more for when items/choices might change in time or they're so many that you need to scroll it. For two buttons, just use some layout and two buttons. You can change their aspect quite easily with nine-patches, but please note that default aspect of Android widgets is not default at all: every device can have a different look&feel, and you might not want to go against it (although most do).

www.androidpatterns.com is a nice showcase for this kind of problems.

Answer 2

One possibly worthy alternative to list- or button-based navigation leading to separate Login and Register screens would be to combine Login and Register into a single activity. This aligns well with the notion that on mobile devices, you want to minimize the amount of data entry users need to perform (i.e. limit your registration flow to bare essentials). Several apps already do this successfully.

On this single screen would be four form elements: Email and Password fields, and Login and Register buttons. Both buttons would be disabled by default. As the user begins typing their email address, Register could become enabled. If she selects Register here, an account is created and a temporary password is emailed to them. If she begins typing a password, Login could become enabled. If she selects Login and there's an auth error, consider displaying a message to the effect of "Did you want to sign up now?" If she selects Register with both an email and a password entered, created an account with those credentials.

Some other points:

• Don't forget to provide a 'Forgot Password' mechanism.
• Don't bother with asking to re-type the password — users can always fall back on your 'Forgot Password' mechanism.
• Consider prepopulating the email text field with known account email addresses on the device, to further lessen the burden of mobile text entry on the user. Android provides an AutoCompleteTextView that may serve well here.

Answer 3

If you're worried that your items don't look tappable, you can use a popup menu:

Answer 4

I can tell that you're an iOS user.

Android users are conditioned by the OS to explore. Android users will also understand that "Login" and "Register" are not just random words on the screen, but two actions they may choose to execute.

Notice how google does not use anything in particular to make their settings items appear touchable:

_{(source: anandtech.com)}

The reason why this works, is because Android is much more context-aware than iOS, and uses context to communicate selectability, rather than visual cues.

Another tip (on that you're using already, but may or may not be aware of) is to use verbs, and active language. If your diction implies information, or something static (Account) instead of something they want to accomplish (login), the user might not realize that they can touch that item.

User: "I don't want to view my account, I need to login!"

If your user is kept well aware of their location within your app, (see "I should always know where I am" http://developer.android.com/design/get-started/principles.html) then they should know that they are on that screen to login, or register, and should know that the two options on the screen are one of two actions that they need to take. Once the user realizes that, they'll tap the action they want to accomplish.