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.

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
    ubiratan.f.soares@gmail.com
    ubiratansoares.com.br
    

    View Slide