Diseño de interface para pantallas táctiles. Touch Design vs. Click Design.

El diseño para
interfaces táctiles
Touch design VS Click design

Los dispositivos táctiles modifican nuestra forma de
interactuar con la web y las aplicaciones móviles.
Un paso más allá del concepto responsive, del diseño de
espacios web que fluyen según se visualicen desde un
dispositivo u otro, surge el segundo reto: diseñar y
programar, para un usuario que se relaciona
directamente con el contenido, sin el click de su ratón, sólo
con sus gestos.

01
Contextos para la
interacción de los usuarios
El paradigma de la interacción con el dispositivo y lo que
contiene ha cambiado.

Interacción “tradicional” a
través de periféricos.
Cómo lo hemos hecho hasta ahora.
Del teclado al track-pad

Teclado: lenguaje escrito; código; comandos
(atajos de teclado)

Ratón: movimiento de arrastre; clicks (botón
derecho - izquierdo); scroll.

Pen-tablet: movimiento arrastre; clicks (botón
derecho - izquierdo); scroll.

Track-pad: movimientos y clicks sobre un
panel y gestos.

Interacción a través de
pantalla táctil.
Este es el cambio sustancial.

Interacción del usuario
directamente con el contenido.

Éste es el cambio sustancial que afecta a la manera en que
el usuario interactúa con el dispositivo y el contenido, y
por extensión a la manera en la que nosotros tenemos que
pensar y diseñar esa interacción y esos contenidos.

Tipos de dispositivos
táctiles.
Más allá de los móviles y tablets.

● Cajeros automáticos
● Quioscos
● TPVs - Terminales de Punto de Venta
● Mezcladoras de sonido - bandejas
● Monitores de ordenador
● Ordenadores portátiles
● PDAs - Personal Digital Assistant (Asistente digital personal)
● Teléfonos móviles (los hay táctiles, que no son smartphones)
● Smartphones
● Phablets*
● Tablets
● Reproductores MP3
● Cámara digitales
● Otros: impresoras, escáneres, cafeteras...
* Phablet es un dispositivo cuyo tamaño es mayor que el móvil y menor que la tableta.
Incluye las características del móvil, tableta, escritorio y portátil.
Su principal característica es una pantalla de 4-5 pulgadas.

Cajeros automáticosQuiosco TPV
Bandeja de sonido PDA

Cámara digitalReproductor MP3
Monitores interactivos

De entre los distintos tipos de dispositivos táctiles, nos
centramos en el segmento que corresponde a los
smartphones y tablets.
Al inicio de su comercialización la diferencia entre
smartphones y tablets quedaba marcada por la diferencia de
funcionalidades y del tamaño de pantalla.
Esta frontera se va desvaneciendo.

Y hablando de tamaños, ¿cuál es el nuevo 1024x768?
No es posible hablar de tamaños de pantalla standard.
Porque ya existen multitud de posibilidades y porque constantemente salen
nuevos formatos al mercado.

02
La pantalla táctil,
adiós al click

La pantalla táctil es una pantalla de visualización
electrónica, a través de la cual el usuario puede
controlar su contenido mediante gestos simples o
múltiples, con uno o más dedos.
La definición.

El usuario puede utilizar la pantalla táctil para reaccionar
a lo que se muestra y para controlar la forma en que se
muestra (más grande, más pequeño, giros…).

Algunas pantallas táctiles también pueden
detectar objetos, como un lápiz óptico o guantes
recubiertos especiales.

Pequeños apuntes históricos.
- La primer interfaz táctil está patentada por Samuel C. Hurst en 1971.
Este desarrollo sirvió como base inicial para la infinita variedad de dispositivos
que hoy utilizan este tipo de interfaz.
- En el año 2000 esta tecnología se usó en los teléfonos móviles con la
aparición de un modelo de Motorolay casi al mismo tiempo un Ericssonque
hacía las veces de organizador personal y móvil.
- A finales de 2006 y principios de 2007, con la aparición del primer iPhone y
otros móviles táctiles, el término táctil se convierte en una palabra corriente en
nuestro lenguaje diario.
Fuente: http://cydmatica.blogspot.de/2013/05/pantallas-tactiles-su-historia.html

Tipos de pantallas táctiles
según su tecnología, las más extendidas:
- Resistivas
- Capacitativas
- Infrarrojas
Otras tecnologías: Onda acústica, imagen óptica, galgas extensométricas, de
señal dispersa, de reconocimiento por pulsos acústicos...

Pantallas resistivas
Son las más económicas y no les afectan el polvo ni el agua, y son
precisas y pueden ser usadas con un puntero o con el dedo. Sin
embargo, pierden hasta un 25% del brillo y son gruesas.
“Las pantallas resistivas son más baratas y están más extendidas, por ejemplo en los
Pocket PC de Windows Mobile o el Nokia 5800.”
http://www.xatakamovil.com/desarrollo/pantallas-tactiles-capacitivas-vs-
resistivas

Pantallas capacitativas
Muy buena calidad de imagen, tienen mejor respuesta que las
anteriores y algunas permiten el uso de varios dedos a la vez
(multitouch).
Son más caras y no se pueden usar con puntero normal, sino con uno
especial para tal fin o con un guante también especial para ello.
“Las pantallas capacitivas son más caras de fabricar y
están presentes en el iPhone o el LG KF750 Secret,
entre otros móviles.”
http://www.xatakamovil.com/desarrollo/pantallas-tactiles-capacitivas-vs-
resistivas

Pantallas infrarrojas
Entre las ventajas está que se puede tocar además de con el dedo, con
cualquier otro objeto o con guantes. También son multitouch aunque
son más caras que las dos anteriores. Lo último son las pantallas LED
infrarrojas.

Fuente: http://www.netambulo.com/2012/11/13/tipos-de-pantallas-tactiles-resistivas-capacitivas-e-infrarrojas/

03
El usuario que todo lo toca.
Conoce a tu público.

● Población mundial = algo menos de 7.000 millones de personas.
● En el mundo hay más de 5.000 millones de teléfonos móviles.
● De los cuales 1.075 son smartphones.
Fuente: Wikipedia
Algunas cifras. En 2013...

● Los usuarios de teléfonos móviles serán 9.300 millones.
● De los cuales 5.600 millones serán smartphones.
Fuente: El mundo
Y una previsión para el 2019...

Según la fuente, los datos pueden resultar sorprendentes.
Af-studio.pl y supermonitoring.com arroja los siguientes datos sobre
2013:
● 91% de todas las personas del planeta tienen un móvil.
● 56% tienen un smartphone.

● 50% de los usuarios de teléfonos móviles, lo usan como
su fuente principal de Internet.
● 80% del tiempo utilizado en dispositivos móviles, lo usan
dentro de las aplicaciones.
● 72% de las personas que tienen tablet, hacen compras
online cada semana. (Guau!)

Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
Telefonía y móviles
Evolución de mercado de los smartphones entre 2011 y 2013.

Tablets
Evolución de mercado de las tablets entre 2010 y 2013.
18
millones
15 millones
iPads
3 millones
Android
68,7
millones
40 millones
iPads
30 millones
Android
128
millones
55 millones
iPads
70 millones
Android
221
millones
77 millones
iPads
134 millones
Android
2010 2011 2012 2013
Fuentes:
http://blog.seinet.es/evolucion-de-la-venta-de-tablets-en-tres-anos/
http://iblnews.com/story/80962

Y si nos mojamos sacando conclusiones...
Android parece ser la plataforma
mayoritaria en ambos mercados:
móviles y tablets.

Y si nos mojamos sacando conclusiones...
Pero quizá la tendencia de uso y aspecto
en las tablets, haya sido creada por la
plataforma Apple.

¿Qué hacemos con el móvil?
● 32% en juegos
● 18% navegar en la red
● 18% en Facebook
● 8% en utilidades
● 8% en entretenimiento
● 6% en redes sociales
● 2% en noticias
● 2% en productividad
● 6% para otros usos

Además...
● El 50% de los usuarios de internet lo hace de manera
principal o exclusiva a través de smartphones.
● El consumo medio de Apps en un periodo de 30 días es
de 6,5.
● El 80% del tiempo está dedicado a las Apps.

Otros datos importantes
● Frente al casi 30% de los mails que son abiertos en los
móviles, sólo un poco más del 10% se hace desde las
tablets.

● 60% de los usuarios de Twitter accede a través de su
smartphone
● 44% de los usuarios de smartphone ha dormido con
su dispositivo en su mesilla de noche para no
perderse ninguna notificación.

¿Qué hacemos con la tablet?
Fuente:
http://www.tabinnovation.com/informetab/
A nivel estatal, contamos con el #informeTAB de UNIR, elaborado en
2013 por Redbility. El informe analiza cuáles son los principales
terminales empleados, qué empleo se le da, cuál fue el motivo de
compra y a qué otros dispositivos sustituye.

Algunas conclusiones:
● Las tablet más comunes son los diferentes modelos de
Apple y Samsung.

● La tablet es el sustituto del ordenador portátil en el
ámbito doméstico.
● Los motivos de compra: se menciona la comodidad,
y el hecho de que haya sido un regalo.

¿Cuándo utilizamos la tablet?
● Por la mañana en el trabajo
● Por la tarde en el sillón
● Por la noche en la cama

¿Y para qué?
● Para comunicarse (ya sea por mail o redes sociales)
● Para informarse (lectura de prensa online, información
meteorológica, viajes…)
● Para jugar.

También para los niños
● En 3 de cada 10 hogares, los niños usan las tablet,
principalmente entre los 7 y los 12 años, lo que supone
aproximadamente el 77% del total de hogares con hijos
(fuente: INE).

Y si volvemos a los datos internacionales…
● El 80% de los usuarios de smartphones y
el 81% de los usuarios de tablets utiliza su
dispositivo en frente de la televisión.
¿interactuamos o sólo es el lugar donde está el sofá?

04
Tocar para comprar.
¿Compramos a través de
tablets y móviles?

El 68% de los usuarios de móviles
busca información sobre productos a través
de su dispositivo.
De este 68%, el 35% compra a través de su
teléfono móvil.

El 67% de los usuarios de tablets
busca información sobre productos a través
de su dispositivo.
De este 67%, el 41% compra a través de su tablet.

Tab-commerce
● El 56% de los usuarios de tablet reconocen emplear la
tablet para comprar, casi el doble que la tendencia de
compra normal de internautas.
● El 77% de ellos prefieren consumir a través del
navegador, antes que con la APP de comercio
electrónico.

Negocio a través de smartphone y tablet
La tendencia al uso del móvil estando en el comercio para incrementar la
experiencia de la compra es a la alza.

¿Para qué utilizamos los smartphones y tablets en nuestro proceso de
compra, e incluso en la tienda/negocio?
● Para comparar la compra
● Para buscar cupones de descuento
● Para buscar versiones del producto
● Para obtener información adicional
● Para consultar opiniones sobre el producto
● Para comprar on-line en vez de en la tienda

Negocio a través de smartphone y tablet
● 52% de los usuarios de tablet prefiere comprar
utilizando su tablet que su PC.
● Los usuarios de tablets gastan un 50% más de dinero
que los compradores a través de PC
● 72% de las personas que tienen tablet, hacen compras
online cada semana.
● Los usuarios de tablets que visitan una tienda on-line
son tres veces más propensos a comprar on-line que
los que lo hacen a través de un móvil.
Fuente: Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.

¿A qué se debe el éxito en la
interacción táctil en este tipo de
dispositivos?
Y después de estos datos, nos preguntamo:s

A la naturalidad con la que nos relacionamos
con ellos, mediante gestos ergonómicos.
NUI: Natural User Interface

A la capacidad de simular reacciones físicas
conocidas (gravedad, inercia, velocidad…) en
las reacciones del contenido.

A la relación directa, acercándonos más y
humanizando a ambos: dispositivo y contenido.

A la posibilidad de adaptar el dispositivo a
nosotros y nuestro entorno.

A la sensación de control sobre el dispositivo,
en la que parece que es el objeto el que está
atento a nosotros y no al contrario.

05
Principios básicos del
diseño de interface táctil
Usabilidad en diseño táctil: Smartphones y Tablets

Diseñar para el tamaño
REAL de los dedos
*

Diseñar para el tamaño REAL de los dedos
Hay que adecuar el
tamaño de los
elementos de la
interfaz al tamaño de
los dedos del usuario
Fuente: http://www.slideshare.
net/Afidalgo/interfaces-tctiles-ux-
spain

Y aunque cada uno
tenemos nuestras
manitas...
Punta: 8 - 10 mm.
Yema: 10 - 14 mm.
Diámetro: 16 - 20 mm.

Tamaño del objetivo:
7 mm
7 mm
9 mm
9 mm
5 mm
5 mm
Recomendado general
Óptimo por precisión
Para cerrar, eliminar o acciones importantes
Óptimo para tamaños pequeños
Si hay que listar gran cantidad de elementos
El tamaño del
elemento influye en
el % de errores
*

Tamaño del objetivo:
*
El 9x9 en los iconos de las Apps

Efecto Iceberg
Zona pulsable
La zona pulsable ha de ser
igual o mayor al tamaño
visual del botón
Objeto

Efecto Iceberg
La zona pulsable
ha de ser igual o mayor
al tamaño visual
del botón

Espacio en blanco entre objetivos
2 mm.
Al menos 2 mm. de
separación visual reduce
errores y la percepción de
dificultad

Espacio en blanco
entre objetivos

El espacio muerto (zona no pulsable)
reduce el peligro de pulsar otro elemento por equivocación
Espacio muerto

El espacio muerto (zona no pulsable)

Ergonomía y uso:
smartphones / tablets
*
La interacción se puede convertir en uno de los principales elementos
diferenciadores para una app, web móvil o un responsive design.

Ergonomía y uso: smartphone / tablet
Teléfonos móviles
¿cómo usamos/sostenemos el dispositivo?
Utilizamos los dedos para acceder a información, compartir datos, organizarlos,
ampliar fotografías… y todo esto en multitud de contextos diferentes.

Teléfonos móviles:
¿Cómo usamos/sostenemos el dispositivo?

49% de los usuarios utiliza una mano.
*En el caso de las persona zurdas hacen lo contrario.
Fuente: http://msalazar.aiux.cl/

51% de los usuarios utiliza dos manos.
Fuente: http://msalazar.aiux.cl/
*El 36% utilizan la posición Cradling
(acunado) de dos formas distintas:
con el pulgar o índice.
*El 15% de los usuarios observados
de teléfonos móviles usaban sus
dispositivos con las dos manos
y en dos posiciones.

Tablets:
¿Cómo usamos/sostenemos el dispositivo?

● Diseñamos en función de cómo los usuarios sostienen/usan
los dispositivos, lo que genera una serie de zonas de interacción
más accesibles o zonas calientes.
● Los dedos más utilizados son el pulgar y el índice, y según el
dispositivo y el contexto se usa un dedo, dos o hasta tres
y cuatro.

Teléfonos móviles: Áreas de interacción o
Zonas Calientes
Josh Clark - http://www.netmagazine.com

Teléfonos móviles: Áreas de interacción o
Zonas Calientes
Será en estas zonas donde
intentaremos colocar las acciones:
elegir de una lista, los controles de
un reproductor de música,
siguiente-anterior...
NOTA / Hay acciones decisivas, que están
fuera de la zona caliente, más alejado.
No va a tener un uso tan frecuente.

Tablets: Áreas de interacción o Zonas Calientes
El uso de las dos manos en tablet toma más importancia y se
diferencian las zonas de de fácil acceso y las zonas de navegación

Recomendación: evitar poner información importante en la parte
central superior. Estaríamos tapando el contenido con la propia
mano. (A veces es inevitable, pero debería suceder lo menos posible).
x √

Menú de navegación
● En móviles se tiende a utilizar más los menús en la parte inferior
de la pantalla, más de lo que se hace en las tablets.
● En tablets hay mucha variación si se diseña en vertical u
horizontal. En vertical las soluciones se acercan más a las de móvil
y en horizontal a las de la web.

Gestos inteligentes
y sencillos
*

Existen ciertos gestos que
ya son estándares
Gestos inteligentes y sencillos
Gestos simples: requieren de uno o dos dedos para la
interacción
Multitouch: requieren dos o más puntos de interacción
Se han adoptado como universales, e incluso hay gestos patentados.

Tap - Tocar/Pulsar
Presionar brevemente la pantalla con el dedo.
- Seleccionar un elemento o control
- Scroll rápido

Double tap -Tocar/Pulsar dos veces
Presionar breve y rápidamente dos veces la pantalla con el dedo.
- Abrir.
- Acercar y centrar un bloque de contenido o una imagen.
- Alejar si algo está acercado.

Multi-finger tap - Tocar con varios dedos
Presionar la superficie con varios dedos simultáneamente.
- Seleccionar / desplazar

Drag - Arrastrar/Desplazar/Mover
Mover los dedos presionando la pantalla en cualquier dirección sin
perder el contacto. Este movimiento se usa, por ejemplo, para
desplazar un elemento de un lugar a otro de la pantalla con el objetivo
de desbloquear un dispositivo, etc.
- Borrar
- Mover objetos
- Desplazar

Swipe/Flick - Deslizar
horizontal/Pasar/Navegar horizontal
Mover horizontalmente el dedo por la pantalla con un toque rápido
(pasar páginas, fotos, etc.) En ocasiones se realiza con dos dedos,
buscando otra acción asociada.
- Mover o desplazar
- Hacer scroll rápido

Scroll - Deslizar vertical/Bajar/Navegar vertical
Mover verticalmente el dedo por la pantalla con un toque rápido
(avanzar en un documento, actualizar/recargar una columna...).
- Scroll vertical rápido
- Desplazar vertical

Pinch - Pellizcar/Reducir/Disminuir/
Unir dos dedos
Juntar dos dedos manteniendo en ambos la presión sobre la pantalla.
Este movimiento suele usarse para reducir el tamaño del navegador, de
una foto, etc.
- Reducir o encoger un objeto
- Zoom out / alejar

Spread - Ampliar/Extender/Separar dos dedos
Separar dos dedos manteniendo en ambos la presión sobre la pantalla.
Este movimiento suele usarse para aumentar el tamaño del navegador,
de una foto, etc.
- Ampliar o agrandar un objeto, estirar.
- Zoom in / acercar

Press - Mantener pulsado/Presionar
Tocar la pantalla y mantener el dedo durante un periodo
determinado.
- Cambiar estado
- Hacer scroll
- Invocar objeto

Pan - Barrer/Frotar/Limpiar/Rascar
Mover uno o varios dedos sobre la pantalla sin perder contacto,
como si se limpiara.
Se utiliza generalmente para descubrir una imagen escondida.
Lo vemos en este video

Press and tap - Presionar y tocar
Presionar sin soltar la superficie y tocar con un segundo dedo
brevemente la pantalla.
- mover
/

Press and drag - Presionar y arrastrar
Presionar sin soltar la superficie y arrastrar con un segundo dedo
brevemente la pantalla.
- mover a diferentes niveles de manera vertical u horizontal
/

Rotate - Rotar / Girar
Presionar en dos puntos simultáneamente y deslizar en forma de
curva.
- girar objetos
//

Los gestos persiguen un mismo objetivo:
Simplificar y facilitar al máximo la
interacción del usuario.

A través de los gestos debemos:
Asegurar que el usuario puede
realizar las acciones básicas y
acceder a los contenidos más
importantes.
*Cuanto más complicados sean los gestos, menos personas
podrán/sabrán realizarlos.

Existen referencias o guías de diseño en las
principales plataformas:
Windows
http://msdn.microsoft.com/es-
es/library/windows/apps/hh465415.aspx
iOS 7
https://developer.apple.
com/library/ios/documentation/UserExperience/C
onceptual/MobileHIG/index.
html#//apple_ref/doc/uid/TP40006556-CH66-SW1
Android
http://developer.android.com/design/index.html
Es muy recomendable consultarlas.
*

Naturalidad en las
interacciones
*
NUI - Natural user interface.
Aplicamos al diseño de interface toda la experiencia táctil
que llevamos aprendiendo en nuestra vida.

Naturalidad con las interacciones

Interactuamos directamente con el contenido.
La manera de saber que eso es así es que el contenido reaccione, a ser
posible de la manera más natural posible, con nuestro tacto. Y para eso
hay una serie de directrices.
¿Cómo consigues que navegar en un entorno móvil sea intuitivo?
Evidenciando con todos los recursos posibles todas las zonas
navegables.

1. Proximidad espacial. La acción del usuario está cerca
físicamente del elemento sobre el que actúa.
Para que sea natural:

2. Proximidad temporal. El objeto de la interfaz reacciona al
mismo tiempo que la acción que realiza el usuario.

3. Correlación paralela (orientación, escala, velocidad…)
entre la acción del usuario y la reacción del elemento en la
interfaz.

Como conclusión, al interactuar directamente con el
contenido éste se convierte en la interfaz.
Contenido = Interfaz

Eliges contenido.

diseñamos teniendo en
cuenta que el contenido
es lo principal.
Luego...
Se vuelve a cumplir la máxima de que el contenido, con el contexto,
determina el diseño de interface.
Es probable que veamos desaparecer de forma paulatina algunos
controles típicos hasta ahora: siguiente-anterior, volver, ver más...

Aplicar el realismo NO (sólo) como la
representación realística de los objetos.
Integrar realismo
¡Atención! aclaramos la aplicación de realismo

La representación realística de los objetos,
se ha denominado esqueuomorfismo.
Integrar realismo
No siempre se necesita esqueuomorfismo para
que la sensación de realismo sea efectiva.
Es más una discusión estética que de UI.

Integrar realismo
Aspecto plano Esqueoumorfismo

Si bien en algunas ocasiones
ayuda al usuario a entender
mejor cómo funciona el
contenido...
Integrar realismo
...priorizar que lo que vemos sea
constantemente una
representación de nuestra
realidad y abusar de su uso
olvidándonos de la manera de
interactuar puede concluir en
detrimento de la usabilidad

Aclarado ésto, algunas directrices para la integración de realismo:
1. Manipulación directa con el contenido
(en vez de a través de controles)
Integrar realismo

2. Simular las leyes físicas: velocidad, inercia
aceleración, desaceleración, elasticidad, transparencia, gravedad...
Integrar realismo
Por ejemplo:
Hacer pan o swipe (scroll vertical) en Facebook . Se observa que
puede ir más o menos rápido en función de cómo son nuestros
gestos, que posee inercia y desaceleración hasta detenerse.
Esto ayuda al usuario a vivir una experiencia más fluida. Nos gusta.

- Feedback inmediato al toque (respuestas hápticas)
Integrar realismo
● Reacción visual
● Reacción sonora
● Reacción táctil / vibración
hemos comentado antes una respuesta del contenido natural en tiempo y
espacio, pero además podemos tener...
Háptica: designa la ciencia del tacto, por analogía con la acústica (oído) y la óptica (vista).
La palabra, que no está incluida en el diccionario de la Real Academia Española, proviene
del griego háptō (tocar, relativo al tacto).
Fuente: http://es.wikipedia.org/wiki/H%C3%A1ptica

No podemos contar siempre con una reacción sonora o de vibración
pues no siempre se tienen activadas estas prestaciones en el dispositivo.
Integrar realismo
La clave es la
respuesta visual
● Cambio de color
● Cambio de tamaño
● Movimiento

Como elemento que da continuidad a
la interacción
Animación
Cuando abrimos una aplicación.
O elegimos escenarios en una aplicación.

Como complemento a la reacción
visual del contenido
Animación

Como ayuda al usuario a un mejor
entendimiento de lo que está ocurriendo
Animación
Mejora la orientación y fija la atención
Cargando...

06
La web pensada para todos
los dispositivos

Recordando
las etapas en el diseño de interface.
Los elementos de la experiencia de usuario (Jesse James Garrett).
●
● Estrategia. Definición de objetivos e ideas.
● Requerimientos de contenidos.
● Estructura. Arquitectura de la información.
● Diseño de navegación. Wireframing.
● Diseño visual.

En este proceso de diseño...
= =
No es lo mismo
Ux para móvil Ux para tablet Ux para desktop

No es sólo diseñar para móviles o para tablets u ordenadores de
sobremesa, se trata de diseñar en conjunto.
+ +

El diseño sensible o responsive design
tiene en cuenta las características de cada dispositivo.

Algunos consejos útiles a la hora de diseñar en responsive:

1.- Crear una estructura de contenidos
ordenada y una arquitectura de la
información coherente es esencial para
cualquier proyecto web. Pero especialmente a
la hora de diseñar en responsive.
Porque probablemente habrá que sintetizar, jerarquizar y prescindir de cierto
contenido (por ejemplo en los smartphone se suele prescindir del selector de
idioma porque el dispositivo detecta el idioma en el que estás navegando) y
para eso es necesario haber estructurado los contenidos de manera lógica y
ordenada: teniendo en cuenta cómo navega el usuario, cuales son las zonas
‘calientes’, las zonas de navegación más habituales...

2.- Utilizar un grid para estructurar el contenido.
Por ejemplo Bootstrap y su grid de 12 columnas basado en el grid960.

3.- Cuidar el tamaño de las imágenes.
Porque puede darse el caso en el que una imagen en el ordenador de
sobremesa coja menor tamaño que visto desde un smartphone.

5.- Especificar el viewport.
Básicamente, indica cómo debería de comportarse el navegador móvil a
la hora de mostrar en pantalla la página web.
La escala automática se puede prevenir y controlar utilizando el atributo
viewport.

07
Tendencias del diseño táctil
y otras formas de interactuación con los
dispositivos.
Dudas razonables
en el futuro

Realidad / Conclusiones:
Se están dejando de utilizar los ordenadores de sobremesa y
portátiles como medio masivo de navegación.
Todo apunta a que en un futuro a corto/medio plazo los ordenadores
de mesa dejarán de ser el referente para la navegación web, puesto que
quedarán reducidos al uso profesional / laboral.
La navegación masiva en internet se realizará a través de estos otros
dispositivos: smartphone, phablets y tablets.

Nuestra tarea más inmediata...
¿es seguir explorando la interacción táctil?

El lenguaje de comunicación humano es más efectivo cuando se combinan
más sentidos.
¿combinar varios sentidos será la manera de
funcionar en la interface futuras?

En su mayoría, ahora, están pensados para un
uso individual.
Aunque hay excepciones, sobre todo en juegos:
Badland App

Crumble Zone App Omicrom HD App

¿Cuánto de importante será el desarrollo de
dispositivos e interfaces colaborativos (uso
simultáneo por dos o más usuarios)?
XTable Multitouch de Digalix

Nuevos dispositivos implican una nueva manera
de interacción con ellos y con el entorno.

¿Cómo será esa interacción? ¿esa interfaz?
Google Glass

Pantallas táctiles
https://sei.wikispaces.com/file/view/pantallas_tactiles.swf
http://centrodeartigos.com/articulos-noticias-consejos/article_127057.html
http://cydmatica.blogspot.de/2013/05/pantallas-tactiles-su-historia.html
http://www.netambulo.com/2012/11/13/tipos-de-pantallas-tactiles-resistivas-capacitivas-e-infrarrojas/
http://www.xatakamovil.com/desarrollo/pantallas-tactiles-capacitivas-vs-resistivas
http://www.taringa.net/posts/info/8679418/Las-maravillas-tecnologicas-pantalla-tactil.html
Bibliografía

Usos y estadísticas sobre dispositivos
http://www.universoabierto.com/11437/estudio-sobre-el-comportamiento-de-los-usuarios-de-tablet-en-espana/
http://es.wikipedia.org/wiki/Anexo:Pa%C3%ADses_por_n%C3%BAmero_de_tel%C3%A9fonos_m%C3%B3viles
http://sebastianbehar.com/2013/10/10/estadisticas-de-la-telefonia-movil-para-el-2013/
http://www.vuelodigital.com/2012/04/11/120-millones-de-tablets-en-el-mundo/
http://www.iabspain.net/wp-content/uploads/downloads/2012/09/IV-Estudio-IAB-Spain-sobre-Mobile-Marketing-Versi%C3%B3n-Completa.pdf
http://www.puromarketing.com/21/16815/espanoles-duplican-compras-traves-moviles-este-verano.html#
https://www.myvalue.com/blog/explosion-de-compras-a-traves-de-terminales-moviles-en-2013/
http://www.ecommerce-news.es/index.php?option=com_content&view=article&id=3508:las-compras-a-traves-de-dispositivos-moviles-representan-
ya-un-cuarto-del-total-de-las-ventas-online&catid=46:mobile-commerce&Itemid=102
http://cnmcblog.es/2012/04/24/el-peso-del-m-commerce/
http://www.ecommerce-news.es/index.php?option=com_content&view=article&id=4086:el-37-de-las-compras-online-se-realizan-ya-a-traves-de-
smartphones-tablets-y-smart-tv&catid=45:start-ups&Itemid=101
http://blog.seinet.es/evolucion-de-la-venta-de-tablets-en-tres-anos/
http://iblnews.com/story/80962
http://www.universoabierto.com/11437/estudio-sobre-el-comportamiento-de-los-usuarios-de-tablet-en-espana/
Bibliografía

http://www.tabinnovation.com/informetab/
http://www.supermonitoring.com/blog/2013/09/23/state-of-mobile-2013-infographic/
http://www.puromarketing.com/12/16660/moviles-redes-sociales-transformados-habitos-frente-television.html#
http://www.puromarketing.com/21/16815/espanoles-duplican-compras-traves-moviles-este-verano.html#
http://www.ecommerce-news.es/index.php?option=com_content&view=article&id=4086:el-37-de-las-compras-online-se-realizan-ya-a-traves-de-
smartphones-tablets-y-smart-tv&catid=45:start-ups&Itemid=101
Bibliografía

Principios de diseño táctil
http://www.manualdeestilo.com/tabletas-gestos-tactiles-basicos/
http://msalazar.aiux.cl/
http://www.slideshare.net/percynegrete/usabilidad-en-mviles-y-tabletas-diseo-sensible
http://www.latercera.com/noticia/tendencias/2013/09/659-541215-9-los-10-gestos-fisicos-para-dispositivos-moviles-que-han-sido-patentados.shtml
http://www.ideup.com/blog/interaccion-en-dispositivos-moviles-i
http://punchcut.com/perspectives/videos/design-considerations-touch-ui
http://www.slideshare.net/percynegrete/usabilidad-en-mviles-y-tabletas-diseo-sensible?from_search=3
http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx
http://www.slideshare.net/mobile/Afidalgo/disear-para-tabletas
http://www.slideshare.net/Afidalgo/interfaces-tctiles-ux-spain
http://www.creativebloq.com/design/designing-touch-2123037
http://www.slideshare.net/HDVCG/principios-de-la-gestalt-aplicados-al-diseno-de-interfaz
http://www.abookapart.com/products/responsive-web-design
https://www.editorialdigitaltec.com/materialadicional/ID094_VerdinesCampbell_Fundamentosdediseno.cap1.pdf
Bibliografía

Responsive web
http://www.abookapart.com/products/responsive-web-design
http://www.abookapart.com/products/mobile-first
http://mediaqueri.es
Definiciones
Háptica: http://es.wikipedia.org/wiki/H%C3%A1ptica
Phablet: http://en.wikipedia.org/wiki/Phablet
Esqueoumorfismo: http://en.wikipedia.org/wiki/Skeuomorph
Guias de UI de las principales plataformas
Android
http://developer.android.com/design/index.html
iOS 7
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-
SW1
Windows
http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx
Biblografía

Comunicación de marca y Proyectos digitales
www.workoholics.es

Diseño de interface para pantallas táctiles. Touch Design vs. Click Design.

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Diseño de interface para pantallas táctiles. Touch Design vs. Click Design.

Similar a Diseño de interface para pantallas táctiles. Touch Design vs. Click Design. (20)

Más de Worköholics

Más de Worköholics (8)

Último

Último (20)

Diseño de interface para pantallas táctiles. Touch Design vs. Click Design.