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.

D4b7a3e2ed10f86e0b52498713ba2601?s=128

Ubiratan Soares

October 01, 2013
Tweet

Transcript

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

    EFFECTIVE NAVIGATION
  2. CONTEXTO A HORA DA HISTORINHA...

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

  4. PADRÃO DE UX PIONEIRO NESSE

  5. HOJE EM DIA ...

  6. None
  7. None
  8. None
  9. DOCUMENTADO NOS GUIDELINES developer.android.com/design/patterns/navigation-drawer

  10. UX ENTENDENDO COMO USAR

  11. RESPONSIVO

  12. DINÂMICO

  13. GUIDELINES (I)

  14. GUIDELINES (II)

  15. GUIDELINES (III)

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

  17. IMPLEMENTAR O TRABALHO PESADO JÁ ESTÁ FEITO

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

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

  20. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> ! <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent"

    /> ! <ListView 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"/> </android.support.v4.widget.DrawerLayout> activity_main.xml
  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
  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
  23. COMO O USUÁRIO VAI DESCOBRIR O MENU? FUNCIONAR CERTO ...

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

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

  26. FAIL

  27. Usar uma animação inicial com bezel swiping até o cara

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

  29. OK

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

  31. OK

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

    CERTO ...
  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)
  34. A B D C E DO WIREFRAME

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

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

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

  38. NÃO FAÇA COMO

  39. FAIL NÃO FAÇA COMO

  40. EFFECTIVE NAVIGATION NO SILVER BULLETS

  41. POR QUÊ USAR O MENU DRAWER AO INVÉS DE OUTRA

    NAVEGAÇÃO ???
  42. ESTÁ NA MODA .... FUCK NO !!!

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

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

    MUITAS SEÇÕES
  45. ACTIONBAR SPINNER FÁCIL ACESSO MAIS DE UM TIPO DE FILTRO

    NÚMERO MÁXIMO DE ITENS BOM USO DA ACTIONBAR
  46. TABS SIMPLES NÃO MUITO EXTENSÍVEIS FÁCIL ACESSO CONTEÚDO SCROLLÁVEL?

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

  48. PONDERE PRÓS E CONTRAS PARA ADOTAR

  49. CONCLUSÕES ALGUMAS, PELO MENOS

  50. NÃO SÃO REGRAS GUIDELINES

  51. OFEREÇA MEIOS PARA DESCOBERTA

  52. SABEDORIA ALÉM DO TOPO DO APP

  53. NÃO AVACALHE O BACK STACK

  54. ANDROID DEVELOPER @ubiratanfsoares google.com/+UbiratanSoares ubiratan.f.soares@gmail.com ubiratansoares.com.br