Desarrollo de interfaz de usuario en un contexto mobile

Desarrollo de interfaz de usuario
en un contexto mobile.
Laura Carazo
laura@workoholics.es
T. 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.
Índice
1.
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 UX
El 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ón
Estos 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 interacciones
Ahora 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 IxD
La 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 totalidad
El 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 estructura
Una 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éctica
Toda 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 contraste
Una 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 cierre
Tanto 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 proximidad
Los 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 semejanza
Nuestra 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ía
Las 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ún
Los 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 memoria
Las formas son mejor percibidas cuanto mayor sea el número
de veces vistas.

11-Noción de pregnancia
El 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 experiencia
Desde el punto de vista biológico, el propio sistema nervioso se
ha ido formando por el condicionamiento del mundo exterior.

13-Principio de jerarquización
Una 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 visual
Es 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ño
Al 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 - wireframes
Có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 - arquitectura
Define 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. Alcance
Definició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. Estrategia
La 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ábitos
del 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.

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

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

Pen-tablet
Movimiento de arrastre; clicks (botón derecho - izquierdo);
scroll.

Track-pad
Movimientos y clicks sobre un panel y gestos.

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

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 cambiado
Fuente: 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.600millones 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 Explorer
Las 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ón
Para cerrar, eliminar o acciones importantes
Óptimo para tamaños pequeños
Si hay que listar gran cantidad de elementos
El tamaño del
elemento influye en
el % de errores
*

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

Efecto iceberg
La 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 objetos
Al 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 / tablets
La 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).

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

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.

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

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

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

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

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

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 contenido
En vez de a través de controles.

Simular las leyes físicas
Velocidad, 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

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 Design
Material 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

Comunicación y proyecto digitales
Bilbao - Frankfurt

Desarrollo de interfaz de usuario en un contexto mobile

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Desarrollo de interfaz de usuario en un contexto mobile

Similar a Desarrollo de interfaz de usuario en un contexto mobile (20)

Último

Último (20)

Desarrollo de interfaz de usuario en un contexto mobile