Curso
               Usabilidad en entornos Web



Juan Francisco Ruiz
laminarrieta@gmail.com

      www.twitter.com/lamin...
Usabilidad en entornos Web


Jakob Nielsen

www.useit.com




                                      Juan Francisco Ruiz - ...
Usabilidad en entornos Web




                                                  Juan Francisco Ruiz - laminarrieta@gmail....
Usabilidad en entornos Web


Usabilidad
-Facilidad con que las personas pueden utilizar una herramienta particular o




 ...
Usabilidad en entornos Web


Arquitectura de la información
-Disciplina y arte encargada del estudio, análisis, organizaci...
Usabilidad en entornos Web


Arquitectura de la información
Objetivos:




                                               ...
Usabilidad en entornos Web


Arquitectura de la información
-Sitios web (extranet e intranets)




                       ...
Usabilidad en entornos Web


Arquitectura de la información
¿Por qué es importante?




                                  ...
Usabilidad en entornos Web


Arquitectura de la información
Hipermedia




                                               ...
Usabilidad en entornos Web


Arquitectura de la información
Hipermedia




                                               ...
Usabilidad en entornos Web


Experiencia de usuario
Factores y elementos relativos a la interacción del usuario, con un en...
Usabilidad en entornos Web


Experiencia de usuario




                             Juan Francisco Ruiz - laminarrieta@gm...
Usabilidad en entornos Web


Experiencia de usuario




                             Juan Francisco Ruiz - laminarrieta@gm...
Usabilidad en entornos Web


Persuabilidad
Capacidad para llevar a la acción al usuario y convertirlo en suscriptor, lead
...
Usabilidad en entornos Web


Datos -->Información
Extracción de “conocimiento” procesable implícito en las bases de datos ...
Usabilidad en entornos Web


Estructura informativa




                                       Juan Francisco Ruiz - lamin...
Usabilidad en entornos Web


Necesidades de la información
-Aquellos datos que un individuo debe poseer para la realizació...
Usabilidad en entornos Web


Diseño de información (DI)
-Conexión entre la información, el pensamiento humano y el uso.


...
Usabilidad en entornos Web


Jerarquias de Información

Jerarquía visual y Jerarquia de contenidos




                   ...
Usabilidad en entornos Web


Elementos de Navegación
-Informar constantemente al usuario acerca de dónde se encuentra




...
Usabilidad en entornos Web


Diseño orientado al usuario
-El diseño comienza por realmente conocer quiénes son tus usuario...
Usabilidad en entornos Web


Modelo de Garret
-Experiencia de usuario en dos ejes: uno que considera la Web como una




 ...
Usabilidad en entornos Web


Modelo de Argus
-El público y los usuarios sólo ven la punta del iceberg, pero bajo el nivel ...
Usabilidad en entornos Web


Proceso de Argus
Investigación




                                                   Juan Fr...
Usabilidad en entornos Web

 Consejos para una buena AI
*Clarifica la misión y visión del sitio, equilibrando las necesida...
Juan Francisco Ruiz - laminarrieta@gmail.com
Usabilidad en entornos Web
Usabilidad en entornos Web

 Métodos de análisis de Procesos Web
Card Sorting

Entrevista Contextual




                 ...
Usabilidad en entornos Web

 ¿Porque una buena Usabilidad?
-Las mejoras en rendimiento ganadas mediante diseño de interfaz...
Usabilidad en entornos Web

 Eye-tracking
Proceso de evaluar, bien el punto donde se fija la mirada

Electrooculograma



...
Usabilidad en entornos Web

 Heatmap – Mapa de calor
CrazyEgg (online)

Click Heat (servidor)




                        ...
Usabilidad en entornos Web

 ¿Porque una buena Usabilidad?
-Las mejoras en rendimiento ganadas mediante diseño de interfaz...
Usabilidad en entornos Web

Ejemplo importancia de percepción




                                    Juan Francisco Ruiz ...
Usabilidad en entornos Web

Ejemplo AI - Usabilidad




                                  Juan Francisco Ruiz - laminarrie...
Usabilidad en entornos Web

    Colores y Usabilidad
Los colores definen el tipo de web de cara al usuario.

* El rojo se ...
Usabilidad en entornos Web

                       Textos y Usabilidad
Texto Inicial
Nebraska is filled with international...
Usabilidad en entornos Web

Usabilidad y algo más




                                 Juan Francisco Ruiz - laminarrieta@...
Usabilidad en entornos Web

 Métodos de análisis de Procesos Web
Card Sorting

Entrevista Contextual




                 ...
Usabilidad en entornos Web


Algunos Enlaces

Métodos
http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.ht...
Curso
               Usabilidad en entornos Web



Juan Francisco Ruiz
laminarrieta@gmail.com

      www.twitter.com/lamin...
Upcoming SlideShare
Loading in...5
×

Curso de Usabilidad en web

1,645

Published on

Curso de Usabilidad Web

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,645
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
109
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Curso de Usabilidad en web

  1. 1. Curso Usabilidad en entornos Web Juan Francisco Ruiz laminarrieta@gmail.com www.twitter.com/laminarrieta www.facebook.com/juanfran.ruiz www.linkedin.com/in/juanfranciscoruiz
  2. 2. Usabilidad en entornos Web Jakob Nielsen www.useit.com Juan Francisco Ruiz - laminarrieta@gmail.com
  3. 3. Usabilidad en entornos Web Juan Francisco Ruiz - laminarrieta@gmail.com 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
  4. 4. Usabilidad en entornos Web Usabilidad -Facilidad con que las personas pueden utilizar una herramienta particular o Juan Francisco Ruiz - laminarrieta@gmail.com 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
  5. 5. Usabilidad en entornos Web Arquitectura de la información -Disciplina y arte encargada del estudio, análisis, organización, disposición Juan Francisco Ruiz - laminarrieta@gmail.com 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
  6. 6. Usabilidad en entornos Web Arquitectura de la información Objetivos: Juan Francisco Ruiz - laminarrieta@gmail.com * Entendible * Novedoso * Comprensible * Inteligente * Atractivo Lo que busca el usuario en el menor tiempo posible
  7. 7. Usabilidad en entornos Web Arquitectura de la información -Sitios web (extranet e intranets) Juan Francisco Ruiz - laminarrieta@gmail.com -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
  8. 8. Usabilidad en entornos Web Arquitectura de la información ¿Por qué es importante? Juan Francisco Ruiz - laminarrieta@gmail.com 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
  9. 9. Usabilidad en entornos Web Arquitectura de la información Hipermedia Juan Francisco Ruiz - laminarrieta@gmail.com Conjunto 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
  10. 10. Usabilidad en entornos Web Arquitectura de la información Hipermedia Juan Francisco Ruiz - laminarrieta@gmail.com Conjunto 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
  11. 11. Usabilidad en entornos Web Experiencia de usuario Factores y elementos relativos a la interacción del usuario, con un entorno o Juan Francisco Ruiz - laminarrieta@gmail.com 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
  12. 12. Usabilidad en entornos Web Experiencia de usuario Juan Francisco Ruiz - laminarrieta@gmail.com
  13. 13. Usabilidad en entornos Web Experiencia de usuario Juan Francisco Ruiz - laminarrieta@gmail.com
  14. 14. Usabilidad en entornos Web Persuabilidad Capacidad para llevar a la acción al usuario y convertirlo en suscriptor, lead Juan Francisco Ruiz - laminarrieta@gmail.com 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
  15. 15. Usabilidad en entornos Web Datos -->Información Extracción de “conocimiento” procesable implícito en las bases de datos de Juan Francisco Ruiz - laminarrieta@gmail.com las empresas Geográfico Idioma Uso Utilidad Venta Deseo
  16. 16. Usabilidad en entornos Web Estructura informativa Juan Francisco Ruiz - laminarrieta@gmail.com
  17. 17. Usabilidad en entornos Web Necesidades de la información -Aquellos datos que un individuo debe poseer para la realización de su Juan Francisco Ruiz - laminarrieta@gmail.com trabajo, su investigación, su realización personal.... Información vs Conocimiento
  18. 18. Usabilidad en entornos Web Diseño de información (DI) -Conexión entre la información, el pensamiento humano y el uso. Juan Francisco Ruiz - laminarrieta@gmail.com
  19. 19. Usabilidad en entornos Web Jerarquias de Información Jerarquía visual y Jerarquia de contenidos Juan Francisco Ruiz - laminarrieta@gmail.com -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í
  20. 20. Usabilidad en entornos Web Elementos de Navegación -Informar constantemente al usuario acerca de dónde se encuentra Juan Francisco Ruiz - laminarrieta@gmail.com No perder al usuario Coherencia del diseño Jerarquía Visual Breadcrumbs ( Migas de pan) Adelante, Atrás e Inicio Mapa del sitio web Los usuarios se decantan por los buscadores internos para encontrar información en una web
  21. 21. Usabilidad en entornos Web Diseño orientado al usuario -El diseño comienza por realmente conocer quiénes son tus usuarios, y luego Juan Francisco Ruiz - laminarrieta@gmail.com diseñar algo apropiado para cada uno.
  22. 22. Usabilidad en entornos Web Modelo de Garret -Experiencia de usuario en dos ejes: uno que considera la Web como una Juan Francisco Ruiz - laminarrieta@gmail.com interfaz de software, el otro considera la web como un sistema de hipertexto.
  23. 23. Usabilidad en entornos Web Modelo de Argus -El público y los usuarios sólo ven la punta del iceberg, pero bajo el nivel del Juan Francisco Ruiz - laminarrieta@gmail.com agua existe una enorme estructura multidimensional que se construye en base a los usuarios, el contenido y el contexto del proyecto.
  24. 24. Usabilidad en entornos Web Proceso de Argus Investigación Juan Francisco Ruiz - laminarrieta@gmail.com * 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
  25. 25. Usabilidad en entornos Web 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 Juan Francisco Ruiz - laminarrieta@gmail.com *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
  26. 26. Juan Francisco Ruiz - laminarrieta@gmail.com Usabilidad en entornos Web
  27. 27. Usabilidad en entornos Web Métodos de análisis de Procesos Web Card Sorting Entrevista Contextual Juan Francisco Ruiz - laminarrieta@gmail.com Focus Group Evaluación Heurística Entrevista Individual Diseño Paralelo Encuestas en línea
  28. 28. Usabilidad en entornos Web ¿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 Juan Francisco Ruiz - laminarrieta@gmail.com 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
  29. 29. Usabilidad en entornos Web Eye-tracking Proceso de evaluar, bien el punto donde se fija la mirada Electrooculograma Juan Francisco Ruiz - laminarrieta@gmail.com search coil (Anillos de busqueda)
  30. 30. Usabilidad en entornos Web Heatmap – Mapa de calor CrazyEgg (online) Click Heat (servidor) Juan Francisco Ruiz - laminarrieta@gmail.com Click Density Wordpress Click Tracking (solo WP) Google Analytics
  31. 31. Usabilidad en entornos Web ¿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 Juan Francisco Ruiz - laminarrieta@gmail.com 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
  32. 32. Usabilidad en entornos Web Ejemplo importancia de percepción Juan Francisco Ruiz - laminarrieta@gmail.com
  33. 33. Usabilidad en entornos Web Ejemplo AI - Usabilidad Juan Francisco Ruiz - laminarrieta@gmail.com
  34. 34. Usabilidad en entornos Web Colores y Usabilidad Los 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 Juan Francisco Ruiz - laminarrieta@gmail.com 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
  35. 35. Usabilidad en entornos Web Textos y Usabilidad Texto Inicial 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), and Buffalo Bill Ranch State Historical Park (28,446). Juan Francisco Ruiz - laminarrieta@gmail.com 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
  36. 36. Usabilidad en entornos Web Usabilidad y algo más Juan Francisco Ruiz - laminarrieta@gmail.com
  37. 37. Usabilidad en entornos Web Métodos de análisis de Procesos Web Card Sorting Entrevista Contextual Juan Francisco Ruiz - laminarrieta@gmail.com Focus Group Evaluación Heurística Entrevista Individual Diseño Paralelo Encuestas en línea
  38. 38. Usabilidad en entornos Web Algunos Enlaces Métodos http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm Juan Francisco Ruiz - laminarrieta@gmail.com http://www.hipertext.net/web/pag206.htm Prototipos http://www.balsamiq.com/demos/mockups/Mockups.html Usabilidad y AI http://www.useit.com http://www.mantruc.com http://www.albertolacalle.com www.nosolousabilidad.com http://www.webestilo.com http://usalo.es/ http://www.demystifyingusability.com/ Software http://crazyegg.com http://www.clickdensity.com http://www.labsmedia.com/clickheat/index.html
  39. 39. Curso Usabilidad en entornos Web Juan Francisco Ruiz laminarrieta@gmail.com www.twitter.com/laminarrieta www.facebook.com/juanfran.ruiz www.linkedin.com/in/juanfranciscoruiz
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×