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
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 ...
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