Herramientas de UX

Eye tracking

• Tecnologías que permiten registrar la forma en la que una persona mira una escena o imagen, en qué áreas fija su atención, durante cuánto tiempo y qué orden sigue en su exploración visual.
• Conocer los puntos calientes en los que el usuario fija inicialmente la mirada, ayudan a estructurar los contenidos en una web.
• Cuanto mas arriba y a la izquierda, más se verá. Cuanto más abajo a la derecha, menos relevancia visual tendrá.
• Pruebas con grupo de al menos 5 usuarios. Se analizan las pruebas, se realizan cambios y se vuelve a probar.

• Herramientas específicas eye tracking:

Crazyegg

Seevolution

Click Heat (Software libre)

• Observar sesión del cliente:

Silverback (Solo MacOS)

TryMyUi (Multiplataforma)

Team Viewer (Multiplataforma, Linux mediante Wine)

• Ejemplos de eye tracking
• Más información de herramientas

Boceto y prototipado

Diseños preliminares: del boceto al prototipo

Sketch o borrador de un sitio web

• El prototipo es la mejor forma de aproximarse a la comprensión y concepción del producto final (en este caso un sitio y/o páginas web).
• Es útil ver y porque no, COPIAR de la competencia, que algo harán bien.
• Listado de herramientas

• Sketch o boceto:

Papel y lápiz.

Se recogen ideas

Se prueban composiciones

• Wireframe

Funcionalidad y especificaciones

Layout, menús de navegación...

Sin tipografía, colores ni otros aspectos visuales

Anotaciones sobre la funcionalidad que se espera

• Mockup

Incorporamos el look&feel

• Prototipo

Se prueba el diseño final

Tiene funcionalidad (normalmente reducida)

Diseños preliminares:presupuesto Web

Es fundamental la elaboración de algún boceto a la hora de dar un presupuesto final de un proyecto web a un cliente. 2 casos:

• Aplicación funcional

El boceto debe representar bien los requerimientos del cliente. Un boceto en papel puede ser suficiente.

Utilizaremos alguna herramienta informática para buscar resultados más vistosos de cara al cliente:

Balsamiq Mockup (de pago)

Pencil (gratuito, multiplataforma)

• Página Web centrada en el diseño

Uso de programas tipo Inkscape, Photoshop o Gimp.

Cada diseño es único y lleva su tiempo. Enseñar portfolio al cliente.

• Calculo del presupuesto Web

¿Algún tipo de clasificación por tipo de trabajo?

¿Cálculo por horas? ¿Y cómo se calculan las horas que cuesta?

Ejemplo de cálculo

• ¿Utilizamos algún gestor de contenidos?

Puede ser útil el uso de Google Trends para comparar tendencias

Plantillas de diseño ya elaboradas, ¿imágenes?

Basta buscar en el marketplace adecuado.

Instalación de Balsamiq Mockup en Ubuntu 12.04

• Han dejado de dar soporte Adobe-air para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior.
• Proceso de instalación de Adobe-air (documentación original):

Lo primero será instalar algunas dependencias:

$ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns

Descargar e instalar getlibs, para poder utilizar las librerías 32 bits:

$ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb
$ sudo dpkg -i getlibs-all.deb

Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage:

$ sudo getlibs -l libhal-storage.so.1
$ sudo getlibs -l libgnome-keyring.so.0.1.1

Ahora enlazamos esta última librería para que entre en funcionamiento:

$ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0

Ya pasamos a descargar e instalar Adobe Air, la versión 2.6:

$ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin
$ sudo chmod +x AdobeAIRInstaller.bin
$ sudo ./AdobeAIRInstaller.bin

Ahora podemos eliminar archivos descargados que ya son innecesarios:

$ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb

• Por fin, ahora sí, instalamos balsamiq Mockup:

Descargamos el .deb eligiendo la versión adecuada

Lo ejecutamos, se cargará el centro de software y le damos a instalar :-)