Diseño de Interfaces-Usabilidad

RA4: Diseo y usabilidad de interfices
Desarrollo de Interfices
CFGS: Desarrollo de Aplicaciones Multiplataforma
Introduccin
Por qu la usabilidad?
Cmo medimos la usabilidad?
Indice
Percepcin de los usuarios
Beneficios de la usabilidad

Atributos de la usabilidad
Mtricas de la usabilidad
Tipos de pruebas
Estndares Internacionales
Cmo aplicamos la usabilidad?

Pautas
Pautas
Pautas
Pautas
de
de
de
de
diseo:
diseo:
diseo:
diseo:
Estructura del interfaz

Aspecto del interfaz
Elementos interactivos
Secuencia de control
Introduccin
Introduccin
El usuario debe aprender a utilizar la mquina mediante el

interfaz.
Si la interfaz de la mquina es complicada, aumentan las
posibilidades de que el usuario cometa errores en su uso.
La usabilidad permite que la interfaz reduzca la problemtica
de la interaccin de la persona con el ordenador.
Introduccin
Percepcin de los usuarios
De los usuarios, Qu percepcin queremos de nuestro programa?

Usar este programa aumenta mi eficacia de mi trabajo.
Usar este programa logro hacer ms rpido mis tareas.
Usar este programa reduce los puntos crticos de mi programa.
Usar este programa hace ms fcil mi trabajo.
Encuentro til usar este programa.
Introduccin
Beneficios de la usabilidad
Las empresas, Qu beneficios esperan de la usabilidad?

Reducir los costes de uso.
Ajustarse a las necesidades del usuario.
Mejorar la productividad del usuario.
Reducir esfuerzo de uso: ampliar funcionalidades.
Reducir costes de aprendizaje.

Reducir costes del soporte al usuario.
Mejorar la satisfaccin de los usuarios.
Introduccin
Ejemplo: sin usabilidad
Interfaz difcil de usar, debe ser mejorada:

http://www.tworivers.com/portfolio13.html
Introduccin
Ejemplo: con usabilidad
Introduccin
Introduccin
Qu queremos?:
Queremos saber si nuestra aplicacin est conforme a los
criterios estndar de usabilidad.
Queremos saber si nuestra aplicacin est conforme la
usabilidad que espera el usuario.
Qu hacemos?:
Establezcamos un criterio de valoracin de las opiniones y
usos de los usuarios
Establezcamos cmo y cundo debemos valorar la usabilidad.
Introduccin
Atributos de la usabilidad
Qu atributos podemos otorgar a la usabilidad?
Tiempo (o eficiencia): la duracin requerida por el usuario
para finalizar la actividad
Exactitud (o efectividad): se miden el nmero de errores
cometidos por el usuario
Recuerdo (o facilidad a ser recordado): el usuario capaz de
recordar acerca de la interfaz despus de un tiempo sin usarla.
Tolerancia al Error: Los errores cometidos por el usuario
fueron recuperables.
Respuesta emocional (o satisfaccin): qu sensacin se
deja al usuario al finalizar su uso.
Introduccin
Mtricas: tipos de datos

Para medir la usabilidad realizamos pruebas de usabilidad. Qu
mtricas usan estas pruebas?
Datos cualitativos: ofrecen informacin de la calidad
expresada de manera verbal o escrita por los usuarios
investigados. Sern preguntas con respuesta abierta que nos
aportarn la opinin real y subjetiva del usuario.
Datos cuantitativos: ofrecen datos que se pueden
cuantificar. Estos datos se podrn tratar con mtodos
estadsticos y sern el resultado de preguntas con resultados
numricos o booleanos (si o no).
Introduccin
Mtricas: datos cuantitativos

Qu tipo datos cuantitativos hacen referencia a la usabilidad?:
Frecuencia de uso de las opciones.
Nmero de errores cometidos por el usuario al usar el interfaz.
Nmero de acciones completadas por el usuario en un
intervalo de tiempo.
Tiempo dedicado a cada interfaz antes de elegir la mejor
opcin.
Tiempo o nmero de veces que se consult la documentacin
o la ayuda.
Nmero de sugerencias o crticas al interfaz.
A partir de estas mtricas podremos valorar los atributos de la
usabilidad.
Introduccin
Tipos de pruebas
Test exploratorio: Se usar en las fases iniciales del
desarrollo con el objeto de valorar la eficiencia inicial as como
detectar errores tempranos y establecer en las conclusiones
posibles mejoras.
Test de evaluacin: Se usar en las fases iniciales e
intermedias de desarrollo. Servir para evaluar que los errores
detectados en los test exploratorios no se han propagado y las
posibles mejoras definidas se han aplicado.
Test de validacin: Se realiza en la fase final de desarrollo.
Servir para evaluar que el proyecto final cumple los requisitos
predeterminados de usabilidad que se establecieron en el
proyecto inicial. Certificar la usabilidad del programa.
Test de comparacin: Se realiza durante todas las fases de
desarrollo. Compara nuestro producto con el de la
competencia. Se realiza en paralelo con otros tests.
Introduccin
Estndares Internacionales
Para medir la usabilidad de una interfaz realizamos pruebas de
usabilidad. Con qu normas se establecen estas pruebas?
ISO 9126: Esta norma desarrolla unos mnimos de calidad del
software, proponiendo unos estndares acerca la
funcionalidad, fiabilidad, eficiencia, facilidad de
mantenimiento y portabilidad.
ISO 9241: Aporta caractersticas acerca del entorno que debe
mejorar la usabilidad y los principios ergonmicos. La norma
tiene distintos aadidos, destacando las partes de la 10 a la 12
y la 17, que afectan a desarrolladores de interfaces as como a
los responsables de evaluar la calidad de los mismos.
ISO 13407: Esta norma explica las actividades necesarias
para desarrollar interfaces centradas en el usuario durante
todas las etapas de desarrollo del programa. El destinatario de
la norma son los jefes de proyecto.
Introduccin
Introduccin
El elemento bsico de interaccin entre el usuario y nuestra
aplicacin es la interfaz grfica de usuario (GUI, en ingls:
graphical user interface) y es dnde centraremos nuestros esfuerzos
de aprender acerca la usabilidad.
La interaccin del usuario con una mquina con interfaz grfica fue
conceptualizada por Doug Engelbart en una presentacin histrica
en 1968. Pero estos conceptos tuvieron que esperar al lanzamiento
de Xerox Star en 1981 para materializarse.
Muchos de los elementos de usabilidad de los GUI que hoy damos
por sentados como los atajos de teclado, el uso de ventanas o
iconos provienen del interfaz usado por el ordenador Xerox Star.
Introduccin
The Xerox Star: A Retrospective (IEEE, 1989)
Introduccin
Pautas de diseo: Estructura del interfaz
La organizacin de ventanas de Xerox Star es la estndar. Este tipo

de organizacin esta formada por:
Ventana principal:Representa la actividad primaria de la
aplicacin, da acceso a todos los conjuntos de acciones de la
aplicacin. Su abertura o su cierre afecta a la aplicacin.
Ventanas secundarias: ventanas que permanecen abiertas en
momentos especficos y se centra para trabajar en un conjunto
de datos o objetos de la ventana principal.
Ventanas de dilogo: centradas en momentos espordicos en
los que se requiere que el usuario introduzca datos o realice
acciones muy concretas.
Introduccin

Recomendaciones acerca del diseo de ventanas:
Las ventanas secundarias nunca debern de contener
actividades primarias.
Las ventanas de dilogo tienen que ofrecer la posibilidad de
cancelar sin consecuencia alguna.
La ventana principal debe estar siempre encima de cualquier
ventana principal de otra aplicacin.
Evitar sobrecargar la ventana principal con actividades que
pueden ser secundarias.
El uso de dilogos debe ser exclusivo para:
Pedir
Pedir
Pedir
Pedir
confirmacin de operacin peligrosa.

parmetros para insertarlos o actualizarlos.
decisin del usuario ante situaciones excepcionales.
confirmacin acerca una operacin excepcional.
Introduccin

La organizacin de mens permite al usuario navegar elegir la
accin a realizar. Los distintos tipos de mens son:
Mens en barras: horizontales o verticales muestran las
posibles acciones.
Mens desplegables: al hacer clic, despliegan las posibles
acciones.
Barras de herramientas: mens, con ventana propia, que
muestran las acciones posibles.
Mens en pantalla completa
Men en cascada: mens que muestran las acciones a medida
que el ratn se sita en ellas.
Los distintos tipos pueden entremezclarse entre si.
Introduccin
Recomendaciones acerca del diseo de mens:

No sobrecargar los mens con demasiados elementos.
Usar palabras comunes con las aplicaciones del entorno.
Agrupar los elementos de manera lgica.
Permitir al usuario personalizar los elementos incluidos en el
men.
Unos mens bien estructurados pueden ser rpidos de aprender y
fciles de usar.
Introduccin
Pautas de diseo: Aspecto del interfaz

Reducir la carga de memoria del usuario:
Mostrar slo la informacin que el usuario necesita: no
sobrecargar el interfaz con informacin complementaria.
Hacer una presentacin visual concisa. Usar metforas de la
vida real: lupa implica ampliar, verde implica correcto.
Indicar dnde se encuentra, que est haciendo y que puede
hacer. Ofrecer posibilidad de retroceder o volver.
Reconocer antes que recordar: listas con posibles objetos es
mejor opcin que una casilla en blanco.
Asociar acciones a objetos: men contextual (clic derecho
sobre objeto).
Introduccin
Cada sistema operativo tiene su propia gua de estilo, por ejemplo:

Google Android [ir]
Apple iOS [ir]
Microsoft 8 Apps [ir]
El objetivo es reducir la carga de memoria del usuario mediante un
uso coherente del entorno, el aspecto visual se mantendr idntico
en todas aplicaciones de ese entorno.
Las guas de estilo no aportan una mejora de usabilidad por si
solas ni su uso es obligatorio pero s altamente recomendado.
Introduccin
Introduccin
Pautas de diseo: Elementos interactivos

Uno de los elementos interactivos clave de la interfaz son los
botones de comando:
Botones de relieve: son los botones ms comunes, el nombre
proviene del relieve respecto al resto de la interfaz. Cuando el
usuario selecciona uno, se crea el efecto de hundimiento del
mismo.
Radio Buttons: ofrece al usuario una lista de elementos con
un crculo a su izquierda o derecha para que el usuario marque
la seleccin elegida. Slo se puede elegir un elemento de la
lista.
Check Box: Similares a los Radio Button, cambiando su
aspecto de crculo a cuadrado y permitiendo una seleccin
mltiple de elementos de la lista.
Introduccin

Principales propiedades de los Radio Buttons o Check Box:
Propiedad
Name
Value
Checked
Disabled
Descripcin
Nombre que compartirn todos los elementos de
una lista de Radio Buttons o Check Box.
Es la propiedad que indica el valor del control. Este
valor estar asociado a cada opcin de la lista de
Radio Buttons o Check Box.
Indicar si la opcin est o no seleccionada. Con el
valor booleano TRUE indicar que la opcin esta
seleccionada, y con el FALSE que no lo est.
Bloquear el control y actara como si el elemento
no existiera
Introduccin
Otro elemento importante de la interactividad son las listas

desplegables:
Drop-down list: men desplegable dnde se ofrece una lista
con las diferentes posibilidades para poder escoger una opcin
dentro de la lista. Sin posibilidad de escribir.
List box: men no desplegable que ofrece una visin de la
lista con todos los elementos disponibles.
Combo box: men desplegable que a diferencia del
Drop-down list nos permite escribir a la vez que vemos las
opciones posibles.
Introduccin
Principales propiedades de las listas desplegables del tipo Combo

box:
Propiedad
Name
Text
SelectedValue
Items
Descripcin
Identifica el Combo box. Esta propiedad est presente en todos los controles.
Contiene una cadena que contiene el texto del control. Ser el texto asociado al control.
Ser el valor seleccionado en el Combo box en el
momento determinado de la consulta.
Ser el objeto que contiene la coleccin de elementos del Combo box.
Introduccin
Pautas de diseo: Secuencia de control

Cmo los eventos estn relacionados entre si? Como el usuario
navega entre las ventanas y los contenidos?
Suceso nico: No hay secuencia entre distintos eventos.
Lineal: Secuencia lineal de eventos.
Lineal ramificada: Secuencia lineal invariante con ramas
ocasionales que vuelven al evento principal.
Circular: Secuencia fija con principio y fin en el mismo punto.
Indexado: Distintos opciones que conducen a un evento y
despus de nuevo al estado inicial.
Hipermedia: Desde cualquier evento se puede ir a cualquier
otro, en cualquier momento.
Introduccin
Pautas de diseo: Secuencia de control
Recomendaciones acerca de las secuencias de control:

Dejar que el usuario marque el ritmo y orden de la secuencia.
Facilitar siempre opciones por defecto.
Usar mens siempre dnde sea posible.
Proveer controles de accin mltiple o redundante.
Permitir al usuario que pueda adaptar el programa a su
medida.
Introduccin
Bibliografa
Norman, Donald: The Design of Everyday Things (1988)

Nielsen, Jackob: Usability Engineering, Morgan Kaufmann
(1993)
Wilson, Stephen: The aesthetics and practice of designing
interactive computer events (1994)
Garca, Marcel: Disseny dinterfices. Confecci de interficies
dusuari (2010)
Engelbart, Doug:
http://www.dougengelbart.org/firsts/dougs-1968-demo.html

Diseño de Interfaces-Usabilidad

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Diseño de Interfaces-Usabilidad

Caricato da

Copyright:

Formati disponibili

RA4: Diseo y usabilidad de interfices

CFGS: Desarrollo de Aplicaciones Multiplataforma

Cmo medimos la usabilidad?

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Estructura del interfaz

Cmo aplicamos la usabilidad?

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

El usuario debe aprender a utilizar la mquina mediante el

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Percepcin de los usuarios

De los usuarios, Qu percepcin queremos de nuestro programa?

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Las empresas, Qu beneficios esperan de la usabilidad?

Reducir costes de aprendizaje.

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Ejemplo: sin usabilidad

Interfaz difcil de usar, debe ser mejorada:

Ejemplo: con usabilidad

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Mtricas: tipos de datos

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Mtricas: datos cuantitativos

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

The Xerox Star: A Retrospective (IEEE, 1989)

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Pautas de diseo: Estructura del interfaz

La organizacin de ventanas de Xerox Star es la estndar. Este tipo

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Pautas de diseo: Estructura del interfaz

confirmacin de operacin peligrosa.

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Pautas de diseo: Estructura del interfaz

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Pautas de diseo: Estructura del interfaz

Recomendaciones acerca del diseo de mens:

Cmo medimos la usabilidad?

Cmo aplicamos la usabilidad?

Pautas de diseo: Aspecto del interfaz

Cmo medimos la usabilidad?