Presentacion-CICE MDAM 202105 UX-UI - 003

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D.
Arnedo Mahr
VS-531/A-21 Máster en Digital
Marketing, ecommerce & Lead
Generation. MGA
CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

VS-531/A-21
Índice UX-UI
● Introducción a la experiencia del usuario
● Entendiendo a los usuarios
● Establecer objetivos
● Planificar el flujo de usuario
● Wireframing
● Design Thinking

VS-531/A-21
Índice UX-UI
● Herramientas para construir un proyecto
digital
● Taller: Crear un proyecto desde cero

Martín D. Arnedo Mahr
martin.arnedo@outlook.com
https://www.linkedin.com/in/ martinarnedomahr

Nerea
Elian
Izzan

AI
A RQUITECTURA D E L A I NORMACIÓN

Lo que no DISEÑAR
Se ve al EXPERIENCIAS
AI
Usuarios
Web Final Interface [sitio web]
Arquitectos
Esquemas, mapas.
Metadata, Esquemas de clasificación.
Estrategias de Arquitectura de la información
Planes de proyecto.
Usuarios ¿Cuáles son las necesidades?
Inicio
¿Cuál es el comportamiento?
Contenido ¿Cuál es la estructura? ¿Qué significa?
Proyecto Web Contexto Cultural y tecnológico
Organizar

AI
Organizar – Estructuras secuenciales
La estructura secuencial es aquella en la que una acción (instrucción) sigue a otra en secuencia. Las tareas se suceden
de tal modo que la salida de una es la entrada de la siguiente y así sucesivamente hasta el fin del proceso.
Un paso nos lleva a otro, de forma acumulativa.

AI

AI

AI

AI

Estructura de Redes

AI
Organizar – Estructuras de redes
No existe una conexión única entre datos.

La no existencia de jerarquías, permiten ir y venir al usuario, sin
un orden en principio lógico.

AI

AI

FORO
Aumentamos nuestra red

Presentamos nuestros perfiles sociales a los compañeros del
master, con la intención de estar conectados e interactuar en los
próximos módulos.

Estructura Conversacional

AI
Organizar – Estructuras Conversacionales
Las estructuras conversacionales buscan humanizar las

experiencias del usuario.
En forma de chats, chatbots y con emojis, se pueden ofrecer
servicios en forma digital, cada vez más humanos.
How to use Group FaceTime on your iPhone, iPad, or iPod touch — Apple Support - YouTube

AI
How to use Group FaceTime on your iPhone, iPad, or iPod touch — Apple Support - YouTube

AI
• Personalización: para captar mayor atención del usuario.
• Naturalidad, transparencia, seguridad. Menos fricción.
• Micro-interacciones: pequeñas animaciones que mejoran la experiencia y enriquecen la conexión.
• Chats: para comprar como si estuvieses en una tienda cara a cara.
• Auge en el diseño de productos conversacionales.
• Voice assistants en la vida privada: más fluida, trato familiar, incorporado en millones de hogares,
coches, …

AI
CICE - Escuela Profesional de Nuevas Tecnologías Relational Agent for Mental Health | Woebot Health Y2K21-V · Martín D. Arnedo Mahr
AI
CICE - Escuela Profesional de Nuevas Tecnologías An Overview of Woebot for Clinicians - YouTube Y2K21-V · Martín D. Arnedo Mahr
AI
“The best interface

is no interface”

AI
CICE - Escuela Profesional de Nuevas Tecnologías Google Home Official Ad - YouTube Y2K21-V · Martín D. Arnedo Mahr
Estructuras Jerarquicas

AI
Organizar – Estructuras jerarquicas
La "jerarquía" es una estructura que se establece en orden
a su criterio de subordinación entre personas, animales y
valores. Tal criterio puede ser superioridad, inferioridad,
anterioridad, posterioridad, etc; es decir, cualquier cualidad
categórica de gradación agente que caracterice su
interdependencia. Tiene un uso frecuente en las
clasificaciones mitológicas y teológicas; y se aplica a todo
tipo de ámbitos (Física, morales, empresariales, etc.).
Cuando existe una jerarquía se dice, por extensión, que hay
una organización jerárquica. Como concepto
infraestructural, define el modo de formación entre los
diversos rangos atribuibles a un determinado sistema en el
que cada elemento esté supeditado gradualmente al
elemento inmediatamente previo.

AI
Organizar – Estructuras jerarquicas

AI
Organizar – Estructuras Jerarquicas

AI
Organizar –
Estructuras
jerarquicas

Hub & Spoke

AI
Organizar – Hub & Spoke
El modelo de distribución Hub & Spoke nace de un sistema
de conexiones que permite reducir el numero de rutas para
comunicar los aeropuertos entre sí.
Consiste en concentrar el tráfico en determinados

aeropuertos de gran capacidad o Hubs que se encargan de
enlazar los de menor capacidad o importancia Spokes.
Aplicado al mundo web, se plantea como una red en

estrella, siendo Twitter y Pinterest

Nested Doll [Muñeca Rusa]

AI
Organizar – Nested Doll
Este modelo guía al usuario de forma lineal, hasta detallar el contenido.

Cuando los usuarios se encuentran en condiciones difíciles, este es un método de navegación rápido y
fácil. También le da al usuario una fuerte sensación de dónde se encuentra en la estructura del
contenido debido a la percepción de moverse hacia adelante y luego hacia atrás.
Tabbed view

Organizar – Tabbed View
Este es un patrón con el que los usuarios habituales de aplicaciones estarán familiarizados. Es una colección de
secciones unidas por un menú de barra de herramientas. Esto permite al usuario escanear rápidamente y
comprender la funcionalidad completa de la aplicación cuando se abre por primera vez.

Dashboard

Organizar – Bento Box - Dashboard
Este patrón es más adecuado para tabletas que para dispositivos móviles debido a su complejidad. Puede ser
realmente poderoso, ya que permite al usuario comprender información clave de un vistazo, pero depende en
gran medida de tener una interfaz bien diseñada con información presentada con claridad.

AI
¿?

AI
¿?

AI
Organizar – Hub & Spoke

AI
¿?

Estructuras
demasiado verticales

AI

AI

AI

AI

AI

AI

AI

Estructuras
demasiado horizontales

AI

AI

AI

Ley de Hick

Ley de Hick
La ley de Hick, o la ley Hick-Hyman, llamada así por los

psicólogos británicos y estadounidenses William Edmund Hick y
Ray Hyman.
Describe el tiempo que tarda una persona en tomar una

decisión respecto a la cantidad de posibles elecciones que
tiene: aumentar el número de opciones aumentará el tiempo de
decisión logarítmicamente.

Ley de Hick

Ley de Hick
● Reducir el número de opciones posibles.

● Agrupar y jerarquizar.
● Destacar las de uso frecuente.
● Fragmentar su aparición.
● Ofrecer opciones destacadas.

Ley de Hick
Errores frecuentes en la interpretación de la Ley de Hick:
– Existe una simplificación excesiva acerca de este principio, que hace referencia al clásico refrán popular
“menos es más”; cuando en realidad lo que buscamos por medio de este principio es explicar que el orden y
categorización de la información reducen la curva de aprendizaje y facilitan la selección de estímulos.
– Otro error frecuente en la utilización de esta ley es que si la búsqueda realizada es de orden semántica, el
tiempo empleado será lineal y no tendrá relevancia el nivel de complejidad de los estímulos, imposibilitando
la predicción del tiempo empleado para la tarea asignada.

Ley de Hick

Ley de Hick

Ley de Hick

Ley de Hick

Ley de Miller

Ley de Miller
la ley de Miller dicta que un usuario
suele mantener en su memoria de
trabajo alrededor de 7 elementos. Por
eso, una norma muy seguida a nivel de
UX es que los menús de navegación de
las páginas web no tengan más de 7
elementos, ya que si pusiéramos más
elementos no conseguiríamos que los
usuarios se quedasen con ninguno de
ellos.

Ley de Hick

Ley de Hick

Ley de FITT

Ley de FITT
La ley de Fitts se usa para modelar el
acto de apuntar, tanto en el mundo real,
por ejemplo con una mano o dedo,
como en los ordenadores, por ejemplo
con un ratón.

Ley de Hick

Glosario Visual
● Etiquetado
● Encabezado
● Sistemas de navegación
● Metadatos
● Folksonomía
● Llamadas a la acción
● Jerarquía
● Frecuencia
● Copy

Etiquetado
Textos que se utilizan para definir la
navegación, categorizar los contenidos y
guiar en la acciones.
Sistema de cajas acústicas activas inalámbricas audio pro A26 - Scenic

Light - Soluciones audiovisuales - Sonido Profesional

Encabezado
Permiten situar al usuario
¿Dónde Estoy?

Sistema de navegación
Varios sistemas de navegación

con un mismo fin.
Metadatos
Información estructurada de la
información.

Metadatos

Folksonomía
La folksonomía son las etiquetas

agregadas por los usuarios.
Fotografia Nocturna | Taller de Fotografía Nocturna con "El … | Flickr

Folksonomía

Llamadas a la Acción
Señalar las acciones que puede realizar el

usuario, de forma finita. Incitando al clic.

Llamadas a la Acción
Señalar las acciones que puede realizar el

usuario, de forma finita. Incitando al clic.

Llamadas a la Acción – Patron F
El patrón en F es el estándar para

páginas con mucho texto, como páginas
de noticias o blogs. Los ojos de los
usuarios escanean la página de
izquierda a derecha, luego van hacia la
izquierda antes de bajar la mirada y
escanear una página web nuevamente.

Llamadas a la Acción – Patron Z
Encontrarás este patrón en páginas web

cuyo contenidos son más espaciosos y los
ojos de los usuarios escanearán las páginas
como el Zorro dibuja la Z con su espada.

Jerarquía
La jerarquía visual es una característica esencial en el diseño de

interfaz de usuario. Una jerarquía visual adecuada establece un
camino visual claro para el usuario organizando el contenido y los
elementos gráficos de mayor a menor importancia, de este modo, se
facilita al usuario escanear y procesar la información del producto
digital.
Tamaño – Color - Espacio blanco - alineación - animación

Jerarquía - Tamaño

Jerarquía - Tamaño
El tamaño y la escala es posiblemente una de las técnicas más fáciles y

efectivas de enfatizar el contenido y los elementos visuales. El usuario
se fija primero en los objetos más grandes. Cuanto más grande es el
elemento, más atención atrae. Por otro lado, los elementos visuales
de menor importancia pueden ir en tamaños más reducidos. Como en
cualquier principio de diseño, el equilibrio es la clave.

Jerarquía - Color

Jerarquía - Color
Los colores atrevidos y contrastantes exigen atención, y pueden ser

usados para enfatizar elementos específicos. Un toque brillante de un
color como el rojo o el verde, por ejemplo, pueden ayudar a que
ciertos elementos destaquen en contraste a otros. Y del mismo modo
es posible trasladar cualquier elemento o información a un segundo
plano haciendo uso de colores secundarios menos llamativos.

Jerarquía – Espacio en Blanco

Jerarquía – Espacio en Blanco
Otro recurso a tener en cuenta es el espacio. Podemos lograr atraer

sustancialmente la atención del usuario jugando con los espacios en
blanco. Es posible llamar la atención sobre un elemento individual
dándole un amplio espacio blanco (o negativo) alrededor para
respirar. Más espacio alrededor de un elemento atraerá la mirada
hacia él.

Jerarquía – Alineación

Jerarquía – Alineación
La alineación crea un orden entre los elementos de diseño. Los

diseños de página se diseñan típicamente de acuerdo a una
cuadrícula de líneas verticales y horizontales. En el diseño basado en
una cuadrícula, es fácil atraer la atención rompiendo la cuadrícula.
Podemos ver en el ejemplo que tenemos a continuación como el
elemento que rompe con el alineamiento del resto de círculos llama
especialmente la atención.

Jerarquía – Animación

Jerarquía – Animación
La animación de un elemento puede crear un poderoso interés visual

logrando llamar la atención del usuario a ciertas partes de su diseño.
Podemos observar como el circulo del medio atrae especialmente la
atención por su movimiento. Sin embargo, hay que utilizar con
cuidado este recurso ya que puede abrumar al usuario.

Frecuencia
La elección de un estilo de
botón depende de la primacía
del botón, el número de
contenedores en pantalla y el
diseño de la pantalla.

Frecuencia
Función ¿El botón es lo suficientemente
importante y omnipresente como para ser un
botón de acción flotante?
Dimensión Elija el tipo de botón en función del

contenedor en el que se encontrará y de
cuántas capas de espacio z tenga en pantalla.
Diseño Utilice principalmente un tipo de botón

por contenedor.
Solo mezcle tipos de botones cuando tenga una
buena razón para hacerlo, como enfatizar una
función importante.

COPY
Características de un buen copy
● Verbos
● 1 persona
● Descriptivo
● Conciso
● Visual
● Comprensibles sin contexto
● SEO

COPY

COPY

Keep On Moving
● Navegación
● Dificultades
● Zeigarnik Effect
● Tareas incompletas
● Contenido Relacionado
● Ampliar información, más acciones
● Scroll infinito / Paginación
● Transiciones

Navegación
● ¿Dónde estoy?
● ¿Dónde puedo ir?
● ¿Qué hay cerca de aquí?
● ¿Cómo he llegado hasta aquí?

Dificultades móvil
● Poco espacio para mostrar una visión general del sitio
● Reforzar la concentración en un entorno con distracciones
● Mantener las tareas en procesos interrumpidos

Zeigarnik Effect
En psicología, el efecto Zeigárnik se produce cuando una

actividad que ha sido interrumpida puede ser recordada
más fácilmente. Se postula que las personas recuerdan
mejor las tareas interrumpidas o no terminadas que las
tareas completadas.

Contenido Relacionado
El contenido relacionado
mantiene al visitante en la
web o App durante más
tiempo. En un e-commerce
puede realizar un efecto
push en las ventas.

Ampliar información
Los sistemas de ampliar

más información, o de
realizar más acciones
invitan al usuario a ofrecer
información a la plataforma
u a otro usuario.
Permiten que nuestro lead
se quede más tiempo en la
misma.

Cargar contenido / scroll infinito /
paginación
Los sistemas de ampliar
más información, o de
realizar más acciones
invitan al usuario a ofrecer
información a la plataforma
u a otro usuario.
Permiten que nuestro lead
se quede más tiempo en la
misma.

Transiciones
Son esas animaciones que

en algunos webs molestan
tanto, pero que al mismo
tiempo quedan muy bien
en botones y Apps

Fuentes
Imágenes: https://www.hashtag.pe/2017/03/15/diseno-ux-vs-diseno-ui/
Imágenes: https://freepik.es
Google Analytics https://analytics.withgoogle.com
Martín Arnedo https://martinarnedo.es
Ux en Español https://uxenespanol.com/ux/10-leyes-ux-ui/
Eunoia https://www.eunoia.es/blog/la-importancia-de-la-jerarquia-visual-en-el-diseno-ux
UX Planet https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6
Dalai Beuty https://dalaibeuty.com

Anclamos y Seguimos
Mañana
Si te gustó, continuamos en las R.R.S.S.

Presentacion-CICE MDAM 202105 UX-UI - 003

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Presentacion-CICE MDAM 202105 UX-UI - 003

Cargado por

Copyright:

Formatos disponibles

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D.

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

Un paso nos lleva a otro, de forma acumulativa.

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

No existe una conexión única entre datos.

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

Aumentamos nuestra red

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

Las estructuras conversacionales buscan humanizar las

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

• Personalización: para captar mayor atención del usuario.

• Naturalidad, transparencia, seguridad. Menos fricción.

• Micro-interacciones: pequeñas animaciones que mejoran la experiencia y enriquecen la conexión.

• Chats: para comprar como si estuvieses en una tienda cara a cara.

• Auge en el diseño de productos conversacionales.

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

“The best interface

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

Consiste en concentrar el tráfico en determinados

Aplicado al mundo web, se plantea como una red en

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

Este modelo guía al usuario de forma lineal, hasta detallar el contenido.

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr

CICE - Escuela Profesional de Nuevas Tecnologías Y2K21-V · Martín D. Arnedo Mahr