Usabilidad
Sitios web amigables
Steve Krug
“No me hagan pensar”
Primera regla de usabilidad de
Krug
Pensando
Sin pensar
Para que las páginas web no me hagan
pensar tienen que…..

Explicarse por sí mismas, ser evidentes
Tener un objetivo cla...
Punto de partida…
Que el internauta vea la página y no
tenga que pensar (o por lo menos que
no invierta muchos segundos en...
¿Qué cosas nos hacen
pensar?
Términos no usuales.

Ejemplo
¿Qué nos hace pensar?
Links y botones que no son obvios (que
nos hacen dudar si realmente son links o
botones
¿Qué tan difícil puede ser saber si eso
es o no es un link?
Basta con pasar el cursor por arriba y ver si
se transforma e...
¿Hay algo más sencillo que buscar?
Hay formas sencillas y otras no tanto
No a los manuales
Krug parte del convencimiento de que a la mayoría
de la gente no le gusta invertir tiempo en saber
cómo ...
Obviedad

Por eso casi todo en un
sitio web deber ser los
más OBVIO posible
Usables?
¿Cómo se descifran las páginas
web?
Gran misterio
Todos leen un sitio web de manera diferente
Lectura vs scaneo
Mito/realidad
¿Cómo usamos la web?

Miramos con atención?
Escanemos y nos detenemos
dónde nos interesa?
Cliqueamos en el primer
botón...
Diseñar para el escaneo
 Jerarquía visual clara

 Convenciones
 Dividir las páginas en áreas claramente definidas
 Que...
No leemos páginas

Las escaneamos
Diseño/uso
Señales claras
¿En qué sitio estoy?

¿En qué página estoy?
¿Cuáles son las principales
secciones de este sitio?
¿Qué o...
¿Por qué?
Usamos la web para ahorrar tiempo
Por eso siempre estamos apurados

Sabemos que no tenemos que leer todo;
bus...
El nuevo Amazon
¿Qué quieren que haga acá?
Principio básico
Eliminar dudas, no crear
nuevas dudas
Claridad
Inicio/Home
Preguntas que debe responder la
home page

¿Qué es esto?
¿Qué tienen acá?
¿Qué puedo hacer aquí?

¿Por qué debería que...
Principio de la jerarquía
Cuanto más importante, más prominente
Pero no todo puede ser importante.
Los títulos más impo...
Muy importante
Un poco menos importante

 Todavía menos importante



Inexistente
Relaciones
Los elementos de una página que se
relacionan lógicamente, deben estar
vinculados visualmente.

Los elementos...
Jeraquía visual viene de lejos
Cuando hay errores…
 El internauta pierde
tiempo buscando pistas
que le indiquen qué es
lo más
importante, dónde está
lo ...
Convenciones
Lo que
funciona
se pega
Lo obvio
Lo no obvio
Cuanto menos ruido, mejor
No a:
La complejidad sin razón
Las distracciones inútiles
La hipótesis de los clicks
 Teoría sin bases, pero extendida: “el usuario está a
un click de irse de tu página”

 Krug d...
 Puede seguir clickeando en tanto entienda que las
opciones son lógicas.
 Aunque algunas no lo son
“-Deshacerse de la mitad
de las palabras en cada
página. Y luego
deshacerse de la mitad
de lo que queda”
Segunda regla de ...
Palabras contadas
Evitar términos
que no agregan
nada.
Evitar
instrucciones
inútiles
¿Usabilidad?
Pensar y diseñar un sitio web
para que los seres humanos
puedan usarlo
Nielsen
Tabletas no es igual a móviles
Usabilidad tabletas
Principales problemas

Diseño plano
Diseño incorrectamente
escalado.

Gestos
Flujo de tabletas
Sitios web se adaptan bien
 La mayoría de los sitios web se adaptan bien a las
tabletas, a diferencia de lo que sucede en...
Apps vs sitios web móviles
 Diseño y desarrollo de apps: desafíos extras (incluyendo
la adaptación de la interfaz de usua...
Apps, cuándo desarrollarlas
-Cuando la empresa tiene
una funcionalidad extra
con valor por sobre lo que
ofrece en su sitio...
10 errores frecuentes en diseño
web
Fuente. Nielsen Norman Group
1- Búsquedas defectuosas
• Manejan mal las
faltas de tipeo, las
variantes de una
palabra.
• Devuelven
resultados no
pertin...
2- PDFs para leer online
• Formato PDF es ideal
para manuals y otros
tipos de documentos
de muchas páginas.
• Pero no para...
3- Colores de los links
• No cambiar el color de
los links una vez que se
ya se ha cliqueado en
ellos confunde al
usuario
...
4- Texto no escaneable
• No a las masas de texto
• Utilizar recursos que
funcionan en la web
• Subtítulos
• Listas con bul...
5- Fuentes de tamaño fijo
• Al programar la hoja de
estilos CSS hay que darle
al usuario la libertad de
elegir el tamaño d...
6- Títulos de páginas con baja
visibilidad para buscadores
• El título de la página es
una gran herramienta
para atraer nu...
7- Todo lo que parezca un aviso
• Usuario desarrollan una
“ceguera” a los baners
• Por eso hay que evitar
formatos de dise...
8- No respetar convenciones
• Usuario valora
consistencia en el diseño.
• Cuando las cosas
funcionan de la misma
manera el...
9- Abrir nuevas pestañas
• Los diseñadores suelen
abrir nuevas pestañas
para mantener al usuario
en su sitio.
• Esta es un...
10- No responder las preguntas del
usuario
• El ejemplo más
negativo es cuando
se evita poner el
precio de un
producto, cu...
Búsqueda
Botón de “Back”
Users frequently want to search on tablets;
they also want to return to their search
results. Unf...


Gestural user interfaces have several inherent problems that tablet apps need to minimize:



Accidental activation: u...


The two main threats to tablet usability are:



Flat design. Why not allow users to easily see what they can do? We n...
IOS 7 Flat design
 http://www.nngroup.com/articles/ios-7/
Cross channel usability
 http://www.nngroup.com/articles/cross-channelconsistency/
10 principales errores diseño web
 http://www.nngroup.com/articles/top-10-mistakes-webdesign/
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Usabillidad web 2013
Upcoming SlideShare
Loading in...5
×

Usabillidad web 2013

2,814
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,814
On Slideshare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Usabillidad web 2013

  1. 1. Usabilidad Sitios web amigables
  2. 2. Steve Krug
  3. 3. “No me hagan pensar” Primera regla de usabilidad de Krug
  4. 4. Pensando
  5. 5. Sin pensar
  6. 6. Para que las páginas web no me hagan pensar tienen que….. Explicarse por sí mismas, ser evidentes Tener un objetivo claro Dirigirse a un público determinado (o si lo hacen a un público amplio, considerar ese punto))
  7. 7. Punto de partida… Que el internauta vea la página y no tenga que pensar (o por lo menos que no invierta muchos segundos en pensar). Que toque el botón tal, o vaya a la home, que cliquée. Que se maneje intuitivamente.
  8. 8. ¿Qué cosas nos hacen pensar? Términos no usuales. Ejemplo
  9. 9. ¿Qué nos hace pensar? Links y botones que no son obvios (que nos hacen dudar si realmente son links o botones
  10. 10. ¿Qué tan difícil puede ser saber si eso es o no es un link? Basta con pasar el cursor por arriba y ver si se transforma en manito, ¿no? Sí, pero no…. Cuando se usa la web, cada signo de pregunta suma puntos al trabajo mental que a su vez distrae la atención de la tarea central: hacer lo que tengo que hacer en esa web.
  11. 11. ¿Hay algo más sencillo que buscar?
  12. 12. Hay formas sencillas y otras no tanto
  13. 13. No a los manuales Krug parte del convencimiento de que a la mayoría de la gente no le gusta invertir tiempo en saber cómo hacer las cosas. Quieren hacerlas y ya.
  14. 14. Obviedad Por eso casi todo en un sitio web deber ser los más OBVIO posible
  15. 15. Usables?
  16. 16. ¿Cómo se descifran las páginas web? Gran misterio Todos leen un sitio web de manera diferente Lectura vs scaneo
  17. 17. Mito/realidad
  18. 18. ¿Cómo usamos la web? Miramos con atención? Escanemos y nos detenemos dónde nos interesa? Cliqueamos en el primer botón que se destaca?
  19. 19. Diseñar para el escaneo  Jerarquía visual clara  Convenciones  Dividir las páginas en áreas claramente definidas  Que lo cliqueable sea muy obvio  Bajar el nivel de ruido (contaminación) al mínimo indispensable.
  20. 20. No leemos páginas Las escaneamos
  21. 21. Diseño/uso
  22. 22. Señales claras ¿En qué sitio estoy? ¿En qué página estoy? ¿Cuáles son las principales secciones de este sitio? ¿Qué opciones tengo en este nivel? ¿Cómo puedo buscar?
  23. 23. ¿Por qué? Usamos la web para ahorrar tiempo Por eso siempre estamos apurados Sabemos que no tenemos que leer todo; buscamos lo relevante para nuestros objetivos. Estamos acostumbrados a escanear (diarios, revistas, folletos)
  24. 24. El nuevo Amazon
  25. 25. ¿Qué quieren que haga acá?
  26. 26. Principio básico Eliminar dudas, no crear nuevas dudas Claridad
  27. 27. Inicio/Home
  28. 28. Preguntas que debe responder la home page ¿Qué es esto? ¿Qué tienen acá? ¿Qué puedo hacer aquí? ¿Por qué debería quedarme en este página y no irme a otra? ¿Por dónde empiezo?
  29. 29. Principio de la jerarquía Cuanto más importante, más prominente Pero no todo puede ser importante. Los títulos más importantes son más grandes, gruesos o con tipografías en negrita. Están más arriba en la página y tienen blancos alrededor.
  30. 30. Muy importante Un poco menos importante  Todavía menos importante  Inexistente
  31. 31. Relaciones Los elementos de una página que se relacionan lógicamente, deben estar vinculados visualmente. Los elementos se agrupan visualmente para mostrar qué es parte de qué.
  32. 32. Jeraquía visual viene de lejos
  33. 33. Cuando hay errores…  El internauta pierde tiempo buscando pistas que le indiquen qué es lo más importante, dónde está lo que busca.
  34. 34. Convenciones Lo que funciona se pega
  35. 35. Lo obvio
  36. 36. Lo no obvio
  37. 37. Cuanto menos ruido, mejor
  38. 38. No a: La complejidad sin razón Las distracciones inútiles
  39. 39. La hipótesis de los clicks  Teoría sin bases, pero extendida: “el usuario está a un click de irse de tu página”  Krug dice que no es real.  Usuario tiene más paciencia de la que se cree.  Puede cliquear varias veces, en tanto considere que está avanzando. Y siempre que tenga forma siempre de volver atrás (botón Back)
  40. 40.  Puede seguir clickeando en tanto entienda que las opciones son lógicas.  Aunque algunas no lo son
  41. 41. “-Deshacerse de la mitad de las palabras en cada página. Y luego deshacerse de la mitad de lo que queda” Segunda regla de Krug
  42. 42. Palabras contadas Evitar términos que no agregan nada. Evitar instrucciones inútiles
  43. 43. ¿Usabilidad? Pensar y diseñar un sitio web para que los seres humanos puedan usarlo
  44. 44. Nielsen
  45. 45. Tabletas no es igual a móviles
  46. 46. Usabilidad tabletas Principales problemas Diseño plano Diseño incorrectamente escalado. Gestos Flujo de tabletas
  47. 47. Sitios web se adaptan bien  La mayoría de los sitios web se adaptan bien a las tabletas, a diferencia de lo que sucede en pantallas de celulares.
  48. 48. Apps vs sitios web móviles  Diseño y desarrollo de apps: desafíos extras (incluyendo la adaptación de la interfaz de usuario a cada tipo de tableta)  La pregunta es: ¿por qué una empresa u organización debería tener una app?  Nielsen aconseja que se atengan a sus sitios web y que inviertan en mejorar la usabilidad de la web en vez de hacerlo en una app
  49. 49. Apps, cuándo desarrollarlas -Cuando la empresa tiene una funcionalidad extra con valor por sobre lo que ofrece en su sitio web. -Nunca utilizar la app para móviles escalada a tabletas. Miles se usan de esta manera pero se desaprovecha espacio de pantalla.
  50. 50. 10 errores frecuentes en diseño web Fuente. Nielsen Norman Group
  51. 51. 1- Búsquedas defectuosas • Manejan mal las faltas de tipeo, las variantes de una palabra. • Devuelven resultados no pertinentes. • Búsqueda: cable a tierra para el usuario
  52. 52. 2- PDFs para leer online • Formato PDF es ideal para manuals y otros tipos de documentos de muchas páginas. • Pero no para sustituir páginas web de un sitio. • Interrumpe el ritmo de la navegabilidal
  53. 53. 3- Colores de los links • No cambiar el color de los links una vez que se ya se ha cliqueado en ellos confunde al usuario • El link es esencial para orientar en la navegación (que se hizo en el pasado y que se hará en el futuro • Guía de usabilidad para links
  54. 54. 4- Texto no escaneable • No a las masas de texto • Utilizar recursos que funcionan en la web • Subtítulos • Listas con bullets • Palabras resaltadas • Párrafos cortos • Pirámide invertida • Escritura sencilla
  55. 55. 5- Fuentes de tamaño fijo • Al programar la hoja de estilos CSS hay que darle al usuario la libertad de elegir el tamaño de letra que desea usar. • Lo puede elegir en cada navegador. • Especificar el tamaño de las fuentes en términos relativos y no en un número absoluto de píxeles
  56. 56. 6- Títulos de páginas con baja visibilidad para buscadores • El título de la página es una gran herramienta para atraer nuevos visitantes desde el buscador y para orientar al que ya está en tu sitio, para que encuentre la página que está buscando • Está contenido en la etiqueta de HTML <title>
  57. 57. 7- Todo lo que parezca un aviso • Usuario desarrollan una “ceguera” a los baners • Por eso hay que evitar formatos de diseño que puedan parecerse a avisos • También tienden a pasar por alto animaciones rápidas • Cierran rápido los pop ups
  58. 58. 8- No respetar convenciones • Usuario valora consistencia en el diseño. • Cuando las cosas funcionan de la misma manera el usuario no tiene preocupaciones extras • Usuarios basan las expectativas de lo que encontrarán en tu sitio web en lo que hacen en otros sitios web
  59. 59. 9- Abrir nuevas pestañas • Los diseñadores suelen abrir nuevas pestañas para mantener al usuario en su sitio. • Esta es una esperanza vana • El usuario no quiere movimientos que no elige y valora el botón de Back • Prefieren usar el “Abrir una nueva ventana” de su navegador
  60. 60. 10- No responder las preguntas del usuario • El ejemplo más negativo es cuando se evita poner el precio de un producto, cuando lo que se quiere es vendero (y el usuario llega al sitio web con la intención primaria de comprar)
  61. 61. Búsqueda Botón de “Back” Users frequently want to search on tablets; they also want to return to their search results. Unfortunately, many apps don’t provide a proper SERP (search engine results page) as a primary navigation object that users can easily return to. Instead, search results are shown in one of those zombieattack frames with a fleeting screen presence. The Back button has long been the user’s lifeline on the web; if anything, it’s even more important on tablets, where accidental activation is a common consequence of the touchscreen interface. Unfortunately, even with apps that did offer Back, our testing revealed periodic usability problems: sometimes the feature was hard to find, while other times it didn’t undo the user’s last action as expected.
  62. 62.  Gestural user interfaces have several inherent problems that tablet apps need to minimize:  Accidental activation: users often touch things by mistake and need a way to undo the result.  Swipe ambiguity: when the screen is divided into subregions (such as the frames we caution against), the same gesture can have different effects, depending on where it’s activated. This problem is exacerbated by the trend toward flat design, which doesn’t clearly demarcate the regions.  Invisibility: users can’t see the gesture they just made, and they sometimes can’t even see what they’re supposed to touch. Again, flat design makes this worse.  Low learnability: all of the previous problems combine to make gestures hard to learn. Advanced gestures might as well not exist, as very few users employ anything beyond the basic tap, press, swipe, drag, and pinch gestures.  Despite these inherent problems, most of the tablet apps we tested employed gestures reasonably well. The exaggerated skeuomorphism of the early days has also subsided.  Dangers Ahead
  63. 63.  The two main threats to tablet usability are:  Flat design. Why not allow users to easily see what they can do? We need a golden middle ground between skeuomorphism and a dearth of distinguishing signifiers for UI elements.  Rescaled design. Whether shoehorned down from a bigger screen or grotesquely exploded from a phone screen, too many Android designs simply don’t fit the tablet’s actual screen size. (Poorly rescaled designs are less common on iPad and Windows tablets, probably because of smaller device diversity.)  The flat design threat is a fashionable trend that will hopefully subside before it hurts users (and companies) too much. The second threat will be with us longer, because it’s caused by resource constraints and the naïve idea that a single design is good enough as long as it adapts to the available screen space.
  64. 64. IOS 7 Flat design  http://www.nngroup.com/articles/ios-7/
  65. 65. Cross channel usability  http://www.nngroup.com/articles/cross-channelconsistency/
  66. 66. 10 principales errores diseño web  http://www.nngroup.com/articles/top-10-mistakes-webdesign/
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×