Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Considerações sobre Navigation Drawer e Effective Navigation

Considerações sobre Navigation Drawer e Effective Navigation

Slides da minhas apresentações no oitavo encontro do GDG-SP Android Meetup e na edição 2013 do TDC, em São Paulo.

Ubiratan Soares
PRO

October 01, 2013
Tweet

More Decks by Ubiratan Soares

Other Decks in Programming

Transcript

  1. CONSIDERAÇÕES SOBRE
    NAVIGATION DRAWER E
    GDG ANDROID MEETUP #08
    EFFECTIVE NAVIGATION

    View Slide

  2. CONTEXTO
    A HORA DA HISTORINHA...

    View Slide

  3. slide menu
    ribbon menu
    hidden menu
    side navigation
    navigation drawer

    View Slide

  4. PADRÃO
    DE UX
    PIONEIRO NESSE

    View Slide

  5. HOJE EM DIA ...

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. DOCUMENTADO NOS
    GUIDELINES
    developer.android.com/design/patterns/navigation-drawer

    View Slide

  10. UX
    ENTENDENDO COMO USAR

    View Slide

  11. RESPONSIVO

    View Slide

  12. DINÂMICO

    View Slide

  13. GUIDELINES (I)

    View Slide

  14. GUIDELINES (II)

    View Slide

  15. GUIDELINES (III)

    View Slide

  16. IMPLEMENTAÇÕES NÃO PADRONIZADAS
    CONTINUA DIFÍCIL DE DESCOBRIR ...
    NA PRÁTICA

    View Slide

  17. IMPLEMENTAR
    O TRABALHO PESADO JÁ ESTÁ FEITO

    View Slide

  18. ESCOLHER IMPLEMENTAÇÃO
    FAZER FUNCIONAR CERTO
    DUAS ETAPAS

    View Slide

  19. http://simonvt.github.io/android-menudrawer/
    https://github.com/jfeinstein10/SlidingMenu
    Disponível no pacote de compatibilidade (r18+)
    ESCOLHENDO ...

    View Slide


  20. xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/drawer_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    !

    android:id="@+id/content_frame"

    android:layout_width="match_parent"

    android:layout_height="match_parent" />

    !

    android:id="@+id/left_drawer"

    android:layout_width="240dp"

    android:layout_height="match_parent"

    android:layout_gravity="start"

    android:choiceMode="singleChoice"

    android:divider="@android:color/transparent"

    android:dividerHeight="0dp"

    android:background="#111"/>



    activity_main.xml

    View Slide

  21. @Override

    protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    !
    mTitle = mDrawerTitle = getTitle();

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

    mDrawerList = (ListView) findViewById(R.id.left_drawer);

    mDrawerList.setAdapter(new MyAdapter(this, getSections());

    !
    mDrawerList.setOnItemClickListener(new ListView.OnItemClickListener {

    !
    @Override

    public void onItemClick(AdapterView> parent, View view, int position, long id) {

    setSection(position); // Trocar fragment de conteúdo aqui !!!

    }

    }

    // continua...

    DrawerActivity.java

    View Slide

  22. !
    mDrawerToggle = new ActionBarDrawerToggle(

    this,

    mDrawerLayout,

    R.drawable.ic_drawer,

    R.string.drawer_open,

    R.string.drawer_close

    ) {

    public void onDrawerClosed(View view) {

    getActionBar().setTitle(mTitle);

    invalidateOptionsMenu();

    }

    !
    public void onDrawerOpened(View drawerView) {

    getActionBar().setTitle(mDrawerTitle);

    invalidateOptionsMenu();

    }

    };

    mDrawerLayout.setDrawerListener(mDrawerToggle);

    !
    if (savedInstanceState == null) { setSection(0); }

    !
    } //onCreate
    DrawerActivity.java

    View Slide

  23. COMO O USUÁRIO VAI
    DESCOBRIR O MENU?
    FUNCIONAR CERTO ...

    View Slide

  24. Fazer um ícone que lembre
    o do Facebook...
    FAIL
    ESTRATÉGIAS

    View Slide

  25. Fazer algum tipo de
    tutorial....
    ESTRATÉGIAS

    View Slide

  26. FAIL

    View Slide

  27. Usar uma animação inicial
    com bezel swiping até o cara
    se tocar !!!
    OK
    ESTRATÉGIAS

    View Slide

  28. Sair com o menu aberto
    de cara !!!
    ESTRATÉGIAS

    View Slide

  29. OK

    View Slide

  30. Sugerir a existência do
    menu de forma direta !!!
    ESTRATÉGIAS

    View Slide

  31. OK

    View Slide

  32. DE QUAIS TELAS O
    USUÁRIO ACESSA O
    MENU ???
    FUNCIONAR CERTO ...

    View Slide

  33. “Se você possui uma árvore profunda no seu app,
    voltar ao topo da navegação com UP e BACK pode ser
    repetitivo e entediante.
    !
    Se o Navigation Drawer for acessível de qualquer
    lugar do seu app, isso se torna mais rápido e
    eficiente.”
    GUIDELINES (IV)

    View Slide

  34. A
    B
    D
    C E
    DO WIREFRAME

    View Slide

  35. A
    B
    D
    C E
    1
    2
    3
    4
    5

    View Slide

  36. NA PRÁTICA
    CUIDADO COM OS
    CICLOS !!!

    View Slide

  37. MAIS SEGURO
    USE APENAS NO TOPO
    DA NAVEGAÇÃO

    View Slide

  38. NÃO FAÇA COMO

    View Slide

  39. FAIL
    NÃO FAÇA COMO

    View Slide

  40. EFFECTIVE NAVIGATION
    NO SILVER BULLETS

    View Slide

  41. POR QUÊ USAR O MENU
    DRAWER AO INVÉS DE
    OUTRA NAVEGAÇÃO ???

    View Slide

  42. ESTÁ NA MODA ....
    FUCK
    NO
    !!!

    View Slide

  43. MINHA APLICACÃO
    REALMENTE PRECISA DE
    NAVEGAÇÃO LATERAL?
    PERGUNTA CORRETA

    View Slide

  44. DASHBOARD
    BOA TELA INICIAL
    ACESSO LENTO ÀS SEÇÕES
    RUIM PARA MUITAS SEÇÕES

    View Slide

  45. ACTIONBAR SPINNER
    FÁCIL ACESSO
    MAIS DE UM TIPO DE FILTRO
    NÚMERO MÁXIMO DE ITENS
    BOM USO DA ACTIONBAR

    View Slide

  46. TABS
    SIMPLES
    NÃO MUITO EXTENSÍVEIS
    FÁCIL ACESSO
    CONTEÚDO SCROLLÁVEL?

    View Slide

  47. MENU DRAWER
    RESPONSIVO
    DIFÍCIL DE DESCOBRIR
    DINÂMICO
    FÁCIL ACESSO

    View Slide

  48. PONDERE
    PRÓS E CONTRAS
    PARA ADOTAR

    View Slide

  49. CONCLUSÕES
    ALGUMAS, PELO MENOS

    View Slide

  50. NÃO SÃO REGRAS
    GUIDELINES

    View Slide

  51. OFEREÇA MEIOS PARA
    DESCOBERTA

    View Slide

  52. SABEDORIA ALÉM DO
    TOPO DO APP

    View Slide

  53. NÃO AVACALHE O
    BACK STACK

    View Slide

  54. ANDROID
    DEVELOPER
    @ubiratanfsoares google.com/+UbiratanSoares
    [email protected]
    ubiratansoares.com.br

    View Slide