IDENTIFICANDO

CUMPLIMIENTO DE Taller 4

PRINCIPIOS DE DISEÑO
OBJETIVO
Comprender cómo se aplican los principios de diseño en aplicaciones existentes.
Familiarizarse con los principios de diseño de Shneiderman (8 reglas de Oro), y las
Heurísticas de Nielsen.
Ejemplificar los principios de diseño de Shneiderman y las Heurísticas de Nielsen.
 Además de los principios definidos por Norman, existen otros autores que han contribuido

PRINCIPI
en esta misma línea. Algunos de ellos son Shneiderman, con sus 8 reglas de Oro, y Nielsen
con 10 heurísticas de evaluación de diseño.

Repacemos los principios de diseño de Norman:

OS DE 1. Capacidad de ser Descubierto. Es posible determinar qué acciones son posibles y

el estado actual del dispositivo.

DISEÑO
2. Retroalimentación. Existe información completa y continua sobre los resultados de
las acciones y el estado actual del producto o servicio. Una vez ejecutada una acción,
es fácil determinar el nuevo estado.

DE
3. Modelo conceptual. El diseño proyecta toda la información necesaria para crear un
buen modelo conceptual del sistema, lo que lleva a la comprensión y la sensación de
control. El modelo conceptual mejora tanto la capacidad de descubrimiento como la
evaluación de los resultados.

INTERFAC 4. Affordances / Capacidades. Las característica del elemento son adecuadas para
hacer posibles las acciones deseadas.

ES
5. Señalizaciones (signifiers). El uso eficaz de las etiquetas (en palabra o imágenes)
asegura la posibilidad de ser descubierto y que la retroalimentación esté bien
comunicada e inteligible.

(DONALD
6. Mapeos. La relación entre los controles y sus acciones sigue los principios de una
buena cartografía, mejorada tanto como sea posible mediante la distribución espacial y
la contigüidad temporal.

NORMAN) 7. Restricciones. Proporcionar restricciones físicas, lógicas, semánticas y culturales

orienta las acciones y facilita la interpretación.
¿CÓMO SE VERIFICA EL CUMPLIMIENTO DE
LOS PRINCIPIOS DE DISEÑO?
RESPONDIENDO A LAS SIGUIENTES PREGUNTAS:

1. Capacidad de ser Descubierto. 5. Significantes. ¿Qué información

¿Qué puedo percibir que hace esta aplicación?
¿Qué visualizo? ¿Qué puedo presionar, rellenar,
mover, expandir?
2. Retroalimentación. ¿Qué sucedió
después de esa acción que completé?
veo…? ¿Qué significan los íconos?
¿La información es clara? ¿Qué
opciones hay en [menú]
[navegación]?

3. Modelo Conceptual. Esta aplicación 6. Mapeo. ¿Qué objeto reacciona a

se parece a… Me parece que puedo… ¿Cómo este control?
interpreto el diseño y las acciones? ¿Se ajusta a
mi modelo mental? 7. Restricciones. ¿Por qué no puedo
4. Affordance /Capacidades. ¿Cómo avanzar / hacer clic / escribir?
uso esto? ¿Puedo hacer clic? Rellenar? Deslizar?
Arrastrar?
EJEMPLO: APLICACIÓN
UBER

Esta foto de Autor desconocido está bajo licencia CC BY

CAPACIDAD DE
SER
DESCUBIERTO
Aplicación: Uber
¿Qué puedo percibir que hace esta aplicación? ¿Qué
visualizo?
 Áreas segmentadas (1 -7)
 Carrusel de imágenes
 Imágenes (íconos)
 Texto
 Dirección de Casa
 Mapa
 ¿Qué puedo hacer?
 Seleccionar (hacer clic) opciones: viaje, alimentos, entrega,
Ahora, Casa, Elegir ubicación, mapa.
 ¿Qué pasa la primera vez que lo uso?
 ¿Qué pasa después de la primera vez?
MODELO
CONCEPTUAL
Aplicación: Uber
Esta aplicación se parece a… Me parece que
puedo…

 ¿Qué conozco previamente? (modelo mental)

 Entiendo que funciona como un servicio de taxi: Espero que pueda
pedir un transporte que me lleve a un destino, y saber el costo.
 Conozco como funcionan botones, enlaces, mapas.
 El modelo conceptual se valida con el diseño del
producto. Lo ideal es que coincida con el modelo
mental del usuario (lo que conoce previamente).
 ¿Tiene sentido lo que conozco previamente, con lo que
me presenta la aplicación? ¿Tengo las opciones para
avanzar en el uso de la aplicación?
AFFORDANCES
Aplicación: Uber
¿Cómo uso esto? ¿Puedo hacer clic? Rellenar?
Deslizar? Arrastrar?
 ¿Qué puedo hacer?
 Puedo ver un carrusel de imágenes que tiene 3 imágenes. La
primera imagen me invita a seleccionar una opción.
 Puedo hacer clic en los botones de viaje, alimentos, entrega.
 Puedo indicar a dónde voy (aunque no es claro si es un botón)
 Puedo seleccionar la opción Casa y la opción Elegir ubicación
guardada, la flecha hacia la derecha, me hace pensar que sigue algo
más después.
 Hay un mapa que creo puedo hacer clic y seleccionar opciones.
 Notar que las posibilidades (affordance) de los
elementos de diseño también se verifican en el
descubrimiento.
 Esta pantalla tiene opciones que no me permiten
rápidamente saber si son botones o enlaces, pero cuando
se interactúa se valida o verifica las posibilidades
(affordance)
SEÑALIZACIO
NES
Aplicación: Uber
 Se puede verificar en esta interfaz: texto,
iconografía, ilustraciones, que ayudan a
comprender mejor las posibilidades
(affordances).

 La Jerarquía Visual, también permite leer y

entender rápidamente los títulos.
 “A dónde vas” es un enlace. Pero pareciera una etiqueta de
la opción “ahora”. Hay un fallo de “Affordance”.

RETROALIMENTACIÓN
Mi intención inicial fue “pedir un transporte”, hice clic en
Ahora, pero se abrió un calendario.

Luego hice clic en “¿A dónde vas?”

Retroalimentación: nueva interfaz

El resultado de la interacción
refuerza el modelo mental, o
lo modifica, según la
retroalimentación.
AFFORDANCE + RESTRICCIÓN
Affordance: Caja de texto para escribir destino.

Restricción: al escribir letras o números, me sugiere destinos,

que luego de confirmar me los despliegas en un mapa. Los
nombres que escriba deben coincidir con un lugar existente.
CONCLUSIÓN
No necesariamente los principios se aplican en todas las interfaces de una aplicación.
Siempre debe poder validarse el principio de “Descubrimiento”…
En algunas ocasiones el usuario debe interactuar, para poder validar algunos
principios: retroalimentación, affordances, etc.
Lo importante, al diseñar interfaces, es asegurarnos que nuestras interacciones
consideren estos principios.
8 REGLAS DE ORO DE
SHNEIDERMAN
1. Esfuércese por lograr consistencia: la consistencia se logra
cuando usamos la misma combinación de colores a lo
largo del sistema, así como las fuentes (letras), los
botones, enlaces, e íconos. Igualmente, se logra cuando
mantenemos la estructura (layout) del diseño a lo largo del
sistema. También es posible lograr consistencia cuando
usamos metáforas conocidas de otros sistemas, por ej. el
ícono del disquete para lograr la acción de “Guardar”.
2. Permita que los usuarios frecuentes (expertos) puedan
usar atajos: piense en cuántas maneras puede ud. “copiar y
pegar”. Regularmente el usuario experto usa el atajo Ctrl
+ C, Ctrl + V.
3. Ofrezca comentarios o retroalimentación informativa:
informe al usuario cuando se completa una acción.
4. Diseñe diálogos que ayuden a concluir en algo: al
informar sobre la acción, procure que el mensaje sea
comprensible. Por ejemplo, decir Error 404, página no
encontrada, no le da mayor posibilidad al usuario.
Infórmele qué opciones tiene, o qué pudo haber ocurrido.
5. Ofrezca una manera simple de lidiar con los errores: si el
usuario comete un error al utilizar el sistema, dele información
o una salida que le ayude a salir de la situación. Piense en
cuando salimos de un documento de Word sin guardar, el
sistema nos advierte que estamos saliendo sin guardar, y si es
realmente lo que deseamos concretar.
6. Permitir una fácil reversión de acciones: cuando se pueda,
permita que el usuario “deshaga” la acción. Cuando no se
pueda, por seguridad, informe al usuario que su acción no
podrá ser revertida (3).
7. Permite al usuario tener el control: por ejemplo, los carruseles
de imágenes, deben tener controles que permitan moverse o
detener el carrusel. Eso es dar control al usuario. Los vídeos de
Youtube pueden detenerse, o moverse hasta un minuto dado.
Eso es dar control al usuario.
8. Reducir la carga de memoria a corto plazo: No haga que el
usuario tenga que recordar un código, número o información
que estaba en una interfaz anterior. Si el usuario debe recordar
una información, estamos apelando a la memoria de corto
plazo, que es limitada en capacidad.
 HEURÍSTICAS DE NIELSEN
1. Visibilidad del estado del sistema: El sistema siempre debe mantener
informados a los usuarios sobre lo que está sucediendo mediante
comentarios apropiados dentro de un tiempo razonable.
2. Coincidencia entre el sistema y el mundo real: El sistema debe hablar el
idioma de los usuarios, con palabras, frases y conceptos familiares para el
usuario en lugar de términos orientados al sistema. Siga las convenciones
del mundo real, haciendo que la información aparezca en un orden natural
y lógico.
3. Control y libertad del usuario: Los usuarios a menudo eligen funciones
del sistema por error y necesitarán una "salida de emergencia" claramente
marcada para salir del estado no deseado sin tener que pasar por un
diálogo extenso. Admita deshacer y rehacer.
4. Consistencia y Estándares: Los usuarios no deberían tener que
preguntarse si diferentes palabras, situaciones o acciones significan lo
mismo. Siga las convenciones de la plataforma.
5. Prevención de errores: Incluso, mejor que buenos mensajes de error, un
diseño cuidadoso debe evitar que ocurra un problema en primer lugar.
Elimine las condiciones propensas a errores o verifíquelas y presente a los
usuarios una opción de confirmación antes de que se comprometan con la
acción.
6. Reconocimiento en lugar de recuerdo: Minimice la carga de memoria del
usuario haciendo visibles los objetos, las acciones y las opciones. El usuario no
debería tener que recordar información de una parte del diálogo a otra. Las
instrucciones para el uso del sistema deben ser visibles o fáciles de recuperar
cuando corresponda.
7. Flexibilidad y eficiencia de uso: Los atajos, que no son vistos por el usuario
novato, a menudo pueden acelerar la interacción para el usuario experto, de modo
que el sistema pueda atender tanto a usuarios inexpertos como experimentados.
Permita a los usuarios personalizar las acciones frecuentes.
8. Diseño Estético y Minimalista: Los diálogos no deben contener información que
sea irrelevante o que rara vez se necesite. Cada unidad adicional de información
en un diálogo compite con las unidades de información relevantes y disminuye su
visibilidad relativa.
9. Ayude a los usuarios a reconocer, diagnosticar y recuperarse de errores: Los
mensajes de error deben expresarse en un lenguaje sencillo (sin códigos), indicar
el problema con precisión y sugerir una solución de forma constructiva.
10. Ayuda y Documentación: Aunque es mejor si el sistema se puede utilizar sin
documentación, puede ser necesario proporcionar ayuda y documentación.
Cualquier información de este tipo debe ser fácil de buscar, centrada en la tarea
del usuario, enumerar los pasos concretos que se deben llevar a cabo y no ser
demasiado extensa.
TALLER
Similar al contenido inicial de esta presentación, la de la aplicación Uber, donde se explican
los Principios de Diseño de Norman, ilustre y explique al menos 5 de los principios de
Shneiderman y 5 de los Heurísticas de Nielsen. En total deben ser 10 imágenes.
Realice este taller con dos aplicaciones (web o móvil), una para ilustrar los Principios de
Shneiderman, y otra para los de Nielsen.
Use flechas para explicar mejor su punto de vista. Puede ser que los principios se verifiquen
mal aplicados. En ese caso indíquelo en la explicación.
Complete usando este PowerPoint (es decir, deje el ejemplo de Norman).
Concluya con una diapositiva donde explica su experiencia y compara los principios.
Tome en cuenta que en Internet ya hay ejemplos ilustrados de estos principios, pero copiarlos
y pegarlos para esta asignación no le servirá para el proceso de aprendizaje, y luego no podrá
identificar el cumplimiento en el examen.