MÓDULO 2

DISEÑO CENTRADO EN EL USUARIO (DCU)

CONSTRUCCIÓN DE ALTERNATIVAS DE
DISEÑO
 Definir •Personas
contexto del •Escenarios
usuario y •Análisis de Tareas

SOLUCIONES DE DISEÑO
•User-story Map
requisitos

•Card sorting
Diseño •Diagrama de
conceptual afinidad
•Brainstorming

¡ El diseño de la aplicación, tanto

funcional como gráfico, ha de
Diseño visual
responder a las características definidas
en el proceso de análisis
¡ El diseño es revisable de acuerdo con
los resultados de la evaluación Diseño de
posterior contenidos

Prototipado
 La fase de diseño conceptual se refiere a la definición de la
arquitectura de información de la aplicación, es decir, al esquema
de organización y navegación por los contenidos

Determina qué relaciones se establecen entre los diferentes

apartados, así como las posibilidades de desplazamiento entre
ellos y entre las diferentes pantallas o páginas
DISEÑO
CONCEPTUAL
Una vez que se ha definido la estructura de la aplicación, se
documenta mediante diagramas. El diagrama debe describir la
macroestructura con el detalle adecuado, para que los miembros
del equipo de producción puedan compartir una visión general

El diagrama debe indicar cómo navega el usuario a través de tareas

determinadas, y qué pasos en particular conforman cada una de
estas tareas
¡ MS PowerPoint ¡ Forms
¡ Insertar ¡ Complementos
¡ Diapositiva ¡ Obtener complementos

Nueva diapositiva ¡ Mis complementos

¡ ¡ Símbolos
¡ Volver a utilizar diapositiva ¡ Vínculos
¡ Ecuaciones
¡ Tablas ¡ Vista general
¡ Vínculo ¡ Símbolo
¡ Imágenes
¡ Fotografía
¡ Acción ¡ Media
¡ Captura de pantalla ¡ Comentarios ¡ Video
¡ Album de fotos ¡ Texto ¡ Audio
¡ Ilustraciones ¡ Cuadro de texto
¡ Grabar pantalla
¡ Formas ¡ Encabezado y pie de página

¡ Iconos ¡ WordArt

¡ Modelos 3D ¡ Fecha y hora

¡ SmartArt ¡ Insertar número de diapositiva

¡ Gráfico ¡ Objetos
DISEÑO CONCEPTUAL

Brainstorming Diagrama de afinidad Card Sorting

BRAINSTORMING

¡ El brainstorming es una herramienta de trabajo en

grupo que ayuda al surgimiento de nuevas ideas en
un determinado tema. El objetivo es generar gran
cantidad de ideas mediante el fomento de la
participación y del pensamiento creativo de los
miembros del grupo.

¡ Esta táctica se plantea para detectar las causas, los

efectos o las soluciones del tema en cuestión, así
como para planificar y dar rienda suelta a la
estrategia de la empresa.
 Agrupar las
DIAGRAMA DE AFINIDAD Generar ideas Mostrar ideas ideas en
grupos

¡ Los diagramas de afinidad son un gran método

para ayudarle a dar sentido a toda su información
Crear
cuando tiene muchos datos mixtos, como Dibujar
encabezado de
hechos, investigación etnográfica, tormentas de diagrama final
grupo
ideas, opiniones de usuarios, necesidades del
usuario, información y problemas de diseño.
¡ El Diagrama de Afinidad es un método que puede
ayudarle a recopilar grandes cantidades de datos
y organizarlos en grupos o temas basados en sus
relaciones. El proceso de afinidad es ideal para
agrupar datos recopilados durante la
investigación o las ideas generadas durante las
lluvias de ideas.
CARD SORTING

¡ Técnica que permite a los

usuarios agrupar la información
pertinente al sistema para
asegurar que la estructura del
sistema vaya de acuerdo a la
manera en que el usuario tiene
en mente
¡ Cuando se trata de organizar
aplicaciones con alto contenido
de información, los mismos
usuarios pueden ayudar a
organizar la información a
través del “card sorting”
DISEÑO VISUAL

Se definen las características gráficas de la interfaz, teniendo en cuenta la información

reunida en las fases de análisis, modelado del usuario y diseño conceptual

Los principios de diseño visual

• Escala
• Jerarquía visual
• Equilibrio
• Contraste
• Principios de Gestalt
 ¡ El principio de escala se refiere
DISEÑO VISUAL - al uso del tamaño relativo para
señalar la importancia y el
ESCALA rango en una composición.
DISEÑO VISUAL -
JERARQUÍA

¡ El principio de jerarquía visual

se refiere a guiar el ojo en la
página para que atienda a
diferentes elementos de diseño
en el orden de su importancia
¡ La jerarquía visual se puede
implementar a través de
variaciones en escala, valor,
color, espaciado, colocación o
una variedad de otras señales
DISEÑO VISUAL - EQUILIBRIO

¡ El principio de equilibrio se refiere a una disposición satisfactoria o proporción de elementos de diseño.

¡ El equilibrio ocurre cuando hay una cantidad igualmente distribuida (pero no necesariamente simétrica) de señal
visual a ambos lados de un eje imaginario que pasa por el centro de la pantalla. Este eje es a menudo vertical, pero
también puede ser horizontal.
¡ El equilibrio puede ser:
¡ Simétrico: los elementos se distribuyen simétricamente en relación con el eje imaginario central
¡ Asimétrico: los elementos se distribuyen asimétricamente en relación con el eje central
¡ Radial: los elementos irradian desde un punto central común en una dirección circular.
DISEÑO VISUAL - EQUILIBRIO
 ¡ El principio de contraste se
refiere a la yuxtaposición de
elementos visualmente
diferentes para transmitir el
DISEÑO VISUAL - hecho de que estos elementos
son diferentes (por ejemplo,
CONTRASTE pertenecen a categorías
diferentes, tienen funciones
diferentes, se comportan de
manera diferente).
DISEÑO VISUAL –
PRINCIPIOS DE
GESTALT
¡ Los principios de la Gestalt
explican cómo los seres
humanos simplifican y organizan
imágenes complejas que
consisten en muchos elementos,
organizando inconscientemente
las partes en un sistema
organizado que crea un todo, en
lugar de interpretarlas como una
serie de elementos dispares.
¡ Los principios de la Gestalt
capturan nuestra tendencia a
percibir el todo en oposición a
los elementos individuales.
PROXIMIDAD

¡ Elementos dispuestos uno cerca del otro se

perciben como más relacionados que los que
están más separados. De esta forma, los
diferentes elementos se ven principalmente como
un grupo y no como elementos individuales.
¡ En diseño de interfaces, debemos agrupar los
elementos que tienen relación entre ellos, y
separarlos del resto.
¡ Puede usarse este principio en navegación, galería,
banners, contenido, etc.
PROXIMIDAD
SIMILITUD
¡ Los elementos que comparten características
visuales similares (color, forma, tamaño, textura
y orientación) se perciben como más
relacionados que aquellos que no comparten
características similares.
¡ Tendemos a percibir elementos similares entre
sí como agrupados o como un patrón.
¡ También podríamos pensar que tienen el
mismo propósito. La similitud puede ayudarnos
a organizar y clasificar objetos dentro de un
grupo y vincularlos con un significado o función
específicos.
SIMILITUD
 ¡ Los elementos dispuestos en una línea o una curva suave se perciben como más relacionados que
aquellos dispuestos aleatoriamente o en una línea áspera.
¡ La continuidad nos ayuda a interpretar la dirección y el movimiento a través de una composición.
¡ Se lleva a cabo al alinear elementos y puede ayudar a que nuestros ojos se muevan suavemente a

CONTINUIDAD ¡
través de la página, ayudando con la legibilidad.
El principio de Continuidad fortalece la percepción de la información agrupada, creando orden y
guiando a los usuarios a través de diferentes segmentos de contenido. La interrupción de la
continuidad puede señalar el final de una sección que llama la atención sobre una nueva pieza de
contenido.
CONTINUIDAD
CIERRE
¡ Un grupo de elementos a menudo se percibe como una sola
forma o figura reconocible. El cierre también ocurre cuando un
objeto está incompleto o partes de él no están encerradas.
¡ Como dice el principio de cierre, cuando se le presenta la
cantidad correcta de información, nuestro cerebro saltará a
conclusiones al llenar los vacíos y crear un todo unificado. De
esta manera, podemos disminuir la cantidad de elementos
necesarios para comunicar información, reduciendo la
complejidad y haciendo que los diseños sean más atractivos.
¡ El cierre puede ayudarnos a minimizar el ruido visual y
transmitir un mensaje, reforzando un concepto dentro de un
espacio bastante pequeño.
CIERRE
SIMETRÍA

Los elementos simétricos tienden a

percibirse como pertenecientes
juntos independientemente de su
distancia, lo que nos da una
sensación de solidez y orden.
DESTINO COMÚN

¡ Los elementos que se mueven hacia la misma dirección se perciben

como más relacionados que aquellos que se mueven en diferentes
direcciones, o que no se mueven en absoluto.
¡ El principio del destino común es más potente cuando los elementos
se mueven sincronizados; en la misma dirección y al mismo tiempo y
velocidad. Puede ayudar a agrupar información relevante y vincular
acciones con resultados. La interrupción de un movimiento
sincronizado puede captar la atención de los usuarios y dirigirlo a un
elemento o característica específica. También puede establecer
relaciones entre diferentes grupos o estados.
¡ Podemos utilizar el principio de destino común en menús
expandibles, acordeones, información sobre herramientas, controles
deslizantes de productos, rollos de paralaje e indicadores deslizantes.
DESTINO COMUN
FIGURA - FONDO

¡ Se refiere a nuestra capacidad de

separar elementos visualmente en
diferentes planos de enfoque. Hay
tres formas de ejecutar esto de
manera efectiva, a través de capas,
contraste y jerarquía de
información.
FIGURA Y
FONDO
DISEÑO DE CONTENIDOS

La redacción de los contenidos destinados a una aplicación multimedia tiene una naturaleza especial, ya que debe
aprovechar las posibilidades de interactividad, y tener en cuenta al mismo tiempo las limitaciones de la lectura en
pantalla.
Las características que deben cumplirse al diseñar contenidos para una aplicación son las siguientes

Brevedad
Lectura rápida
Lenguaje organizado
Fragmentación
Títulos de secciones
Facilidad de lectura
ESQUEMAS DE DISEÑO: DIAGRAMA DE GUTENBERG,
PATRÓN Z, Y PATRÓN F
 DIAGRAMA DE
GUTENBERG
La regla de Gutenberg se usa para mostrar un
comportamiento del usuario conocido como
lectura de la gravedad. Describe el patrón de
movimiento de los ojos cuando ven
información uniformemente distribuida.

El patrón se aplica al contenido de texto

pesado. Piensa en páginas de una novela o un
periódico. El patrón no pretende describir
todos los diseños posibles. Cuando se aplica
jerarquía visual, este patrón ya no aplica.
 PATRÓN Z
Un diseño de Patrón Z ilustra el recorrido visual del ojo
humano al leer de izquierda a derecha y de arriba hacia
abajo.

En primer lugar, las personas escanean desde la

parte superior izquierda hasta la parte superior
derecha, creando una línea horizontal imaginaria.
Luego, descienden hacia el lado izquierdo de la
página visible, formando una línea diagonal
imaginaria.
Finalmente, regresan a la derecha, lo que genera
una segunda línea horizontal.

Cuando los ojos de los espectadores se mueven

siguiendo este patrón, se forma una "Z" imaginaria.
Este enfoque es ideal para diseños con pocos
elementos que necesitan ser destacados.
 PATRÓN F
Al igual que en los otros patrones, el ojo comienza
en la parte superior izquierda, se desplaza
horizontalmente hacia la parte superior derecha y
luego regresa al borde izquierdo antes de realizar
otro barrido horizontal hacia la derecha. Este
segundo barrido no alcanzará el primer barrido. Este
patrón sugiere que:
La información importante debe ubicarse en la
parte superior del diseño, donde generalmente
será leída.
Se debe incluir menos información a lo largo del
borde izquierdo del diseño, utilizando viñetas
para que se requiera poco movimiento horizontal
del ojo para asimilar todo.
Recuerda, la gente no lee en línea; escanea.
RT: Tiempo en completar un movimiento En diseño es importante considerar la Ley de Hicks
a: Es el tiempo de decisión. cuando se trata de decisiones que pueden conllevar a
b: Velocidad inherente al dispositivo un grave error.
n: es el número de opciones disponibles.
LEY DE FITTS

¡ Ley de Fitts: se relaciona con la velocidad y

precisión del movimiento muscular
humano para apuntar a un objetivo.
“Es más rápido presionar (hacer clic) en
objetivos grandes cerca al puntero, que en
objetivos pequeños más lejanos…”
LEY DE FITTS

¡ Debemos conocer cómo aprovecharnos de la Ley de Fitts para diseñar interfaces más usables y fáciles de
comprender.
¡ Una de las opciones es agrupar los botones y acciones que tengan relación entre sí.
PATRONES Y GUÍAS DE DISEÑO
PATRONES DE ¡ Se refiere a soluciones comúnmente usadas para el diseño de
interfaces. Varía según plataforma (web / móvil).
DISEÑO ¡ Por ejemplo, Botones de navegación: ícono de carrito de compras, menú
de hamburguesa (móvil), etc.
¡ Existen compilaciones (catálogos) de patrones. Ejm. para web:
[Link] para móviles: [Link]
¡ Existen también “frameworks” para prototipados basados en CSS:
Foundation o Bootstrap.
COLOR
¡ Mejora la estética del diseño / refuerza el significado.
¡ El uso de los colores puede ayudar o confundir.
¡ Impacto de uso de los colores:
[Link]
¡ Su uso en interfaces:
¡ Use un número limitado de colores
¡ Restringir la paleta a 5 colores
¡ Recuerde que hay personas que no perciben ciertos colores
(color blindness)
¡ Los colores aportan una asociación simbólica: cultural, y según tipo
de usuarios.
¡ Al diseñar para la web, utilice colores suaves, neutrales, fríos. No
se recomienda colores brillantes. Tener consideración al usar el
amarillo.
COMBINACIÓN
DE COLORES
¡ Colores adyacentes: rojo, naranja,
amarillo: juntos funcionan muy
bien.
¡ Colores opuestos: rojo, azul, se
complementan.
¡ Considerar: brillo, saturación y
tono
¡ Colores cálidos: para primer plano
¡ Colores fríos: para fondo
¡ Use la combinación de la
naturaleza.
COMBINACIÓN
¡ Este diagrama se llama la rueda de color, y cualquier punto particular en
DE COLORES la rueda de 0 a 360 grados se conoce como un tono, que especifica el
tono específico de color. "Tono" difiere ligeramente del "color" porque
un color puede tener saturación o brillo, así como un tono.
¡ La saturación es la intensidad de un tono desde el tono gris (sin
saturación) hasta el color puro y vívido (alta saturación).
¡
El brillo es la relativa claridad u oscuridad de un color en particular, del
negro (sin brillo) al blanco (brillo total)
 Defina una paleta estándar de colores a usar (5 colores máximo).

Incluya variaciones en tono, saturación y brillo.

RECOMENDACIONES
Errores / alerta
Los colores usados para los mensajes Advertencias
del sistema deben ser diferentes del
Confirmación de éxito
resto de los usados en las otras áreas.
Estatus del sistema

Guías para usar los colores de manera efectiva:

[Link]
USO DE
TIPOGRAFÍA EN
INTERFACES
GRÁFICAS Y
DISPOSICIÓN DE
CONTENIDO
ALINEACIÓN
¡ Ayuda en la cohesión del diseño.
¡ La alineación de elementos en forma de una cuadrícula, ayuda mucho en
una mejor comprensión de la interfaz.
¡ Elementos principales vs secundarios
¡ Se recomienda ordenar los elementos de izquierda a derecha y de arriba
abajo (patrón Gutenberg, F y Z)
¡ Haga buen uso de los espacios en blanco.
¡ Texto:
¡ Alineado a la izquierda: más fácil de leer
¡ Alineado justificado: no se recomienda por que a menudo puede crear grandes
bloques de espacios en blanco que interrumpen la continuidad del flujo de palabras.
Usar si se trata de un formato
¡ Alineado central: no se recomienda.
 ¡ En sus términos más básicos, un sistema de cuadrícula es una estructura que
comprende una serie de líneas horizontales y verticales que se cruzan y
CUADRÍCULA DE 12 luego se utilizan para organizar el contenido. Sirven de guía para el diseño y
COLUMNAS (12 asegura a asegurar el buen uso de los espacios en blanco.
¡ Las cuadrículas nos ayudan a crear diseños de página en que los elementos
COLUMN GRID) no saltan ni cambian de ancho cuando nos movemos de una página a otra, y
así proporcionan a nuestras páginas web un aspecto más coherente.
TIPOGRAFÍA
¡ La presentación de un contenido es importante en el diseño de interfaces gráficas, sin embargo
lo más importante es facilitar el objetivo final del usuario: leer un artículo, completar una acción,
hacer una compra, etc.
¡ Tamaño y longitud de la tipografía
¡ Sistemas desktop: 16pt. 50 – 70 caracteres por línea
¡ Sistemas móviles: 30 – 40 caracteres por línea
¡ 600 pixeles máximo de espaciado después de párrafos
¡ Lectura en la pantalla
¡ Más grande que en papel: 13 a 16 px
¡ El contraste es importante: existen herramientas disponibles en la web que verifican si el
contraste es el adecuado desde el punto de vista de accesibilidad:
[Link]
¡ Tipos de tipografía:
¡ Serif: encabezados
¡ Sans Serif: contenido
¡ Monospace: códigos
RECOMENDACIONES

La presentación del contenido y del diseño debe ser clara, y hacer buen uso de los espacios en blanco.
(aplicar principios de Gestalt).

Aplicar la consistencia en el diseño (un mismo sistema, un mismo diseño).

Hacer énfasis en elementos que requieran la atención de las personas.

Los colores y los íconos deben estar relacionados con el mensaje que quiera darse.

Usar indicadores de progreso, para retroalimentar al usuario.

PROTOTIPADO
PROTOTIPOS

¡ Un prototipo es una manifestación de un diseño

que permite a las partes interesadas interactuar
con él y explorar su idoneidad; está limitado
porque generalmente enfatizará un conjunto de
características del producto y restará importancia a
otras.
¡ Características
¡ Ayuda a definir aspectos relevantes del diseño
(equipo)
¡ Provee las bases para las pruebas o testeo
¡ Permite realizar pruebas con el usuario final, para
asegurar usabilidad (eficiencia, eficacia, y satisfacción)
TIPOS DE PROTOTIPOS

Funcionalidad Fidelidad Dimensión

• Funcionales • Baja fidelidad • Vertical
• No funcionales • Wizard of Oz • Horizontal
• Alta fidelidad
 Funcionales

• Engloba a todos aquellos que permiten

efectivamente solucionar uno o varios de los
problemas del usuario/cliente al cual está dirigido.
FUNCIONALIDAD
No Funcionales

• Engloba a todas aquellas herramientas de

prototipado que permiten representar los
diferentes elementos, características o
funcionalidades del producto pero no permiten
efectivamente hacer la solución al usuario.
BAJA FIDELIDAD

Un prototipo de baja fidelidad no se parece mucho al producto final y no

proporciona la misma funcionalidad. Por ejemplo, puede usar materiales muy
diferentes, como papel y cartón, en lugar de pantallas electrónicas y metal, puede
realizar solo un conjunto limitado de funciones, o solo puede representar las
funciones y no realizar ninguna de ellas.

Los prototipos de baja fidelidad son útiles porque tienden a ser simples, baratos y
rápidos de producir. Esto también significa que son rápidos de modificar, por lo que
respaldan la exploración de diseños e ideas alternativos.

Tipos: papel, cartón, madera

MAGO DE OZ

¡ Se asume que tiene un prototipo basado en software.

¡ En esta técnica, el usuario interactúa con el software
como si interactuara con el producto. Sin embargo, un
operador humano simula la respuesta del software al
usuario.
¡ El método toma su nombre de la clásica historia de la
niña que es arrastrada por una tormenta y se
encuentra en la Tierra de Oz. El Mago de Oz es un
hombre pequeño y tímido que opera una gran imagen
artificial de sí mismo desde detrás de una pantalla
donde nadie puede verlo.
[Link]
ALTA FIDELIDAD

¡ Un prototipo de alta fidelidad parece el producto final y/o proporciona más funcionalidad que un prototipo de
baja fidelidad.
¡ Por ejemplo, un prototipo de un sistema de software desarrollado en Visual Basic es de mayor fidelidad que una
maqueta en papel; una pieza de plástico moldeada con un teclado falso es un prototipo de mayor fidelidad de un
producto construido en un trozo de madera.
¡ La creación de prototipos de alta fidelidad es útil para vender ideas a las personas y para probar problemas
técnicos.
¡ Los prototipos de alta fidelidad se pueden desarrollar modificando e integrando componentes existentes, tanto
hardware como software.
¡ Para crear los prototipos de alta fidelidad se pueden utilzar software de diseño como Sketch, inVision, Balsamiq,
Axure, [Link], etc.
FIDELIDAD
DIMENSIÓN

Prototipado VERTICAL Prototipado HORIZONTAL

• El resultado de este tipo de prototipo es • Incluye toda la interfaz de todas las

un sistema que tiene implementadas características del sistema, pero no
pocas características, pero sus contiene funcionalidad subyacente.
funcionalidades están totalmente • Un prototipo horizontal es una
implementadas. simulación de la interfaz en la que no se
• Un prototipo vertical puede probar, por puede realizar ningún trabajo real.
tanto, una parte limitada del sistema,
pero puede ser probado en profundidad
bajo circunstancias reales.