Interfaces

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

Armando  Fidalgo  
K. Hofmeester&K. Markiewicz
Diseñar  para  tocar  
 Adecuación de los elementos de la interfaz al
tamaño de los dedos

Istargazer
Tamaño  del  obje9vo  
Adecuación de los elementos de la interfaz al
tamaño de los dedos
Punta:
8-10 mm

Yema/pulpejo:
10-14 mm Diametro:
16-20 mm
 Tamaño  del  obje9vo  
7 mm

7 mm Recomendado general

9 mm

Óptimo por precisión

9 mm §  Para cerrar, eliminar o acciones graves o
importantes

5 mm
Óptimo para tamaños pequeños
5 mm §  Si se necesita apilar gran cantidad de
elementos
El tamaño del objetivo influye en la
tasa de errores
 Efecto  iceberg  

Objetivo visual

Área táctil

OK
 Zona pulsable

La zona pulsable debe ser igual o mayor al

tamaño real (visual) del botón.

13
 Espacio  en  blanco  entre  obje9vos  

2 mm

2 mm (al menos) de separación visual reduce

errores y la percepción de dificultad.

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

T. Wood
 Espacio muerto

El espacio muerto reduce el peligro de pulsar otro

botón por equivocación.

17
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 Dificultar las
principales acciones
decisivas
Acciones
principales
Acciones
habituales
 Áreas  de  interacción  

Raizlabs
Evitar situar
controles en el
centro superior
Los  lenguajes  tác,les  
  
Hay  muchas  posibilidades...  
 

Gestureworks
  
Caracterís9cas  de  nuestra  anatomía...  
 
Convenciones...  
 Drag (2
Tap DblTap Fling Drag Spread Pinch Press Rotate
Fngr)

Pinch Pinch Touch & 2- Finger

iOS Tap DblTap Flick Drag X
Open Close Hold Scroll

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

Swipe /
Touch &
webOS Tap DblTap Flick Touch Spread Pinch X Rotate
Hold
&Drag

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

N. Koechley
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
 Toques de realismo

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

Respuesta inmediata a cada toque del usuario

Mostrar inercia en los objetos y contenidos que se pueden mover

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

Amplio consumo de espacio

Ruido visual y distracción

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

Personalización

Efecto de teclado mecánico

Feedback inmediato
Animación:  interacción  más  natural  
e  intui,va  
E. Muybridge
Sensación de realismo usando
efectos del mundo físico

Inercia

Velocidad

Aceleración y desaceleración

Elasticidad

Fricció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

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

pasar a continuación.
 Dirige la atención del usuario

La percepción periférica del movimiento es eficiente

Puede ayudar en los cambios de elementos

pequeños o fuera del centro de la pantalla
 Ofrece continuidad y mantiene el flujo

Las transiciones suaves añaden realismo

Crea consistencia y continuidad

Las transiciones deben ser suaves y sutiles para no

llamar la atención hacia sí mismas
 Ofrece continuidad y mantiene el flujo

Reducir el cambio entre pantallas puede mantener 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 Copia del Nuevo

tecnología lenguaje antiguo lenguaje

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
 Las interfaces futuras estarán basadas en todos
los sentidos humanos
THE MAGIC COMES
WHEN WE BLEND
THE SENSES TOGETHER
 Métodos  de  intput  

Microsoft
 Métodos  de  output  

Microsoft
 m e d ia ta e s tr a b a ja r en la
Nuestra tarea más in
interacción táctil
 ¡Gracias!  

Gracias  a  Dani  Armengol  

armando@usolab.com  
afidalgo@gmail.com