Diferencia entre revisiones de «Usuario:Juanda/html/usabilidad»
De WikiEducator
(→Elaboración de un prototipo) |
(→Instalación de Balsamiq Mockup en Ubuntu 12.04) |
||
| (110 revisiones intermedias por el mismo usuario no mostrado) | |||
| Línea 1: | Línea 1: | ||
{{Usuario:juanda/html/nav }} | {{Usuario:juanda/html/nav }} | ||
| − | {{#widget:Slides}} {{MiTitulo| Curso de | + | {{#widget:Slides}} {{MiTitulo| Curso de UX}} |
<div class="slides layout-regular template-default"> | <div class="slides layout-regular template-default"> | ||
<div class="slide"> | <div class="slide"> | ||
| − | = | + | =Herramientas de UX= |
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div class="slide"> | <div class="slide"> | ||
| − | + | == Eye tracking == | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | |||
<div class="slide"> | <div class="slide"> | ||
| − | |||
*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. | *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. | *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á. | *Cuanto mas arriba y a la izquierda, más se verá. Cuanto más abajo a la derecha, menos relevancia visual tendrá. | ||
| − | *Herramientas específicas: | + | *Pruebas con grupo de al menos 5 usuarios. Se analizan las pruebas, se realizan cambios y se vuelve a probar. |
| − | :[http:// | + | </div> |
| − | :[http://www. | + | <div class="slide"> |
| − | * | + | *Herramientas específicas eye tracking: |
| − | : | + | :[http://www.crazyegg.com/ Crazyegg] |
| − | :[http://www.teamviewer.com/ | + | :[https://www.seevolution.com/ Seevolution] |
| − | *[http://designbeep.com/2011/06/06/great-examples-of-eye-tracking-studies-for-blogs-and-websites/ | + | :[http://www.labsmedia.com/clickheat/index.html Click Heat] (Software libre) |
| + | </div> | ||
| + | <div class="slide"> | ||
| + | *Observar sesión del cliente: | ||
| + | :[http://silverbackapp.com/ Silverback] (Solo MacOS) | ||
| + | :[http://www.trymyui.com/ TryMyUi] (Multiplataforma) | ||
| + | :[http://www.teamviewer.com/ Team Viewer] (Multiplataforma, Linux mediante Wine) | ||
| + | |||
| + | *[http://designbeep.com/2011/06/06/great-examples-of-eye-tracking-studies-for-blogs-and-websites/ Ejemplos de eye tracking] | ||
| + | *[http://www.usefulusability.com/24-usability-testing-tools/ Más información de herramientas] | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | === | + | |
| − | [[Archivo:Prototipo_web.jpg|200px|thumb| | + | == Boceto y prototipado == |
| + | </div> | ||
| + | <div class="slide"> | ||
| + | |||
| + | ===Diseños preliminares: del boceto al prototipo=== | ||
| + | [[Archivo:Prototipo_web.jpg|200px|thumb|right|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). | *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 | + | *Es útil ver y porque no, COPIAR de la competencia, que algo harán bien. |
| − | *[http://techtastico.com/post/mockups-online/ | + | *[http://techtastico.com/post/mockups-online/ Listado de herramientas] |
[[Archivo:flujo_prototipo.jpg|Elaboración de prototipo mediante lápiz y papel]] | [[Archivo:flujo_prototipo.jpg|Elaboración de prototipo mediante lápiz y papel]] | ||
| − | |||
| − | |||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | + | *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 | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | + | *Mockup | |
| − | + | :Incorporamos el look&feel | |
| − | * | + | *Prototipo |
| − | + | :Se prueba el diseño final | |
| − | + | :Tiene funcionalidad (normalmente reducida) | |
| − | + | ||
| − | + | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | + | ==Diseños preliminares: presupuesto Web== | |
| − | == | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | |||
<div class="slide"> | <div class="slide"> | ||
| − | + | 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: | |
| − | + | :[http://www.balsamiq.com/products/mockups Balsamiq Mockup] (de pago) | |
| − | + | :[http://pencil.evolus.vn/ Pencil] (gratuito, multiplataforma) | |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | |||
<div class="slide"> | <div class="slide"> | ||
| − | + | *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. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | : | + | |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | |||
<div class="slide"> | <div class="slide"> | ||
| − | + | *Calculo del presupuesto Web | |
| − | * | + | :¿Algún tipo de clasificación por tipo de trabajo? |
| − | + | :[http://www.websitehomework.com/website-design-cost-calculator.html 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. | |
| − | + | ||
| − | : | + | |
</div> | </div> | ||
| + | <div class="slide"> | ||
| + | *¿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 [http://envatomarketplaces.com/ marketplace adecuado.] | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | ==Instalación de Balsamiq Mockup en Ubuntu 12.04== | ||
| + | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| + | * 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 ([http://ubuntuguide.net/install-adobe-air64-bit-ubuntu-12-04-precise documentación original]): | ||
| + | :Lo primero será instalar algunas dependencias: | ||
| + | <source lang="bash"> | ||
| + | $ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns | ||
| + | </source> | ||
| + | :Descargar e instalar getlibs, para poder utilizar las librerías 32 bits: | ||
| + | <source lang="bash"> | ||
| + | $ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb | ||
| + | $ sudo dpkg -i getlibs-all.deb | ||
| + | </source> | ||
| + | :Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage: | ||
| + | <source lang="bash"> | ||
| + | $ sudo getlibs -l libhal-storage.so.1 | ||
| + | $ sudo getlibs -l libgnome-keyring.so.0.1.1 | ||
| + | </source> | ||
| + | :Ahora enlazamos esta última librería para que entre en funcionamiento: | ||
| + | <source lang="bash"> | ||
| + | $ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0 | ||
| + | </source> | ||
| + | :Ya pasamos a descargar e instalar Adobe Air, la versión 2.6: | ||
| + | <source lang="bash"> | ||
| + | $ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin | ||
| + | $ sudo chmod +x AdobeAIRInstaller.bin | ||
| + | $ sudo ./AdobeAIRInstaller.bin | ||
| + | </source> | ||
| + | :Ahora podemos eliminar archivos descargados que ya son innecesarios: | ||
| + | <source lang="bash"> | ||
| + | $ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb | ||
| + | </source> | ||
| + | *Por fin, ahora sí, instalamos balsamiq Mockup: | ||
| + | : [http://www.balsamiq.com/download#direct Descargamos] el .deb eligiendo la versión adecuada | ||
| + | : Lo ejecutamos, se cargará el centro de software y le damos a instalar :-) | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | + | *Tenemos una versión de prueba de Balsamiq para 7 días. | |
| − | + | *Hay [http://support.balsamiq.com/customer/portal/articles/105924 varias opciones de licencia gratuita] | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
</div> | </div> | ||
Última revisión de 12:26 19 dic 2013
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
