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.

01Contextos para la

interacción de los usuariosEl 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.

PeriféricoUsuario Contenido

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

Smartphones

Tablets

Phablets

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.

02La 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 Motorola y casi al mismo tiempo un Ericsson que 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áctilessegú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 resistivasSon 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 capacitativasMuy 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.”


Pantallas infrarrojasEntre 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/

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

03El 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...

http://es.wikipedia.org/wiki/Anexo:Pa%C3%ADses_por_n%C3%BAmero_de_tel%C3%A9fonos_m%C3%B3viles

● 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...

http://www.elmundo.es/tecnologia/2013/11/11/5281081f63fd3dfe4c8b4574.html

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óvilesEvolución de mercado de los smartphones entre 2011 y 2013.

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

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.

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.

¿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á?

04Tocar 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.

Tab-commerce

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.

05Principios básicos del

diseño de interface táctilUsabilidad en diseño táctil: Smartphones y Tablets

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ónPara cerrar, eliminar o acciones importantes

Óptimo para tamaños pequeñosSi 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 pulsableLa 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/

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?


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.


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 CalientesEl 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/PulsarPresionar brevemente la pantalla con el dedo.

- Seleccionar un elemento o control- Scroll rápido


Double tap -Tocar/Pulsar dos vecesPresionar 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 dedosPresionar la superficie con varios dedos simultáneamente.

- Seleccionar / desplazar


Drag - Arrastrar/Desplazar/MoverMover 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 horizontalMover 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 verticalMover 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 dedosJuntar 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 dedosSeparar 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/PresionarTocar la pantalla y mantener el dedo durante un periodo determinado.

- Cambiar estado- Hacer scroll- Invocar objeto


Pan - Barrer/Frotar/Limpiar/RascarMover 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


http://www.youtube.com/watch?v=iIRyWsLEa74&feature=youtu.be

http://www.youtube.com/watch?v=iIRyWsLEa74&feature=youtu.be

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

- mover


/

Press and drag - Presionar y arrastrarPresionar sin soltar la superficie y arrastrar con un segundo dedo brevemente la pantalla.

- mover a diferentes niveles de manera vertical u horizontal


/

Rotate - Rotar / GirarPresionar 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:

Windowshttp://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx

iOS 7https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1

Androidhttp://developer.android.com/design/index.html

Es muy recomendable consultarlas.*

http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx



https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1





http://developer.android.com/design/index.html


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

Integrar realismo*

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

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

http://es.wikipedia.org/wiki/Tacto

http://es.wikipedia.org/wiki/Ac%C3%BAstica

http://es.wikipedia.org/wiki/%C3%93ptica

http://es.wikipedia.org/wiki/Diccionario_de_la_lengua_espa%C3%B1ola_de_la_Real_Academia_Espa%C3%B1ola

http://es.wikipedia.org/wiki/Idioma_griego

http://es.wikipedia.org/wiki/Tacto

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

Integrar realismo

Animación*Todo fluye.

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

06La 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.

4.- Utilizar media queries.

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.

07Tendencias 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

08Bibliografía

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.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://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




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#



Bibliografía












Principios de diseño táctil

http://www.manualdeestilo.com/tabletas-gestos-tactiles-basicos/


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://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/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

Androidhttp://developer.android.com/design/index.html

iOS 7https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1

Windowshttp://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx

Biblografía








http://es.wikipedia.org/wiki/H%C3%A1ptica

http://en.wikipedia.org/wiki/Phablet

http://en.wikipedia.org/wiki/Skeuomorph








Comunicación de marca y Proyectos digitales

www.workoholics.es

diseño de interface para pantallas táctiles. touch design vs. click design

Design

dispositivo y

funcionalidades y

y hablando

y principios

ms econmicas y

mvil y menor que

son ms caras y

los mviles y tablets