What not to do in Android UI’s (or how to do it better)

This week I’m going to talk about what NOT to do in Android UI’s (and what you can do about it).

What inspired me to write about this was the release of a pretty successful iPhone app for Android.

I’m talking about Viber.

Take a look at the picture:

So, what version of Viber am I showing here?

Yes, it is the Android version. And with only one screenshot we already start to see the problems…
First, it doesn’t feel like Android, it doesn’t look like Android. And it also leads me to the first point

  • Don’t do bottom tabs
    • Never do bottom tabs [1][2][3]. And these are even worse, because they are exactly the same as the iOS tabs (and remember, you are not using an iOS device)

      Tabs should be used at the top of the screen. Some times you even don’t need or want to use tabs, so you can substitute by other “Androidish” elements like a dashboard, actionbar or a combination of both and others…

      Here is an example of how an Android Viber app could be:

      Here I’ve used the actionbar [4] design pattern, with access to recent calls and messaging via the top bar.
      The contacts list is a PageViewer (like the new Market app, or the google+ app) with access to Viber contacts, all contacts and ‘Viber only’ via a horizontal swype… At the bottom there is a sliding drawer with the dialing keypad.

      This is just one possibility, another one could add the dialpad icon to the actionbar and remove the sliding drawer. Another one could use a dashboard, just like google+ does.

      But with these screenshot you can see that it looks like alot more Android.

  • Don’t put back buttons in the UI.
    • Android already has a physical BACK button, and it is mandatory. All android phones MUST have a back button (except for the Honeycomb, but it has a back button in the navigation bar), so why bother to put another back button to confuse the user?
      Related to this, never (ok, only in exceptional cases, and when you really know what you are doing) override the Back button behavior, users press the back button expecting a certain behavior, and they will be mad if if doesn’t do what they expect.

      What you can do, is to have a “home” button in the Action Bar, but it is an “UP” navigation button. It takes you to the home screen of the app and clears the backstack, so it is not going back, it is going forward.

  • Don’t reinvent the wheel (Use the Android Intent API)
    • Use the Android Intent’s API. One of the most used and common features of apps is to share content through the social networks, or via email, sms, etc… You don’t need to implement each of these interfaces for sharing, you should use Intents to share content.


      Intent sharingIntent = new Intent(Intent.ACTION_SEND);
      sharingIntent.setType("text/html");
      sharingIntent.putExtra(android.content.Intent.EXTRA_TEXT,
      Html.fromHtml("<p>This is the text that will be shared.</p>"));
      startActivity(Intent.createChooser(sharingIntent,"Share using"));

      This is all you need to do to share some content via twitter, facebook, email, sms, google+, etc.
      (You can also customize this interface, look at the third picture)

      The bad

      the good

      and the beauty

    So that’s it for today, hope you enjoy it.

    References:
    [1] http://www.androiduipatterns.com/2011/07/tabs-top-or-bottom.html
    [2] https://docs.google.com/fileview?id=0BxEWAcbuDzg1MjMxYjc3MjQtNzk1Zi00YjQ4LTkxNDgtMzMxNDM0ZjU0N2I1
    [3] http://blog.tomgibara.com/post/4071726024/an-accessibility-mistake
    [4] http://www.androidpatterns.com/uap_pattern/action-bar

    Advertisements

    4 thoughts on “What not to do in Android UI’s (or how to do it better)

    1. Thiago says:

      Apesar de todos os dispositivos utilizarem um botão físico para voltar, penso que um botão voltar na tela deixa a navegação mais uniforme, lógico que ele deve cumprir sua função dentro do OS e não somente dentro do App, é apenas uma opinião,
      Thiago.

      • luciofm says:

        Aí entramos no problema da consistência. Aplicativos ditos ‘profissionais’ seguem os padrões e guidelines da plataforma, que recomendam não utilizar um botão voltar.
        Adicionando um botão voltar na interface, estamos quebrando a consistência da experiência do usuário.

        • Thiago says:

          É verdade, falo isso porque quando criei uma app e mostrei a uns 10 usuários a maioria disse que sentiu falta do voltar no touch, porém, neles deles estavam acostumados com o Android, não me lembrei disso, pois se fossem, como você disse não sentiriam a falta, obrigado, Thiago.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: