Diseño de Interfaz de Usuarios

71
INTRODUCCIÓN Los diseñadores de interfaces de usuario profesionales siempre dicen que la interfaz de usuario debería ser la primera cosa a diseñar a la hora de desarrollar una aplicación, y que los programadores son incapaces de llevar a cabo este tipo de diseño. Dicen que sólo puede hacerse por profesionales expertos en interfaces de usuario; los proyectos de software de código abierto no tienen acceso a este tipo de gente, y por lo tanto no pueden ser verdaderamente usables. Esto no significa que simplemente deberíamos darlo todo por perdido en el terreno de las interfaces de usuario. Viendo la calidad de las interfaces de muchas aplicaciones comerciales, el tener expertos en usabilidad en la nómina tampoco garantiza una buena interfaz. El esfuerzo, el conocimiento y pensar en la interfaz puede mejorar la usabilidad de una aplicación de manera radical. Puede que solo encontremos un máximo local en lugar del global, pero incluso si solo conseguimos eso ya es un paso en la dirección correcta.

description

Documentacion

Transcript of Diseño de Interfaz de Usuarios

Page 1: Diseño de Interfaz de Usuarios

INTRODUCCIÓN

Los diseñadores de interfaces de usuario profesionales siempre dicen que la interfaz

de usuario debería ser la primera cosa a diseñar a la hora de desarrollar una

aplicación, y que los programadores son incapaces de llevar a cabo este tipo de diseño.

Dicen que sólo puede hacerse por profesionales expertos en interfaces de usuario; los

proyectos de software de código abierto no tienen acceso a este tipo de gente, y por lo

tanto no pueden ser verdaderamente usables.

Esto no significa que simplemente deberíamos darlo todo por perdido en el terreno de

las interfaces de usuario. Viendo la calidad de las interfaces de muchas aplicaciones

comerciales, el tener expertos en usabilidad en la nómina tampoco garantiza una

buena interfaz. El esfuerzo, el conocimiento y pensar en la interfaz puede mejorar la

usabilidad de una aplicación de manera radical. Puede que solo encontremos un

máximo local en lugar del global, pero incluso si solo conseguimos eso ya es un paso

en la dirección correcta.

Page 2: Diseño de Interfaz de Usuarios

INTERFAZ DE USUARIO:

La interfaz de usuario es el medio con que el usuario puede comunicarse con un

equipo o una computadora, y comprende todos los puntos de contacto entre

el usuario y el equipo. Normalmente suelen ser fáciles de entender y fáciles de

accionar.

Las interfaces básicas de usuario son aquellas que incluyen elementos como menús,

ventanas, teclado, ratón, los beeps y algunos otros sonidos que la computadora hace, y

en general, todos aquellos canales por los cuales se permite la comunicación entre el

ser humano y la computadora. La mejor interacción humano-máquina a través de una

adecuada interfaz (Interfaz de Usuario), que le brinde tanto comodidad, como

eficiencia.

Los programas son usados por los usuarios con distintos niveles de conocimientos,

desde principiantes hasta expertos. Es por ello que no existe una interfaz válida para

todos los usuarios y todas las tareas. Debe permitirse libertad al usuario para que elija

el modo de interacción que más se adecué a sus objetivos en cada momento. La

mayoría de los programas y sistemas operativos ofrecen varias formas de interacción

INTERFAZ DE USUARIO.

PUNTOS DE VISTA EN UNA INTERFAZ DE USUARIO

El del usuario, el del programador y el del diseñador (analogía de la construcción de

una casa). Cada uno tiene un modelo mental propio de la interfaz, que contiene los

conceptos y expectativas acerca de la misma, desarrollados a través de su experiencia.

El modelo permite explicar o predecir comportamientos del sistema y tomar las

decisiones adecuadas para modificar el mismo. Los modelos subyacen en la

interacción con las computadoras, de ahí su importancia.

Page 3: Diseño de Interfaz de Usuarios

Modelo del usuario: El usuario tiene su visión personal del sistema, y espera

que éste se comporte de una cierta forma. Se puede conocer el modelo del

usuario estudiándolo, ya sea realizando test de usabilidad, entrevistas, o a

través de una realimentación. Una interfaz debe facilitar el proceso de crear un

modelo mental efectivo.

Para ello son de gran utilidad las metáforas, que asocian un dominio nuevo a

uno ya conocido por el usuario. Un ejemplo típico es la metáfora del escritorio,

común a la mayoría de las interfaces gráficas actuales.

Modelo del diseñador: El diseñador mezcla las necesidades, ideas, deseos del

usuario y los materiales de que dispone el programador para diseñar un

producto de software. Es un intermediario entre ambos.

El modelo del diseñador describe los objetos que utilizan el usuario, su

presentación al mismo y las técnicas de interacción para su manipulación.

Consta de tres partes: presentación, interacción y relaciones entre los objetos.

Representación del modelo del diseñador: el look-and-feel iceberg, de IBM

(1992)

Page 4: Diseño de Interfaz de Usuarios

La presentación es lo que primero capta la atención del usuario, pero más tarde pasa a

un segundo plano, y adquiere más importancia la interacción con el producto para

poder satisfacer sus expectativas. La presentación no es lo más relevante y un abuso

en la misma (por ejemplo, en el color) puede ser contraproducente, distrayendo al

usuario.

La segunda parte del modelo define las técnicas de interacción del usuario, a través de

diversos dispositivos.

La tercera es la más importante, y es donde el diseñador determina la metáfora

adecuada que encaja con el modelo mental del usuario. El modelo debe comenzar por

esta parte e ir hacia arriba. Una vez definida la metáfora y los objetos del interfaz, los

aspectos visuales saldrán de una manera lógica y fácil.

Estos modelos deben estar claros para los participantes en el desarrollo de un

producto, de forma que se consiga una interfaz atractiva y a la vez efectiva para el

trabajo con el programa.

Una interfaz no es simplemente una cara bonita; esto puede impresionar a primera

vista pero decepcionar a la larga. Lo importante es que el programa se adapte bien al

modelo del usuario, cosa que se puede comprobar utilizando el programa más allá de

la primera impresión.

Modelo del programador: Es el más fácil de visualizar, al poderse especificar

formalmente. Está constituido por los objetos que manipula el programador,

distintos de los que trata el usuario (ejemplo: el programador llama base de

datos a lo que el usuario podría llamar agenda). Estos objetos deben

esconderse del usuario.

Los conocimientos del programador incluyen la plataforma de desarrollo, el

sistema operativo, las herramientas de desarrollo y especificaciones. Sin

embargo, esto no significa necesariamente que tenga la habilidad de

proporcionar al usuario los modelos y metáforas más adecuadas. Muchos no

Page 5: Diseño de Interfaz de Usuarios

consideran el modelo del usuario del programa, y sí sus propias expectativas

acerca de cómo trabajar con la computadora.

TIPOS DE INTERFACES DE USUARIO

Dentro de las Interfaces de Usuario se puede distinguir básicamente los siguientes

tipos:

INTERFACES DE LENGUAJE NATURAL

Las interfaces de lenguaje natural son quizás el sueño e ideal de usuarios

inexpertos, debido a que permiten a usuarios interactuar con la computadora en

su lenguaje cotidiano o natural. No se requieren habilidades especiales de

usuarios, quienes interactúan con la computadora mediante lenguaje natural.

La pantalla descrita en la figura anterior se menciona tres preguntas de lenguaje

natural de tres aplicaciones diferentes. Observe que la interacción con cada una

parece muy fácil. Por ejemplo, la primera frase —"Mencione todos los

vendedores de quienes se conocen sus cuotas este mes"— parece sencilla.

Las sutilezas e irregularidades que residen en las ambigüedades del lenguaje

natural producen un problema de programación sumamente exigente y

LINEAS DE RECORRIDO VISUAL

Page 6: Diseño de Interfaz de Usuarios

complejo. Los intentos por interactuar con lenguaje natural para algunas

aplicaciones en las cuales cualquier otro tipo de interfaz no es factible (por decir,

en el caso de un usuario que está incapacitado) se está obteniendo con algo de

éxito; sin embargo, estas interfaces normalmente son caras. Los problemas de

implementación y la demanda extraordinaria en los recursos de informática

hasta ahora han mantenido las interfaces de lenguaje natural a un mínimo. Sin

embargo, la demanda existe y muchos programadores e investigadores están

trabajando diligentemente en las interfaces de lenguaje natural. Es una área de

crecimiento y, por lo tanto, merece supervisión continua. Algunos sitios Web, tal

como Ask Jeeves (www.askjeeves.com), usan una interfaz natural para que los

usuarios introduzcan su consulta de búsqueda. Cuando la consulta se introduce,

Ask Jeeves responde con una lista de consultas que coincide con la pregunta que

el usuario introdujo.

INTERFACES DE PREGUNTA Y RESPUESTA

En una interfaz de pregunta y respuesta, la computadora despliega en pantalla

una pregunta para el usuario. Para interactuar, el usuario introduce una

respuesta (mediante pulsaciones del teclado o un clic del ratón) y la

computadora después actúa en esa información de entrada de acuerdo con su

programa, normalmente pasando a la siguiente pregunta.

Page 7: Diseño de Interfaz de Usuarios

En la figura anterior se muestra un tipo de interfaz de pregunta y respuesta

denominado cuadro de diálogo. Un cuadro de diálogo actúa como una interfaz de

pregunta y respuesta dentro de otra aplicación, en este caso un diagrama PERT

para un proyecto de análisis de sistemas para Bakerloo Brothers. Observe que el

rectángulo redondeado para "Sí" está resaltado, lo que indica que es la respuesta

más común para esta situación. La interfaz principal para esta aplicación no

necesariamente debe ser de pregunta y respuesta. Más bien, al incorporar un

cuadro de diálogo, el programador ha incluido una interfaz de fácil uso dentro de

una más complicada.

Los asistentes usados para instalar software son un ejemplo común de una

interfaz de pregunta y respuesta. El usuario responde a las preguntas acerca del

proceso de instalación, tal como dónde instalar el software o características.

Otro ejemplo común es el uso del Asistente de Office usado en los productos de

Microsoft. Cuando el usuario necesita ayuda, el Asistente de Office hace

preguntas y reacciona a las respuestas con preguntas adicionales diseñadas para

limitar el alcance del problema. Los usuarios que no están familiarizados con

aplicaciones particulares o no están informados sobre un tema podrían

encontrar interfaces de pregunta y respuesta más cómodas, ganando

rápidamente confianza a través de su éxito.

INTERFAZ DE MENUS

Una interfaz de menús adquiere apropiadamente su nombre de la lista de

platillos que se pueden seleccionar en un restaurante. De forma similar, una

interfaz de menú proporciona al usuario una lista en pantalla de las selecciones

disponibles. En respuesta al menú, un usuario está limitado a las opciones

desplegadas. El usuario no necesita conocer el sistema pero tiene que saber qué

tarea se debe realizar. Por ejemplo, con un menú típico de procesamiento de

texto, los usuarios pueden escoger opciones para editar, copiar o imprimir. Sin

embargo, para utilizar el mejor menú los usuarios deben saber qué tarea desean

desempeñar.

Page 8: Diseño de Interfaz de Usuarios

Los menús no dependen del hardware. Las variaciones abundan. Los menús se

establecen para usar el teclado, lápiz óptico o el ratón. Las selecciones se pueden

identificar con un número, carta o palabra clave. La consistencia es importante

en el diseño de una interfaz de menú.

Los menús también se pueden ocultar hasta que el usuario quiera usarlos.

La figura muestra cómo se usa un menú desplegable. Los menús se pueden

anidar dentro de otro para llevar a un usuario a las opciones de un programa.

Los menús anidados permiten a la pantalla aparecer menos desordenada, la cual

es consistente con el adecuado diseño. También permiten a usuarios evitar ver

opciones de menú en las que no están interesados. Los menús anidados también

pueden mover rápidamente a los usuarios a través del programa.

Los menús de GUI se usan para controlar el software de PC y tienen los

siguientes lineamientos:

1. Siempre se despliega la barra de menú principal.

Page 9: Diseño de Interfaz de Usuarios

2. El menú principal usa palabras simples para los artículos del menú. Las

opciones de menú principales siempre despliegan menús desplegables

secundarios.

3. El menú principal debe tener opciones secundarias agrupadas en grupos

similares de características.

4. Los menús desplegables que se presentan cuando se hace clic en un artículo

de menú principal con frecuencia consisten en más de una palabra.

5. Estas opciones secundarias desempeñan acciones o despliegan artículos de

menú adicionales.

6. Los artículos de menú en gris no están disponibles para la actividad actual. Un

menú de objeto, también llamado menú desplegable independiente, se despliega

cuando el usuario hace clic en un objeto de la GUI con el botón derecho del ratón.

Estos menús contienen artículos específicos para la actividad actual y la mayoría

es funciones duplicadas de artículos de menú principales.

INTERFACES DE FORMULARIO (FORMULARIOS DE ENTRADA/SALIDA)

Las interfaces de formulario consisten de formularios en pantalla o formularios

que se basan en la Web que despliegan campos que contienen datos o

parámetros que necesitan ser comunicados al usuario. El formulario a menudo

es un facsímil de un formulario impreso que ya es familiar para el usuario. Esta

técnica de interfaz también se conoce como método basado en el formulario y en

formularios de entrada/salida.

Page 10: Diseño de Interfaz de Usuarios

La figura muestra una interfaz de formulario. Un menú desplegable para el Núm.

de la parte introduce automáticamente una Descripción y un Precio de la unidad

para el artículo. Cuando el usuario pasa al campo Cantidad e introduce el

número de artículos a ser comprados, el software calcula automáticamente el

Precio extendido multiplicando la Cantidad y el Precio de la unidad.

Los formularios para las pantallas de despliegue se configuran para mostrar qué

información debe introducirse y dónde. Los campos en blanco requieren

información que se puede resaltar con caracteres inversos o intermitentes. Por

ejemplo, el usuario mueve el cursor de un campo a otro mediante la pulsación de

una tecla de flecha. Esta disposición permite moverse un campo hacia atrás o un

campo hacia adelante oprimiendo la tecla de flecha correspondiente. Los

formularios que se basan en la Web ofrecen la oportunidad de incluir

hipervínculos para ejemplos de formularios completados correctamente o para

ayuda extensa y ejemplos.

Los formularios de entrada para las pantallas se pueden simplificar

proporcionando valores predeterminados para los campos y permitiendo que

los usuarios modifiquen la información predeterminada si es necesario. Por

ejemplo, un sistema de administración de base de datos diseñado para mostrar

un formulario para introducir cheques podría proporcionar el siguiente número

secuencial de cheque como valor predeterminado cuando se exhibe un nuevo

formulario de cheque. Si faltan cheques, el usuario cambia el número de cheque

para reflejar el cheque real a ser introducido.

Page 11: Diseño de Interfaz de Usuarios

La entrada para los campos de pantallas de despliegue se puede restringir de

manera que, por ejemplo, los usuarios puedan introducir únicamente números

en un campo que solicita el número del seguro social o pueden introducir

únicamente letras donde se pide el nombre de una persona. Si los números son

la entrada donde sólo se permiten letras, la computadora podría alertar al

usuario que el campo se completó incorrectamente.

La ventaja principal de la interfaz de formulario de entrada/salida es que la

versión impresa del formulario proporciona documentación excelente. Muestra

etiquetas para cada campo así como también contexto para las entradas. Los

documentos que se basan en la Web se pueden enviar directamente al sistema

de facturación si se involucra una transacción o pueden ir directamente a la base

de datos del cliente si se está enviando una encuesta. Los formularios que se

basan en la Web hacen al usuario responsable por la calidad de los datos y hacen

disponible el formulario para completarlo y enviarlo en 24 horas, 7 días a la

semana, desde cualquier parte del mundo.

Hay algunas desventajas con los formularios de entrada/salida. La desventaja

principal es que los usuarios experimentados se podrían impacientar con estos

formularios y querrían formas más eficaces para introducir datos.

INTERFACES DE LENGUAJE DE COMANDOS

Una interfaz de lenguaje de comandos permite al usuario controlar la aplicación

con una serie de pulsaciones del teclado, comandos, frases o alguna secuencia de

estos tres métodos. Es una interfaz popular que es más refinada que las

discutidas anteriormente.

Page 12: Diseño de Interfaz de Usuarios

En la figura anterior se muestran dos ejemplos de la aplicación de lenguaje de

comandos. El primero muestra a un usuario que pide usar un archivo que

contiene datos de todos los vendedores y pide a la computadora desplegar todos

los apellidos, seguidos de los nombres, para todos los vendedores cuyas ventas

actuales [VENTAS ACTUALES) son mayores que sus cuotas. En el segundo

ejemplo, un usuario pide usar un archivo llamado TENDERO y dirige a la

computadora para calcular las mermas (MERMAS] restando el producto vendido

del producto comprado. Una vez hehco esto, el usuario pide regresar a la parte

superior del archivo e imprimirlo (LISTAR).

El lenguaje de comandos no tiene un significado inherente para el usuario y este

hecho lo hace bastante diferente a las otras interfaces discutidas hasta ahora.

Los lenguajes de comandos manipulan a la computadora como una herramienta

para permitir al usuario controlar el diálogo. El lenguaje de comandos ofrece al

usuario mayor flexibilidad y control. Cuando el usuario da una instrucción a la

computadora mediante lenguaje de comandos, se ejecuta de inmediato por el

sistema. Después el usuario podría proceder para dar otra instrucción. Los

lenguajes de comandos requieren memorizar las reglas de sintaxis, esto

generalmente es un obstáculo para los usuarios inexpertos. Los usuarios

experimentados tienden a preferir los lenguajes de comandos, posiblemente

porque les permite trabajar más rápido.

INTERFACES GRÁFICAS DE USUARIO

Las interfaces gráficas de usuario (GUIs) permiten la manipulación directa de la

representación gráfica en pantalla, la cual se puede realizar con la entrada del

teclado, una palanca de juego o el ratón. La manipulación directa requiere mayor

Page 13: Diseño de Interfaz de Usuarios

sofisticación del sistema que las interfaces vistas anteriormente. La clave para

las GUIs es la retro alimentación constante que proporcionan. La

retroalimentación continua en el objeto manipulado significa que se pueden

hacer rápidamente los cambios o incluso cancelar operaciones sin incurrir en

mensajes de error. El concepto de retro alimentación para los usuarios se

discute más a fondo en una sección más adelante.

La creación de GUIs representa un reto, debido a que se debe inventar un

modelo apropiado de realidad o un modelo conceptual aceptable de la

representación. El diseño de GUIs para uso en intranets, extranets y, aún más

urgente, en Web, requiere una planeación más cuidadosa (véase el capítulo 12

en el diseño de sitio Web). En general, los usuarios de sitios Web son

desconocidos para el diseñador, de modo que el diseño debe ser bien definido.

La elección de iconos, lenguaje e hipervínculos se vuelve un conjunto de

decisiones y suposiciones acerca de qué tipos de usuarios del sitio Web están

esperando atraer.

OTRAS INTERFACES DE USUARIO

Otras interfaces de usuario, aunque menos comunes que las discutidas

anteriormente, están ganando popularidad. Estas interfaces incluyen

dispositivos de indicación tal como el lápiz óptico, pantallas sensibles al tacto y

reconocimiento de voz y síntesis. Cada una de estas interfaces tiene sus propios

atributos especiales que corresponden de forma única a aplicaciones

particulares.

El lápiz óptico (un palo puntiagudo que parece pluma) se está volviendo popular

debido al nuevo software de reconocimiento de escritura y a los asistentes

digitales personales (PDAs). Los dispositivos Palm y Pocket/PC han sido un éxito

porque hacen muy bien un número limitado de cosas y se venden a un precio

bajo. Las computadoras portátiles como éstas incluyen un calendario, directorio,

Page 14: Diseño de Interfaz de Usuarios

agenda y block de notas. La entrada de datos también se facilita con una estación

de acoplamiento para que pueda sincronizar los datos con su PC.

Una PC de tableta es una computadora portátil con un lápiz óptico o con una

pantalla sensible al tacto. Es mucho más poderosa que una computadora portátil

pero pesa considerablemente más. Las PCs portátiles y de tableta se pueden

equipar con comunicación Wi-Fi incorporada o de Bluetooth. Las pantallas

sensibles al tacto permiten al usuario emplear un dedo para activar la pantalla.

Las pantallas sensibles al tacos son útiles en las pantallas de información

pública, tal como mapas de ciudades y sus sitios de interés publicados en el

vestíbulos de hoteles o las instalaciones de renta de automóvil. También se

pueden usar para explicar los dioramas en los museos y para localizar los sitios

de campamento en los parques estatales. Las pantallas sensibles al tacto no

requieren experiencia especial de los usuarios y son autónomas, no necesitan

ningún dispositivo de entrada especial que se podría romper o robar. El

reconocimiento de voz ha sido, durante mucho tiempo, el sueño de científicos y

escritores de ciencia ficción. Es intuitivamente atractivo, debido a que se

aproxima a la comunicación humana. Con el reconocimiento de voz, el usuario

habla con la computadora y el sistema puede reconocer los signos vocales de un

individuo, convertirlos y almacenar la entrada. Los sistemas de inventario de

reconocimiento de voz ya están en funcionamiento. Una ventaja de sistemas de

reconocimiento de voz es que pueden acelerar enormemente la entrada de datos

y dejan libres las manos del usuario para otras tareas. La entrada de voz todavía

agrega otra dimensión a la PC. Ahora es posible agregar equipo y software que

permitan a un usuario de PC hablar los comandos tales como "abrir archivo" o

"guardar archivo" para evitar usar el teclado o ratón. Las ventajas obvias de esta

tecnología son incrementar la exactitud y la velocidad de lo que ofrecen los

movimientos del ratón convencional, así como también la anulación de lesiones

de tensión repetitivas tal como el síndrome del túnel carpiano que puede

debilitar la muñeca y mano. Los dos desarrollos principales en el reconocimiento

de voz son (1) sistemas de lenguaje continuos, los cuales permiten entrada de

Page 15: Diseño de Interfaz de Usuarios

texto regular en los procesadores de texto y (2) la independencia del orador

para que cualquier número de personas pueda introducir comandos o palabras

en una estación de trabajo dada. Los productos Dragón NaturallySpeaking de

ScanSoft incluyen sistemas de dictado, sistemas de comandos y sistemas de texto

a voz. Dragón NaturallySpeaking fue el primer producto de reconocimiento para

la PC con un vocabulario amplio de voz continua. Ahora está disponible en una

versión de red para que el reconocimiento de voz se pueda compartir en la

organización. El vocabulario no es solamente una lista de ortografía, sino que

incluye información de uso de lenguaje independiente del orador y ruidos

acústicos, lo que representa un reconocimiento más exacto.

Un usuario puede dar una instrucción a la computadora y se ejecutará. En el

ejemplo mostrado

En la figura anterior, el usuario corrige una palabra desplegando un menú de

palabras alternativas que suenan igual.

Al evaluar las interfaces que ha escogido, debe tener en cuenta algunas normas:

Page 16: Diseño de Interfaz de Usuarios

1. El periodo de entrenamiento necesario para los usuarios debe ser

aceptablemente corto.

2. Los usuarios antes de su entrenamiento deben poder introducir comandos sin

pensar en ellos o sin consultar el menú de ayuda o el manual del usuario.

Mantener consistentes las interfaces en las aplicaciones ayuda mucho a este

respecto.

3. La interfaz debe ser perfecta para que haya pocos errores y los que ocurran no

sea por un mal diseño.

4. El tiempo que los usuarios y el sistema necesitan para recuperarse de los

errores debe ser corto.

5. Los usuarios poco frecuentes deben poder aprender a usar el sistema en poco

tiempo.

DISEÑO DE INTERFAZ DE USUARIO:

El Diseño de la Interfaz del Usuario es un Proceso Interactivo donde intervienen

usuarios y diseñadores con prototipos de la interfaz para decidir las características,

organización, apariencia y funcionamiento de la interfaz del usuario.

El diseño de la interfaz de usuario requiere el estudio de las personas y el

conocimiento tecnológico adecuado.

PROTAGONISTAS DE UNA INTERFAZ:

Page 17: Diseño de Interfaz de Usuarios

PREGUNTAS QUE DEBEN PLANTEARSE Y RESPONDERSE PARA EL DISEÑO DE LA INTERFAZ DE USUARIO:

¿Quién es el usuario?

¿Cómo aprende a interactuar con el nuevo sistema de cómputo?

¿Cómo interpreta la información que produce el sistema?

¿Qué espera del sistema? 

OBJETIVOS

Su objetivo es que las aplicaciones sean más atractivos y además, hacer que la

interacción con el usuario sea lo más intuitiva posible, conocido como el diseño

centrado en el usuario. En este sentido las disciplinas del diseño se encargan de que la

actividad a desarrollar se comunique y aprenda lo más rápidamente, a través de

Page 18: Diseño de Interfaz de Usuarios

recursos como la gráfica, los pictogramas, los estereotipos y la simbología, todo sin

afectar el funcionamiento técnico eficiente.

REGLAS PARA EL DISEÑO DE LA INTERFAZ:

1. Dar el control al usuario: Es decir un sistema que reaccione a las necesidades

del usuario y que le ayude a hacer las cosas. En muchos casos, el diseñador

introduce limitaciones y restricciones para simplificar la implementación de la

interfaz. Y el resultado puede ser una interfaz fácil de construir, pero frustrante

de utilizar.

Hay principios de diseño que permiten dar control al usuario:

Tener en consideración una interacción flexible.

Como diferentes usuarios tienen preferencias de interacción diferentes, se

deberán proporcionar diferentes selecciones.

Page 19: Diseño de Interfaz de Usuarios

Por ejemplo, un software que permita al usuario interactuar a través de

órdenes del teclado, con ratón, lápiz digitalizador, mediante órdenes para el

reconocimiento de voz, etc.

Sin embargo, no toda acción responde a todo mecanismo de interacción.

Por ejemplo: no se puede dibujar una forma compleja mediante órdenes del

teclado (o entrada de voz).

Permitir que la interacción del usuario se pueda interrumpir y deshacer.

Cuando un usuario se ve involucrado en una secuencia de acciones, debe poder

interrumpir la secuencia, para hacer cualquier otra cosa, (sin perder el trabajo

que se hubiera hecho anteriormente).

El usuario deberá también tener la posibilidad de «deshacer» cualquier acción.

Aligerar la interacción a medida que avanza el nivel de conocimiento y permitir

personalizar la interacción.

El usuario a menudo se encuentra haciendo la misma secuencia de

interacciones de manera repetida.

Se podría implementar un mecanismo de «macros» que permita al usuario

personalizar la interfaz y facilitar la interacción.

Ocultar al usuario ocasional los entretelones técnicos.

El usuario no tiene que conocer el sistema operativo, las funciones de gestión

de archivos, o cualquier otro secreto de la tecnología informática. La interfaz

no debe requerir nunca que el usuario interactúe a un nivel «interno» de la

máquina (teclear órdenes del sistema operativo desde el software de

aplicación).

Page 20: Diseño de Interfaz de Usuarios

2. Reducir la carga en la menoría del usuario:   Una interfaz de usuario bien

diseñada no dependerá de la memoria del usuario. Siempre que sea posible, el

sistema debe “recordar” la información pertinente y ayudar al usuario con un

escenario de interacción que le facilite el uso de la memoria.

Hay principios de diseño que permiten que una interfaz reduzca la

carga de memoria del usuario:

Reducir la demanda de memoria a corto plazo.

Cuando los usuarios se ven involucrados en tareas complejas, exigir una

memoria a corto plazo puede ser significativo.

La interfaz se debe diseñar para reducir los requisitos y recordar

acciones y resultados anteriores.

Esto se puede llevar a cabo mediante claves visuales que permitan al

usuario reconocer acciones anteriores sin tenerlas que recordar.

Establecer valores por defecto útiles.

El conjunto inicial de valores por defecto debe ser de utilidad para al

usuario, pero un usuario también debe tener la capacidad de especificar

sus propias preferencias.

Sin embargo, debe disponer de una opción de «reinicialización» que le

permita volver a definir los valores por defecto.

Definir atajos intuitivos o mnemotécnicos.

Cuando para diseñar un sistema se utiliza la mnemotécnica (por

ejemplo, alt-P para invocar la función de imprimir), ésta deberá ir unida

a una acción que sea fácil de recordar (por ejemplo, la primera letra de

la tarea que se invoca).

Page 21: Diseño de Interfaz de Usuarios

¿Cómo se pueden diseñar interfaces que reduzcan la carga de memoria

del usuario?.

El formato visual de la interfaz se deberá basar en una metáfora del

mundo real. Un Sistema de Administración puede utilizar la imagen de

la chequera para conducir al proceso de Pago de Facturas. Esto permite

que el usuario comprenda bien y no tenga que memorizar una secuencia

secreta de interacciones.

Desglosar la información de forma progresiva.

La interfaz debe organizarse de forma jerárquica.

Se debe presentar un objeto o comportamiento, primero, en un nivel

alto de abstracción. Y sólo después de que el usuario indique su

preferencia, seleccionando con el ratón, se mostrarán más detalles.

Lograr que la interfaz sea consistente Implica:

Toda la información visual este organizada de acuerdo con un estándar

de diseño que se mantenga en todas la presentaciones de pantalla.

La interfaz deberá adquirir y presentar la información de forma

consecuente.

Esto implica:

Que toda la información visual esté organizada de acuerdo con el diseño

estándar, que se mantiene en todas las presentaciones de pantallas;

Que todos los mecanismos de entrada sean limitados;

Que los mecanismos para ir de tarea a tarea se hayan implementado

consecuentemente.

Principios de diseño para construir una interfaz consecuente:

Permitir que el usuario realice una tarea en el contexto adecuado.

Page 22: Diseño de Interfaz de Usuarios

Muchas interfaces implementan capas complejas de interacciones con

docenas de imágenes de pantallas.

Es importante proporcionar indicadores (títulos de ventanas, iconos

gráficos, codificaciones en colores consecuentes) que permitan al

usuario conocer el contexto del trabajo que está llevando a cabo.

¿Cómo se pueden construir interfaces consecuentes?

Mantener la consistencia en toda la familia de aplicaciones.

Un conjunto de aplicaciones (o productos) debe implementar las

mismas reglas de diseño para mantener la consistencia en toda la

interacción.

Los modelos interactivos anteriores han esperanzado al usuario, no

realicemos cambios a menos que exista alguna razón convincente para

hacerlo.

Una vez que una secuencia interactiva se ha convertido en un estándar

impuesto, el usuario espera utilizar esta combinación en todas las

aplicaciones que se encuentre.

Un cambio podría originar confusión (si usamos alt-S para invocar la

función cambiar de tamaño).

Estas reglas son la base para los principios del diseño de la interfaz de

usuario que servirán de guía para esta actividad de diseño.

Page 23: Diseño de Interfaz de Usuarios

PRINCIPIOS PARA EL DISEÑO DE INTERFAZ

PRINCIPIO 1--JERARQUIZACION DE LA INFORMACION:

La información debería aparecer en un orden natural y lógico destacando lo más

relevante.

PRINCIPIO 2--

DIÁLOGOS SIMPLES Y NATURALES:

Cada unidad extra de información es una cosa más que hay que aprender y una

posible cosa más que el usuario no va a comprender para un usuario básico del

sistema.

Page 24: Diseño de Interfaz de Usuarios

PRINCIPIO 3 / LOS DIÁLOGOS NO DEBEN CONTENER INFORMACION IRRELEVANTE:

Usuarios suelen hacer un rápido barrido de ojos saltándose mensajes aburridos o

introductorios y buscando los términos resaltados e importantes

Page 25: Diseño de Interfaz de Usuarios

PRINCIPIO 4 -- CONTROLAR LA CANTIDAD DE TEXTO:

a los usuarios no les gusta leer en pantalla, de hecho leer desde una pantalla de

computador se reduce la velocidad de lectura, respecto a la del papel, en un 25 por

ciento.

PRINCIPIO 5 -- HABLAR EL LENGUAJE DEL USUARIO:

Los diálogos deberían ser expresados claramente en palabras, frases y conceptos

familiares al usuario, más que en términos orientados por el sistema.

Page 26: Diseño de Interfaz de Usuarios

PRINCIPIO 6 -- MINIMIZAR LA CARGA MEMORIA:

El usuario no debería tener que recordar información desde una pantalla a otra, las

instrucciones de uso del sistema deberían ser visibles o capaces de desplegarse

fácilmente.

PRINCIPIO 7 -- CONSISTENCIA:

Los usuarios no deberían tener que preguntarse si es que diferentes palabras ,

situaciones o acciones significan lo mismo. Potenciar elementos de única y común

lectura.

Page 27: Diseño de Interfaz de Usuarios

PRINCIPIO 8 -- RETROALIMENTACION:

El sistema debería siempre mantener a los usuarios informados sobre qué está

sucediendo, a través de retroalimentación adecuada en tiempos razonables.

PRINCIPIO 9 -- LA SALIDA DE EMERGENCIA:

Los usuarios usualmente escogen funciones del sistema por error y necesitan tener

una “salida de emergencia” claramente marcada, para poder dejar el estado indeseado

sin tener que pasar por un diálogo extendido.

Page 28: Diseño de Interfaz de Usuarios

PRINCIPIO 10 -- PERMITIR ATAJOS:

Los aceleradores, ignorados por los novatos, pueden acelerar la interacción del

usuario experto con el sistema.

PRINCIPIO 11 -- PREVENIR ERRORES:

Aún mejor que los mensajes de error, es un diseño que previene que los problemas

sucedan.

PRINCIPIO 12 --

AYUDA Y

DOCUMENTACION:

Aunque el ideal es que el sistema se puede

usar sin documentación, será a

veces necesario proveer ayuda y

documentación, tal tipo de información

debería ser fácil de buscar y navegar,

siendo focalizada en el usuario y sus tareas.

Page 29: Diseño de Interfaz de Usuarios

GUIAS BASICAS DE DISEÑO

Elementos de la imagen:

Utilizamos unos elementos como:

El punto

La línea

La forma

El tiempo

El tamaño

El formato

La composición

El punto

Elemento más simple

Posee gran fuerza atractiva como marca

Su situación puede establecer los ejes básicos de la estructura

Page 30: Diseño de Interfaz de Usuarios

Varios puntos juntos se perciben agrupados creando formas

Una secuencia de puntos crea una dirección de movimiento

Ayuda a dirigir la visión del observador

La línea

Organizar el espacio

Determinan ejes que delimitan zonas de atracción

Pueden crear texturas, profundidad y movimiento

Su dirección y grosor les da una expresividad

La forma

Page 31: Diseño de Interfaz de Usuarios

Define una superficie con unas dimensiones dadas

Formas básicas

Cuadrado, triángulo y círculo

Función: definir y organizar el espacio

Pueden simular tridimensionalidad cuando se representan en perspectiva

El tamaño

El tamaño establece un peso visual y una jerarquización por el espacio ocupado

por el elemento

Ayuda a crear sensación de profundidad mediante la perspectiva

El formato

Es la proporción del cuadro donde se muestra la imagen

Debe favorecer la adaptación al campo visual humano, buscando una armonía

entre las dimensiones

Page 32: Diseño de Interfaz de Usuarios

Influye decisivamente en la composición general y le da un significado

Los formatos horizontales son más estáticos

Los formatos verticales y circulares son más dinámicos

GUIAS PARA EL COLOR

Contribuye a la composición de la escena

Puede sugerir profundidad y tridimensionalidad

Puede modelar formas, superficies y volúmenes

Una característica importante es la tonalidad, que incide en la captación de las

formas:

Un tono claro parece más claro cerca de un tono oscuro y vic.

Un tono claro se expande rodeado de uno oscuro

Un tono oscuro se comprime rodeado de uno claro

Page 33: Diseño de Interfaz de Usuarios

Papel del color en la imagen:

Contribuye a la recreación del espacio

– Ayuda a simular la profundidad (sombreado)

– Sugiere distancia (difuminación progresiva del tono)

Dinamiza la composición por la interacción de colores

– Los colores claros son excéntricos y los oscuros concéntricos

– Los colores saturados producen un fuerte impacto y se

relacionan con sensaciones dinámicas y alegres. Los colores no

saturados transmiten sensaciones débiles y más sutiles

Transmite “sentimientos”

– Hay colores cálidos y fríos, ligeros y pesados, tristes y alegres

– La percepción del color es subjetiva y depende de factores

culturales

Formas de relación dinámica entre los colores:

Armonía: crea una composición con variaciones cromáticas suaves y

graduales relacionando colores afines

Contraste: yuxtapone colores diferentes entre sí, fundamentalmente

colores complementarios:

– Rojo-verde, amarillo-violeta, azul-naranja

– La composición llama fuertemente la atención

– Si es muy acentuado puede reducir la legibilidad al producirse

vibración

Es necesario conocer las relaciones cromáticas para combinar

correctamente los colores

Page 34: Diseño de Interfaz de Usuarios

Se puede simular el paso del tiempo en imágenes fijas organizando

adecuadamente el espacio:

Usando diferentes intensidades lumínicas, contrastes cromáticos, de

textura, de escala...

Jerarquizando los elementos representados, ordenándolos según una

cierta secuencia

Elegir combinaciones armoniosas de colores.

Usar

contrastes altos de

color entre letra y fondo

(alejamiento y acercamiento) para destacar

información, y bajos contrastes para ocultar información.

CONTRASTE

Fondo retrocede

CONTRASTE

Page 35: Diseño de Interfaz de Usuarios

Limitar el número de colores a 4 APP

GUIAS PARA LA TIPOGRAFIA

1) Para textos usar fuentes habituales y legibles para el usuario.

a b c d e f g h i j k l m n o p q r s t u v w x y z

A B C D E F G H I J K L M N Ñ O P

ARIAL

a b c d e f g h i j k l m n o p q r s t u v w x y z

A B C D E F G H I J K L M

VERDANA

a b c d e f g h i j k l m n o p q r s t u v w x y z

A B C D E F G H I J K L M

CENTURY GOTHIC

Page 36: Diseño de Interfaz de Usuarios

2) Combinar 2 a 3 tipos de fuentes como máximo respondiendo, cada una de estas, a

una función determinada.

3) Para presentación de textos usar mayúsculas y minúsculas (ritmo). El uso exclusivo

de mayúscula puede ser utilizado para destacar alguna palabra o función específica (el

uso único de mayúscula puede entorpecer la lectura / recomendable para títulos no

para textos extensos).

Page 37: Diseño de Interfaz de Usuarios

4) Para presentación de texto en pantalla utilizar un tamaño entre 8 a 12 puntos. El

tamaño puede ser utilizado como herramienta de jerarquización de la información

(títulos). Utilizar tipografías legibles (ni muy gruesas ni muy delgadas)

5) Evitar líneas /columnas demasiado cortas y /ó anchas (entre 10 y 12 palabras).

En caso que exista demasiada información escrita el interlineado deberá aumentar. Se

recomienda el uso de columnas uniformes información (justificado).

Page 38: Diseño de Interfaz de Usuarios

6) La pigmentación y tonalidad de la fuente responde a la jerarquización de la

información. Altos contrastes destacan la información y mejoran la calidad de lectura

mientras que bajos contrastes disimulan y entorpecen la presentación de la

información.

GUIAS PARA LA COMPOSICIÓN

1) Definir una malla única -retícula- sobre la cual se dispondrá la información y

elementos gráficos estableciendo un orden, uniformidad y coherencia sobre ejes

horizontales y verticales (invisibles al ojo). Se determinan áreas a utilizar y áreas

vacías.

Page 39: Diseño de Interfaz de Usuarios

2) Definir un orden de lectura para la información presentada consecuente con la

utilización de opciones de información( de izquierda derecha, de arriba abajo).

3) Definir un orden de lectura para la información presentada consecuente con la

utilización de opciones de información( de izquierda derecha, de arriba abajo).

4) Disponer los elementos y contrarrestar pesos visuales por medio de la ubicación y

elementos asignados de modo simétrico o asimétrico.

Page 40: Diseño de Interfaz de Usuarios

5) Evitar el desequilibrio visual: elementos no colaboran con la jerarquización

¿Dónde quiero situar la atención del usuario?

Evitar espacios innecesarios que confunden al usuario

Page 41: Diseño de Interfaz de Usuarios

GUIAS PARA USO DE ICONOGRAFIA Y VOLUMENES

1) Para permitir una mejor asociatividad entre el objeto, la representación del objeto

y la necesidad del usuario, se pueden utilizar geometrías básicas, en función de lo que

el usuario reconoce.

2) Toda forma debe responder a una función. (las formas tridimensionales destacan

por sobre las planas, las formas curvas son más cálidas y flexibles, las rectas son frías

y rígidas).

Page 42: Diseño de Interfaz de Usuarios

CONSIDERACIONES IMPORTANTES EN EL DISEÑO DE INTERFACES

Antes de abordar el proceso de diseño de interfaz del usuario se deben tratar algunas

consideraciones en el diseño que tienen que ser tomados en cuenta por los

diseñadores de interfaces de usuarios.

Interacción del usuario: Una interfaz coherente debe integrar la

interacción del usuario y la presentación de la información. Shneiderman (1998)

clasifica la interacción en 5 estilos primarios:

– Manipulación directa: Interacción directa con los objetos de la

pantalla, Rápida e intuitiva, Fácil de aprender, Ejemplo: para borrar un archivo, el

usuario lo arrastra al bote de basura. Videos de juegos, Puede ser difícil de

implementar, Sólo es adecuada donde hay una metáfora visual para las tareas y

objetos.

– Selección de menús: El usuario selecciona un comando de una lista de

posibilidades. Evita errores del usuario, Se requiere teclear poco, Lenta para usuarios

experimentados, Puede llegar a ser complejo si existen muchas opciones en el menú,

Ejemplo: muchos de los sistemas de propósito general.

– Llenado de formularios: Introducción de datos sencilla en los campos

de un formulario, Fácil de aprender, Ocupa mucho espacio en la

pantalla, Ejemplo: ingreso datos del cliente

– Lenguaje de comandos: Los usuarios emiten un comando especial y

los parámetros asociados para indicar al sistema que hacer, Poderoso y

flexible, Difícil de aprender, Administración de errores pobre, Ejemplo:

Sistemas operativos

– Lenguaje Natural: El usuario emite comandos en lenguaje natural,

Accesible a usuarios casuales, Fácil de ampliar, Se requiere teclear más,

Page 43: Diseño de Interfaz de Usuarios

Los sistemas de comprensión de lenguaje natural no son fiables, Ejemplo:

Sistemas de horarios, sistemas www de recuperación de la información.

VENTAJAS Y DESVENTAJAS DE LOS ESTILOS DE INTERACCIÓN

Estilo de

Interacción

Principales

Ventajas

Principales Desventajas Ejemplo de Aplicación

Manipulación

Directa

Interacción

rápida e

intuitiva fácil de

aprender

Puede ser difícil de

implementar. Solo es

adecuadas donde existe una

metáfora visual para las tareas

y objetivos.

Videos juegos,

sistemas CAD.

Selección de

menú.

Evitar errores

de los usuarios.

Se requiere

tipear poco.

Lenta para usuarios

experimentales. Puede llegar a

ser compleja si existen muchas

opciones en el menú.

La mayoría de los

sistemas de

propósitos general.

Relleno de

formularios.

Introducción de

datos sencillos.

Ocupa mucho espacio en la

pantalla. Causa problemas

cuando las opciones del

usuario no se ajustan a los

campos del formulario.

Control de stock.

Procesamiento de

préstamos

personales.

Lenguaje de

comandos

Poderosos y

flexibles

Difícil de aprender. Gestión

pobre errores.

Sistemas operativos.

Sistemas de

comandos y control.

Lenguaje

natural

Accesibilidad a

usuarios

causales. Fácil

de ampliar.

Se requiere teclear más. Los

sistemas de comprensión de

lenguaje natural no son

fiables.

Sistemas de

recuperación de

información.

Page 44: Diseño de Interfaz de Usuarios

Presentación de la Información: Puede ser la presentación directa

de la información de entrada (texto en un procesador de texto) o

presentación gráfica

Al separar el sistema de

presentación de los datos, se puede cambiar la representación sobre

la pantalla sin tener que cambiar el sistema de cómputo subyacente.

Para encontrar la mejor presentación de la información es necesario

conocer a los usuarios y la forma en que utilizarán el sistema.

Factores a considerar:

¿El usuario está interesado en información precisa o en las relaciones entre los

diferentes valores de los datos?

¿Qué tan rápido cambian los valores de la información?

¿Se indicarán de forma inmediata al usuario los cambios de un valor?

¿El usuario debe llevar a cabo una acción en respuesta a los cambios de la

información?

¿El usuario necesita interactuar con la información desplegada vía una interfaz

de manipulación directa?

¿La información que se va a desplegar es textual o numérica?

¿Son importantes los valores relativos de los elementos de la información?

Page 45: Diseño de Interfaz de Usuarios

No se debe suponer que por utilizar gráficos se hacen las vistas más interesantes. Los

gráficos ocupan un valioso espacio en la pantalla (una cuestión importante en los

dispositivos móviles) y pueden tardad bastantes tiempo en descargar si el usuario

está trabajando con una conexión de acceso telefónico lenta.

EL PROCESO DE DISEÑO DE LA INTERFAZ DEL USUARIO

Hay tres actividades esenciales en el Proceso de Diseño de Interfaz del

Usuario:

1. ANÁLISIS DEL USUARIO :

Consiste en comprender las tareas que realizan el usuario, su entorno de trabajo,

los otros sistemas que utilizan, la interacción entre los distintos compañeros de

trabajo, etc.

Lo crítico en el diseño de interfaces es analizar las actividades del usuario que

serán soportadas por el sistema.

Si no entendemos que quieren hacer los usuarios con el sistema, no podremos

diseñar eficazmente una interfaz.

Hay tres técnicas básicas en el análisis del usuario:

-- Análisis de tareas.

-- Entrevistas/cuestionarios.

-- Etnografía.

Las dos primeras se centran en el individuo y su trabajo.

La etnografía tiene una óptica más general y considera como interactúan las

personas como organizan su entorno de trabajo y como cooperan para resolver

sus problemas.

Page 46: Diseño de Interfaz de Usuarios

ANÁLISIS DE TAREAS

Se trata de descomponer, en detalle, qué trabajos comprende cada tarea que

debe realizarse.

Hay varias clases, la más conocida es el Análisis de Tareas Jerárquico (HTA).

Ayuda a identificar lo que cualquier persona hace para alcanzar un objetivo. Se

utilizan para redactar manuales de usuarios. Una tarea de alto nivel se divide

en subtareas y se identifican planes que indican que pasara en una situación

especial.

Se empieza con un objetivo del usuario, se dibuja una jerarquía que muestra

qué hay que hacer para alcanzar ese objetivo.

Problemas con HTA :

El esquema se hace largo y pesado si se le añaden detalles.

Este esquema es más apto para procesos secuenciales.

La notación es difícil para modelar tareas simultáneas o

entrelazadas.

Tampoco registra por qué las tareas se hacen de determinada forma

y nos da una visión parcial de las actividades del usuario.

Necesitamos más información para entender mejor los

requerimientos de diseño.

ENTREVISTAS:

La información para los HTA recopila por medio de observación y entrevista

con los usuarios. Cuando diseñamos las entrevistas, hay que permitir que el

usuario proporcione información que piense que es importante.

No ceñirse a una lista cerrada de preguntas.

Las preguntas deben ser abiertas y animar al usuario a que diga no solo lo que

hace sino también porque lo hace.

Page 47: Diseño de Interfaz de Usuarios

Se pueden complementar las entrevistas individuales con grupos de discusión.

Ventajas de entrevistas grupales: los usuarios se estimulan entre sí para dar

información y pueden dar sugerencias válidas sobre el uso del sistema.

El análisis de tareas se basa en cómo trabajan las personas. Pero, la mayoría del

trabajo es COOPERATIVO. Las personas trabajan juntas para alcanzar objetivos.

A veces es difícil para los usuarios hablar sobre esa colaboración.

Por eso la observación directa de cómo los usuarios trabajan y utilizan los

sistemas informáticos es fundamental para el análisis del usuario.

ETNOGRAFÍA:

Una especie particular de observación directa es la etnografía.

El etnógrafo observa de cerca cómo trabajan las personas, cómo se relacionan

entre si y cómo utilizan los recursos en su trabajo. El objetivo de la etnografía

es ayudar a los usuarios a mejorar su ambiente y calidad de trabajo.

Los etnógrafos pueden observar las acciones intuitivas y las colaboraciones

informales

2. PROTOTIPADO DEL SISTEMA :

Consiste en el diseño y desarrollo de la interfaz del usuario en un proceso

iterativo. Es darle algo tangible al usuario para que vea si es lo que necesita.

Se desarrollan prototipos sucesivos del sistema y se los somete a consideración

del usuario, quien va guiando la evolución de la interfaz.

El Prototipado Evolutivo o Exploratorio con la indicación de los usuarios finales

es la única forma práctica de diseñar y desarrollar interfaces de usuario.

Se trata de implicar al usuario en el proceso de diseño y desarrollo. El propósito

del prototipado es permitir al usuario adquirir un contacto y experiencia directo

Page 48: Diseño de Interfaz de Usuarios

con la interface. Es difícil pensar, en abstracto, sobre una interfaz de usuario y

explicar exactamente qué queremos.

Sin embargo, cuando se nos muestran ejemplos, es más fácil identificar qué nos

gusta y qué no.

Etapas del Proceso de Prototipado:

Normalmente un Proceso de Prototipado consta de dos etapas:

a. Al principio hay que desarrollar prototipos de papel (maqueta de las

pantallas) y mostrárselos al usuario.

b. Luego, se perfecciona el diseño y se desarrollan prototipos

informatizados cada vez más sofisticados que se emplean al usuario para

las pruebas y simulación de actividades.

Prototipos en papel

Son modelos baratos y muy efectivos para desarrollar prototipos.

No hace falta programar un soft ejecutable.

No se necesita hacer un diseño con estándares profesionales.

Podemos hacer versiones en papel de las pantallas que interactúan con el

usuario y diseñar algunos escenarios posibles que describen como se

utilizará el sistema.

Son una forma efectiva de ver cómo reaccionará el usuario a un diseño

determinado.

Nos orientan sobre la información que precisa el sistema y cómo

normalmente interactuarán los usuarios.

Story Boards: son una serie de borradores que ilustran una secuencia de

interacciones. Es una tabla de historias, y se suele usar para presentar los

prototipos de interfaz a grupos de usuarios.

Prototipos de Software

Page 49: Diseño de Interfaz de Usuarios

Prototipos de Software: Después de los experimentos iniciales en papel,

pasamos a implementar prototipos en software.

Problema principal : necesitamos que el sistema tenga alguna funcionalidad

mínima para que el usuario pueda interactuar con él.

Posible solución : la técnica del “mago de Oz”: consiste en que el usuario

interactúa con lo que parece ser el sistema, pero en realidad es con otra

persona oculta, que simula las respuestas del sistema.

Enfoques para el Prototipado de Interfaces:

a. Enfoque dirigido a secuencia de comandos : se utiliza cuando necesitamos

solamente estudiar ideas con los usuarios.

Creamos pantallas con elementos visuales (botones, iconos y menús) y

asociamos cada elemento a una secuencia de comandos.

Cuando el usuario interactúa con estas pantallas, acciona los elementos

visuales que ejecutan la secuencia de comandos y se presenta la siguiente

pantalla que les muestra el resultado de sus acciones.

b. Lenguajes de programación visuales : estos lenguajes incorporan un

entorno de desarrollo potente. Acceden a muchos objetos reutilizables.

Permiten crear interfaces en forma rápida, con componentes y secuencias

de comandos asociados con los objetos de la interfaz.

c. Prototipado basado en internet : son soluciones basadas en navegadores

web. Ofrecen una interfaz de usuario a medida.

La información a visualizar viene en segmentos denominados applets que

se ejecutan automáticamente cuando se carga la página en el navegador.

Este enfoque es un modo rápido de desarrollar prototipos de interfaces de

usuarios en la web.

3. EVALUACIÓN DE LA INTERFAZ:

Page 50: Diseño de Interfaz de Usuarios

Consiste en recompilar información sobre la experiencia real del usuario con la

interface. Es el proceso de evaluar cómo se utiliza una interfaz y verificar si

cumplen los requerimientos del usuario.

Es parte del proceso de verificación y validación del software.El Prototipado

está relacionado con la evaluación de la interfaz. A medida que el prototipo se va

haciendo más completo, se pueden usar técnicas de evaluación de la interfaz. Una

forma de evaluar es midiendo los “Atributos de Usabilidad”.

ATRIBUTOS DE USABILIDAD

Atributo Descripción

Aprendizaje Cuánto tarda un usuario nuevo en ser productivo

con el sistema

Velocidad de

funcionamiento

Cómo responde el sistema a las operaciones de

trabajo del usuario.

Robustez Que tolerancia tiene el sistema a los errores del

usuario. Que el sistema no se caiga ni se cuelgue

después de los errores

Recuperación Como se recupera el sistema de los errores del

usuario.

Adaptación Permite el sistema adaptarse a otro modelo de

trabajo.

Ahora bien, es posible medir los atributos de “usabilidad”.

Por ejemplo, podemos decir que un operador medio puede utilizar el 80% de la

funcionalidad del sistema después de 3 horas de formación.

Otra posibilidad es evaluar en forma cuantitativa y no métrica.

El diseñador deberá usar uno u otro criterio según su experiencia.

La evaluación del diseño de interfaz es un proceso caro, pues involucra a

científicos cognoscitivos y diseñadores gráficos.

Page 51: Diseño de Interfaz de Usuarios

Deben hacerse muchos experimentos con los usuarios.

Requieren laboratorios con equipos de supervisión.

La evaluación de las interfaces de usuario no es sustentable en sistemas chicos

o en organizaciones con pocos recursos.

TÉCNICAS PARA LA EVALUACIÓN DE INTERFACES

1) CUESTIONARIOS QUE RECOPILEN LA INFORMACIÓN DE LO QUE PIENSAN

LOS USUARIOS DE LA INTERFAZ:

es una forma económica de evaluar la interfaz.

Se requieren preguntas precisas y no genéricas o abiertas.

Se pueden pedir puntuaciones a los usuarios por ejemplo: indique de 1 a 5 el

nivel de claridad de los mensajes de error.

Así, las encuestas serán más fáciles de responder y nos darán más información.

Conviene también preguntarle al usuario sobre su experiencia y conocimientos

informáticos.

Esto permite saber si los usuarios que saben informática también tienen

problemas con las interfaces.

El cuestionario puede también evaluar las maquetas de papel de la interface.

2) LA OBSERVACIÓN DE LOS USUARIOS:

Cuánto trabajan con el sistema y “piensan en voz alta” sobre cómo usar el

sistema para realizar una tarea.

Consiste en observar cómo los usuarios utilizan el sistema, los recursos que

utilizan, los errores cometidos; mediante sesiones de “pensar en voz alta”.

Los usuarios hablan sobre lo que tratan de hacer, qué piensan de ese tema y

cómo alcanzan sus objetivos.

Page 52: Diseño de Interfaz de Usuarios

3) “INSTANTÁNEAS” DE VIDEO SOBRE EL USO TÍPICO DEL SISTEMA :

Usando cámaras económicas se graban sesiones del usuario para su análisis

posterior.

Un análisis completo con video es muy caro, pues requiere un equipo

especializado con varias cámaras enfocadas al usuario y a la pantalla.

Por eso conviene grabar algunas operaciones críticas de la interfaz y las caras

del usuario en ese momento, lo que nos ayuda a detectar problemas.

El análisis de las grabaciones permite descubrir si la interfaz requiere mover

mucho las manos o los ojos.

Una interfaz que requiere muchos cambios de enfoque o mucho

desplazamiento del mouse facilita los errores y se pierde parte de la

visualización.

4) INCLUIR CÓDIGOS EN EL SOFTWARE QUE RECOPILE LOS RECURSOS MÁS

UTILIZADOS Y LOS ERRORES MÁS COMETIDOS :

Incluir un código que recopile estadísticas del uso de la interfaz del usuario

permite mejorar la interfaz, detectar las operaciones más comunes y hacer más

accesibles las opciones más usadas.

Ejemplo, en los menús descendentes, las operaciones más frecuentes se deben

ubicar arriba y las destructivas abajo.

El código permite también detectar y modificar aquellos comandos propensos

a errores.

Finalmente, se puede dar al usuario un comando para enviarle mensajes al

diseñador.

Así, el usuario sabrá que tenemos en cuenta su opinión y podremos obtener

una rápida retroalimentación de los problemas particulares.

CONCLUSIÓN: Ninguno de estos cuatro enfoques simples es infalible, y quizá no

detecten todos los problemas de la interfaz del usuario. Pero, se pueden usar

combinadas con un grupo de voluntarios antes de entregar el sistema. Así

Page 53: Diseño de Interfaz de Usuarios

encontraremos corregiremos los errores más gruesos en el diseño de interfaces de

usuario.