Patrones para el diseño móvil

Transcripción

1 Patrones para el diseño móvil Experiencia de Usuario en Aplicaciones Móviles Pau Giner

2 Diseño móvil Principios y patrones

3 15 principios para una interacción armónica y su aplicación al ámbito móvil

4 1. Sigue los modelos mentales de los usuarios Plantear la interacción en los términos del usuario

5 Alineamiento con los comportamientos móviles Debemos tener en cuenta el patrón de comportamiento que tendrá el usuario: Buscar Explorar/jugar Informar/ser informado Editar/crear

6 Buscar Urgente Necesito la información ya (generalmente en el contexto espacio-temporal)

7 Explorar/jugar Aburrimiento Buscar una distracción para pasar el rato

8 Informar/ser informado (repetición) Repetición Crear y seguir la pista de información

9 Editar/crear Urgente Necesito realizar algo ya que no puede esperar

10 2. Busca la simplicidad Menos es más

11 Primar el contenido sobre la navegación Reducir la navegación al mínimo Llevar al usuario directamente al contenido

12 Ocultar la navegación en un cajón

13 Navegación superpuesta

14 Navegación en otra vista (hub and spoke)

15 Navegación en otra vista (drill-down)

16 Navegación filtrada y/o multi-panel

17 Permitir la navegación lateral

18 Integrar contenido en la navegación

19 Evita replicar artefactos analógicos en el mundo digital

20

21 3. Permite al usuario tomar el control

22 Evita opciones invalidas

23 Evita exponer las interioridades del sistema

24 Proporciona una alternativa

25 4. Pon las herramientas al alcance de la mano Proporcionar la ayuda cuando se necesita

26 Pon físicamente cerca lo que conceptualmente esté cerca Cerca = distancia en pantalla + tiempo + ubicación...

27 Las herramientas más comunes deben ser más prominentes y no podemos usar el "pasar por encima" (hover)

28 Mostrar elementos al tocar o deslizar Puede ser dificil de descubrir: dar pistas o pensar alternativas.

29 Mostrar en una vista aparte Evita la sobrecarga de información pero puede complicar la navegación.

30 Expón funcionalidad específica como widgets

31 5. Proporcionar feedback no bloqueante No rompas el flujo de las acciones del usuario

32 No hagas preguntas absurdas

33 No pidas permiso si puedes pedir perdón

34 6. Diseña para lo probable, permite lo posible El diseño debe optimizarse para resolver las necesidades esenciales

35 No intentes cubrir todas las posibilidades

36 El orden de las listas es diferente según el uso habitual

37 7. Proporciona comparaciones Proporciona información útil, no datos aislados

38 Proporciona datos de manera que puedan responder a las preguntas de los usuarios (mucho, poco, reciente,llega al objetivo...)

39

40

41 8. Permite la manipulación directa

42 Gestos Es necesario introducir ayudas (gráficas, textuales, etc.) que permitan descubrir los gestos a realizar o alternativas.

43 Toque (tap) y doble toque

44 Arrastrar (drag) y deslizar (swipe)

45 Ampliar (pinch) y rotar

46 Y muchos más...

47

48

49 No olvidar la manipulación indirecta Existen dispositivos y medios de interacción alternativos a los gestos, debemos considerar representaciones alternativas para keypad, etc.

50 9. Indica el estado de los objetos y la aplicación

51 Elige el grado de prominencia adecuado No avisar, avisar, o preguntar

52

53

54 Comunica las esperas

55

56 10. Evita la información innecesaria

57 Haz buen uso del espacio

58 En un móvil

59 En un tablet

60 Patrones para adaptar el contenido Tamaño de pantalla Rotación

61 Expandir el area de visión

62 Estirar el contenido

63 Mostrar/ocultar elementos

64 Reubicar

65 11. Evita hojas en blanco y los callejones sin salida

66 Proporciona valores por defecto esperados

67

68 Ofrece una salida interesante

69 12. Diferencia entre acción y configuración

70 Las acciones no deben incluir pasos de configuración

71

72 Trata de anticipar las necesidades del usuario

73 13. Proporciona opciones

74 Evita las preguntas abiertas

75 Proporciona ayuda para la entrada de datos

76 Entrada compacta

77 Entrada flexible

78 Entrada específica Usa controles que ayuden a introducir el tipo de información requerida.

79 Entrada mínima Anticipandose a las necesidades de entrada.

80 14. Esconde los botones peligrosos

81 Evitar las sorpresas al accionar accidentalmente: Cambios radicales en la interfaz Aciones irreversibles

82 Los elementos tocables deben ser suficientemente grandes. 7-9mm para la zona activa de los elementos (su representación puede ser menor) y 2mm de separación.

83 La zona confortable La zona de acceso confortable es habitualmente la accesible por el pulgar derecho.

84

85 15. Optimiza el tiempo de respuesta Intenta que no parezca lento

86 Comunica la espera

87 Evita bloquear la interfaz

88

89 Usa transiciones

90 Permite reanudar en el punto dónde te quedaste

91 Actividad: Revisa tus diseños Comprueba que siguen los principios marcados y aplica algunos de los patrones si no lo hacen. (Puedes encontrar más patrones en la sección de "material relacionado")

92 Material relacionado

93 Librerías de patrones androidpatterns.com inspired-ui.com lovelyui.com mobile-patterns.com mobiledesignpatterngallery.com pttrns.com uiparade.com

94 Guias Apple ios Human Interface Guidelines Google Android User Interface Guidelines Microsoft Surface Design and Interaction Guide Microsoft UX Design Guidelines for Windows Phone Design guidance for Windows Store apps Mozilla Firefox OS UX documentation Nokia Design and User Experience Library

95 Contenidos! Técnicos! Interacción,! Usabilidad,! Persistencia,! Redes adhoc,! Herramientas,! Web Movil,! VideoJuegos! casual.! Emprendedores y Empresas! Nuevos paradigmas:! II Edición (Octubre 2013 Junio 2014)! Máster Universitario en! Tecnologías Software Avanzadas para Dispositivos Móviles! Introducción al proceso! de creación de empresas!

96 Cuestiones! Logísticas! II Edición (Octubre 2013 Junio 2014)! Máster Universitario en!! Tecnologías Software Avanzadas para Dispositivos Móviles! Horario! Viernes:!16:00-21:00! Sábado: 9:00 14:00! Dispositivos proporcionados por USJ durante el máster! Macbook Pro, ios (movil, tableta), Android (movil, tableta), Kit Arduino! Matrícula! Alumnos Nuevos: 6600! Continuar estudios:! 30% descuento = 4620! Becas! Excelencia (nota carrera = 7,5) 60%! Empresa (practicas empresa) 50% - 100%!! Aspectos Técnicos:! Carlos Cetina! ccetina@usj.es! Director Máster! Logística y Becas:! Marcos Lizarbe jmlizarbe@usj.es! Información Universitaria! Opinión Alumnos:! Alberto Reche! alu.29046@usj.es! Delegado I Edición!