Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 04

Desarrollo de
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
Queda rigurosamente prohibida, sin autori-

zación escrita de los titulares del "copyright"
bajo las sanciones establecidas en las leyes, la
reproducción parcial o total de esta obra por
cualquier medio o procedimiento, comprendi-
dos la reprografía y el tratamiento informático
y la distribución de ejemplares de ella median-
te alquiler o préstamos públicos.
4
Usabilidad.
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA 71

Módulo | Desarrollo de Interfaces
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.
▶ Investigar la normativa vigente sobre calidad enfocada a las interfaces.
▶ Estudiar la realización de pruebas tanto por expertos como con usuarios.
▶ Conocer las diferentes pautas de diseño en las interfaces relacionadas con la usabilidad.
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
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:
▶ Útil. Debe ser capaz de realizar de manera correcta las tareas para las que ha sido dise-
ñada.
▶ Fácil de usar. Debe ser eficiente, libre de errores y veloz.
▶ Fácil de aprender. No debe necesitar mucho tiempo para aprender su funcionamiento

y será fácil de recordar en futuros usos.
▶ Con un diseño elegante. Esta característica mejorará la percepción del usuario y empa-
tizará mejor con sus emociones.
▶ Retroalimentación. Es muy importante que la interfaz pueda comunicar en todo mo-

mento al usuario el progreso de las acciones o si se produce algún error.
▶ 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.
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.
Deberemos tener siempre en mente estos principios: organizar, economizar y comunicar.
En usabilidad se pueden definir cinco atributos que todo desarrollo debe tener:
▶ Facilidad de aprendizaje. La interfaz debe ser fácil de aprender.
▶ Eficiencia. Una vez que el usuario sepa usar la aplicación, debe conseguir un alto nivel
de productividad.
▶ Recuerdo de uso. El uso de la interfaz debe ser fácil de recordar en el tiempo.
▶ Tasas de error. Cantidad de errores que comete el usuario por unidad de tiempo.
▶ Satisfacción. El grado de satisfacción que tiene la aplicación cuando el usuario la utiliza.
2.3. HCI (Human Computer
75
Interaction)

La interacción humano-ordenador (HCI) es un campo de estudio de múltiples disciplinas
que se centra en el diseño de tecnología de índole informática para la interacción entre usuario
y ordenador.
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:
▶ El diseño centrado en el usuario (UCD).
▶ El diseño de la interfaz de usuario (UI).
▶ El diseño de la experiencia del usuario (UX).
Nota:
Puedes consultar más información sobre HCI en el siguiente enlace:
https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-
interaction-2nd-ed/human-computer-interaction-brief-intro
2.4. Objetivo de la usabilidad

En el desarrollo de interfaces la finalidad principal de la usabilidad es crear sistemas eficientes,
efectivos, seguros, útiles, fáciles de aprender y fáciles de recordar.
Podemos enumerar varios objetivos que tiene la usabilidad:
▶ Reducir el proceso de aprendizaje del usuario y servirle de ayuda.
▶ Optimizar el coste de diseño y mantenimiento de las aplicaciones.
▶ Disminuir la tasa de errores que se pueden cometer en el uso diario de las aplicaciones.
▶ Mejorar la satisfacción del usuario y la calidad de la marca.

76
3. La experiencia de usuario se
preocupa de aspectos más
amplios y subjetivos
Los expertos en usabilidad Don Norman y Jakob Nielsen definen la experiencia de usuario
(UX, User Experience) de la siguiente manera:
“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:
▶ Satisfacción. Gracias a la UX se puede aumentar la satisfacción del usuario al interactuar

con la aplicación y esto hará que repita su experiencia.
▶ Diversión. Si la aplicación causa divertimento en el usuario, este aumentará el uso de

la misma.
▶ Entretenimiento. Si algo es entretenido, al igual que divertido, provocará que su uso
77
aumente por parte del usuario.
▶ Motivación. Un usuario motivado por usar una aplicación siempre será positivo.

▶ Estética. Si la aplicación tiene una apariencia cuidada y atractiva, la interacción con el

usuario mejorará considerablemente.
▶ 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
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.
▶ Icono ISO. Símbolo

de la Organización
Internacional de
Normalizació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.

Veamos a continuación algunas de las normas más importantes.
ISO 9126: Calidad del software y Métricas

de Evaluación
Esta norma desarrolla el modelo de calidad en el software, presentando diferentes atributos

de calidad como:
▶ Funcionalidad.
▶ Fiabilidad.
▶ Usabilidad.
▶ Eficiencia.
▶ Facilidad de mantenimiento.
▶ Portabilidad.
ISO 9241: Requisitos del software en relación

a la calidad de su uso
Permite gestionar los requerimientos y recomendaciones relacionados con características pro-

pias del software.
También permite mejorar la usabilidad en el entorno y los principios ergonómicos en el uso de

las nuevas tecnologías.
ISO 13407: Diseño centrado en el usuario
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.
ISO 14915: Ergonomía del software

para interfaces de usuarios multimedia
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
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.
Estas características se pueden dividir en los siguientes tres tipos:
▶ Efectividad. Mide el grado de éxito de un objetivo concreto alcanzado.
▶ Eficiencia. Mide el esfuerzo necesario para lograr un objetivo.
▶ Satisfacción. Mide el grado de satisfacción del usuario.
Una vez que se recogen los resultados se procede a su análisis.
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.

Una vez detectados los problemas, se procede al rediseño de la interfaz y se vuelven a realizar
las pruebas necesarias.
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:
• El tiempo que se necesita para realizar una tarea o grupo de tareas.

• El porcentaje de error cuando se realizan dichas tareas.
• El porcentaje de tiempo que los usuarios siguen una guía de acciones de manera
óptima.
• El número de veces que es necesario volver atrás en la aplicación por encontrarse

perdido.
▶ Planificar el proceso de recogida de los datos.

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.
El objetivo principal de estas pruebas es poder detectar elementos de diseño de la interfaz

que puedan confundir al usuario final y quitar calidad y efectividad a la aplicación.
Existen varios tipos de pruebas realizadas por expertos:
▶ Evaluación heurística. Se evalúan usando técnicas heurísticas de diseño.
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.
▶ Inspección de consistencia. Se realiza una inspección con la ayuda de un conjunto de

interfaces que forman parte de la aplicación.
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.
Posteriormente, estos análisis son puestos en común en un equipo de evaluación y se busca

definir cuál es la implementación óptima según los atributos de usabilidad de cada aplicación.
▶ Inspección formal de usabilidad. Es una técnica consistente en la evaluación de un

conjunto de expertos, los cuales realizan una especie de juicio, donde uno de los parti-
cipantes actúa como moderador.
Mediante este análisis se intentan descubrir las fortalezas y debilidades de la aplicación,

tratando de encontrar problemas relacionados con:
• El diseño: color, vocabulario, presentación...

• La navegación: controles, menús, búsquedas...
Otra técnica importante de evaluacion es conocida como caminata cognitiva, en la que un
grupo de expertos simula la forma en la que un usuario “caminaría” a través de la interfaz rea-
lizando tareas particulares.
TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA 83
7. Pruebas con usuarios;

cuestionarios
Gracias a las pruebas con usuarios se puede obtener una valiosa información que podrá ser la
mejor opción para conseguir un diseño centrado en el usuario.
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
cualitativa como cuantitativa.
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.
Los cuestionarios pueden ser también online en tres posibles formatos:
▶ Colgados desde una página web.
▶ Enviados por correo electrónico al grupo de usuarios concreto.
▶ Puestos en algún grupo de noticias.
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.
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:
En todos los casos vistos, se suele usar una muestra de 5 a 10 usuarios.

De esta manera, es posible detectar muchos problemas de usabilidad aunque los resultados
no tienen validez de tipo estadístico.
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:
▶ Familiaridad del usuario. Debemos tener en cuenta que el ordenador, la interfaz y el

entorno de trabajo estarán al servicio del usuario.
Se debe ofrecer al usuario el ambiente flexible que le permita aprender rápidamente a

usar la aplicación.
▶ Consistencia. En la medida de lo posible, la interfaz debe ser consistente. Esto significa

que operaciones parecidas deberán activarse de la misma manera.
▶ Legibilidad. En la interfaz, la información mostrada debe ser fácil de leer y ubicar.
Es importante tener en cuenta la colocación y agrupación de los elementos, evitar la

presentación de información excesiva, etc.
▶ Mínima sorpresa. El comportamiento de la interfaz no puede provocar ninguna sorpre-

sa a los usuarios.
86
▶ Recuperabilidad. La interfaz debe tener la posibilidad de permitir a los usuarios poder

recuperarse de los errores.
▶ Coherencia. El usuario tiene que poder interactuar con la aplicación y debemos asegu-
rarnos de mostrar la información de manera eficiente.
En los siguientes apartados va-

mos a estudiar elementos que
conforman la estructura de la
interfaz como son los menús,
las ventanas, los cuadros de
diálogo y los atajos de teclado.
8.1. Menús
Un menú es una lista de opciones mostradas por la pantalla y que permite a los usuarios elegir
la opción que quieran.
Los menús permiten dos cosas:
1. Navegar por una aplicación.
2. Seleccionar elementos de un listado concreto.
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:
▶ Permiten que la pantalla esté más libre de elementos y despejada.
▶ Evitan que el usuario no vea las opciones del menú que ya no le interesa.
▶ Permiten al usuario moverse de manera rápida por la aplicación.
8.2. Ventanas
87
La ventana se puede entender como un área concreta de la pantalla con un propósito parti-

cular.
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.
8.3. Cuadros de diálogo

Los cuadros de diálogos son mensajes generados por el sistema como respuesta a diversas
acciones del usuario en su interacción con la interfaz.
También se pueden utilizar para mostrar ayuda en línea y como parte de la documentación
proporcionada por la aplicación.
Debemos tener en cuenta estos factores a la hora de diseñarlos:
▶ El nivel de habilidad del usuario y su experiencia. Esto permitirá adecuar la información

a la terminología que el usuario utiliza.
▶ Estilo y diseño.
▶ Los mensajes deben ser positivos y activos.
▶ Conocer la cultura del país de procedencia del usuario puede evitar malas interpretacio-
nes de los mensajes.
8.4. Atajos de teclado

Los atajos de teclado son combinaciones de teclas usadas para llevar a cabo una acción con-
creta, permitiendo sustituir la interacción del ratón con los elementos de la interfaz.
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
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
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.
El objetivo en la gestión de colores en las interfaces es agrupar los elementos de la pantalla

en conjuntos asociados de manera espacial, distanciados de los demás, haciendo más com-
prensible la información y tratando de evitar errores de interpretación.
Ventajas del uso de colores:
▶ 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
rizar visualmente y crear emociones.
9.2. Fuentes
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.
También debemos evitar bloques de texto muy extensos.

9.3. Iconos
Los iconos son imágenes que pueden representar conceptos o determinadas acciones.
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.
Algo fundamental cuando desarrollamos interfaces gráficas es encontrar el equilibrio y orga-

nización global de los iconos.
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.
9.4. Distribución de los elementos

La distribución espacial de los elementos en la interfaz permite dirigir las intenciones del
usuario y hace que la interacción sea mucho más eficaz y divertida.
91
Debemos prestar atención a la distribución de elementos ya que hacerlo de manera incorrecta
puede distraer al usuario.

Existen formas de distribuir correctamente los elementos, por ejemplo, haciendo uso de retí-
culas base y estilos predefinidos para los objetos gráficos del espacio.
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.
10. Pautas de diseño de los

elementos interactivos del
interface de usuario
El concepto de interacción en el desarrollo de interfaces es fundamental ya que el usuario tiene
que estar informado en todo momento del resultado de las acciones que va realizando.
Casos concrectos de interacción pueden ser los siguientes:
▶ 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.
▶ También es recomendable informar de los posibles errores, efectos y confirmación de

los actos que ejecuta el usuario.
10.1. Botones de comando

92
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.
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.
10.2. Listas desplegables

Las listas desplegables son controles usados para poder elegir una opción de una lista de
posibilidades.
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.
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:
▶ Enrejillado. El espacio se organiza en áreas separadas según su función.
93
▶ Ejemplo de
enrejillado.

▶ Balanceado. Se busca el equilibrio en la presentación de los datos gestionando los ejes

horizontal y vertical de la interfaz.
▶ 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.
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.
▶ Se guarda el proyecto, se genera el ejecutable y, por último, se crea el instalador.
También es muy recomendable fijarse en las siguientes consideraciones en cuanto al diseño:
▶ Concretar el objetivo de cada componente de la interfaz y sus intenciones. Esta fase es

muy importante ya que su correcto análisis afectará al resultado final, evitando posibles
modificaciones en un futuro.
95
▶ Asociar a cada objetivo una secuencia de interacción con los usuarios de la interfaz.
▶ Especificar la secuencia de acciones de las tareas.

▶ Indicar en todo momento el estado de la aplicación.
▶ Definir los posibles mecanismos de control necesarios.
▶ Mostrar cómo se ve afectado el estado de la aplicación por el uso de los mecanismos de

control.
▶ Indicar la manera en que los usuarios interpretan el estado de la aplicación partiendo de

la información que proporciona la interfaz. Es muy importante que los usuarios puedan
saber en todo momento los posibles efectos de sus interacciones con la aplicación.
13. Pautas de diseño para

el aseguramiento de la
información
Cuando manejamos información debemos tener la certeza de que dichos datos son seguros,
confiables y disponibles cuando se necesiten.
El aseguramiento de esta información es el pilar sobre el que se construye la toma de decisio-

nes de una empresa.
El aseguramiento de la información podemos entenderlo como el uso de información con el fin

de proteger dicha información así como los sistemas de información y las redes.
Con esto se persigue preservar la integridad, autenticación, disponibilidad y confidenciali-

dad frente al riesgo de amenazas tanto locales como remotas.
El aseguramiento de la información se debe tener en cuenta en estos cuatro ámbitos diferentes:
▶ Aseguramiento de Datos. Se refiere a la calidad de los datos. Se debe verificar periódi-

camente que dichos datos sean fiables y efectivos.
96
▶ Aseguramiento de Procesos. Todos los procesos se nutren de información. Por lo tanto,

se debe gestionar que estos procesos manejen de forma correcta los datos así como que
solo se tenga acceso a la información realmente necesaria.
▶ Aseguramiento de Comportamiento. En muchas ocasiones los usuarios pueden in-

teractuar de manera incorrecta con la aplicación, tanto de manera inconsciente como
premeditada. Una buena interfaz debe asegurar que la interacción del usuario con la
aplicación se realiza de manera segura y controlada.
▶ Aseguramiento del Sistema de Gestión de la empresa. La información es el corazón

de todo sistema de gestión implantado en una empresa. Por lo tanto, la información se
debe salvaguardar en todo momento y habrá que revisar su consistencia e integridad
para evitar problemas en la gestión de los datos.
Recuerda:
Cada plataforma de programación que permita desarrollar interfaces debe ofrecer herramien-
tas que garanticen la seguridad de la información manejada.
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.
Se trata de diseñar contenidos relacionados y vinculados entre sí para facilitar el uso de la
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:

▶ Gráficos. Información visual que permite representar conceptos tanto en 2D como 3D.
▶ Imágenes. Información visual estática y digital que también puede representar ciertos
conceptos.
▶ Animaciones. Secuencias de imágenes con cierta velocidad para imitar movimiento.
▶ Vídeos. Muestran información amplia sobre conceptos con la posibilidad que el usuario
pueda parar, pausar o acelerar el proceso de visualización.
▶ Audio. Mensajes de voz explicativos o descriptivos de cualquier concepto.

www.cursosccc.com

Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 04

Cargado por

Información del documento

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

Tec Sup Desarrollo Aplicaciones Multiplataforma Desarrollo de Interfaces 04

Cargado por

Copyright:

Formatos disponibles

Desarrollo de

Queda rigurosamente prohibida, sin autori-

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA 71

▶ Investigar la normativa vigente sobre calidad enfocada a las interfaces.

▶ Estudiar la realización de pruebas tanto por expertos como con usuarios.

▶ Fácil de usar. Debe ser eficiente, libre de errores y veloz.

▶ Fácil de aprender. No debe necesitar mucho tiempo para aprender su funcionamiento

▶ Retroalimentación. Es muy importante que la interfaz pueda comunicar en todo mo-

Deberemos tener siempre en mente estos principios: organizar, economizar y comunicar.

▶ Facilidad de aprendizaje. La interfaz debe ser fácil de aprender.

▶ Recuerdo de uso. El uso de la interfaz debe ser fácil de recordar en el tiempo.

▶ Satisfacción. El grado de satisfacción que tiene la aplicación cuando el usuario la utiliza.

2.3. HCI (Human Computer

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

▶ El diseño centrado en el usuario (UCD).

▶ El diseño de la interfaz de usuario (UI).

▶ El diseño de la experiencia del usuario (UX).

Puedes consultar más información sobre HCI en el siguiente enlace:

2.4. Objetivo de la usabilidad

Podemos enumerar varios objetivos que tiene la usabilidad:

▶ Reducir el proceso de aprendizaje del usuario y servirle de ayuda.

▶ Optimizar el coste de diseño y mantenimiento de las aplicaciones.

▶ Mejorar la satisfacción del usuario y la calidad de la marca.

▶ Satisfacción. Gracias a la UX se puede aumentar la satisfacción del usuario al interactuar

▶ Diversión. Si la aplicación causa divertimento en el usuario, este aumentará el uso de

▶ Entretenimiento. Si algo es entretenido, al igual que divertido, provocará que su uso

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

▶ Estética. Si la aplicación tiene una apariencia cuidada y atractiva, la interacción con el

▶ Icono ISO. Símbolo

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

ISO 9126: Calidad del software y Métricas

Esta norma desarrolla el modelo de calidad en el software, presentando diferentes atributos

ISO 9241: Requisitos del software en relación

Permite gestionar los requerimientos y recomendaciones relacionados con características pro-

También permite mejorar la usabilidad en el entorno y los principios ergonómicos en el uso de

ISO 13407: Diseño centrado en el usuario

ISO 14915: Ergonomía del software

Estas características se pueden dividir en los siguientes tres tipos:

▶ Efectividad. Mide el grado de éxito de un objetivo concreto alcanzado.

▶ Eficiencia. Mide el esfuerzo necesario para lograr un objetivo.

▶ Satisfacción. Mide el grado de satisfacción del usuario.

Una vez que se recogen los resultados se procede a su análisis.

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

• El tiempo que se necesita para realizar una tarea o grupo de tareas.

• El número de veces que es necesario volver atrás en la aplicación por encontrarse

▶ Planificar el proceso de recogida de los datos.

El objetivo principal de estas pruebas es poder detectar elementos de diseño de la interfaz

Existen varios tipos de pruebas realizadas por expertos:

▶ Evaluación heurística. Se evalúan usando técnicas heurísticas de diseño.

▶ Inspección de consistencia. Se realiza una inspección con la ayuda de un conjunto de

Posteriormente, estos análisis son puestos en común en un equipo de evaluación y se busca

▶ Inspección formal de usabilidad. Es una técnica consistente en la evaluación de un

Mediante este análisis se intentan descubrir las fortalezas y debilidades de la aplicación,

• El diseño: color, vocabulario, presentación...

7. Pruebas con usuarios;

cualitativa como cuantitativa.

Los cuestionarios pueden ser también online en tres posibles formatos:

▶ Colgados desde una página web.

▶ Enviados por correo electrónico al grupo de usuarios concreto.

▶ Puestos en algún grupo de noticias.

En todos los casos vistos, se suele usar una muestra de 5 a 10 usuarios.

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA

▶ Familiaridad del usuario. Debemos tener en cuenta que el ordenador, la interfaz y el

Se debe ofrecer al usuario el ambiente flexible que le permita aprender rápidamente a