1. Usabilidad
Sitios web amigables

2. Steve Krug

3. “No me hagan pensar”
Primera regla de usabilidad de
Krug

4. Pensando

5. Sin pensar

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. 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. ¿Qué cosas nos hacen
pensar?
Términos no usuales.
Ejemplo

9. ¿Qué nos hace pensar?
Links y botones que no son obvios (que
nos hacen dudar si realmente son links o
botones

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. ¿Hay algo más sencillo que buscar?

12. Hay formas sencillas y otras no tanto

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. Obviedad
Por eso casi todo en un
sitio web deber ser los
más OBVIO posible

15. Usables?

31. ¿Cómo se descifran las páginas
web?
Gran misterio
Todos leen un sitio web de manera diferente
Lectura vs scaneo

32. Mito/realidad

33. ¿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?

34. 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.

35. No leemos páginas
Las escaneamos

36. Diseño/uso

37. 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?

38. ¿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)

42. El nuevo Amazon

43. ¿Qué quieren que haga acá?

46. Principio básico
Eliminar dudas, no crear
nuevas dudas
Claridad

47. Inicio/Home

48. 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?

49. 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.

50. Muy importante
Un poco menos importante
 Todavía menos importante

Inexistente

51. 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é.

53. Jeraquía visual viene de lejos

54. Cuando hay errores…
 El internauta pierde
tiempo buscando pistas
que le indiquen qué es
lo más
importante, dónde está
lo que busca.

55. Convenciones
Lo que
funciona
se pega

56. Lo obvio

57. Lo no obvio

58. Cuanto menos ruido, mejor

59. No a:
La complejidad sin razón
Las distracciones inútiles

60. 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)

61.  Puede seguir clickeando en tanto entienda que las
opciones son lógicas.
 Aunque algunas no lo son

62. “-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

63. Palabras contadas
Evitar términos
que no agregan
nada.
Evitar
instrucciones
inútiles

64. ¿Usabilidad?
Pensar y diseñar un sitio web
para que los seres humanos
puedan usarlo

65. Nielsen

66. Tabletas no es igual a móviles

67. Usabilidad tabletas
Principales problemas
Diseño plano
Diseño incorrectamente
escalado.
Gestos
Flujo de tabletas

68. 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.

69. 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

70. 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.

71. 10 errores frecuentes en diseño
web
Fuente. Nielsen Norman Group

72. 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

73. 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

74. 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

75. 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

76. 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

77. 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>

78. 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

79. 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

80. 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

81. 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)

82. 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.

83. 
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

84. 
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.

85. IOS 7 Flat design
 http://www.nngroup.com/articles/ios-7/

86. Cross channel usability
 http://www.nngroup.com/articles/cross-channelconsistency/

87. 10 principales errores diseño web
 http://www.nngroup.com/articles/top-10-mistakes-webdesign/