Heurísticas Patrones

Evaluación heurística Presentada por Mariana Fiorillo AYU 2019
Evaluación
heurística
+ patrones UI
+ principios de cognición
Evaluación heurística /
evaluación experta
Creado por Nielsen y Molich en 1990. No involucra usuarios, por lo que no
reemplaza bajo ningún aspecto las pruebas
Es un método de evaluación de interfaces con usuarios reales.
(Usability Engineering) para hallar problemas
de usabilidad. No se hace con un único experto porque es
imposible que todos los problemas sean
Realizada por un grupo de evaluadores hallados por una única persona.
expertos que examinan y juzgan la interfaz
teniendo en mente las reglas heurísticas.
¿Cómo se hace?
Número recomendado
por Jakob Nielsen
Entre 3 y 5 evaluadores expertos revisan la interfaz.
Cada uno de los evaluadores hace el relevamiento

de manera individual.
Una vez que todos terminaron, se pone en común

los hallazgos.
El cuadro muestra que evaluador encontró que problema de

usabilidad en una EH de un sistema bancario.
Cada fila representa uno de los 19 evaluadores y cada columna
representa uno de los 16 problemas de usabilidad.
Cada cuadrado muestra si el evaluador representado por la fila
encontró el problema de usabilidad representado por la columna, si
esta blanco quiere decir que el evaluador no encontró el problema.
Las filas se han ordenado de manera que los evaluadores más
exitosos estén en la parte inferior y los menos exitosos estén en la
parte superior.
Las columnas se han ordenado de tal manera que los problemas de
usabilidad que son más fáciles de encontrar están a la derecha y los
problemas de usabilidad que son más difíciles de encontrar están a
la izquierda.
¿Cuándo se hacen?
● Antes de realizar una prueba de
Usabilidad.
● Cuando sabes que hay problemas pero
necesitas evidenciarlos.
● Antes de rediseñar un sitio.
● En la etapa temprana del desarrollo: por
ejemplo antes de una release.
Caminata cognitiva
Tiene por objetivo evaluar el Se toma registro de los pasos que hace el
aprendizaje del sistema. usuario y se compara con los pasos
pensados en el diseño de la interfaz.
Parte de una interfaz, se entregan
escenario y una tarea, se pide a usuarios Se busca reconstruir el paso a paso de la
reales interactuar con el sistema. interacción del usuario con el sistema.
Caminata heurística
Combina los aspectos de la evaluación El primer paso es evaluar un producto

heurística con la caminata cognitiva. basándose en un conjunto de tareas y
preguntas asociadas con esas tareas.
Los evaluadores hacen dos pasadas por
el sistema.
El segundo paso es evaluar el producto
de acuerdo con un conjunto de
heurísticas.
Pasos de la caminata heurística
01 | Se desarrollan preguntas clave sobre 04 | Se documenta lo encontrado.

los escenarios y tareas claves del sitio. 05 | Se vuelve a revisar el sitio con la lista
de heurísticas.
02 | Se priorizan las tareas que se realizan
en el sitio. 06 | Se documenta lo encontrado.
03 | Se recorre el producto con las 07 | Se le asigna puntajes de severidad.

preguntas y tareas a mano para poder
descubrir posibles problemas de usabilidad. 08 | Se pone en común con otros evaluadores.
Indice de gravedad La frecuencia con la que se produce el
problema: ¿Es común o raro?
El impacto del problema si ocurre: ¿Será

fácil o difícil de superar para los usuarios?
La persistencia del problema: ¿es un

problema de una sola vez o los usuarios
Jakob Nielsen define a la gravedad se verán entorpecidos repetidamente por
de un problema de usabilidad como el problema?
una combinación de tres factores
Es necesario evaluar el impacto del
problema en el mercado.
Indice de gravedad por Jakob Nielsen

0 = No estoy de acuerdo en que esto sea un 3 = Gran problema de usabilidad: importante
problema de usabilidad para solucionar, por lo que se le debe dar una
alta prioridad
1 = Solo problema estético: no es necesario
arreglarlo a menos que haya tiempo adicional 4 = Catástrofe de la usabilidad: es imperativo
disponible en el proyecto solucionar esto antes de que se pueda lanzar el
producto
2 = Problema de usabilidad menor: corregir
esto debe tener baja prioridad
Cómo se documentan
Ubicación: Página de registro + link Indice de gravedad: 2
Problema: Al completar el formulario el sitio no Regla Heurística no aplicada: “Visibilidad de

indica si lo envió o no. estado del sistema”
Descripción: Al ingresar en el formulario de Captura de pantalla: Refuerzo gráfico del

registro de cuenta una vez que se completa la problema.
información y se hace click en el botón “enviar” el
sitio no hace nada, por lo que no se puede saber si
se envió o no.
Otras heurísticas
Jakob Nielsen, 10 reglas Heurísticas Smith & Mosier, 944 guidelines para el diseño de
interfaz de usuario (1986)
Bruce "Tog" Tognazzini, Principios básicos para el
diseño de interfaces Bastien and Scapin, 18 criterios de Ergonomía
Ben Shneiderman, 8 reglas de oro Connell & Hammond, 30 principios de Usabilidad
Gerhardt-Powals, 10 principios cognitivos de David Travis, 247 guidelines de Usabilidad

ingeniería
Heurísticas de Nielsen
Los principios heurísticos de Nielsen proponen
analizar el diseño desde los siguientes puntos:
1. Visibilidad del estado del sistema. 7. Flexibilidad y eficiencia de uso.

2. Utilizar el lenguaje de los usuarios. 8. Estética y diseño minimalista.
3. Control y libertad para el usuario. 9. Ayudar a los usuarios a reconocer,
4. Consistencia y estándares. diagnosticar y recuperarse de errores.
5. Prevención de errores. 10. Ayuda y documentación.
6. Minimizar la carga de la memoria del
usuario.
Visibilidad del estado

del sistema
01
El sistema siempre debería mantener informados a los
usuarios de lo que está ocurriendo, a través de
retroalimentación apropiada dentro de un tiempo
razonable.
https://www.nngroup.com/articles/visibility-system-status/
01. Visibilidad del estado del sistema

Relación entre el sistema

y el mundo real
02
CANCELAR
El sistema debería hablar el lenguaje de los
usuarios mediante palabras, frases y conceptos
que sean familiares al usuario, más que con PAGAR
términos relacionados con el sistema. Seguir
las convenciones del mundo real, haciendo que
la información aparezca en un orden natural y
lógico.
https://www.nngroup.com/articles/match-system-real-world/
02. Relación entre el sistema y el mundo real


Si No
Los usuarios deben controlar de manera directa Evitar las interacciones que disparan el
los elementos. movimiento.
Control y libertad del

usuario
03
Hay ocasiones en que los usuarios elegirán las funciones
del sistema por error y necesitarán una “salida de
emergencia” claramente marcada para dejar el estado
no deseado al que accedieron, sin tener que pasar por
una serie de pasos. Se deben apoyar las funciones de
deshacer y rehacer.
https://www.nngroup.com/articles/do-interface-standards-s
tifle-design-creativity/
03. Control y libertad del usuario
Consistencia y
estándares
04
Los usuarios no deberían cuestionarse si acciones,
situaciones o palabras diferentes significan en realidad
la misma cosa; hay que seguir las convenciones
establecidas.
04. Consistencia y estándares
Prevención de errores
05
Mucho mejor que un buen diseño de mensajes de error

es realizar un diseño cuidadoso que prevenga la
ocurrencia de problemas.
https://www.nngroup.com/articles/slips/
05. Prevención de errores
Reconocimiento antes
que recuerdo
06
Se deben hacer visibles los objetos, acciones y opciones,
El usuario no tendría que recordar la información que se
le da en una parte del proceso, para seguir adelante. Las
instrucciones para el uso del sistema deben estar a la
vista o ser fácilmente recuperables cuando sea
necesario.
https://www.nngroup.com/articles/recognition-and-recall/
06. Reconocimiento antes que recuerdo
06. Reconocimiento antes que recuerdo
Flexibilidad y eficiencia
de uso
07
La presencia de aceleradores, que no son vistos por los
usuarios novatos, puede ofrecer una interacción más
rápida a los usuarios expertos que la que el sistema
puede proveer a los usuarios de todo tipo. Se debe
permitir que los usuarios adapte el sistema para usos
frecuentes.
Cuando creo el calendar Cuando entro al calendar
07. Flexibilidad y eficiencia de uso

Estética y diseño
minimalista
08
Los diálogos no deben contener información que es
irrelevante o poco usada. Cada unidad extra de
información en un diálogo, compite con las unidades de
información relevante y disminuye su visibilidad
relativa.
08. Estética y diseño minimalista
08. Estética y diseño minimalista
Diagnosticar y
recuperarse de errores
09
Ayudar a los usuarios a reconocer los mensajes de error,
estos se deben entregar en un lenguaje claro y simple,
indicando en forma precisa el problema y sugerir una
solución constructiva al problema.
09. Diagnosticar y recuperarse de errores
Ayuda y
documentación
10
Incluso en los casos en que el sistema pueda ser usado
sin documentación, podría ser necesario ofrecer ayuda y
documentación. Dicha información debería ser fácil de
buscar, estar enfocada en las tareas del usuario, con una
lista concreta de pasos a desarrollar y no ser demasiado
extensa.
10. Ayuda y documentación
10. Ayuda y documentación
15’
y volvemos
Patrones UI Es una buena práctica
formalizada, una guía o
plantilla, que se pueden utilizar
para resolver problemas
comunes en el diseño de una
aplicación o sistema.
¿Qué es?
Es una solución reutilizable a
un problema que ocurre
comúnmente que se puede
encontrar todos los días.
Patrones mal
usados…
modelo mental ≠
modelo conceptual
Cómo usar los patrones UI

● Resumen del problema
● Solución
● Ejemplo
● Uso
Resumen del ¿Qué problema de usuario está
resolviendo?
problema
Mantener el foco, ser concreto y
escribirlo como si fuera una historia
de usuario - en una sola frase.
Patrones UI
Solución ¿Cómo otros han resuelto este
problema?
Describir la navegación, cómo se

obtienen la información (inputs),
como se trata los datos e
integraciones con otros servicios o
Patrones UI aplicaciones, la visualización de la
información y el contenido.
Ejemplo Una captura de pantalla o maqueta
es suficiente; otras veces, datos de
relevo usuario y/o notas adicionales
son necesarios para comunicar
claramente el patrón.
Patrones UI
Uso ¿Cuándo debe este patrón ser o no
ser utilizado?
Arquitectura de producto, diseño de

la interfaz, el dispositivo(s), el
lenguaje de programación, ausencia
o existencia de otros patrones de
Patrones UI diseño, tipo de usuario, y los casos
de uso principales.
Tipos de patrones UI
Navegación Manejo de datos Miscelaneas
● Tabs ● Tablas ● Shopping

● Salto entre jerarquías ● Datos de formato ● Aumento de frecuencia
● Menu ● Imágenes
● Contenido ● Búsquedas Obtener inputs
● Gestos
Social ● Forms
Onboarding ● Explicar procesos
● Reputación ● Para impulsar acciones de
● Guía ● Interacciones sociales comunidad
● Registro
Menu:
Springboard
Ej.: IOs / Spotify
Problema: El usuario necesita acceder de

manera rápida a diferentes contenidos o
herramientas de uso frecuente.
Solución: Este tipo de panel personalizado se

suele utilizar para mostrar los accesos a las
herramientas necesarias. Por lo general, se
puede personalizar cambiando el layout y la
distribución de los accesos.
Menu: tabs
Ej.: Instagram / Facebook
Problema: El usuario quiere acceder de

manera rápida a las acciones principales.
Solución: Hay numerosas variaciones de

este patrón, incluyendo menús de listas
personalizadas, listas agrupadas y listas
mejoradas. Las listas mejoradas son menús
de lista sencillos con funciones adicionales
para buscar, explorar o filtrar.
Menu:
Hamburguesa
Ej.: Slack, Gmail Solución: Una sección secundaria de la

aplicación - como la navegación, chat,
Problema: El usuario necesita una forma de configuraciones, perfiles de usuario, etc. -
navegar entre las distintas secciones de la está escondido en un panel plegable oculto
aplicación sin distraerse en cada sección bajo la sección principal cuando no se
individual. necesita.
Usualmente escondido bajo un "menú de

hamburguesa".
Onboarding: paso a
paso
Ej.: Slack
Problema: El usuario necesita una forma de

conocer el producto para poder utilizarlo o
tomar una decisión de compra.
Solución: Se lleva a usuario a través de un paso

paso objetivo y descriptivo que hace foco sobre
lo primordial de manera clara y objetiva.
Seguir
/Follow
Problema: El usuario quiere seguir y mantenerse al

día con temas o asuntos, no sólo a las personas.
Solución: Permite a los usuarios seleccionar los

elementos que con los que desean mantenerse al
día. Ya si tiene amigos como si no, hay infinidad de
contenido generado por usuarios para mantenerte
ocupado.
Votar y promover
Ej.: 9gag / Netflix
Problema: El usuario quiere respaldar y compartir

el contenido que les gusta.
Solución: Permitir que los usuarios participen en la

curaduría de contenidos mediante el diseño de un
sistema de votación, donde los contenidos que les
gusta se puede promover.
Metamorfosis del
botón
Ej.: Twitter / Spotify Solución: Reemplazar los botones y

controles con la funcionalidad alternativa.
Problema: El usuario quiere realizar Dependiendo de lo que el usuario está
diferentes tipos de acciones, pero es haciendo en la actualidad, la interfaz podría
limitado el espacio en pantalla para mostrar reemplazar un elemento con otro, por
todos estos controles. ejemplo, "Hacer" y "Deshacer" o "Agregar"
y "Eliminar". Esto tiene sentido cuando las
acciones alternas están relacionados de
alguna manera.
Encontrar e
invitar amigos
Ej.: Foursquare, Fancy
Problema: El usuario quiere experimentar la

app con sus amigos.
Solución: Hacer el proceso de invitación simple

y fácil. Permitir invitar a otras personas a
través de los teléfonos, otras redes sociales, y
el correo electrónico.
Pantalla
completa
/Full-Screen Mode
Ej.: Instagram / Medium Solución: Diseñar un modo de pantalla completa
que oculta o minimiza el desorden UI alrededor del
Problema: El usuario quiere centrarse en el contenido. Esto ayuda a los usuarios centrarse en lo
contenido en lugar de distraerse con la interfaz. que importa. Esencial para los reproductores de
vídeo, funciona particularmente bien para
aplicaciones multimedia.
Círculos
Ej.: Facebook Messenger / Instagram
Problema: El usuario quiere distinguir

rápidamente entre botones y medios de
comunicación.
Solución: Cambiar el típico formato miniatura

por los círculos en su lugar. Limpia la interfaz de
usuario un poco con el espacio en blanco
adicional entre el contenido adyacente. Agrega
diferencia a la interfaz.
Estados vacios
Ej.: YPlan / Airbnb
Problema: El usuario tiene que saber por qué

una sección de la aplicación está vacío y qué
hacer a continuación.
Solución: Ofrecer una buena primera

impresión a través del diseño para el "estado en
blanco". Es el punto en el que muchos usuarios
deciden si vale la pena continuar, por lo que el
diseño del estado vacío es muy importante. Es
lugar para mostrar algunos ejemplos que
ayudarán a los usuarios a empezar o continuar.
Manipulación directa
de contenido y Datos
Ej.: Instagram / Photoshop Express Solución: Permitir editar el contenido

directamente sin necesidad de hacer la
Problema: El usuario desea interactuar con el transición entre los modos de editar o borrar.
contenido introducida o datos de una manera Permitir trabajar con los datos directamente en
directa e intuitiva. la pantalla.
Tirar para buscar
Ej.: 9Gag / Snapchat Solución: Tirar hacia abajo para ver el buscador que
estaba oculto anteriormente sin ocupar espacios
Problema: El usuario desea buscar dentro del extras ni sacando el foco del contenido.
contenido de manera rápida.
Gestos
http://developer.android.com/design/patte
rns/gestures.html
Un par de cosas más a tener en
cuenta para una buena UI
Ley de Hick Uno de los argumentos más
utilizados a la hora de justificar
Hyman la decisión de reducir el número
de opciones en una interfaz de
usuario es citar la ley de Hick:
‘Less is more’ A mayor número de opciones,

mayor será el tiempo y
esfuerzo del usuario para
localizar la deseada.
Percepción
4
10
Cuando los objetos están cerca entre sí, tienden a percibirse como un grupo. Una buena práctica es usar
espacios en blanco para separar los grupos.
Los elementos que tienen similiardiad visual entre tienden a agruparse.
Para agrupar elementos podemos hacerlo repitiendo color, tamaño, orientacion, tipografia, forma, etc.
Nuestra atencion se la llevan los objetivos se diferencian por alguna razón del resto. Contraste color,
tamaño, etc. Podemos usar esto para enfatizar elementos y guiar así las miradas del usuario.
Los elementos ser perciben juntos cuando estan compartiendo un área delimitada claramente.
Los elementos ordenados en la misma orientación son percibidos como parte de lo mismo. Esto se puede
usar para denotar un camino por ej.
Cuando el objeto esta incompleto pero una parte suficiente del elemento esta expuesta, nuestro cerebro
busca la continuidad de un patron. Llenamos huecos. Esto se puede usar por ejemplo para dar a entender
que una lista de elementos continual.
Podemos enviar elementos al fondo y otros al frente usando el principio de fondo y figura. Por medio de
contraste, superpoción, transparencias, podemos crear la idea de que un elemento esta por delante de
otro. Esto es últi para separar modales de su entorno.
Composición
Cada vez que un usuario entra a una web, se Se debe componer con la armonía suficiente para
enfrenta a un universo de opciones: menús, que el usuario no quede paralizado, para
submenús, banners, enlaces de texto, imágenes, minimizar su tiempo de reacción, y sobre todo,
iconos, todos ellos diferentes a la otra web que ha para conducirlo.
visitado hace tan sólo unos segundos.
Se debe lograr que el usuario no conciba esa

página como una selección de opciones, aunque
realmente lo sean.
Elementos gráficos
Utilizar colores, tipografías, tamaño, movimiento Movimiento e interacción para destacar.
para resaltar opciones en función del grado de
elección que desees trasladar al usuario. Equilibrio entre los espacios llenos y vacíos para
generar un estructura comprensible.
Color Generar contrastes de valor o saturación
para resaltar elementos. Semántica Seleccionar palabras entendibles por
nuestro usuario.
Tipografía Utilizar las variables de las familias para
jerarquizar elementos.
Articulos utilizados y recomendados
https://twitter.com/pablostanley/status/974303621092225024?lang=en
https://www.smashingmagazine.com/2014/03/design-principles-visual-perc
eption-and-the-principles-of-gestalt/
http://ui-patterns.com
https://patterntap.com/patterntap
https://www.nngroup.com/topic/heuristic-evaluation/
UXPin Mobile UI Design Patterns

Heurísticas Patrones

Cargado por

Información del documento

Título 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

Heurísticas Patrones

Cargado por

Copyright:

Formatos disponibles

Evaluación heurística Presentada por Mariana Fiorillo AYU 2019

Entre 3 y 5 evaluadores expertos revisan la interfaz.

Cada uno de los evaluadores hace el relevamiento

Una vez que todos terminaron, se pone en común

El cuadro muestra que evaluador encontró que problema de

Combina los aspectos de la evaluación El primer paso es evaluar un producto

Pasos de la caminata heurística

01 | Se desarrollan preguntas clave sobre 04 | Se documenta lo encontrado.

03 | Se recorre el producto con las 07 | Se le asigna puntajes de severidad.

El impacto del problema si ocurre: ¿Será

La persistencia del problema: ¿es un

Indice de gravedad por Jakob Nielsen

Problema: Al completar el formulario el sitio no Regla Heurística no aplicada: “Visibilidad de

Descripción: Al ingresar en el formulario de Captura de pantalla: Refuerzo gráﬁco del

Ben Shneiderman, 8 reglas de oro Connell & Hammond, 30 principios de Usabilidad

Gerhardt-Powals, 10 principios cognitivos de David Travis, 247 guidelines de Usabilidad

1. Visibilidad del estado del sistema. 7. Flexibilidad y eﬁciencia de uso.

Visibilidad del estado

01. Visibilidad del estado del sistema

Relación entre el sistema

02. Relación entre el sistema y el mundo real

02. Relación entre el sistema y el mundo real

Control y libertad del

Mucho mejor que un buen diseño de mensajes de error

07. Flexibilidad y eﬁciencia de uso

Cómo usar los patrones UI

Describir la navegación, cómo se

Arquitectura de producto, diseño de

● Tabs ● Tablas ● Shopping

Problema: El usuario necesita acceder de

Solución: Este tipo de panel personalizado se

Ej.: Instagram / Facebook

Problema: El usuario quiere acceder de

Solución: Hay numerosas variaciones de

Ej.: Slack, Gmail Solución: Una sección secundaria de la

Usualmente escondido bajo un "menú de

Problema: El usuario necesita una forma de

Solución: Se lleva a usuario a través de un paso

Problema: El usuario quiere seguir y mantenerse al

Solución: Permite a los usuarios seleccionar los

Ej.: 9gag / Netﬂix

Problema: El usuario quiere respaldar y compartir

Solución: Permitir que los usuarios participen en la

Ej.: Twitter / Spotify Solución: Reemplazar los botones y

Ej.: Foursquare, Fancy

Problema: El usuario quiere experimentar la

Solución: Hacer el proceso de invitación simple

Ej.: Facebook Messenger / Instagram

Problema: El usuario quiere distinguir

Solución: Cambiar el típico formato miniatura

Problema: El usuario tiene que saber por qué

Solución: Ofrecer una buena primera

Ej.: Instagram / Photoshop Express Solución: Permitir editar el contenido

Tirar para buscar

‘Less is more’ A mayor número de opciones,

Se debe lograr que el usuario no conciba esa

Articulos utilizados y recomendados

También podría gustarte