Patrones de navegación y animaciones - iOS y Android

A talk I gave with a good friend and an excellent iOS dev{signer} (Felipe Hernandez) in Santiago de Chile about iOS/Android navigation and animation patterns.

Transcript

1. @FelipeDev Felipe Hernández R. iOS magician @_juanmnl Juan Manuel Cornejo Experience {Dev}signer
2. Patrones de Navegación & Animaciones
3. Patrones de Navegación iOS || Android
4. LAYOUT NAVEGACIÓN INTERACCIÓN Core UX
5. INTERACCIÓN LAYOUT NAVEGACIÓN Core UX
6. ¿Pára que nos sirve? • ¿Cómo navegar entre las diferentes secciones de nuestra app? • ¿Debo usar la navegación Drawer o la de Tabs? • Si uso Tabs, ¿deben ir abajo o arriba? • ¿Cómo regresar de la vista actual? • ¿Cómo mantener contexto?
7. El medio
10. Tabs
11. iOS En iOS los “tabs” se encuentran en la parte inferior de la pantalla. Es un patrón de diseño de navegación bastante familiar, utilizado por muchos productos con una larga historia de éxito, como Facebook, Twitter e Instagram. Los “tabs” de iOS consisten –típicamente– de un icono con texto. Patrones comunes: • Tab de Inicio (contenido principal/home) • Tab de Búsqueda (si hay contenido buscable) • Tab de Composición / Creación • Tab de Notificaciones • Tab de Perfil/Usuario
14. Android En Android, los Tabs se encuentran en la parte superior de nuestra pantalla y están –usualmente– representados por texto o ícono (a diferencia de iOS), a menos que se utilice la relativamente nueva Boston Navigation.
 
 Common Patterns:
15. Tabs
16. Swiping
17. Bottom Navigation Bar Google says the following on Tabs vs. Bottom Navigation: Tabs make it easy to explore and switch between different views and Bottom Navigation bars make it easy to explore and switch between top-level views in a single tap.
18. Side navigation/drawer
19. iOS Navigation Drawers are not a native design pattern. They came to the platform as iOS design evolved but are still an important part of navigation in a lot of applications. *Since Apple does not provide an API to implement Navigation Drawers, developers typically use third party libraries.
21. Android Navigation Drawers are a native design pattern, so Google provides you with the APIs you need to build a navigation drawer, no need to search for a third party APIs.
 

23. Top Bars
24. iOS On iOS the top bar is called the Navigation Bar. The Navigation Bar’s main purpose is to allow the user to navigation through a series of hierarchical app screens via usage of the back button. Navigation Bars typically include: • The title of the section the user is currently on • A back button on the left if there’s a screen to navigate back to • A content control element on the right if applicable (like Search)
26. Android On Android the top bar is called the Toolbar.
 Android’s Toolbar is more standardized than iOS and typically includes: Navigation Bars typically include: • The title of the section the user is currently on • An Up button on the left if there’s a screen to navigate back to • A Navigation Drawer button if there is no Up button • Menu buttons and overflow menu with more options The menu buttons and overflow menu can be used as an both alternative and a supplement to a Side Navigation Drawer. An overflow menu can potentially remove the need for a Side Navigation Drawer depending on how many different views your app needs to contain. Alternatively, you can let each section from your Side Navigation Drawer have it’s own overflow menu with further options that your user can interact with.
28. Back Buttons (y la Navigation Bar de Android)
29. iOS
30. Android Since Android has an onscreen navigation bar, the design documentation distinguishes between The Up Button and the Back Button.
 
 The back button is part of the Navigation Bar and “navigates in reverse chronological order through the history of recently viewed screens”. While the Up button won’t take users out of your app, the Back button can take the user from the current app to the one they were previously using.
32. INTERACCIÓN LAYOUT NAVEGACIÓN Core UX
33. LAYOUT NAVEGACIÓN INTERACCIÓN Core UX
34. LAYOUT NAVEGACIÓN INTERACCIÓN Core UX
35. Animaciones La percepción de la interacción
36. ¿Que es una animación?
37. ¿Por qué usarlas?
38. “We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content.” Zurb Co. ¿Por qué usarlas?
39. Por que el detalle importa. ¿Por qué usarlas?
40. How do you feel today? Normal Fun El detalle importa
41. How do you feel today? El detalle importa
42. ¿Cuándo usarlas?
43. On boarding (splash): Crear toda una experiencia el ingresar a una app. Cuándo usarlas: On Boarding
44. Cuándo usarlas: On Boarding
45. Cuándo usarlas: Loading Loading: No podemos controlar el tiempo, pero ciertamente podemos hacer la espera mucho más placentera.
46. Cuándo usarlas: Loading
47. Cuándo usarlas: Micro Interacciones MicroInteracciones: Objetos móviles captan inmediatamente la atención del usuario.
48. Cuándo usarlas: Micro Interacciones - Crear un hábito. - Seguir el tema general de la app. - Evitar interacciones indeseadas/innecesarias.
49. Cuándo usarlas: Micro Interacciones
50. Cuándo usarlas: Transiciones Transiciones de pantalla: La animación más básica en cualquier ambiente
51. Cuándo usarlas: Transiciones - Transportar al usuario entre contextos de navegación. - Jerarquía visual y conexión entre elementos
52. Cuándo usarlas: Transiciones
53. Cuándo usarlas: Transiciones
54. Cuándo usarlas: Transiciones
55. Cuándo usarlas: Reforzar una acción Visualizar el resultado de una acción. Animaciones pueden mejorar cada punto de interacción y reforzar la acción que un usuario está ejecutando.
56. Cuándo usarlas: Transiciones
57. Palabras finales
58. ¿Preguntas?
59. Gracias :D @felipeDev @_juanmnl
61. Recursos: - www.ramotion.com - www.uxplanet.org - www.zurb.com - www.raywenderlich.com - www.babich.biz - www.uxpin.com