Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 04
Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 04
Interfaces
Técnico Superior en
Desarrollo de Aplicaciones
Multiplataforma
© Centro para la Cultura y el Conocimiento, S.A.
ISBN-13: 978-84-7157-397-1
ISBN-10: 84-7157-397-0
E-m06-22
Printed in Spain
Sumario
1. Introducción a la usabilidad..................................................................................... 73
2. Concepto de usabilidad............................................................................................ 74
3. La experiencia de usuario se preocupa de aspectos más amplios y subjetivos.... 77
4. Normas ISO referentes a calidad, interfaces, interacción,
ergonomía y documentación................................................................................... 79
5. Medida de usabilidad de aplicaciones; tipos de métricas....................................... 81
6. Pruebas de expertos; formularios tipo..................................................................... 82
7. Pruebas con usuarios; cuestionarios........................................................................ 84
8. Pautas de diseño de la estructura del interface de usuario.................................... 86
9. Pautas de diseño del aspecto del interface de usuario........................................... 89
10. Pautas de diseño de los elementos interactivos del interface de usuario............ 92
11. Pautas de diseño de la presentación de datos....................................................... 93
12. Pautas de diseño de la secuencia de control de la aplicación.............................. 95
13. Pautas de diseño para el aseguramiento de la información................................. 96
14. Pautas de diseño específicas para aplicaciones multimedia................................ 97
72
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Objetivos
▶ Conocer el concepto de usabilidad y la experiencia de usuario UX.
▶ Conocer las diferentes pautas de diseño en las interfaces relacionadas con la usabilidad.
Módulo | Desarrollo de Interfaces
1. Introducción a la usabilidad
En esta unidad introduciremos el concepto de usabilidad y cómo se relaciona con el diseño de
interfaces gráficas.
Es importante destacar que tendremos siempre en mente que el usuario estará en el centro
de todo el proceso, ya que debemos ser capaces de desarrollar interfaces usables, fáciles e
intuitivas para el usuario final.
Por lo tanto, antes de ponernos a desarrollar nuestras interfaces nos centraremos en analizar
los requerimientos de usabilidad, lo que nos permitirán conocer los objetivos que se tendrán
que alcanzar al finalizar el desarrollo de la aplicación.
Estos requisitos de usabilidad guiarán los diseños de las interfaces que interactuarán con los
usuarios y, al mismo tiempo, se podrán usar para evaluar la calidad del software que desarro-
llemos.
73
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces
2. Concepto de usabilidad
En el mundo del desarrollo de aplicaciones informáticas y desarrollo de software, la usabilidad
se puede definir como la disciplina que investiga la manera en que se pueden diseñar páginas
web y aplicaciones para que los usuarios que vayan a interactuar con ellas lo puedan hacer de
manera fácil, intuitiva y cómoda.
Debemos tener presente que cuanto más sencillo le resulte a un usuario moverse por una apli-
cación, más posible y fácil será que realice de forma eficiente su trabajo, y mayor uso y éxito
podrán tener nuestras interfaces.
Por lo tanto, si en el diseño de nuestras interfaces somos capaces de definir parámetros de usa-
bilidad de manera acertada, podremos aumentar la calidad de nuestros desarrollos, mejorar la
imagen de nuestra empresa y conseguir beneficios económicos.
2.1. Características
Cuando realizamos el desarrollo de nuestras interfaces debemos tener muy presente al usuario.
Cuando el usuario utilice nuestros diseños debe poder conseguir los mejores resultados con
el menor esfuerzo posible.
74
Las características que una intefaz debe tener para que pueda ser considerada usable son las
siguientes:
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
▶ Útil. Debe ser capaz de realizar de manera correcta las tareas para las que ha sido dise-
ñada.
▶ Con un diseño elegante. Esta característica mejorará la percepción del usuario y empa-
tizará mejor con sus emociones.
▶ Simplicidad. No debemos recargar en exceso para evitar perder la atención del usuario
y hacerle más fácil su trabajo con la interfaz.
Módulo | Desarrollo de Interfaces
2.2. Atributos
En el desarrollo de interfaces se hace imprescindible el uso de diversos elementos como tipo-
grafía, iconos, imágenes, colores que nos permiten representar conceptos o acciones.
El correcto uso que demos a estos elementos será de vital importancia para que la interfaz
cumpla con su objetivo.
En usabilidad se pueden definir cinco atributos que todo desarrollo debe tener:
▶ Eficiencia. Una vez que el usuario sepa usar la aplicación, debe conseguir un alto nivel
de productividad.
▶ Tasas de error. Cantidad de errores que comete el usuario por unidad de tiempo.
75
Interaction)
Aunque inicialmente se ocupó de los ordenadores, HCI se ha expandido desde entonces para
cubrir con la mayoría de desarrollos y diseños de tecnología de la información.
HCI es un campo de estudio bastante amplio que se relaciona con áreas como:
Nota:
https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-
interaction-2nd-ed/human-computer-interaction-brief-intro
Módulo | Desarrollo de Interfaces
▶ Disminuir la tasa de errores que se pueden cometer en el uso diario de las aplicaciones.
“La experiencia de usuario engloba todos los aspectos de la interacción de los usuarios finales con
la compañía, sus servicios y sus productos.”
Demos un paso más allá en el concepto y vamos a comentar los aspectos de los que se preocu-
pa la experiencia de usuario, aspectos más amplios y subjetivos como los siguientes:
77
aumente por parte del usuario.
▶ Motivación. Un usuario motivado por usar una aplicación siempre será positivo.
▶ Creatividad. Hay que tener en cuenta que la creatividad debe entrenarse pero puede ser
un factor muy importante en el desarrollo de nuestras aplicaciones.
▶ Emociones. El diseño emocional es clave para poder empatizar con los usuarios que
usen nuestras aplicaciones.
La experiencia de usuario también debe entenderse desde un punto de vista subjetivo, ya que
va a depender en gran medida del tipo de usuario que interactúe con la interfaz.
Es por ello que uno de los principales objetivos de mejorar las interfaces para satisfacer la ex-
periencia de los usuarios es precisamente conocer qué les motiva, lo que les confunde o lo que
realmente buscan en el uso de la aplicación.
De esta manera se podrán diseñar interfaces que permitan dar respuesta a todos los aspectos
relacionados con la experiencia de usuario.
78
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces
4. Normas ISO referentes
a calidad, interfaces,
interacción, ergonomía y
documentación
Actualmente existen varias normas ISO relacionadas con el término usabilidad. La Organiza-
ción Internacional para la Normalización (ISO, International Organization for Standardization)
se creó con el objetivo de promover el desarrollo de las normas internacionales de fabricación,
comercio y comunicación.
79
Relacionadas con la calidad existen las normas 9000, referidas a los sistemas de ges-
tión de la calidad en el ámbito de fundamentos, vocabulario, requisitos y directrices.
▶ Funcionalidad.
▶ Fiabilidad.
▶ Usabilidad.
▶ Eficiencia.
▶ Facilidad de mantenimiento.
▶ Portabilidad.
Módulo | Desarrollo de Interfaces
Esta norma explica los requerimientos necesarios para el diseño de interfaces centradas en el
usuario. Estos se refieren principalmente al ciclo de vida completo del desarrollo de software.
Esta norma recomienda ciertos aspectos relacionados con el diseño de controles y navegación.
También sobre medios y dominios específicos como la formación facilitada por los ordenado-
res.
80
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces
5. Medida de usabilidad de
aplicaciones; tipos de
métricas
La medida de usabilidad hace referencia a las características de la interfaz que pueden ser me-
didas de manera objetiva.
Se trata de encontrar una manera de evaluar la usabilidad tanto cualitativa como cuantitativa.
Una herramienta muy útil para este caso son los gráficos donde se puede medir el tiempo
81
necesario para ejecutar una tarea concreta, gracias a que su interpretación es directa y sencilla.
Explorando los gráficos podremos sacar conclusiones y buscar posibles problemas de usabi-
lidad.
Para medir las métricas anteriores, es necesario tener en cuenta un grupo numeroso de usua-
rios y seguir las consideraciones siguientes:
▶ Definir las tareas que van a realizar los usuarios centrándose en aquellas tareas que
consideramos más complejas o que requieran más tiempo para ejecutarlas.
▶ Establecer los objetivos concretos para las tareas que sean seleccionadas.
▶ Definir las variables que se van a medir durante el proceso. Estas variables suelen ser:
6. Pruebas de expertos;
formularios tipo
Gracias a la amplia experiencia de los usuarios expertos, las pruebas de usabilidad que puedan
detectar errores de la aplicación supone un sistema de pruebas muy válido.
Las pruebas con expertos pueden ser una forma de bajo coste y rápida de evaluar el diseño de
nuestras interfaces, localizando posibles problemas o mejoras que un experto puede detectar.
Estas técnicas buscan dar respuesta a un conjunto de principios de diseño que se han
definido previamente y localizar aquellos principios que no cumple la aplicación o la
interfaz.
▶ Revisión de normas. Se revisa la interfaz con el fin de que cumpla las normas estable-
82
cidas.
Esta revisión es similar al caso anterior de la evaluación heurística, pero se basa en nor-
mas objetivas establecidas previamente.
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Las inspecciones de consistencia son analizadas por profesionales de la usabilidad de las inter-
faces de las aplicaciones o productos, intentando descubrir las diferentes maneras en que cada
aplicación da respuesta a una funcionalidad concreta.
Existen varias metodologías para realizar pruebas con usuarios, como las que vemos a conti-
nuación.
Reunión
Las reuniones consisten en encuentros realizados durante diferentes etapas del proceso de
desarrollo de la interfaz o software.
Es recomendable la presencia de un experto cuando se realicen para que pueda actuar como
moderador.
Entrevistas y cuestionarios
84
Las entrevistas y cuestionarios son contactos con usuarios de manera personalizada tanto de
forma oral como escrita. Gracias a este tipo de pruebas se puede obtener tanto información
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Es muy recomendable que los cuestionarios o encuestas sean escritas y revisadas por ex-
pertos para asegurar que los aspectos más complejos de una interfaz se puedan evaluar de
manera correcta.
Diseño de escenarios
El diseño de escenarios es un tipo de encuesta en la que los usuarios son libres de definir el
orden de las acciones para conseguir un objetivo concreto.
De esta manera se pueden obtener pautas y secuencias lógicas de acción de las tareas pro-
puestas.
Módulo | Desarrollo de Interfaces
Diseño participativo
El diseño participativo se trata de una reunión entre los organizadores y un conjunto de po-
sibles usuarios del producto final. Su objetivo es que los usuarios puedan participar en el
diseño de la interfaz de manera activa.
Gracias a este tipo de reuniones se pueden anotar las necesidades y expectativas de los usua-
rios. Los organizadores mostrarán la idea general de cómo podría quedar el producto final para
posteriormente poder modificarla o adaptarla a las nuevas consideraciones.
Recuerda:
Las pruebas con usuarios permiten detectar las tareas que les resulten más complicadas y
también aquellos elementos de la interfaz que son mas difíciles de comprender.
Una vez recabada la información de estas pruebas, se podrá analizar y así obtener una lista
85
de tareas prioritarias para poder plantear el rediseño de la interfaz. Este rediseño incluirá las
correcciones que ayuden a conseguir que la aplicación sea lo más usable posible.
8. Pautas de diseño de la
estructura del interface de
usuario
Para el diseño de la estructura de las interfaces de usuario son necesarias las siguientes pautas:
▶ Coherencia. El usuario tiene que poder interactuar con la aplicación y debemos asegu-
rarnos de mostrar la información de manera eficiente.
Cuando diseñamos un menú hay que indicar un título, las opciones que se mostrarán y aque-
llas acciones que pueden ocurrir cuando el usuario elija esa opción.
Ventajas de uso:
▶ Evitan que el usuario no vea las opciones del menú que ya no le interesa.
8.2. Ventanas
87
La ventana se puede entender como un área concreta de la pantalla con un propósito parti-
Podemos interactuar con las ventanas de varias maneras: moviéndola, ocultándola, minimi-
zándola. Esto nos permite controlar la apariencia en todo momento.
La ventaja más notable de las pantallas es facilitar una captura rápida y correcta de la informa-
ción contenida en ellas.
Debemos tener cuidado a la hora de diseñar las ventanas en la aplicación ya que un exceso de
ellas puede provocar un efecto negativo en la percepción del usuario pudiendo saturarlo.
También se pueden utilizar para mostrar ayuda en línea y como parte de la documentación
proporcionada por la aplicación.
Módulo | Desarrollo de Interfaces
▶ Estilo y diseño.
▶ Conocer la cultura del país de procedencia del usuario puede evitar malas interpretacio-
nes de los mensajes.
El uso de estos atajos también permite aumentar la velocidad de trabajo del usuario en aque-
llas acciones que con más frecuencia realiza.
Un ejemplo recurrente es la copia de un bloque de texto donde siempre es más rápido usar la
combinación de teclas Ctrl+C que buscar con el ratón sobre el menú.
88
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces
9. Pautas de diseño del
aspecto del interface de
usuario
Algo muy importante sobre el aspecto de cualquier interfaz está relacionado con los colores de
su diseño, la tipografía usada en los textos, los iconos que representarán las diferentes acciones
y la distribución de todos estos objetos en la interfaz.
Los objetivos del aspecto del interface de usuario son que el usuario pueda adaptarse de ma-
nera rápida a su diseño, localizar la información y controlar la navegación.
89
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces
9.1. Colores
El color es un elemento de suma importancia para el éxito de la interfaz. Utilizado adecuada-
mente, constituye una potente herramienta de comunicación.
El uso inadecuado de los colores puede provocar en el usuario molestias visuales o asociacio-
nes incorrectas de información del mensaje.
Otra función es permitir resaltar la información considerada más importante para que el usua-
rio pueda identificarla de manera ágil y rápida.
▶ Comunican de manera más rápida al usuario las ideas y estética, aumentando la eficien-
cia de la aplicación.
▶ Generan que la información de los mensajes se muestre al usuario de manera más inte-
resante, aumentando el interés en su lectura.
▶ Crean en el ser humano un efecto psicológico que capta su atención, se consigue memo-
90
9.2. Fuentes
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Una tipografía de la interfaz gráfica elegida correctamente permitirá un equilibrio entre los
distintos elementos de la pantalla y una igualdad visual que permitirá al usuario entender los
contenidos.
La correcta selección de las fuentes establecerá una jerarquía visual que facilite la lectura.
Permitirá añadir interrupciones visuales y énfasis gráficos que ayuden al lector a entender la
relación entre textos e imágenes por ejemplo.
El tamaño de las fuentes debe permitir ser legible y proporcionado a la resolución de la pan-
talla.
Las principales ventajas de los iconos son que se reconocen de manera más rápida que las
palabras y en la pantalla ocupan menos espacio.
Una pantalla donde sólo exista texto provocará rechazo ya que no sabremos cómo se estructu-
ra la información. Por lo contrario, una página con muchos objetos gráficos distraerá al usuario.
La mejor opción es diferenciar claramente cada uno de los elementos que conforman el docu-
mento y combinar textos con gráficos.
91
Debemos prestar atención a la distribución de elementos ya que hacerlo de manera incorrecta
puede distraer al usuario.
Esto nos ayudará a diseñar una interfaz agradable y ordenada delimitando claramente el espa-
cio de texto, los gráficos y el espacio en blanco restante.
Módulo | Desarrollo de Interfaces
▶ Si la aplicación, cuando procesa una petición, tarda más tiempo de lo normal es re-
comendable que se muestre un mensaje al usuario. De esta manera, se le informa del
proceso para evitar que la situación le genere incertidumbre.
Un botón es un objeto de control que actúa sobre una interfaz y nos permite añadir un dato de
confirmación en la aplicación.
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
En las interfaces de usuario se pueden utilizar diferentes tipos de botones como botones en
relieve, de confirmación o con forma de radio para selección excluyente o múltiple.
Normalmente una etiqueta colocada al lado de cada botón describe la opción que dicho bo-
tón representa.
También se caracterizan por ser muy intuitivos y permiten que los usuarios sepan de qué ma-
nera usarlos.
Un factor de diseño interesante en este tipo de botones es la ubicación que ocupa en la interfaz.
Las listas desplegables combinan tanto cuadros de texto como menús desplegables. Ejemplos
de ellas pueden ser la barra de direcciones de cualquier navegador web o las ventanas de ayu-
da de las aplicaciones.
Siempre debemos tener en cuenta que el usuario debe navegar por la lista hasta encontrar la
opción que considere oportuna, siendo estas limitadas.
Módulo | Desarrollo de Interfaces
11. Pautas de diseño de la
presentación de datos
Para conseguir la mayor eficiencia de nuestra interfaz, debemos determinar de qué manera
se van presentar los datos y la información a los usuarios.
Debemos tener en cuenta que cuando mostramos cierta información en una pantalla el usua-
rio no necesariamente la lee de forma secuencial, sino que puede ir navegando por la interfaz
a través de menús, enlaces, etc.
La elección del diseño en la presentación de los datos dependerá en gran medida del tipo de
aplicación que se esté creando y el público que hará uso de la misma.
Otro punto importante a tener en cuenta son los diferentes dispositivos o soportes donde se
podrá visualizar la información, ya que los datos no se pueden presentar de la misma manera
en una pantalla de ordenador que en un dispositivo móvil.
Algunas pautas de diseño que es importante seguir para conseguir una presentación efectiva
de los datos en la interfaz son:
93
▶ Ejemplo de
enrejillado.
▶ Ejemplo de
balanceado.
▶ Simetría. Se duplica la imagen a lo largo de alguno de los ejes para asegurar que el di-
seño se encuentra balanceado.
94
▶ Ejemplo de
simetría.
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
Módulo | Desarrollo de Interfaces
12. Pautas de diseño de la
secuencia de control de la
aplicación
El diseño de la secuencia de control de la aplicación se resume en los siguientes puntos:
▶ Se crea una interfaz con el nombre que se quiera y se dibujan los controles y elementos
sobre un formulario.
▶ Una vez añadidos los elementos en el formulario, se establecen los valores de sus pro-
piedades.
▶ Se escribe el código que se ejecutará como respuesta de los eventos que se lancen cuan-
do se active un control u objeto concreto.
95
▶ Asociar a cada objetivo una secuencia de interacción con los usuarios de la interfaz.
Recuerda:
Cada plataforma de programación que permita desarrollar interfaces debe ofrecer herramien-
tas que garanticen la seguridad de la información manejada.
Módulo | Desarrollo de Interfaces
14. Pautas de diseño
específicas para
aplicaciones multimedia
Las interfaces tradicionales basadas en texto pueden mejorar ampliamente mediante el uso de
contenidos multimedia.
Los contenidos multimedia proporcionan importantes beneficios que atraen al usuario, man-
tienen su atención y mejoran la asimilación o retención de la información que se presenta.
Por lo tanto, el principal objetivo a la hora de añadir contenido multimedia a las interfaces de
usuario es conseguir una coherencia comunicativa y visual.
A la hora de diseñar contenidos multimedia se debe guardar un equilibrio entre los contenidos
que puedan usar hipertexto y multimedia y los que no.
Si no se cumple este equilibrio, es muy posible que la información presentada pueda confundir
al usuario, creando una sensación de caos y confusión.
97
aplicación, manteniendo una coherencia visual y comunicativa.
Los elementos multimedia principales que se usan en el diseño de interfaces gráficas de usua-
rio son los siguientes:
▶ Imágenes. Información visual estática y digital que también puede representar ciertos
conceptos.
▶ Vídeos. Muestran información amplia sobre conceptos con la posibilidad que el usuario
pueda parar, pausar o acelerar el proceso de visualización.