Slides da minhas apresentações no oitavo encontro do GDG-SP Android Meetup e na edição 2013 do TDC, em São Paulo.
CONSIDERAÇÕES SOBRE NAVIGATION DRAWER EGDG ANDROID MEETUP #08EFFECTIVE NAVIGATION
View Slide
CONTEXTOA HORA DA HISTORINHA...
slide menuribbon menuhidden menuside navigationnavigation drawer
PADRÃODE UXPIONEIRO NESSE
HOJE EM DIA ...
DOCUMENTADO NOSGUIDELINESdeveloper.android.com/design/patterns/navigation-drawer
UXENTENDENDO COMO USAR
RESPONSIVO
DINÂMICO
GUIDELINES (I)
GUIDELINES (II)
GUIDELINES (III)
IMPLEMENTAÇÕES NÃO PADRONIZADASCONTINUA DIFÍCIL DE DESCOBRIR ...NA PRÁTICA
IMPLEMENTARO TRABALHO PESADO JÁ ESTÁ FEITO
ESCOLHER IMPLEMENTAÇÃOFAZER FUNCIONAR CERTODUAS ETAPAS
http://simonvt.github.io/android-menudrawer/https://github.com/jfeinstein10/SlidingMenuDisponível no pacote de compatibilidade (r18+)ESCOLHENDO ...
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
@Overrideprotected 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 {!@Overridepublic void onItemClick(AdapterView> parent, View view, int position, long id) {setSection(position); // Trocar fragment de conteúdo aqui !!!}}// continua...DrawerActivity.java
!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); }!} //onCreateDrawerActivity.java
COMO O USUÁRIO VAIDESCOBRIR O MENU?FUNCIONAR CERTO ...
Fazer um ícone que lembreo do Facebook...FAILESTRATÉGIAS
Fazer algum tipo detutorial....ESTRATÉGIAS
FAIL
Usar uma animação inicialcom bezel swiping até o carase tocar !!!OKESTRATÉGIAS
Sair com o menu abertode cara !!!ESTRATÉGIAS
OK
Sugerir a existência domenu de forma direta !!!ESTRATÉGIAS
DE QUAIS TELAS OUSUÁRIO ACESSA OMENU ???FUNCIONAR CERTO ...
“Se você possui uma árvore profunda no seu app,voltar ao topo da navegação com UP e BACK pode serrepetitivo e entediante.!Se o Navigation Drawer for acessível de qualquerlugar do seu app, isso se torna mais rápido eeficiente.”GUIDELINES (IV)
ABDC EDO WIREFRAME
ABDC E12345
NA PRÁTICACUIDADO COM OSCICLOS !!!
MAIS SEGUROUSE APENAS NO TOPODA NAVEGAÇÃO
NÃO FAÇA COMO
FAILNÃO FAÇA COMO
EFFECTIVE NAVIGATIONNO SILVER BULLETS
POR QUÊ USAR O MENUDRAWER AO INVÉS DEOUTRA NAVEGAÇÃO ???
ESTÁ NA MODA ....FUCKNO!!!
MINHA APLICACÃOREALMENTE PRECISA DENAVEGAÇÃO LATERAL?PERGUNTA CORRETA
DASHBOARDBOA TELA INICIALACESSO LENTO ÀS SEÇÕESRUIM PARA MUITAS SEÇÕES
ACTIONBAR SPINNERFÁCIL ACESSOMAIS DE UM TIPO DE FILTRONÚMERO MÁXIMO DE ITENSBOM USO DA ACTIONBAR
TABSSIMPLESNÃO MUITO EXTENSÍVEISFÁCIL ACESSOCONTEÚDO SCROLLÁVEL?
MENU DRAWERRESPONSIVODIFÍCIL DE DESCOBRIRDINÂMICOFÁCIL ACESSO
PONDEREPRÓS E CONTRASPARA ADOTAR
CONCLUSÕESALGUMAS, PELO MENOS
NÃO SÃO REGRASGUIDELINES
OFEREÇA MEIOS PARADESCOBERTA
SABEDORIA ALÉM DOTOPO DO APP
NÃO AVACALHE OBACK STACK
ANDROIDDEVELOPER@ubiratanfsoares google.com/+UbiratanSoares[email protected]ubiratansoares.com.br