curso de usabilidad en web
DESCRIPTION
Curso de Usabilidad WebTRANSCRIPT
![Page 1: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/1.jpg)
Curso Usabilidad en entornos Web
Juan Francisco [email protected]
www.twitter.com/laminarrieta www.facebook.com/juanfran.ruiz
www.linkedin.com/in/juanfranciscoruiz
![Page 2: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/2.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Jakob Nielsen
www.useit.com
![Page 3: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/3.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
La ligera paloma, que siente la resistencia del aire que surca al volar libremente, podría imaginarse que volaría mucho mejor aún en un espacio vacío - Kant
![Page 4: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/4.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Usabilidad -Facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo.
-Los principios que hay tras la eficacia percibida de un objeto.
Facilidad + Eficacia
![Page 5: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/5.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Arquitectura de la información -Disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos.
-Estructura de información compartida.-Arte y la ciencia de organizar y rotular sitios web.-Principios del diseño y la arquitectura en el entorno digital
Facilitar los procesos de comprensión y
asimilación de la información
![Page 6: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/6.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Arquitectura de la información Objetivos:
* Entendible * Novedoso * Comprensible * Inteligente * Atractivo
Lo que busca el usuario en el menor tiempo posible
![Page 7: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/7.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Arquitectura de la información -Sitios web (extranet e intranets)-Dispositivos móviles o gadgets (como los lectores de mp3), -CDs interactivos-Videoclips digitales-Relojes-Tableros de instrumentos de aviones -Máquinas dispensadoras-Juegos electrónicos
Facilitar los procesos de comprensión y asimilación de la información
Multiples dispositivos
![Page 8: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/8.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Arquitectura de la información ¿Por qué es importante?
Los costes y el valor del contenido, la formación a trabajadores-clientes, o la construcción y mantenimiento de un sistema.
-Internos-Externos
Coste de Oportunidad
![Page 9: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/9.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Arquitectura de la información HipermediaConjunto de métodos o procedimientos para escribir, diseñar o componer contenidos que tengan texto, video, audio, mapas u otros medios, y que además tenga la posibilidad de interactuar con los usuarios
Es un todo – rich media incluido
![Page 10: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/10.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Arquitectura de la información HipermediaConjunto de métodos o procedimientos para escribir, diseñar o componer contenidos que tengan texto, video, audio, mapas u otros medios, y que además tenga la posibilidad de interactuar con los usuarios
Es un todo – rich media incluido
![Page 11: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/11.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Experiencia de usuario
Factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción
-Factores relativos al diseño (hardware, software, usabilidad, diseño de interacción, accesibilidad, diseño gráfico y visual, calidad de los contenidos, buscabilidad o encontrabilidad, utilidad, etc)
-Aspectos relativos a las emociones, sentimientos, construcción y transmisión de la marca, confiabilidad del producto, etc.
Engloba a AI y US
![Page 12: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/12.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Experiencia de usuario
![Page 13: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/13.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Experiencia de usuario
![Page 14: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/14.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Persuabilidad
Capacidad para llevar a la acción al usuario y convertirlo en suscriptor, lead o cliente… valiéndose de argumentos, que no sólo venzan su razón sino que también conmuevan su corazón
Persuasión+Usabilidad
![Page 15: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/15.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Datos -->Información Extracción de “conocimiento” procesable implícito en las bases de datos de las empresas
GeográficoIdiomaUsoUtilidadVentaDeseo
![Page 16: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/16.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Estructura informativa
![Page 17: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/17.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Necesidades de la información -Aquellos datos que un individuo debe poseer para la realización de su trabajo, su investigación, su realización personal....
Información vs Conocimiento
![Page 18: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/18.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Diseño de información (DI) -Conexión entre la información, el pensamiento humano y el uso.
![Page 19: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/19.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Jerarquias de Información
Jerarquía visual y Jerarquia de contenidos -Los usuarios usan las páginas, no las leen
*Colocar la información más importante en zonas del interfaz más relevantes * Enfatizar mediante efectos tipográficos* Aumentar el tamaño de los textos de mayor importancia* Utilizar el contraste del color para distribuir y discriminar objetos informativos* Agrupar objetos informativos relacionados entre sí
![Page 20: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/20.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Elementos de Navegación -Informar constantemente al usuario acerca de dónde se encuentra
No perder al usuarioCoherencia del diseñoJerarquía VisualBreadcrumbs ( Migas de pan)Adelante, Atrás e InicioMapa del sitio web
Los usuarios se decantan por los buscadores internos para encontrar información en una web
![Page 21: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/21.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Diseño orientado al usuario -El diseño comienza por realmente conocer quiénes son tus usuarios, y luego diseñar algo apropiado para cada uno.
![Page 22: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/22.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Modelo de Garret -Experiencia de usuario en dos ejes: uno que considera la Web como una interfaz de software, el otro considera la web como un sistema de hipertexto.
![Page 23: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/23.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Modelo de Argus -El público y los usuarios sólo ven la punta del iceberg, pero bajo el nivel del agua existe una enorme estructura multidimensional que se construye en base a los usuarios, el contenido y el contexto del proyecto.
![Page 24: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/24.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Proceso de Argus Investigación
* Objetivos * Audiencia * Requisitos de Contenido y Funcionales * Agrupar Contenido * Diseño Conceptual * Brainstorming * Explorar Metáforas * Escenarios * Mapas de Alto Nivel * Esquemas de Página * Bocetos de Diseño
Producción y Operación
* Mapas detallados * Mapeo de contenido * Inventario de Páginas * Arquitectura Punto de Producción * Guía de Estilo de la Arquitectura * Aprender de los Usuarios
![Page 25: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/25.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Consejos para una buena AI
*Clarifica la misión y visión del sitio, equilibrando las necesidades del patrocinador y las necesidades de la audiencia
*Determina el contenido y funcionalidad que el sitio va a tener
*Especifica cómo los usuarios van a encontrar la informacion al definir su organización, navegación, etiquetado y sistemas de búsqueda *Mapea cómo el sitio se va a acomodar al cambio y crecimiento en el tiempo
![Page 26: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/26.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
![Page 27: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/27.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Métodos de análisis de Procesos WebCard Sorting
Entrevista Contextual
Focus Group
Evaluación Heurística
Entrevista Individual
Diseño Paralelo
Encuestas en línea
![Page 28: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/28.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
¿Porque una buena Usabilidad?-Las mejoras en rendimiento ganadas mediante diseño de interfaz usable son 3 o 4 veces mayores que aquellas logradas por el diseño de mejores algoritmos de búsqueda
El coste de lograr un nuevo cliente/usuario es 10 vez mayor que fidelizar a uno que ya lo es.
El coste de nuevos desarrollos y su mantenimiento es un 25% menor
![Page 29: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/29.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Eye-trackingProceso de evaluar, bien el punto donde se fija la mirada
Electrooculograma
search coil (Anillos de busqueda)
![Page 30: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/30.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Heatmap – Mapa de calorCrazyEgg (online)
Click Heat (servidor)
Click Density
Wordpress Click Tracking (solo WP)
Google Analytics
![Page 31: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/31.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
¿Porque una buena Usabilidad?-Las mejoras en rendimiento ganadas mediante diseño de interfaz usable son 3 o 4 veces mayores que aquellas logradas por el diseño de mejores algoritmos de búsqueda
El coste de lograr un nuevo cliente/usuario es 10 vez mayor que fidelizar a uno que ya lo es.
El coste de nuevos desarrollos y su mantenimiento es un 25% menor
![Page 32: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/32.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Ejemplo importancia de percepción
![Page 33: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/33.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Ejemplo AI - Usabilidad
![Page 34: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/34.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Colores y UsabilidadLos colores definen el tipo de web de cara al usuario.
* El rojo se asocia a sangre, y a las sensaciones que son enérgicas, excitando, apasionado o erótico. La mayoría de los colores llevan implicaciones positivas y negativas. El downside del rojo evoca sensaciones agresivas, sugiriendo cólera o violencia. * El naranja es el color de la carne, o el calor amistoso del fuego del hogar. Las implicaciones positivas de este color sugieren el approachability. El lado negativo puede implicar accesibilidad al punto de sugerir que cualquier persona puede acercarse. * El amarillo es el color del sol. Este color es optimista, moderno. La energía del amarillo puede llegar a ser abrumadora. El amarillo no debe predominar en una web. * El verde, es positivo, sugiere la naturaleza (vida, bosques, plantas), vida, estabilidad. * El azul seriedad, espiritualidad, elegancia, infinito, cielo. * El violeta es el color de la fantasía, de la alegría, del impulso y de estados ideales. En su modo negativo, puede sugerir pesadillas, o locura.
*Negro, es la elegancia y la muerte.
Utilizar el color blanco
![Page 35: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/35.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Textos y Usabilidad Texto InicialNebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).
Concise text - 58%In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park.
Texto+tabla 47%Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were: * Fort Robinson State Park (355,000 visitors) * Scotts Bluff National Monument (132,166) * Arbor Lodge State Historical Park & Museum (100,000) * Carhenge (86,598) * Stuhr Museum of the Prairie Pioneer (60,002) * Buffalo Bill Ranch State Historical Park (28,446).
Lenguaje neutral - 27%Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).
Version combinada - 124%In 1996, six of the most-visited places in Nebraska were:
* Fort Robinson State Park * Scotts Bluff National Monument * Arbor Lodge State Historical Park & Museum * Carhenge * Stuhr Museum of the Prairie Pioneer * Buffalo Bill Ranch State Historical Park
![Page 36: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/36.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Usabilidad y algo más
![Page 37: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/37.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Métodos de análisis de Procesos WebCard Sorting
Entrevista Contextual
Focus Group
Evaluación Heurística
Entrevista Individual
Diseño Paralelo
Encuestas en línea
![Page 38: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/38.jpg)
Usabilidad en entornos WebJuan Franci sco R
uiz - laminarriet a@
gmail.co m
Algunos Enlaces
Métodoshttp://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htmhttp://www.hipertext.net/web/pag206.htm
Prototiposhttp://www.balsamiq.com/demos/mockups/Mockups.html
Usabilidad y AIhttp://www.useit.comhttp://www.mantruc.comhttp://www.albertolacalle.comwww.nosolousabilidad.comhttp://www.webestilo.comhttp://usalo.es/http://www.demystifyingusability.com/
Softwarehttp://crazyegg.comhttp://www.clickdensity.comhttp://www.labsmedia.com/clickheat/index.html
![Page 39: Curso de Usabilidad en web](https://reader034.vdocuments.pub/reader034/viewer/2022051817/548236efb079591f0c8b4724/html5/thumbnails/39.jpg)
Curso Usabilidad en entornos Web
Juan Francisco [email protected]
www.twitter.com/laminarrieta www.facebook.com/juanfran.ruiz
www.linkedin.com/in/juanfranciscoruiz