Tutorial Diseño de Interfaces - three-headed

Three Headed Monkey
Tutorial
Diseño
Interfaces
de
Versión 2.0
Raúl Nadal Burgos
Viernes, 16 de abril de 2010
Tutorial Diseño de Interfaces 2010
Contenido
Introducción .................................................................................................................. 2
Reglas de oro del diseño de interfaces ......................................................................... 2
Regla 1: Esforzarse por conseguir consistencia ........................................................ 2
Regla 2: Atender a la usabilidad universal ................................................................. 2
Regla 3: Obtener realimentación informativa ............................................................. 2
Regla 4: Diseñar diálogos para conducir a la finalización .......................................... 2
Regla 5: Prevenir errores .......................................................................................... 3
Regla 6: Permitir deshacer acciones de forma fácil ................................................... 3
Regla 7: Dar soporte al locus de control interno ........................................................ 3
Regla 8: Reducir la carga de la memoria a corto plazo ............................................. 3
Pilares del diseño ......................................................................................................... 3
Guías de referencia y proceso .................................................................................. 3
Herramientas software de interfaces de usuario ........................................................ 4
Revisiones de expertos y pruebas de usabilidad ....................................................... 4
Metodología: Diseño centrado en el usuario ................................................................. 4
Introducción............................................................................................................... 4
Etapas ....................................................................................................................... 5
1.
Concepción..................................................................................................... 5
2.
Descubrimiento............................................................................................... 5
3.
Diseño base.................................................................................................... 5
4.
Diseño detallado ............................................................................................. 5
5.
Construcción................................................................................................... 6
6.
Entrega ........................................................................................................... 6
Técnicas.................................................................................................................... 6
Escenarios ............................................................................................................. 6
Modelado de usuarios............................................................................................ 6
Prototipado ............................................................................................................ 7
Análisis de tareas .................................................................................................. 7
Bibliografía .................................................................................................................... 8
1
Tutorial Diseño de Interfaces 2010
Introducción
Los diseños deberían basarse en la observación cuidadosa de los usuarios
habituales, refinarse mediante un análisis serio de las frecuencias y de las secuencias
de tareas, y debería validarse a través de pruebas de usabilidad tempranas y pruebas
de aceptación rigurosas.
Para obtener el desarrollo de una interfaz de usuario con éxito se deben tener
en cuenta los tres pilares para el desarrollo: guías y procesos de referencia
herramientas software de interfaces de usuario y revisiones expertas y pruebas de
usabilidad. Para ello veremos la metodología: Diseño centrado en el usuario, a la cual
se le pueden añadir distintas técnicas para realizar el diseño tales como la creación de
escenarios, análisis de tareas, prototipado y modelado de usuarios/roles.
Reglas de oro del diseño de interfaces
Estas reglas, llamadas de oro, están compuestas por 8 principios derivados de
la experiencia de los diseñadores. Estas reglas para poder usarse deben validarse y
refinarse para dominios de diseño específicos.
Regla 1: Esforzarse por conseguir consistencia
En situaciones parecidas entre sí deberían exigirse secuencias de acciones
consistentes; debería utilizarse terminología consistente en los mensajes, menús y
pantallas de ayuda; y en todas partes debería emplearse de forma consistente color,
composición, mayúsculas, fuentes, etc. Las excepciones deberían ser comprensibles y
limitadas en número.
Regla 2: Atender a la usabilidad universal
Tener en cuenta los distintos usuarios. Añadir características para
principiantes, como explicaciones, y características para expertos, como atajos y
ritmos más rápidos.
Regla 3: Obtener realimentación informativa
Para cada acción del sistema debería haber una realimentación por parte del
sistema. Para acciones habituales y poco importantes, la respuesta puede ser
pequeña, mientras que para acciones poco frecuentes e importantes, la respuesta
debería ser más sustancial.
Regla 4: Diseñar diálogos para conducir a la finalización
Las secuencias de acciones deberían organizarse en grupos con comienzo,
mitad y final. La realimentación informativa al completar un grupo de acciones da a los
operadores la señal para prepararse para el siguiente grupo de acciones.
2
Tutorial Diseño de Interfaces 2010
Regla 5: Prevenir errores
Hay que intentar diseñar el sistema de forma que los usuarios no puedan
cometer errores serios; por ejemplo, no permitir caracteres alfabéticos en campos de
entrada numéricos. Si un usuario comete un error, la interfaz debería detectar el error
y ofrecer instrucciones de recuperación simples, constructivas y concretas. Por
ejemplo, los usuarios no deberían tener que reescribir un formulario entero si
introducen un dato erróneo, sino que se les debería guiar para corregir solo la parte
errónea. Las acciones erróneas no deberían alterar el estado del sistema y en caso
contrario la interfaz debería dar instrucciones acerca de cómo restaurarlo.
Regla 6: Permitir deshacer acciones de forma fácil
En la medida de lo posible, las acciones deberían ser reversibles. Las unidades
de reversibilidad pueden ser una acción individual, una tarea de entrada de datos o un
grupo completo de acciones.
Regla 7: Dar soporte al locus de control interno
Los operadores experimentados desean tener la sensación de que están al
mando de la interfaz. Gaines (1981) capturo parte de este principio con su regla evita
la no causalidad y su estímulo para hacer a los usuarios iniciadores de acciones en
vez de simplemente los que responden a ellas.
Regla 8: Reducir la carga de la memoria a corto plazo
La limitación del procesamiento de información humano en la memoria a corto
plazo exige que las visualizaciones se mantengan simples, las visualizaciones con
varias páginas se concentren en una, etc. Donde sea apropiado, debería
proporcionarse acceso en línea a la sintaxis de órdenes, abreviaciones, códigos y otra
información.
Pilares del diseño
Existen tres pilares que no tenemos garantías de que funcionen, pero la
experiencia ha mostrado que cada pilar puede producir una agilización en el proceso y
puede facilitar la creación de sistemas.
Guías de referencia y proceso
El arquitecto de interfaces de usuario debería generar un conjunto de guías
sobre las que trabajar. Deberían considerarse guías para: Palabras, iconos y gráficos;
cuestiones de composición de pantallas; dispositivos de entrada y salida; secuencias
de acción; formación.
La creación de guías debería ser un proceso social dentro de una organización,
para conseguir visibilidad y dar soporte al desarrollo. Deberían establecerse
procedimientos para distribuir las guías, asegurar su aplicación, y permitir exenciones
3
Tutorial Diseño de Interfaces 2010
y mejoras. Las guías de referencia deberían ser textos vivos, adaptados a las
necesidades cambiantes y refinadas a través de la experiencia.
La creación de una guía de referencia al comienzo de un proyecto de
implementación concentra la atención en el diseño de la interfaz y proporciona una
oportunidad para discutir cuestiones controvertidas.
Las guías deben:
-
Proporcionar un proceso social para desarrolladores.
Registrar decisiones que verán todas las partes.
Estimular la consistencia y la completitud.
Permitir múltiples niveles:
o Estándares rígidos
o Practicas aceptadas
o Guías flexibles
Comunicar políticas para:
o ¿Cómo obtenerlo?
o ¿Quién revisa?
o ¿Quién decide?
o ¿Con que frecuencia?
-
Herramientas software de interfaces de usuario
Se usan para crear un prototipo de la interfaz para poder mostrársela al
usuario. En el prototipo se mostraran solo la interfaz, sin ninguna utilidad, para que el
usuario se haga una idea del aspecto.
Revisiones de expertos y pruebas de usabilidad
Las pruebas con los usuarios a los que está destinado el producto, las
encuestas y las herramientas de análisis automático están demostrando que son
valiosas. Los procedimientos varían enormemente dependiendo de los objetivos del
estudio de usabilidad, el número esperado de usuarios, el peligro que suponen los
errores y el nivel de inversión.
Metodología: Diseño centrado en el usuario
Introducción
El diseño centrado en el usuario lleva a sistemas que generan menos
problemas durante el desarrollo y que tienen menos costes de mantenimiento durante
su tiempo de vida.
En esta metodología participaran:
4
Tutorial Diseño de Interfaces 2010
o
o
o
Usuario: Participante con capacidad de elección. Su capacidad de
elección puede estar limitada por conocimientos, experiencia, habilidad,
etc.
Ordenador: Participante con un programa (secuencia de instrucciones).
Enlace con aplicación.
Diseñador: Anticipa las posibles elecciones del usuario y las codifica en
el programa
Etapas
Este método está compuesto por 6 etapas:
1. Concepción
Durante esta etapa se definen los objetivos, se define el equipo de diseño, se
identifican restricciones técnicas, legales o del entorno, se prepara el plan y el
presupuesto del proyecto y se comienza el proceso de diseño en un nivel de
descripción breve de los conceptos. Durante esta etapa el concepto de producto se
ilustra mediante dibujos sencillos de pantallas. El objetivo de estos dibujos es
transmitir el concepto del sistema a usuarios no técnicos.
2. Descubrimiento
Durante esta etapa se realiza una comprensión clara de las características de cada
segmento diferente de los usuarios del producto, se comprenden las tareas que
realizan los usuarios, la información que necesitan, la terminología que usan, sus
prioridades y sus modelos mentales. En esta etapa será necesario reunirse con el
usuario para conocer estos datos.
3. Diseño base
En esta etapa se desarrolla y valida el diseño conceptual básico del producto, se
desarrolla un estilo visual para el producto y se presenta el diseño completo como un
prototipo de pantalla clave.
Un prototipo de pantalla clave incorpora los caminos de navegación más
importantes del sistema. Este prototipo se usa para mostrar a los usuarios el diseño
del sistema propuesto y les permite evaluarlo y refinarlo.
4. Diseño detallado
En esta etapa se completa una guía de estilo, se desarrolla el diseño de alto nivel
dentro de una especificación completa, se realiza la evaluación de usabilidad de
pantallas, se crean composiciones detalladas para cada pantalla y especificaciones
detalladas para cada elemento de cada pantalla.
5
Tutorial Diseño de Interfaces 2010
5. Construcción
En esta etapa se realiza la codificación y rediseño de pantallas si fuera necesario, se
realiza la evaluación de usabilidad de pantallas críticas si fuera necesario y realizar
revisiones y cambios.
6. Entrega
En esta etapa se desarrolla un plan de cambio para dar soporte al nuevo producto, se
realiza la instalación y se mide la satisfacción del usuario.
En cada etapa se especifican entregas y se realizan revisiones periódicas. Con
estas etapas se busca obtener una acogida positiva por parte de los clientes.
Técnicas
Escenarios
Esta técnica describe a un/os usuario/s usando artefactos para lograr un objetivo bajo
unas determinadas circunstancias en un intervalo de tiempo. Con esta técnica se
intenta identificar situaciones, agentes/actores, secuencias de acciones y eventos,
cambio de objetivos.
Hay distintos tipos (textual, secuencia de pasos, narración particionada, diagramas).
Modelado de usuarios
El objetivo que se persigue con esta técnica es conocer al usuario.
6
Tutorial Diseño de Interfaces 2010
Prototipado
Mediante esta técnica se intenta proponer una organización preliminar del diseño,
identificar preferencias de usuario y detectar problemas antes de identificar. Hay dos
tipos: gama baja (bocetos, storyboard) y gama alta fidelidad (simulación y generadores
IU).
Análisis de tareas
En esta técnica se realiza el estudio de lo que un usuario tiene que realizar en
términos de acciones y/o procesos para conseguir un objetivo. Los distintos objetivos
son: identificar usuarios, identificar sus intenciones, comprender el dominio del
problema, establecer el nivel de asistencia y establecer alternativas.
Notación usada para realizar el análisis de tareas
Existen varias opciones (HTA, GOMS, GTA, STN, UAN, KLM) pero nosotros
hemos optado por usar diagramas de estados.
Los diagramas de estados poseen diversas ventajas a la hora de especificar
interfaces, pueden extenderse con especificación de flujo de datos y de restricciones,
junto con capturas de pantallas para mostrar los estados visuales de widgets gráficos.
Las especificaciones son útiles para asegurar la consistencia entre el diseño de
interfaces de usuario y su implementación.
Existen sistemas que intentan vincular especificaciones con herramientas de
creación de interfaces, como la programación basada en escenarios, que se basa en
especificar escenarios de comportamiento a partir de especificaciones formales a nivel
de widget, para acciones y realimentación de la interfaz.
La programación basada en escenarios permite a los diseñadores crear
cuadros de dialogo con elementos gráficos, y luego especificar de que forma las
acciones de usuario generan cambios del sistema. Los diseñadores también pueden
especificar que escenarios están permitidos o prohibidos.
7
Tutorial Diseño de Interfaces 2010
Bibliografía
Shneiderman,B., Plaisant, Catherine.: “Diseño de interfaces de usuario”. Traducción:
Sánchez Cuadrado, Jesús. 4ª Edicion. Addison Wesley, 2006.
Gea, Miguel. Apuntes Diseño de Interfaces de Usuario. Dpt. Lenguajes y Sistemas
Informáticos. 2006.
8