Diferencia entre revisiones de «Usuario:Juanda/html/usabilidad»
De WikiEducator
(→Diseños preliminares: del boceto al prototipo) |
(→Instalación de Balsamiq Mockup en Ubuntu 12.04) |
||
| (106 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"> | ||
| + | |||
| + | == Boceto y prototipado == | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | |||
===Diseños preliminares: del boceto al prototipo=== | ===Diseños preliminares: del boceto al prototipo=== | ||
| − | [[Archivo:Prototipo_web.jpg|200px|thumb| | + | [[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 class="slide"> | ||
*Sketch o boceto: | *Sketch o boceto: | ||
:Papel y lápiz. | :Papel y lápiz. | ||
| Línea 107: | Línea 56: | ||
:Sin tipografía, colores ni otros aspectos visuales | :Sin tipografía, colores ni otros aspectos visuales | ||
:Anotaciones sobre la funcionalidad que se espera | :Anotaciones sobre la funcionalidad que se espera | ||
| + | </div> | ||
| + | <div class="slide"> | ||
*Mockup | *Mockup | ||
:Incorporamos el look&feel | :Incorporamos el look&feel | ||
| Línea 114: | Línea 65: | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | + | ==Diseños preliminares: presupuesto Web== | |
| + | </div> | ||
| + | <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. | 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: | 2 casos: | ||
| Línea 120: | Línea 73: | ||
:El boceto debe representar bien los requerimientos del cliente. Un boceto en papel puede ser suficiente. | :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: | :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://www.balsamiq.com/products/mockups Balsamiq Mockup] (de pago) |
| − | [http://pencil.evolus.vn/ Pencil] (gratuito, multiplataforma) | + | :[http://pencil.evolus.vn/ Pencil] (gratuito, multiplataforma) |
| + | </div> | ||
| + | <div class="slide"> | ||
*Página Web centrada en el diseño | *Página Web centrada en el diseño | ||
:Uso de programas tipo Inkscape, Photoshop o Gimp. | :Uso de programas tipo Inkscape, Photoshop o Gimp. | ||
| − | :Cada diseño es único y lleva su tiempo. | + | :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"> | ||
| − | ===Instalación de Balsamiq Mockup en Ubuntu 12.04 | + | *Calculo del presupuesto Web |
| − | + | :¿Algún tipo de clasificación por tipo de trabajo? | |
| − | * Han dejado de dar soporte para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior. | + | :[http://www.websitehomework.com/website-design-cost-calculator.html Ejemplo de cálculo] |
| − | + | :¿Cálculo por horas? | |
| − | Lo primero será instalar algunas dependencias: | + | :¿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 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"> | ||
| + | * 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"> | <source lang="bash"> | ||
$ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns | $ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns | ||
</source> | </source> | ||
| − | Descargar e instalar getlibs, para poder utilizar las librerías 32 bits: | + | :Descargar e instalar getlibs, para poder utilizar las librerías 32 bits: |
<source lang="bash"> | <source lang="bash"> | ||
$ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb | $ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb | ||
$ sudo dpkg -i getlibs-all.deb | $ sudo dpkg -i getlibs-all.deb | ||
</source> | </source> | ||
| − | Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage: | + | :Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage: |
<source lang="bash"> | <source lang="bash"> | ||
$ sudo getlibs -l libhal-storage.so.1 | $ sudo getlibs -l libhal-storage.so.1 | ||
$ sudo getlibs -l libgnome-keyring.so.0.1.1 | $ sudo getlibs -l libgnome-keyring.so.0.1.1 | ||
</source> | </source> | ||
| − | Ahora enlazamos esta última librería para que entre en funcionamiento: | + | :Ahora enlazamos esta última librería para que entre en funcionamiento: |
<source lang="bash"> | <source lang="bash"> | ||
$ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0 | $ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0 | ||
</source> | </source> | ||
| − | Ya pasamos a descargar e instalar Adobe Air, la versión 2.6: | + | :Ya pasamos a descargar e instalar Adobe Air, la versión 2.6: |
<source lang="bash"> | <source lang="bash"> | ||
$ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin | $ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin | ||
| Línea 155: | Línea 129: | ||
$ sudo ./AdobeAIRInstaller.bin | $ sudo ./AdobeAIRInstaller.bin | ||
</source> | </source> | ||
| − | Ahora podemos eliminar archivos descargados que ya son innecesarios: | + | :Ahora podemos eliminar archivos descargados que ya son innecesarios: |
<source lang="bash"> | <source lang="bash"> | ||
$ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb | $ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb | ||
</source> | </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
