Usuario:Juanda/html/usabilidad

=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

Diseños preliminares: del boceto al prototipo

 * 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, no podemos realizar un boceto.
 * Necesitamos tener una buena tarjeta de visita: nuestra Web
 * Necesitamos un portfolio que mostrar al cliente.


 * Calculo del presupuesto Web
 * ¿Algún tipo de clasificación por tipo de trabajo?
 * Ejemplo de cálculo
 * ¿Cálculo por horas?
 * ¿Cuánto vale cada hora de trabajo? En función de la demanda y de la experiencia.
 * ¿Y cómo se calculan las horas que cuesta?
 * Ojo con los presupuestos cerrados, pero es habitual, el cliente quiere un precio final.


 * ¿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:


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


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


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


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


 * Ahora podemos eliminar archivos descargados que ya son innecesarios:


 * 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 :-)


 * Tenemos una versión de prueba de Balsamiq para 7 días.
 * Hay varias opciones de licencia gratuita