Unidad 2 Diseño de Interfaces Gráficas - Usabilidad y Accesibilidad

Centro Integrado de Formación Profesional
AVILÉS
Principado de Asturias
UNIDAD 2:
DISEÑO DE INTERFACES GRÁFICAS.
USABILIDAD Y ACCESIBILIDAD
DESARROLLO DE INTERFACES
2º CURSO
C.F.G.S. DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Centro Integrado de Formación Profesional Avilés
Desarrollo de interfaces
Unidad 2: Diseño de interfaces gráficas. Usabilidad y accesibilidad
ÍNDICE
ÍNDICE ............................................................................................................................................................. 1
UNIDAD 2: DISEÑO DE INTERFACES GRÁFICAS. USABILIDAD Y ACCESIBILIDAD ................. 2
2.1. Usabilidad y accesibilidad ................................................................................................................. 2
2.1.1. Principios de usabilidad ............................................................................................................. 3
2.1.2. Experiencia de usuario UX ......................................................................................................... 4
2.1.3. HCI Interacción Humano – Computador ................................................................................ 5
2.1.4. Características .............................................................................................................................. 5
2.1.5. Atributos ....................................................................................................................................... 6
2.2. Normativa relacionada con la usabilidad ........................................................................................ 7
2.3. Medida de usabilidad de las aplicaciones ....................................................................................... 8
2.3.1. Tipos de métricas ......................................................................................................................... 8
2.2.2. Herramientas .............................................................................................................................. 10
2.4. Pruebas................................................................................................................................................ 11
2.4.1. Pruebas de expertos. Formularios tipo ................................................................................... 11
2.4.2. Pruebas con usuarios. Cuestionarios ...................................................................................... 13
2.5. Esquemas (Wireframes) y Maquetas (Mockups) .......................................................................... 17
2.6. Pautas de diseño ................................................................................................................................ 21
2.6.1. Pautas de la estructura de la interfaz de usuario .................................................................. 22
2.6.2. Pautas del aspecto de la interfaz de usuario.......................................................................... 29
2.6.3. Pautas de los elementos interactivos de la interfaz de usuario .......................................... 36
2.6.4. Pautas de la presentación de datos ......................................................................................... 37
2.6.5. Pautas de la secuencia de control de la aplicación ............................................................... 37
2.6.6. Pautas para el aseguramiento de la información .................................................................. 38
2.6.7. Pautas específicas para aplicaciones multimedia ................................................................. 39
ÍNDICE DE FIGURAS .................................................................................................................................. 40
BIBLIOGRAFÍA – WEBGRAFÍA ................................................................................................................ 40
Página 1
UNIDAD 2: DISEÑO DE INTERFACES GRÁFICAS. USABILIDAD Y

ACCESIBILIDAD
En general, la mayoría de los desarrolladores no están demasiado especializados en el diseño

y/o creación de interfaces de usuario; es más importante que el sistema funcione a que se vea
bien. Esto, en principio, se puede considerar un gran error.
Por ejemplo, cuando se va a comprar algo que se necesita, se analiza todo en su conjunto. Para
elegir un automóvil. además de todas las especificaciones técnicas, el consumidor se fija en lo
que le gusta. Prueba controles y su comodidad, mira que los acabados sean de su agrado y que
el chasis vaya acorde a sus preferencias. Todo esto es exportable y adaptable a la ingeniería del
software y al desarrollo de aplicaciones con las que interactúa un usuario.
2.1. USABILIDAD Y ACCESIBILIDAD
Cuando se diseñan aplicaciones multiplataforma, la interfaz planteada será fundamental para

que el usuario se sienta cómodo trabajando con ella. Un mal diseño puede provocar que los
clientes abandonen la aplicación.
Dentro del contexto de aplicaciones informáticas y desarrollo de software, se define usabilidad

como la disciplina que estudia la forma de diseñar sitios webs y aplicaciones para que los
usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva posible. Este
concepto tiene en la actualidad gran relevancia, ya que cuanto más sencillo le resulte a un
usuario navegar por una aplicación, más posibilidades tendrá de realizar de forma eficiente su
trabajo y mayor éxito tendrá el software desarrollado.
Por todo esto, la presente unidad va a tratar de introducir el diseño usable de aplicaciones y
hacer entender la necesidad de invertir tiempo en determinar criterios de usabilidad que
garanticen, en la medida de lo posible, la aceptación del software que se diseñe. Se verá qué
normativa se aplica en este campo, qué principios básicos garantizarán la usabilidad y qué
parámetros de diseño de la interfaz contribuirán a facilitar el uso del software a los usuarios.
Definir adecuados parámetros de usabilidad en el diseño de los productos, se traducirá en

beneficios económicos, de calidad y de imagen de la empresa. Alrededor de la usabilidad, hay
otros conceptos parecidos que, a veces, se confunden: accesibilidad y utilidad. La diferencia
entre estos conceptos es la siguiente: la accesibilidad se refiere a que el diseño del software sea
tal que permite a personas con diversidad funcional acceder a sus contenidos y la utilidad es
un concepto que mide el grado de satisfacción de las necesidades de los usuarios.
Página 2
2.1.1. PRINCIPIOS DE USABILIDAD
Jakob Nielsen, un verdadero gurú de la usabilidad en la web, abstrajo diez principios que
permitirán crear productos con un mayor grado de aceptación en los consumidores, ya que se
basan en sus necesidades y en la forma en la que los utilizan en la vida diaria.
Visibilidad del estado del sistema

El sistema mantiene informado al usuario en todo momento sobre el estado actual del sistema,
apoyándose en indicadores que sirvan de retroalimentación y que sean de fácil lectura.
Correspondencia entre el sistema y el mundo real

Se debe investigar al público al que irá dirigido el sistema para utilizar lenguaje que le resulte
familiar. Mostrar información en un orden natural y lógico, usar representaciones gráficas
claras y seguir convenciones que faciliten esta homogeneidad.
Libertad y control del usuario

Los usuarios se sentirán más cómodos en el sistema si se les otorgan libertades y control en su
uso. Hay que ser conscientes de que es muy probable que los usuarios elijan opciones que
posteriormente quieran cambiar y permitirles deshacer/rehacer acciones o cancelar ciertas
elecciones es una manera de darles el control.
Prevención de errores
Todo el mundo puede equivocarse; es por ello por lo que hay que procurar que el impacto de
estos errores sea mínimo en el sistema. Realizar pruebas sobre casos pocos probables y probar
los algoritmos ayudará a que el sistema pueda reaccionar. Hay muchísimas técnicas para
prevenir errores. Algunas de ellas se pueden consultar aquí:
https://www.nngroup.com/articles/slips/
Coherencia y estándares
Los usuarios deben experimentar un sistema homologado, en donde el lenguaje, uso de colores
y elementos gráficos sea consistente. No se deben manejar diferentes elementos para una
misma acción.
Reconocimiento en vez de recordar

Minimizar la información que el usuario tiene que recordar mostrando objetos, acciones y
opciones de una manera visible en la interfaz. Permitir que se vean las instrucciones en todo
momento y que, al elegir opciones, estas sean mostradas explícitamente. Para profundizar en
el tema: https://www.nngroup.com/articles/recognition-and-recall/
Flexibilidad y eficiencia de uso

Permitir que los usuarios experimentados puedan tener comandos “aceleradores” para que el
uso del sistema sea cada vez más cómodo. Estás opciones en un principio no se mostrarán a
los nuevos usuarios, pero con el uso, harán que su trabajo sea más productivo.
Página 3
Diseño estético y minimalista

Mostrar sólo la información que se necesite en el momento. Resulta muy fácil perder la
atención de los usuarios; por tal motivo hay que mostrar claridad y concisión. En la actualidad
existen diferentes paradigmas de diseño que tienen reglas claras para hacer más estético y
funcional un sistema sin invertir tanto en diseño.
Ayuda y documentación
Aun cuando el sistema sea lo suficientemente intuitivo para usarse, siempre es conveniente
otorgar documentación y disponer de una forma de proporcionar ayuda a los usuarios. Toda
la información mostrada en FAQs y documentación, así como las respuestas a las dudas de
usuarios, deberán ser claras y directas.
Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores

Se deben mostrar mensajes con la causa específica del error y con indicaciones de como
solventarlo; cuidar el lenguaje utilizado y mostrar precisión en las acciones siguientes. Dar
como salida mensajes genéricos provocará que los usuarios no sepan cómo reaccionar.
2.1.2. EXPERIENCIA DE USUARIO (USER EXPERIENCE UX)
En los primeros diseños de un producto con una interfaz, el desarrollo hacía hincapié
básicamente en realizar productos de calidad centrándose fundamentalmente en aspectos
técnicos del mismo, calidad del software, estabilidad, código robusto, etc.
A medida que evolucionaba el diseño, aparece un enfoque centrado en el usuario buscando

entre otros objetivos la satisfacción del usuario a la hora de usarlo, seleccionando los colores
adecuados, fuentes, navegación, etc.
La experiencia de usuario va más allá de crear productos que cumplen una funcionalidad
determinada o unos requisitos definidos por el usuario, se busca crear algo que el usuario
disfrute al usarlo. Por lo tanto, el concepto de experiencia de usuario se preocupa de aspectos
más amplios y complejos de medir, como son la satisfacción, diversión, entretenimiento o lo
agradable estéticamente de un producto interactivo. Es un hecho constatado que los diseños
con una estética agradable son más fáciles de usar que aquellos diseños que presentar una peor
estética.
A modo de resumen se puede concluir que la Experiencia de Usuario:

- Es resultado de un fenómeno interactivo en el que intervienen multitud de factores
individuales, sociales, culturales, contextuales y propios del producto.
- Se verá influida por expectativas y experiencias previas, y por tanto condicionará
expectativas y experiencias futuras
- Representa un área de estudio multidisciplinar y un enfoque de trabajo interdisciplinar
- Ofrece una perspectiva más amplia e inclusiva acerca del uso y consumo de productos
interactivos, y por tanto más acorde con la realidad
Página 4
- Hace hincapié en factores de la interacción tradicionalmente poco o mal considerados,

como son el comportamiento emocional del usuario y la importancia de atributos de
diseño como la estética de este comportamiento.
2.1.3. HCI INTERACCIÓN HUMANO – COMPUTADOR
El objetivo de crear una aplicación que sea sencilla de usar e intuitiva es uno de los mayores
logros en el diseño de aplicaciones. Un sistema que produce insatisfacción en el usuario o
reticencias a la hora de utilizarlo debe ser rediseñado ya que de lo contrario no conseguirá los
objetivos para los que fue creado, mejora de la productividad, facilitar tareas, etc. Por lo tanto,
el diseño de un sistema debe cumplir criterios técnicos, tecnológicos, ergonómicos y del ámbito
de la sociología (forma de trabajar de las personas con elementos tecnológicos, criterios de
satisfacción, elementos cognitivos en el aprendizaje tecnológico, etc.)
La corriente de estudio que permite aunar estas técnicas y estudios con el fin de crear mejores
interfaces se ubica bajo las siglas HCI (Human Computer Interaction). Un ejemplo claro de
aplicación de HCI es el uso de metáforas, como es el escritorio de un sistema operativo
simulando una mesa de trabajo donde se combinan conceptos cómo trabaja un usuario, qué
tareas necesita realizar y cómo puede diseñarse la interfaz de un sistema operativo para
llevarlas a cabo.
2.1.4. CARACTERÍSTICAS
Las características más importantes de una interfaz usable son las siguientes:
- Útil: que sea capaz de cumplir las tareas específicas para la cual se ha diseñado.
- Fácil de usar: que sea eficiente, veloz y con la menor cantidad de errores posibles.
- Fácil de aprender: que no se necesite excesivo tiempo en aprender a trabajar con la
aplicación y que sea sencillo recordar su funcionamiento.
- Elegante en su diseño: para favorecer la percepción del usuario y sus emociones.
En el diseño de la interfaz de usuario se debe tener en cuenta que los usuarios deben ser
capaces de alcanzar sus objetivos con el mínimo de esfuerzo y con máximos resultados. Otras
características también importantes, que no siempre son tenidas en cuenta en el diseño de
interfaces, son:
- Previsión de errores de los usuarios al navegar por la interfaz: hay que proveer de
mecanismos de recuperación de errores y de reversibilidad de acciones.
- Retroalimentación de la interfaz ante acciones del usuario, para evitar que se sienta
perdido.
- Simplicidad de diseño de la interfaz: evitar sobrecargarla será esencial para un buen uso
de esta.
Página 5
2.1.5. ATRIBUTOS
Los atributos de la interfaz usable son principios que nunca se deben ignorar cuando se diseña
una interfaz. Hay que pensar por un instante cómo hay que proporcionarle la información a
los usuarios para que sigan usando la aplicación.
En el diseño de interfaces gráficas, se usan elementos como la tipografía, símbolos, iconos,

color, etc. para representar hechos, conceptos y emociones. Es necesario saber que su correcta
manipulación puede hacer que se cumplan o no adecuadamente los objetivos planteados por
el sistema. Por ello, los principios básicos que no hay que olvidar son:
 Organizar.
 Economizar.
 Comunicar
El diseño de la interfaz debe caracterizarse por su simplicidad y estética haciéndola accesible

a todas las personas y generando un entorno agradable que contribuya al entendimiento de
los usuarios de una forma efectiva.
Los cinco atributos de la usabilidad son:

- Facilidad de aprendizaje: El sistema debe ser fácil de aprender.
- Eficiencia: Una vez que sepa manejar la aplicación, el usuario debe adquirir un nivel
alto de productividad.
- Recuerdo de utilización en el tiempo: El uso de la aplicación debe ser fácil de recordar.
- Tasas de error: Cuántos errores comete el usuario por unidad de tiempo.
- Satisfacción: Qué grado de satisfacción tiene la utilización de la aplicación para el
usuario.
Entre los beneficios de la usabilidad se encuentran:

- Reducción de los costes de aprendizaje y ayuda al usuario.
- Optimización de los costes de diseño, rediseño y mantenimiento.
- Disminución de la tasa de errores cometidos por el uso en el uso cotidiano de la
aplicación.
- Aumento de la satisfacción de los usuarios y del prestigio de la marca.
Página 6
2.2. NORMATIVA RELACIONADA CON LA USABILIDAD
Existen varias normas ISO relacionadas con el término usabilidad. La ISO (Organización
Internacional para la Normalización) se creó con el encargo de promover el desarrollo de las
normas internacionales de fabricación, comercio y comunicación para todas las industrias
salvo la electricidad y la electrónica.
Las normas ISO se dividen en códigos que indican distintas maneras de clasificar las
definiciones de estándares, tanto de procedimientos y procesos con requerimientos como de
atributos de productos y servicios.
Por lo que respecta a la calidad, las más significativas son las normas 9000, las cuales hacen
referencia a los sistemas de gestión de la calidad, en el ámbito de fundamentos y vocabulario,
requisitos o directrices.
Fijándose en las investigaciones referentes a los aspectos ergonómicos en la interacción

hombre-máquina, se basan en algunos estándares internacionales, como los siguientes:
 ISO 9241. Aporta requerimientos y recomendaciones relacionados con las características

del software y el hardware, así como del entorno que debe mejorar la usabilidad y
principios ergonómicos en el uso de las nuevas tecnologías con terminales visuales. Esta
norma está dividida en muchas partes, añadidas a lo largo de los años noventa. Las
partes 10 y de la 12 a la 17 son las relacionadas con el software, e inciden especialmente
en los diseñadores y responsables de las pruebas de las interfaces de usuarios.
 ISO 9126. Esta norma desarrolla el modelo de calidad en el software, proponiendo unos
atributos de calidad como la funcionalidad, fiabilidad, usabilidad, eficiencia, facilidad
de mantenimiento y portabilidad.
 ISO 13407. Esta norma explica las actividades requeridas para el diseño de interfaces
centradas en el usuario. Estas actividades o requerimientos se refieren a todo el ciclo de
vida del desarrollo del software, incidiendo en la fase de diseño de interfaces. Es una
norma pensada para los jefes de proyectos informáticos o para los responsables del
diseño de interfaces de este.
 ISO 14915. Principios ergonómicos del software para interfaces de usuario multimedia.
La parte 1 trata sobre principios de diseño y estructura. En cuanto a la segunda, se centra
en la navegación y control multimedia y la tercera y última, la selección y combinación
de medios.
Página 7
2.3. MEDIDA DE USABILIDAD DE LAS APLICACIONES
Llegado este punto, hay que dar otro paso adelante y hacerse las siguientes preguntas: ¿Cómo
se diseña una interfaz de usuario que cumpla los requisitos de usabilidad? ¿Cómo saber si una
interfaz cumple los requisitos de usabilidad que se han planteado?
En este apartado se van a tratar las métricas que se pueden utilizar para medir la usabilidad
de las aplicaciones y, en concreto, de sus interfaces. Una vez que se está ante una interfaz,
¿cómo se puede evaluar su usabilidad? Se trata de una pregunta difícil de responder. Hay
muchos parámetros que pueden valorarse. Muchos son parámetros subjetivos, difíciles de
medir. Quizás para un usuario una interfaz es intuitiva, es satisfactoria, pero para otro usuario
no lo es. Por eso es necesario buscar métricas objetivas.
Las pruebas de usabilidad se hacen para adaptar el software a los estilos de trabajo reales de
los usuarios, en lugar de forzar a los usuarios a adaptar sus estilos de trabajo al software.
Además, hay que plantearse otras preguntas, como, por ejemplo: ¿en qué parte del desarrollo
de aplicaciones informáticas hay que llevar a cabo las medidas de usabilidad?,¿en la fase de
finalización y transferencia? ¿durante el desarrollo? ¿o hay que hacer pruebas en el análisis y
durante el diseño? Este punto es también importante; en función del momento en que se
apliquen las medidas es posible encontrarse con unos resultados u otros y, además, se estará a
tiempo de superar los errores que se hayan hecho, o, si se ha medido demasiado tarde, quizás
no hay posibilidad de volver atrás sin provocar un gran desbarajuste en la planificación.
2.3.1. TIPOS DE MÉTRICAS
Se podrían llevar a cabo algunas evaluaciones cualitativas, pero es necesario establecer un

sistema cuantitativo de la usabilidad. Para definir cuantitativamente su usabilidad, se han
definido algunas métricas que intentan evaluar las aplicaciones desde un punto de vista de las
características y atributos de la usabilidad.
Los datos cualitativos son los que ofrecen información de calidad, expresada de forma verbal
o escrita por los usuarios investigados. Es decir, no se buscarán respuestas controladas como
un sí o un no, o una selección entre diferentes opciones, sino que se dejarán respuestas abiertas
para que se escoja la opinión real y subjetiva del usuario.
Los datos cuantitativos son datos que pueden cuantificarse. Estos datos se tratarán
posteriormente mediante métodos matemáticos para llegar a conclusiones. Normalmente las
respuestas serán numéricas o booleanas, valoraciones con una respuesta paulatina o
porcentajes subjetivos, y las preguntas serán mucho más concretas.
Para obtener datos cualitativos es necesario conseguir informaciones de usuarios finales. En el

siguiente apartado se hablará con detalle de las pruebas de usuario, pero, a modo de ejemplo,
Página 8
se pueden entender estos datos cualitativos como el resultado de encuestas, de valoraciones

subjetivas, de preguntas con respuesta abierta, opiniones del producto, etc.
En cambio, si se habla de datos cuantitativos, será necesario analizar el comportamiento del

usuario ante la nueva aplicación, web o interfaz, recogiendo informaciones objetivas como
pueden ser:
 Tiempo dedicado a cada interfaz antes de elegir una opción
 Tiempo o número de veces de utilización de la ayuda o documentación
 Frecuencia de uso de las opciones
 Número de errores en el uso de las interfaces por usuario o cada cierto tiempo
 Número de acciones completadas en un tiempo determinado
 Comparación de tiempo utilizado en segundas o terceras visitas a una misma interfaz
 Número de sugerencias o quejas del producto
A partir de estas métricas cuantitativas se intentará evaluar la usabilidad desde el punto de

vista de sus dimensiones (efectividad, eficiencia, atractivo, tolerancia al error y facilidad de
aprendizaje).
Para evaluar la usabilidad de una interfaz, de una página o portal web o de una aplicación
informática, existen muchas técnicas que utilizan las métricas expuestas anteriormente. Según
Jeffrey Rubin (1994), existen cuatro tipos de pruebas las cuales sirven para evaluar la
usabilidad a lo largo de las diferentes fases del ciclo de vida de un proyecto de desarrollo de
software. Estos tipos de test son:
 Test exploratorio. Se llevará a cabo en las fases iniciales del ciclo de vida (requisitos,
análisis, diseño). Tendrá como objetivo la evaluación de la eficiencia de los conceptos
de diseño inicial y localizar errores iniciales en la definición de las necesidades y
asunciones de los usuarios.
 Test de evaluación de operaciones y aspectos del producto o servicio. Durante las fases
iniciales e intermedias del proyecto (desde la fase de toma de requisitos hasta la de
desarrollo). Servirá para evaluar las conclusiones extraídas de los test exploratorios al
principio del desarrollo del software para validar que no se han propagado los errores.
 Test de validación. Se lleva a cabo durante las fases finales (pruebas, finalización y
transferencia). Servirá para evaluar si el producto final cumple con los requisitos
predeterminados de usabilidad establecidos al iniciar el proyecto, permitiendo de este
modo adelantarse a las posibles deficiencias del producto. Esta prueba certificará la
usabilidad del producto.
 Test de comparación. Esta prueba implica en todas las fases del proyecto. Irá
comprobando el producto con los que ofrece la competencia, y también comprobará las
diferentes alternativas de diseño con el objetivo de escoger la más sencilla de utilizar y
aprender. Esta prueba podrá aplicarse en paralelo con otros tipos de test.
Página 9
2.2.2. HERRAMIENTAS
Existen herramientas automatizadas que comprueban de forma automática la conformidad

con directrices muy básicas. Aunque estas herramientas son útiles para la detección de
problemas básicos, sólo comprueban cuestiones de usabilidad con un alcance muy limitado.
Algunas de ellas son:
 UsabilityHub. Permite realizar pruebas de usabilidad rápidas y sencillas, como pruebas
de clics y encuestas. Dispone de una versión gratuita limitada la cual tiene un número
limitado de respuestas por mes.
 OpenSesame. En realidad, se trata de un software de código abierto para la creación de
experimentos psicológicos, pero también se puede utilizar para evaluar la usabilidad de
las aplicaciones. Proporciona flexibilidad para diseñar y ejecutar pruebas de usabilidad
personalizadas. Es de código abierto.
 Crazy Egg. Herramienta que ofrece mapas de calor y seguimiento de clics para
comprender cómo los usuarios interactúan con una aplicación o sitio web. Dispone de
una versión gratuita con limitaciones que, aun así, proporciona información de mucho
valor.
 Hotjar. Permite grabar sesiones de usuarios, crear mapas de calor, realizar encuestas y
obtener comentarios visuales sobre cómo los usuarios interactúan con una aplicación.
La versión gratuita ofrece funciones limitadas, pero muy útiles.
 Google Analytics. Aunque es conocido principalmente por el seguimiento del tráfico
web, Google Analytics también proporciona información útil sobre el comportamiento
de los usuarios en aplicaciones móviles y sitios web. Se dispone de una versión gratuita
limitada.
Página 10
2.4. PRUEBAS
Hasta ahora se ha visto el concepto de usabilidad, sus dimensiones, sus características,

métricas para medirla, pero ahora será necesario analizar las interfaces mediante pruebas
hechas por expertos en la materia y pruebas hechas por usuarios finales de las aplicaciones
desarrolladas.
Estas pruebas estarán relacionadas con sus características y dimensiones, así como la medida
de la usabilidad y los tipos de métricas existentes. Utilizarán algunas de las métricas descritas
tanto las cualitativas en el caso de las pruebas de expertos como las cuantitativas en las pruebas
con usuarios.
En primer lugar, habrá que tener muy claro que lo que se prueba será el sistema desarrollado
(y sobre todo las interfaces), no los usuarios o verificadores. Cuanto antes se hagan las pruebas
dentro del desarrollo del proyecto, mejor será para corregir errores, pero habrá que saber
distinguir entre las pruebas que pueden realizar los expertos durante el desarrollo y las
interfaces que se podrán mostrar a los usuarios.
En estos casos, habrá que tener en cuenta que ciertas decisiones tomadas a raíz de los
resultados de las pruebas tendrán que justificarse muy bien ante los usuarios, acción que
implica cierta burocracia. En otras situaciones, las pruebas ayudarán a elegir entre varias
alternativas planteadas, puesto que el usuario acabará de echar una mano en algunas
decisiones.
Para llevar a cabo las pruebas será necesario desarrollar previamente un plan de pruebas. Este
plan deberá prever:
 El alcance de las pruebas (qué se probará y qué no, hasta dónde se llegará).
 Los propósitos de éstas (cuáles son los objetivos, razones o justificaciones para probar
en cada caso).
 Las fechas y los lugares donde se llevarán a cabo (si se irá a casa del usuario, si vendrá
él, si hará falta una ubicación especial, cuánto tiempo tendrá que durar, en cuántas
sesiones diferentes, etc.).
 Los participantes en las pruebas (cuántos usuarios, si los usuarios serán partes
interesadas o no tendrán ninguna vinculación con el desarrollo del proyecto, cuántos
expertos, si estarán vinculados con el proyecto o serán externos).
2.4.1. PRUEBAS DE EXPERTOS. FORMULARIOS TIPO
Es un análisis y examen sistemático y detallado de la interfaz del producto realizado por

expertos según unos principios de usabilidad reconocidos. Los especialistas realizan una
evaluación aplicando una lista de criterios y sus conocimientos sobre la experiencia de los
usuarios y las mejores prácticas del sector.
Página 11
Proceso de la evaluación experta:

 Estudiar la audiencia objetivo y las tareas típicas.
 Navegación exploratoria por las páginas de la interfaz.
 Examinar la interfaz siguiendo una lista de criterios establecidos.
 Agrupar la lista de problemas de usabilidad y asignar la gravedad según su importancia
y frecuencia.
 Revisión de las normas: se revisa para observar si se cumple con las normas
establecidas.
 Inspección de consistencia: se hace a través de una familia de interfaces.
 Paseo cognitivo: los expertos se comportan como usuarios finales.
La evaluación heurística por criterios es la realizada por evaluadores especializados a partir de

principios establecidos por la disciplina de la HCI. Esta evaluación detecta aproximadamente
el 42% de los problemas graves de diseño y el 32% de los menores, dependiendo del número
de evaluadores que revisen el sitio. Posteriormente se recomienda realizar un test de usuarios
para completar la evaluación.
La principal ventaja de la evaluación por criterios es su bajo coste; en realidad, este tipo de
evaluación puede tener el coste que se desee. Un número mínimo de tres evaluadores permite
realizar una evaluación por criterios. Los costes son, por tanto, mucho menores que cualquier
otro método de evaluación.
En comparación con otras técnicas de evaluación donde el observador debe interpretar las
acciones del usuario, en la evaluación heurística no es necesaria la interpretación externa, ya
que las ideas, comentarios e información elaborada por los evaluadores están contenidas en
sus informes. Otra ventaja es que en la evaluación por criterios es posible interrogar a los
evaluadores, profundizar en determinadas cuestiones de interés y ayudarles cuando tienen
problemas. En los test de usuario, por el contrario, los usuarios no deben disponer de más
información que la necesaria para permitir su comportamiento espontáneo.
En el caso de que se disponga de una aplicación totalmente elaborada, es aconsejable realizar

la evaluación heurística antes que las pruebas de usuario. Un test de usuario previo solo
serviría para detectar problemas de usabilidad que en una evaluación heurística hubieran sido
fácilmente detectadas por los expertos a un coste mucho menor. Debido a estos problemas,
muchos usuarios pueden quedar bloqueados en las fases iniciales del proceso a evaluar y
muchos elementos de interés tampoco se podrán evaluar, a no ser que se instruya a los usuarios
sobre cómo superar las dificultades, lo que anularía la validez del test. Detectar previamente
los problemas más graves de usabilidad en la evaluación por criterios, permite realizar
posteriormente pruebas de usuarios con mejores resultados.
Se ha observado que aun en base a los mismos principios heurísticos, diferentes personas
encuentran distintos tipos de problemas en una aplicación, por ello es importante utilizar
varios evaluadores.
Página 12
Los estudios muestran que un número entre 3 y 5 evaluadores es suficiente para la evaluación
por criterios. Este puede ser incrementado en caso de que la usabilidad sea crucial para el éxito
de la aplicación.
Los evaluadores inspeccionan individualmente y solo después de la evaluación pueden

comunicarse sus hallazgos. Además, han de realizar informes por escrito. Una recomendación
general es que naveguen a través de toda la aplicación al menos dos veces para familiarizarse
con su estructura y antes de comenzar con la evaluación propiamente dicha.
Las sesiones de evaluación duran aproximadamente una o dos horas por página. Los
evaluadores utilizan sus checklist de criterios y, cuando sea necesario, incorporarán en ellos
nuevos principios a las categorías existentes.
Los evaluadores no solo elaboran una lista de problemas de usabilidad en la aplicación, sino
que deben explicar los problemas de acuerdo con los principios de aquella. El análisis de cada
problema se ha de realizar por separado y no en conjunto. Se trata de evitar repetir los errores
en el rediseño de la interfaz y permitir la solución de problemas concretos sin la necesidad de
rediseñar por completo la aplicación.
La jerarquización de la gravedad de los problemas facilitará la aplicación posterior de políticas

de rediseño efectivas. La gravedad de los problemas de usabilidad es medida por tres factores:
 La frecuencia con la que el problema ocurre ¿es común o poco frecuente?
 El impacto del problema cuando sucede ¿es fácil o difícil para los usuarios superarlo?
 La persistencia del problema ¿es resuelto la primera vez que se use la aplicación o
aparece repetidamente?
2.4.2. PRUEBAS CON USUARIOS. CUESTIONARIOS
El Diseño Centrado en el Usuario (DCU), como filosofía de diseño, engloba o se relaciona con
un heterogéneo conjunto de metodologías y técnicas que comparten un objetivo común:
conocer y comprender las necesidades, limitaciones, comportamiento y características del
usuario, involucrando en muchos casos a usuarios potenciales o reales en el proceso.
El test de usuarios es la prueba reina del DCU ya que representa la mejor forma de evaluar la
usabilidad de un diseño. Estas pruebas se basan en la observación de cómo un grupo de
usuarios llevan a cabo una serie de tareas encomendadas por el evaluador, analizando los
problemas de usabilidad con los que se encuentran. Aun cuando el diseñador tenga amplios
conocimientos sobre usabilidad, resulta recomendable evaluar el diseño con usuarios. Esto se
debe a que, conforme más tiempo le dedica un diseñador a un proyecto, menor es su
perspectiva y más difícilmente detectará posibles problemas. Se puede decir que gran parte de
lo que el diseñador percibe cuando mira su propia obra es una construcción mental; ve aquello
que tiene en mente, no aquello que los usuarios tendrán ante sus ojos.
Página 13
El número de participantes necesarios para detectar el 100% de los problemas más importantes
de usabilidad de un diseño se encuentra en torno a 15. Hay expertos en la materia que
recomiendan que, en vez de hacer una prueba con este número, mejor llevar a cabo tres
pruebas con 5 participantes por cada una repartidas en diferentes momentos del proceso de
desarrollo. El objetivo de estas pruebas es mejorar de forma iterativa la usabilidad de la
aplicación, por lo que cada prueba nos ofrecerá suficiente información para mejorar la solución
de diseño, aunque no permita detectar la totalidad de los problemas de usabilidad.
En el reclutamiento de participantes hay que asegurarse de que los elegidos tienen perfiles
acordes con los usuarios reales o potenciales de la aplicación, muestran interés por la aplicación
a evaluar y, a ser posible, tienen experiencia usando aplicaciones de naturaleza similar. Este
reclutamiento de participantes, como en cualquier técnica de DCU que implique la
participación de usuarios, sigue tres pasos:
 Determinar la audiencia de la aplicación a evaluar.
 Localizar a miembros representativos de esa audiencia.
 Convencerles para participar.
El que los participantes estén motivados resulta crucial para el éxito de la prueba. Por tanto,
cuando los participantes no sean amigos, familiares o compañeros de trabajo, será muy
importante ofrecerles algún tipo de remuneración o recompensa por su colaboración en la
prueba.
Cada uno de los participantes realizará la prueba por separado y durante cada prueba se
deberá registrar toda aquella información relevante para el posterior análisis del
comportamiento del usuario. Para esto se puede utilizar desde un bloc de notas hasta
grabaciones de vídeo del usuario pasando por aplicaciones que registren las acciones del
usuario sobre la interfaz.
La primera impresión que se lleve el participante al mostrarle el diseño supone una

información muy valiosa sobre su usabilidad. Los usuarios, ante una interfaz, juzgan lo que
ven y toman decisiones intuitivas en muy poco tiempo, juicios y decisiones que resultan de
gran relevancia para entender la capacidad comunicativa del diseño.
Por ello, antes de comenzar formalmente el test se recomienda llevar a cabo el denominado
“test de 5 segundos”. Este método consiste en ofrecer al participante un contexto y objetivos
concretos (por ejemplo: “Te encuentras en época de exámenes y necesitas saber si la biblioteca
estará abierta hoy por la tarde”) y, a continuación, mostrarle la aplicación durante un período
de cinco segundos. Después se le solicita al participante que exprese todo aquello que no
recuerda de la página que ha visto. Esta prueba también se puede llevar a cabo sin ofrecer
objetivo o contexto alguno al participante, mostrándole la página durante cinco segundos y
preguntándole, posteriormente, cuál ha sido su primera impresión, qué contenidos cree que
ofrece o puede encontrar en esa aplicación, permitiéndome de esta forma evaluar la capacidad
autoexplicativa de su diseño visual.
Página 14
A continuación, se puede comenzar la prueba completa en la que se solicitará al participante

una serie de tareas a realizar sobre la aplicación, analizando los errores que comenta, el tiempo
empleado y su satisfacción final una vez finalice la tarea. Es decir, esta es una prueba destinada
a medir tanto la usabilidad objetiva (qué y cómo actúa el usuario), como la usabilidad subjetiva
(cómo de fácil ha percibido la tarea).
Algunos requisitos que deben cumplir las tareas encomendadas al participante son:
 Ser razonables: es decir tareas típicas que un usuario real llevaría a cabo.
 Estar descritas en términos objetivos finales: la tarea debe contextualizarse bajo un
objetivo o motivación mayor.
 Ser específicas: la tarea no puede ser demasiado genérica, sino que debe describir
objetos concretos con el fin de poder comparar los problemas encontrados con los del
resto de participantes.
 Ser factibles: encomendar al usuario tareas irrealizables no aporta información útil sobre
los problemas reales de usabilidad. En estas pruebas lo que se debe evaluar es el diseño
a través de los usuarios, no al contrario.
 Duración razonable: si la tarea requiere demasiado tiempo para ser completada, sería
recomendable descomponerla en subtareas.
Con las pruebas de usuario no solo se pretende detectar en qué momento el usuario se
equivoca o se detiene durante la realización de una tarea, sino también el porqué: qué es
aquello que no entiende o qué le ha llevado a tomar decisiones equivocadas. Una forma de
obtener esta información es mediante el protocolo “think-aloud” o “pensamiento en voz alta”,
que consiste en solicitar al participante que exprese verbalmente durante la prueba que está
pensando, qué no entiende, por qué lleva a cabo una acción o duda. No obstante, este protocolo
tiene algunos inconvenientes como el hecho de contar lo que uno hace y por qué lo hace
inevitablemente la forma en la que se hacen las cosas (en el que el participante primero realiza
la tarea y, una vez finalizada, expresa verbalmente cómo recuerda que ha sido su proceso
interactivo. Una vez los participantes finalicen la prueba y se haya registrado toda la
información pertinente, se procede a analizar los resultados y sintetizarlos en un informe final,
concluyendo qué mejoras necesita el diseño en base a estos resultados.
Aunque los test de usuarios son pruebas de evaluación, no se debe creer por esto que deben
llevarse a cabo una vez finalizado el proceso de diseño, desarrollo e implantación del producto.
Conviene recordar que el DCU es una filosofía de diseño iterativa basada en la mejora
incremental del producto. Por tanto, cuanto más se espere para realizar la primera de las
pruebas, más costoso resultará la reparación de los errores de diseño que se detecten.
En las etapas más tempranas del proyecto, ya que el producto aún no ha tomado forma, los
test de usuarios deben realizarse sobre prototipos (modelos desechables elaborados
específicamente para la evaluación de las decisiones de diseño). Estos prototipos pueden
realizarse en papel, en HTML o mediante aplicaciones específicas como Axure RP, Sketch o
Figma.
Página 15
El primer problema de los test de usuarios es el alto coste que implica tanto el reclutamiento
de los participantes como el tiempo y esfuerzo dedicados a realizar las pruebas y a sintetizar y
analizar los resultados. Para reducir costes se recomienda realizar una evaluación heurística
de forma previa a la prueba con usuarios, una técnica más económica que permite detectar una
gran cantidad de problemas de usabilidad sin necesidad de implicar a usuarios. No obstante,
el coste de las pruebas con usuarios se justifica por el retorno de inversión derivado.
El otro problema es que, al tratarse de pruebas que se realizan en un laboratorio y en las que
los objetivos y tareas se los imponen explícitamente a los participantes, la interacción del
usuario se encuentra descontextualizada, influyendo en su forma de resolver problemas.
Página 16
2.5. ESQUEMAS (WIREFRAMES) Y MAQUETAS (MOCKUPS)
Habitualmente, cuando se habla de maquetas se hace en referencia a modelos en tamaño

reducido de un algún objeto, monumento, edificio, etc. En el caso de herramienta o técnica
para realizar el prototipado de una parte del sistema el concepto de maqueta se basa en un
objeto construido normalmente con materiales muy básicos como por ejemplo madera o cartón
que sirva de herramienta con el fin de evaluar una parte física del sistema.
Los Wireframes son un esquema de una página web o aplicación. Proporcionan una
descripción clara de la estructura de la página, el diseño, la arquitectura de la información, los
flujos, la funcionalidad y los comportamientos previstos. Representa el concepto inicial del
producto, el estilo, el color y los gráficos se reducen al mínimo.
Permite que todas las partes interesadas se pongan de acuerdo sobre dónde se colocará la
información antes de definir detalles visuales o que los desarrolladores empiecen con el
código.
Pero ¿para qué sirven los Wireframes? A continuación, se detallan las características más
importantes de estos esquemas:
 Mantienen el diseño centrado en el usuario. Facilitan la retroalimentación de los
usuarios, promueven conversaciones con las partes interesadas y generan ideas entre
los diseñadores. Hacer tests de usuario durante la etapa inicial de wireframing permite
al diseñador identificar los puntos débiles clave que ayudan a establecer y desarrollar
el concepto del producto. Los diseñadores pueden incitar a los usuarios con preguntas
como "¿Qué esperarías que se escribiera aquí?"
 Son una herramienta para definir el alcance, limitaciones y características del
producto. Los Wireframes aclaran y definen las características del sitio web o aplicación
y ayudan a comunicar ideas de forma visual a los clientes. También permite a todas las
partes interesadas medir cuál es el coste aproximado para cada funcionalidad, planificar
el proyecto, conectar la arquitectura de información del sitio con su diseño visual y
aclarar la funcionalidad de la página.
 Son baratos y rápidos. De hecho, se pueden hacer con papel y lápiz. Además, a la hora
de testear, cuando un producto parece demasiado refinado es menos probable que el
usuario sea honesto sobre sus primeras impresiones. Pero al enseñar la base de este del
diseño de la página, las fallas y los puntos débiles se pueden identificar y rectificar
fácilmente sin un gasto significativo de tiempo o dinero. Cuanto más tarde se testea, en
el proceso de diseño del producto, más difícil será realizar cambios.
Los pilares de los Wireframes son:

 Claridad. Debe responder a las preguntas sobre qué es la página, qué puede hacer el
usuario y si satisface sus necesidades. Es una manera de alcanzar los objetivos sin
distraerse con consideraciones estéticas.
 Consistencia. La facilidad de navegación y las llamadas a la acción claras y consistentes
ayudan a que la experiencia sea exitosa y aumentan la confianza del usuario con la
marca. Si la página es impredecible o tiene botones en lugares inesperados, la confianza
del usuario disminuye.
Página 17
 La simplicidad es clave. Demasiada información, texto o enlaces pueden distraer al

usuario y afectar negativamente la capacidad de los usuarios para lograr sus objetivos.
Se desea que los usuarios encuentren el camino con la menor cantidad de "obstáculos"
posibles.
En cuanto a tipos de Wireframes, se enumeran los siguientes:

 Baja fidelidad. Son representaciones visuales básicas de la aplicación o página web y
sirven como punto de partida del diseño. Tienden a ser bastante toscos, creados sin
escala, cuadrícula o precisión de píxeles. Los Wireframes de baja fidelidad omiten
cualquier detalle que pueda ser una distracción.
1. Ejemplo de Wireframe de baja fidelidad

Entre sus ventajas están:
o Interacción rápida y bajo coste.
o Evitar reprocesos.
o Fácil de crear muchas variantes.
o No tienen píxeles con los que entretenerse.
o Ayuda a la creatividad y al proceso de diseño.
En cuanto a desventajas:
o No está bien definido (colores, formas, animación, fuente, etc.)
o Se necesita mucha imaginación.
o Difícil de ‘testear’ en papel.
o Necesita convertirse en un prototipo digital
 Media fidelidad. Si bien aún evitan distracciones como imágenes o tipografía, se asignan
más detalles a componentes específicos y las características se diferencian entre sí. Se
pueden usar diferentes pesos de texto para separar los encabezados y el contenido,
diferentes tonos de gris para comunicar la prominencia visual de los elementos
individuales etc. Generalmente se crean utilizando una herramienta de wireframing
digital, como Sketch o Figma.
2. Ejemplo de Wireframe de media fidelidad
Página 18
 Alta fidelidad. Ya se diseñan teniendo en cuenta la resolución y la retícula. Las imágenes

pueden ser reales y el contenido en texto también debería ser contenido lo más real
posible. Los Wireframes de alta fidelidad son ideales para explorar y documentar
conceptos complejos como sistemas de menús o mapas interactivos y estimaciones. Los
Wireframes de alta fidelidad deben guardarse para las últimas etapas del ciclo de diseño
del producto.
3. Media fidelidad vs Alta fidelidad.
También conocido como maqueta, el mockup es un recurso que sirve para poner ideas en
práctica simulando el producto final. Mediante un mockup se pueden crear prototipos, evaluar
diseños, colores y tipografías, ver la ruta del usuario en un servicio web y su funcionalidad
previo al diseño final.
Entre las características de un mockup se encuentran las siguientes:

 El mockup permite visualizar y contextualizar tu diseño para ver si el producto
funciona como se pensó y para presentarlo al cliente.
 Los mockups facilitan la comunicación diseñador-cliente mediante la retroalimentación
que el último brinda y mejoran la experiencia de uso de tu producto digital, ya que
señalan cómo se puede perfeccionar el diseño.
 El uso de esta herramienta permite reducir costos, ya que gracias a varias pruebas antes
de empezar la producción, se tendrá la certeza de que el producto final será de excelente
calidad y estará en línea con los requerimientos del cliente.
 Además, estos prototipos permiten enriquecer un portfolio profesional y mostrar a los
clientes potenciales qué experiencia se tiene desde proyectos anteriores.
La creación de un mockup es uno de los pasos primordiales en el design thinking. Se prepara

el mockup cuando se considera que la aplicación o página web está lista para ser testeada
(mockup inicial) o cuando está completa, previo a su lanzamiento (mockup final).
Página 19
Los tipos de mockups se dividen según las fases en las que se encuentra un proyecto.
Fase de exploración:
 Comportamiento: Se enfoca en cómo actúa la función específica de una página o una
aplicación web; por ejemplo, permite ver cómo funcionará el botón “olvidé mi
contraseña” al momento de ingresar a la aplicación.
 Estructura: Explora aspectos relacionados al diseño: se puede visualizar la combinación
de paletas de colores, la tipografía de los botones, etc.
Fase de evolución y de resultado:

 Exploración: Este prototipo se descarta una vez que cumple su propósito. Se puede usar,
por ejemplo, para probar diversas paletas de colores en una aplicación móvil.
 Evolución: El mockup evoluciona gradualmente hasta transformarse en la versión final.
Página 20
2.6. PAUTAS DE DISEÑO
A la hora de desarrollar un proyecto de creación de un software, será necesario tener en cuenta,

en todas las fases de su ciclo de vida, la creación de las interfaces que facilitarán la interacción
con los usuarios. En cada una de las fases se tendrán que tomar decisiones referentes a ellas,
en mayor o menor medida, que tendrán un efecto decisivo en el éxito del proyecto.
Para desarrollar las pautas de diseño de las interfaces de usuario de una aplicación informática,
se deberán tener en cuenta, a lo largo de todas las fases del proyecto, diferentes elementos
como la estructura, el aspecto y los elementos de las interfaces de usuario.
Para establecer las pautas de diseño, también será necesario conocer y entender el tipo de
usuario para el que se desarrolla el software y, en definitiva, las interfaces con las que
interactuará. Estos podrán ser usuarios expertos, usuarios intermedios, o usuarios noveles, sin
mucha experiencia:
 Usuario experto. Dentro de los usuarios expertos todavía se puede realizar una segunda
clasificación. Hay que diferenciar entre el usuario experto en el uso de las tecnologías
de la información y el usuario experto en las reglas de negocio en las que se ubica el
software. Sea como fuere, un usuario experto no necesita unos menús muy intuitivos,
ni unos iconos con unas explicaciones muy claras, sino que con la experiencia y el
sentido común puede utilizar una interfaz que se preocupa más de ofrecer mucha
funcionalidad que mucha información. Por ejemplo, para este tipo de usuario experto
es posible ofrecer muchas funcionalidades con muchos menús y submenús o con mayor
necesidad de pasos hasta llegar a la opción deseada. Este usuario tendrá la capacidad
de encontrar la opción que necesita y podrá navegar por las opciones sin demasiados
problemas.
 Usuario intermedio. Los usuarios intermedios se encuentran entre los expertos y los
novatos. En este caso, no se tratará de conocimiento de negocio. Pueden tener un nivel
medio de conocimiento o uso de las TIC. Esto hará que no se necesite ofrecer tantas
facilidades ni información como a los usuarios noveles, pero sí que habrá que facilitarles
el trabajo tanto como sea posible.
 Usuario novel. Un usuario sin mucha experiencia (en el uso de las TIC o en
conocimientos sobre las reglas del juego del negocio al que pertenece el software)
necesita una interacción con el software mucho más guiada, con mucha más ayuda,
tanto textual como gráfica. Un usuario novel necesita ver unos iconos mucho más
explícitos, que le faciliten la comprensión de las opciones. También necesita tener una
ayuda muy accesible y fácil de entender, como, por ejemplo, mostrar pequeñas frases o
informaciones cuando el ratón pasa por encima de un icono, indicando su utilidad.
¿Cómo saber cuándo una aplicación debe diseñarse pensando en usuarios expertos, usuarios
intermedios o usuarios novatos? Esta pregunta no es sencilla de responder.
Página 21
Una aplicación informática desarrollada desde cero puede estar inicialmente planteada para
usuarios novatos. Si los usuarios utilizarán la aplicación de forma esporádica, o bien, si se va
a producir una rotación de usuarios muy grande en la utilización de la aplicación, entonces
ésta deberá diseñarse para usuarios novatos.
Si los usuarios siempre van a ser los mismos, al cabo de cierto tiempo de uso del software, se
podrán considerar usuarios expertos y, tal vez, reclamarán otro tipo de interfaz. Un ejemplo
sería una interfaz de un TPV que utilizarán diferentes camareros o encargados a lo largo del
día en un restaurante. Lo mismo ocurrirá con las interfaces web. Se deberá conseguir un
compromiso entre diseño agradable, funcionalidades completas y facilidad de uso. Por todo
ello se puede concluir que habrá que hacer partícipes a los usuarios implicados en el proyecto
de la decisión del tipo de interfaz que se tendrá que diseñar.
2.6.1. PAUTAS DE LA ESTRUCTURA DE LA INTERFAZ DE USUARIO
Cuando se habla de la estructura de las interfaces de usuario hay que referirse a todos los
elementos que lo compondrán y su ubicación dentro de él. Este conjunto de elementos y su
ubicación formarán la estructura de la interfaz.
Los elementos más habituales que se pueden encontrar en la estructura de las interfaces, y que
permitirán la comunicación entre el hombre y la máquina, son los siguientes: menús, ventanas,
cuadros de diálogo y atajos de teclado.
2.6.1.1. Menús
El primer elemento que se encontrará en una interfaz será el menú o menús, los cuales guiarán
por todas las posibilidades que ofrecerá la aplicación. En función del tipo de aplicación y de la
interfaz correspondiente, estos menús serán más o menos necesarios y más o menos
profundos.
Por ejemplo, continuando con el caso de una interfaz que se pueda utilizar en bares o
restaurantes, será necesario que situarse y adaptarse a las necesidades que puedan tener para
entender que, muy probablemente, existirán interfaces a utilizar con pantallas táctiles o con
terminales portátiles. Si se trabaja con pantallas táctiles no es productivo añadir menús de
texto, ya que su accesibilidad será bastante complicada. En cambio, las opciones representadas
con unos iconos grandes permitirán utilizar las interfaces de forma más adecuada.
Los menús son una lista ordenada de opciones que se mostrarán en la interfaz, con posibilidad
de contener submenús en cada opción, que facilitarán la interacción con el usuario de una
aplicación, ofreciéndole la posibilidad de navegar por la interfaz y de escoger la funcionalidad
que desea utilizar en un momento determinado. La importancia de los menús en las interfaces
radica en que los usuarios finales de las aplicaciones serán los responsables de su utilización y
deberán tener la autonomía en su uso, sin la necesidad de una comunicación continua con el
programador o diseñador.
Página 22
A continuación, se pueden ver algunos ejemplos de distintos tipos de menús que se pueden
utilizar en las interfaces de una aplicación informática.
Menú de barra
Es el menú más habitual, tanto en aplicaciones específicas como de uso genérico, como pueden
ser de navegación por Internet o aplicaciones ofimáticas.
Este menú suele encontrarse en la parte superior de la aplicación. Cada menú contiene otro
menú desplegable y dentro de éstos, en algunas opciones, habrá otros menús desplegables que
se podrían llamar menús en cascada. Las opciones a las que se podrán acceder serán todas las
que ofrecerá la aplicación informática, repitiendo algunas de las que han ofrecido los iconos
que se encuentran en las barras de herramientas.
4. Menú desplegado.
Normalmente, las aplicaciones de uso genérico se pueden personalizar según los gustos o
necesidades de los usuarios, al igual que las paletas o barras de herramientas u otras
funcionalidades de las aplicaciones. Esto dará la posibilidad de elegir qué opciones se quieren
ver o no en los menús, o que, en ocasiones, las mismas aplicaciones muestren sólo las opciones
más utilizadas de manera prioritaria. En otros casos, incluso podrá seleccionarse el idioma de
estos menús. Estas posibilidades son mucho más complicadas de encontrar en las aplicaciones
hechas a medida, salvo que el usuario final las haya establecido como requisito.
Página 23
Barras de herramientas o paletas de herramientas
Este otro tipo de menú es complementario del anterior. En las aplicaciones se suelen encontrar
ambos tipos de menús. El 90% de las veces los usuarios utilizarán los menús de las barras de
herramientas, dejando para casos muy concretos la necesidad de acceder a los menús de barra.
5. Barra de herramientas
Como se ha comentado, en algunos casos concretos puede llegar incluso a sustituir el menú de
barra, como en los ejemplos de las aplicaciones desarrolladas para pantallas táctiles o para
dispositivos móviles.
Será importante seleccionar correctamente los iconos a utilizar en las barras de herramientas
para que se interpreten correctamente. También es necesario indicar con la ayuda de pequeñas
explicaciones el significado de los iconos cuando se pase el ratón por encima.
En muchas aplicaciones, las barras de herramientas se pueden configurar; de esta forma el

usuario podrá escoger qué funcionalidades puede tener a mano porque son más habituales y
cuáles no le harán tanta falta.
Menús contextuales
El menú contextual es la ventana que se abrirá, en determinados sistemas operativos, cuando

se haga clic con el botón secundario del ratón (botón derecho o botón izquierdo en función de
cómo esté configurado) sobre un espacio concreto de una aplicación. Normalmente son menús
que permanecerán ocultos al usuario y que el usuario activará sobre un objeto determinado.
Los menús contextuales se abrirán con una ventana flotante junto al objeto.
Por ejemplo, si se ha empezado a trabajar con un sistema operativo y se hace clic con el botón
derecho del ratón en el escritorio, podrán verse una serie de opciones que permitirán trabajar
con su configuración, ofreciendo opciones como crear nuevos elementos (carpetas, archivos de
ofimática, etc.) o de ir a la configuración de otros elementos del sistema.
En caso de utilizar el menú contextual en un entorno de sistema operativo, se puede ver que
las opciones que es posible escoger crecen a medida que se instalan programas, de modo que
será un elemento vivo.
Muchas aplicaciones de uso genérico ofrecen menús contextuales. Por ejemplo, las aplicaciones
ofimáticas como OpenOffice Writer. Como puede verse en la el menú contextual ofrecerá unas
opciones en función del lugar concreto de la aplicación en el que se haga clic con el botón
derecho. El menú contextual será distinto si se genera en las barras de herramientas que si se
Página 24
hace en el texto que se está editando. A su vez, se encuentra que en un mismo objeto un menú
contextual tendrá unas opciones en un momento determinado y otras en otro momento. Esto
será así porque un objeto o un elemento de la interfaz puede pasar por diferentes estados y
contextos a lo largo de la ejecución del software.
6. Menú contextual
De esta forma, un menú contextual ofrecerá las funcionalidades que se pueden aplicar a un
objeto en un momento determinado.
¿Para qué servirá el menú contextual? Facilitará el trabajo más habitual con la aplicación que
se esté utilizando. Al abrir un menú contextual aparecerá una ventana con las funcionalidades
relacionadas con la ubicación del puntero (sobre qué objeto se encuentre) en el momento de
pedir el menú.
Menús desplegables
La lista desplegable es un elemento GUI que podrá utilizarse en las interfaces, pero también
será un tipo de menú. En este apartado se van a tratar los menús desplegables como una opción
más para elegir entre una lista de alternativas.
Hay que diferenciar entre los menús desplegables estáticos y los dinámicos. Los estáticos
ofrecen un número determinado de opciones que se habrán programado manualmente, que
no se modificarán a menos que se modifique el software desarrollado. Los menús desplegables
dinámicos tomarán las opciones de una base de datos o de un archivo. Si se ha modificado la
información externa, los menús ofrecerán unas opciones diferentes en distintos momentos de
ejecución.
Página 25
Menús de pantalla completa
Una opción cada vez más en desuso es la de los menús de pantalla completa. Estos menús eran
más habituales con versiones más antiguas de los sistemas operativos, pero todavía pueden
encontrarse en algunas aplicaciones o en determinados entornos de trabajo, como las
aplicaciones para dispositivos móviles. Para entender un ejemplo de menú de pantalla
completa se puede hacer referencia a los menús de las BIOS de las placas madre.
7. Menú de pantalla completa
Este tipo de menú monopoliza toda la pantalla y sólo permite interactuar con ella hasta que no
se seleccione la opción de salir. Normalmente, los menús de pantalla completa no permiten la
convivencia con otros menús como los contextuales o los de barras de herramientas.
Una vez vistos los diferentes tipos de menús con los que se puede trabajar, es necesario ver
algunas indicaciones de diseño de estos a tener en cuenta a la hora de desarrollar las interfaces.
Es importante seguir los estándares de diseño del entorno en el que se utilizará la aplicación;
es decir, en función del sistema operativo con el que se trabaje, habrá que adaptarse a las pautas
de diseño establecidas por el sistema operativo y por las aplicaciones de uso genérico
habituales para este entorno.
Página 26
En términos de usabilidad del menú se tendrán en cuenta algunos aspectos que pueden
acarrear problemas si no se diseñan correctamente: normalmente los usuarios sólo verán el
primer nivel de jerarquía del menú y no el resto de las opciones. Si deben acceder a un segundo
o tercer nivel, tendrán que memorizar dónde se encuentra, lo que puede provocar problemas
con usuarios de una determinada edad o con problemas psicomotores.
Otras recomendaciones para seguir un estándar en el diseño de menús podrían ser:
 Utilizar una opción de ayuda en los menús de barra o un cuadro de diálogo con los
datos de contacto de los desarrolladores del software.
 Se debe llegar a un compromiso entre los menús y su número de opciones y submenús.
No se puede hacer una jerarquía tan grande que después cueste recordar dónde está
una opción.
 Los menús no pueden ocupar mucho espacio en la interfaz.
 Los términos deben elegirse de forma clara y concisa en las opciones de los menús y en
los iconos de las barras de herramientas.
 Los menús deben diseñarse de forma visible atendiendo a la mejor usabilidad por parte
de los usuarios.
 Debe permitirse que los usuarios personalicen, en la medida de lo posible, los menús.
 Los menús deben ser los adecuados tanto para usuarios expertos como para usuarios
novatos.
2.6.1.2. Ventanas
El sistema más utilizado en la actualidad en aplicaciones informáticas es el sistema de

ventanas. Este sistema sigue las características de los sistemas operativos que permiten un
trabajo con más de una ventana (o con más de una aplicación) a la vez siguiendo la filosofía de
WYSIWYG (What You See Is What You Get). Este sistema permite el acceso de cualquier
usuario al ordenador (excepto usuarios con deficiencias visuales).
En términos informáticos, una ventana es un espacio o área que contiene una interfaz de
usuario que puede permitir la entrada de datos y muestra la salida del sistema. Las ventanas
implementan en concepto WIMP (Window, Icon, Menu, Pointer).
Las ventanas se pueden clasificar según varios tipos: las ventanas de utilidad, las ventanas de
aplicación y las ventanas emergentes o pop-up. Las ventanas de utilidad son ventanas
pequeñas que aportan barras de herramientas u otras informaciones a las ventanas de
aplicación, ofreciéndoles un complemento. Las ventanas de aplicación contienen los menús de
barra y las áreas con los documentos con los que se va a trabajar. Son las principales ventanas
de las aplicaciones. Las ventanas emergentes también son ventanas complementarias a las
ventanas de aplicación. Llevan a cabo una función de interactuación con el usuario ofreciendo
alguna información o pidiendo algún dato.
Página 27
Algunas de las propiedades más importantes de las ventanas son:
 Las ventanas pueden cambiar de tamaño, haciéndose mayores o menores dentro del
área de trabajo.
 Las ventanas se pueden desplazar por la pantalla tanto de forma horizontal como
vertical, sólo arrastrándolas por su barra de título.
 Las ventanas pueden estar visibles o no visibles (ocultas), aunque continúen abiertas o
incluso trabajando. Si una ventana se minimiza, puede recuperarse desde la barra de
tareas del sistema operativo.
2.6.1.3. Cuadros de diálogo
Los cuadros de diálogo son un tipo de ventana especial que permite ofrecer al usuario una
información determinada o recoger de éste una respuesta a alguna acción concreta de la
aplicación.
Tipos de diálogos:
 Diálogos modales: mediante ventanas esenciales, de respuesta obligada.
 Diálogos no modales: mediante ventanas no esenciales, de respuesta no obligada para
los usuarios.
También se pueden clasificar los cuadros de diálogo en distintos tipos: los esenciales, los de
tipo alerta o los que permiten seguir trabajando con un programa.
Los cuadros de diálogo esenciales son interacciones obligatorias para los usuarios. Los cuadros
se abren de forma automática o con alguna acción del usuario, para indicar un error o para
prohibir el acceso a una determinada opción o para indicar la introducción incorrecta de algún
tipo de dato. Si no se contesta en el cuadro, no se puede seguir trabajando.
Los cuadros de diálogo no esenciales no interrumpen el funcionamiento de la aplicación, como

en los anteriores. Pueden encontrarse dentro de la misma ventana de la interfaz o abrirse en
una nueva ventana, pero sin la obligatoriedad de responder al mensaje para seguir trabajando.
Los cuadros de diálogo de tipo alerta son los que dan una información o un mensaje después
de la interacción del usuario, y éste deberá seleccionar la opción de continuar para poder
trabajar. No son esenciales, pero se tipifican como un tipo independiente por su característica
informativa de alertas.
2.6.1.4. Atajos de teclado
Otros elementos importantes en el diseño de las interfaces de usuario son los atajos de teclado
que se pueden establecer para acceder a determinadas funcionalidades. Un atajo de teclado es
una combinación de teclas o de teclas y clic de ratón que permite acceder a una funcionalidad
de forma directa sin tener que pasar por el menú de barra o las barras de herramientas.
Página 28
Un ejemplo universal de atajo de teclado es el que permite copiar un texto seleccionado

(Control+C) y pegarlo en otro sitio de la interfaz (Control+V)
Es importante conocer el entorno de ejecución de las interfaces diseñadas. Un entorno con un

sistema operativo Windows ofrecerá una serie de atajos de teclado muy conocidos por usuarios
expertos. Por ejemplo, independientemente de la ventana usada y de la aplicación, con
Control+Esc, se accederá al menú Inicio de Windows de forma prioritaria.
También hay atajos de ratón. Por ejemplo, si se hace clic dos veces en la barra de título de
cualquier ventana, ésta se maximizará.
Los atajos de teclado (y de ratón) permiten trabajar de forma más rápida y eficiente con el
sistema informático y, más concretamente, con la aplicación con la que se esté trabajando. Es
importante dotar una aplicación de atajos para las funcionalidades que se utilicen con mayor
frecuencia, estableciendo estos con los propios usuarios en la toma de requisitos.
2.6.2. PAUTAS DEL ASPECTO DE LA INTERFAZ DE USUARIO
El aspecto de las interfaces es tanto o más importante que la estructura y otros elementos
interactivos. A la hora de diseñar las interfaces de usuario es importante, como se ha visto, la
estructura, con componentes como los menús, ventanas, cuadros de diálogo y atajos de teclado.
Escoger los elementos y dónde deben ir es una tarea importante.
En el diseño del aspecto de las interfaces de usuario hay que fijarse en temas como los colores,
las fuentes que se utilizarán para los diferentes apartados de la interfaz, los iconos y la
distribución de los elementos.
Debe tenerse en cuenta que para tratar todos estos aspectos no quedará clara la línea de
separación entre el desarrollador de software o de aplicaciones informáticas y el diseñador.
Muchas empresas delegan estas funciones a la misma persona, pero poco a poco esta tarea
empieza a diferenciarse y se contrata a una o más personas especializadas en diseño,
específicamente para este apartado. El diseño de la interfaz de usuario es un elemento muy
importante (en algunos casos podrá considerarse crítico) en el producto final a entregar. Hay
que tener en cuenta que algunas decisiones serán muy personales, pero habrá que seguir unas
indicaciones universales.
2.6.2.1. Colores
Los colores es lo primero que aparecerá cuando la vista se fije en un objeto o en una aplicación
informática o página web. Esta primera visión o interrelación de los usuarios con las interfaces
es muy importante, prácticamente crítica. Un usuario no dejará de utilizar una interfaz por
razones de discrepancias con los colores, pero, tal vez, le obligará a realizar cambios si los
puede pedir.
Página 29
Las paletas de colores darán la opción de elegir entre una amplia variedad de colores para
todos los elementos de la interfaz, tanto para el fondo como para los iconos y las letras. Incluso
se podría elegir utilizar una fotografía de fondo.
A modo de ejemplo, en la figura se muestran las opciones a la hora de elegir colores con el
programa Paint. Esta paleta está basada en el modelo RGB el cual codifica cada color en función
de la intensidad de los colores primarios que se utilizan para formarlo. Los colores primarios
son el azul, el verde y el rojo. Por ejemplo, el color negro será (0,0,0), es decir, la ausencia de
color. El color blanco será todo lo contrario, (255,255,255), los tres colores en el nivel máximo.
Esto ofrece la posibilidad de elegir entre más de dieciséis millones de colores.
8. Paleta de colores de Paint
Se puede ver que, además de poder escoger la intensidad de cada color primario, se da la
opción de elegir la intensidad de tres aspectos del color:
 Tonalidad: tipos de longitud de onda de la radiación.
 Brillo: intensidad subjetiva del color.
 Saturación: pureza del color.
Por ejemplo, la luz blanca no tiene tonalidad, pero sí brillo.
Existen otros modelos de colores, como el modelo CMYK (del inglés Cyan, Magenta, Yellow y
Key/blacK). Este modelo, que se utilizará más en la impresión en colores y está basado en la
absorción de la luz. Otro modelo, parecido al CMYK, es el RYB (Red, Yellow, Blue) utilizado
de forma más común en las bellas artes.
Si se habla de colores en el diseño, hay que tener en cuenta varios aspectos. Lo habitual es
encontrar contraste entre los colores para poder entender mejor la información. Por ejemplo,
se utilizará texto con letras oscuras sobre un fondo más claro, o al revés. También habrá que
Página 30
seguir una coherencia en la elección de los colores, intentando relacionar un apartado de la

aplicación o un conjunto de funcionalidades con un color y vincular ese color con todo lo que
tenga que ver con las opciones relacionadas con el apartado (por ejemplo, la gestión de los
usuarios o la gestión de los proveedores, etc.).
Otro tema importante a la hora de escoger los colores es el sistema operativo para el que se va
a desarrollar la aplicación. Hay que intentar adaptarse a las características del sistema
operativo, siguiendo su tipo de ventanas, iconos, colores, etc.
También debe tenerse en cuenta la resolución de la pantalla en la que se desarrollará la interfaz.

En los primeros sistemas operativos Windows, el tamaño habitual era el de 640×480 píxeles
con 256 colores. Hoy en día, prácticamente todos los desarrolladores trabajan con resoluciones
muy superiores.
Existen una serie de normas para la utilización efectiva del color en las interfaces gráficas de
usuario. De seguirlas, el diseño de la interfaz será correcto desde un punto de vista cromático.
Es muy difícil dar un conjunto de normas cerradas, debido a la gran cantidad de variables que
influyen en la representación del color y su posterior percepción. Algunas de estas normas son:
 Evitar la visualización simultánea de colores complementarios muy saturados.

 Evitar el color azul puro para el texto o líneas muy finas: el sistema visual de los seres
humanos no está preparado para recibir estímulos con una longitud de onda muy corta.
El azul va bien para el fondo, pero no para el texto.
 Los usuarios de mayor edad necesitan colores con mayor luminosidad para poderlos
distinguir.
 Los colores se perciben diferentes si las condiciones de iluminación ambiental cambian:
con la luz del sol, de bombilla incandescente o de fluorescente, los colores se perciben
diferentes.
 La magnitud de un cambio que se detecte en un color cambia a lo largo del espectro: los
pequeños cambios en rojos y verdes son más difíciles de detectar que en amarillos o
azules verdes.
 Debe evitarse el uso de una gama de colores basados en una sola tonalidad: los usuarios
con problemas de visión los percibirán como iguales.
 La luminosidad no es igual al brillo: dos colores con la misma luminosidad pueden ser
percibidos con distinto brillo dependiendo de la tonalidad.
 Diferentes tonalidades tienen distintos niveles de saturación: por ejemplo, el amarillo
siempre parece estar menos saturado que el resto de los colores.
 No todos los colores son igualmente legibles: lo normal es leer en negro sobre blanco;
por lo que se obtendrá la máxima legibilidad con fondos claros y letras oscuras.
 Los colores se interfieren mutuamente: la percepción de un color cambia dependiendo
de los colores que le rodean.
 Hay que tener en cuenta la diferencia entre el color de pantalla y el color impreso: los
dispositivos visualizadores y los de impresión no visualizan los colores de la misma
Página 31
forma (uno utiliza RGB y el otro CMYK). Hay que tener en cuenta que un color que se
está utilizando en pantalla puede no tener nada que ver con el mismo color impreso.
 Se deben agrupar los elementos relacionados sobre un mismo color de fondo.
 Los colores similares expresan significados similares: se pueden mostrar relaciones
entre elementos asignándoles tonalidades similares o saturaciones distintas de la misma
tonalidad.
 Los colores luminosos y saturados atraen la atención del usuario.
 Hay que ordenar los colores por su posición en el espectro: si es necesaria una
utilización extensiva del color en una interfaz, debe hacerse de forma ordenada. La
forma más natural es la del espectro, representada por el mnemotécnico inglés ROYG-
BIV (Rojo, Naranja, Amarillo, Verde, Azul, Índigo o Añil y Violeta).
Por último, también debe tenerse en cuenta si algún usuario puede tener problemas visuales
con ciertas combinaciones de colores. Esto es más fácil de saber si el proyecto se desarrolla para
un determinado grupo de usuarios. Si, en cambio, se desarrolla para usuarios no conocidos o
cualquier persona puede ser usuario, entonces habrá que tenerlo en cuenta de una manera más
genérica.
2.6.2.2. Fuentes
Las fuentes que se utilizarán en una interfaz también es otro elemento importante, tanto por el
tipo como por el tamaño de la fuente. Se trata del formato que se da a los caracteres que
compondrán los mensajes de texto para interaccionar con el usuario.
Hay muchos tipos de fuentes y muchas posibilidades de utilizarlas, pero hay que tener cuidado
con que estas fuentes estén incorporadas al sistema operativo o que no sean compatibles, lo
que puede hacer que no se puedan utilizar de forma adecuada. Para poder escoger las fuentes
se deben tener muy en cuenta los sistemas operativos o los entornos de ejecución de las
aplicaciones desarrolladas. Como se ha comentado en el apartado que hace referencia al color,
será necesario adecuarse a las características y/o a las fuentes del sistema operativo y procurar
estar en sintonía.
Además, como se ha dicho anteriormente, habrá que utilizar fuentes llamadas básicas para que
sean aceptadas por cualquier entorno de trabajo o sistema operativo. En caso de utilizar una
fuente no básica, deberá empaquetarse con la aplicación desarrollada e instalarla con el
software de instalación.
La tipografía es la apariencia que tiene el texto y es el elemento de diseño gráfico más básico
de una interfaz. Algunas de sus características son las siguientes: la fuente, el cuerpo, el serif
el peso y la inclinación:
 Fuente. Es el tipo de letra. Por ejemplo: Helvética, Times, Brush Script, etc.
 Cuerpo. El cuerpo es el tamaño de la letra y se mide en puntos o picas (1 pica = 12
puntos).
Página 32
 Serif. El serif es una herencia romana de la escritura con cincel sobre piedra y consiste
en una pequeña proyección al final de los palos de las letras. Las letras pueden ser con
o sin serif.
 Peso. El peso hace referencia al grosor de la letra. Ésta puede ser en negrita o normal.
 Inclinación. Según la inclinación, la letra puede ser vertical o cursiva (llamada también
itálica).
La legibilidad del texto se ve afectada por distintos factores:

 Proporcionalidad. Es una característica de la mayoría de las fuentes la cual consiste en
asignar un espacio horizontal a cada carácter de acuerdo a su anchura. Las fuentes que
asignan a todos los caracteres el mismo espacio se llaman fuentes de ancho fijo (en las
que un carácter como una y ocupa el mismo espacio que un carácter como una m).
 Tamaño de la fuente. Cabe recordar que el texto en una pantalla se lee un 25% más
despacio que en papel. Un texto normal tiene como tamaño apropiado 10 puntos. Una
de 12 puntos se lee aún mejor. Utilizando diferentes tamaños se pueden conseguir
jerarquías de texto (títulos, subtítulos, cabeceras, etc.).
 Mayúsculas/minúsculas. La mezcla de mayúsculas y minúsculas hace los textos más
legibles. Esto se debe a que cuando en una lectura, se reconocen las palabras familiares
por la forma y no se leen carácter a carácter.
 Espaciado e interlineado. El espaciado, tanto de carácter como de palabra, depende de
la fuente que se utilice y es recomendable no tocarlo. La modificación del espaciado
puede justificarse en situaciones determinadas como en títulos o etiquetas de botones,
pero rara vez en el texto normal. En cuanto al interlineado, hay que tener presente que
cuanto más pequeño sea más difícil será la lectura porque costará encontrar el comienzo
de las líneas.
 Longitud de la línea. Si la longitud de la línea de texto es demasiado larga, se hace difícil
encontrar el comienzo de la siguiente línea, y si es más larga de lo que se puede abarcar
con el movimiento del ojo obligará a mover la cabeza, cosa que provocará fatiga. Los
textos impresos en un libro deben tener una longitud de unos sesenta caracteres, y los
de una columna de diario, de unos treinta caracteres.
 Justificación. La justificación es la inserción de espacios extra entre las palabras para
alinear las líneas tanto a la derecha como a la izquierda. Esta técnica, aunque
visualmente más estética, ralentiza la lectura.
 Maquetación. La maquetación es la distribución de los distintos párrafos de texto (y
otros elementos gráficos) en un espacio determinado. La primera impresión al abrir un
libro, ejecutar un programa o visitar una web se debe a la maquetación. La maquetación
puede hacer que quien la visite, se quede en la web o que se vaya a otra de contenidos
similares, pero con una presentación visual más atractiva.
 Márgenes. Hay que evitar el “síndrome del procesador de textos”, que consiste en
escribir de lado a lado de la página sin dejar márgenes ni a la derecha ni a la izquierda.
Es necesario dejar márgenes generosos de acuerdo con su maquetación y con la longitud
de la línea.
Página 33
 Distinción tipográfica. Es necesario utilizar los cambios tipográficos de cursiva, el

cambio de fuente y negrita sólo cuando aporten realmente información y sin abusar de
ellos. El uso excesivo de fuentes y recursos tipográficos se llama corrientemente fontitis.
2.6.2.3. Iconos
Los iconos que se utilizan en las interfaces también son importantes en la interacción con los
usuarios. Ya se ha hablado de algunos iconos en el apartado de los menús, cuando se hacía
referencia al de barras de herramientas. Los iconos que se utilizan en las interfaces también
son importantes en la interacción con los usuarios. Se hablará del mismo tipo de iconos con las
mismas funcionalidades, pero en este apartado se pondrá más el foco en los iconos de acción
de las interfaces de usuario.
Los iconos ofrecen la representación de una unidad de significado. Si esta unidad de

significado quisiera expresarse con texto, ocuparía mucho más espacio del ocupado utilizando
un icono. Estas unidades de significado pueden ser ideas, conceptos, acciones u otros. Por
ejemplo, se puede tener el icono que representa con un dibujo de un disquete la acción de
grabar un trabajo realizado o un documento. De esta forma es posible representar más acciones
con un espacio más limitado, además de ofrecer una usabilidad mejor, más directa, más rápida
e intuitiva, siempre que los iconos que se utilicen sean conocidos.
Cuando un usuario utiliza de forma repetitiva una aplicación, los iconos y su significado se
memorizan fácilmente. En cambio, el uso de una aplicación por parte de muchos usuarios
diferentes o de un mismo usuario de forma no muy continuada implicará la necesidad de
utilizar iconos muy fácilmente reconocibles para los usuarios, que sean similares a los que se
utilizan de forma habitual en otros sistemas operativos u otras aplicaciones muy utilizadas.
Hay interfaces en las que el aspecto y el impacto visual es muy importante, prácticamente son
unos de los objetivos de la interfaz. Es necesario que la interfaz llame la atención del usuario
de manera muy impactante. En estos casos, también es muy adecuado utilizar iconos. El
usuario conocerá el funcionamiento de la interfaz a medida que descubra los iconos y su
significado.
A la hora de diseñar interfaces con iconos, también hay que tener en cuenta las limitaciones
que pueden presentar. En ocasiones, la misión de los iconos es difícil al intentar representar
una acción o idea difícilmente representable. Si hay acciones similares es complicado encontrar
iconos que diferencien con exactitud los matices que harán que las acciones sean distintas.
Además, la interpretación por parte de los usuarios será muy personal y puede dar pie a
cometer errores. Por esta razón, se recomienda no identificar con iconos acciones críticas de
una aplicación.
A la hora de diseñar o escoger iconos, se debe tener en cuenta que los hay de diferentes tipos.
Los que se basan en la analogía ofrecen imágenes que intentan parecer lo que quieren
Página 34
representar. Los que se basan en las muestras simbolizan elementos que intervienen en lo que
se quiere referenciar. Los basadas en los símbolos son representaciones más abstractas. Los
iconos arbitrarios reclaman que el usuario aprenda su significado.
Es necesario hacer un uso razonable de los iconos, sin utilizar el recurso más de lo
recomendable. La velocidad de reconocimiento de los iconos acaba siendo similar a la del texto,
pero nunca es superior. De hecho, se producen más errores utilizando los iconos que con el
uso de los menús de texto. Estos errores pueden influir en el aprendizaje de la aplicación por
parte del usuario o, incluso, en su rechazo o falta de satisfacción.
2.6.2.4. Distribución de los elementos
Llegados a este punto, se ha hablado de diferentes conceptos importantes en el aspecto de una

interfaz de usuario, como pueden ser los colores, fuentes e iconos. En el apartado anterior se
han visto diferentes elementos de la estructura de las interfaces como los menús, ventanas,
cuadros de diálogo y atajos de teclado. Ahora toca hablar de cómo se distribuyen estos
elementos por la interfaz.
La distribución de los elementos debe permitir un uso de las interfaces y un aprendizaje óptimo
de éstas a los usuarios. Es necesario decidir la forma de presentar los menús de texto, las barras
de herramientas, los iconos, los cuadros de diálogo, etc. y su ubicación en la interfaz. Los
elementos deben presentar una distribución uniforme, teniendo en cuenta la agrupación de
funcionalidades relacionadas y las zonas de la pantalla que los usuarios van a visualizar más.
Los objetivos de la distribución de los elementos por la interfaz son los siguientes: conseguir
que la interfaz sea fácil de usar, fácil de aprender, segura, fiable y efectiva a la hora de realizar
las acciones necesarias para una aplicación. Además, debe ser consistente.
Al igual que se ha ido comentando a lo largo de este apartado, es interesante adaptar la interfaz
desarrollada al entorno de trabajo de esta, distribuyendo los elementos de forma análoga a
otras aplicaciones o interfaces del sistema operativo.
Todo lo que el diseñador pone en el diseño de una interfaz debe estar justificado, debe tener
una consistencia y debe seguir una organización espacial. Las interfaces de un navegador de
Internet, por ejemplo, contienen unos ejemplos que están dispuestos de forma determinada en
el espacio que será familiar para los usuarios. Esta distribución obedece a unas normas de
diseño de GUI, ofreciendo una coherencia externa con otros programas similares que son
conocidos.
Algunos autores, como el artista y diseñador de la Bauhaus, Josef Albers, han hablado así del
diseño: “Diseñar es planificar y organizar, ordenar, relacionar y controlar. Resumiendo,
comprende todo lo que sea ir en contra del desorden y la casualidad. Por tanto, muestra una
necesidad humana y describe el pensamiento y la actuación del ser humano”. Otro concepto a
Página 35
tener en cuenta es el número mágico de Miller. Todos los componentes gráficos de una
interfaces de una aplicación informática (menús, áreas de datos, iconos, diálogos, tableros o
imágenes) están dispuestos sobre una retícula imaginaria que es respetada a lo largo de la
aplicación (los menús no cambian de sitio ni tampoco lo hace el área de visualización de datos,
por ejemplo).
El tamaño, distribución y número de divisiones de la retícula es crucial para la usabilidad de

la interfaz. Estos parámetros están determinados por el tipo de información a visualizar, por
la resolución de la pantalla y por las condiciones de visualización (no es lo mismo un cajero
automático que un móvil inteligente o una tableta).
Por lo general, el número de divisiones de la retícula sigue el recurrente número mágico de

Miller de 7 +/- 2, que es el número máximo de elementos que una persona puede retener en la
memoria de corto plazo. El mismo esquema se puede aplicar recursivamente para cualquier
elemento, sea un panel de control o una barra de menús, una barra de iconos o un diálogo.
Otro aspecto a tener en cuenta en la organización espacial de la información son las relaciones
entre los distintos elementos de información. Los elementos de información relacionados por
el contenido también deben estar visualmente relacionados.
2.6.3. PAUTAS DE LOS ELEMENTOS INTERACTIVOS DE LA INTERFAZ DE USUARIO
Hay otros muchos elementos que se utilizan en las interfaces de usuario, además de los que se
han comentado hasta ahora. Tanto los menús como las ventanas, los cuadros de diálogo o los
iconos son elementos que facilitan la interacción entre el usuario y la interfaz. Estos elementos
permiten la navegación por la aplicación, muestran las alternativas que tiene el usuario y le
ofrecen la posibilidad de ejecutar algunas acciones. Sin embargo, son siempre informaciones
estáticas. También existen otros elementos que ofrecerán otro tipo de información al usuario,
más dinámica, por ejemplo, con el resultado de los datos obtenidos a partir de una consulta u
ofreciendo la posibilidad de añadir información a la ya almacenada. Entre estos otros
elementos se encuentran los botones de comando, los botones de opción, los cuadros de
verificación o los cuadros combinados.
En el diseño interactivo de interfaces, todos los elementos que fomenten la realimentación son
fundamentales, ya que el usuario debe estar informado en cada momento de las acciones que
realiza. Si el sistema tarda más tiempo de lo normal en procesar un comando se debe mostrar
un mensaje al usuario informándole del proceso que está teniendo lugar para no provocarle
incertidumbre. Asimismo, es necesario informar de los errores, efectos y confirmación de
acciones que se lleven a cabo en cada momento. La realimentación debe ser fácil de leer y
entender. Para ello, se debe fomentar su consistencia y el almacenamiento de información
adicional para asegurar el feedback. En el diseño de elementos interactivos en interfaces a la
hora de escoger los componentes, hay que tener en cuenta el tipo de acciones que se van a
llevar a cabo y cuál es la interacción más apropiada de cada una con el usuario.
Página 36
2.6.4. PAUTAS DE LA PRESENTACIÓN DE DATOS
Los datos que se mostrarán utilizando las interfaces de una aplicación deben seguir unas
pautas concretas para no confundir a los usuarios. Según qué información se quiere presentar
se debe tener acceso a un soporte externo que contenga los datos, o bien se tendrán los datos
incorporados en la interfaz.
Por ejemplo, supóngase que los datos estén ubicados en un soporte externo a la aplicación,
normalmente en una base de datos o en un archivo de texto o binario. Quizá se quieran utilizar
datos que se encuentran en otras aplicaciones o son resultados de éstos, pero para ello se tratará
la información con archivos intermedios hasta hacerla llegar al software. La aplicación
desarrollada (y sus interfaces) servirá para comunicar al usuario con estos datos, pero esto
debe hacerse de forma transparente para él.
A la hora de diseñar la presentación de los datos, hay que tener en cuenta algunas cuestiones:
 ¿Qué tipo de información quiere ver el usuario? ¿Quiere tener acceso a la información
de gestión o quiere tener acceso a información estadística o de resumen para poder
tomar decisiones? Por poner un ejemplo, será diferente la forma de presentar los datos
a un usuario que debe dar de alta nuevos proveedores, modificar sus datos y crear
pedidos, a si el usuario está interesado a tener un resumen anual de las ventas por
referencia, por mes y por tienda de los productos que compra a un proveedor.
 ¿Qué uso querrá hacer? ¿Querrá sólo consultar, o tendrá que poder modificar, borrar y
crear nueva información? También se tratará diferente la información a la que se podrá
dar acceso para gestionar y manipular que los datos que serán sólo de consulta.
 Si los datos se modifican de forma continua, ¿el usuario debe ver reflejados estos
cambios en el mismo momento?
 ¿La información a mostrar será numérica o en modo texto?
Todas estas cuestiones ayudarán a decidirnos por una forma de presentar los datos o por otra.
Un buen conocimiento de los usuarios también ayudará a ofrecer una adecuada presentación
de los datos con los que tendrá que trabajar.
2.6.5. PAUTAS DE LA SECUENCIA DE CONTROL DE LA APLICACIÓN
Toda aplicación con una interfaz de usuario ofrece muchos elementos y funcionalidades a los
usuarios. Estos elementos llevarán a poder realizar muchas operaciones, la mayoría de las
cuales trabajarán con datos. Algunas de estas operaciones serán directas y se ejecutarán de
forma inmediata. A otras operaciones, se podrá llegar desde diferentes ubicaciones de la
interfaz. Otras operaciones serán compuestas y comportarán más de un acceso o modificación
en la base de datos. Se debe tener en cuenta que ciertas operaciones podrán interrumpirse por
un mal uso de la interfaz o de la aplicación o por razones ajenas al software desarrollado. Otras
operaciones deberán ser confirmadas por el usuario para validar su correcta ejecución.
Página 37
La secuencia de control de la aplicación se refiere a las acciones que el usuario llevará a cabo
con el software y la lógica de ejecución de este. Es decir, si el usuario pide ejecutar una
operación que comporta diversas acciones con la base de datos, habrá que establecer un control
de la secuencia de operaciones que se llevarán a cabo para garantizar que la información se ha
mantenido consistente en la base de datos.
Un buen diseño de una interfaces (y de una aplicación en general) debe incluir unos objetivos
que incluyan acciones de control de consistencia, una necesidad mínima de acciones de control
y flexibilidad en los controles de secuencia para adaptarse a las distintas necesidades de los
usuarios.
Uno de los puntos más determinantes en la satisfacción y en la aceptación por parte del usuario
de una aplicación informática a la hora de utilizar una interfaz es la sensación de control que
tendrá en una sesión de uso de la aplicación con diversas acciones interactivas. Si un usuario
no puede controlar la secuencia de interacción, se sentirá sin el control de la aplicación,
insatisfecho, lo que puede provocar el rechazo a la aplicación entera.
2.6.6. PAUTAS PARA EL ASEGURAMIENTO DE LA INFORMACIÓN
La información con la que se trabaja estará en una base de datos. La introducción, modificación
o borrado de los datos se realizará por medio de una interfaz. Una vez ésta se ha utilizado y
los datos están estables en la base de datos, ésta debe estar disponible para cuando los usuarios
la necesiten y debe estar asegurada.
Para ello es necesario establecer un proceso de mantenimiento y una utilización que no

comprometa su integridad. Además, se pueden utilizar otros sistemas para asegurar la
disponibilidad de la información, lo que minimizaría el riesgo de quiebra de los sistemas
informáticos. Estos pueden ser sistemas de reserva o de emergencia que realicen copias de
seguridad de forma automática y regular.
Otro método para asegurar la integridad de la información consiste en establecer sistemas para
evitar el acceso directo a las bases de datos por parte de usuarios no controlados, en caso de
trabajar con información crítica para las organizaciones. Estos sistemas pueden incluir un
sistema de permisos para perfiles de usuarios o contraseñas. Con este sistema sólo un número
determinado de usuarios tendrá permiso para modificar los datos.
Además, también es necesario minimizar los errores humanos que se pueden producir al
gestionar esta información los usuarios, manipulando la aplicación o errores al introducir los
datos. Para evitar esto, se puede pedir la confirmación de los datos al introducir información
y comprobar que ésta cumple las características establecidas por los requisitos, como el tipo de
datos que se pueden introducir en un texto box (sólo números o sólo letras o con un formato
determinado).
Página 38
Otra forma de asegurar la información es hacer revisar al usuario los datos que ha introducido
o con los que ha tratado, utilizando un sistema de pregunta-respuesta mediante cuadros de
diálogo esenciales o, también, algún cuadro de diálogo de tipos alerta. Si un usuario debe
introducir datos mediante una interfaz, antes de grabar la información en la base de datos se
podrá mostrar un cuadro de diálogo con los datos al usuario para solicitar su confirmación.
2.6.7. PAUTAS ESPECÍFICAS PARA APLICACIONES MULTIMEDIA
En función del tipo de interfaces que se desarrollen o del tipo de aplicación o el entorno para
el que se plantee el uso de la aplicación, es posible encontrarse con la necesidad de utilizar
algunos elementos multimedia específicos como el animación o el sonido.
Si se trata de interfaces desarrolladas para dispositivos móviles o para entornos web, se pueden
utilizar algunos elementos como el sonido en determinadas acciones o determinados
elementos que aporten algunas animaciones, bien por necesidad o bien para dotar a las
interfaces de un diseño más agradable.
Otros ejemplos de utilización son la utilización de alertas sonoras para determinados errores
en la interacción con la interfaz, o la utilización de animaciones en la ayuda al usuario,
animaciones mucho más explícitas que ciertas indicaciones en formato texto.
Otro caso es el que se puede encontrar en aplicaciones para el control de la gestión de una
empresa, en las que se busque dotar de estadísticas, gráficas y muchos números a los directivos
para que puedan tomar decisiones. Estas informaciones, en vez de mostrarlas con unos
gráficos normales en dos dimensiones, se pueden desarrollar utilizando herramientas
multimedia o animaciones que muestren de forma más entendedora los datos que se quieren
consultar.
Página 39
ÍNDICE DE FIGURAS
1. Ejemplo de Wireframe de baja fidelidad ..................................................................................... 18

2. Ejemplo de Wireframe de media fidelidad.................................................................................. 18
3. Media fidelidad vs Alta fidelidad. ................................................................................................ 19
4. Menú desplegado. ........................................................................................................................... 23
5. Barra de herramientas ..................................................................................................................... 24
6. Menú contextual .............................................................................................................................. 25
7. Menú de pantalla completa............................................................................................................ 26
8. Paleta de colores de Paint ............................................................................................................... 30
BIBLIOGRAFÍA – WEBGRAFÍA
Martínez, A. (2017). 10 principios de usabilidad para diseño de interfaces de usuario.

https://medium.com/@alanmartinez/10-principios-de-usabilidad-para-dise%C3%B1o-de-
interfaces-de-usuario-f35d9d01643f
Dorado, K. Curso de Introducción al diseño centrado en el usuario (UX).

https://openwebinars.net/academia/aprende/introduccion-ux/11742/
Cantarero, A. ¿Por qué usar mockups y cómo hacerlos?

https://ebac.mx/blog/por-que-usar-mockups
Vicente Carro, J.L. (2014). Desarrollo de interfaces. Editorial Garceta.
Ferrer Martínez, J. (2015). Desarrollo de interfaces. Editorial Ra-Ma
Página 40

Unidad 2 Diseño de Interfaces Gráficas - Usabilidad y Accesibilidad

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

Unidad 2 Diseño de Interfaces Gráficas - Usabilidad y Accesibilidad

Cargado por

Copyright:

Formatos disponibles

Centro Integrado de Formación Profesional

UNIDAD 2: DISEÑO DE INTERFACES GRÁFICAS. USABILIDAD Y

En general, la mayoría de los desarrolladores no están demasiado especializados en el diseño

2.1. USABILIDAD Y ACCESIBILIDAD

Cuando se diseñan aplicaciones multiplataforma, la interfaz planteada será fundamental para

Dentro del contexto de aplicaciones informáticas y desarrollo de software, se define usabilidad

Definir adecuados parámetros de usabilidad en el diseño de los productos, se traducirá en

2.1.1. PRINCIPIOS DE USABILIDAD

Visibilidad del estado del sistema

Correspondencia entre el sistema y el mundo real

Libertad y control del usuario

Reconocimiento en vez de recordar

Flexibilidad y eficiencia de uso

Diseño estético y minimalista

Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores

2.1.2. EXPERIENCIA DE USUARIO (USER EXPERIENCE UX)

A medida que evolucionaba el diseño, aparece un enfoque centrado en el usuario buscando

A modo de resumen se puede concluir que la Experiencia de Usuario:

- Hace hincapié en factores de la interacción tradicionalmente poco o mal considerados,

2.1.3. HCI INTERACCIÓN HUMANO – COMPUTADOR

En el diseño de interfaces gráficas, se usan elementos como la tipografía, símbolos, iconos,

El diseño de la interfaz debe caracterizarse por su simplicidad y estética haciéndola accesible

Los cinco atributos de la usabilidad son:

Entre los beneficios de la usabilidad se encuentran:

2.2. NORMATIVA RELACIONADA CON LA USABILIDAD

Fijándose en las investigaciones referentes a los aspectos ergonómicos en la interacción

 ISO 9241. Aporta requerimientos y recomendaciones relacionados con las características

2.3. MEDIDA DE USABILIDAD DE LAS APLICACIONES

2.3.1. TIPOS DE MÉTRICAS

Se podrían llevar a cabo algunas evaluaciones cualitativas, pero es necesario establecer un

Para obtener datos cualitativos es necesario conseguir informaciones de usuarios finales. En el

se pueden entender estos datos cualitativos como el resultado de encuestas, de valoraciones

En cambio, si se habla de datos cuantitativos, será necesario analizar el comportamiento del

A partir de estas métricas cuantitativas se intentará evaluar la usabilidad desde el punto de

Existen herramientas automatizadas que comprueban de forma automática la conformidad

Hasta ahora se ha visto el concepto de usabilidad, sus dimensiones, sus características,

2.4.1. PRUEBAS DE EXPERTOS. FORMULARIOS TIPO

Es un análisis y examen sistemático y detallado de la interfaz del producto realizado por

Proceso de la evaluación experta:

La evaluación heurística por criterios es la realizada por evaluadores especializados a partir de

En el caso de que se disponga de una aplicación totalmente elaborada, es aconsejable realizar

Los evaluadores inspeccionan individualmente y solo después de la evaluación pueden

La jerarquización de la gravedad de los problemas facilitará la aplicación posterior de políticas

2.4.2. PRUEBAS CON USUARIOS. CUESTIONARIOS

La primera impresión que se lleve el participante al mostrarle el diseño supone una

A continuación, se puede comenzar la prueba completa en la que se solicitará al participante

2.5. ESQUEMAS (WIREFRAMES) Y MAQUETAS (MOCKUPS)

Habitualmente, cuando se habla de maquetas se hace en referencia a modelos en tamaño

Los pilares de los Wireframes son:

 La simplicidad es clave. Demasiada información, texto o enlaces pueden distraer al

En cuanto a tipos de Wireframes, se enumeran los siguientes:

1. Ejemplo de Wireframe de baja fidelidad

2. Ejemplo de Wireframe de media fidelidad

 Alta fidelidad. Ya se diseñan teniendo en cuenta la resolución y la retícula. Las imágenes

3. Media fidelidad vs Alta fidelidad.

Entre las características de un mockup se encuentran las siguientes:

La creación de un mockup es uno de los pasos primordiales en el design thinking. Se prepara

Fase de evolución y de resultado:

2.6. PAUTAS DE DISEÑO

A la hora de desarrollar un proyecto de creación de un software, será necesario tener en cuenta,

2.6.1. PAUTAS DE LA ESTRUCTURA DE LA INTERFAZ DE USUARIO

Barras de herramientas o paletas de herramientas

En muchas aplicaciones, las barras de herramientas se pueden configurar; de esta forma el