Curso de UX
De WikiEducator
Saltar a: navegación, buscar
UX
Usabilidad y accesibilidad.
Usabilidad, accesibilidad y estándar W3C | Herramientas de UX | Tiempo de Carga
Contenido
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)
Boceto y prototipado
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:
$ 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 :-)
- Tenemos una versión de prueba de Balsamiq para 7 días.
- Hay varias opciones de licencia gratuita