Interacción Persona - Ordenador

Transcripción

1 Interacción Persona - Ordenador Diseño para móviles Dr. Pedro Latorre Dra. Sandra Baldassarri Dra. Eva Cerezo

2 Interfaces móviles Interfaces móviles Dispositivos para llevar en la mano y utilizarlos mientras la persona se mueve. Por ej, teléfonos móviles, PDAs, Las aplicaciones que se ejecutan en este tipo de dispositivos se han multiplicado en el último tiempo: En restaurantes para hacer pedidos En supermercados para verificar el stock En educación para soportar aprendizaje a distancia

3 Interfaces móviles Mercado pujante

4 Interfaces móviles Mercado pujante Más de 775,000 (300,000 nativas para ipad)

5 Interfaces móviles Consideraciones de diseño e investigación: A pesar de los avances en interfaces móviles pueden ser complicadas de usar, a diferencia de las GUIs. Especialmente para personas con pocas habilidades manuales o con manos grandes. La clave consiste en diseñar para pantallas pequeñas reales y controlar el espacio limitado que poseen.

6 Interfaces móviles Teléfonos móviles accesibles para todos?

7 Interfaces móviles: panorámica En 2011 se incrementaron en un 11% respecto a wikipedia

8 Interfaces móviles: panorámica En 2011 las ventas de smartphones supusieron un 31 8% dotmobi

9 Interfaces móviles: desafíos Pantallas pequeñas, número reducido de teclas y de controles. Uso de pantallas táctiles ( pero no todos!). Diseños físicos muy variados. La orientación del dispositivo puede cambiar. La usabilidad y las preferencias pueden variar enormemente dependiendo de la destreza y de la entrega del usuario.

10 Interfaces móviles: desafíos Tamaños de pantalla reducidos dotmobi

11 Interfaces móviles: desafíos Diseños físicos muy variados Numeric Keyboard and Joystick Full Keyboard and Touchscreen Half Keyboard and Ball Touchscreen (Multi-touch) Cursor Keys

12 Diseño para móviles Principios de diseño generales Consistencia: Permite a los usuarios transferir su conocimiento y habilidades de una aplicación a otra: Es la aplicación consistente con los estándares de la plataforma? Usa correctamente los controles, vistas e iconos proporcionados por el sistema? Incorpora las características del dispositivo de forma fiable? Es la aplicación consistente consigo misma? El estilo y terminología de texto es uniforme? Los mismos iconos siempre significan lo mismo? Puede predecir el usuario lo que ocurrirá si lleva a cabo la misma acción en diferentes lugares? Es la aplicación consistente con sus anteriores versiones? Se han mantenido los términos y sus significados? Se han mantenido sin grandes variaciones sus conceptos fundamentales?

13 Principios de diseño generales Manipulación directa La manipulación directa de objetos de la pantalla en vez de usar controles para ello hace que el usuario se sienta más involucrado en la tarea y comprenda mejor los resultados de sus acciones. Ejemplos de manipulación directa son: Rotar o mover el dispositivo y que los objetos de mostrados en la pantalla se vean afectados Usar gestos para manipular los objetos en pantalla Ver que las propias acciones tienen resultados inmediatos y visibles Diseño para móviles Gestos en un IPOD

14 Diseño para móviles Principios de diseño generales Feedback (retroalimentación) Con el feedback se responde a las acciones del usuario y se le asegura que se están procesando. El usuario lo espera cuando opera un control y lo aprecia en operaciones que se prolongan en el tiempo. Ejemplos: Los elementos de una lista brillan ligeramente al ser seleccionados Si la operación lleva más de unos pocos segundos aparece una barra de progreso y/o un mensaje explicatorio Animaciones sutiles que clarifiquen al usuario el resultado de sus acciones Sonido (no deberían ser el principal o único canal ya que el usuario puede querer/necesitar quitar el sonido según el lugar donde esté).

15 Diseño para móviles Principios de diseño generales Metáforas Cuando los objetos virtuales y las acciones de la aplicación son metáforas de objetos y aplicaciones del mundo real el usuario capta rápidamente cómo usar la aplicación. Las mejores metáforas sugieren el uso sin las limitaciones del mundo real. Ejemplos: Apretar los controles de reproducción de música Desplazar interruptores Hojear las páginas de un álbum de fotos Hacer rodar una rueda de selección

16 Diseño para móviles Principios de diseño generales Control del usuario El usuario y no la aplicación debería iniciar y controlar las acciones. Aunque la aplicación pueda sugerir la secuencia adecuada de acciones o advertir de consecuencias peligrosas, no ha de eliminar el control del usuario. Las mejores aplicaciones son las que encuentran un equilibrio entre dar el control al usuario y la ayuda necesaria para evitar resultados dañinos. El usuario se siente al mando cuando los controles y comportamientos le resultan familiares y predecibles. Si las acciones son simples y directas el usuario las entenderá y recordará más fácilmente. El usuario espera tener siempre la posibilidad de cancelar una operación una vez iniciada y la oportunidad de confirmar una acción destructiva.

17 Interfaces móviles Se pueden distinguir dos tipos de aplicaciones: - contenidos web móviles - aplicaciones móviles ibeer app

18 Contenidos web móviles moritz

19 Buenas prácticas 1 Contenidos web móviles Contenido reducido y útil en cada página En una única columna mejor! 2

20 Buenas prácticas Contenidos web móviles 3 Fácil introducción de direcciones: m.site.com or site.mobi instead of 4 Versiones específicas para diferentes móviles m.facebook.com touch.facebook.com 0.facebook.com

21 Buenas prácticas Contenidos web móviles 5 Navegación simple y poco profunda

22 Contenidos web móviles 5 Navegación simple y poco profunda Líneas horizontales: optimizar para navegación vertical Hilos de Ariadna (breadcrumbs): útiles sólo para más de 3 niveles

23 Home Heading Contenidos web móviles Navigation Aux. Section Section 1 Highlights Section 1 Heading Heading Content Section 2 Highlights Section 2 Content Navigation Footer Heading Navigation Footer Content Footer 5 Navigation Footer La navegación puede ser presentada de forma diferente (arriba en la página de inicio la navegación y búsqueda en el sitio y abajo en las de contenidos)

24 Buenas prácticas 6 Contenidos web móviles Optimización para degradación Normal Sin CSS degradación agraciada vs mejora progresiva

25 Buenas prácticas Contenidos web móviles 7 Formularios muy simplificados con botones claros minimizando la entrada de texto 8 Atajos

26 Buenas prácticas Contenidos web móviles 9 10 Minimizar el ancho de banda Aprovechar las funcionalidades propias del móvil Llamadas Visualización de mapas Localización (GPS) Entradas innovadoras (QR)

27 Aplicaciones móviles Plataformas Diferencias a tener en cuenta: El usuario interacciona con una aplicación cada vez (sólo una aplicación visible) La ayuda en pantalla es mínima La mayoría de las aplicaciones tienen una única pantalla

28 Aplicaciones móviles Buenas prácticas 1 Optimizar la presentación de contenidos enfatizar lo que se está viendo/manipulando Pila de pantallas (con animaciones) Dos paneles Lista + Detalle

29 Aplicaciones móviles Buenas prácticas 1 Optimizar la presentación de contenidos enfatizar lo que se está viendo/manipulando Lentes de distorsión Lentes ojo de pez

30 Aplicaciones móviles Buenas prácticas 2 Minimizar la entrada de datos Texto predictivo Filtrado progresivo

31 Aplicaciones móviles Buenas prácticas 3 Optimizar la interacción según el dispositivo lápiz: iconos pequeños; dedo: iconos grandes 4 Diseñar para para pantallas táctiles y no táctiles apariencia y sensación 3D 5 Proporcionar atajos

32 Aplicaciones móviles Buenas prácticas 6 Tener en cuenta el rendimiento La aplicación ha de ser útil, atractiva, fiable y...rápida

33 Guías de estilo Aplicaciones móviles ios Human Interface Guidelines Guía de estilo, de usabilidad, de experiencia de usuario, etc. para iphone e ipad

34 Guías de estilo Android design Aplicaciones móviles Guía de estilo, de usabilidad, de experiencia de usuario, etc. para dispositivos móviles sobre S. O. Android

35 Conclusiones Para generar interfaces para teléfonos móviles hay que tener en cuenta su aspecto físico y el modo de interacción. Es indispensable aplicar los principios generales de diseño y las buenas prácticas (diferenciar aplicaciones móviles de aplicaciones web para móviles). Al igual que para interfaces de carácter general, las guías de estilo facilitan el diseño de interfaces para móviles.