desarrollo de interfaz de usuario en un contexto mobile
TRANSCRIPT
Desarrollo de interfaz de usuario en un contexto mobile.
Laura [email protected]. 610 368 134 / 944 059 957
NUEVAS TECNOLOGÍAS WEB
Diseño de interacción centrado en la experiencia de usuario.
Contextos y hábitos del usuario en 2015.
Más allá del desarrollo responsive: first mobile.
Tocar la web: diseño de interfaz para dispositivos táctiles.
Índice1.
2.
3.
4.
Diseño de interacción centrado en el usuario
La interacción (IxD) es la esencia de todas la experiencias del usuario. Es la conversación entre vuestro producto y el usuario.
Qué es IxD, UI y UXEl diseño de interacción está en todas partes: en los controles de vuestro smartphone, la web o app de twitter, o en la pantalla del cajero automático.
Siempre que tomas una decisión en un entorno digital proyectas tu necesidad en una máquina que deberá responder como si te conociera, interpretando tus deseos.
Podemos distinguir entre diseño de interacción y diseño de interfaz. Diseño de interfaz (UI) es lo que los usuarios ven. El diseño de interacción se refiere a cómo los usuarios se relacionan con la interfaz, y cómo esta interfaz responde de tal forma que los usuarios saben que se han logrado sus metas. Como resultado de esta interacción, el disfrute del usuario de la interfaz forma la experiencia general del usuario (UX).
Mejorar la experiencia del usuario es un problema complejo, pero sin duda podemos diseñar mejores interfaces e interacciones para marcar la diferencia entre un sistema que sólo funciona y crear uno que los usuarios puedan disfrutar.
Tu diseño es una extensión de tu marca. La interfaz de tu web o e-commerce se relaciona con tus clientes y, claro está, quieres que sea útil y amigable.
5 pilares del diseño de interacciónEstos son 5 principios básicos del diseño de interacción o puntos críticos, incluso para el diseño de interacción más básico:
1. Diseño centrado en el usuario.
2. Usabilidad.
3. Posibilidades sugeridas (afforances) y significados.
4. Capacidad de aprendizaje (learnability).
5. Feedback y tiempo de respuesta.
1. Diseño centrado en el usuario.
Diseño orientado al público objetivo. Tal y como expresa Andrew Maier “en todas las disciplinas del diseño, el artista debe primero conocer sus limitaciones, y luego diseñar una solución.” En el caso del diseño de interacción, los propios usuarios en general, forman la base de las limitaciones de una interfaz.
El Diseño Centrado en el Usuario es una filosofía de diseño que pretende crear experiencias, más allá de los productos y servicios y un ambiente que conecte, a nivel emocional, con el usuario.
Centrar el diseño en sus usuarios implica involucrar desde el comienzo a los usuarios en el proceso de desarrollo del sitio siempre con el objetivo claro de mejorar la experiencia del usuario.
Valorar si un sitio web consigue o no sus objetivos está condicionado al nivel de satisfacción del usuario.
Diseña con el usuario en el centro:● Técnica de personas.● Escenarios del usuario.● Mapa de experiencias
2. Usabilidad
La usabilidad es el punto de partida del diseño de interacción. Si tu audiencia no puede usar tu producto o servicio, no hay relación posible: usabilidad, utilidad y deseo son ingredientes básicos para un buen diseño. Eficacia, eficiencia y satisfacción.
3. Posibilidades sugeridas y significados
El concepto “affordance” significa que una función tiene que hablar por sí misma y sugerir su propio uso. Esto no es incompatible con apoyar el entendimiento o acotar los significados a través de tooltips, textos de introducción, etc.
Ej. el botón de play de un video invita a mirar un video, y no puede utilizarse para cargar una imagen.
4. Capacidad de aprendizaje
Los usuarios no recordamos cada funcionalidad con un solo uso y el diseño de interfaz tiene que tener en cuenta lo familiar y la capacidad de intuición del usuario. La consistencia crea predictibilidad, lo cual mejora la capacidad de aprendizaje del usuario.Crea un espacio consistente, utiliza los patrones básicos de diseño de interfaz de usuario: UI-Patterns.
5. Feedback y tiempo de respuesta
El feedback es el corazón de la interacción. Si la interacción del usuario es una conversación entre el usuario y el producto, entonces hagamos que sea amigable, interesante y útil.
Un factor clave es el tiempo de respuesta, que es mejor cuanto más inmediato.
- ¿Cuándo debe sonar la cuerda de mi guitarra? - Ya.
Pasos para mejorar las interaccionesAhora que conocemos los fundamentos, proponemos un proceso que puede ser útil para mejorar nuestros diseños de interacción. Veámoslo:
1. Juego de roles con la interacción. Ponte en la situación del usuario y de la interfaz, dando respuestas que sólo se componen de “labels”, “menús”, y cualquier otro elemento de tu UI.
2. Trazar la narrativa. Documenta cada paso de la experiencia.
3. Simplifica los pasos. El usuario puede tener metas complejas como alquilar un coche pero nuestra interfaz tiene que ser capaz
4. Limita las opciones del usuario. El paso más difícil.5. Pon atención en los micro-momentos. Humaniza tu
interfaz, se amable.
A. El lenguaje en IxDLa comunicación es la base de la interacción y el lenguaje, las palabras son la base de la comunicación. Usa el lenguaje para humanizar la experiencia.
● El saludo. Más que un simple hola, explicamos qué somos y ofrecemos los primeros pasos.
● Los sistema de navegación. Los literales expresan dónde estamos y sugieren nuevas opciones.
● Sugerir acciones. Palabras en el menú, botones y pequeñas instrucciones.
● Proporcionar servicio.
Y el contexto es el rey: ¿Quién va a leerlo, cuándo? ¿Qué necesitan saber? ¿Cuál es el siguiente paso? ¿Cuál es el formato? ¿El mejor tono?.
Más allá de la importancia de los literales, los copis:
● Respeta la parte dominante de la visión: AMARILLO. Usamos todos los sentidos pero nuestros superpoderes están en la visión.
● Procura un espacio visual claro favorece la navegación.
● Mantén la consistencia.○ Usa como base los patrones de diseño UI.○ Crea rápidas guías de estilo: mailchimp, BBC Gel,
B. La importancia de lo visual
«El tiempo necesario para moverse rápidamente hasta un área objetivo es una función que relaciona la distancia al objetivo y el tamaño del objetivo» Paul Fiss.
Según Fiss hay dos maneras de favorecer la accesibilidad:
● El tamaño. Haz el botón principal más grande, el área clickable debe ser lo más amplia posible.
● La proximidad. Incluye las funciones clave en los bordes, agrupa las acciones y pon distancia entre ellas cuando sea necesario.
C. Tamaño y distancia en IxD
La funcionalidad más importante debe utilizar una combinación de tamaño y colocación para ayudar a los usuarios a acceder de forma rápida y sencilla.
Un ejemplo común de mala praxis: Al completar el último campo en un proceso de registro, nos encontramos con que el botón “enviar” está más lejos de ese punto que otros botones del formulario y su tamaño es exactamente el mismo.
Distancias minúsculas en una pequeña pantalla pueden parecer una preocupación menor, pero adquieren mayor relevancia sobre todo cuando las acciones que realizamos se repiten. Parte de un buen diseño de interacción es ser capaz de identificar estos “micromomentos” que pueden pasar desapercibidos incluso para el radar del usuario, pero que si consigues corregir y optimizar se apreciará en el producto.
Fuente: Social media y contenidos
El uso eficaz del espacio en el diseño de interacción requiere de una comprensión de la estética, la funcionalidad y nuestro comportamiento.
El espacio en blanco también es una herramienta de diseño. En el diseño de interacción el espacio en blanco tiene 3 funciones: mejorar la comprensión, clarificar las relaciones y centrar la atención.
No hagas pensar al usuario. Una interfaz usable y agradable reducirá la carga cognitiva del usuario:
1. Agrupa la información relevante para hacerla más sencilla de procesar y recordar.
2. Ayúdale a recordar: cambia el color de los links visitados, incluye páginas de comparación de productos o utiliza cupones en vez de códigos en las promociones.
D. El espacio y la disposición en IxD
Leyes de la Gestalt y el diseño de interface
Fuente: Wikipedia y Sara Clip
Las leyes de la Gestalt son un conjunto de reglas que explican el origen de las percepciones a partir de los estímulos.
1-Ley de la totalidadEl todo es más que la suma de sus partes.Para que un diseño funcione bien hay que pensar en cómo se percibe su totalidad, y no cada parte individual.
2-Ley de la estructuraUna forma es percibida como un todo, independientemente de las partes que la constituyen. Los elementos son organizados en figuras lo más simples posible, (simétricas, regulares y estables). Esta ley se basa en que el cerebro intenta organizar los elementos percibidos de la mejor forma posible, incluyendo el sentido de perspectiva, volumen, profundidad…
Por ello, una forma es percibida como un todo, independientemente de las partes que la constituyen.El cerebro prefiere las formas integradas, completas y estables.
3-Ley de la dialécticaToda forma se desprende sobre un fondo al que se opone. La mirada decide si “x” elemento pertenece a la forma o al fondo.Se basa en que el cerebro no puede interpretar un objeto como figura o fondo al mismo tiempo. El ojo reconoce una figura sobre el fondo, pero ésta a su vez puede verse también como fondo. Es una relación reversible o ambigua. La mirada decide si “x” elemento pertenece a la forma o al fondo.
4-Ley del contrasteUna forma es tanto mejor percibida, en la medida en que el contraste entre el fondo y la forma sea mayor. Sin contraste no hay percepción.
5-Ley del cierreTanto mejor será una forma, cuanto mejor cerrado esté su contorno. Si un contorno no está completamente cerrado, el espíritu tiende a cerrarlo. Las formas cerradas son más estables visualmente, lo que hace que tendamos a “cerrar” y a completar con la imaginación las formas percibidas buscando la mejor organización posible.
6-Principio de proximidadLos elementos aislados pero con cierta cercanía tienden a ser considerados como grupos. Elementos diferentes, pero situados juntos tienden a ser considerados como un mismo grupo.La distancia entre los objetos es clave en la percepción de los elementos. Tendemos a agrupar los miembros más cercanos o próximos en el espacio, integrándolos en una unidad completa o un todo.
7-Principio de semejanzaNuestra mente agrupa los elementos similares en una entidad. La semejanza depende de la forma, el tamaño, el color y otros aspectos visuales de los elementos.
Tenemos una tendencia natural a poner en relación los elementos parecidos o iguales, ya sean similares en forma, color o dimensión. La percepción de similitudes nos ayuda a asumir la relación de elementos entre sí e implica una estructura basada en un patrón.
Los objetos que comparten características crean cohesión en el diseño, ya que nuestro cerebro busca automáticamente los patrones.
8-Principio de simetríaLas imágenes simétricas son percibidas como iguales, como un solo elemento, en la distancia.
Tiene tal trascendencia, que desborda el campo de la percepción de las formas para constituir uno de los fenómenos fundamentales de la naturaleza. La biología, la matemática, la química y la física, y hasta la misma estética, se organizan siguiendo las leyes especulares, simples o múltiples, de la simetría.
9-Ley del destino o movimiento comúnLos elementos que parecen moverse en la misma dirección y a la misma velocidad tienden a ser vistos como un grupo o conjunto.
10-Principio de la memoriaLas formas son mejor percibidas cuanto mayor sea el número de veces vistas.
11-Noción de pregnanciaEl concepto "pregnancia" se relaciona, también, con la idea de "impregnación". Es decir, aquello con lo que nos quedamos "impregnados" cuando miramos.Es la forma cargada de información, la fuerza de la forma, es la dictadura que la forma ejerce sobre los ojos.
12-Principio de la experienciaDesde el punto de vista biológico, el propio sistema nervioso se ha ido formando por el condicionamiento del mundo exterior.
13-Principio de jerarquizaciónUna forma compleja será más pregnante en función de cómo orientemos la percepción, de una forma jerarquizada: de lo principal a lo accesorio.
¿Dónde se utilizan las leyes?
La maquetación de un periódico, ya sea en papel u online, muestra la importancia de las leyes de proximidad, continuidad y semejanza. Por ejemplo si un título está muy separado de la noticia, la gente no identifica que pertenezcan a la misma unidad.
Las leyes nos ayudan a entender la manera de pensar de los usuarios, lo que unido a nuestra lógica favorecerá diseños más funcionales, intuitivos y atractivos.
Visión clásica: proceso desarrollo UX Jesse James Garret (The Elements of User Experience, un modelo conceptual del diseño centrado en el usuario) presenta la idea de manejar planos para administrar el proceso de desarrollo de la experiencia de usuario en un sitio web, tomando en cuenta cada situación a la que un usuario se podría enfrentar y también las acciones que un usuario podría o no realizar.
Su modelo conceptual se distribuye en 5 planos.
● Superficie. Diseño visual● Esqueleto. Diseño de navegación● Estructura. Arquitectura de la información● Alcance. Requerimiento de contenidos● Estrategia. Definición de objetivos ideas
Es fácil ver estas capas desde dos puntos de vista complementarios: como una interface de software orientado a tareas o como un sistema de información.
En la ejecución los planos se afectan los unos a los otros y lo más recomendado es no ejecutarlos por separado.
El modelo conceptual de Garret va desde lo abstracto (la estrategia) hasta lo concreto (la superficie). Y desde la concepción a la culminación en un espacio de tiempo.
1. La superficie - el diseño visualEs una serie de páginas con imágenes, texto y otros elementos interactivos, algunos de los cuales pueden interactuar con el usuario, por ejemplo los componentes de navegación.
El tratamiento gráfico de los elementos de la interfaz el “look & feel”, son aquellos aspectos del producto que los usuarios van a percibir a primera vista. El diseño responde a los objetivos de los planos anteriores.
El usuario debe ser capaz de captar con simples recorridos visuales donde se encuentran los diferentes elementos que componen una página. Con una serie de bloques o módulos dispuestos de una forma más o menos estandarizada, que responden a modelos de lógica visual que están relacionados con el comportamiento de los usuarios.
Objetivos● Crear una jerarquía visual que permite al usuario
detectar de inmediato qué elementos son importantes y cuales secundarios.
● Detectar las regiones funcionales del sitio.● Formar grupos de elementos para que los usuarios
puedan percibir con claridad la estructura del sitio.
Coherencia del diseñoAl navegar por diferentes páginas de un sitio web, el visitante debe tener la sensación de que las diferentes páginas que visitan pertenecen a un mismo sitio.
Esto se logra mediante la repetición de algunos elementos, que dan un estilo definido al sitio (unidad visual) y permite a los visitantes ubicar los elementos más importantes, ya que se encontrarán con la misma distribución (o similar) en todos los puntos del sitio.
2. El esqueleto - wireframesCómo se distribuye la información en cada página: menú, titulares, textos, botones, pestañas…
Diseño de interfaz para facilitar la interacción del usuario con la funcionalidad, y la interacción entre persona, dispositivo y cultura.
Diseño de navegación para facilitar el movimiento de los usuarios a través de la arquitectura de la información.
Diseño de la información. Diseño de la presentación de la información para facilitar su entendimiento. Eficacia y eficiencia:● Documentos comprensibles.● Sistemas interactivos.● Espacios de información navegables.
3. La estructura - arquitecturaDefine los flujos de navegación del usuario dentro del sitio, qué página verá primero y cuáles serán sus siguientes opciones hasta llegar al final del proceso de navegación.
Diseño de interacción. Desarrollo del flujo de las aplicaciones para facilitar las tareas del usuario, definiendo cómo el usuario interactúa con la funcionalidad del sitio.
Su fin es:● Mejorar su eficiencia● Disminuir la curva de aprendizaje● Eliminar barreras en la frontera persona-máquina.
El objetivo es presentar a los usuarios experiencias útiles, satisfactorias y usables. Diseñamos la experiencia desde el punto de vista del usuario, no desde el punto de vista técnico o artístico. Es necesario interiorizar y entender los objetivos, acciones, necesidades y deseos de los usuarios mientras utilizan el producto.
Arquitectura de la información es el diseño estructural del espacio de información para facilitar el acceso intuitivo al contenido.
4. AlcanceDefinición del espacio web:
● requisitos de contenidos: tipo de información y para quién está disponible;
● y especificaciones funcionales, que es la descripción de las funcionalidades del sitio para satisfacer las necesidades del usuario y favorecer una experiencia positiva (perspectiva del usuario).
La especificación técnica describe la implementación interna del programa. Habla de estructuras de datos, modelos de bases de datos, elección de lenguajes y herramientas de programación, algoritmos, etc.
5. EstrategiaLa estrategia incorpora los objetivos de la entidad promotora del site y las necesidades del usuario, el beneficio que obtendrá al consumir nuestro producto.
Contextos y hábitosdel usuario en 2015
Contextos para la interacción de los usuarios.El paradigma de la interacción con el dispositivo y lo que contiene ha cambiado. 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.
TecladoLenguaje escrito; código; comandos (atajos de teclado)
RatónMovimiento de arrastre; clicks (botón derecho - izquierdo); scroll.
Pen-tabletMovimiento de arrastre; clicks (botón derecho - izquierdo); scroll.
Track-padMovimientos y clicks sobre un panel y gestos.
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áctilesMá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)● TV● Smartphones● Phablets*● Tablets● Smartwatches● Wearables● 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 Wearables
Cámara digitalReproductor MP3
Monitores interactivos Relojes
Smartphones
Tablets
Phablets
El usuario que todo lo toca.
Algunas cifras. En 2014...
● Un total de 21,44 millones de españoles accedieron a internet en movilidad.
● Por primera vez en España hay más usuarios de Internet (76,2%) que de ordenador (73,3%). El 77,1% de los internautas accedieron a Internet mediante el teléfono móvil.
Fuente: ine, 2 de octubre de 2014
Evolución del equipamiento TIC en los hogares (%)
Fuente: ine, 2 de octubre de 2014
La manera de comunicarnos ha cambiadoFuente: The App Date
Y una previsión para 2019…
● Los usuarios de teléfonos móviles serán
9.300 millones.
● De los cuales 5.600 millones serán smartphones.
Fuente: El mundo
¿Para qué usamos el móvil?
● 88,4% comunicación● 82,7% correo● 72,7% redes sociales● 68,4% localización● 53,7% información● 53,3% entretenimiento● 36,8% ocio y tiempo libre● 15,2% otras
Fuente: The App Date, datos de 2014 en España.
Móvil
¿Cuándo usamos el móvil?
● Por la mañana en el trabajo● Por la tarde en el sillón● Por la noche en la cama
¿Para qué usamos la tablet?
● 28,8% comunicación● 74,8% correo● 63% redes sociales● 51,3% localización● 65% información● 66% entretenimiento● 43,9% ocio y tiempo libre● 17,3% otras
Fuente: The App Date, datos de 2014 en España.
Tablet
¿Cuándo usamos la tablet?
● Por la mañana en el trabajo● Por la tarde en el sillón● Por la noche en la cama
Y si volvemos a 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á?
¿A qué se debe el éxito en la interacción táctil?
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.
Más allá del desarrollo responsive: First mobile
La web pensada para todos los dispositivos
Diseño responsive, crear un solo sitio web que se adapte automáticamente a todas las resoluciones y dispositivos reorganizando la distribución de todos sus elementos. Esto se consigue con HTML5 CSS3 (media queries) y Javascript.
Mobile First, o por qué diseñar primero para móvil. Diseñar primero para móviles, obligando a centrarnos en los elementos y las acciones más importantes de un sitio web, creando una experiencia y una buena usabilidad para el usuario.Mobile First se refiere tanto a la organización de la información como a la carga de contenidos.
● Jerarquía de contenidos● Mejora del rendimiento de las resoluciones inferiores. (La
magia está en el CSS)● Diseñando para el futuro. Adaptable, según el contenido y
funcionalidades de tu web
/* Artículos en versión movil, con un padding superior moderado */
article {padding-top: 30px;}
/* Los mismos artículos en una versión movil o tablet, con un padding superior amplio */
@media (min-width: 600px) {article {
padding-top: 50px;}
}
/* Los mismos artículos en una versión escritorio, con un padding superior muy generoso */
@media (min-width: 1200px) {article {
padding-top: 90px;}
}
Internet ExplorerLas queries no funcionan en las versiones antiguas de IE (grrrrr).Esto era un problemilla con la web responsive, pero en un proyecto first-mobile el problema se agrava. Soluciones:
● Cargar una hoja complementaria, a través de un condicional, para las versiones inferiores a IE9. Pero cada vez que realices un cambio en tu css origen tendrás que llevarlo a este ie.css.
● La opción recomendada: cargar un script que interpreta estas clases dentro del media queries haciéndolas entendibles para IE en sus versiones antiguas. La librería respond.js.
= =Ux para móvil Ux para tablet Ux para desktop
En este proceso de diseño...No es lo mismo
+ +
No es sólo diseñar para móviles o para tablets u ordenadores de sobremesa, se trata de diseñar en conjunto.Existen cientos de dispositivos móviles diferentes.
El diseño sensible o responsive design tiene en cuenta las características de cada dispositivo.
Tocar la web: diseño de interface para
dispositivos táctiles. Touch vs Click
Los dispositivos táctiles son un modelo de interacción y contexto de uso totalmente diferente, influyen en la propia organización de contenidos, sistema de navegación e incluso en su representación visual, generando una nueva experiencia de uso en los sitios web.
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
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.
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 objetivoEl 9x9 los iconos de las Apps
Efecto icebergLa zona pulsable ha de ser igual o mayor al tamaño visual del botón.
Zona pulsable
Objeto
La zona pulsable ha de ser igual o mayor al tamaño visual del botón
Espacio en blanco entre objetosAl menos 2 mm. de separación visual reduce errores y la percepción de dificultad.
2 mm.
Espacio en blanco entre objetivos
El espacio muerto (zona no pulsable)Reduce el peligro de pulsar otra zona por equivocación.
Espacio muerto
El espacio muerto (zona no pulsable)
Ergonomía y uso:smartphones / tabletsLa interacción se puede convertir en uno de los principales elementos diferenciadores para una app, web móvil o un responsive design.
¿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
El 49% de los usuarios utiliza una mano.
*En el caso de las personas 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.
¿Cómo usamos/sostenemos el dispositivo?
Tablets
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
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ándaresSe han adoptado como universales, e incluso hay gestos patentados.
● Gestos simples: requieren de uno o dos dedos para la interacción.
● Multitouch: requieren dos o más puntos de interacción.
Tap - Tocar/Pulsar
Presionar brevemente la pantalla con el dedo.
● Seleccionar un elemento o scroll.● 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 vídeo.
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.
Naturalidad en las acciones
NUI: Natural User Interface.
Aplicamos al diseño de interface toda la experiencia táctil que llevamos aprendiendo en nuestra vida.
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.
Para que sea natural...
Proximidad espacialLa acción del usuario está cerca físicamente del elemento sobre el que actúa.
Proximidad temporalEl objeto de la interfaz reacciona al mismo tiempo que la acción que realiza el usuario.
Correlación paralelaOrientació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.
Luego…
diseñamos teniendo en cuenta que el contenido es lo principal.
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
¡Atención! aclaremos la aplicación de realismo.
Aplicar el realismo NO (sólo) como la representación realística de los objetos.
La representación realística de los objetos, se ha denominado esqueuomorfismo.
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.
Aspecto plano Esqueoumorfismo
Si bien en algunas ocasiones ayuda al usuario a entender mejor cómo funciona el contenido...
...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.
Manipulación directa con el contenidoEn vez de a través de controles.
Simular las leyes físicasVelocidad, inercia aceleración, desaceleración, elasticidad, transparencia, gravedad…
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)Hemos comentado antes una respuesta del contenido natural en tiempo y espacio, pero además podemos tener…
● Reacción visual ● Reacción sonora● Reacción táctil / vibración
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: Wikipedia
No podemos contar siempre con una reacción sonora o de vibración pues no siempre se tienen activadas estas prestaciones en el dispositivo.
La clave es la respuesta visual● Cambio de color● Cambio de tamaño● Movimiento
AnimaciónTodo fluye.
Como elemento que da continuidad a la interacción
Cuando abrimos una aplicación.O elegimos escenarios en una aplicación.
Como complemento a la reacción visual del contenido
Como ayuda al usuario para un mejor entendimiento de lo que está ocurriendo
Mejora la orientación y fija la atención.
Cargando...
Existen referencias o guías de diseño en las principales plataformas.
WindowsiOSMaterial Design
Es muy recomendable consultarlas.*
Material DesignMaterial Design es un concepto, una filosofía, unas pautas enfocadas al diseño creada por Google y presentada durante su conferencia anual Google I/O 2014.
Busca combinar el diseño visual con la tecnología con el fin de mejorar la experiencia de usuario. Material Design recibe su nombre por estar basado en objetos materiales, en la realidad táctil. Piezas colocadas en un espacio (lugar) y con un tiempo (movimiento) determinado.
Los fundamentos de la luz, la superficie y el movimiento son clave para el transporte de cómo los objetos se mueven, interactúan y existen en el espacio y en relación el uno al otro.Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal.
Es una manera de intentar aproximarse a la realidad, algo que en un mundo donde todo es táctil y virtual es difícil. Se guía por por las leyes de la física: animaciones lógicas, objetos que se superponen pero no pueden atravesarse el uno al otro y demás.
Una filosofía de diseño unificada para todas las pantallas.
Material Design nace con un objetivo, adaptarse a todas las pantallas. Es multiplataforma, tantos los smartphones, tablets, smartwatches o televisores pueden hacer uso de este diseño. También las páginas webs. Material Design ha sido creado pensando en todos los sistemas, no solo Android.
El objetivo es desarrollar un sistema que permita una experiencia unificada independiente de la plataforma o el dispositivo.
Crear un lenguaje visual que sintetiza los principios clásicos de buen diseño con la innovación con las posibilidades que dan la tecnología y la ciencia.
PRINCIPIOS
1. El material es la metáfora
Una metáfora material es la teoría unificadora de un espacio racionalizado y un sistema de movimiento. El material está basado en la realidad táctil, inspirada en el estudio de papel y tinta. Los fundamentos de la luz, la superficie y el movimiento son clave para el transporte de cómo los objetos se mueven, interactúan y existen en el espacio y en relación el uno al otro.Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal.
Es una manera de intentar aproximarse a la realidad, algo que en un mundo donde todo es táctil y virtual es difícil. Se guía por por las leyes de la física: animaciones lógicas, objetos que se superponen pero no pueden atravesarse el uno al otro y demás.
2. Intrépido, gráfico, intencional
Material Design es una guía de diseño con una tipografía clara, casillas bien ordenadas, colores e imágenes llamativas para no perder el foco y dar un sentido de orden y jerarquía. Opciones de color deliberados, imágenes de borde a borde, tipografía de gran escala, el espacio en blanco intencional... para crear una interfaz gráfica audaz y sumergir al usuario en la experiencia.
3. El movimiento proporciona significado
Toda acción tiene lugar en un único entorno. Los objetos se presentan al usuario sin romper la continuidad de la experiencia, incluso a medida que se transforman y se reorganizan. Los aspectos que tiene en cuenta son el tiempo, la velocidad y la dirección.El movimiento sirve para centrar la atención y mantener la continuidad, por ejemplo un objeto que parpadea significa que está llamando tu atención, un elemento que se expande es que se acaba de abrir.
Recursos de Material Design.
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
Gracias. Eskerrik asko.
Comunicación y proyecto digitalesBilbao - Frankfurt