Los dispositivos táctiles modifican nuestra forma de interactuar con la web y las aplicaciones para smartphones y tablets.
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 un 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.
2. 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.
3.
4. 01
Contextos para la
interacción de los usuarios
El paradigma de la interacción con el dispositivo y lo que
contiene ha cambiado.
14. É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.
16. ● 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.
22. 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.
23. 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.
25. 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.
26. 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…).
27. Algunas pantallas táctiles también pueden
detectar objetos, como un lápiz óptico o guantes
recubiertos especiales.
28. 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
29. 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...
30. 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
31. 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
32. 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.
35. ● 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...
36. ● 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...
37. 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.
38. ● 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!)
39. 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.
40. 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
41. Y si nos mojamos sacando conclusiones...
Android parece ser la plataforma
mayoritaria en ambos mercados:
móviles y tablets.
42. Y si nos mojamos sacando conclusiones...
Pero quizá la tendencia de uso y aspecto
en las tablets, haya sido creada por la
plataforma Apple.
43. Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
¿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
44. 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.
Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
45. 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.
Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
46. ● 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.
Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
47. ¿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.
49. Algunas conclusiones:
● 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.
50. Algunas conclusiones:
● 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.
51. ¿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
52. ¿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.
53.
54. 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).
55. 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á?
59. 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.
60. 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.
61. 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.
63. 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.
Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
64. ¿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
65. 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.
66.
67.
68.
69.
70. ¿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
71. A la naturalidad con la que nos relacionamos
con ellos, mediante gestos ergonómicos.
NUI: Natural User Interface
72. A la capacidad de simular reacciones físicas
conocidas (gravedad, inercia, velocidad…) en
las reacciones del contenido.
73. A la relación directa, acercándonos más y
humanizando a ambos: dispositivo y contenido.
74. A la posibilidad de adaptar el dispositivo a
nosotros y nuestro entorno.
75. 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.
78. 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
79. Diseñar para el tamaño REAL de los dedos
Y aunque cada uno
tenemos nuestras
manitas...
Punta: 8 - 10 mm.
Yema: 10 - 14 mm.
Diámetro: 16 - 20 mm.
80. Diseñar para el tamaño REAL de los dedos
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
*
81. Diseñar para el tamaño REAL de los dedos
Tamaño del objetivo:
*
El 9x9 en los iconos de las Apps
82. Diseñar para el tamaño REAL de los dedos
Efecto Iceberg
Zona pulsable
La zona pulsable ha de ser
igual o mayor al tamaño
visual del botón
Objeto
83. Diseñar para el tamaño REAL de los dedos
Efecto Iceberg
La zona pulsable
ha de ser igual o mayor
al tamaño visual
del botón
84. Diseñar para el tamaño REAL de los dedos
Espacio en blanco entre objetivos
2 mm.
Al menos 2 mm. de
separación visual reduce
errores y la percepción de
dificultad
85. Diseñar para el tamaño REAL de los dedos
Espacio en blanco
entre objetivos
86. Diseñar para el tamaño REAL de los dedos
El espacio muerto (zona no pulsable)
reduce el peligro de pulsar otro elemento por equivocación
Espacio muerto
87. Diseñar para el tamaño REAL de los dedos
El espacio muerto (zona no pulsable)
88. 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.
89. 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.
90. Ergonomía y uso: smartphone / tablet
Teléfonos móviles:
¿Cómo usamos/sostenemos el dispositivo?
91. Ergonomía y uso: smartphone / tablet
49% de los usuarios utiliza una mano.
*En el caso de las persona zurdas hacen lo contrario.
Fuente: http://msalazar.aiux.cl/
92. Ergonomía y uso: smartphone / tablet
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.
93. Ergonomía y uso: smartphone / tablet
Tablets:
¿Cómo usamos/sostenemos el dispositivo?
94. Ergonomía y uso: smartphone / tablet
Tablets:
¿Cómo usamos/sostenemos el dispositivo?
95. Ergonomía y uso: smartphone / tablet
Algunas conclusiones:
● 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.
96. Ergonomía y uso: smartphone / tablet
Teléfonos móviles: Áreas de interacción o
Zonas Calientes
Josh Clark - http://www.netmagazine.com
97. Ergonomía y uso: smartphone / tablet
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.
98. Ergonomía y uso: smartphone / tablet
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
100. Ergonomía y uso: smartphone / tablet
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 √
101. Ergonomía y uso: smartphone / tablet
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.
103. 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.
104. Tap - Tocar/Pulsar
Presionar brevemente la pantalla con el dedo.
- Seleccionar un elemento o control
- Scroll rápido
Gestos inteligentes y sencillos
105. 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.
Gestos inteligentes y sencillos
106. Multi-finger tap - Tocar con varios dedos
Presionar la superficie con varios dedos simultáneamente.
- Seleccionar / desplazar
Gestos inteligentes y sencillos
107. 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
Gestos inteligentes y sencillos
108. 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
Gestos inteligentes y sencillos
109. 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
Gestos inteligentes y sencillos
110. 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
Gestos inteligentes y sencillos
111. 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
Gestos inteligentes y sencillos
112. Press - Mantener pulsado/Presionar
Tocar la pantalla y mantener el dedo durante un periodo
determinado.
- Cambiar estado
- Hacer scroll
- Invocar objeto
Gestos inteligentes y sencillos
113. 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
Gestos inteligentes y sencillos
114. Press and tap - Presionar y tocar
Presionar sin soltar la superficie y tocar con un segundo dedo
brevemente la pantalla.
- mover
Gestos inteligentes y sencillos
/
115. 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
Gestos inteligentes y sencillos
/
116. Rotate - Rotar / Girar
Presionar en dos puntos simultáneamente y deslizar en forma de
curva.
- girar objetos
Gestos inteligentes y sencillos
//
117. Los gestos persiguen un mismo objetivo:
Simplificar y facilitar al máximo la
interacción del usuario.
Gestos inteligentes y sencillos
118. 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.
Gestos inteligentes y sencillos
119. 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.
*
120. 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.
122. Interactuamos directamente con el contenido.
Naturalidad con las interacciones
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.
123. Naturalidad con las interacciones
1. Proximidad espacial. La acción del usuario está cerca
físicamente del elemento sobre el que actúa.
Para que sea natural:
124. Para que sea natural:
Naturalidad con las interacciones
2. Proximidad temporal. El objeto de la interfaz reacciona al
mismo tiempo que la acción que realiza el usuario.
125. Para que sea natural:
Naturalidad con las interacciones
3. Correlación paralela (orientación, escala, velocidad…)
entre la acción del usuario y la reacción del elemento en la
interfaz.
126. Como conclusión, al interactuar directamente con el
contenido éste se convierte en la interfaz.
Naturalidad con las interacciones
Contenido = Interfaz
128. diseñamos teniendo en
cuenta que el contenido
es lo principal.
Naturalidad con las interacciones
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...
130. 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
131. 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.
133. 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
134. 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
136. 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.
137. - 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
138. 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
146. 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.
147. En este proceso de diseño...
= =
No es lo mismo
Ux para móvil Ux para tablet Ux para desktop
148. No es sólo diseñar para móviles o para tablets u ordenadores de
sobremesa, se trata de diseñar en conjunto.
+ +
149. El diseño sensible o responsive design
tiene en cuenta las características de cada dispositivo.
154. 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...
155. 2.- Utilizar un grid para estructurar el contenido.
Por ejemplo Bootstrap y su grid de 12 columnas basado en el grid960.
156. 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.
158. 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.
159. 07
Tendencias del diseño táctil
y otras formas de interactuación con los
dispositivos.
Dudas razonables
en el futuro
160. 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.
161. Nuestra tarea más inmediata...
¿es seguir explorando la interacción táctil?
162. 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?
163. En su mayoría, ahora, están pensados para un
uso individual.
Aunque hay excepciones, sobre todo en juegos:
Badland App
165. ¿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