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

afidalgo@gmail.com

¡Gracias!