Armando Fidalgo Diseñar para tabletas: Interacción táctil y natural
Armando Fidalgo
Diseñar para tabletas: Interacción táctil y natural
Pero... ¿qué es una tableta?
8.9”
10”
6.1”
5.5” 7”
8”
7”
Disfrutar tocando
Organizar la interfaz para tocar
Al alcance de la mano
Al alcance de los dedos
Interacción multitáctil
Interacción y manipulación directa
Sensación de realismo
Feedback inmediato
Animación
Diseñar para tocar
Definir y organizar la interfaz también para tocar
Diseñar en función de cómo sostienen el dispositivo los usuarios
Postura tableta
L. Wroblewski
Áreas de interacción
D. Saffer
L. Wroblewski
Acciones arriesgadas o
elementos UI auxiliares
Botones de acción principales y navegación
Facilitar las acciones principales
Es imposible llegar sin levantar la mano
Evitar situar controles en el centro superior
Lectura cómoda
R. Hinman
Portapapeles
R. Hinman
Al alcance de la mano
Boring et al.
Facilitar el movimiento de la mano
Al alcance del dispositivo periférico de introducción de datos
en el sistema de los dedos
Yema/pulpejo: 10-14 mm
Punta: 8-10 mm
Adecuación de los elementos de la interfaz al tamaño de los dedos
Tamaño del objetivo
7 mm
Mínimo recomendado general 7 mm
Óptimo por precisión 9 mm
9 mm
Para cerrar, eliminar o acciones graves o importantes
5 mm
5 mm
Óptimo para tamaños pequeños Si se necesita apilar gran cantidad de elementos
+10
10
7
Espacio en blanco entre objetivos
2 mm
2 mm (al menos) de separación visual reduce errores y la percepción de dificultad.
Espacio en blanco entre objetivos
30 S. Hoober
Los objetivos táctiles deben estar al menos alejados 8 mm del centro geométrico (preferible 10 mm)
El tamaño del objetivo influye en la tasa de errores
Microsoft
Interacción multitáctil
Gestos básicos
L. Wroblewski et al.
Permitir la interacción múltiple
L. Wroblewski et al.
Lorient
Permitir usar la pantalla entera como control
Pantalla entera como alternativa a taps precisos
Permitir usar la pantalla entera como control
Emular las interacciones “naturales”
NUI exploits skills that we have acquired through a lifetime of living in the World
Bill Buxton, principal researcher en Microsoft
“ ”
Interacción y manipulación directa
1 2
3 4
El contenido es lo principal
Dedicar el máximo espacio posible al contenido
Minimizar el uso del chrome
Interactuar directamente con el contenido
Interactuar directamente con el contenido
Interactuar directamente con el contenido
Interactuar directamente con el contenido
Interactuar directamente con el contenido
Sensación de realismo
When appropriate, add a realistic, physical dimension to your application. Often, the more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it
iOS Human Interface Guidelines
”
“
Feedback: respuesta inmediata al toque del usuario
Manipulación directa del contenido, en lugar de uso de controles
Simular las leyes físicas (inercia, resistencia…) en los objetos
Toques de realismo
Utilizar metáforas del mundo real
Utilización de metáforas del mundo físico
Realismo visual = realismo de interacción
Esqueomorfismo
Antiguo
Kitch
A.Zumbrunnen
Esqueomorfismo
Diseño plano/esqueomorfismo es una discusión estética, de estilos, no de diseño
Feedback inmediato en tiempo y espacio
64
Look and Feel
Visual Sonoro Táctil
Feedback visual es el principal y más importante
Cambiar de color
Cambiar de tamaño
Moverse
Feedback inmediato: el contenido debe seguir a los dedos
Animación: interacción más natural
Animación puede reforzar la metáfora física
Kaist
Inercia
Sensación de realismo usando efectos del mundo físico
Aceleración y desaceleración
Velocidad
Fricción
Elasticidad
Mejora la orientación
Las transiciones visuales mejoran la comprensión de lo que ha pasado
Muestra cambios de estado o situación
Muestra relaciones entre elementos
Dirige la atención del usuario
Las transiciones suaves añaden realismo
Ofrece continuidad y mantiene el flujo
Crea consistencia y continuidad
Las transiciones deben ser suaves y sutiles para no llamar la atención hacia sí mismas
Reducir el cambio de pantallas puede mantener el flujo
Ofrece continuidad y mantiene el flujo
De pantallas discretas a movimiento continuo
Abrir, cerrar y refrescar paneles con gestos
Abrir el contenido y medias en la página
Disfrutar tocando
El placer de la interacción táctil, disfrutar haciendo
Futuro: explorar
Buttons are sometimes a lazy touch designer’s easy way out, but sometimes they’re a necessity
Suzanne Ginsburg
” “
Asegurar la
interacción básica
Fomentar la creación
e innovación
Explorar nuevos lenguajes
Loren Brichter
El futuro depende de nosotros
del diseño
también
¡Gracias!