GUILayout++ Del prototipado a la evaluación de la …...conocer la usabilidad real de un producto...
Transcript of GUILayout++ Del prototipado a la evaluación de la …...conocer la usabilidad real de un producto...
GUILayout++Del prototipado a la evaluación de la
usabilidad en la Web
Presentado por: Triana Arribas Simarro
Dirigido por: Francisco Montero Simarro
Julio, 2008
Índice
1. Estado del arte
2. GUILayout++
3. Caso de estudio: Web ministerios españoles
4. Demostración
5. Conclusiones y trabajo futuro
ESTADO DEL ARTE
Contexto
• La sociedad actual vive inmersa en la gran red de redesdenominada “Internet”.
• Pero… ¿Qué ofrece?o Información: Textos y gráficos.
o Comunicaciones multimedia.
o Todo tipo de productos y servicios .
Nuevas sensaciones que atraen al público en general muchas veces sin ningún propósito específico.
Contexto (ii)
• Las empresas destinan gran parte de su esfuerzo aldesarrollo de sus sitios web. Objetivo: Ofrecer susservicios y productos a través de Internet.
• El sitio web estará orientado a un determinado usuariopotencial, por lo que debería estar construido pensandoen todo momento en las características de dicho usuario,y no de otra manera.
Diseño centrado en el usuario
Contexto (iii)
• En el desarrollo software en general, una vez el productoen construcción se encuentre terminado, la interfaz queofrezca se convertirá en la única parte visible de cara alusuario, quedando en un segundo plano la funcionalidadreal que proporcione.
Interfaz usable, accesible y de calidad
Contexto (iv)
• Una de las técnicas más efectivas para lograr tener encuenta la opinión del usuario desde las primeras etapasdel desarrollo es el prototipado.
• ¿Por qué?
o No es posible conocer la opinión de los usuariosmostrándoles especificaciones técnicas a un nivelabstracto.
o Sí que serán capaces de entender los prototipos concretosque se les muestre del sistema.
Prototipado
Baja fidelidad Alta fidelidad
Herramientas
Evaluación de la usabilidad
• Grandes gurús en el ámbito de la usabilidad han desarrolladométricas para la evaluación de la usabilidad. Objetivo: dar aconocer la usabilidad real de un producto software evaluandola interfaz ofrecida por el mismo.
Evitar los costes derivados de disponer de gente ajena al proyecto
Especificación de interfaces de usuario
Lenguaje Descripción
XUL Utilizado para describir y crear interfaces de usuario de forma independiente a laplataforma posibilitando la portabilidad de las mismas.
UIML Permite la creación de páginas web que podrán ser vistas desde cualquierdispositivo .
OpenLaszlo Permite crear aplicaciones ricas para Internet utilizando únicamente softwarelibre.
XAML Lenguaje declarativo optimizado para describir gráficamente interfaces de usuariovisuales ricas desde un punto de vista gráfico.
XIML Lenguaje de especificación común e infraestructura de desarrollo paraprofesionales de la interfaz de usuario en todos los ámbitos.
UsiXML Permite la especificación de interfaces de usuario a diferente nivel de detalle yabstracción en función del contexto de uso.
CTT Notación de modelado de tareas que permite la posibilidad de especificar quétareas realizará el usuario con el sistema, así como el modo de realizarlas.
GUILayout++
Motivación y Objetivos
Desarrollar una herramienta que integre en el mismo entorno prototipado y desarrollo de interfaces de usuario.
– Prototipado
– Cálculo de métricas de usabilidad
– Evaluación de métricas de usabilidad
– Generación de la especificación abstracta UsiXML
GUILayout
GUILayout++. Análisis
• Requisitos:
o IRQ-0001: Creación de prototipo high fidelity
o IRQ-0002: Cambio de imagen de página web
o IRQ-0003: Especificación de rol de Nielsen
o IRQ-0004: Consulta de métricas GUILayout (Nielsen, Constantine)
o IRQ-0007: Evaluación de métricas de GUILayout (Nielsen, Constantine)
o IRQ-0009: Modificar valores de referencia de GUILayout (Nielsen)
o IRQ-00011: Visualizar estadísticas (GUILayout, Nielsen, Constantine)
o IRQ-00012: Actualización de métricas
o IRQ-00013: Generación de especificación abstracta
o IRQ-00014: Abrir/Guardar/Exportar a Photoshop documentos
GUILayout++. Casos de uso
Low High
GUILayout Nielsen Constantine
Cambiar imágen<<extends>>
Definir rol Nielsen
<<include>>
Nielsen Constantine
UsiXML
GUILayout
GUILayout Nielsen
Crear prototipo
Consultar métricas
Evaluar métricas
CambiarIdeal
GUILayout Nielsen Constantine
Usuario
Visualizar estadísticas
GUILayout++. Diagrama de secuencia
Calcular métricas Nielsen
: usuario : gui : gestorMetricas : paleta : componente : componente : graficos
consularMetricas()
calcularAreasNielsen()
getArea()
consultarMetricasNielsen()
float
p_areas
crearGraficos()
graficos
p_areasGraficos
mostrarAreasGraficos()
GUILayout++. Diseño
DiagramInterchange
Kernel
GUILayout
<<profile>>
GUILayout::References
<<profile>>
Evaluación
Visualización grafica
Visor UsiXML
GUILayout++. Implementación
CASO DE ESTUDIO: WEB MINISTERIOS ESPAÑOLES
Análisis de www.fomento.es
Resultados del análisis
• Nielsen:
Resultados del análisis (ii)
• Constantine:
Propuesta low fidelity de web institucional
Especificación abstracta UsiXML
Especificación abstracta UsiXML (ii)<?xml version="1.0" encoding="UTF-8"?><auimodel><abstractContainer id="idaio1" name="idaio1">
<abstractIndividualComponent id="idaio2" name="idaio2"><output id="idaio3" name="idaio3"><output id="idaio4" name="idaio4">
</abstractIndividualComponent><abstractIndividualComponent id="idaio5" name="idaio5">
<output id="idaio6" name="idaio6"></abstractIndividualComponent><abstractIndividualComponent id="idaio7" name="idaio7">
<navigation id="idaio8" name="idaio8"></abstractIndividualComponent><abstractIndividualComponent id="idaio9" name="idaio9">
<navigation id="idaio10" name="idaio10"><output id="idaio11" name="idaio11">
</abstractIndividualComponent><abstractIndividualComponent id="idaio12" name="idaio12">
<navigation id="idaio13" name="idaio13"></abstractIndividualComponent><abstractIndividualComponent id="idaio14" name="idaio14">
<output id="idaio15" name="idaio15"></abstractIndividualComponent><abstractIndividualComponent id="idaio16" name="idaio16">
<output id="idaio17" name="idaio17"></abstractIndividualComponent><abstractIndividualComponent id="idaio18" name="idaio18">
<output id="idaio19" name="idaio19"></abstractIndividualComponent><abstractIndividualComponent id="idaio20" name="idaio20">
<output id="idaio21" name="idaio21"></abstractIndividualComponent><abstractIndividualComponent id="idaio22" name="idaio22">
<navigation id="idaio23" name="idaio23"><output id="idaio24" name="idaio24">
</abstractIndividualComponent><abstractIndividualComponent id="idaio25" name="idaio25">
<navigation id="idaio26" name="idaio26"></abstractIndividualComponent>
</abstractContainer></auimodel>
Demostración
CONCLUSIONES Y TRABAJO FUTURO
Conclusiones
• Internet como medio para ofrecer servicios y productos.
• Servicios orientados a un determinado usuario -> sitio web diseñado paraese usuario.
• Necesidad de interfaz usable, accesible y de calidad.
• Prototipado como técnica ideal para facilitar la comunicación entreequipo de desarrollo y usuario final.
• Métricas como ayuda a la evaluación de la usabilidad.
• Idea de ligar prototipado a desarrollo basado en modelos.
• No existe ninguna herramienta que integreprototipado+métricas+evaluación+modelos.
• GUILayout++ como herramienta integradora.
• Este Proyecto Final de Carrera ha permitido afianzar y consolidarconocimientos en análisis y programación orientada a objetos, así comoen conceptos de usabilidad, diseño centrado en el usuario, prototipado yen definitiva en el desarrollo de interfaces de usuario.
Potencia de GUILayout++
• Soporte al diseño de prototipos de baja fidelidad.
• Capacidad de análisis de prototipos de alta fidelidad.
• Cálculo de métricas de usabilidad y actualización a medida que semodifica el diseño.
• Evaluación de métricas de usabilidad según criterios USABAIPO,permitiendo al usuario especificar criterios propios.
• Presentación de resultados gráficos en distintos formatos: Gráficode tarta, gráfico de barras, ofreciendo la posibilidad de maximizarambos para una mejor visualización.
• Presentación de resultados numéricos de forma resumida ymediante estadísticas detalladas.
• Generación automática de la especificación abstracta UsiXML yposibilidad de visualización gráfica o directamente el código.
• Máxima usabilidad de la herramienta.
Trabajo futuro
• Añadir ciertos mecanismos que permitieran incorporar o definir nuevasmétricas de usabilidad, que podrían provenir de estudios propuestos porotros autores o incluso de la mano del propio usuario.
• Revisión de la métrica Layout Uniformity de Constantine ya que ésta fuediseñada para aplicaciones de escritorio, no teniendo su origen en elámbito de la Web.
• Realizar un estudio tratando de detectar los distintos tipos de páginasweb y obtener unas estadísticas a partir de una muestra significativa, querevelen los valores ideales que para cada tópico, en función del tipo depágina web, se espera y así incluir dichos valores en la herramienta pararealizar la evaluación en función de ellos.
• Integrar en la propia herramienta un módulo destinado a capturar lasimágenes de los sitios web y convertirlas a un formato gráfico.
GUILayout++Del prototipado a la evaluación de la
usabilidad en la Web
Presentado por: Triana Arribas Simarro
Dirigido por: Francisco Montero Simarro
Julio, 2008