© UPC. Todos los derechos reservados.

Tendencias y buenas prácticas

En este material veremos el tema Tendencias y buenas prácticas a través de los siguientes
puntos: Interfaz de Usuario (UI) Vs. Experiencia de Usuario (UX), Neurodesign y Patrones y
tendencias en la Interfaz de usuario (UI). Finalizaremos con ejercicios de aplicación de lo
aprendido.
¡Comencemos!

2
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Empecemos con el tema: Interfaz de Usuario (en adelante UI) versus Experiencia de Usuario (en
adelante UX).
Es importante dedicar un momento y aclarar que UI y UX, dos términos que a menudo se
utilizan como sinónimos, en realidad no lo son.
Consistencia
En Diseño de UI: Haga que cada funcionalidad trabaje igual dentro de toda la aplicación. Por
ejemplo, si hace un touch sobre un botón ”+” en una vista para agregar un elemento, éste debe
realizar el mismo tipo de acción en otra vista.
Resultado en UX: Los controles de su aplicación tendrán una sensación intuitiva y los usuarios se
sentirán cómodos y confiados al entender cómo trabajan las cosas. La consistencia disminuye la
carga cognitiva, reduciendo así la curva de aprendizaje.
Instrucciones
En Diseño de UI: Si cree que puede haber alguna duda sobre cómo debe comportarse algo,
explíquelo.
Resultado en UX: El usuario entiende cómo se comporta la aplicación, evitando la confusión.

3
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Efectos de Sonido
En Diseño de UI: Cuando adicione efectos de sonido, que sea de manera consistente con las
acciones.
Resultado en UX: Para algunas acciones, los efectos de sonido pueden señalar qué sucedió,
reduciendo confusión. Adicionalmente, los efectos de sonido pueden ayudar a crear la
atmósfera deseada.
Esquema de colores
En Diseño de UI: Los colores que selecciona para el fondo, texto y gráficos.
Resultado en UX: Los colores crean cierto ambiente, estableciendo el estado de ánimo para la
experiencia, tanto a nivel de entretenimiento como profesional. Los colores también tienen un
significado cultural y neurobiológico.
Opciones de Personalización
En Diseño de UI: Permita al usuario elegir su avatar, ajustes, visualizaciones, etc.
Resultado en UX: El usuario tiene un aporte personal en la aplicación, haciendo que lo sienta
más “suyo”, lo cual lleva a una percepción más positiva de la UX.

4
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Lori Kirkland introdujo el término Neurodesign en el diseño de experiencias de usuario UX,

estableciendo que, a través de una cuidadosa investigación y pruebas, podemos entender qué
sucede en la mente de un usuario o cliente que interactúa con una buena (o mala) experiencia.

Neurodesign es un proceso que sirve de plataforma para crear. Es necesario entender qué
quieren los usuarios versus qué necesitan, incluso antes de enfrentarse a sus diseños; saber
cómo trabaja la mente de sus usuarios específicos y qué modelos mentales han creado para
interactuar con sus apps. Esto puede ir, a veces, en contra de nuestro deseo de innovar, por lo
que se debe alinear dicho deseo con los objetivos de los usuarios.
En la actualidad el enfoque del Neorudesign es cada vez más difundido y se aplica en la creación
de experiencias móviles.
Aspectos como: ofrecer al usuario algo antes de que él lo pida, manejar los contrastes, la
validación social, diseñar las características del APP considerando el menor esfuerzo para el
usuario y hacer que perciban algunas características como oportunidades que no pueden dejar
pasar, son algunos de los principios que pueden ayudarnos a crear APPS que sean exitosas, bien
recibidas por los usuarios y rentables.

5
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Pasemos al próximo tema de este material: Patrones y tendencias en la Interfaz de usuario.

En cuanto a los patrones, el Mobile Application Design ha llegado con nuevos diseños y sus
implementaciones. Esto ha sido posible por los avances en hardware y software.
Se pueden observar en los gestos, las animaciones y la selección de patrones UI.

6
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Los gestos ayudan, por un lado, al hacer más eficiente el uso de espacio en la aplicación, al
eliminar por ejemplo botones, a la vez que tornan la experiencia más intuitiva y agradable. Al
combinarlos con animaciones, se amplían las maneras de implementar patrones de diseño de UI
en las aplicaciones móviles.
Aquí se observan los nombres de las diversas formas para interactuar con patrones tan simples
como el calendario, mensajes o galerías de imágenes.

7
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Uno de los mayores beneficios de utilizar gestos es que se sienten muy intuitivos y con
reacciones similares a objetos del mundo real.
Las animaciones juegan un rol muy importante en mantener dicha ilusión y establecer un
vínculo con la UI.
Las animaciones en conjunto con los gestos, no sólo tornan la experiencia agradable, sino que
propocionan al usuario un feeback visual.

8
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Cuando se evalúan patrones de UI en busca de adaptarlos a nuestras necesidades deben

considerar lo siguiente:
¿Qué problema del usuario están resolviendo? Deberían poder resumirlo en una sola oración.
Esto ayuda a mantenerlos enfocados.
¿Qué patrones utilizan otros para resolver el problema y cómo los aplican? Revisar aquí
aspectos como la navegación, obtener entradas del usuario, manejo de los datos e integraciones
con otros servicios o aplicaciones, mostrar información y contenido.
¿Hay alguna consideración a tomar en cuenta con respecto a escenarios particulares en mi
caso?
Aquí pueden observar diversos patrones que buscan resolver múltiples problemáticas. Ésta es
una relación de los principales patrones de UI, organizados en grupos.

9
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Veamos ahora el último tema de este material: Tendencias

Existen múltiples aproximaciones para abordar el proceso de creación de una experiencia
mobile. Entre ellas, resaltan diversas tendencias las cuales es importante reconocer y tomar en
cuenta al momento de concebir e implementar un app, por ejemplo:
 Clever Gestures (Gestos con inteligencia).
 Layered Mobile Interfaces (Interfaces móviles con capas).
 Meaningful Typography (Tipografía con significado).
 Flat Mobile Design (Diseño móvil plano).
 Delightful Micro-interactions (Agradables micro-interacciones).
 Bite-Sized Cards (Tarjetas de tamaño adecuado).

10
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Los gestos son el nuevo click. Los gestos de la mano pueden colaborar en el éxito de una
aplicación móvil.
Con los clicks, los diseñadores y developers se enfocan en pensar en qué parte de la pantalla
desean que aparezca la acción. En el caso de los gestos, hay que considerar el tipo de acción
física, su ubicación en la pantalla y si los usuarios pueden encontrarla de manera intuitiva y
tocarla.
Los gestos permiten a los usuarios realizar acciones con mayor velocidad, siendo a la vez, una
forma cómoda para interactuar con dispositivos que pueden variar en formas y tamaños.

11
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

En dispositivos con área de visualización reducida es donde cobra mayor importancia utilizar
tipografía con una intención y significado específico.
Algunas recomendaciones para un uso adecuado de la tipografía incluyen:
 No restar importancia a la elección de la tipografía para el contenido. La fuente
SanSerif con estilo thin- o medium-weight con color uniforme es fácil de leer en diversos
tamaños y sobre varios colores de fondo.
 Dar a las palabras cierto espacio: otra manera de asegurar la fácil lectura es mantener
de 30 a 40 caracteres por línea.
 No dejar de prestar atención a la alineación: evitar la alineación justificada, pues sale
del control de su elección de separación entre palabras y letras. El texto alineado de
manera estándar tiene un aire más natural y ayuda a mantener la consistencia.
 Considerar las características de tipografía de los dispositivos dode se ejecutará la
aplicación: tamaño y tipos de fuente soportados, saltos de línea, colores disponibles,
orientación del dispositivo (Portrait, Landscape).

12
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Las micro-interacciones son el ingrediente secreto para crear una app que sea adictiva. Esos
pequeños momentos del diseño mantienen al usuario enganchado, crean un placer inesperado
y son casi invisibles para todos, menos el diseñador.
Dan Saffer, en su libro Microinteractions: Full Color Edition: Designing with Details, indica que
Las micro-interacciones ayudan a cumplir tres funciones específicas:
 Comunicar rápidamente status o feedback.
 Visualizar el resultado de una acción.
 Ayudar al usuario a manipular algo en la pantalla.
Además de ello, Saffer estructura la micro-interacción en cuatro partes:
 Trigger, qué inicia la micro-interacción.
 Rules, qué sucede en la interacción.
 Feedback, cómo nos damos cuenta qué sucede en la micro-interacción.
 Loops & Modes, duración, repeticiones y evolución en el tiempo de la micro-interacción.

13
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Material Design de Google es una de las filosofías de diseño visual de mayor influencia en la
actualidad. Sin embargo, va más allás de Google y las aplicaciones para Android. Los diseñadores
utilizan la filosofía de diseño de diversas maneras – sobre todo el concepto de Interfaces con
capas.
Como el nombre indica, layering (organizar en capas) significa apilar múltiples elementos, como
una baraja de cartas, para crear una sola experiencia unificada que sea tanto funcional como
estéticamente agradable.
De la mano de este concepto se encuentra el de Tactile Surface (superficie táctil). Son como
varias hojas de papel apiladas, que crean un framework de cómo opera todo en el diseño. Estas
hojas se diferencian de su contraparte física en que pueden cambiar de forma y dimensiones –
como estirarse o contraerse – de una manera tal que le dé cierto realismo. Tactile Surface es un
recipiente para contenido e información. En algunos casos, el uso de sombras o el efecto de
gray out ayudan a apreciar la separación entre capas.

14
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

El concepto de Flat Design está asociado en la actualidad con las siguientes características:
 Falta de sobre-embellicimiento, dejando de lado algunas técnicas como sombras,
gradientes y otras decoraciones, salvo en detalles muy sutiles.
 Paleta de colores distintas, normalmente primando colores brillantes, saturados.
Muchas veces son mono-tono o se complementan con el otro extremo del expectro de
colores.
 Elementos simples, diseñados con estructuras y formas sencillas, como rectángulos,
círculos y rectángulos, inspirados en el minimalismo. Ello busca mayor enfoque en el
contenido con un diseño que no distraiga de la tarea a realizar.
 Fuerte enfoque en la tipografía, un elemento visual dominante en el minimalismo.
 Aproximación Less is More (Menos es Más), dando importancia a espacios amplios
frente a cantidad de elementos.

15
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Las Cards (Tarjetas) son contenedores que pueden albergar casi todo. Dado que pueden trabajar
con varios tipos de contenido, son perfectas para aplicaciones basadas en contenido.
Algunos de los diversos elementos que pueden contener las Cards:
 Fotos  Datos de Juegos
 Texto  Streams o elementos a compartir
en Social Media
 Video
 Información de rewards
 Cupones
 Enlaces
 Música
 Combinaciones de estos elementos
 Información de pago
 Sign Ups o Formularios
Al colocar el contenido en cards hacemos que éste sea digerible para el usuario, quien
rápidamente revisa y hace swipe.
La metáfora de Cards es aplicable a diversos patrones en las aplicaciones, como narrativa,
revelar contenido relevante, conversaciones, listas de tareas todo, etc.

16
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Revisemos lo que estudiamos juntos sobre Tendencias y buenas prácticas.

 Aprendimos que existen diversas tendencias y buenas prácticas las cuales debemos
considerar al momento de la creación de experiencias móviles, entendiendo qué
quieren los usuarios, prestando atención al diseño de la interfaz, así como los efectos de
las decisiones de diseño en la experiencia de usuario.
 Pudimos ver que la interfaz de usuario (UI) cobra especial relevancia, pues es el primer
contacto del usuario con la aplicación.
 Las decisiones que tomamos a nivel de consistencia, instrucciones para el usuario,
efectos de sonido, esquemas de colores y opciones que ofrezcamos para
personalización influyen en la percepción de los usuarios.
 En cuanto a experiencia de usuario (UX), las decisiones tomadas en UI pueden marcar la
diferencia y generar resultados positivos en la percepción de los usuarios, pudiendo
hacer que los usuarios se sientan más cómodos, libres de confusiones y más vinculados
con la aplicación al poder personalizarla y sentirla más “suya”.
 El Neurodesign es una herramienta que nos ayuda a entender cómo trabaja la mente de
los usuarios para entender qué quieren, incluso antes de interactuar con el diseño del
app.

17
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

Ahora revisemos lo que estudiamos sobre Mobile Application Design.

El diseño de aplicaciones móviles en la actualidad, no abarca sólo el diseño de vistas, sino que
implica otras consideraciones.
Estas consideraciones incluyen la toma de decisiones sobre qué gestos se utilizarán en la
interacción, las animaciones que se aplicarán y qué patrones de diseño de UI se utilizarán en la
aplicación.
Contamos con una serie de patrones de diseño de UI que podemos incorporar en las distintas
interacciones de nuestras aplicaciones.
Vimos que lo recomendable era analizar en base a lo realizado en otras apps que resolvían
problemáticas similares, qué patrones eran los más adecuados y personalizar dichos patrones
según requiriera el caso.
Finalmente, vimos que existen diversas aproximaciones para crear una experiencia mobile, pero
había que considerar seis tendencias en el diseño de experiencias de este tipo, en busca de
ofrecer la mejor experiencia posible al usuario.

18
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

19
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

20
© UPC. Todos los derechos reservados.
Tendencias y buenas prácticas

21
© UPC. Todos los derechos reservados.