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, óil 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 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

5 Interfaces móviles Telefónos móviles accesibles para todos?

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

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

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

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

10 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

11 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 ió consistente t con sus anteriores versiones? Se han mantenido los términos y sus significados? Se han mantenido sin grandes variaciones sus conceptos fundamentales?

12 Diseño para móviles 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 Gestos en un IPOD

13 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é).

14 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. ió 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

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

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

17 Contenidos web móviles moritz

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

19 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

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

21 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

22 Home Heading Navigation Section 1 Highlights Section 2 Highlights Footer 5 Contenidos web móviles Section 1 Heading Section 2 Content Heading Navigation Content Footer Navigation Aux. Section Heading Content Navigation Footer 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)

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

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

25 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)

26 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

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

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

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

30 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 /TR/ basic10-tests/

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

32 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

33 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