Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Curso de Usabilidad en web
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. Usabilidad en entornos Web
Jakob Nielsen
www.useit.com
Juan Francisco Ruiz - laminarrieta@gmail.com
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. 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. 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. 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. 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. 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. 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. 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. 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. Usabilidad en entornos Web
Experiencia de usuario
Juan Francisco Ruiz - laminarrieta@gmail.com
13. Usabilidad en entornos Web
Experiencia de usuario
Juan Francisco Ruiz - laminarrieta@gmail.com
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. 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. Usabilidad en entornos Web
Estructura informativa
Juan Francisco Ruiz - laminarrieta@gmail.com
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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. Usabilidad en entornos Web
Ejemplo importancia de percepción
Juan Francisco Ruiz - laminarrieta@gmail.com
33. Usabilidad en entornos Web
Ejemplo AI - Usabilidad
Juan Francisco Ruiz - laminarrieta@gmail.com
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. 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. Usabilidad en entornos Web
Usabilidad y algo más
Juan Francisco Ruiz - laminarrieta@gmail.com
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. 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. 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