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