Interfaces  tác,les:    el  desa(o  de  las  tabletas  

Armando  Fidalgo  

K. Hofmeester&K. Markiewicz

Diseñar  para  tocar  

Istargazer

Adecuación de los elementos de la interfaz al tamaño de los dedos

Tamaño  del  obje9vo  

Diametro: 16-20 mm

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  obje9vo  

Ó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

7 mm

Recomendado general 7 mm

El tamaño del objetivo influye en la tasa de errores

Efecto  iceberg  

OK

Objetivo visual

Área táctil

13

Zona pulsable

La zona pulsable debe ser igual o mayor al tamaño real (visual) del botón.

Espacio  en  blanco  entre  obje9vos  

14

2 mm

2 mm (al menos) de separación visual reduce errores y la percepción de dificultad.

15

El espacio entre objetivos táctiles debe ser inversamente proporcional al tamaño de los objetos adyacentes.

T. Wood

17

Espacio muerto

El espacio muerto reduce el peligro de pulsar otro botón por equivocación.

Al  alcance  de  la  mano  

¿Cómo sostienen los usuarios el dispositivo?

Diseñar en función de cómo sostienen el dispositivo los usuarios

Microsoft

Microsoft

 Áreas  de  interacción  

Microsoft D. Saffer

Facilitar las acciones principales

Dificultar las acciones decisivas

Acciones principales

Acciones habituales

Raizlabs

Áreas  de  interacción  

Evitar situar controles en el centro superior

Los  lenguajes  tác,les  

Gestureworks

 Hay  muchas  posibilidades...  

 

 Caracterís9cas  de  nuestra  anatomía...  

 

Convenciones...  

N. Koechley

Tap DblTap Fling Drag Spread Pinch Press Drag (2 Fngr) Rotate

iOS Tap DblTap Flick Drag Pinch Open

Pinch Close

Touch & Hold

2- Finger Scroll X

WP7 Tap DblTap Flick Pan Pinch Pinch Touch & Hold X X

webOS Tap DblTap Flick Swipe /Touch &Drag

Spread Pinch Touch & Hold X Rotate

Android Tap DblTap Flick Drag Pinch Pinch Touch & Hold X X

Gestos  principales  

§  Seleccionar un elemento o control

§  Scroll rápido

§  Abrir §  Acercar y centrar un bloque de contenido o una imagen.

§  Alejar si algo está acercado.

§  Borrar §  Mover §  Desplazar

§  Mover o desplazar §  Hacer scroll rápido

§  Reducir o encoger un objeto §  Zoom out /alejar

§  Ampliar o agrandar un objeto §  Zoom in /acercar

§  Cambiar modo §  Hacer scroll

Mover

Ajustar

Girar o voltear un objeto

Gestos  básicos  

46

Asegurar que el usuario puede realizar las acciones principales y acceder a los contenidos principales

Proceso alternativo

No recargar la pantalla de controles

Hacer la interacción reversible

Cuanto más complicados sean los gestos, menos personas podrán realizarlos

Emular  las  interacciones  “naturales”  

Acción  y  manipulación  directa  

Acción – reacción/percepción están cerca, similar al mundo físico

B. Pagán

Proximidad espacial: la acción del usuario está cerca físicamente del elemento sobre el que actúa

Proximidad temporal: el elemento de la interfaz reacciona al mismo tiempo que la acción del usuario

Acción paralela: hay correlación (orientación, escala, velocidad….) entre la acción del usuario y la reacción del elemento en la interfaz

Interactuar directamente con el contenido

Interactuar directamente con el contenido

Interactuar directamente con el contenido

El contenido es la interfaz

El contenido es lo principal

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 ”

“

Respuesta inmediata a cada toque del usuario

Manipulación directa del contenido, en lugar de uso de controles

Mostrar inercia en los objetos y contenidos que se pueden mover

Toques de realismo

Utilización de metáforas del mundo físico

Realismo visual = realismo de interacción

No romper la metáfora

Skeuomorphism is the use of previously necessary design elements in a place they are no longer necessary in order to increase appeal or usability Andrew Watterson ”

“

Pistas de comportamiento falsas

Ruido visual y distracción

Amplio consumo de espacio

Asumir que es conocido y familiar

Leather buttons ... feels very much like real leather buttons would feel: Tacky. [Calendar app] feels wrong and it is wrong. It’s kitsch. If you use favor style over function to make something look like something it is not, you are not a product designer, you are an illusion artist. Oliver Reichenstein ”

“

Feedback  adecuado  e  inmediato  

Ofrecer un feedback apropiado, claro y a tiempo al usuario para que vea los resultados de sus acciones y conozca qué está pasando con el sistema.

Acción – reacción

Comunicar que la acción se ha realizado con éxito.

Tipos de feedback: §  Visual §  Sonoro §  Táctil

Feedback visual es el principal y más importante.

Cambiar de color

Cambiar de tamaño

Moverse

Feedback sonoro de apoyo, no como sistema principal. Utilizar tonos bajos. Se pueden ofrecer diferentes sonidos según la acción.

Feedback táctil ofrece una respuesta inmediata al usuario. Adecuada para entornos ruidosos. Crea aplicaciones más realistas y refuerza la metáfora física.

Experiencia atractiva y emocional

Efecto de teclado mecánico

Personalización

Feedback inmediato

Animación:  interacción  más  natural  e  intui,va  

E. Muybridge

Inercia

Sensación de realismo usando efectos del mundo físico

Aceleración y desaceleración

Velocidad

Fricción

Elasticidad

Anticipación: Prepara al usuario sobre que lo va a pasar a continuación.

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

La percepción periférica del movimiento es eficiente

Dirige la atención del usuario

Puede ayudar en los cambios de elementos pequeños o fuera del centro de la pantalla

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 entre 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

Futuro:  explorar  un  lenguaje  tác9l  

K. Hofmeester&K. Markiewicz

Multigestos

R. Zinner

Multimodos

Momento  de  transición  

Nueva tecnología

Nuevo lenguaje

Copia del lenguaje antiguo

Asegurar la interacción básica

Fomentar la creación e innovación

Buttons are sometimes a lazy touch designer’s easy way out, but sometimes they’re a necessity Suzanne Ginsburg ” “

La comunicación humana es mejor cuando combina varios sentidos

THE MAGIC COMES WHEN WE BLEND THE SENSES TOGETHER

Las interfaces futuras estarán basadas en todos los sentidos humanos

Métodos  de  intput  

Microsoft

Métodos  de  output  

Microsoft

Nuestra tarea más inmediata es trabajar en la

interacción táctil

Gracias  a  Dani  Armengol  

armando@usolab.com  afidalgo@gmail.com    

¡Gracias!