UT04 Apuntes

2º A/B DAM (DAD)
DESARROLLO DE INTERFACES
UT4 Diseño de Interfaces gráficas

RESULTADO DE APRENDIZAJE (RA04):
Diseña interfaces gráficas identificando y aplicando criterios de usabilidad y
accesibilidad
Criterios de evaluación:
a) Se han identificado los principales estándares de usabilidad y accesibilidad.
b) Se ha valorado la importancia del uso de estándares para la creación de interfaces.
c) Se han creado diferentes tipos de menús cuya estructura y contenido siguen los
estándares establecidos.
d) Se han distribuido las acciones en menús, barras de herramientas, botones de
comando, entre otros, siguiendo un criterio coherente.
e) Se han distribuido adecuadamente los controles en la interfaz de usuario.
f) Se ha utilizado el tipo de control más apropiado en cada caso.
g) Se ha diseñado el aspecto de la interfaz de usuario (colores y fuentes entre otros)
atendiendo a su legibilidad.
h) Se ha verificado que los mensajes generados por la aplicación son adecuados en
extensión y claridad.
i) Se han realizado pruebas para evaluar la usabilidad y accesibilidad de la aplicación
RA04: Diseña interfaces gráficas identificando y aplicando criterios de
usabilidad y accesibilidad
Contenidos:
Diseño de Interfaces Gráficas:
− Usabilidad y accesibilidad. Características. Pautas. Estándares.
− Medidas de usabilidad y accesibilidad de las aplicaciones;
herramientas.
− Esquemas (Wireframes) y Maquetas (Mockups).
− Pautas de diseño de la estructura de la interfaz de usuario; menús,
ventanas, cuadros de diálogo, atajos de teclado, entre otros.
− Pautas de diseño del aspecto de la interfaz de usuario: colores,
fuentes, iconos, distribución de los elementos.
− Pautas de diseño de los elementos interactivos de la interfaz de
usuario: Botones de comando, listas desplegables, entre otros.
− Pautas de diseño de la secuencia de control de la aplicación.
DISEÑO DE UNA INTERFAZ - Usabilidad/Accesibilidad
Qué significa Usabilidad (Software):
ISO/IEC 9126 “La usabilidad se refiere a la capacidad de un software

de ser comprendido, aprendido, usado y ser atractivo para el
usuario, en condiciones específicas de uso”. Esta definición hace
énfasis en los atributos internos y externos del producto, los cuales
contribuyen a su funcionalidad y eficiencia
Partiendo de esto ¿qué debo tener en cuenta antes de comenzar un

proyecto de desarrollo de una App?
Usabilidad (Software):
Para conseguir una interfaz con buena usabilidad, antes de comenzar

un proyecto determinado, es importante tener en cuenta:
1. ¿Qué se le está ofreciendo al usuario?
2. ¿Quiénes son los potenciales usuarios y qué formación o
conocimientos tendrán?
3. ¿Qué necesitarán o buscarán los usuarios?
4. ¿En qué contexto se moverán los potenciales usuarios?
5. ¿Cuáles son los estándares que se siguen en casos como el que
estoy desarrollando?
ISO: https://www.iso.org/home.html
Los estándares internacionales garantizan que los productos y servicios que

utilizas a diario sean seguros , confiables y de alta calidad . También guían a
las empresas en la adopción de prácticas sostenibles y éticas
W3C: https://www.w3.org/
Los estándares web son los pilares de un mundo conectado digitalmente y

coherente. Se implementan en navegadores, blogs, motores de búsqueda y
otros programas que potencian nuestra experiencia en la Web
WAI: https://www.w3.org/WAI/fundamentals/accessibility-intro/es
https://www.w3.org/WAI/standards-guidelines/es
Hacer la web accesible beneficia tanto a las personas, como a las empresas y
a la sociedad en general. Los estándares web internacionales definen lo que la
accesibilidad necesita
Consistencia: una aplicación se puede calificar como consistente cuando la

persona usuaria puede entender y asimilar las funcionalidades de la misma
sin necesidad de recibir instrucciones
Leyes y obligaciones que todo desarrollador de Apps debe saber
(un paréntesis)
https://www.iubenda.com/es/help/40895-leyes-y-obligaciones-que-todo-desarrollador
-de-apps-debe-respetar-y-como-hacerlo
DISEÑO DE UNA INTERFAZ - Herramientas de diseño
Herramientas para crear esquemas/prototipos de diseños - Pasos
Wireframing/Wireframe
Sketch: es un Wireframing
Son esquemas de la interfaz dibujado en papel
Muestran la distribución visual y la
jerarquización de los contenidos
Son dibujos planos sin ningún tipo de

interacción que pueden ser realizados en papel
o de forma digital
Es la representación de baja fidelidad (lo-fi) de

un diseño
Wireframing
Se recomienda que sean en blanco y negro para que el análisis se centre en lo
estructural y no en el contenido
Wireframing digital
https://interactius.com/design/10-buenas-practicas-para-crear-
wireframes-mas-eficientes/
Herramientas para crear esquemas/prototipos de diseños:
Mockup
Define la apariencia del diseño (parte externa visual) y es el paso siguiente a el Wireframing
Se caracterizan por tener una media-alta fidelidad y por ser representaciones completamente
estáticas del diseño visual
Se realiza siempre digitalmente para definir los detalles visuales como el color, la tipografía,
las sombras…
Prototipo Interactivo
Son representaciones de media-alta fidelidad
que incluyen o simulan la interacción con la
interfaz
Si el wireframe define la estructura y el mockup cómo es visualmente,

el prototipo define sobre todo cómo se comporta el producto
Sketch
Wireframing Digital
Mockup
Prototipo Interactivo
Herramientas de diseño de Interfaces
Tablas comparativas de
herramientas para crear
Wireframes, Mockups y
Prototipos interactivos
https://modulards.com/que-son-los-mockups/
FIGMA
Cada documento está compuesto por páginas y cada página cuenta
con uno o más contenedores (frame), los cuales representan una
pantalla dentro del proyecto
En un documento puedes crear más de una página para mostrar

diferentes versiones del mismo diseño. Por ejemplo, si
diseñas una aplicación página web puedes mostrar las vistas
para laptop, tableta o móvil
FIGMA
Primeros Pasos:
1) Crear un Frame como una capa donde se añadirá cada

componente del diseño
2) Darle el tamaño manual o a través de las opciones que
trae: desktop, diferentes opciones móviles…
3) Cambiar el nombre por uno significativo (Inicio, Principal,
AltaUsuario…)
4) Ir añadiendo los elementos que se quieren
En caso de que un diseño se repita en varias pantallas, se

puede copiar y pegar (alt y arrastrar) el Frame o, crear un
componente con lo que se quiere reutilizar, por ejemplo una
barra de menú
DISEÑO DE UNA INTERFAZ - Accesibilidad
Design System:
“Es una documentación o herramienta que establece las reglas base

sobre las que se articulan los elementos que conforman un producto
digital. Los Design Systems están compuestos, por una parte,
documental que define los aspectos visuales de nuestro sistema, las
Foundations, juntamente con el UI Kit o componentes reutilizables, y la
documentación sobre los mismos…”
https://interactius.com/diseno-inclusivo/sistema-de-diseno-univ
ersal-accesible-e-inclusivo-como-conseguirlo/
Usuarios
La usabilidad, entonces, se centra en dar respuesta a todas las acciones que pueden
llevarse a cabo a través de una una interfaz, ofreciendo una grata experiencia de
navegación, sea cual fuere el usuario que la utilice
Esto implica atender a la gran diversidad de capacidades existentes:

· Capacidades cognitivas y perceptivas: Comprensión del lenguaje, capacidad de
aprendizaje y asimilación de conceptos, resolución de problemas
· Diversidad lingüística o nivel cultural: Esto puede afectar en la interpretación de
formatos, medidas, títulos sociales, signos de puntuación, protocolos y formalidades
· Capacidades especiales: es muy importante tener en cuenta durante el proceso de
desarrollo de una aplicación, la adecuación de la misma a las personas con diversidad
funcional
· Tecnológica: Conexión a Internet, tamaños de pantalla, requisitos de memoria y
proceso
Debemos tener en cuenta los diferentes tipos de Usuarios

DISEÑO DE UNA INTERFAZ - Accesibilidad
Diseño Universal
Lo que se plantea es simplificar al máximo la vida de las personas eliminando todas las
barreras posibles, intentando generar diseños utilizables en su misma forma por el mayor
número de personas, planteando un modelo estándar, beneficiando así a todo tipo de usuarios,
de todo tipo de edades o capacidades sin necesidad de ser adaptados.
Si nos vamos al diseño de interfaces, por ejemplo, lo que plantea es que si nuestra app contiene
un buscador alfanumérico, no hagamos un buscador por voz específico para una persona con
cierta discapacidad visual y que este sea una alternativa de búsqueda, lo que debemos hacer es
plantear un buscador único que contemple al máximo todas las necesidades que puedan tener
nuestros usuarios sin tener que adaptarse.
DISEÑO DE UNA INTERFAZ - Pautas
Usabilidad/Accesibilidad/Inclusividad
Para lograr esto debemos seguir algunas pautas:
Contraste de Color
Utiliza paletas de colores inclusivas que no solo se centren en el contraste, sino que
también sean agradables para personas con diferentes percepciones del color (por
ejemplo, combinaciones que funcionen bien para daltónicos)
Proporciona temas alternativos que los usuarios puedan seleccionar, como un modo
oscuro o un modo de alto contraste.
DISEÑO DE UNA INTERFAZ -
Tipografía Legible
Incorpora múltiples opciones tipográficas que se adapten a diferentes preferencias

de lectura, y permite la personalización del tamaño de fuente en la interfaz
Usa líneas claras y espaciamiento generoso para facilitar la lectura, especialmente

para personas con dislexia
Navegación Clara
Implementa una estructura de navegación flexible que permita a los usuarios

personalizar su experiencia (por ejemplo, guardar accesos directos o crear menús
personalizados)
Incluye rutas de navegación visual y textual que sean intuitivas para personas con
diferentes niveles de habilidades tecnológicas
Etiquetas y Descripciones
Desarrolla descripciones contextuales y no solo etiquetas de texto, proporcionando

información adicional cuando sea necesario
Asegúrate de que las instrucciones sean claras y breves, evitando jergas técnicas
que puedan confundir a algunos usuarios
Uso de Elementos Interactivos
Proporciona opciones de interacción alternativa, como comandos de voz, para que

los usuarios con limitaciones motoras puedan navegar con facilidad
Permite la personalización de la interfaz, como el ajuste del tamaño de botones y

la disposición de elementos
Evitar Contenido en Movimiento
Incorpora controles para pausar, detener o ocultar contenido en movimiento.

Ofrece alternativas estáticas para aquellos que no pueden seguir contenido
dinámico
Evita el uso excesivo de animaciones que pueden ser distraídas o confusas para
algunos usuarios.
Retroalimentación clara
Crea una variedad de formas de enviar mensajes (visuales, auditivos y táctil) para
que cada usuario pueda elegir la que mejor se adapte a sus necesidades
Implementa mensajes de error y éxito en múltiples formatos para asegurar que

todos los usuarios los comprendan
Compatibilidad con Tecnologías de Asistencia
Al crear tu interfaz debes tener en cuenta que sea compatible con lectores de pantalla y
otras tecnologías de asistencia para personas con discapacidades
En la web, una forma de hacerlo es mediante la utilización de roles y propiedades ARIA

(Accessible Rich Internet Applications) para mejorar la accesibilidad
Otras:
● Realiza pruebas con usuarios que tengan diversas discapacidades y/o

antecedentes culturales, para identificar problemas de accesibilidad en el diseño
● Proporciona documentación clara sobre cómo navegar y utilizar la interfaz,
especialmente para usuarios menos familiarizados con la tecnología
● Crea materiales educativos y tutoriales que sean accesibles y comprensibles
para todos, incluyendo videos subtitulados y guías escritas en lenguaje sencillo
● Proporciona soporte en varios idiomas para atender a una audiencia diversa
Otras:
● Desarrolla interfaces que respondan a las preferencias del usuario, como

ajustes de diseño según la capacidad visual, auditiva o motora
● Ofrece la opción de cambiar entre distintos diseños de interfaz, adaptándose
a las necesidades de cada usuario (colores, tamaños letra, etc.)
● Diseña interfaces que se adapten a diferentes dispositivos y tamaños de
pantalla, garantizando que la experiencia sea consistente
● Utiliza iconos y símbolos universales que sean fácilmente reconocibles por
personas de diferentes culturas y antecedentes
● Ofrece alternativas auditivas para el contenido visual y viceversa, para que
todos los usuarios puedan acceder a la información.
Otras:
Asegúrate de que el contenido y los

elementos de diseño sean culturalmente
inclusivos y relevantes, evitando
estereotipos y representaciones negativas
Hay que conocer en profundidad:
− Pautas de diseño de la estructura de la interfaz de usuario; menús,

ventanas, cuadros de diálogo, atajos de teclado, entre otros
− Pautas de diseño del aspecto de la interfaz de usuario: colores, fuentes,

iconos, distribución de los elementos
− Pautas de diseño de los elementos interactivos de la interfaz de

usuario: Botones de comando, listas desplegables, entre otros
− Pautas de diseño de la secuencia de control de la aplicación

Diseño de la estructura de la interfaz de usuario
Menús:
● Menú de Barra Superior: Barra en la parte superior con opciones principales

● Menú Contextual: Menú que aparece al hacer clic derecho o interactuar con un elemento
● Menú Desplegable: Lista de opciones que se despliega al hacer clic en un encabezado
● Menú de Navegación Lateral: Menú fijo en un lateral, común en aplicaciones y sitios web
● Menú de Acción: Botones que ejecutan acciones específicas, común en aplicaciones
móviles.
● Menú de Pestañas: Interfaz con pestañas que permiten cambiar entre diferentes vistas.
● Menú Radial: Opciones dispuestas en un círculo, útil para interfaces táctiles
● Menú de Lista: Lista vertical de opciones, común en móviles y web
● Menú de Ajustes: Opciones para personalizar la aplicación o el sistema
● Menú por Gestos: Interacción basada en gestos, especialmente en pantallas táctiles
Tener en cuenta
que se separan
las interfaces
naturales de las
móviles
Ventanas:
Ventanas Principales o Contenedoras: son la estructura central de una aplicación, suelen

contener la mayoría de los elementos interactivos y varias secciones o paneles
Pueden existir ventanas secundarias o adicionales abiertas desde la ventana principal
(propiedades o de opciones)
Ventanas Emergentes (Cuadros de diálogo): se trata de ventanas pequeñas que aparecen

sobre la ventana principal y suelen interrumpir temporalmente la interacción del usuario con la
aplicación para solicitar una acción o mostrar información adicional
Pueden ser:
Modales: Obligan al usuario a interactuar con ellas antes de regresar a la ventana principal
No modales: Permiten al usuario interactuar con la ventana principal sin necesidad de cerrarlas
Ventanas:
Ventanas de Herramientas: son pequeñas y/o flotantes y contienen herramientas o

funcionalidades que complementan la ventana principal, como las barras de herramientas o
paneles de propiedades. Se utilizan comúnmente en aplicaciones de diseño, edición y
desarrollo. Ejemplo: Paneles en aplicaciones de diseño gráfico como Adobe Photoshop, donde
puedes ajustar las propiedades de los pinceles o capas
Ventanas Splash: aparecen de forma temporal cuando se inicia una aplicación. Suele mostrar
el logo de la aplicación, el nombre y, en algunos casos, información sobre la carga de recursos
mientras se inicia el programa. Desaparecen automáticamente sin interacción con el usuario
Ventanas:
Ventanas de Asistente (Wizard): guían al usuario a través de un proceso paso a paso,

proporcionando un flujo estructurado para realizar una tarea compleja. Cada paso depende de
la entrada del anterior
Ventanas:
Cuadros de diálogos: permiten a una aplicación interactuar directamente con el usuario
mostrando mensajes, solicitando entradas o confirmaciones, o permitiendo la selección
de archivos, entre otras funciones
Cuadro de mensaje (Message Dialog) : es el tipo más básico de cuadro de diálogo y se utiliza
para mostrar mensajes de información, advertencias, errores o confirmaciones al usuario.
Normalmente incluyen un mensaje y botones de acción como "Aceptar", "Cancelar", o "Cerrar"
Ejemplos:
"El archivo ha sido guardado con éxito"
"Advertencia: Está a punto de eliminar permanentemente este archivo"
Botones comunes:
Aceptar / Cancelar Sí / No Cerrar
Cuadros de diálogos
Cuadro de Confirmación: solicita al usuario la validación de una acción crítica antes de

proceder. Estas acciones normalmente no se puede revertir. Suele contener una pregunta y
dos o más botones para que el usuario decida: "Sí" y "No", o "Aceptar" y "Cancelar"
Ejemplos:
"¿Está seguro de que desea eliminar este archivo permanentemente?"
"¿Desea salir sin guardar los cambios?"
Botones comunes:
Aceptar / Cancelar Sí / No
Cuadro de Entrada de Datos: permite al usuario introducir información específica, como texto,
contraseñas o números. Es útil cuando la aplicación necesita una entrada específica del
usuario para continuar
Ejemplos:
"Por favor, ingrese su nombre de usuario"
"Introduzca la nueva contraseña"
Botones comunes:
Campos de texto Botones como Aceptar / Cancelar
Cuadro de Selección (Archivo o Color): el de Archivo permite al usuario navegar por el

sistema de archivos y seleccionar un archivo o una ubicación para abrir, guardar o cargar
datos. Generalmente tiene opciones como filtrar tipos de archivos y cambiar de directorio.
En el de Color, se ofrece una paleta de colores, controles para ajustar el matiz, saturación y
brillo, o incluso opciones para introducir valores específicos en RGB o hexadecimal
Ejemplos:
"Seleccione el archivo que desea abrir" "Guardar archivo como..."
"Seleccione el color de fondo de las celdas"
Componentes comunes:
Explorador de archivos - Filtros de selección - Botones de Aceptar o Cancelar
Paleta de colores - Campos de entrada para valores - Barras de ajustes (brillo,
saturación)
Cuadro de Progreso: muestra el progreso de una tarea que está en curso, como la descarga
de un archivo o la instalación de un programa. Suele incluir una barra de progreso y,
opcionalmente, información adicional sobre el estado de la tarea
Ejemplos:
"Descargando archivo (45% completado)"
"Instalando actualización..."
Barra de progreso
Texto que indica el progreso o el estado
A veces, un botón para Cancelar la operación
Cuadro de Impresión: permite al usuario configurar las opciones de impresión antes de enviar
un documento a la impresora. Ofrece la posibilidad de seleccionar la impresora, configurar el
rango de páginas, la calidad de impresión, y más…
Ejemplos:
"Seleccione la impresora y configure las opciones de impresión"
"Imprimir en modo borrador o alta calidad"
Lista de impresoras disponibles
Opciones de configuración de impresión (tamaño de página, orientación…)
Botones de Imprimir o Cancelar
Cuadro de Selección: ofrece al usuario una lista de opciones o elementos para elegir. Se
puede utilizar para que el usuario seleccione entre varias alternativas, como elegir entre
diferentes configuraciones o categorías
Ejemplos:
"Seleccione su método de pago"
"Elija una categoría de productos"
Lista desplegable o botones de opción (radio buttons)
Botones de Aceptar o Cancelar
Cuadro de Advertencia: se utiliza para advertir al usuario sobre un problema potencial o una
acción irreversible. Suele mostrar un mensaje en un tono urgente, a menudo con iconos o
colores que denotan peligro o precaución
Ejemplos:
"¡Atención! Esta acción eliminará permanentemente todos los datos"
"Advertencia: Estás usando el 95% del espacio de almacenamiento"
Mensaje de advertencia
Iconos/Colores que indican peligro o alerta
Botones de Aceptar / Cancelar o Continuar
Cuadros de diálogo:
Son esenciales para

interactuar de manera
eficiente con los usuarios
La elección correcta del tipo

de cuadro de diálogo mejora
la experiencia de usuario al
hacer que la interacción sea
clara, directa y eficiente
Atajos de teclados: son combinaciones de teclas que permiten a los usuarios realizar
acciones de forma rápida y eficiente sin tener que interactuar con menús, botones o el
ratón.
Ejemplos: copiar, pegar, abrir una ventana, guardar un archivo, o deshacer acciones.
Importancia de utilizarlos:
Mejoran la productividad agilizando el trabajo
Facilitan la accesibilidad ya que para algunos usuarios con limitaciones físicas o
visuales, pueden ser fundamentales
Fidelizan al usuario avanzado incrementando su satisfacción con la aplicación
Es útil en situaciones en las que la navegación con el cursor puede resultar
engorrosa o menos precisa
Aspectos a tener en cuenta en la asignación de atajos de Teclado:
Consistencia: reduce la curva de aprendizaje usando las convenciones estándar en el
sistema operativo (por ejemplo, Ctrl + C para copiar o Ctrl + S para guardar)
Visibilidad: muéstralos en menús, barra de herramientas o en descripciones
emergentes (tooltips)
Jerarquía de Funcionalidades: Las funciones más usadas deben tener atajos más
simples y fáciles de recordar, como Ctrl + N para nuevo, mientras que funciones menos
frecuentes pueden requerir combinaciones más complejas (Ctrl + Shift + algo)
Personalización: En aplicaciones más avanzadas, se puede permitir que el usuario
personalice sus propios atajos de teclado. Esto es especialmente útil en software de
productividad como editores de texto, programas de diseño o entornos de desarrollo
Compatibilidad: Los atajos deben ser fáciles de traducir entre distintos idiomas y
respetar las diferencias entre sistemas operativos
No sobrecargar: deberían complementar la interfaz gráfica, no sustituirla por completo
Atajos de Teclado en las distintas interfaces:
Interfaces Web:
Se debe tener en cuenta la compatibilidad con los distintos navegadores
Conocer los atajos del entorno o de las herramientas de asistencias a la accesibilidad
para no entrar en conflicto
Interfaces Móviles:
Son menos comunes, pero pueden darse a través de teclados conectados a tablets,..
Deben seguirse las mismas pautas indicadas
Interfaces Naturales o Gestuales:
En estos casos no son aplicables y surgen los llamados atajos gestuales o comandos
de voz
DISEÑO DE UNA INTERFAZ
Diseño del aspecto de la interfaz de usuario
Cuando se habla del aspecto de una

interfaz nos estamos refiriendo a la
utilización de elementos tales como:
● Colores
● Fuentes tipográficas
● Iconos utilizados
● La distribución de los elementos
Colores:
La elección de ellos resulta decisiva en la experiencia de los usuarios:

Ayuda a poner el foco de atención en los elementos y funciones más
importantes
Aportan la identidad de la marca a la que se vincula la aplicación
Son claves en la usabilidad y accesibilidad (recuerda que hay personas
que los pueden percibir de forma diferente y/o causarles algún tipo de daño)
Herramientas que se pueden utilizar para utilizar paletas de colores apropiadas:

https://coolors.co/
Aspectos a tener en cuenta:
Contrastes-colores
Recuerda la accesibilidad, aunque tú no sufras
miopía, ni daltonismo, ni astigmatismo, hay
muchas otras personas que sí
Piensa en las aplicaciones que utilizas, has visto

algo cómo esto?
El abuso de colores brillantes y fuertes

termina cansando la vista
Contrastes-colores
Las interfaces deben ser diseñadas

pensando en las personas usuarias, no en ti
Añade opciones para las personas que tengan

algún tipo de discapacidad, aunque la
funcionalidad no se complete para esta entrega
Contrastes-colores
En esta página puedes encontrar un verificador

de contrastes:
https://webaim.org/resources/contrastchecker/
Asegúrate que el valor sea mayor de 7,5

Identidad y seguridad visual
Ayuda mediante el diseño a construir

la identidad de tu Aplicación y de tu
marca como desarrollador.
Escoge bien una paleta de dos/tres

colores y una familia tipográfica para
mantener un diseño consistente. Dale
seguridad y bienestar al mismo tiempo
Fuentes (tipografía):
Es conveniente usar una de manera uniforme a lo largo de todo el diseño o, al

menos, que para los mismos fines se utilice la misma tipografía:
Debe favorecer la lectura a los usuarios y su experiencia de uso
El tamaño de la fuente debe ser acorde al tipo de pantalla/dispositivo donde se

leerá (ha de ser el adecuado para la lectura) y al público objetivo
Armonizar con el color y el estilo

Tipografía
Elige una que facilite la lectura y que transmita tu identidad visual, pero ten en
cuenta que, la persona usuaria, puede pasar muchas horas seguidas al día tu
aplicación
Aunque estés desarrollando un producto para una empresa de organización

de eventos infantiles puede que no sea buena idea utilizar muchos colores
brillantes y una fuente Comic Sans
Utiliza tipografías con buena legibilidad, como Arial, Helvetica… si no tienes una
tipografía específica para tu app o empresa
Distribución de los elementos
Debemos recordar que el diseño de estos elementos visuales debe

facilitar y mejorar la usabilidad de la aplicación, una mala selección
puede llevar al fracaso a la mejor de las aplicaciones
Ubicar los elementos

Si se colocan los elementos de la
interfaz sin aplicar un criterio previo:
un botón por allí arriba, un menú por
el otro lado, todo desordenado, se
genera una sensación de caos en el
usuario, que provoca rechazo al
utilizar la aplicación
Utiliza los espacios en blanco, deja

que la interfaz respire ;-)
Iconos: este tipo de elementos permite asociar un objeto a una acción

concreta, dinamizando así la interacción entre la interfaz de la aplicación y el
usuario.
Debe ser una imagen representativa de la acción con la que se vincula

Preferible escoger diseños simples y no excesivamente complejos
Calidad Imágenes-Iconos
Deben estar en la interfaz porque

transmiten o se utilizan para algo. No
añadirlas porque sí
Esto implica que deben ser intuitivas
Deben ser de buena calidad (no

pixeleadas o desfiguradas)
Cambia la resolución de tu ventana y

mira qué pasa?
Intuitivo
Averigua si algo es intuitivo pregunta a las persona que no sepan nada al

respecto. Realiza test, investiga cómo lo hacen otr@s
Libro de Steve Krug “No me hagas pensar”

Interacción con la persona usuaria
Mensajes:
Este?
“Error 23uGHR908666”
O mejor este?
“Se ha producido el error
23uGHR908666 debido a una
incompatibilidad con la versión de la
aplicación. Por favor, ve a ajustes…. y
reinicia la aplicación.”
Interacción con la persona usuaria
Mensajes:
Facilita todo lo que puedas las

acciones a la persona que
desea utilizar la Aplicación
Protección de datos
Mensajes:
Aunque ahora mismo no

desarrollemos toda la
funcionalidad, escribe mensajes
con opciones bastante claras
para administrar y proteger la
información personal o
condiciones de uso
Test de Usabilidad - Pruebas
Son herramientas que se encargan de evaluar desde la facilidad de uso de una

aplicación por parte de un usuario hasta si la funcionalidad implementada
cumple con la finalidad de la aplicación
Si el desarrollo resulta intuitivo para una persona pero no cumple sus expectativas
en cuanto al objeto de desarrollo, no estará cumpliendo los criterios de usabilidad
Funcionan teniendo en cuenta ciertas métricas reactivas respecto a tres

parámetros: satisfacción (cómo se siente), efectividad (grado de éxito y curva de
aprendizaje) y eficiencia (tiempo que lleva completar las acciones)
Test de Usabilidad - Tipos: (algunos aspectos que pueden medir y cómo lo hacen)
Mediante grabaciones de interacciones de usuario: esto da información sobre

algunos patrones de comportamiento y cuáles serían los posibles problemas que
deben enfrentar las personas usuarias
Mapa de calor: son representaciones visuales que ilustran dónde los usuarios han
interactuado más frecuentemente en un entorno digital. Pueden ser de clics, de
movimiento del ratón, desplazamientos. Así los diseñadores UX/UI optimizar el
diseño y la navegación enfocándose en las áreas más relevantes para los usuarios.
Ejemplo de una empresa que realiza estos Test:

https://www.wearetesters.com/investigacion-ux/mapas-de-calor-usabilidad/#:~:text=%C2%BFQu%C3%A9%20s
on%20los%20mapas%20de,movimientos%20del%20mouse%20y%20desplazamientos.
Test de Usabilidad: Mapas de calor (ejemplo en una web)
Test de Usabilidad - Tipos
Encuestas y cuestionarios: Se utilizan para recoger los comentarios y opiniones

de los usuarios sobre la facilidad de uso de la aplicación, permitiendo comprender
sus necesidades y preferencias
Análisis de métricas: Se utilizan para recabar información sobre el rendimiento del

sitio web o la aplicación móvil, incluyendo aspectos tan importantes como:
● El tiempo de carga
● La tasa de rebote (cuando un usuario accede a una web/App y no ejecuta
ninguna acción antes de abandonarla)
● La tasa de conversión (se da cuando un usuario completa una acción dentro
de la aplicación o en la tienda de aplicaciones para descargar la aplicación.
Medir y optimizar las tasas de conversión es clave para generar ingresos)
Pautas adicionales respecto a menús y cuadros

de diálogos
Menús
Para la implementación de un buen diseño, todo menú debe permitir:
Adecuada navegación por toda la aplicación
Mostrar todas las opciones posibles
Permitir a la persona usuaria seleccionar las acciones mostradas en este
menú, siempre y cuando se adecuen a los permisos de la persona en dicha
aplicación
Debe indicar y definir:

Título del menú, y las opciones y/o acciones asociadas (para facilitar la
selección de la opción que más se ajuste a sus necesidades)
Definir una zona concreta en la que se mostrarán las diferentes opciones y
debe mantenerse a lo largo de la App
Menús
Los menús "generales" deben situarse de forma estática en la interfaz de

una aplicación y suelen desplegarse en forma de cascada
En cuanto a los menús "contextuales" o "emergentes" es mejor:
Evitar menús en cascada
Limitar cantidad excesiva de opciones
Las opciones que se muestran en este tipo de menús también deben
estar contenidas en otro sitio, habitualmente en el menú "general" que
aparece fijo en la aplicación
Diseño ventanas y cuadros de diálogo
Se debe tener en cuenta:

Las personas usuarias deben ser capaces de abrir y cerrar ventanas sin que se
solapen, de manera que impidan la visualización de las mismas.
Se debe habilitar para que se puedan redimensionar y mover (dependiendo del
dispositivo y el tipo de App)
La cantidad de ventanas debe escogerse con mucha atención, no debemos saturar

las pantallas y a las personas, pero es verdad que tampoco se debe saturar
nuestros cuadros de interacción con demasiados contenidos
Esquematizar/Estructurar los contenidos antes de crear las interfaces (wireframe y

mockup)
Diseño de los elementos interactivos
Los elementos interactivos son los que aportan el comportamiento dinámico

que permite establecer una comunicación activa entre la interfaz de la
aplicación y las personas
Entre ellos se pueden encontrar: botones, checkBox, menús desplegables

de selección o radioButton, etc.
La inclusión de este tipo de componentes debe estar enfocada a la mejora de

la legibilidad de los mismos
Por ejemplo, en las cajas de texto se debe añadir un texto explicativo que ayude
a conocer qué tipo de datos se deben utilizar
El tamaño de las cajas de texto se ajuste lo máximo posible a la ventana en la

que son mostrados y el tamaño de los datos
En cuanto a los botones, checkBox o radioButton, es decir, elementos que

permiten seleccionar uno o varios valores y enviarlos a la aplicación para
realizar las acciones oportunas, deben cumplir algunas pautas de diseño:
1. Los títulos deben ser intuitivos
2. Las acciones codificadas en cada opción deben quedar lo
suficientemente comprensibles para el usuario
3. Las opciones deben ser fácilmente distinguibles unas de otras y, por
tanto, relativamente rápidas de escoger y seleccionar
Secuencia de control de la aplicación
Lo más importante es que la aplicación sea fácil de navegar para todo tipo de
usuario:
Diseña una secuencia de navegación clara y lógica, intuitiva

Prioriza las funciones principales: primero los elementos o funciones más
usados, y evita que el usuario tenga que pasar por pasos innecesarios para
acceder a las acciones principales
Asegura la consistencia: los controles y elementos visuales se comporten de
la misma forma en todas las vistas. La consistencia en el diseño minimiza la carga
cognitiva, especialmente para usuarios con discapacidad.
Facilita la navegación con teclado: uso de la tabulación, destaca el foco,
atajos de teclado
Usa indicaciones visuales y sonoras para la confirmación de acciones, así
como los indicadores de progreso
Secuencia de control de la aplicación
Lo más importante es que la aplicación sea fácil de navegar para todo tipo de
usuario:
Diseña una secuencia de navegación clara y lógica, intuitiva

Prioriza las funciones principales: primero los elementos o funciones más
usados, y evita que el usuario tenga que pasar por pasos innecesarios para
acceder a las acciones principales
Asegura la consistencia: los controles y elementos visuales se comporten de
la misma forma en todas las vistas. La consistencia en el diseño minimiza la carga
cognitiva, especialmente para usuarios con discapacidad.
Facilita la navegación con teclado: uso de la tabulación, destaca el foco,
atajos de teclado
Usa indicaciones visuales y sonoras para la confirmación de acciones, así
como los indicadores de progreso

UT04 Apuntes

Cargado por

Copyright:

Formatos disponibles

UT04 Apuntes

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

UT04 Apuntes

Cargado por

Copyright:

Formatos disponibles

2º A/B DAM (DAD)

UT4 Diseño de Interfaces gráficas

Qué significa Usabilidad (Software):

ISO/IEC 9126 “La usabilidad se refiere a la capacidad de un software

Partiendo de esto ¿qué debo tener en cuenta antes de comenzar un

Para conseguir una interfaz con buena usabilidad, antes de comenzar

Los estándares internacionales garantizan que los productos y servicios que

Los estándares web son los pilares de un mundo conectado digitalmente y

Consistencia: una aplicación se puede calificar como consistente cuando la

Son dibujos planos sin ningún tipo de

Es la representación de baja fidelidad (lo-fi) de

Si el wireframe define la estructura y el mockup cómo es visualmente,

En un documento puedes crear más de una página para mostrar

1) Crear un Frame como una capa donde se añadirá cada

En caso de que un diseño se repita en varias pantallas, se

“Es una documentación o herramienta que establece las reglas base

Esto implica atender a la gran diversidad de capacidades existentes:

Debemos tener en cuenta los diferentes tipos de Usuarios

Incorpora múltiples opciones tipográficas que se adapten a diferentes preferencias

Usa líneas claras y espaciamiento generoso para facilitar la lectura, especialmente

Implementa una estructura de navegación flexible que permita a los usuarios

Desarrolla descripciones contextuales y no solo etiquetas de texto, proporcionando

Uso de Elementos Interactivos

Proporciona opciones de interacción alternativa, como comandos de voz, para que

Permite la personalización de la interfaz, como el ajuste del tamaño de botones y

Evitar Contenido en Movimiento

Incorpora controles para pausar, detener o ocultar contenido en movimiento.

Implementa mensajes de error y éxito en múltiples formatos para asegurar que

En la web, una forma de hacerlo es mediante la utilización de roles y propiedades ARIA

● Realiza pruebas con usuarios que tengan diversas discapacidades y/o

● Desarrolla interfaces que respondan a las preferencias del usuario, como

Asegúrate de que el contenido y los

Hay que conocer en profundidad:

− Pautas de diseño de la estructura de la interfaz de usuario; menús,

− Pautas de diseño del aspecto de la interfaz de usuario: colores, fuentes,

− Pautas de diseño de los elementos interactivos de la interfaz de

− Pautas de diseño de la secuencia de control de la aplicación

● Menú de Barra Superior: Barra en la parte superior con opciones principales

Ventanas Principales o Contenedoras: son la estructura central de una aplicación, suelen

Ventanas Emergentes (Cuadros de diálogo): se trata de ventanas pequeñas que aparecen

Ventanas de Herramientas: son pequeñas y/o flotantes y contienen herramientas o

Ventanas de Asistente (Wizard): guían al usuario a través de un proceso paso a paso,

Cuadro de Confirmación: solicita al usuario la validación de una acción crítica antes de

Cuadro de Selección (Archivo o Color): el de Archivo permite al usuario navegar por el

Son esenciales para

La elección correcta del tipo

Cuando se habla del aspecto de una

La elección de ellos resulta decisiva en la experiencia de los usuarios:

Herramientas que se pueden utilizar para utilizar paletas de colores apropiadas:

Piensa en las aplicaciones que utilizas, has visto

El abuso de colores brillantes y fuertes

Las interfaces deben ser diseñadas

Añade opciones para las personas que tengan

En esta página puedes encontrar un verificador

Asegúrate que el valor sea mayor de 7,5

Identidad y seguridad visual

Ayuda mediante el diseño a construir

Escoge bien una paleta de dos/tres

Es conveniente usar una de manera uniforme a lo largo de todo el diseño o, al