Embed Size (px)
DESCRIPTION
Citation preview
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
