¡No me hagas pensar!

un enfoque de sentido común para la usabilidad web

SEGUNDA EDICION

steve krug

Publicación de nuevos ciclistas

Berkeley, California, EE. UU.
¡No me hagas pensar! Un enfoque de sentido común para la usabilidad web, segunda edición © 2006 Steve
Krug

Nuevos jinetes
1249 Octava Calle
Berkeley, CA 94710
510/524-2178
800/283-9444
510/524-2221 (fax)

Encuéntrenos en la Web en www.peachpit.com

Para informar errores, envíe una nota a errata@peachpit.com

New Riders es un sello de Peachpit, una división de Pearson Education.

Editora: Karen Whitehouse

Editora de producción: Lisa
Brazieal Diseño interior y composición: Allison
D. Cecil Ilustraciones de Mark Matcho Fuentes
Farnham proporcionadas por The Font Bureau, Inc. (www.fontbureau.com)

Aviso de derechos
Todos los derechos reservados. Ninguna parte de este libro puede ser reproducida o transmitida de ninguna
forma por ningún medio, ya sea electrónico, mecánico, fotocopiado, grabación o cualquier otro, sin el permiso
previo por escrito del editor. Para obtener información sobre cómo obtener permiso para reimpresiones y
extractos, comuníquese con permisos@peachpit.com.

Aviso de responsabilidad
La información de este libro se distribuye "tal cual", sin garantía. Si bien se han tomado todas las
precauciones en la preparación del libro, ni el autor ni Peachpit serán responsables ante ninguna persona o
entidad con respecto a cualquier pérdida o daño causado o presuntamente causado directa o indirectamente
por las instrucciones contenidas en este libro. o por los productos de software y hardware informáticos
descritos en el mismo.

Marcas registradas
A lo largo de este libro, se utilizan marcas registradas. En lugar de colocar un símbolo de marca
registrada en cada aparición de un nombre de marca registrada, declaramos que estamos usando los nombres
solo de manera editorial y en beneficio del propietario de la marca registrada sin intención de infringir la marca
registrada. No se pretende que dicho uso, o el uso de cualquier nombre comercial, transmita respaldo u otra
afiliación con este libro.

ISBN 0-321-34475-8

Impreso y encuadernado en los Estados Unidos de América

[ ii ]
 Primera edición

A mi padre, que siempre

quiso que yo escribiera un libro.

Mi madre, que siempre

me hizo sentir que podía,

Melanie, que se casó conmigo,

el mayor golpe de suerte de mi vida,

y mi hijo Harry, que seguramente

escribirá libros mucho mejores que este
cuando quiera.

Segunda edicion

A mi hermano mayor,
Phil, quien fue un mensch toda su vida.

[ iii ]
contenido

PREFACIO Acerca de la Segunda Edición nosotros

PREFACIO
por roger negro xi

INTRODUCCIÓN Léame primero 2

Aclaramiento de garganta y descargos de responsabilidad

principios rectores

CAPÍTULO 1 ¡No me hagas pensar! 10

Primera ley de usabilidad de Krug

CAPITULO 2
Cómo usamos realmente la Web 20
Escaneo, satisfacción y confusión

CAPÍTULO 3 Diseño de vallas publicitarias 101 30

Diseñar páginas para escanear, no para leer

CAPÍTULO 4 ¿Animal, vegetal o mineral? 40

Por qué a los usuarios les gustan las elecciones sin sentido

CAPÍTULO 5 Omitir palabras innecesarias 44

El arte de no escribir para la Web

cosas que necesitas para hacerlo bien

CAPÍTULO 6 50
Señales de la calle y migas de pan
Diseño de navegación

[ iv ]
 contenido

CAPÍTULO 7 El primer paso en la recuperación es admitir que 94

la página de inicio está fuera de su control
Diseño de la página de inicio

asegurándote de que los tienes bien

CAPÍTULO 8 “El granjero y el vaquero 122

deberían ser amigos”
Por qué la mayoría de los argumentos del equipo de diseño web sobre la usabilidad son una pérdida de tiempo

tiempo, y cómo evitarlos

CAPÍTULO 9 Test de usabilidad con 10 céntimos al día 130

Por qué las pruebas de usuario, realizadas de manera bastante simple, son

la cura para todos los males de su sitio

preocupaciones más importantes e influencias externas

CAPÍTULO 10 La usabilidad como cortesía común 160

Por qué su sitio web debe ser un mensch

CAPÍTULO 11 Accesibilidad, hojas de estilo en cascada y usted 168

Justo cuando crees que has terminado, un gato

pasa flotando con una tostada con mantequilla atada a su espalda.

CAPÍTULO 12 ¡Ayuda! Mi jefe quiere que lo haga ________. 180

Cuando malas decisiones de diseño le suceden a buenas personas

Lectura recomendada 186

Expresiones de gratitud 192
Índice 198

[ en ]
prefacio

Acerca de
Segunda edicion
 “Justo cuando pensaba que estaba fuera, me vuelven a meter”.
—michael corleone, en el Padrino , parte III

S esde que No me hagas pensar se publicó por primera vez hace casi cinco años, la gente
han sido maravillosos con el libro.

Recibo muchos correos electrónicos encantadores. No te puedes imaginar lo lindo que es

comenzar tu mañana con alguien que nunca has conocido diciéndote que disfrutó algo que hiciste.
(Lo recomiendo altamente.)

Aún más agradable es el hecho de que a la gente parece gustarle el libro por las mismas razones que a mí.
Por ejemplo:

> Muchas personas aprecian el hecho de que sea breve. (Algunos me han dicho que en realidad
lo leyeron en un viaje en avión, que era uno de mis objetivos declarados para la primera
edición; el récord de "lectura más rápida" parece ser de unas dos horas).

> Un número gratificante de personas ha dicho que les gustó el libro porque practica lo que
predica, en la escritura y el diseño.

> Algunas personas dijeron que los hizo reír a carcajadas, lo que realmente aprecié. (Un lector dijo
que la hice reír tanto que le salió leche por la nariz. ¿Cómo puede algo así ayudar sino hacerte
sentir que tu tiempo ha sido bien invertido?)

Pero lo más satisfactorio ha sido que la gente diga que les ayudó a hacer mejor su trabajo.

Pero, ¿qué has hecho por nosotros últimamente?

Solo tomó alrededor de un año después de que apareció el libro para que la gente comenzara a
preguntarme cuándo iba a hacer una segunda edición.

Durante mucho tiempo, realmente me resistí a la idea. Me gustó el libro tal como estaba y
pensé que funcionaba bien, y dado que se trataba de principios de diseño y no de tecnología,
no pensé que fuera a quedar obsoleto en el corto plazo.

[ vii ]
prefacio

Por lo general, usaba el truco del consultor/terapeuta de preguntarles qué cambiarían, y la respuesta
casi siempre era: "Bueno, supongo que podrías actualizar los ejemplos". Algunas personas señalarían
que algunos de los sitios de los ejemplos ya no existían.

Pero el hecho es que muchos de los sitios del libro ya no estaban cuando llegó a las librerías. (Recuerde,
salió justo antes de que estallara la burbuja de Internet).
El hecho de que los sitios no existieran no hizo que los ejemplos fueran menos claros.

Otras personas dirían: "Bueno, podrías hablar sobre las cosas que han cambiado en la Web". Es
verdad; Algunas cosas sobre la Web han cambiado en los últimos años. Algunos de los cambios fueron
buenos:

> Más buenos sitios para copiar

> Hojas de estilo en cascada (CSS) que realmente funcionan

> Convenciones útiles como páginas fáciles de imprimir y ¿Qué es esto? de Amazon.com.

> Google como punto de partida de todas las acciones

> El giro en los modelos de negocio desde anuncios publicitarios (para cosas que no quiero) hasta
Anuncios de Google (para cosas que realmente podría querer)

> Ya casi nadie usa marcos

...y algunos no tan buenos:

> Ventanas emergentes

> Suplantación de identidad

Pero estos cambios no me hicieron sentir la necesidad de actualizar el libro, que trata sobre principios
de diseño, no detalles específicos de tecnología o implementación.

Y había otro problema: estaba muy orgulloso de lo corto que era el libro.
Tomó mucho trabajo, pero fue una parte importante del negocio de “practica lo que predica”. Si
iba a agregar material nuevo, tendría que tirar por la borda parte del material existente, y pensé que
todo funcionó bastante bien.

[ viii ]
 sobre la segunda edición

¿Entonces que hacemos aqui?

Uno de los mejores beneficios complementarios del libro para mí es que he podido pasar
tiempo impartiendo talleres.

En los talleres, trato de hacer lo mismo que hice en el libro: mostrarle a la gente lo que
pienso cuando hago una revisión de usabilidad de un sitio web.

Y dado que todos los que vienen a los talleres ya han leído el libro, naturalmente tuve
que encontrar diferentes ejemplos para hacer los mismos puntos y diferentes formas de
explicar las mismas cosas. También puedo hacer muchas revisiones de diferentes tipos
de sitios, porque todos los que vienen al taller pueden enviar una URL, y durante el día
hago "mini-revisiones de expertos" de 12 minutos de algunos de ellos, y una prueba de
usuario de uno o dos otros.

Y como cualquiera que alguna vez haya enseñado algo sabe, enseñar algo es la mejor
manera de aprender más sobre ello.

Entonces, cuando mi editor comenzó a preguntar sobre una segunda edición

nuevamente el año pasado, en realidad pensé en cómo sería una segunda edición. Y
aunque todavía sentía que no había mucho que cambiar o eliminar de la primera edición,
me di cuenta de que tenía otras cosas sobre las que podía escribir que podrían ser útiles.

¿Cómo qué?
El nuevo material se divide principalmente en tres categorías:

> Oh, ahora lo entiendo. Enseñar los talleres me ha dado muchas oportunidades de pensar
en lo que hay en el libro. Hay algunas cosas que he reescrito ligeramente porque creo
que ahora las entiendo un poco mejor, o tengo una mejor manera de explicarlas.

> ¡Ayuda! mi jefe quiere que yo ______. Muchas de las preguntas que la gente hace
en mis talleres equivalen a “Sé qué hacer en este caso, pero mi jefe/cliente/partes
interesadas insisten en que hago lo incorrecto. ¿Cómo puedo convencerlos de lo
contrario?

[ ix ]
prefacio

Dado que muchas personas parecen pasar mucho tiempo tratando de resolver los
mismos problemas de diseño, pensé que sería bueno darles algo de munición. Así que
agregué el Capítulo 12, que cubre problemas como

Mi gerente de marketing insiste en que hagamos que las personas brinden

mucha información personal innecesaria antes de que puedan suscribirse a
nuestro boletín, y no parece importarle que el 10% de nuestros suscriptores
ahora se llamen "Barney Rubble".

> Los capítulos “perdidos”. Había dos capítulos que quería incluir en el primer libro, pero no
lo hice, principalmente por el interés de mantenerlo breve. Uno, el Capítulo 10, trata sobre
la importancia de tratar bien a los usuarios, y el otro, el Capítulo 11, trata sobre la
accesibilidad Web.

También quería actualizar y ampliar mi lista de lecturas recomendadas, ya que en los

últimos cinco años han aparecido algunos libros fantásticos.

Cinco libras de galletas en una

caja de cuatro libras
Aunque había pasado de pensar que el libro estaba bien tal como estaba, gracias, a sentir
que tenía muchas cosas que quería agregar, todavía tenía un gran dilema: si no había nada
que quisiera agregar. por la borda, ¿cómo podría agregar material nuevo y mantener el libro
lo suficientemente corto como para leerlo en un viaje en avión?

Afortunadamente, en este punto, seguí mi propio consejo e hice una especie de prueba de
usuario: configuré un foro de discusión y pedí a los lectores de la primera edición que me
dijeran qué podía omitir. Y, afortunadamente, las pruebas hicieron lo que siempre hacen las pruebas de usuarios

> Confirmado algunas cosas que ya sabía

> Me enseñó algunas cosas que no sabía sobre cómo la gente estaba usando el libro,
y lo que valoraban de ello

> Me golpeó en la cabeza con una gran sorpresa que me permitió mejorarlo
significativamente

La gran sorpresa fue la gran cantidad de personas que sugirieron pasar los capítulos
sobre pruebas de usuario a otro libro. (Algunos de ellos habían oído que yo era

[x]
 sobre la segunda edición

planeando hacer otro libro que cubriría en detalle las pruebas de usuario hágalo usted mismo a
bajo costo o sin costo, y algunos dijeron que no se perderían los capítulos porque no planeaban
hacer ninguna prueba ellos mismos).

Pensé en hacer esto, pero no quise hacerlo porque (a) pensé que la gente los extrañaría y (b)
pensé que se sentiría como si estuviera tratando de obligar a la gente a comprar el segundo
libro. Pero tan pronto como comencé a leer lo que los usuarios tenían que decir, la solución se
volvió obvia: al comprimir los tres capítulos de prueba de usuario en uno un poco más corto que
cubre los puntos importantes que todos deberían conocer, podría ganar veinte páginas más para
usar en nuevo material. Y para cualquiera que quisiera la versión más antigua y más larga, podía
hacer que los capítulos originales estuvieran disponibles de forma gratuita en mi sitio web.1
Problema resuelto.

Finalmente, algunas notas de limpieza:

> Los enlaces. Si desea visitar alguna de las URL mencionadas en el libro,
también encontrará enlaces actualizados en mi sitio. (En caso de que alguno de los sitios, bueno,
ya sabes... desaparezca).

> Todavía no está presente en el momento de la foto. Lo único que la gente me ha preguntado
sobre eso que aún no encontrará aquí hay ninguna discusión sobre aplicaciones web.
Si bien muchos de los principios son los mismos que para los sitios web, en realidad es un
tema para otro libro y no soy la persona indicada para escribirlo.2

De todos modos, gracias por todo el pescado. Espero que encuentres útiles los nuevos bits.

Nos vemos en cinco años.

steve krug
julio de 2005

1
http://www.sensible.com/segundaedición
2
Si esa es su área, es posible que desee echar un vistazo al Manual de diseño de
aplicaciones web: mejores prácticas para software basado en la web de Susan Fowler y Victor Stanwick.

[x]
Prólogo >
no me hagas pensar de nuevo

Considerando cuánto
se imprimió la primera ha
edición cambiado
de este desde
libro, es sorprendente que2000,
el diseño cuando
básico el
de la Web se ha mantenido prácticamente igual.

En los primeros años, la plataforma era volátil. Parecía que las características cambiaban

cada semana. Tuvimos la guerra de los navegadores, con Netscape enfrentándose a todos

recién llegados y el WC3 presentando nuevos estándares HTML cada seis meses. Pero

luego, con la predecible victoria de la Wehrmacht de Redmond, todo

establecido.

Esto fue un alivio para los diseñadores web, que casi se volvieron locos.

por los cambios constantes en el código, y por el hecho de que lo estábamos inventando como

fuimos a lo largo

Pero el alivio se convirtió lentamente en frustración.

La inflexibilidad de HTML, la falta de fuentes, la capacidad de ajuste de las páginas web que hace

que el diseño sea tan impreciso, la variedad confusa de resoluciones de pantalla y navegadores

de destino (incluso si son en su mayoría Explorer), todos estos factores son molestos.

La irritación de los diseñadores se ve agravada por la lenta coagulación de una serie de

convenciones restrictivas, como el uso de anuncios publicitarios. No todas las convenciones son malas

[ xii ]
por supuesto. De hecho, a los usuarios les gustan las convenciones, incluso si los diseñadores las encuentran

limitando Para la mayoría de las personas, es bastante difícil hacer que la computadora funcione

trabajar.

Y aunque estas convenciones pueden cambiar, hay una constante que nunca cambia: la

naturaleza humana. Una fuerza social y comercial tan radical y disruptiva como ha sido Internet,

aún no ha causado una mutación notable en el

especies.

Y dado que nosotros, los diseñadores, por regla general, no entramos en contacto con personas reales

seres, es muy útil conocer a Steve Krug, o al menos tener este

libro, porque Steve conoce a los usuarios. Después de más de una década de este trabajo,

sigue examinando cada sitio web como si fuera el primero. No encontrarás rumores

palabras aquí: sólo sentido común y una comprensión amistosa de la forma en que

ver, la forma en que pensamos y la forma en que leemos.

Los principios que Steve comparte aquí seguirán siendo los mismos, pase lo que pase con

Internet: con las convenciones web, el sistema operativo, el ancho de banda o la potencia de la

computadora. Así que acerca una silla y relájate.

roger negro

Nueva York, julio de 2005

[ xiii ]
Introducción

Léeme primero
carraspeo y descargos de responsabilidad
 ¿Es realmente necesario este viaje?
—eslogan en los carteles de la Segunda Guerra Mundial que alientan el racionamiento de gasolina

En
Cuando comencé a decirle a la gente que estaba escribiendo un

libro sobre cómo hacer lo que hago, todos preguntaban lo mismo: “¿No
¿Tienes miedo de quedarte sin trabajo?

Es cierto, tengo un gran trabajo.

> Las personas ("clientes") me envían diseños de página propuestos para el nuevo sitio web que están
edificio o la URL del sitio existente que están rediseñando.

Nuevo diseño de página de inicio A Nuevo diseño de página de inicio B sitio existente

> Miro los diseños o uso el sitio y descubro si son lo suficientemente fáciles de
uso (una "revisión de usabilidad de expertos"). A veces pago a otras personas para que intenten usar el sitio
mientras miro (“pruebas de usabilidad”).1

> Escribo un informe describiendo el

problemas que encontré que son
probable que cause molestias a los usuarios Un informe de usabilidad

(“problemas de usabilidad”) y
sugerir posibles soluciones.2

1
...no debe confundirse con "voyeurismo".
2
En realidad, esto es algo que ha cambiado desde la primera edición. Vea el Capítulo 9 para el
razón por la que prácticamente he dejado de escribir lo que ahora llamo el "gran informe de la bocina".

[3]
Introducción

> Trabajo con el equipo de diseño web del cliente para ayudarlos a descubrir cómo solucionar
los problemas.

…tal vez si ponemos las

Podríamos
Me pregunto
historias principales en hacerlo así, pero …
si quedan
la promoción de personalización… donas...

¡Hey Mira!
Alguien
trajo donas.

A veces trabajamos por teléfono... …y a veces en persona

> Me pagan.

Como consultor, puedo trabajar en proyectos interesantes con mucha gente agradable e
inteligente, y cuando terminamos, los sitios son mejores que cuando empezamos. Puedo
trabajar en casa la mayor parte del tiempo y no tengo que sentarme en reuniones aburridas
todos los días o lidiar con la política de la oficina. Puedo decir lo que pienso, y la gente
suele apreciarlo. Y me pagan bien.

Créanme, no pondría en peligro a la ligera esta forma de vida.3

Pero la realidad es que hay tantos sitios web que necesitan ayuda, y tan poca gente que
hace lo que yo hago, que salvo un colapso total del auge de Internet,4 hay muy pocas
posibilidades de que me quede sin trabajo durante años.

De repente, muchas personas con poca o ninguna experiencia previa se han hecho
responsables de proyectos de gran presupuesto que pueden determinar el futuro de
sus empresas, y buscan personas que les digan que lo están haciendo bien.

3 Tengo un trabajo aún más cómodo ahora. Desde que salió el libro, dedico gran parte de mi
tiempo a impartir talleres, donde, a diferencia de la consultoría, no hay oportunidad de
procrastinar ni tarea. Al final del día, has terminado.

4 Obviamente, el auge se derrumbó poco después de que escribiera esto (finales de 2000). Aun así, hay
Probablemente hay más gente trabajando en usabilidad ahora que entonces.

[4]
 Léeme primero

Los diseñadores y desarrolladores gráficos se encuentran a sí mismos responsables del

diseño de interfaces, cosas como el diseño de interacción (lo que sucede a continuación
cuando el usuario hace clic) y la arquitectura de la información (cómo se organiza todo).

Y la mayoría de las personas no tienen el presupuesto para contratar a un consultor de

usabilidad para revisar su trabajo, y mucho menos tener uno cerca todo el tiempo.

Estoy escribiendo este libro para personas que no pueden permitirse contratar (o alquilar) a
alguien como yo. Espero que también sea de valor para las personas que trabajan con un
profesional de la usabilidad.

Como mínimo, espero que pueda ayudarlo a evitar algunos de los interminables debates
religiosos circulares sobre el diseño web que parecen consumir tanto tiempo.

No es una cirugía de cohetes™

La buena noticia es que gran parte de lo que hago es sentido común, y cualquier persona
interesada puede aprender a hacerlo.

Después de todo, la usabilidad en realidad solo significa asegurarse de que algo funcione bien: que
una persona con una habilidad y experiencia promedio (o incluso por debajo del promedio) pueda
usar la cosa, ya sea un sitio web, un avión de combate o una puerta giratoria, para su propósito.
propósito previsto sin frustrarse irremediablemente.

Sin embargo, al igual que mucho sentido común, no es necesariamente obvio hasta
después de que alguien te lo haya señalado.5

No hay duda: si puede permitírselo, contrate a alguien como yo. Pero si no puede, espero que
este libro le permita hacerlo usted mismo (en su copioso tiempo libre).

5 ...que es una de las razones por las que mi negocio de consultoría (en realidad, solo yo y algunos
espejos) se llama sentido común avanzado. “No es una cirugía de cohetes” es mi lema corporativo.

[5]
Introducción

Sí, es un libro delgado.

He trabajado duro para que este libro sea breve; espero que sea lo suficientemente breve como para
que puedas leerlo en un largo viaje en avión. Hice esto por dos razones:

> Si es corto, es más probable

que realmente se use.6 Lema

Escribo para las personas que Texto de

bienvenida

están en las trincheras: los

diseñadores, los desarrolladores,
los productores de sitios, los
gerentes de proyectos, la gente
de marketing y las personas que
firman los cheques, y para las
personas de un solo hombre que
lo están haciendo todo ellos
mismos.
La usabilidad no es el trabajo
de tu vida, y no tienes tiempo
para un libro largo.

> No necesitas saberlo todo. Al

igual que con cualquier campo,

hay mucho que podría aprender
sobre la usabilidad. Pero, a menos que sea un profesional de la usabilidad, hay un límite de cuánto
es útil aprender.7

6
Hay un buen principio de usabilidad justo ahí: si algo requiere una gran inversión de
tiempo, o parece que lo hará, es menos probable que se use.

7 Siempre me ha gustado el pasaje de Estudio en escarlata donde el Dr. Watson se sorprende al saber que
Sherlock Holmes no sabe que la tierra gira alrededor del sol. Dada la capacidad finita del cerebro humano,
explica Holmes, no puede darse el lujo de que hechos inútiles desplacen a los útiles:

“¿Qué diablos es para mí? Dices que giramos alrededor del sol. Si diéramos
la vuelta a la luna, no habría ninguna diferencia para mí ni para mi trabajo”.

[6]
 Léeme primero

Encuentro que las contribuciones más valiosas que hago a cada proyecto siempre
provienen de tener en cuenta solo algunos principios clave de usabilidad. Creo que
hay mucha más influencia para la mayoría de las personas en la comprensión de estos
principios que en otra larga lista de lo que se debe y no se debe hacer. He tratado de
resumir las pocas cosas que creo que todos los involucrados en la creación de sitios web deberían saber

No presente en el momento de la foto

Para que no pierda el tiempo buscándolos, aquí hay algunas cosas que no encontrará
en este libro:

> “La verdad” sobre la forma correcta de diseñar sitios Web. Llevo mucho tiempo en esto,
lo suficiente como para saber que no existe una forma "correcta" de diseñar sitios Web.
Es un proceso complicado y la respuesta real a la mayoría de las preguntas que la
gente me hace es "Depende".8 Pero creo que hay algunos principios rectores útiles que
siempre ayuda tener en mente, y esos son Estoy tratando de transmitir.

> Discusión de modelos de negocio. Si algo nos ha enseñado la historia es que los
modelos de negocio en Internet son como los autobuses: si pierdes uno, solo tienes
que esperar un poco y vendrá otro. No soy un experto en lo que respecta a ganar
dinero en la Web, e incluso si lo fuera, cualquier cosa que tuviera que decir
probablemente estaría pasada de moda para cuando lo leas.

> Predicciones para el futuro de la Web. Tu invitado es tan bueno como el mío. Lo único
de lo que estoy seguro es que (a) la mayoría de las predicciones que escucho son
casi con certeza incorrectas, y (b) las cosas que resultarán ser importantes vendrán
como una sorpresa, aunque en retrospectiva serán parecen perfectamente obvios.

> Hablar mal de sitios mal diseñados. Si te gusta que la gente se burle de los sitios con
fallas obvias, estás leyendo el libro equivocado. Diseñar, construir y mantener un
excelente sitio web no es fácil. Es como el golf: un puñado de formas de meter la bola
en el hoyo, un millón de formas de no hacerlo. Cualquiera que acierte aunque sea a
medias tiene mi admiración.

8
Jared Spool y sus cohortes de consultoría de usabilidad en User Interface
Engineering (www.uie.com) incluso tener camisetas de "Depende".

[7]
Introducción

Como resultado, encontrará que los sitios que uso como ejemplos tienden a ser sitios
excelentes con fallas menores. Creo que se puede aprender más mirando buenos sitios
que los malos.

> Ejemplos de todo tipo de sitios. La mayoría de los ejemplos del libro provienen de sitios
de comercio electrónico, pero los principios que describo se aplican igualmente a la
página personalizada de mi vecino de al lado, el sitio del equipo de fútbol de su hija o la
intranet de su empresa. La inclusión de ilustraciones de todos los diferentes géneros
habría resultado en un libro mucho más grande y menos útil.

¿Quién va primero?
A lo largo del libro, he tratado de evitar las referencias constantes al "usuario" y los
"usuarios". Esto se debe en parte al factor tedio, pero también para intentar que pienses
en tu propia experiencia como usuario de la Web mientras lees, algo que la mayoría de
nosotros tendemos a olvidar cuando nos ponemos el sombrero de diseño Web. Esto ha
llevado al siguiente uso de pronombres en este libro:

> “Yo” soy yo, el autor. A veces soy yo, el profesional de la usabilidad ("Le digo a mis
clientes...") y, a veces, soy yo hablando como un usuario de la Web ("Si no puedo
encontrar un botón de búsqueda..."), pero siempre soy yo.

> “Usted” es usted, el lector, alguien que diseña, construye, publica o paga las cuentas
de un sitio web.

> “Nosotros” (“Cómo usamos realmente la Web”) son todos los usuarios de la Web, lo que incluye a “usted”
y yo."

Puedo eludir estas reglas de vez en cuando, pero espero que el contexto siempre
aclare de quién estoy hablando.

[8]
 Léeme primero

¿Es realmente necesario este viaje?

Podría recitar algunas de las asombrosas estadísticas usuales sobre cuántos miles de
millones de dólares quedarán sobre la mesa este año por los sitios a los que no les
importan sus P y Q de usabilidad.

Pero dado que ya tienes un libro sobre usabilidad en tus manos, probablemente no
necesites que te diga que la usabilidad importa. Usted sabe por su propia experiencia
como usuario de la Web que prestar atención a la facilidad de uso significa menos
frustración y más satisfacción para sus visitantes, y una mejor oportunidad de que los
vuelva a ver.

Creo que mi esposa señaló la esencia de esto mejor que cualquier estadística que haya visto:

Si algo es difícil
de usar,
simplemente no lo uso tanto.

Espero que este libro lo ayude a construir un mejor sitio y, si puede omitir
algunos argumentos de diseño, tal vez incluso llegar a casa a tiempo para cenar de vez en cuando.

[9]
capítulo

1
¡No me
hagas pensar!
primera ley de usabilidad de krug
 Michael, ¿por qué están abiertas las cortinas?
—kay corleone en el padrino, parte ii

PAGS
La gente a menudo me pregunta:

“¿Qué es lo más importante que debo hacer si

¿Quieres asegurarte de que mi sitio web sea fácil de usar?”

La respuesta es simple. No es "Nada importante debe estar a más de dos clics de

distancia", o "Habla el idioma del usuario", o incluso "Sé coherente".

Su...

“¡No me hagas pensar!”

Le he estado diciendo a la gente durante años que esta es mi primera ley de usabilidad. Y el
Cuantas más páginas web miro, más me convenzo.

Es el principio primordial, el desempate definitivo al decidir si

algo funciona o no en un diseño Web. Si tiene espacio en su cabeza para una sola regla de
usabilidad, elija esta.1

Significa que, en la medida de lo humanamente posible, cuando miro una página web, debería
ser evidente. Obvio. Autoexplicativo.

Debería poder "obtenerlo", qué es y cómo usarlo, sin gastar nada.

esfuerzo pensando en ello.

¿Qué tan evidente estamos hablando?

Bueno, es bastante evidente, por ejemplo, que su vecino de al lado, que no tiene
interés en el tema de su sitio y que apenas sabe cómo usar el Back
botón, podría mirar la página de inicio de su sitio y decir: "Oh, es un _____". (Con cualquier
suerte, dirá: "Oh, es un _____. Pulcro." Pero ese es otro tema.)

1
En realidad, hay un competidor cercano: "Deshágase de la mitad de las palabras en cada página, luego deshágase de
la mitad de lo que queda.” Pero ese tiene su propio capítulo más tarde.

[ 11 ]
Capítulo 1

Piénsalo de esta manera:

Cuando miro una página que no me hace pensar, todos los globos de pensamiento sobre mi
cabeza dicen cosas como "Está bien, ahí está lo que_____. Y eso es un _____. Y ahí está
quiero".

SIN PENSAR

ESTÁ BIEN. Esto

se parece a las
categorías de productos...

...y estas son

las ofertas
especiales de hoy.

Memoria,
Módems...
Ahí está:
Monitores.
Hacer clic

[ 12 ]
 no me hagas pensar!

Pero cuando miro una página que me hace pensar, todos los globos de pensamiento
sobre mi cabeza tienen signos de interrogación.

PENSANDO

¿Es esa la
Mmm. Bastante
navegación? ¿O
ocupado.
es eso de allí?
¿Donde debería empezar?

Mmm. ¿Por qué ¿Por qué

lo llamaron pusieron eso ahí?
así?

Esos dos enlaces

¿Puedo hacer clic en
parecen ser la misma
¿que?
cosa.
¿Son realmente?

Cuando estás creando un sitio, tu trabajo es deshacerte de los signos de interrogación.

[ 13 ]
Capítulo 1

Cosas que nos hacen pensar

Todo tipo de cosas en una página web pueden hacer que nos detengamos y pensemos innecesariamente.
Tomemos los nombres de las cosas, por ejemplo. Los culpables típicos son los nombres lindos o
ingeniosos, los nombres inducidos por el marketing, los nombres específicos de la empresa y los nombres técnicos desconocidos

Por ejemplo, supongamos que un amigo me dice que XYZ Corp está buscando contratar a alguien con mis
calificaciones exactas, así que me dirijo a su sitio web. Mientras examino la página en busca de algo en lo
que hacer clic, el nombre que han elegido para la sección de ofertas de trabajo hace la diferencia.

< OBVIO REQUIERE PENSAMIENTO >

Mmm.

[Milisegundos de pensamiento] Mmm. Podría ser trabajos.

¡Trabajos! Trabajos. Pero suena como más que eso.
Hacer clic Hacer clic ¿Hago clic o sigo buscando?

Tenga en cuenta que estas cosas siempre están en un continuo en algún lugar entre "Obvio para todos" y
"Verdaderamente oscuro", y siempre hay compensaciones involucradas.

Por ejemplo, "Empleos" puede sonar demasiado poco digno para XYZ Corp, o pueden estar encerrados
en "Job-o-Rama" debido a alguna política interna complicada, o porque así es como siempre se ha
llamado en el boletín de su compañía. Mi punto principal es que las compensaciones generalmente deberían
estar más sesgadas en la dirección de "Obvio" de lo que pensamos.

Otra fuente innecesaria de signos de interrogación sobre la cabeza de las personas son los enlaces
y botones en los que obviamente no se puede hacer clic. Como usuario, nunca debería tener que dedicar un
milisegundo a pensar si se puede hacer clic en las cosas o no.

[ 14 ]
 no me hagas pensar!

< OBVIAMENTE CLICABLE REQUIERE PENSAMIENTO >

Mmm.
[Milisegundos de pensamiento]
Supongo que es un botón. Mmm.
Hacer clic
Hacer clic ¿Es eso un botón?

Resultados

Usted puede estar pensando, "Bueno, no se necesita mucho esfuerzo para

averiguar si se puede hacer clic en algo. Si apuntas el
cursor, cambiará de una flecha a una mano que señala.
¿Cual es el problema?"

El punto es que, cuando usamos la Web, cada signo de interrogación se suma a nuestra
carga de trabajo cognitivo, distrayendo nuestra atención de la tarea en cuestión. los
las distracciones pueden ser leves pero suman, y a veces no se necesita mucho para
lanzarnos.

Y como regla, a la gente no le gusta pensar en cómo hacer las cosas. El hecho de que a las
personas que construyeron el sitio no les importara lo suficiente como para hacer que las cosas fueran obvias, y
fácil—puede erosionar nuestra confianza en el sitio y sus editores.

[ 15 ]
Capítulo 1

Otro ejemplo: en la mayoría de los sitios de librerías, antes de buscar un libro, primero tengo
pensar en cómo quiero buscar.2

LA MAYORÍA DE LOS SITIOS DE LIBRERÍA

Vamos a ver. "Búsqueda rápida."
Eso debe ser lo mismo que
“
Buscar”, ¿verdad?

¿Tengo que hacer clic en ese menú desplegable?

cosa del menú?

Todo lo que sé sobre el libro es que es

por Tom Clancy. ¿Clancy es una palabra clave?

(¿Qué es una palabra clave, de todos modos?)

Supongo que tengo que usar el menú.

Clics en la flecha

“
Título. Autor. Palabra clave."

ESTÁ BIEN. Quiero "Autor".

Hace clic en "Autor"

Tipos “Tom Clancy”

Hace clic en "Buscar"

Por supuesto, la mayor parte de esta "charla mental" tiene lugar en una fracción de segundo, pero
se puede ver que es un proceso bastante ruidoso. Incluso algo tan aparentemente
tan inocente como animar un nombre conocido (de "Buscar" a "Búsqueda rápida") puede
generar otro signo de interrogación.

2
Esto seguía siendo cierto cuando revisé hace aproximadamente un año. Recién ahora, en 2005, tienen la mayoría de ellos
finalmente mejorado.

[ 16 ]
 no me hagas pensar!

Amazon.com, por otro lado, ni siquiera menciona la distinción Autor-Título-Palabra clave.

Solo miran lo que escribes y hacen lo que tenga más sentido.

AMAZON.ES ESTÁ BIEN. "Buscar

libros para _____".

Tipos “Tom Clancy”

Hace clic en "Ir"

Después de todo, ¿por qué tengo que pensar en cómo quiero buscar? Y lo que es
peor, ¿por qué tengo que pensar en cómo el motor de búsqueda del sitio quiere que formule
la pregunta, como si fuera un troll malhumorado vigilando un puente? ("Olvidaste decir
'¿Puedo?'")

Podría enumerar docenas de otras cosas en las que los visitantes de un sitio no deberían
perder el tiempo pensando, como:

> ¿Dónde estoy?

> ¿Por dónde debo empezar?
> ¿Dónde pusieron _____?
> ¿Cuáles son las cosas más importantes en esta página?
> ¿Por qué lo llamaron así?

Pero lo último que necesita es otra lista de verificación para agregar a su pila de
listas de verificación de diseño web. Lo más importante que puede hacer es comprender el
principio básico de eliminar los signos de interrogación. Si lo hace, empezará a notar todas
las cosas que le hacen pensar mientras usa la Web y eventualmente aprenderá a
reconocerlas y evitarlas en las páginas que está creando.

[ 17 ]
Capítulo 1

No puedes hacer que todo sea evidente

Su objetivo debe ser que cada página sea evidente por sí misma, de modo que con solo mirarla el
usuario promedio3 sepa qué es y cómo usarla.

A veces, sin embargo, especialmente si estás haciendo algo original, innovador o algo muy
complicado, tienes que conformarte con lo que se explica por sí mismo.
En una página que se explica por sí misma, se necesita pensar un poco para "captarlo", pero solo un poco.
La apariencia de las cosas, sus nombres bien elegidos, el diseño de la página y las pequeñas
cantidades de texto cuidadosamente elaborado deberían trabajar juntos para crear un reconocimiento
casi instantáneo.

Si no puede hacer que una página sea evidente, al menos necesita que se explique por sí misma.

¿Por qué es esto tan importante?

Por extraño que parezca, no por la razón por la que suele escuchar citado:

En Internet, la competencia
siempre está a un clic de distancia,
así que si frustras a los usuarios,
se irán a otra parte.

Esto a veces es cierto, pero te sorprendería cuánto tiempo duran algunas personas.
en sitios que los frustran. Muchas personas que encuentran problemas con un
sitio tienden a culparse a sí mismos y no al sitio.

3 El Usuario Promedio real se mantiene en una bóveda herméticamente sellada en la Oficina Internacional de
Normas en Ginebra. Nos pondremos a hablar sobre la mejor manera de pensar en el
"usuario promedio" eventualmente.

[ 18 ]
 no me hagas pensar!

El hecho es que su sitio puede no haber sido tan fácil de encontrar en primer lugar y
los visitantes pueden no saber de una alternativa. La perspectiva de empezar de nuevo no siempre es
tan atractivo

Y también está el "Ya he esperado diez minutos por este autobús, así que también puedo
aguanta un poco más” fenómeno. Además, ¿quién puede decir que la competencia será menos
frustrante?

Entonces, ¿por qué, entonces?

Hacer que las páginas sean evidentes es como tener buena iluminación en una tienda: solo hace
todo parece mejor. Usar un sitio que no nos haga pensar en cosas sin importancia
las cosas se sienten sin esfuerzo, mientras que confundirse con cosas que no nos importan
tiende a agotar nuestra energía, entusiasmo y tiempo.

Pero como verá en el próximo capítulo cuando examinemos cómo usamos realmente la Web,
la razón principal por la que es importante no hacerme pensar es que la mayoría de las personas son
vamos a pasar mucho menos tiempo mirando las páginas que diseñamos de lo que nos gustaría pensar.

Como resultado, si las páginas web van a ser efectivas, tienen que hacer funcionar la mayor
parte de su magia de un vistazo. Y la mejor manera de hacer esto es crear páginas que sean
evidentes, o al menos que se expliquen por sí mismas.

[ 19 ]
capítulo

2
Cómo usamos
realmente la Web
escaneando, satisfaciendo y confundiendo
 ¿Por qué las cosas siempre están en el último lugar donde las buscas?
Porque dejas de buscar cuando los encuentras.
—acertijo de niños

E nla los últimos

gente usa la Web, y lodiez años
que más he pasado
me ha llamado mucho
la atención es tiempo viendo
la diferencia
entre cómo pensamos que las personas usan los sitios web y cómo los usan realmente.

Cuando estamos creando sitios, actuamos como si las personas fueran a estudiar
detenidamente cada página, leyendo nuestro texto finamente elaborado, averiguando cómo
hemos organizado las cosas y sopesando sus opciones antes de decidir en qué enlace hacer clic.

Lo que realmente hacen la mayor parte del tiempo (si tenemos suerte) es echar un vistazo a cada
página nueva, escanear parte del texto y hacer clic en el primer enlace que capte su interés o se
parezca vagamente a lo que están buscando. Por lo general, hay grandes partes de la página que
ni siquiera miran.

Estamos pensando en “gran literatura” (o al menos “folleto de productos”), mientras que la

realidad del usuario es mucho más cercana a “una valla publicitaria que pasa a 60 millas por hora”.

PARA QUÉ DISEÑAMOS… LA REALIDAD…

Mire a su
Leer alrededor
febrilmente en busca de algo que
Leer

a) es interesante o
Leer
se parece
vagamente a lo que
Leer
está buscando, y
[Pausa para
la reflexión]
b) se puede hacer clic.

Finalmente, haga
Tan pronto como encuentre
clic en un enlace
cuidadosamente elegido una coincidencia
medianamente decente, haga clic.

Si no funciona, haz
clic en el botón Atrás
e inténtalo de nuevo.

[ 21 ]
Capitulo 2

Como se puede imaginar, es un poco más complicado que esto, y depende del tipo de página, lo que
el usuario está tratando de hacer, cuánta prisa tiene, etc. Pero esta visión simplista está mucho más
cerca de la realidad de lo que la mayoría de nosotros imaginamos.

Tiene sentido que imaginemos un usuario más racional y atento cuando diseñamos páginas.
Es natural suponer que todo el mundo usa la Web de la misma manera que nosotros y, como todos los
demás, tendemos a pensar que nuestro propio comportamiento es mucho más ordenado y sensato de
lo que realmente es.

Sin embargo, si desea diseñar páginas web efectivas, debe aprender a vivir con tres hechos sobre el
uso de la web en el mundo real.

HECHO DE LA VIDA #1:

No leemos páginas. Los escaneamos.

Uno de los pocos hechos bien documentados sobre el uso de la Web es que la gente tiende a pasar
muy poco tiempo leyendo la mayoría de las páginas Web.1 En cambio, las escaneamos (o hojeamos),
buscando palabras o frases que llamen nuestra atención.

La excepción, por supuesto, son las páginas que contienen documentos como noticias,
informes o descripciones de productos. Pero incluso entonces, si el documento tiene más de unos
pocos párrafos, es probable que lo imprimamos porque es más fácil y rápido de leer en papel que en
una pantalla.

¿Por qué escaneamos?

> Estamos generalmente en un apuro. Gran parte de nuestro uso de la Web está motivado por el
deseo de ahorrar tiempo. Como resultado, los usuarios de la Web tienden a actuar como tiburones:
tienen que seguir moviéndose o morirán. Simplemente no tenemos tiempo para leer nada más que
necesario.

> Sabemos que no necesitamos leer todo. En la mayoría de las páginas, en realidad solo estamos
interesados en una fracción de lo que hay en la página. Solo estamos buscando las partes que
coinciden con nuestros intereses o la tarea que tenemos entre manos, y el resto es irrelevante.
El escaneo es cómo encontramos los bits relevantes.

1
Consulte la columna Alertbox de octubre de 1997 de Jakob Nielsen, "Cómo leen los usuarios en la
Web", disponible en www.useit.com.

[ 22 ]
 cómo usamos realmente la web

> Somos buenos en eso. Hemos escaneado periódicos, revistas y libros toda nuestra vida para
encontrar las piezas que nos interesan y sabemos que funciona.

El efecto neto es muy parecido a la caricatura clásica Far Side de Gary Larson sobre el
diferencia entre lo que decimos a los perros y lo que escuchan. En la caricatura, la perra
(llamada Ginger) parece estar escuchando atentamente mientras su dueño le habla seriamente
sobre mantenerse alejada de la basura. Pero desde el punto de vista del perro, todo lo que dice
es "bla, bla, JENGIBRE, bla, bla, bla, bla, JENGIBRE, bla, bla, bla".

Lo que vemos cuando miramos una página Web depende de lo que tengamos en mente, pero
por lo general, es solo una fracción de lo que hay en la página.

LO QUE CONSTRUYEN LOS DISEÑADORES... LO QUE VEN LOS USUARIOS...

Yo quiero
comprar un

boleto.

Cómo puedo

revisa mi
¿millas de
viajero frecuente?

Al igual que Ginger, tendemos a centrarnos en palabras y frases que parecen coincidir con (a) el
tarea en cuestión o (b) nuestros intereses personales actuales o en curso. Y por supuesto, (c) el
activan palabras que están integradas en nuestro sistema nervioso, como "Gratis", "Venta" y
“Sexo”, y nuestro propio nombre.

[ 23 ]
Capitulo 2

HECHO DE LA VIDA #2:

No tomamos decisiones óptimas. Satisfacemos.

Cuando diseñamos páginas, tendemos a suponer que los usuarios escanearán la página,
Considere todas las opciones disponibles y elija la mejor.

En realidad, sin embargo, la mayoría de las veces no elegimos la mejor opción, elegimos
la primera opción razonable, una estrategia conocida como satisfactoria.2 Tan pronto como encontramos una
enlace que parece que podría conducir a lo que estamos buscando, hay un muy buen
posibilidad de que hagamos clic en él.

Había observado este comportamiento durante años, pero su significado no estaba muy claro
para mí hasta que leí el libro de Gary Klein Sources of Power: How People Make Decisions.3
Klein ha pasado muchos años estudiando la toma de decisiones naturalista: cómo personas como
bomberos, pilotos, maestros de ajedrez y operadores de plantas de energía nuclear toman decisiones.
decisiones de alto riesgo en escenarios reales con presión de tiempo, metas vagas, limitado
información y condiciones cambiantes.

El equipo de observadores de Klein entró en su primer estudio (de los comandantes de campo en el fuego
escenas) con el modelo generalmente aceptado de toma racional de decisiones: Frente
con un problema, una persona recopila información, identifica las posibles soluciones,
y elige la mejor. Partieron de la hipótesis de que debido a la
mucho en juego y presión de tiempo extrema, los capitanes de bomberos podrían comparar
sólo dos opciones, una suposición que pensaron que era conservadora.

Al final resultó que, los comandantes de bomberos no compararon ninguna opción. ellos tomaron el
primer plan razonable que vino a la mente e hizo una prueba mental rápida para detectar problemas.
Si no encontraban ninguno, tenían su plan de acción.

2
El economista Herbert Simon acuñó el término (un cruce entre satisfactorio y suficiente) en
Modelos de Hombre: Social y Racional (Wiley, 1957).

3 Prensa del MIT, 1998.

[ 24 ]
 cómo usamos realmente la web

Entonces, ¿por qué los usuarios de la Web no buscan la mejor opción?

> Estamos generalmente en un apuro. Y como señala Klein, “Optimizar es difícil y

Toma mucho tiempo. Satisfacer es más eficiente”.

> No hay mucha penalización por adivinar mal. A diferencia de la extinción de incendios, la sanción
por adivinar mal en un sitio Web suele ser sólo uno o dos clics de la
Botón Atrás, haciendo de la satisfacción una estrategia efectiva. (El botón Atrás es el
función más utilizada de los navegadores web).

Por supuesto, esto supone que las páginas se cargan rápidamente; cuando no lo hacen, tenemos que
tomar nuestras decisiones con más cuidado, solo una de las muchas razones por las que la mayoría de los usuarios de Internet

a los usuarios no les gustan las páginas de carga lenta.

> Es posible que las opciones de pesaje no mejoren nuestras posibilidades. En sitios mal diseñados,
poner esfuerzo en hacer la mejor elección realmente no ayuda. por lo general eres
es mejor ir con su primera suposición y usar el botón Atrás si no lo hace
elaborar.

> Adivinar es más divertido. Es menos trabajo que las opciones de pesaje, y si
adivina bien, es más rápido. E introduce un elemento de azar: el placer
posibilidad de toparse con algo sorprendente y bueno.

Por supuesto, esto no quiere decir que los usuarios nunca sopesen las opciones antes de hacer clic. Eso
depende de cosas como su estado de ánimo, cuán presionados están por el tiempo y cuánta
confianza tienen en el sitio.

[ 25 ]
Capitulo 2

HECHO DE LA VIDA #3:

No sabemos cómo funcionan las cosas.

Salimos del paso.
Una de las cosas que se vuelve obvia tan pronto como se realiza una prueba de usabilidad, ya
sea que esté probando sitios web, software o electrodomésticos, es hasta qué punto las
personas usan las cosas todo el tiempo sin comprender cómo funcionan o con total
desconocimiento. ideas equivocadas sobre cómo funcionan.

Ante cualquier tipo de tecnología, muy pocas personas se toman el tiempo de leer
las instrucciones. En su lugar, seguimos adelante y salimos del paso, inventando nuestras
propias historias vagamente plausibles sobre lo que estamos haciendo y por qué funciona.

A menudo me recuerda la escena al final de

príncip
ilustra
mendi
(Clási
el
El
y El príncipe y el mendigo, donde el verdadero
príncipe descubre que el mendigo parecido ha
estado usando el Gran Sello de Inglaterra como
cascanueces en su ausencia. (Tiene mucho sentido:
para él, el sello es solo este gran y pesado trozo de
metal).

Y el hecho es que hacemos las cosas de esa manera.

He visto a muchas personas usar software y sitios
web de manera efectiva en formas que no se parecen
en nada a lo que pretendían los diseñadores.

[ 26 ]
 cómo usamos realmente la web

Mi ejemplo favorito es el de las personas (y he visto al menos una docena durante las
pruebas de usuario) que escriben la URL completa de un sitio en el cuadro de búsqueda de
Yahoo cada vez que quieren ir allí, no solo para encontrar el sitio para la primera vez, pero
siempre quieren ir allí, a veces varias veces al día. Si les preguntas al respecto, queda claro
que algunos piensan que Yahoo es Internet y que esa es la forma en que lo usas.4

La mayoría de los diseñadores web

se sorprenderían si supieran cuántas
personas escriben direcciones URL en
el cuadro de búsqueda de Yahoo.

Y salir del paso no se limita a los principiantes. Incluso los usuarios con conocimientos
técnicos a menudo tienen lagunas sorprendentes en su comprensión de cómo funcionan las cosas.
(No me sorprendería si incluso Bill Gates tiene algunos fragmentos de tecnología en
su vida que usa para salir del paso).

4 En la misma línea, me he encontrado con muchos usuarios de AOL que claramente piensan
que AOL es Internet, buenas noticias para Yahoo y AOL.

[ 27 ]
Capitulo 2

¿Por qué pasó esto?

> No es importante para nosotros. Para la mayoría de nosotros, no nos importa si

entender cómo funcionan las cosas, siempre y cuando podamos usarlas. no es por falta de
inteligencia, pero por falta de cuidado. En el gran esquema de las cosas, simplemente no es
importante para nosotros.5

> Si encontramos algo que funciona, nos ceñimos a ello. Una vez que encontramos algo
que funciona, no importa cuán mal, tendemos a no buscar una mejor manera. Bien
usamos una mejor manera si nos topamos con uno, pero rara vez buscamos uno.

Siempre es interesante ver a los diseñadores y desarrolladores web observar su primera

prueba de usabilidad. La primera vez que ven a un usuario hacer clic en algo completamente
inapropiado, están sorprendidos. (Por ejemplo, cuando el usuario ignora un gran botón
"Software" en la barra de navegación y dice algo como: "Bueno, estoy buscando software, así
que creo que haría clic aquí en 'Cosas baratas' porque es barato es
siempre es bueno.”) El usuario puede incluso encontrar lo que está buscando eventualmente,
pero para entonces las personas que lo observan no saben si estar felices o no.

La segunda vez que sucede, gritan "¡Simplemente haga clic en 'Software'!" El tercero
tiempo, puedes verlos pensando: "¿Por qué nos molestamos?"

Y es una buena pregunta: si la gente se las arregla para salir del paso tanto, ¿no
¿Realmente importa si lo “entienden”? La respuesta es que importa mucho
porque si bien a veces puede funcionar salir del paso, tiende a ser ineficiente
y propenso a errores.

5 Los desarrolladores web a menudo tienen dificultades para comprender, o incluso creer, que
la gente puede sentirse así, ya que ellos mismos suelen estar muy interesados en cómo
funcionan las cosas.

[ 28 ]
 cómo usamos realmente la web

Por otro lado, si los usuarios “lo entienden”:

> Hay muchas más posibilidades de que encuentren lo que buscan, que es
bien por ellos y por ti.

> Hay más posibilidades de que entiendan la gama completa de lo que su sitio
tiene para ofrecer, no solo las partes con las que tropiezan.

> Tiene una mejor oportunidad de dirigirlos a las partes de su sitio que desea que vean.

> Se sentirán más inteligentes y con más control cuando utilicen su sitio, lo que
los traerá de vuelta. Puede salirse con la suya con un sitio en el que la gente se las arregla
solo hasta que alguien construya uno en la calle que los haga sentir inteligentes.

Si la vida te da limones...
A estas alturas usted puede estar pensando (dada esta imagen menos optimista de
la audiencia de la Web y cómo utilizan la Web), “¿Por qué no consigo un trabajo en el 7-11 local?
Al menos allí mis esfuerzos podrían ser apreciados.

Entonces, ¿qué debe hacer una chica?

Creo que la respuesta es simple: si su audiencia va a actuar como si estuviera diseñando

vallas publicitarias, diseñe grandes vallas publicitarias.

[ 29 ]
capítulo

3
Cartelera
Diseño 101
diseñar páginas para escanear, no para leer
 Si usted / No sabe / De quién son los signos / Estos son
No puedes tener / Conducido muy lejos / Birmania-Shave
—secuencia de vallas publicitarias que promocionan la crema de afeitar, alrededor de 1935

satisfecho con el hecho de que sus usuarios pasan zumbando,

F hay cinco cosas importantes que puede hacer para asegurarse de que vean, y
comprenda—tanto de su sitio como sea posible:

> Cree una jerarquía visual clara en cada página >

Aproveche las convenciones > Divida las páginas en
áreas claramente definidas > Haga que sea obvio en qué
se puede hacer clic > Minimice el ruido.

Crear una jerarquía visual clara

Una de las mejores maneras de hacer que una página sea fácil de entender rápidamente es
asegurarse de que la apariencia de las cosas en la página (todas las señales visuales) representen
de manera clara y precisa las relaciones entre las cosas en la página: qué cosas están relacionados,
y qué cosas son parte de otras cosas. En otras palabras, cada página debe tener una jerarquía
visual clara.

Las páginas con una jerarquía visual clara tienen tres características:

> Lo más importante

algo es, más prominente es.
Por ejemplo, los encabezados más Muy importante
importantes son más grandes, más
audaces, en un color distintivo, Un poco menos importante
resaltados por más espacios en blanco
o más cerca de la parte superior de la Nada tan importante

página, o alguna combinación de los

anteriores.

[ 31 ]
Capítulo 3

> Cosas que están relacionadas

lógicamente también se
relacionan visualmente. Por
ejemplo, puede mostrar que las
cosas son similares agrupándolas
bajo un encabezado, mostrándolas
en un estilo visual similar o
colocándolas todas en un orden claramente definido.
área.

> Las cosas están “anidadas”

visualmente para mostrar qué es parte de qué. Libros de computadora

Por ejemplo, un encabezado de Un libro de computadora en particular

sección ("Libros de computadora") bla bla bla bla

bla bla bla bla
bla bla bla bla
aparecería sobre el título de un bla bla bla bla
bla bla bla bla
bla bla bla bla
libro en particular, abarcando bla bla bla bla
bla bla bla bla
visualmente toda el área de bla bla bla bla
bla bla bla bla
$24.95

contenido de la página, porque el

libro es parte de la sección. Y el título,
a su vez, abarcaría los elementos que
describen el libro.

No hay nada nuevo acerca de las jerarquías visuales. Cada página de un

periódico, por ejemplo, utiliza la prominencia, la agrupación y el anidamiento para
brindarnos información útil sobre el contenido de la página antes de que leamos una
palabra. Esta imagen va con esta historia porque ambos están cubiertos por este titular.
Esta historia es la más importante porque tiene el titular más grande, la columna más
ancha y una posición destacada en la página.

El titular
que abarca El tamaño de
estas tres este titular deja
columnas deja claro de un
claro que todas vistazo que esta es
forman parte de la misma historia. la noticia más importante.

[ 32 ]
 diseño de vallas publicitarias 101

Todos analizamos jerarquías visuales, en línea y en papel, todos los días, pero sucede tan rápido
que la única vez que somos vagamente conscientes de que lo estamos haciendo es cuando no
podemos hacerlo, cuando las señales visuales (o ausencia de ellos) nos obligan a pensar.

Una buena jerarquía visual nos ahorra trabajo preprocesando la página por nosotros,
organizando y priorizando sus contenidos de una manera que podamos captar casi instantáneamente.

Pero cuando una página no tiene una jerarquía visual clara, si todo parece igualmente importante,
por ejemplo, nos vemos reducidos al proceso mucho más lento de escanear la página en busca de
palabras y frases reveladoras, y luego tratar de formar nuestro propio sentido de lo que es importante
y cómo se organizan las cosas. Es mucho más trabajo.

Además, queremos orientación editorial en los sitios web, de la misma manera que la queremos
en otros medios. El editor sabe mejor que nadie qué partes del contenido del sitio son más
importantes, valiosas o populares, así que ¿por qué no identificarlas para mí y ahorrarme el problema?

Analizar una página con una

jerarquía visual que es incluso
levemente defectuosa, donde un
encabezado abarca cosas que no son
parte de ella, por ejemplo, es como leer una
oración construida descuidadamente ("Bill
puso el gato sobre la mesa por un minuto porque

estaba un poco tambaleante”).

Aunque por lo general podemos entender

lo que se supone que significa la oración,
todavía nos desconcierta momentáneamente
y nos obliga a pensar cuando no deberíamos
tener que hacerlo.
Esta jerarquía visual defectuosa
sugiere que todas las secciones del
sitio son parte de la sección de libros de computadora.

[ 33 ]
Capítulo 3

Las convenciones son tus amigas

En algún momento de nuestra juventud, sin que nos enseñaran nunca, todos aprendimos
a leer un periódico. No las palabras, sino las convenciones.

Aprendimos, por ejemplo, que una frase en letra muy grande suele ser un título que
resume la historia que se encuentra debajo, y que el texto debajo de una imagen es una
leyenda que me dice de qué se trata la imagen o, si está en una letra muy pequeña. tipo: un
crédito de foto que me dice quién tomó la foto.

Aprendimos que conocer las diversas convenciones de diseño de página y formato hacía
más fácil y rápido escanear un periódico y encontrar las historias que nos interesaban. Y
cuando empezamos a viajar a otras ciudades, aprendimos que todos los periódicos usaban
las mismas convenciones (con ligeras variaciones), por lo que conocer las convenciones
facilitó la lectura de cualquier periódico.

Todos los medios de publicación desarrollan convenciones y continúan perfeccionándolas

y desarrollando otras nuevas con el tiempo.1 La Web ya tiene muchas de ellas, en su
mayoría derivadas de las convenciones de periódicos y revistas, y seguirán apareciendo
otras nuevas.

Todas las convenciones comienzan su vida como la brillante idea de alguien. Si la

idea funciona lo suficientemente bien, otros sitios la imitan y eventualmente
suficientes personas la han visto en suficientes lugares que no necesita explicación. Este
proceso de adopción lleva tiempo, pero ocurre bastante rápido en Internet, como todo lo
demás. Por ejemplo, suficientes personas ahora están familiarizadas con la convención de
usar un carrito de compras metafórico en los sitios de comercio electrónico, por lo que es
seguro para los diseñadores usar un ícono de carrito de compras sin etiquetarlo como "Carrito de compras".

1
Considere los pequeños logotipos semitransparentes que comenzaron a aparecer en la esquina
de la pantalla de su televisor hace algunos años para indicarle qué cadena está viendo. Están en
todas partes ahora, pero la televisión había existido durante 50 años antes de que aparecieran.

[ 34 ]
 diseño de vallas publicitarias 101

Hay dos cosas importantes que debe saber acerca de las convenciones web:

> Son muy útiles. Como un

regla, las convenciones sólo se
convierten en convenciones si
funcionan. Las convenciones bien
aplicadas facilitan que los
usuarios vayan de un sitio a otro
sin gastar mucho esfuerzo en
descubrir cómo funcionan las cosas.

Hay una sensación tranquilizadora

de familiaridad, por ejemplo, al Las convenciones
permiten que los
ver una lista de enlaces a las
usuarios descubran
secciones de un sitio en un color
muchas cosas acerca
fondo en el lado izquierdo de la de una página web,
incluso si no pueden
página, aunque a veces va
entender ni una palabra.
acompañado de una tediosa
sensación de déjà vu.

> Los diseñadores suelen ser reacios a aprovecharlos. Frente a la perspectiva de utilizar
una convención, existe una gran tentación para los diseñadores de reinventar la
rueda, en gran parte porque sienten (no incorrectamente) que han sido contratados
para hacer algo nuevo y diferente, y no lo mismo de siempre. (Sin mencionar el hecho
de que los elogios de los compañeros, los premios y las ofertas de trabajo de alto perfil
rara vez se basan en criterios como "mejor uso de las convenciones").

[ 35 ]
Capítulo 3

A veces, el tiempo dedicado a

reinventar la rueda da como RUEDA
resultado un nuevo y revolucionario
dispositivo rodante. Pero a veces
solo equivale a tiempo dedicado a reinventar la rueda.

Si no va a utilizar una
convención web existente, debe
asegurarse de que lo que está
reemplazando con (a) sea tan claro
Patente pendiente 48.022 a. C., 42.639 a. C., 36.210 a.
y que se explique por sí mismo que
C., 31.887 a. C., 30.599 a. C., 28.714 a.
no haya una curva de aprendizaje,
por lo que es tan bueno como una
convención o (b) agrega tanto valor
que vale la pena una pequeña curva de aprendizaje. Si va a innovar, debe
comprender el valor de lo que está reemplazando, y muchos diseñadores tienden
a subestimar el valor que brindan las convenciones.

Mi recomendación: innove cuando sepa que tiene una idea mejor (y todos a los
que se la muestre digan "¡Guau!"), pero aproveche las convenciones cuando no las
tenga.

Divide las páginas en áreas claramente definidas

Idealmente, los usuarios deberían poder jugar una versión del viejo programa de
juegos de Dick Clark, la Pirámide de $25,000 con cualquier página web bien
diseñada.2 Al mirar a su alrededor, deberían poder señalar las diferentes áreas de la página
y decir: hacer en este sitio!” "¡Enlaces a las principales noticias de hoy!" “¡Productos que vende esta empre
“¡Cosas que están ansiosos por venderme!” “¡Navegación para llegar al resto del sitio!”

Dividir la página en áreas claramente definidas es importante porque permite a los

usuarios decidir rápidamente en qué áreas de la página enfocarse y en qué áreas pueden

2
Dada una categoría como “Cosas que usa un plomero”, los concursantes tendrían que hacer que sus
compañeros adivinen la categoría dando ejemplos (“una llave inglesa, un cortatubos, pantalones que no se quedan arriba…”).

[ 36 ]
 diseño de vallas publicitarias 101

ignorar con seguridad. Varios de los estudios iniciales de seguimiento ocular del escaneo de páginas web
sugerir que los usuarios decidan muy rápidamente qué partes de la página es probable que tengan
información útil y luego casi nunca mirar las otras partes, casi como
aunque no estaban allí.

Haz que sea obvio lo que se puede hacer clic

Dado que una gran parte de lo que la gente hace en la Web es buscar el próximo
hacer clic, es importante dejar en claro qué se puede hacer clic y qué no.

Por ejemplo, en la página de inicio del Senador

Orrin Hatch3 durante su fallido 2000
candidatura presidencial, no estaba claro si
todo se podía hacer clic, o nada lo era.
Había 18 enlaces en la página, pero solo dos de
ellos lo invitaban a hacer clic por su
apariencia: un botón grande con la etiqueta "¡Haga
clic aquí para contribuir!" y un subrayado

enlace de texto ("historia completa").

El resto de los enlaces eran texto en color. Pero

el problema era que todo el texto en el

la página estaba en color, por lo que no había forma de
distinguir los enlaces de un vistazo.

No es un defecto desastroso. Estoy seguro de que a la

mayoría de los usuarios no les tomó mucho tiempo

comenzar a hacer clic en las cosas. Pero cuando obligas a los usuarios a pensar
sobre algo que debería ser una tontería como lo www.orrinhatch.com
que se puede hacer clic, está desperdiciando el
reserva limitada de paciencia y buena voluntad que cada
usuario aporta a un nuevo sitio.

3 Orrin Hatch merece al menos una nota a pie de página en la historia de la usabilidad, ya que, según mi leal saber y entender,
conocimiento: el primer candidato presidencial en hacer de la usabilidad web un tema de campaña. En el primero
debate televisado de los candidatos republicanos de la campaña de 2000, le dijo a George W. Bush: "Tengo
decir, Gobernador, a diferencia de [su sitio web], es fácil encontrar todo en el mío. [Risas.]
¡Es bastante difícil usar el tuyo! El tuyo no es fácil de usar”. (Su sitio era más fácil de usar).

[ 37 ]
Capítulo 3

Uno de mis otros ejemplos favoritos es el cuadro de

búsqueda en drkoop.com (el sitio de salud de C. Everett Koop).

Cada vez que lo uso, me hace pensar, porque el botón que ejecuta la búsqueda
simplemente no parece un botón, a pesar de que tiene dos señales visuales excelentes:
contiene la palabra "buscar", que es una de las dos etiquetas perfectas para un botón de
cuadro de búsqueda,4 y es lo único cerca del cuadro de búsqueda.

Incluso tiene un pequeño gráfico de flecha triangular, que es uno de los indicadores
convencionales de "Haga clic aquí" de la Web. Pero la flecha apunta hacia el lado
contrario del texto, como si apuntara a otra cosa, mientras que la convención exige que
apunte hacia el texto en el que se puede hacer clic.

Mover la flecha hacia la izquierda sería suficiente para

deshacerme del signo de interrogación sobre mi cabeza.

Mantenga el ruido reducido a un rugido sordo

Uno de los grandes enemigos de las páginas fáciles de entender es el ruido visual. En realidad,
hay dos tipos de ruido:

> Ocupación. Algunas páginas web me dan la misma sensación que tengo cuando estoy
hojeando mi carta de Publisher's Clearing House tratando de averiguar qué calcomanía
debo adjuntar al formulario para ingresar sin suscribirme accidentalmente a ninguna revista.

Cuando todo en la página está clamando por mi atención, el efecto puede ser abrumador:
¡Muchas invitaciones para comprar! ¡Muchos signos de exclamación y colores brillantes! ¡Se
escuchan muchos gritos!

> Ruido de fondo. Algunas páginas son como estar en un cóctel; nadie
La fuente de ruido es lo suficientemente fuerte como para distraer por sí sola, pero hay
muchos fragmentos diminutos de ruido visual que nos desgastan.

4 “Ir” es el otro, pero solo si también usa la palabra “Buscar” como etiqueta para el cuadro.

[ 38 ]
 diseño de vallas publicitarias 101

Por ejemplo, los menús de MSNBC son un dispositivo de navegación potente y elegante que permite
a los usuarios acceder rápidamente a cualquier historia del sitio. Pero las líneas entre los elementos
añaden mucho ruido. Poner las líneas en gris haría que los menús fueran mucho más fáciles de escanear.

Después
Antes

www.msnbc.com

Los usuarios tienen distintas tolerancias a la complejidad y las distracciones; algunas personas no
tienen problemas con las páginas ocupadas y el ruido de fondo, pero muchas sí. Cuando esté
diseñando páginas web, probablemente sea una buena idea asumir que todo es ruido visual hasta
que se demuestre lo contrario.

[ 39 ]
capítulo

4
¿Animal, vegetal
o mineral?
por qué a los usuarios les gustan las elecciones sin sentido
 No importa cuántas veces tenga que hacer clic, siempre
que cada clic sea una elección inequívoca e inequívoca.
—segunda ley de usabilidad de krug

Los diseñadores de eb y los profesionales de la usabilidad tienen

En pasado mucho tiempo a lo largo de los años debatiendo cuántas veces

pueden esperar que los usuarios hagan clic para obtener lo que desean sin
sentirse demasiado frustrados.1 Algunos sitios incluso tienen reglas de diseño que establecen
que nunca debe tomar más de un número específico de clics (generalmente tres, cuatro o
cinco) para llegar a cualquier página en el sitio.

A primera vista, el "número de clics para llegar a cualquier parte" parece un criterio útil.
Pero con el tiempo he llegado a pensar que lo que realmente cuenta no es la cantidad de
clics que necesito para llegar a lo que quiero (aunque hay límites), sino qué tan difícil es
cada clic: la cantidad de pensamiento requerido y la cantidad de incertidumbre acerca de si
estoy tomando la decisión correcta.

En general, creo que es seguro decir que a los usuarios no les importan muchos clics, siempre
y cuando cada clic sea indoloro y tengan la confianza continua de que están en el camino
correcto, siguiendo lo que Jared Spool llama "el aroma de la información". .” Creo que la regla
general podría ser algo así como "tres clics inequívocos e inequívocos equivalen a un clic que
requiere reflexión".

La primera pregunta clásica en el juego de palabras Veinte Preguntas—“¿Animal,

vegetal o mineral?”—es un ejemplo maravilloso de una elección sin sentido. Mientras acepte
la premisa de que cualquier cosa que no sea una planta o un animal, incluidas cosas tan
diversas como pianos, quintillas y enciclopedias, por

1
En realidad, es solo una parte de un debate mucho más amplio sobre los méritos relativos de las
jerarquías de sitios amplios frente a los profundos. Un sitio amplio se divide en más categorías en
cada nivel, pero tiene menos niveles, por lo que se necesitan menos clics para llegar al final. Un sitio
profundo tiene más niveles y requiere más clics, pero hay menos opciones a considerar en cada nivel.
2
Por supuesto, hay excepciones. Si voy a tener que profundizar en las mismas partes de un sitio
repetidamente, por ejemplo, o repetir una secuencia de clics en una aplicación web, o si las páginas
van a tardar mucho en cargarse, entonces el valor de menos clics aumenta.

[ 41 ]
Capítulo 4

ejemplo— cae dentro de “mineral”, no requiere ningún pensamiento para responder

la pregunta correctamente.3

Desafortunadamente, muchas opciones en la Web no son tan claras.

Por ejemplo, si voy a Virus de Symantec

Página de actualizaciones porque quiero
actualizar mi copia de Norton AntiVirus, me
enfrento a dos opciones que debo tomar antes de poder
Seguir.

Una de las opciones, Idioma, es relativamente indolora. Solo me toma un poco de

reflexión concluir que "English, US" significa "United States English", a diferencia de
"English, UK".

Sin embargo, si me molestara en hacer clic en el menú

desplegable, me daría cuenta de que, en realidad, me estaba
equivocando, ya que no hay "inglés, Reino Unido" en la lista.

Probablemente también estaría un poco desconcertado por "Español

(English, Int'l)", pero no perdería el sueño por eso.

Sin embargo, la otra opción, Producto, es un poco más complicada.

El problema es que se refiere a "NAV para Windows 95/98". Ahora, estoy seguro de que está
perfectamente claro para todos los que trabajan en Symantec que NAV y "Norton AntiVirus"
son lo mismo, pero requiere al menos un pequeño acto de fe de mi parte.

Y aunque sé con certeza que estoy usando Windows 98, al menos hay una pequeña pregunta
en mi mente si eso es exactamente lo mismo que "Windows 95/98".
Tal vez hay algo llamado "Windows 95/98" que simplemente no conozco.

3 En caso de que hayas olvidado el juego, hay una excelente versión contra la que puedes
jugar en la Web en http://www.20q.net Creado por Robin Burgener, utiliza un algoritmo de
red neuronal y juega un juego cruel. Sin embargo, lo han hecho aún más insensato al
agregar "Otro" y "Desconocido" como respuestas aceptables a la primera pregunta.

[ 42 ]
 animal, vegetal o mineral?

Otro ejemplo: cuando trato de comprar un producto o servicio para usar en la oficina de mi casa,
a menudo me encuentro con sitios que me piden que haga una elección como...

Hogar
Oficina

¿Cual soy yo? Es lo mismo que siento cuando estoy parado frente a dos buzones
etiquetados como Stamped Mail y Metered Mail con una tarjeta de respuesta comercial en la
mano. ¿Qué creen que es, estampado o medido? ¿Y qué pasa si lo tiro en la caja equivocada?

El punto es que nos enfrentamos a elecciones todo el tiempo en la Web y tomar decisiones
sin sentido es una de las principales cosas que hacen que un sitio sea fácil de usar.

[ 43 ]
capítulo

5
Omitir palabras
innecesarias
el arte de no escribir para la web
 Deshazte de la mitad de las palabras en cada
página, luego deshazte de la mitad de lo que queda.
—Tercera ley de usabilidad de Krug

De las cincola queomeseis

la universidad, cosas
ha acompañado quey meaprendí
por más tiempo en
ha beneficiado mucho
most—es la decimoséptima regla de EB White en The Elements of Style:

17. Omita palabras innecesarias.

La escritura vigorosa es concisa. Una oración no debe contener

palabras innecesarias, un párrafo sin oraciones innecesarias,
por la misma razón que un dibujo no debe tener líneas innecesarias y una
máquina no debe tener partes innecesarias.1

Cuando miro la mayoría de las páginas web, me sorprende el hecho de que la mayoría de las palabras que
ver están ocupando espacio, porque nadie los va a leer nunca. Y solo
al estar allí, todas las palabras adicionales sugieren que es posible que necesite leer
para que entiendan lo que está pasando, lo que a menudo hace que las páginas parezcan más
intimidantes de lo que realmente son.

Mi Tercera Ley probablemente suene excesiva, porque está destinada a hacerlo. Eliminar la mitad de
las palabras es en realidad un objetivo realista; Me parece que no tengo problemas para deshacerme de
la mitad de las palabras en la mayoría de las páginas web sin perder nada de valor. Pero la idea de
eliminar la mitad de lo que queda es solo mi forma de tratar de alentar a las personas a ser
despiadado al respecto.

Deshacerse de todas esas palabras que nadie va a leer tiene varios beneficios
efectos:

> Reduce el nivel de ruido de la página.

> Hace que el contenido útil sea más destacado.
> Hace que las páginas sean más cortas, lo que permite a los usuarios ver más de cada página
de un vistazo sin desplazarse.

No estoy sugiriendo que los artículos en Salon.com deban ser más cortos de lo que son.
Realmente estoy hablando de dos tipos específicos de escritura: charla feliz e instrucciones.

1
William Strunk, Jr. y EB White, The Elements of Style (Allyn y Bacon, 1979).

[ 45 ]
Capítulo 5

La charla feliz debe morir

Todos sabemos hablar feliz cuando lo vemos: es el texto introductorio que se supone
para darnos la bienvenida al sitio y decirnos lo bueno que es, o decirnos de qué se trata
para ver en la sección que acabamos de entrar.

Si no está seguro de si algo es una charla feliz, hay una prueba infalible: si
escuchas muy atentamente mientras lo lees, en realidad puedes escuchar una vocecita
en la parte de atrás de la cabeza diciendo: "Bla, bla, bla, bla, bla...".

Mucha charla feliz es el tipo de escrito promocional de autocomplacencia que

encuentras en folletos mal escritos. A diferencia de una buena copia promocional, no transmite
información útil y se centra en decir lo buenos que somos, en lugar de
delineando lo que nos hace grandes.

Aunque a veces se encuentran charlas alegres en las páginas de inicio, generalmente en párrafos
que comienzan con las palabras "Bienvenido a..."—su hábitat favorito son las portadas de
las secciones de un sitio ("frentes de sección"). Dado que estas páginas son a menudo sólo una tabla de
contenidos sin contenido propio real, existe la tentación de llenarlos con
charla feliz Desafortunadamente, el efecto es como si el editor de un libro se sintiera obligado a agregar
un párrafo a la página del índice que diga: “Este libro contiene muchos
capítulos interesantes sobre y _____, _____, _____. Esperamos que disfrute de ellos."

Happy talk es como una pequeña charla: sin contenido, básicamente solo una forma de ser sociable. Pero
la mayoría de los usuarios de la Web no tienen tiempo para charlas triviales; quieren ir directamente a la carne.
Puede, y debe, eliminar la mayor cantidad posible de conversaciones alegres.

[ 46 ]
 omitir palabras innecesarias

Las instrucciones deben morir

La otra fuente importante de palabras innecesarias son las instrucciones. Lo principal que
debe saber acerca de las instrucciones es que nadie las leerá, al menos no hasta después de
que hayan fallado los repetidos intentos de "salir del paso". E incluso entonces, si las
instrucciones son prolijas, las probabilidades de que los usuarios encuentren la información que
necesitan son bastante bajas.

Su objetivo siempre debe ser eliminar las instrucciones por completo haciendo que todo
se explique por sí mismo, o lo más parecido posible. Cuando las instrucciones sean
absolutamente necesarias, redúzcalas al mínimo.

Por ejemplo, cuando hago clic en Encuesta del sitio en el sitio de Verizon, aparece una pantalla
completa llena de instrucciones para leer.

www.verizon.com

Creo que una poda agresiva los hace mucho más útiles:

[ 47 ]
Capítulo 5

ANTES: 103 PALABRAS

El siguiente cuestionario es La primera oración es solo una charla introductoria feliz. lo sé

diseñado para proporcionarnos para qué sirve una encuesta; todo lo que necesito son las palabras "ayúdanos" para mostrar

informacion que nos ayudara que entiendan que les estoy haciendo un favor al
mejorar el sitio y hacerlo llenándolo
más relevante para sus necesidades.

Por favor seleccione sus respuestas La mayoría de los usuarios no necesitan que se les diga cómo completar un formulario web, y

de los menús desplegables los que lo hagan no sabrán lo que es un “menú desplegable” y un
y botones de opción debajo. "botón de radio" son de todos modos.

El cuestionario sólo debe En este punto, todavía estoy tratando de decidir si debo
te llevará de 2 a 3 minutos molestarme con este cuestionario, por lo que saber que es breve es
completo. información útil.

Al final de este formulario usted Esta instrucción no me sirve en este momento. pertenece a

puede optar por dejar su nombre, el final del cuestionario donde puedo actuar sobre él. Tal como es, es

dirección y número de teléfono. El único efecto es hacer que las instrucciones parezcan abrumadoras.

Si dejas tu nombre y
número, usted puede ser contactado
en el futuro para participar en un
encuesta para ayudarnos a mejorar esto
sitio.

El hecho de que no deba usar este formulario si quiero una respuesta es

Si tiene comentarios o inquietudes
que requieren una respuesta información útil e importante. Desafortunadamente, sin embargo,

póngase en contacto con el cliente no se molestan en decirme cómo me comunico con el Servicio de
Servicio. atención al cliente, o mejor aún, me dan un enlace para que pueda hacerlo desde
aquí mismo.

DESPUÉS: 41 PALABRAS

Por favor, ayúdenos a mejorar el sitio respondiendo estas preguntas. Solo le tomará de 2 a 3 minutos
completar esta encuesta.

NOTA: Si tiene comentarios o inquietudes que requieren una respuesta, no use este formulario.
En su lugar, comuníquese con Servicio al cliente.

[ 48 ]
 omitir palabras innecesarias

Y ahora para algo completamente diferente

En estos primeros capítulos, he estado tratando de transmitir algunos principios rectores
que creo que es bueno tener en cuenta cuando se crea un sitio web.

Ahora nos dirigimos a dos capítulos que analizan cómo se aplican estos principios a los dos desafíos
más grandes e importantes en el diseño web: la navegación y la
Página de inicio.

Es posible que desee preparar un almuerzo. Son capítulos muy largos.

[ 49 ]
capítulo

6
letreros de la calle y
Migas de pan
diseño de navegación
 Y puede que te encuentres, en una hermosa casa, con una hermosa
esposa Y puedes preguntarte, Bueno... ¿Cómo llegué aquí?
—cabezas parlantes, “una vez en la vida”

Es un hecho:

La gente no usará su sitio web si no pueden orientarse en él.

Usted sabe esto por su propia experiencia como usuario de la Web. Si va a un sitio
y no puede encontrar lo que está buscando o averiguar cómo está organizado el
sitio, no es probable que se quede mucho tiempo o que regrese. Entonces, ¿cómo
se crea la proverbial navegación "clara, simple y consistente"?

Escena de un centro comercial

Imagínese esto: es sábado por la tarde y se dirige al centro comercial para
comprar una motosierra.

Cuando cruzas la puerta de Sears, estás pensando, “Hmmm. ¿Dónde guardan las
motosierras? Tan pronto como estás dentro, empiezas a mirar los nombres de los
departamentos, en lo alto de las paredes. (Son lo suficientemente grandes como
para que pueda leerlos desde toda la tienda).
INSTRUMENTOS ARTÍCULOS PARA EL HOGAR CÉSPED Y JARDÍN

“Hmmm”, piensas, “¿Herramientas? ¿O césped y jardín? Dado que Sears está tan
orientado a las herramientas, te diriges en la dirección de Herramientas.

Cuando llega al departamento de Herramientas, comienza a mirar los letreros al

final de cada pasillo.

LIJADO Y
HERRAMIENTAS ELÉCTRICAS HERRAMIENTAS MANUALES
MOLIENDA

[ 51 ]
Capítulo 6

Cuando cree que tiene el pasillo

correcto, comienza a mirar los
productos individuales.

Si resulta que se equivocó, intente en otro pasillo o retroceda y comience de nuevo en el

departamento de Césped y jardín. Para cuando haya terminado, el proceso se parece a esto:

Básicamente, utiliza los

Entrar
en la tienda sistemas de navegación de la tienda
(los letreros y la jerarquía organizativa
>
que encarnan los letreros) y su
Busque el
departamento correcto capacidad para escanear estantes
llenos de productos para encontrar lo que está buscan
>
Por supuesto, el proceso real es un
Busque el
NO SÍ > pasillo correcto poco más complejo. Por un lado,

> cuando entras por la puerta sueles

dedicar unos microsegundos a una
busca el
decisión crucial: ¿Vas a empezar a
¿Sigues pensando producto
que estás en el
buscar motosierras por tu cuenta o le
>
departamento correcto? vas a preguntar a alguien dónde están?
> NO ¿Encuéntralo?

>
NO TODAVÍA Es una decisión basada en una serie de
SÍ
> variables: qué tan familiarizado está
con la tienda, cuánto confía en su
¿TOTALMENTE
$ Busque el
cajas registradoras capacidad para organizar las cosas con
FRUSTRADO?
sensatez, qué tanta prisa tiene e incluso
>
qué tan sociable
SÍ Paga usted está.

>
Busque la
> señal de salida

[ 52 ]
 letreros de la calle y migas de pan

Cuando tenemos en cuenta esta decisión, el proceso se parece a esto:

Entrar
en la tienda
NAVEGAR
>
PEDIR

preguntarle a
alguien primero?

SÍ
> >
Busque el
Encuentre un empleado
> >
departamento correcto
>
>
Busque el Pedir
>
NO SÍ >
pasillo correcto >
> Encuentre un
¿Respuesta creíble? NO >
empleado más inteligente
busca el

¿Sigues pensando producto >

SÍ
que estás en el
departamento correcto?
> >
> NO ¿Encuéntralo? busca el pasillo
> NO TODAVÍA
NO TODAVÍA
SÍ
>
CASI > busca el
producto
¿TOTALMENTE >
$ Busque el
cajas registradoras
FRUSTRADO?
¿Encuéntralo? NO >
>
SÍ Paga ¿TUVE SUFICIENTE?

> SÍ

>
Busque la >
señal de salida

Tenga en cuenta que incluso si comienza a buscar por su cuenta, si las cosas no
funcionan, es muy probable que eventualmente termine pidiéndole direcciones a alguien de todos modos

[ 53 ]
Capítulo 6

Navegación web 101

En muchos sentidos, pasa por el mismo proceso cuando ingresa a un sitio web.

> Normalmente estás tratando de encontrar algo. En el mundo “real”, podría ser la sala de
emergencias o una lata de frijoles horneados. En la Web, podría ser la videograbadora de 4
cabezas más barata con Commercial Advance o el nombre del actor en Casablanca que
interpretó al jefe de camareros en Rick's.1

> Tú decides si preguntar primero o navegar primero. La diferencia es que en un sitio web no

hay nadie que pueda decirte dónde están las cosas. El equivalente web de preguntar
direcciones es buscar: escribir una descripción de lo que está buscando en un cuadro de
búsqueda y obtener una lista de enlaces a lugares donde podría estar.

resultados

Algunas personas (Jakob Nielsen los llama usuarios "dominantes en búsquedas")2 casi
siempre buscarán un cuadro de búsqueda tan pronto como ingresen a un sitio. (Estas
pueden ser las mismas personas que buscan al empleado más cercano tan pronto como ingresan a una tienda).

1
SZ “Cuddles” Sakall, nacido como Eugene Sakall en Budapest en 1884. Irónicamente, la mayoría
de los actores de carácter que interpretaron a los habitantes de Rick's Café que odiaban a los nazis
eran en realidad actores de teatro y cine europeos famosos que aterrizaron en Hollywood después de huir de los nazis.

2
Consulte "Buscar y puede encontrar" en el archivo de Nielsen de sus columnas
Alertbox en www.useit.com.

[ 54 ]
 letreros de la calle y migas de pan

Otras personas (los usuarios "dominantes de enlaces" de Nielsen) casi siempre navegarán
primero, buscando solo cuando se hayan quedado sin enlaces probables para hacer clic o
cuando el sitio los haya frustrado lo suficiente.

Para todos los demás, la decisión de comenzar por navegar o buscar depende de su
estado de ánimo actual, de la prisa que tengan y de si el sitio parece tener una navegación
navegable decente.

> Si elige navegar, se abre camino a través de una jerarquía, utilizando

Señales para guiarte. Por lo general, buscará en la página de inicio una lista de las secciones
principales del sitio (como los letreros de los departamentos de la tienda) y hará clic en la
que le parezca adecuada.

Luego elegirá de la lista de subsecciones.

Con un poco de suerte, después de otro clic o dos, terminará con una lista del tipo de cosas
que está buscando:

Luego puede hacer clic en los enlaces individuales para examinarlos en detalle, de la
misma manera que sacaría productos del estante y leería las etiquetas.

> Eventualmente, si no puedes encontrar lo que estás buscando, te irás. Esto es tan cierto en un
sitio web como lo es en Sears. Te irás cuando estés convencido de que no lo tienen, o cuando
estés demasiado frustrado para seguir buscando.

[ 55 ]
Capítulo 6

Así es como se ve el proceso:

Entrar en el sitio

>
¿Tienes

ganas de navegar?
SÍ NO
> >
Haga clic en Encuentra
> una sección > un cuadro de búsqueda

> >
Haga clic en >
> una subsección Escriba su consulta

> >
NO
busca lo
SÍ NO
que sea ¿Resultados creíbles?

¿Crees que estás

>
>
en la sección correcta? Idear una
SÍ
> ¿Encuéntralo? consulta mejor
> >
NO
> SÍ
Escanee los resultados en

busca de coincidencias probables

NO TODAVÍA CASI >

¿TOTALMENTE Échales un vistazo
NO TODAVÍA
FRUSTRADO?
> >
SÍ
> SÍ ¿Encuéntralo? NO > SÍ

DEJA FELIZ
>
¿TUVE SUFICIENTE?

>

DEJAR INFELIZ

[ 56 ]
 letreros de la calle y migas de pan

La insoportable levedad de navegar

Buscar cosas en un sitio web y buscarlas en el mundo “real” tienen muchas similitudes. Cuando
estamos explorando la Web, de alguna manera incluso se siente como
nos estamos moviendo en un espacio físico. Piensa en las palabras que usamos para describir
la experiencia, como "navegar", "navegar" y "navegar". Y haciendo clic en un enlace
no "carga" ni "muestra" otra página, sino que "te lleva a" una página.

Pero a la experiencia web le faltan muchas de las claves en las que hemos confiado toda nuestra vida.
para negociar espacios. Considere estas rarezas del espacio web:

> Sin sentido de la escala. Incluso después de haber usado mucho un sitio web, a menos que sea un
sitio muy pequeño, tendemos a tener muy poca idea de lo grande que es (¿50 páginas?
1,000? 17,000?).3 Por lo que sabemos, podría haber esquinas enormes que nunca hemos
explorado Compare esto con una revista, un museo o una tienda por departamentos,
donde siempre tienes al menos un sentido aproximado de la relación entre lo visto y lo no visto.

El resultado práctico es que es muy difícil saber si has visto todo

de interés en un sitio, lo que significa que es difícil saber cuándo dejar de buscar.4

> Sin sentido de orientación. En un sitio Web, no hay izquierda y derecha, arriba y abajo.
abajo. Podemos hablar de subir y bajar, pero nos referimos a subir y bajar en
la jerarquía—a un nivel más general o más específico.

> Sin sentido de ubicación. En los espacios físicos, a medida que nos desplazamos acumulamos
conocimiento sobre el espacio. Desarrollamos un sentido de dónde están las cosas y podemos
tomar atajos para llegar a ellas.

3 Incluso las personas que administran sitios web a menudo tienen muy poca idea del tamaño real de sus sitios.

4 Esta es una de las razones por las que es útil que los enlaces en los que ya hemos hecho clic
se muestren en un color diferente. Nos da una pequeña idea de cuánto terreno hemos recorrido.

[ 57 ]
Capítulo 6

Puede que lleguemos a las motosierras la primera vez siguiendo las señales, pero la siguiente
tiempo en que es probable que pensemos,

“¿Motosierras? Oh, sí, recuerdo dónde estaban:

esquina posterior derecha, cerca de los refrigeradores.

Y luego dirígete directamente a ellos.

PRIMERA VEZ VISITAS POSTERIORES

Pero en la Web, tus pies nunca tocan el suelo; en cambio, haces tu camino
alrededor haciendo clic en los enlaces. Haga clic en "Herramientas eléctricas" y de repente
teletransportado al pasillo de herramientas eléctricas sin atravesar el espacio, sin mirar
cosas en el camino.

Cuando queremos volver a algo en un sitio web, en lugar de depender de un

sentido físico de dónde está, tenemos que recordar dónde está en el sentido conceptual
jerarquía y volver sobre nuestros pasos.

Esta es una de las razones por las que los marcadores (accesos directos personales almacenados) son tan

importante, y por qué el botón Atrás representa en algún lugar entre 30 y

40 por ciento de todos los clics en la Web.5

También explica por qué el concepto de páginas de inicio es tan importante. Páginas de inicio
son, comparativamente, lugares fijos. Cuando estás en un sitio, la página de inicio es como
la estrella del norte. Poder hacer clic en Inicio le brinda un nuevo comienzo.

Esta falta de fisicalidad es tanto buena como mala. En el lado positivo, el sentido de

5 L. Catledge y J. Pitkow, “Characterizing Browsing Strategies in the World-Wide

Web." En Actas de la Tercera Conferencia Internacional de la World Wide Web,
Darmstadt, Alemania (1995).

[ 58 ]
 letreros de la calle y migas de pan

la ingravidez puede ser emocionante y explica en parte por qué es tan fácil perder
la pista del tiempo en la Web, lo mismo que cuando estamos “perdidos” en un buen libro.6

En el lado negativo, creo que explica por qué usamos el término “navegación web”
aunque nunca hablemos de "navegación de grandes almacenes" o "biblioteca
navegación." Si busca navegación en un diccionario, se trata de hacer dos cosas:
ir de un lugar a otro y averiguar dónde se encuentra.

Creo que hablamos de navegación web porque “descubrir dónde estás” es un

problema mucho más generalizado en la Web que en los espacios físicos. Fueron
inherentemente perdido cuando estamos en la Web, y no podemos mirar por los pasillos para ver
donde estamos. La navegación web compensa esta falta de sentido del lugar al
encarnando la jerarquía del sitio, creando una sensación de "allí".

La navegación no es solo una característica de un sitio web; es el sitio web, de la misma

manera que el edificio, los estantes y las cajas registradoras son Sears. Sin ella, no hay allí
allí.

¿La moral? Más vale que la navegación web sea buena.

Los propósitos pasados por alto de la navegación

Dos de los propósitos de la navegación son bastante obvios: ayudarnos a encontrar lo que sea
estamos buscando, y que nos diga dónde estamos.

Y acabamos de hablar de una tercera:

> Nos da algo a lo que aferrarnos. Como regla general, no es divertido sentirse perdido. (Haría
prefieres “sentirte perdido” o “¿conocer el camino?”) Si se hace bien, la navegación pone
tierra bajo nuestros pies (incluso si es tierra virtual) y nos da pasamanos para sostener
en—para hacernos sentir conectados a tierra.

Pero la navegación tiene otras funciones igualmente importantes y que se pasan por alto con facilidad:

> Nos dice lo que hay aquí. Al hacer visible la jerarquía, la navegación nos dice
lo que contiene el sitio. ¡La navegación revela contenido! Y revelar el sitio puede ser
incluso más importante que guiarnos o ubicarnos.

6 Lo cual puede ser una razón más por la que las páginas de carga lenta son tan molestas: ¿Cuál es la diversión de

volar si solo puedes ir unas pocas millas por hora?

[ 59 ]
Capítulo 6

> Nos dice cómo usar el sitio. Si la navegación está haciendo su trabajo, le dice
implícitamente por dónde empezar y cuáles son sus opciones. Hecho correctamente, debe
tener todas las instrucciones que necesita. (Lo cual es bueno, ya que la mayoría de los
usuarios ignorarán cualquier otra instrucción de todos modos).

> Nos da confianza en las personas que lo construyeron. Cada momento que estamos en un
sitio web, mantenemos una cuenta corriente mental: "¿Estos tipos saben lo que están
haciendo?" Es uno de los principales factores que usamos para decidir si nos vamos a
rescatar y si regresamos alguna vez. Una navegación clara y bien pensada es una de las
mejores oportunidades que tiene un sitio para crear una buena impresión.

Convenciones de navegación web

Los espacios físicos como ciudades y edificios (e incluso espacios de información como libros
y revistas) tienen sus propios sistemas de navegación, con convenciones que han evolucionado
con el tiempo, como letreros de calles, números de página y títulos de capítulos. Las
convenciones especifican (vagamente) la apariencia y la ubicación de los elementos de
navegación para que sepamos qué buscar y dónde buscar cuando los necesitemos.

Ponerlos en un lugar estándar nos permite localizarlos rápidamente, con un mínimo

esfuerzo; estandarizar su apariencia hace que sea fácil distinguirlos de todo lo demás.

Por ejemplo, esperamos encontrar letreros de calles en las esquinas de las calles,
esperamos encontrarlos mirando hacia arriba (no hacia abajo) y esperamos que se vean
como letreros de calles (horizontales, no verticales).

También damos por sentado que el nombre de un edificio estará encima o al lado de su puerta
de entrada. En una tienda de abarrotes, esperamos encontrar letreros cerca de los extremos de cada pasillo.
En una revista, sabemos que habrá una tabla de contenido en algún lugar de las primeras
páginas y números de página en algún lugar del margen de cada página, y que se verán como
una tabla de contenido y números de página.

[ 60 ]
 letreros de la calle y migas de pan

Piense en lo frustrante que es cuando se rompe una de estas convenciones (cuando

las revistas no ponen números de página en las páginas de publicidad, por ejemplo).

Las convenciones de navegación para la Web surgieron rápidamente, en su mayoría

adaptadas de las convenciones de impresión existentes. Seguirán evolucionando, pero
de momento estos son los elementos básicos:

Identificación del sitio Secciones Utilidades

Subsecciones

Indicador “Estás
aquí”
>

Nombre de la página >

>

Navegación local
(Cosas en el nivel
actual)

> www.gap.com

Versión de
texto pequeño

[ 61 ]
Capítulo 6

No mires ahora, pero creo que nos está siguiendo.

Los diseñadores web utilizan el término navegación persistente (o navegación global) para
describir el conjunto de elementos de navegación que aparecen en cada página de un sitio.

Bien hecha, la navegación persistente debería decir, preferiblemente con una voz tranquila y reconfortante:

“La navegación está aquí. Algunas partes cambiarán un poco

dependiendo de dónde se encuentre, pero siempre estará aquí y
siempre funcionará de la misma manera”.

El simple hecho de que la navegación aparezca en el mismo lugar en cada página con
una apariencia uniforme le brinda una confirmación instantánea de que aún se encuentra en el
mismo sitio, lo cual es más importante de lo que piensa. Y mantenerlo igual en todo el sitio
significa que (con suerte) solo tienes que averiguar cómo funciona una vez.

La navegación persistente debe incluir los cinco elementos que más necesita tener a mano en
todo momento:
Lejos de casa Una forma de buscar

Identificación del sitio

Utilidades

Secciones

Veremos cada uno de ellos en un minuto. Pero primero…

[ 62 ]
 letreros de la calle y migas de pan

¿Dije cada página?

Mentí. Hay dos excepciones a la regla de "sígueme a todas partes":

> La página de inicio. La página de inicio no es como las otras páginas, tiene diferentes
cargas que llevar, diferentes promesas que cumplir. Como veremos en el próximo capítulo, este
a veces significa que tiene sentido no usar la navegación persistente allí.

> Formularios. En las páginas donde se debe completar un formulario, la navegación persistente a
veces puede ser una distracción innecesaria. Por ejemplo, cuando estoy pagando
para mis compras en un sitio de comercio electrónico que realmente no quieres que haga
cualquier cosa menos terminar de llenar los formularios. Lo mismo es cierto cuando me estoy registrando,
dar retroalimentación o marcar las preferencias de personalización.

Para estas páginas, es útil tener una versión mínima de la persistente

navegación con solo la ID del sitio, un enlace a Inicio y cualquier utilidad que pueda
ayúdame a llenar el formulario.

Ahora sé que no estamos en Kansas

El ID o logotipo del sitio es como el nombre del edificio de un sitio web. En Sears, realmente solo
necesito ver el nombre al entrar; una vez que estoy adentro, sé que todavía estoy en Sears hasta que
Dejo. Pero en la Web, donde mi modo principal de viaje es la teletransportación,
Necesito verlo en cada página.

Está bien. Ahora

estoy en MSNBC...

Está bien. Todavía

estoy en MSNBC...

…y ahora estoy en

Planet Rx

[ 63 ]
Capítulo 6

De la misma manera que esperamos ver el nombre de un edificio sobre la entrada

principal, esperamos ver el ID del sitio en la parte superior de la página, generalmente en (o
al menos cerca) de la esquina superior izquierda.7

¿Por qué? Porque el ID del sitio representa todo el sitio, lo que significa que es lo más alto
en la jerarquía lógica del sitio.

Este sitio
Secciones de este sitio
Subsecciones

Sub-subsecciones, etc.
Esta página
Áreas de esta página
Artículos en esta página

Y hay dos formas de transmitir esta primacía en la jerarquía visual de la página: hacer que
sea lo más destacado de la página o hacer que enmarque todo lo demás.

Dado que no desea que el ID sea el elemento más destacado

Identificación del sitio

de la página (excepto, quizás, en la página de inicio), el

mejor lugar para él, el lugar que es menos probable que me
haga pensar, es en la parte superior, donde enmarca toda la Todo lo demas
página.

Y además de estar donde esperaríamos que estuviera, el

ID del sitio también debe parecerse a un ID del sitio. Esto
significa que debe tener los atributos que esperaríamos ver
en el logotipo de una marca o en el letrero fuera de una tienda: un tipo de letra distintivo y
un gráfico reconocible en cualquier tamaño, desde un botón hasta una valla publicitaria.

7 ...en páginas web escritas para idiomas de

lectura de izquierda a derecha, es decir. Los lectores

de páginas en árabe o hebreo pueden esperar que el
ID del sitio esté a la derecha. www.opus.com.il

[ 64 ]
 letreros de la calle y migas de pan

las secciones
Las secciones, a veces llamadas la navegación principal, son los enlaces a la página principal.
secciones del sitio: el nivel superior de la jerarquía del sitio.

Secciones

En la mayoría de los casos, la navegación persistente también incluirá espacio para mostrar el
navegación secundaria: la lista de subsecciones en la sección actual.

Subsecciones

las utilidades
Las utilidades son los enlaces a elementos importantes del sitio que no son realmente parte de
la jerarquía del contenido.

Utilidades

Estas son cosas que pueden ayudarme a usar el sitio (como Ayuda, un Mapa del sitio o un Carrito de
compras) o pueden proporcionar información sobre su editor (como Acerca de nosotros
y Contáctenos).

Al igual que los letreros de las instalaciones

en una tienda, la lista de Utilidades debe estar ligeramente
menos prominente que las Secciones.

[ 65 ]
Capítulo 6

Las utilidades variarán para los diferentes tipos de sitios. Para un sitio corporativo o de comercio
electrónico, por ejemplo, pueden incluir cualquiera de los siguientes:

Sobre nosotros Descargas Cómo comprar Registro

Archivo Directorio Trabajos Búsqueda

Verificar Foros Mi _____ Carrito de compras

Información de la compañía preguntas frecuentes

Noticias Iniciar sesión

Contáctenos Ayuda Rastreo de orden Mapa del sitio

Servicio al Cliente Hogar Comunicados de prensa Localizador de tiendas

Foros de discusión Relaciones con inversionistas Política de privacidad Su cuenta

Como regla general, la navegación persistente puede acomodar solo cuatro o cinco Utilidades,
las que los usuarios probablemente necesiten con mayor frecuencia. Si tratas de meter más que
eso, tienden a perderse entre la multitud. Las sobras que se usan con menos frecuencia se
pueden agrupar en la página de inicio.

“Simplemente haga clic con los talones tres

veces y diga:
Uno de los elementos másNo hay
cruciales lugar
en la como
navegación eleshogar”.
persistente un botón o enlace que me
lleva a la página de inicio del sitio.

Tener un botón de Inicio a la vista en todo momento ofrece la seguridad de que no importa cuán
perdido pueda estar, siempre puedo comenzar de nuevo, como presionar un botón Restablecer o
usar una tarjeta "Salir de la cárcel gratis".

Existe una convención emergente de que el ID del sitio funciona como un botón que puede
llevarlo a la página de inicio del sitio. Es una idea útil que todos los sitios deberían implementar,
pero un sorprendente número de usuarios aún no la conocen.

[ 66 ]
 letreros de la calle y migas de pan

Por ahora, probablemente sea una buena idea:

> incluir un vínculo a la página de inicio en el

Secciones o las Utilidades, o

> agregue la palabra "Inicio" discretamente a la ID

del sitio en todas partes excepto en la página de
inicio para que las personas sepan que se puede hacer clic.

página de inicio En todos lados

Una forma de buscar Dado el poder

potencial de la búsqueda8 y la cantidad de personas que prefieren buscar a navegar, a menos que
un sitio sea muy pequeño y esté muy bien organizado, cada página debe tener un cuadro de búsqueda
o un enlace a una página de búsqueda. Y a menos que haya muy pocas razones para buscar en su
sitio, debería ser un cuadro de búsqueda.

Tenga en cuenta que para un gran porcentaje de usuarios, su primer acto oficial cuando llegan a un
nuevo sitio será escanear la página en busca de algo que coincida con uno de estos tres patrones:

Es una fórmula simple: un cuadro, un botón y la palabra "Buscar". No se lo ponga difícil: apéguese a la
fórmula. En particular, evite

> Redacción elegante. Estarán buscando la palabra "Buscar", así que use la palabra Buscar, no
Buscar, Búsqueda rápida, Búsqueda rápida o Búsqueda por palabra clave. (Si usa "Buscar" como
etiqueta para el cuadro, use la palabra "Ir" como nombre del botón).

> Instrucciones. Si se apega a la fórmula, cualquiera que haya utilizado la Web durante más de
unos pocos días sabrá qué hacer. Agregar "Escriba una palabra clave" es como decir "Deje un
mensaje cuando suene el pitido" en el mensaje de su contestador automático: hubo un
momento en que era necesario, pero ahora solo lo hace sonar como un despistado.

8
Desafortunadamente, tengo que decir "potencial" porque en la mayoría de los sitios las probabilidades
de que una búsqueda produzca resultados útiles todavía son de 50:50. La usabilidad de búsqueda es
un tema muy amplio en sí mismo, y el mejor consejo que puedo dar es tomar una copia de Arquitectura
de la información para la World Wide Web de Louis Rosenfeld y Peter Morville (O'Reilly, 2002) y tomar
en serio todo lo que tienen. decir acerca de la búsqueda.

[ 67 ]
Capítulo 6

> Opciones. Si hay alguna posibilidad de confusión

sobre el alcance de la búsqueda (lo que se busca:
el sitio, parte del sitio, o toda la Web?), por todos
significa deletrearlo.

Pero piense con mucho cuidado antes de darme opciones para limitar el alcance (para
buscar solo la sección actual del sitio, por ejemplo). Y también tenga cuidado de proporcionar
opciones sobre cómo especifico lo que estoy buscando (buscar por título o por autor, por
ejemplo, o buscar por número de pieza o por nombre de producto).

Rara vez veo un caso en el que el beneficio potencial de agregar opciones al

cuadro de búsqueda persistente vale la pena el costo de hacerme averiguar cuál es el
son las opciones y si necesito usarlas (es decir, haciéndome pensar).

Si desea darme la opción de definir el alcance de la búsqueda, dármela cuando sea

útil, cuando llegue a la página de resultados de búsqueda y descubra esa búsqueda.
todo arrojó demasiados aciertos, por lo que necesito limitar el alcance.

Creo que una de las principales razones del éxito de Amazon es la solidez de su
búsqueda. Como mencioné en el Capítulo 1, Amazon fue uno de los primeros en línea
librerías (si no la primera) en eliminar la opción Título/Autor/Palabra clave de sus
caja de búsqueda y solo toma lo que sea que les arroje.

He hecho varias pruebas de usuarios de librerías online, y he dejado a sus propios dispositivos,
Inevitablemente, lo primero que hizo la gente fue buscar un libro que sabían que debían
ser capaz de encontrar para ver si la cosa funcionó. Y prueba tras prueba, el resultado fue que
La primera experiencia de las personas en Amazon fue una búsqueda exitosa, mientras que en los sitios que
ofrecieron opciones, muchas personas quedaron perplejas cuando su búsqueda falló porque
habían malinterpretado sus opciones.

[ 68 ]
 letreros de la calle y migas de pan

Y, por supuesto, si va a proporcionar opciones, debe asegurarse de que

realmente funcionen.

Por ejemplo, cuando fui a buscar la cita de "Insignias apestosas" de

Treasure of the Sierra Madre en el sitio Internet Movie Database, mi búsqueda de
Las "insignias" que utilizan el alcance predeterminado "Todos" solo encontraron una coincidencia: un programa de televisión antiguo.

Búsqueda Resultados

Pero cuando cambié el alcance a "Cotizaciones", ahí estaba.

Búsqueda Resultados

¿Quiere adivinar cuál fue el efecto en mi confianza en IMDB.com?

[ 69 ]
Capítulo 6

Secundaria, terciaria y
lo que venga después de la terciaria
Sucede tan a menudo que lo espero: cuando los diseñadores con los que no he trabajado antes
me envían diseños de página preliminares para que pueda comprobar si hay problemas de usabilidad,
casi inevitablemente obtengo un diagrama de flujo que muestra un sitio de cuatro niveles de profundidad...

Inicio XYZ

> > > > >

Sobre
NIVEL 1 Productos Noticias Apoyo Ayuda
XYZ
> > > > > >
Base de Contacto
NIVEL 2 Hardware Software preguntas frecuentes
datos de soporte Soporte vital Información

> > > > > > > >

NIVEL 3
> > > >

NIVEL 4

…y páginas de muestra para la página de inicio y los dos niveles superiores.

Productos
XYZ XYZ
>Noticias Productos >Noticias Software
>Productos >Productos

¡XYZ te ama! Hardware

Software
Hardware
Software
>Soporte >Soporte
Sobre
>Acerca de XYZ >Acerca de XYZ

Noticias Apoyo

Hogar Página de nivel de sección Página de subsección

Sigo hojeando las páginas buscando más, o al menos el lugar donde han
garabateado, "Algo de magia sucede aquí", pero nunca encuentro ni siquiera eso. creo que ésto es
uno de los problemas más comunes en el diseño web (especialmente en sitios más grandes):
no dar a la navegación de nivel inferior la misma atención que a la superior. en tantos
sitios, tan pronto como pasa el segundo nivel, la navegación se descompone y
se vuelve ad hoc. El problema es tan común que en realidad es difícil encontrar buenos
ejemplos de navegación de tercer nivel.

¿Por qué pasó esto?

[ 70 ]
 letreros de la calle y migas de pan

En parte, creo, porque una buena navegación multinivel es simplemente difícil de diseñar.
dada la cantidad limitada de espacio en la página, y la cantidad de elementos que
hay que apretarlo.

En parte porque los diseñadores generalmente ni siquiera tienen tiempo suficiente para descubrir el
primeros dos niveles.

En parte porque simplemente no parece tan importante. (Después de todo, ¿qué tan importante puede
¿ser? No es primaria. Ni siquiera es secundario.) Y hay una tendencia a pensar que
para cuando la gente llegue tan lejos en el sitio, entenderán cómo funciona.

Y luego está el problema de obtener contenido de muestra y ejemplos de jerarquía para páginas
de nivel inferior. Incluso si los diseñadores preguntan, probablemente no los obtendrán, porque
las personas responsables del contenido generalmente tampoco han pensado mucho en las cosas.

Pero la realidad es que los usuarios suelen pasar tanto tiempo en las páginas de nivel
inferior como en las superiores. Y a menos que haya trabajado de arriba a abajo
navegación desde el principio, es muy difícil injertarla más tarde y llegar a
algo consistente.

¿La moral? Es vital tener páginas de muestra que muestren la navegación para todos los
niveles potenciales del sitio antes de comenzar a discutir sobre el esquema de colores para la
página de inicio.

Nombres de páginas o Por qué me encanta conducir en Los Ángeles

Si alguna vez has pasado un tiempo en Los Ángeles, entiendes que no es solo una canción.
letra—LA es realmente una gran autopista. Y porque la gente en Los Ángeles maneja
en serio, tienen los mejores letreros de calles que he visto. En los angeles,

> Los letreros de las calles son grandes. Cuando se detiene en una intersección, puede leer el
señal para el próximo cruce de calles.

> Están en el lugar correcto: colgados sobre la calle por la que conduce, de modo que todo lo que
tiene que hacer es mirar hacia arriba.

[ 71 ]
Capítulo 6

Ahora, admito que soy un fanático de este tipo de tratamiento porque vengo de Boston, donde
te consideras afortunado si logras leer el letrero de la calle mientras todavía hay tiempo para dar la
vuelta.

camino de covington Calle Russett

Los Angeles Bostón

¿El resultado? Cuando conduzco en Los Ángeles, dedico menos energía y atención a lidiar
con el lugar donde estoy y más al tráfico, la conversación y escuchar All Things Considered. Me
encanta conducir en LA

Los nombres de las páginas son los letreros de las calles de la Web. Al igual que con los letreros de
las calles, cuando las cosas van bien, es posible que no me dé cuenta de los nombres de las páginas.
Pero tan pronto como empiezo a sentir que es posible que no me dirija en la dirección correcta,
necesito poder detectar el nombre de la página sin esfuerzo para poder orientarme.

Hay cuatro cosas que debe saber sobre los nombres de página:

> Cada página necesita un nombre. Así como cada esquina debe tener un letrero de calle, cada
página debe tener un nombre.

Estoy en la esquina
de Subastas y Vender un artículo.

Los diseñadores a veces piensan: "Bueno, hemos resaltado el nombre de la página en la

navegación.9 Eso es suficiente". Es una idea tentadora porque puede ahorrar espacio y es un
elemento menos para trabajar en el diseño de la página, pero no es suficiente. También necesita un
nombre de página.

> El nombre debe estar en el lugar correcto. En la jerarquía visual de la página, el nombre de la página
debe aparecer para enmarcar el contenido que es exclusivo de esta página. (Después de todo, eso
es lo que está nombrando, no la navegación o los anuncios, que son solo la infraestructura).

9 Consulte “Usted está aquí” en la página 74.

[ 72 ]
 letreros de la calle y migas de pan

Nombre de la página

Nombre de la página Nombre de la página

Único
página
página página Contenido

única única
Contenido Contenido

> El nombre debe ser prominente. Quieres la combinación de posición,

tamaño, color y tipo de letra para que el nombre diga "Este es el encabezado de la
página completa." En la mayoría de los casos, será el texto más grande de la página.

> El nombre debe coincidir con lo que hice clic. Aunque nadie nunca
lo menciona, cada sitio hace un contrato social implícito con sus visitantes:

El nombre de la página coincidirá con las palabras en las que hice clic para llegar allí.

En otras palabras, si hago clic en un enlace o botón que dice "Puré de papas caliente", el sitio
me llevará a una página llamada "Puré de papas caliente".

Puede parecer trivial, pero en realidad es un acuerdo crucial. Cada vez que un sitio
lo viola, me veo obligado a pensar, aunque solo sea por milisegundos, "¿Por qué están esos
dos cosas diferentes? Y si hay una gran discrepancia entre el enlace
nombre y el nombre de la página o muchas discrepancias menores, mi confianza en el sitio—
y la competencia de las personas que lo publican se verá disminuida.

QUE HAGO CLIC... LO QUE CONSIGO...

Tuercas Nueces Piezas de repuesto error 404

(Sin mención de Página no encontrada

Lug Nuts en
la página)

Coincidencia de nombres. Comodidad, Los nombres no coinciden.

confianza, no se requiere pensamiento. Frustración, pérdida de confianza.

[ 73 ]
Capítulo 6

Por supuesto, a veces tienes que ceder, generalmente debido al espacio.

limitaciones. Si las palabras en las que hago clic y el nombre de la página no coinciden exactamente, el
Lo importante es que (a) coincidan lo más posible, y (b) la razón de la diferencia sea obvia. Por ejemplo,
en Gap.com si hago clic en los botones
Con la etiqueta "Regalos para él" y "Regalos para ella", recibo páginas llamadas "regalos para
hombres" y "regalos para mujeres". La redacción no es idéntica, pero se sienten tan equivalentes
que ni siquiera tengo la tentación de pensar en la diferencia.

“
Estás aquí"
Una de las formas en que la navegación puede contrarrestar la inherente "pérdida en el espacio" de la Web.

Re
col
Yo
Ne
de
ca
©2
to
lo
La
d sentimiento es mostrándome dónde estoy en el esquema de las cosas, de la misma manera que un
El indicador “Usted está aquí” aparece en el mapa en un centro comercial o en un Parque Nacional.

[ 74 ]
 letreros de la calle y migas de pan

En la Web, esto se logra resaltando mi ubicación actual en

cualquier barra de navegación, lista o menú que aparezca en la página.

parece que estoy dentro

Pantalones/Shorts Mujer

En este ejemplo, la sección actual (Mujer) y la subsección (Pantalones/Shorts)

ambos han sido "marcados". Hay varias maneras de hacer que la corriente
Destaca la ubicación:

poner un puntero Cambiar el Invertir el Cambiar el

junto a él color del texto Usar texto en negrita botón color del botón

La falla más común de los indicadores “Usted está aquí” es que son demasiado sutiles.
Necesitan sobresalir; si no lo hacen, pierden su valor como señales visuales y terminan
agregando más ruido a la página. Una forma de asegurarse de que se destaquen es
aplicar más de una distinción visual, por ejemplo, un color diferente y texto en negrita.

Las señales visuales demasiado sutiles son en realidad un problema muy común. A los diseñadores les encanta lo sutil

señales, porque la sutileza es uno de los rasgos del diseño sofisticado. Pero los usuarios de la Web son
generalmente con tanta prisa que rutinariamente pierden pistas sutiles.

En general, si eres diseñador y crees que una señal visual sobresale como una llaga
pulgar, probablemente signifique que necesita hacerlo el doble de prominente.

[ 75 ]
Capítulo 6

Migas de pan
Al igual que los indicadores "Estás aquí", Breadcrumbs te muestra dónde estás.
(A veces incluso incluyen las palabras "Estás aquí").

www.acerca de.com

Se llaman Breadcrumbs porque recuerdan el rastro de migas que Hansel dejó caer en el
bosque para que él y Gretel pudieran encontrar el camino de regreso a casa.10

A diferencia de los indicadores “Usted está aquí”, que le muestran dónde se encuentra en el
contexto de la jerarquía del sitio, Breadcrumbs solo le muestra la ruta desde la página de
inicio hasta donde se encuentra.11 (Uno le muestra dónde se encuentra en el esquema general
de otras cosas, la otra le muestra cómo llegar, algo así como la diferencia entre mirar un mapa
de carreteras y mirar un conjunto de instrucciones detalladas. Las instrucciones pueden ser
muy útiles, pero puede aprender más del mapa. .)

Se podría argumentar que los marcadores son más como las migas de pan de los cuentos
de hadas, ya que los dejamos caer mientras deambulamos, anticipando la posibilidad de
querer volver sobre nuestros pasos algún día. O podrías decir que los enlaces visitados
(enlaces que han cambiado de color para mostrar que has hecho clic en ellos) son más como
migas de pan, ya que marcan los caminos que hemos tomado, y si no los volvemos a visitar
lo suficientemente pronto, nuestro navegador (como los pájaros) se los tragará.12
10
En la historia original, la madrastra de H & G persuade a su padre para que los pierda en el bosque
durante tiempos difíciles para que toda la familia no tenga que pasar hambre. El desconfiado e
ingenioso H estropea la trama tirando guijarros en el camino y siguiéndolos a casa. Pero la próxima
vez (!) H se ve obligado a usar pan rallado en su lugar, lo que demuestra ser un sustituto menos que
adecuado ya que las aves se las comen antes de que H & G puedan volver sobre sus pasos.
Eventualmente, la historia se convierte en intento de canibalismo, hurto mayor e inmolación, pero básicamente es una histo
11
En realidad, la verdad es un poco más complicada que eso. Si está interesado, Keith
Instone tiene un tratamiento excelente de todo el tema de Breadcrumbs en http://user-experience.org.
12
Los enlaces visitados eventualmente caducan y vuelven a su color original si no los vuelve a visitar.
El período de caducidad predeterminado varía de 7 a 30 días, según el navegador que utilice. yo

[ 76 ]
 letreros de la calle y migas de pan

Durante mucho tiempo, Breadcrumbs fue una rareza, que se encontraba solo en sitios que en
realidad eran enormes bases de datos con jerarquías muy profundas, como el directorio web de Yahoo...

www.yahoo.com

o injertado en la parte superior de conglomerados de sitios múltiples muy grandes, como CNET...

www.cnet.com

www.gamecenter.com

www.descargar.com

donde lograron dar a los usuarios una idea de dónde se encontraban en el gran esquema de las
cosas mientras permitían que los subsitios mantuvieran sus esquemas de navegación
independientes, y a menudo incompatibles.

Pero en estos días aparecen en más y más sitios, a veces en lugar de una navegación bien
pensada.

Para la mayoría de los sitios, no creo que Breadcrumbs por sí solo sea un buen esquema
de navegación. No son un buen reemplazo para mostrar al menos las dos capas superiores de la
jerarquía, porque no revelan lo suficiente. Te dan una vista, pero es como una vista con anteojeras.
No es que no puedas moverte usando solo Breadcrumbs. Es que no son una buena manera de
presentar la mayoría de los sitios.

No me malinterpretes. Bien hecho, Breadcrumbs se explica por sí mismo, no ocupa mucho

espacio y proporciona una forma conveniente y consistente de hacer dos de las cosas que
necesita hacer con más frecuencia: retroceder un nivel o ir a Inicio. es solo que yo

Ojalá hubiera pensado yo mismo en la conexión imaginaria de los pájaros comiendo enlaces
visitados, pero Mark Bernstein escribió por primera vez sobre ella en 1988. La encontré en
el libro de Peter Glour Elements of Hyper-media Design, que puedes leer gratis en línea en
www.ickn.org/elements/hyper/hyper.htm .

[ 77 ]
Capítulo 6

Piense que son más valiosos cuando se usan como parte de una dieta balanceada, como un accesorio
para un esquema de navegación sólido, particularmente para un sitio grande con una jerarquía
profunda, o si necesita unir un nido de subsitios.

About.com tiene la mejor implementación de Breadcrumbs que conozco e ilustra varias "mejores
prácticas".

> Póngalos en la parte superior.

Las migas de pan parecen funcionar

mejor si están en la parte superior de la

página, por encima de todo. Creo que
esto se debe probablemente a que
literalmente los margina, haciéndolos
parecer un accesorio, como los números
de página de un libro o una revista.
Cuando las migas de pan están más
www.acerca de.com
abajo en la página, terminan compitiendo
con la navegación principal. ¿Resultado?
Eso me hace pensar. ("¿Cuál es la navegación real? ¿Cuál debo usar?")

> Utilizar > entre niveles. Prueba y error parece haber demostrado que el mejor

separador entre niveles es el carácter “mayor que” (>).

www.acerca de.com

Los dos puntos (:) y la barra oblicua (/) funcionan, pero > parece ser el más satisfactorio y
evidente, probablemente porque sugiere visualmente un movimiento hacia adelante a través de
los niveles.

> Use letra pequeña, nuevamente, para dejar en claro que esto es solo un accesorio.

> Usa las palabras “Estás aquí”. La mayoría de la gente entenderá lo que
Las migas de pan lo son, pero dado que es un tipo pequeño de todos modos, no está de más
que se expliquen por sí mismas.

> Negrita el último elemento. El último elemento de la lista debe ser el nombre de la página actual,

y ponerlo en negrita le da la importancia que se merece.

[ 78 ]
 letreros de la calle y migas de pan

> No los use en lugar del nombre de una página. Ha habido muchos intentos de hacer que el último
elemento de la lista Breadcrumbs cumpla una doble función, eliminando la necesidad de un nombre
de página separado. Algunos sitios han intentado hacer que el último elemento de la lista sea el más
grande.

www.gamecenter.com

Parece que debería funcionar, pero no es así, probablemente porque contradice nuestra
expectativa de que los encabezados estén alineados a la izquierda o centrados, y no colgando en
el medio de la página al final de una lista.

Cuatro razones por las que me encantan las pestañas

No he podido probarlo (todavía), pero sospecho firmemente
que Leonardo da Vinci inventó los separadores de pestañas en
algún momento a fines del siglo XV. A medida que avanzan los
Máquinas
Volador
dispositivos de interfaz, son claramente un producto genial.13

Las pestañas son uno de los pocos casos en los que

realmente funciona el uso de una metáfora física en una
armas
Enfriar
interfaz de usuario.14 Al igual que los separadores de
pestañas en una carpeta de tres anillas o las pestañas en
las carpetas en un cajón de archivos, dividen lo que sea quehaceres
Lista
de
que sobresalgan en secciones. Y facilitan la apertura de una
sección alcanzando su pestaña (o, en el caso de la Web,
haciendo clic en ella).

Muchos sitios han comenzado a usar pestañas para la navegación.

13 Memorándum personal: Verifique si Microsoft comenzó a usar cuadros de diálogo con pestañas antes de
que Bill Gates comprara el cuaderno da Vinci.

14 La idea de arrastrar cosas a un ícono de papelera para borrarlas (concebida en Xerox PARC y popularizada por
Apple) es la única otra que se me ocurre. Y, lamentablemente, Apple no pudo resistirse a enturbiar las aguas
metafóricas al usar la misma acción de arrastrar a la basura para expulsar los disquetes, lo que finalmente
resultó en millones de globos de pensamiento idénticos que decían: “Pero espera.
¿Eso no lo borrará?

[ 79 ]
Capítulo 6

Y…
800.com
amazon.com
www.catalogcity.com
Beyond.com
bn.com
Borders.com
Buy.com
CDNOW
eToys.com
www.farmacia.com
Fatbrain.com
Fidelity.com
LandsEnd.com
mascotas.com

Quicken.com
Schwab.com
mitsloan.mit.edu Snap.com
ToysRUs.com

Creo que son una excelente opción de navegación para sitios grandes. Este es el por qué:

> Son evidentes. Nunca he visto a nadie, no importa cuán "computadora

analfabetos”: mire una interfaz con pestañas y diga: “Hmmm. Me pregunto qué hacen esos.

> Son difíciles de pasar por alto. Cuando realizo pruebas de usuario de apuntar y hacer clic, me
sorprende la frecuencia con la que las personas pueden pasar por alto las barras de botones en
la parte superior de una página web.15 Pero debido a que las pestañas son tan distintivas
visualmente, es difícil pasarlas por alto. Y debido a que son difíciles de confundir con otra cosa
que no sea la navegación, crean el tipo de división obvia a simple vista que desea entre la navegación y el contenido

> Son resbaladizos. Los diseñadores web siempre luchan por hacer que las páginas sean más
visualmente interesante. Si se hace correctamente (ver más abajo), las pestañas pueden agregar
brillo y tener un propósito útil.

15 No debería ser. Me las arreglé para usar My Yahoo docenas de veces antes de que me diera
cuenta de que la fila de enlaces en la parte superior de la página eran más secciones de My
Yahoo. Siempre supuse que My Yahoo era solo una página y que los enlaces eran otras partes de Yahoo.

[ 80 ]
 letreros de la calle y migas de pan

> Sugieren un espacio físico. Las pestañas crean la ilusión de que la pestaña activa
se mueve físicamente al frente.

Es un truco barato, pero efectivo, probablemente porque se basa en una señal visual que
somos muy buenos detectando (“cosas delante de otras cosas”). De alguna manera, el
El resultado es una sensación más fuerte de lo normal de que el sitio está dividido en
secciones y que usted se encuentra en una de ellas.

Si amas tanto a
Amazon, ¿por qué no te casas con él?
Al igual que con muchas otras buenas prácticas web, Amazon fue uno de los primeros sitios
en usar separadores de pestañas para la navegación y el primero en hacerlo bien. Tiempo extraordinario,
ajustaron y pulieron su implementación hasta el punto en que era casi
perfecto, a pesar de que tenían que seguir agregando pestañas a medida que se expandían en diferentes
mercados.

octubre de 1998

octubre de 1999

[ 81 ]
Capítulo 6

Eventualmente, se vieron obligados a empujar la metáfora de la pestaña hasta el punto de

ruptura, pero incluso su versión de dos filas de corta duración estaba notablemente bien diseñada.

Cualquiera que esté pensando en usar pestañas debería fijarse bien en el diseño de las
pestañas clásicas de Amazon e imitar servilmente estos tres atributos clave:

> Fueron dibujados correctamente. Para que las pestañas funcionen al máximo, los gráficos
deben crear la ilusión visual de que la pestaña activa está delante de las otras pestañas.
Esto es lo principal que los hace sentir como pestañas, incluso más que la forma distintiva
de la pestaña.16

Para crear esta ilusión, la pestaña activa debe tener un color diferente o un tono contrastante,
y debe conectarse físicamente con el espacio debajo de ella. Esto es lo que hace que la
pestaña activa "salte" al frente.

MALO: Sin conexión, sin pop.

MEJOR: Conectado, pero sin contraste.

Popularidad limitada.

LO MEJOR: ¡Pato! Viene directo hacia ti.

dieciséis

Hagas lo que hagas, no uses gráficos en forma de pestañas si no van a comportarse como pestañas.
Internet Movie Database, propiedad de Amazon y, en cierto modo, uno de los mejores sitios de Internet,
comete este error.

Los botones en la parte superior de cada página parecen pestañas, pero actúan como botones normales.

[ 82 ]
 letreros de la calle y migas de pan

> Estaban codificados por colores. Amazon

usó un color de pestaña diferente para

cada sección del sitio y usó el mismo color

en los otros elementos de navegación de la
página para vincularlos a todos.

La codificación por colores de las

secciones es una muy buena idea,
siempre y cuando no cuente con que todos
lo noten. Algunas personas
(aproximadamente 1 de cada 200 mujeres
y 1 de cada 12 hombres, especialmente
mayores de 40 años) simplemente no
pueden detectar algunas distinciones de color debido al daltonismo.

Más importante aún, por lo que he

observado, un porcentaje mucho mayor
(quizás hasta la mitad) simplemente no es
muy consciente de la codificación de colores de ninguna manera útil. El color es excelente
como señal adicional, pero nunca debe confiar en él como la única señal.

Amazon se aseguró de usar colores bastante vivos y saturados que son difíciles de pasar
por alto. Y dado que las pestañas inactivas eran de un beige neutro, había mucho contraste,
que incluso los usuarios daltónicos pueden detectar, entre ellas y la pestaña activa.

[ 83 ]
Capítulo 6

> Había una pestaña seleccionada cuando ingresas al sitio. Si no hay una pestaña seleccionada cuando
entro en un sitio (como en Quicken.com, por ejemplo), pierdo el impacto de las pestañas en los
primeros segundos cruciales, cuando cuenta más.

www.quicken.com

Amazon siempre ha tenido una pestaña seleccionada en su página de inicio. Durante mucho tiempo,
fue la pestaña Libros.

www.amazon.com

Eventualmente, sin embargo, a medida que el sitio se volvió cada vez menos centrado en los libros, le
dieron a la página de inicio una pestaña propia (etiquetada como "Bienvenido").

Amazon tuvo que crear la pestaña de bienvenida para poder promocionar productos de sus otras
secciones, no solo libros, en la página de inicio. Pero lo hicieron a riesgo de alienar a los clientes
existentes que todavía piensan en Amazon principalmente como una librería y odian tener que
hacer clic dos veces para llegar a la sección de Libros. Como de costumbre, el problema de la interfaz
es solo un reflejo de un dilema más profundo y más difícil de resolver.

[ 84 ]
 letreros de la calle y migas de pan

Prueba la prueba del maletero

Ahora que tiene una idea de todas las partes móviles, está listo para probar mi
prueba de fuego para una buena navegación web. Así es como funciona:

Imagina que te han vendado los ojos y te han encerrado en el maletero de un coche, entonces
conducido por un tiempo y arrojado en una página en algún lugar profundo en el
entrañas de un sitio Web. Si la página está bien diseñada, cuando su visión se aclare, debería
poder responder estas preguntas sin dudarlo:

> ¿Qué sitio es este? (Identificación del sitio)

> ¿En qué página estoy? (Nombre de la página)

> ¿Cuáles son las secciones principales de este sitio? (Secciones)
> ¿Cuáles son mis opciones en este nivel? (Navegación local)
> ¿Dónde estoy en el esquema de las cosas? (Indicadores "Usted está aquí")
> ¿Cómo puedo buscar?

¿Por qué el motivo de Goodfellas? Porque es muy fácil olvidar que la experiencia web
a menudo es más como ser shanghaied que seguir un camino de jardín. Cuando estas
Al diseñar páginas, es tentador pensar que las personas llegarán a ellas comenzando en la página de
inicio y siguiendo los caminos agradables y ordenados que ha trazado. Pero la realidad es que a
menudo nos dejan caer en medio de un sitio sin tener idea de dónde estamos porque hemos seguido
un enlace de un motor de búsqueda o de otro sitio, y
nunca antes habíamos visto el esquema de navegación de este sitio.17

¿Y la venda de los ojos? Desea que su visión sea un poco borrosa, porque la verdadera prueba no
es si puede resolverlo con suficiente tiempo y un escrutinio minucioso. los
el estándar debe ser que estos elementos salten de la página tan claramente que no
importa si estás mirando de cerca o no. Quiere confiar únicamente en el
apariencia general de las cosas, no los detalles.18

17 Esto es aún más cierto hoy que hace cinco años, ya que para muchas personas todo lo que hacen
en la Web ahora comienza con una búsqueda en Google.

18
Tom Tullis de Fidelity Investments hizo un ingenioso experimento en la misma línea para
evaluar la efectividad de diferentes plantillas de página. Rellenó cada plantilla con
texto sin sentido y pidió a las personas que identificaran los diversos elementos, como el título de la
página y la navegación en todo el sitio, simplemente por su apariencia.

[ 85 ]
Capítulo 6

Así es como se realiza la prueba troncal:

Paso 1 Elija una página en cualquier parte del sitio al azar e imprímala.

Paso 2 Sosténgalo con el brazo extendido o entrecerrando los ojos para que no pueda estudiarlo de cerca.

Paso 3 Lo más rápido posible, intente encontrar y encierre en un círculo cada elemento de la lista a continuación.
(No encontrará todos los elementos en cada página).

Aquí hay uno para mostrarte cómo se hace.

CIRCULO: 1. Identificación del sitio

4. Navegación local 5.

2. Nombre de la página Indicador(es) “Usted está aquí”

3. Secciones y subsecciones 6. Buscar

Identificación del sitio

Búsqueda

Secciones

Nombre de la página

Navegación local

[ 86 ]
 letreros de la calle y migas de pan

Ahora pruébelo usted mismo en las cuatro páginas web a continuación. Luego compare sus respuestas
con el mío, a partir de la página 90.

Y cuando haya terminado, pruebe el mismo ejercicio en una docena de páginas al azar de
diferentes sitios Es una gran manera de desarrollar su propio sentido de lo que funciona y lo
que no.

Respuestas en la página 90

[ 87 ]
Capítulo 6

Respuestas en la página 91

Respuestas en la página 92

[ 88 ]
 letreros de la calle y migas de pan

Respuestas en la página 93

[ 89 ]
Capítulo 6

Estás aquí

¿QUÉ ESTÁ MAL CON ESTA

Identificación del sitio
Sección
IMAGEN?
Subsecciones
“
Anualidades paso a paso” parece el
nombre de la página, pero no lo es.

El nombre de la página es en realidad

"Financiar otros planes primero",
pero no lo sabría porque (a) no hay
Navegación local
un nombre de página y (b) no hay un
indicador "Usted está aquí" en la lista
de la izquierda.

Y no hay un cuadro de búsqueda

ni un botón de búsqueda, lo cual es
asombroso para un sitio tan grande y
variado (y lleno de contenido útil)
como Quicken.com.

< MI VERSIÓN

He añadido…

> Un nombre de página en la parte superior

del espacio de contenido,

> Un indicador "Usted está aquí"

en la lista de la izquierda, y

> Un enlace de búsqueda, en

la lista de Utilidades.

[ 90 ]
 letreros de la calle y migas de pan

¿QUÉ ESTÁ MAL CON ESTA

Identificación del sitio
IMAGEN?

El ID del sitio está debajo de la navegación y es difícil de

Nombre de la página

Secciones detectar. Se parece demasiado a la promoción interna que

se encuentra junto a él, y debido a que el ID del sitio no
está en la esquina superior izquierda, termina pareciéndose a un anuncio.

Navegación local
El encabezado DVD se coloca encima del enlace Audio/
Video Principal, pero se encuentra más abajo en la
jerarquía. Y no hay búsqueda, lo cual es desconcertante
en un gran sitio de comercio electrónico lleno de productos.

< SU VERSIÓN REVISADA

Mientras escribía este capítulo, Global Mart rediseñó su

sitio e hizo la mayoría de las cosas por sí mismos. Por
ejemplo, movieron el ID del sitio a la parte superior de la
página y agregaron un cuadro de búsqueda.

Pero como suele suceder con los rediseños, por cada

paso adelante hay un paso atrás. Por ejemplo, los Servicios
Públicos pasaron de una línea legible a dos ilegibles.
(Evite siempre apilar enlaces de texto subrayados; son
muy difíciles de leer).

< MI VERSIÓN

Moví el enlace a Audio/Video arriba del nombre de la página,

para que la jerarquía visual coincida con la jerarquía lógica.
También hice que el nombre de la página fuera un poco
más prominente y lo moví al ras hacia la izquierda en lugar
de centrarlo. (En la mayoría de los casos, encuentro que la
alineación a la izquierda o a la derecha es más efectiva que
el centrado en "telegrafiar" una jerarquía visual).

Por la misma razón, moví el botón de búsqueda al

lado del cuadro de búsqueda, en lugar de centrarlo
debajo.

[ 91 ]
Capítulo 6

¿QUÉ ESTÁ MAL CON ESTA

Identificación del sitio
Búsqueda IMAGEN?
La navegación se extiende por toda la página, por lo que
es mucho más difícil saber qué es navegación y qué no. La
navegación, los anuncios, las promociones y el contenido
funcionan juntos.

No hay una lista de secciones principales. La lista en la parte

Nombre de la página
superior parece secciones, pero en realidad es una lista de otros
subsitios de CNET.com. Lo que lo hace particularmente confuso
es que Builder.com (el sitio en el que estoy) no aparece en esa lista.

La única navegación que me dice dónde estoy en Builder.com

Navegación local
es Breadcrumbs.

También es difícil saber dónde comienza realmente el

contenido. Esta es una de esas páginas que parece comenzar de
nuevo, obligándote a desplazarte hacia abajo solo para descubrir
qué es.

< MI VERSIÓN
Esta es una de esas páginas en las que tienes que tener el
coraje de decir: "Esto está más allá de los ajustes".
Aquí hay dilemas subyacentes que deben resolverse antes de
siquiera pensar en el diseño de la página.

Todo lo que hice fue apretar un poco la parte superior e intentar

que el espacio de contenido fuera más fácil de detectar agregando
un fondo a la columna de la izquierda.

Al mismo tiempo, me aseguré de que el nombre de la página

estuviera colocado de manera que estuviera claramente
conectado con el espacio de contenido.

[ 92 ]
 letreros de la calle y migas de pan

Estás aquí

Identificación del sitio

¿QUÉ ESTÁ MAL CON ESTA

Secciones IMAGEN?
Subsecciones
Búsqueda Poco. ¿Tuviste problemas
para encontrar algo?
Nombre de la página

Yo descanso mi caso.

Navegación local

< MI VERSIÓN

Realmente no hay casi nada que mejorar aquí.

Rehice la búsqueda. (No sé por qué usaron

"Ingresar palabras clave" aquí cuando usan
simplemente "Buscar" en casi todas partes del
sitio).

Y si va a definir el alcance de una búsqueda, vale

la pena agregar la palabra "para" para que se lea
como una oración: "Buscar ___ por ___."

También hice que el nombre de la página fuera

un poco más prominente para ayudar a que la
división entre el contenido y los espacios de
navegación fuera aún más clara.

[ 93 ]
capítulo

7
El primer paso
en la recuperación es
admitir que
la página de inicio
está fuera
de tu control
diseño de la página de inicio
 Lucy, tienes algunas "explicaciones" que hacer.
—desi arnaz, como ricky ricardo

D esignar una página de inicio a menudo me recuerda

del programa de televisión de los años 50 Beat the Clock.

Cada concursante escuchaba pacientemente mientras

el maestro de ceremonias Bud Collyer explicó el "truco" que
tuvo que realizar. Por ejemplo, “Tienes 45
segundos para lanzar cinco de estos globos de agua

en el colador atado a tu cabeza.

El truco siempre parecía complicado, pero factible.

con un poco de suerte.

Pero entonces, justo cuando el concursante estaba listo para

empezar, Bud siempre añadía, "Oh, hay Bud Collyer ofrece palabras de aliento a
un concursante valiente
sólo una cosa más: tienes que hacer
es... con los ojos vendados. O “…bajo el agua”. O "... en la quinta dimensión".

Es así con la página de inicio. Justo cuando crees que has cubierto todas las bases, siempre hay
una... cosa... más.

Piense en todas las cosas que la página de inicio tiene que acomodar:

> Identidad y misión del sitio. Desde el principio, la página de inicio tiene que decirme qué sitio es y
para qué sirve, y si es posible, por qué debería estar aquí y no en otro sitio.

> Jerarquía del sitio. La página de inicio debe brindar una descripción general de lo que el sitio tiene
para ofrecer, tanto el contenido ("¿Qué puedo encontrar aquí?") como las características ("¿Qué puedo hacer
aquí?”), y cómo está todo organizado. Esto generalmente es manejado por el persistente
navegación.

> Buscar. La mayoría de los sitios deben tener un cuadro de búsqueda destacado en la
Página de inicio.

[ 95 ]
Capítulo 7

> Bromas. Al igual que la portada de una revista, la

Registro
Identidad &
Misión Promociones de funciones
página de inicio debe atraerme con indicios de las
"cosas buenas" que contiene. Las promociones de
Jerarquía

Búsqueda contenido destacan las piezas de contenido más

nuevas, mejores o más populares, como las
principales noticias y las mejores ofertas. Las
Rasgo funciones promocionales me invitan a explorar
Rasgo promociones

promociones promociones de contenido secciones adicionales del sitio o probar funciones

como la personalización y los boletines por correo electrónico.

> Contenido oportuno. Si el éxito del sitio

depende de que regrese a menudo, la página de
atajos
inicio probablemente necesite algún contenido que

contenido oportuno se actualice con frecuencia.

E incluso un sitio que no necesita visitantes regulares
contenido oportuno necesita algunas señales de vida, incluso si es solo
un enlace a un comunicado de prensa reciente, para
ofertas
indicarme que no está moribundo.

> Ofertas. El espacio de la página de inicio debe ser

asignado para cualquier publicidad, promoción
cruzada y acuerdos de marca compartida que se
ofertas
hayan realizado.

> Accesos directos. Las piezas de contenido solicitadas con más frecuencia (actualizaciones de software,
por ejemplo) pueden merecer sus propios enlaces en la página de inicio para que las personas no
tengan que buscarlas.

> Registro. Si el sitio utiliza el registro, la página de inicio necesita enlaces para que los nuevos usuarios
se registren y para que los usuarios antiguos inicien sesión, y una forma de informarme que he iniciado
sesión ("Bienvenido de nuevo, Steve Krug").

Además de estas necesidades concretas, la página de inicio también debe cumplir algunos
objetivos abstractos:

> Muéstrame lo que estoy buscando. La página de inicio debe hacer que sea obvio cómo llegar a lo
que quiero, suponiendo que esté en algún lugar del sitio.

[ 96 ]
 la página de inicio está fuera de su control

> …y lo que no busco. Al mismo tiempo, la página de inicio debe mostrarme algunas de las cosas
maravillosas que ofrece el sitio y que podrían interesarme, aunque no las esté buscando.

> Muéstrame por dónde empezar. No hay nada peor que encontrarse con un nuevo
Página de inicio y no tener idea de por dónde empezar.

> Establecer credibilidad y confianza. Para algunos visitantes, la página de inicio será
la única oportunidad que tiene su sitio de crear una buena impresión.

Y tienes que hacerlo… con los ojos vendados

Como si eso no fuera lo suficientemente desalentador, todo tiene que hacerse en condiciones adversas.
Algunas de las restricciones habituales:

> Todo el mundo quiere un pedazo de ella. Dado que es la única página que ven casi todos los
visitantes, y la única página que verán algunos visitantes, las cosas que se promocionan de
manera destacada en la página de inicio tienden a obtener un tráfico significativamente mayor.

Como resultado, la página de inicio es la propiedad frente al mar de la Web: es el inmueble más
deseable y hay una oferta muy limitada. Todos los que tienen una participación en el sitio quieren
una promoción o un enlace a su sección en la página de inicio, y las batallas territoriales por la
visibilidad de la página de inicio pueden ser feroces.

Y dada la tendencia de la mayoría de los usuarios de escanear la página hacia abajo lo suficiente para
encontrar un enlace interesante, la cantidad comparativamente pequeña de espacio "en la mitad
superior de la página"1 en la página de inicio es la propiedad frente al mar elegida, incluso más
ferozmente disputada.

> Demasiados cocineros. Debido a que la página de inicio es tan importante, es la única página
sobre el que todo el mundo (incluso el director general) tiene una opinión.

> Talla única. A diferencia de las páginas de nivel inferior, la página de inicio tiene que atraer a todos
los que visitan el sitio, sin importar cuán diversos sean sus intereses.

1
Un término heredado de los periódicos, que significa la parte de la página que puede ver sin desplazarse.

[ 97 ]
Capítulo 7

Todo el mundo quiere colocar una línea en la página de inicio.

Y quieren un buen cebo (un enlace grande y llamativo)

y una buena ubicación (por encima del pliegue).

La primera víctima de la guerra

Teniendo en cuenta todo lo que la página de inicio tiene que lograr, si un sitio es complejo,
incluso el mejor diseño de la página de inicio no puede hacerlo todo. Diseñar una página
de inicio inevitablemente implica compromiso. Y a medida que se resuelven los
compromisos y aumenta la presión para incluir solo una cosa más, algunas cosas
inevitablemente se pierden en la confusión.

Lo único que no puede darse el lujo de perder en la confusión, y lo que más a menudo
se pierde, es transmitir el panorama general. Cada vez que alguien me entrega un diseño
de página de inicio para que lo mire, hay una cosa con la que casi siempre puedo contar:
no han dejado lo suficientemente claro qué es el sitio.

[ 98 ]
 la página de inicio está fuera de su control

De la manera más rápida y clara posible, la página de inicio debe responder las
cuatro preguntas que tengo en la cabeza cuando entro en un sitio nuevo por primera vez:

¿Qué es esto? ¿Qué puedo

hacer aquí?

¿Qué tienen ¿Por qué debería

aquí? estar aquí y no
en otro lugar?

www.esencial.com

Necesito poder responder a estas preguntas de un vistazo, correctamente

y sin ambigüedades, con muy poco esfuerzo.

Si no me queda claro lo que estoy viendo en los primeros segundos, interpretar todo
lo demás en la página es más difícil y hay más posibilidades de que malinterprete
algo y me frustre.

Pero si lo “capto”, es mucho más probable que interprete correctamente todo lo

que veo en la página, lo que mejora enormemente mis posibilidades de tener una
experiencia exitosa y satisfactoria.

No me malinterpreten: todo lo demás es importante. Necesitas impresionarme,

atraerme, dirigirme y exponerme a tus tratos. Pero estas cosas no pasarán
desapercibidas; siempre habrá mucha gente, dentro y fuera del equipo de desarrollo,
que se encargará de que se hagan. Sin embargo, con demasiada frecuencia, nadie tiene
un interés personal en transmitir el punto principal.

[ 99 ]
Capítulo 7

LAS CINCO PRINCIPALES EXCUSAS PLAUSIBLES PARA

NO EXPLICAR LA IMAGEN GRANDE EN LA PÁGINA DE INICIO

No necesitamos hacerlo. Cuando estás involucrado en la construcción de un sitio, es tan obvio para
Es obvio. ti lo que estás ofreciendo y por qué es increíblemente bueno que es difícil
recordar que no es obvio para todos.

Después de que las

Muy pocas personas evitarán un sitio solo porque ven la misma explicación de
personas hayan visto
lo que es cada vez que van allí, a menos que ocupe la mitad de la página.
la explicación una vez,
Piénselo: incluso si sabe qué es JAMA, ¿se ofenderá al ver "Journal of the
la encontrarán molesta.
American Medical Association" junto al logotipo en letra pequeña?

Cualquiera que realmente Es tentador pensar que las personas que no "entienden" su sitio de inmediato
necesite nuestro sitio probablemente no sean su público real, pero no es cierto. Cuando se prueban
sabrá lo que es. sitios, no es inusual que la gente diga: “Oh, ¿ eso es lo que es? Lo usaba todo
el tiempo, pero no estaba claro qué era”.

Para eso está Incluso si la gente entendiera sus anuncios de televisión, radio e impresos,2 por la
nuestra publicidad. vez que lleguen a su sitio, ¿recordarán exactamente qué fue lo que les llamó
la atención?

Si el sitio es muy complejo o novedoso, un destacado "¿Nuevo en este

Solo agregaremos
un "¿Visitante por sitio?" El enlace en la página de inicio es una buena idea. Pero no es un sustituto

primera vez?" Enlace para deletrear el panorama general a simple vista, ya que la mayoría de las
personas no harán clic en él hasta que ya hayan intentado, y fallado, resolverlo
por su cuenta. Y para entonces, es posible que ya estén irremediablemente
confundidos.

2
Del Wall Street Journal, 30 de marzo de 2000:

Para su debut en el Super Bowl de 1999, Outpost.com emitió el ahora infame anuncio que
mostraba "jerbos" disparados desde un cañón. [Estos han sido reemplazados por] anuncios
serios en los que el comediante Martin Mull explica a los consumidores exactamente qué es lo que
vende Outpost.com (computadoras, tecnología y equipos electrónicos). “Podríamos haberte dicho
eso, pero disparamos jerbos con un cañón”, bromea. "¿En qué estábamos pensando?"

[ 100 ]
 la página de inicio está fuera de su control

Cómo transmitir el mensaje

Todo en la página de inicio puede contribuir a nuestra comprensión de lo que es el sitio. Pero hay
dos lugares importantes en la página donde esperamos encontrar declaraciones explícitas de lo
que trata el sitio.

> El eslogan. Uno de los bienes inmuebles más valiosos es el espacio justo al lado del ID del
sitio. Cuando vemos una frase que está conectada visualmente con la ID, sabemos que se
trata de un eslogan, por lo que la leemos como una descripción de todo el sitio. Veremos los
eslóganes en detalle en la siguiente sección.

Lema

Texto de bienvenida

> La propaganda de bienvenida. La propaganda de bienvenida es una breve descripción del sitio,
se muestra en un bloque destacado en la página de inicio que es visible sin necesidad de desplazarse.

El punto no es que todos usen estos dos elementos, o incluso que todos los noten. La mayoría
de los usuarios probablemente intentarán adivinar cuál es el sitio primero a partir del contenido
general de la página de inicio. Pero si no pueden adivinar, querrás tener un lugar en la página
donde puedan ir para averiguarlo.

También existe una tercera posibilidad: puede usar todo el espacio a la derecha del ID del
sitio en la parte superior de la página para ampliar su misión. Pero si lo hace, debe asegurarse
de que las señales visuales dejen en claro que toda esta área es un modificador de la ID del sitio
y no un anuncio publicitario, ya que los usuarios esperarán ver un anuncio en este espacio y es
probable que lo ignoren. eso.

[ 101 ]
Capítulo 7

Aquí hay algunas pautas para transmitir el mensaje:

> Utilice tanto espacio como sea necesario. La tentación es no querer usar ninguna
espacio porque (a) no se puede imaginar que nadie sepa lo que es este sitio, y (b) todo el
mundo está pidiendo a gritos utilizar el espacio de la página de inicio para otros fines.

Tome Essential.com, por ejemplo. Debido a su propuesta novedosa (elija sus propios
proveedores de servicios públicos), Essential.com tiene muchas 'explicaciones' que
hacer, por lo que utilizan sabiamente mucho espacio en la página de inicio para hacerlo.
Casi todos los elementos de la página ayudan a explicar o reforzar de qué se trata el sitio.

1
1. Lema destacado.

2. Destacado pero conciso

Texto de bienvenida. Las
palabras Por qué, Cómo y

3 2 Plus se usan inteligentemente

para convertirlo en una lista
con viñetas para que no
parezca un bloque de texto
largo e imponente.

3. El encabezado Comprar

4 por departamento deja

en claro que el objetivo de
estos departamentos es
comprar algo, no solo
obtener información.

4. La cita testimonial (y la
foto que llama la atención)
cuenta la historia nuevamente.
www.esencial.com

[ 102 ]
 la página de inicio está fuera de su control

> …pero no uses más espacio del necesario. Para la mayoría de los sitios, no hay
necesidad de utilizar mucho espacio para transmitir la propuesta básica, y los
mensajes que ocupan toda la página de inicio suelen ser demasiado para que la
gente se moleste en absorberlos de todos modos. Manténgalo breve, solo lo
suficiente para transmitir el punto, y no más. No se sienta obligado a mencionar
todas las características excelentes, solo las más importantes (máximo cuatro).

> No utilice una declaración de misión como propaganda de bienvenida. Muchos

sitios llenan su página de inicio con su declaración de misión corporativa que
suena como si hubiera sido escrita por una finalista de Miss América. “XYZCorp
ofrece soluciones de clase mundial en el floreciente campo de bla, bla, bla, bla, bla...”. Nadie los lee.

> Es una de las cosas más importantes para probar. No puedes confiar en los tuyos
juicio sobre esto. Debe mostrar la página de inicio a personas ajenas a su
organización para saber si el diseño está cumpliendo con este trabajo porque el
"punto principal" es lo único que nadie dentro de la organización notará que falta.

¡Nada supera a un buen eslogan!™

Un eslogan es una frase concisa que caracteriza a toda la empresa, resumiendo lo
que es y lo que la hace grande. Los lemas han existido durante mucho tiempo en la
publicidad, el entretenimiento y las publicaciones: "Miles de videograbadoras a
precios increíblemente bajos", "Más estrellas de las que hay en el cielo"3 y "Todas las
noticias que se pueden imprimir"4. por ejemplo.

3
Estudios Metro-Goldwyn-Mayer, en las décadas de 1930 y 1940.

4 El New York Times. Tengo que admitir una preferencia personal por la parodia de la revista Mad.
versión, sin embargo: "Todas las noticias que encajan, las imprimimos".

[ 103 ]
Capítulo 7

En un sitio web, el eslogan aparece justo debajo, encima o al lado del ID del sitio.

www.alibris.com

Los eslóganes son una forma muy eficaz de transmitir su mensaje, ya que son el único lugar de la
página donde los usuarios esperan encontrar una declaración concisa del propósito del sitio.

Algunos atributos a tener en cuenta al elegir un eslogan:

> Los buenos eslóganes son claros e informativos.

www.computerunderground.com

> Los eslóganes malos son vagos.

www.sonicnet.com

> Los buenos eslóganes son lo suficientemente largos. De seis a ocho palabras parecen ser lo

suficientemente largas para transmitir un pensamiento completo, pero lo suficientemente cortas para absorberlas fácilmente.

“
Trabajar. Wisely™” puede ser un buen eslogan para un comercial de
televisión, pero en un sitio web no me dice lo suficiente.

Creo que Onvia se dio cuenta de esto y agregó un segundo eslogan.

Desafortunadamente, “Ocuparse
del negocio de administrar su
pequeña empresa” va al extremo
opuesto: es demasiado largo.
www.onvia.com

[ 104 ]
 la página de inicio está fuera de su control

> Los buenos eslóganes transmiten diferenciación y un claro beneficio.

www.refdesk.com

> Los eslóganes malos suenan genéricos.

Ahorrar tiempo, dinero y cordura son cosas claramente

buenas. Pero no nos dicen nada sobre el sitio.
www.netmarket.com

No confunda un eslogan con un lema, como "Damos vida a las cosas buenas".
“Estás en buenas manos” o “Para proteger y servir”. Un lema expresa un principio rector,
una meta o un ideal, pero un eslogan transmite una propuesta de valor.
Los lemas son elevados y tranquilizadores, pero si no sé de qué se trata, un lema no me lo dirá.

> Los buenos eslóganes son agradables, animados y, a veces, ingeniosos. Inteligente es bueno,
pero solo si la inteligencia ayuda a transmitir, no a oscurecer, el beneficio.

Cradle and all” es un eslogan muy inteligente y atractivo. Pero podría dar a
algunos visitantes la impresión de que BabyCenter.com solo se trata de
comprar “artículos para bebés”, cuando en realidad también es una excelente
fuente de información y consejos.

Afortunadamente, BabyCenter tuvo la sensatez

de agregar una destacada nota de Bienvenida
que funciona: casi lo suficientemente corta
para leer, con algunas palabras clave en negrita
para que se pueda escanear.
www.babycenter.com

[ 105 ]
Capítulo 7

¿Eslogan? No necesitamos ningún eslogan apestoso

Algunos sitios pueden funcionar sin un eslogan. Por ejemplo,

> El puñado de sitios que

ya han logrado
estado de las palabras del hogar.5

> Sitios que son muy

bien conocido desde sus

orígenes fuera de línea.

Personalmente, sin embargo, diría que incluso estos sitios se beneficiarían de un eslogan.
Después de todo, no importa cuán conocido sea, ¿por qué dejar pasar una oportunidad discreta?
decirle a la gente por qué están mejor en su sitio? E incluso si un sitio proviene de un
fuerte marca fuera de línea, la misión en línea nunca es exactamente la misma y es importante
para explicar la diferencia.

la quinta pregunta
Una vez que sé lo que estoy mirando, todavía hay una pregunta más importante que
la página de inicio tiene que responder por mí:

Dónde estoy
¿comienzo?

5 Incluso Amazon tuvo un eslogan hasta 1998, cuando ya era

una palabra familiar pero aún no aparecía en la portada de Time.

[ 106 ]
 la página de inicio está fuera de su control

Cuando entro en un sitio nuevo, después de un vistazo rápido a la página de inicio, debería estar
capaz de decir con confianza:

> Aquí es donde empezar si quiero buscar.

> Aquí es donde empezar si quiero navegar.

> Aquí es donde empezar si quiero probar sus mejores cosas.

En los sitios que se construyen en torno a un proceso paso a paso (solicitar una hipoteca, por ejemplo), el
punto de entrada para el proceso debería llamarme la atención. y en los sitios
donde tengo que registrarme si soy un usuario nuevo o iniciar sesión si soy un usuario que regresa, el
los lugares donde me registre o inicie sesión deben ser prominentes.

Desafortunadamente, la necesidad de promover todo (o al menos todo lo que

apoya el modelo de negocios de esta semana) a veces oscurece estos puntos de entrada.
Puede ser difícil encontrarlos cuando la página está llena de promociones que gritan "¡Empieza aquí!"
y "¡No, haz clic en mí primero!"

La mejor manera de evitar que esto suceda es hacer que los puntos de entrada parezcan puntos de entrada
(es decir, hacer que el cuadro de búsqueda parezca un cuadro de búsqueda y la lista de
las secciones parecen una lista de secciones). También ayuda etiquetarlos claramente, con etiquetas como
"Buscar", "Explorar por categoría", "Iniciar sesión" y "Comenzar aquí" (para un proceso paso a paso).

La navegación de la página de inicio puede ser única

Los diseñadores a veces me preguntan qué tan importante es que la navegación en la página de
inicio sea la misma que en el resto del sitio. Por ejemplo, si el persistente
la navegación es horizontal, ¿la navegación de la página de inicio puede ser vertical?

La respuesta es definitivamente “Sí, puede ser diferente. Pero no demasiado diferente.

Dadas las responsabilidades únicas de la página de inicio, a menudo tiene sentido no utilizar la navegación
persistente allí. Las diferencias típicas incluyen:

> Descripciones de las secciones. Dado que la página de inicio tiene que revelar todo lo que pueda de
lo que se encuentra a continuación, es posible que desee agregar una frase descriptiva al nombre de cada sección, o
incluso enumere las subsecciones, algo para lo que no tiene espacio para hacer en cada página.

[ 107 ]
Capítulo 7

página de inicio

En todos lados

> Diferente orientación. La página de inicio a menudo requiere un diseño muy diferente
al de todas las demás páginas, por lo que puede ser necesario utilizar una navegación
horizontal en lugar de vertical, o viceversa.

> Más espacio para la identidad. El ID del sitio en la página de inicio suele ser más
grande que en la navegación persistente, como el cartel grande sobre la entrada de
una tienda, y normalmente necesita un espacio vacío junto a él para el eslogan, que puede no aparecer
en cada página.

Pero también es importante no hacer ningún cambio que no sea necesario. La navegación
de la página de inicio y la navegación persistente deben tener suficiente en común para
que los usuarios puedan reconocer de inmediato que son solo dos versiones diferentes
de lo mismo.

Lo más importante es mantener los nombres de las secciones exactamente iguales: el

mismo orden, la misma redacción y la misma agrupación. También ayuda tratar de
mantener la mayor cantidad posible de las mismas señales visuales: el mismo tipo de
letra, colores y mayúsculas.

Por ejemplo, el sitio Wildfire.com tiene un diseño muy agradable y, en general, una
ejecución excelente, pero hay demasiada desconexión entre la navegación en la página
de inicio y el resto del sitio.

[ 108 ]
 la página de inicio está fuera de su control

Todas las demás páginas

Navegación de la

página de inicio de Wildfire.com

No importa que la navegación sea vertical en la página de inicio y horizontal en el resto. E

incluso las variaciones menores en los nombres de las secciones (como Para
Transportistas / Transportista y La Compañía / Compañía) están bien porque es obvio que
son lo mismo.

Lo que importa es que una vez que salga de la página de Inicio

> Quiero que Wildfire se convierta en consumidor

> WildTalk desaparece por completo

> Enterprise aparece de la nada, y

> Incluso los nombres que son iguales no están en el mismo orden

Como resultado, es difícil reconocer que los dos sistemas de navegación están
relacionados. Cuando salgo de la página de inicio, tengo que descifrar la navegación del
sitio nuevamente, con una ráfaga de signos de interrogación flotando sobre mi cabeza.

[ 109 ]
Capítulo 7

El problema con los menús desplegables

Dado que la página de inicio de bienes raíces es tan breve
Presiona el menú
suministro, los diseñadores siempre están buscando formas de
crear más de eso. Un enfoque común es usar
El mismo
menús desplegables.6 No hay duda al respecto:
menú, mostrado
Los menús desplegables definitivamente ahorran espacio. como una lista estática

Desafortunadamente, sufren de varios problemas:

> Tienes que buscarlos. Tienes que hacer clic en

el menú desplegable para ver la lista, por lo que no hay posibilidad

para que los elementos de la lista le llamen la atención mientras escanea

la página. Esto puede ser un verdadero inconveniente en

la página de inicio donde intenta exponer el contenido del
sitio.

> Son difíciles de escanear. Si los diseñadores utilizan el menú desplegable HTML estándar,
no tienen control sobre la fuente, el espaciado o el formato de la lista para hacer
hacerlos más legibles, y no hay una forma realmente buena de dividir la lista en
subgrupos.

> Están nerviosos. De alguna manera el hecho de que la lista va y viene tan rápido
hace que sea más difícil de leer.

Los menús desplegables son más efectivos para listas alfabéticas de

elementos con nombres conocidos, como países, estados o
productos, porque no hay pensamiento involucrado. Si yo soy
buscando VCR, por ejemplo, puedo desplazarme hacia abajo hasta
las V

Pero son mucho menos efectivos para las listas en las que no
sé el nombre de lo que estoy buscando, especialmente si
la lista no está ordenada alfabéticamente o es lo suficientemente larga como para requerir

desplazamiento Bueno No tan bien

6 …o simplemente “menús desplegables” o “menús desplegables”. Nadie está muy seguro de cómo llamarlos.

[ 110 ]
 la página de inicio está fuera de su control

Desafortunadamente, dado que el principal beneficio de los menús desplegables es ahorrar espacio,
los diseñadores se sienten más tentados a usarlos cuando tienen una lista larga para mostrar.

A algunos usuarios les encantan los menús desplegables porque son eficientes; otros no los tocarán.
En la mayoría de los casos, creo que los inconvenientes de los pulldowns superan los beneficios potenciales.

¿Por qué los gansos dorados son

objetivos tan tentadores o “gracioso, sabe a pollo…”
Hay algo en la página de inicio que parece inspirar un comportamiento miope. Cuando
participo en reuniones sobre el diseño de la página de inicio, a menudo encuentro la frase head.8
huevos de oro" corriendo por mi "matar la gallina de los

El peor de estos comportamientos, por supuesto, es la tendencia a tratar de promocionar

todo.

El problema de promocionar cosas en la página de inicio es que funciona demasiado bien.

Se garantiza que todo lo que tenga un enlace destacado en la página de inicio obtendrá más tráfico,
generalmente mucho más, lo que lleva a todas las partes interesadas del sitio a pensar: "¿Por qué
no tengo uno?"

El problema es que las recompensas y los costos de agregar más cosas a la página de inicio no
se comparten por igual. La sección que se promociona obtiene una gran ganancia de tráfico, mientras
que la pérdida general de efectividad de la página de inicio a medida que se llena más se comparte
entre todas las secciones.

8
Siempre pensé que la frase venía del cuento de Jack y las habichuelas mágicas. De hecho, Jack's Giant
tenía una gallina de los huevos de oro, pero nadie trató de matarla. La matanza sin sentido ocurre en una
de las fábulas de Esopo, y no hay mucho en ella, en cuanto a la trama: el hombre encuentra un ganso, el
hombre se vuelve codicioso, el hombre mata al ganso, el hombre no obtiene más huevos. Moraleja: "La
codicia a menudo se extralimita".

[ 111 ]
Capítulo 7

Es un ejemplo perfecto de la tragedia de los bienes comunes.9 La premisa es simple: cualquier

recurso compartido (un “bien común”) inevitablemente será destruido por el uso excesivo.

Tome un pasto de la ciudad, por ejemplo. Por cada animal que un pastor agrega al
pasto común, recibe todos los ingresos de la venta del animal, un beneficio positivo de +1.
Pero el impacto negativo de agregar un animal, su contribución al sobrepastoreo, es compartido
por todos, por lo que el impacto en el pastor individual es menor que -1.

El único curso sensato para cada pastor es agregar otro animal a la manada.
Y otro, y otro, preferiblemente antes de que alguien más lo haga. Y dado que todos los pastores
racionales llegarán a la misma conclusión, los bienes comunes están condenados.

Preservar la página de inicio de la sobrecarga promocional requiere una vigilancia

constante, ya que suele ocurrir de manera gradual, con la adición lenta e inexorable de solo…
una…cosa…más.

Todas las partes interesadas deben ser educadas sobre el peligro de sobrepastoreo
página de inicio y ofreció otros métodos para dirigir el tráfico, como la promoción cruzada
desde otras páginas populares o turnarse para usar el mismo espacio en la página de inicio.
página.

9 El concepto, originado por el matemático aficionado del siglo XIX William Forster
Lloyd, se popularizó en un ensayo clásico sobre la superpoblación del biólogo
Garrett Hardin ("The Tragedy of the Commons", Science, diciembre de 1968).

[ 112 ]
 la página de inicio está fuera de su control

tu eres el juez
Decida usted mismo qué tan bien hacen el trabajo estas dos páginas de Inicio. Eche un
vistazo rápido a cada uno y responda estas dos preguntas, luego compare sus respuestas con las mías.

> ¿Cuál es el objetivo de este sitio?

> ¿Sabes por dónde empezar?

Respuestas en la página 115

www.etour.com

[ 113 ]
Capítulo 7

Respuestas en la página 118 www.productopia.com

[ 114 ]
 la página de inicio está fuera de su control
Cada clic en el botón
"Siguiente sitio" de
eTour abre otro sitio.
10
eTour fue víctima de un bloqueo web en 2001, poco después de escribir esto, así que lo cambié al tiempo pasado.
[ 115 ]
¿CUÁL ES EL PUNTO DE ESTE
SITIO? eTour fue10 un sitio muy
interesante y (al menos para mí) útil con
un concepto simple: dígales cuáles son
sus intereses (marcando categorías como
Viajes, Genealogía o Diseño web) y lo llevarán
a otra mano. sitio elegido y de alta calidad que
coincidía con esos intereses cada vez que
hacía clic en el botón "Sitio siguiente".
Fue una navegación web gratificante
y sin esfuerzo: todo trigo, sin paja. Solía
probar eTour cada pocas semanas solo para
obtener una nueva muestra de lo nuevo que
había.
Creo que hicieron un muy buen trabajo al
transmitir el punto del sitio al reducir su
historia a tres frases cortas y numerarlas 1-2-3
para sugerir que usar el sitio es un proceso
simple.
Su eslogan ("Navegar por la Web sin
buscar") tuvo menos éxito porque me obligó
a pensar si la búsqueda es realmente lo que
dificulta la navegación por la Web. Pero
como dicen los lemas, no está mal.
Por supuesto, eTour tuvo más suerte que
la mayoría de los sitios. Como no tenían
una jerarquía de contenido que tenían que
hacer visible, todo lo que tenía que hacer la
página de inicio era transmitir el concepto y la propuesta de valor.
Pero aun así, hicieron un mejor trabajo
que otros sitios similares porque se apegaron
al punto principal y resistieron la tentación de
promocionar cualquiera de las otras
características del sitio. Como buen ladrador
de carnaval, entendieron que lo único que
cuenta es meter gente dentro de la carpa.
Capítulo 7

¿SABES DÓNDE EMPEZAR?

La mayoría de las personas a las que les he

mostrado eTour tuvieron la tentación de hacer clic
primero en los números (1,2,3) o en los tres gráficos.
Pero cuando eso no funcionó (no se puede hacer clic
en ellos), todos hicieron clic en el gran "¡Vamos!"
botón en la parte inferior de la página casi inmediatamente.

El botón grande funciona bien para los

visitantes primerizos. De hecho, el único problema es
que es tan grande (y "¡Vamos!" es tan genérico) que
también hice clic en él en mi segunda visita, cuando
lo que debería haber hecho era el subestimado
botón "Miembros ingresen aquí" a su izquierda.
De hecho, dado que transcurrieron una o dos
semanas entre mis visitas posteriores, hice clic en
"¡Vamos!" en mi tercera visita, también. Y mi cuarto.

MI VERSIÓN Los
únicos cambios que haría serían los
puntos de partida.

Dejaría en claro que el botón grande es para nuevos

usuarios y les daría a los usuarios registrados un
lugar claro para iniciar sesión en la página de inicio.

MI VERSIÓN #2 Siempre
supuse que los tres gráficos ilustraban
los tres pasos descritos en el texto. Pero
cuando comencé a mirar la página
detenidamente, me di cuenta de que no lo
hacen, solo muestran sitios de muestra de tres categorías.

Así que me burlé de una versión en la que los

gráficos realmente contaban la historia. Y me
sorprendió descubrir que, si bien transmitía más información,

[ 116 ]
 la página de inicio está fuera de su control

no fue una mejora. De hecho, en general solo

hizo que el concepto pareciera más complicado.
¿La moral? Las cosas en una página web no siempre
tienen que tener sentido literal para ser efectivas,
siempre y cuando parezcan tener sentido.

MI VERSIÓN #3
También probé otra versión donde saqué los
números (1, 2, 3), para eliminar la tentación de hacer
clic sobre ellos. Pero solo logré probar que la página
funciona mejor con ellos. Parecen funcionar como
una especie de "pegamento" visual y conceptual
que ayuda al usuario a dar sentido a la página.

El hecho de que los usuarios intenten hacer clic en

ellos es un pequeño precio a pagar si los números
aclaran el concepto.

SU REDISEÑO Después de
escribir este capítulo por primera vez,
eTour rediseñó su página de inicio. Como suele
ser el caso con los rediseños, dieron algunos
pasos hacia adelante...

> Crearon puntos de entrada claros para usuarios

nuevos y recurrentes al darle al botón grande
un nombre que se explica por sí mismo
("Registrarse") y agregar un cuadro de inicio
de sesión para usuarios registrados.

> Mejoraron el eslogan ("Su guía turística web

personal") y agregaron lo que equivale a otro
eslogan ("Descubra sitios que le gustarán, un clic
a la vez").

...y unos pasos atrás >

Combinaron el cuadro de inicio de sesión con

un menú desplegable, lo que les dio a los
usuarios una cosa más en la que pensar con
GIF animado muy poco pagoÿ.

> Reemplazaron los gráficos y el texto "1-2-3" con

un GIF animado y un bloque de texto que es
demasiado largo para que alguien se moleste en leer.

[ 117 ]
Capítulo 7

¿CUÁL ES EL PUNTO DE ESTE SITIO?

Productopia era10 un sitio excelente, pero es posible que no lo
conozcas por su página de inicio.

El problema es una falla en la jerarquía visual. Debido a que el

eslogan ("La fuente de información y asesoramiento sobre productos")
se encuentra dentro del panel de directorio al estilo de Yahoo, aparece
como una descripción de la lista de categorías en lugar de todo el sitio.
Y dado que el eslogan es soso y carece de detalles, no logra
diferenciar a Productopia de todos los demás sitios de asesoramiento
sobre productos y termina sonando como cualquier otro reclamo
inflado de Internet.

A primera vista, el único mensaje que recibo es que el sitio tiene

algo que ver con el asesoramiento sobre productos. El estilo
gráfico sofisticado y los productos que se muestran a la izquierda
sugieren claramente que estamos hablando de productos elegantes y
caros: muebles de diseñador, no Chia Pets.

Sospecho que es un sitio donde podría encontrar reseñas de

usuarios o reseñas escritas por Productopia para productos
específicos. En realidad, el sitio es mucho más poderoso.
Ofrece consejos sobre cómo encontrar el mejor producto en una
categoría en un rango de precios determinado, con consejos reales
y útiles sobre lo que hace que un producto sea bueno en una categoría determinada.

Por ejemplo, cuando hice clic en lo que pensé que era una promoción
de una tostadora Dualit 2 Slice, me sorprendió encontrarme en una
página llena de información útil, reflexiva y bien escrita sobre cómo
elegir una tostadora. (Había un enlace destacado a la Dualit, pero era
solo una de las nueve tostadoras destacadas en tres categorías:
calidad, estilo y valor). En general, el mensaje de la página de inicio
me dio muy poca pista de lo que encontraría dentro.

No está claro si el área de la izquierda son tres promociones para

los productos destacados de hoy o una propaganda de bienvenida
muy abstracta. (El texto, "forma superior / fanfarrones bien formados,
huele a lujo" no ayuda mucho).

10
Productopia corrió la misma suerte que eTour.

[ 118 ]
 la página de inicio está fuera de su control

La declaración publicitaria de bienvenida real

("Nuestros expertos le brindan la información
que necesita...") está debajo de las promociones,
y debe presentarse antes que ellas. Y, como
siempre, es demasiado largo. Tengo que trabajar
duro para encontrar la información crucial: los
editores seleccionan productos sin ninguna
influencia de los fabricantes o anunciantes.

¿SABES DÓNDE
EMPEZAR?
Hay tres puntos de partida claros en la página:

> Escriba algo en el cuadro de búsqueda

prominente.

> Haz clic en una de las categorías del

directorio estilo Yahoo.

> Haga clic en uno de los tres productos

destacados (si es que son).

El único problema es que, si no tengo

claro cuál es el sitio, ¿cómo decido qué
buscar o qué categoría elegir? Una página de
inicio exitosa tiene que decirme qué es el sitio
y mostrarme por dónde empezar.

[ 119 ]
Capítulo 7

SU VERSIÓN REVISADA Mientras

escribía este capítulo, Productopia
rediseñó su página de inicio, mejorándola
sustancialmente.

Eliminaron el eslogan perdido a la derecha y

pusieron un eslogan mucho mejor ("Le
ayudamos a encontrar los productos que le
encantarán") en la parte superior del área de la izquierda.

Y acortaron la explicación crucial ("Nuestros

expertos ofrecen consejos imparciales para
ayudarlo a elegir el producto adecuado para
usted") para que ahora tenga la posibilidad de
ser leído. Pero todavía está enterrado en la parte
inferior de lo que todavía parece ser la sección
de productos destacados.

Y movieron los enlaces de Utilidad (Política

editorial, Reseñas de usuarios, etc.) a una
nueva área en la parte inferior de la página,
pero los agruparon junto con promociones
como "Moda de primavera para mujeres" y
"¿Tú cocinas?" Me tomó un tiempo darme cuenta
de que las dos columnas eran diferentes.

[ 120 ]
 la página de inicio está fuera de su control

MI VERSIÓN
Comenzaría moviendo el eslogan a
la parte superior de la página con el ID
del sitio, dejando claro que es una
descripción de todo el sitio.

También movería la propaganda de bienvenida

sobre las promociones y la haría más prominente.

Separaría los enlaces de Utilidad y las promociones

en la parte inferior de la página, agrupando las
promociones con los "productos destacados"
encima de ellos en el lado izquierdo.

Y reformatearía los íconos de los premios. A

diferencia de la mayoría de los premios Web,
estos cuatro son realmente significativos. (El
premio Digital Time coloca a Productopia en una
lista corta de sitios de comercio electrónico con
Amazon y eBay). Pero al alinearlos en la parte
inferior de la página, parece que están Íconos
"Sitio genial del día de Bob". Este es un caso en
el que desea asegurarse de no seguir una
convención.

[ 121 ]
capítulo

8
“El granjero
y el vaquero
Debiera ser
Amigos"
por qué la mayoría de los argumentos del equipo de
diseño web sobre la usabilidad son una pérdida de tiempo
y cómo evitarlos
 A un hombre le gusta empujar un arado
Al otro le gusta perseguir una vaca.
Pero esa no es la razón por la que no pueden ser amigos
— ¡Oklahoma!
, oscar hammerstein ii

L
eft a sus propios dispositivos, equipos de desarrollo web
no son notoriamente exitosos en la toma de decisiones sobre cuestiones de usabilidad.
La mayoría de los equipos terminan gastando mucho tiempo precioso repasando los
mismos problemas una y otra vez.

Considere esta escena:

DIVERSIONES DE DISEÑO WEB El episodio de hoy: “Debates religiosos”

presentando… Carolina hace una sugerencia...

Rick de
Marketing
kim el Podríamos usar
Proyecto un menú desplegable
Gerente para la lista de productos.

carolina la
Bob el
Diseñador
Desarrollador

Bueno, no creo que a la Además,

A la gente no le gustan
Odio
mayoría de la gente les importe. ¿tienes una
los menús desplegables.
Y nos ahorrarían idea mejor?
los desplegables. Mi padre ni siquiera se
acerca a un sitio si usa mucho espacio.
menús desplegables.

continuado…

[ 123 ]
Capítulo 8

… pero Bob juega la carta de triunfo de su desarrollador

¿Sabemos si hay datos de
investigación sobre los
menús desplegables? Creo que podría haber
un problema al usar
menús desplegables
en las páginas ASP de
nuestros servidores remotos.

Rick intenta apelar a una autoridad superior...

Entonces, ¿qué
Odio piensa todo el mundo?
mi vida. ¿Deberíamos intentar
usar menús desplegables?

Dos semanas después…

¿Alguna vez tomamos

una decisión sobre
los pulldowns?

Por lo general, llamo a estas interminables discusiones "debates religiosos", porque

tienen mucho en común con la mayoría de las discusiones sobre religión y política: consisten
en gran medida en personas que expresan creencias personales muy arraigadas sobre
cosas que no se pueden probar, supuestamente en interés de ponerse de acuerdo sobre la mejor manera de h

[ 124 ]
 el granjero y el vaquero

importante (ya sea para lograr la paz eterna, gobernar con eficacia o simplemente
diseño de páginas Web). Y, como la mayoría de los debates religiosos, rara vez resultan en
cualquier persona implicada cambiando su punto de vista.

Además de perder el tiempo, estas discusiones crean tensión y erosionan el respeto entre
miembros del equipo y, a menudo, puede impedir que el equipo tome decisiones críticas.

Desafortunadamente, hay varias fuerzas en el trabajo en la mayoría de los equipos Web que hacen
estos debates casi inevitables. En este capítulo, describiré estas fuerzas y
explicar cuál creo que es el mejor antídoto.

“
A todo el mundo le gusta ________”.
Todos los que trabajamos en sitios web tenemos una cosa en común: también somos
usuarios Y como todos los usuarios de la web, tendemos a tener fuertes sentimientos acerca de lo que nos gusta
y no me gustan los sitios Web.

Como individuos, amamos las animaciones Flash porque son geniales; o los odiamos
porque tardan mucho en descargarse. Nos encantan los menús en el lado izquierdo de
cada página porque son familiares y fáciles de usar, o los odiamos porque son
muy aburrido. Realmente disfrutamos usar sitios con ______, o encontramos______ ser un dolor real.

Y cuando estamos trabajando en un equipo web, resulta muy difícil verificar

esos sentimientos en la puerta.

El resultado suele ser una sala llena de personas con fuertes convicciones personales.
sobre lo que hace a un buen sitio Web.

Y dada la fuerza de que es tan malo

¿a cerca de ellos?
estas convicciones—y El tiene razón.
Ellos apestan.
naturaleza humana—hay una
Me gustan
los pull downs. Qué
tendencia natural a proyectar
¿Su problema?
estos gustos y disgustos en
la gente no
Usuarios de la web en general: para pensar
como desplegables.
que a la mayoría de los usuarios de la Web les gusta el

las mismas cosas que nos gustan. Tendemos

pensar que la mayoría de los usuarios de la Web

son como nosotros

[ 125 ]
Capítulo 8

No es que pensemos que todo el mundo es como nosotros. Sabemos que hay algunas personas fuera
hay quienes odian las cosas que amamos, después de todo, incluso hay algunos de ellos en nuestro
propio equipo Web. Pero no gente sensata. Y no hay muchos de ellos.

Granjeros contra vaqueros

Además de esta capa de pasión personal, hay otra capa: profesional
pasión. ¡Como los granjeros y los vaqueros de Oklahoma!, los jugadores en una Web
equipo tienen perspectivas muy diferentes sobre lo que constituye un buen diseño web basado
en lo que hacen para ganarse la vida.1

¡PIZZA!
La red ideal

página como se ve
por alguien
cuyo trabajo es… CEO Desarrollador Diseñador Desarrollo de negocios

Tomemos a los diseñadores y desarrolladores, por ejemplo. Los diseñadores tienden a pensar que a la
mayoría de las personas les gustan los sitios que son visualmente interesantes porque les gustan los sitios que son
visualmente interesante. De hecho, probablemente se convirtieron en diseñadores porque disfrutan
buen diseño; encuentran que hace las cosas más interesantes y más fáciles de
entender.2

Los desarrolladores, por otro lado, tienden a pensar que a la gente le gustan los sitios con mucho contenido interesante.

características porque les gustan los sitios con muchas características interesantes.

El resultado es que los diseñadores quieren crear sitios que se vean geniales y los desarrolladores
quiere construir sitios con características interesantes, originales y elegantes. no estoy seguro de quién es
el granjero y quién es el vaquero en esta imagen, pero sé que su
Las diferencias de perspectiva a menudo conducen a conflictos y resentimientos cuando se trata de
Llega el momento de establecer prioridades de diseño.

1
En la obra, los granjeros ahorrativos, temerosos de Dios y orientados a la familia siempre están en desacuerdo con el
vaqueros libres y despreocupados. A los granjeros les encantan las cercas, a los vaqueros les encantan los campos abiertos.

2
Sí, estoy tratando con estereotipos aquí. Pero creo que son estereotipos útiles.

[ 126 ]
 el granjero y el vaquero

Al mismo tiempo, los diseñadores y programadores se encuentran juntos en otro

choque más grande entre lo que Art Kleiner describe como las culturas de la
exageración y la artesanía.3

Si bien la cultura de la exageración (gerencia superior, marketing y

desarrollo comercial) se centra en hacer cualquier promesa que sea necesaria
para atraer capital de riesgo, usuarios, socios estratégicos y acuerdos generadores
de ingresos al sitio, la carga de cumplir esas promesas recae en los hombros de
los artesanos de la cultura artesanal como los diseñadores y programadores.

Esta versión de Internet de la lucha perenne entre el arte y el comercio (o quizás

agricultores y vaqueros contra los barones del ferrocarril) agrega otro nivel de
complejidad a cualquier discusión sobre problemas de usabilidad, a menudo en
forma de edictos aparentemente arbitrarios dictados desde el lado exagerado de la cerca.4

Al director ejecutivo le gusta el

sitio, pero quiere que todo sea el …a tiempo para la feria
doble de grande de lo que es... comercial de la próxima semana.

3 Véase “Cultura corporativa en tiempos de Internet” en la revista de estrategia+negocios

(www.strategy-business.com/press/article/10374, se requiere registro gratuito).
4 Una vez vi una característica particularmente desconcertante en la página de inicio de un sitio prominente y,
por lo demás, diseñado con sensatez. Cuando pregunté al respecto, me dijeron: “Oh, eso. Llegó a nuestro
CEO en un sueño, así que tuvimos que agregarlo”. Historia verdadera.

[ 127 ]
Capítulo 8

El mito del Usuario Medio

La creencia de que la mayoría de los usuarios de la Web son como nosotros es suficiente para producir
un embotellamiento en la reunión de diseño Web promedio. Pero detrás de esa creencia se encuentra otra,
aún más insidiosa: la creencia de que la mayoría de los usuarios de la Web son como cualquier cosa.

Tan pronto como el choque de opiniones personales y profesionales da como resultado un punto muerto, la
conversación generalmente gira en torno a encontrar alguna forma (ya sea una opinión experta, investigación,
grupos focales o pruebas de usuarios) para determinar qué les gusta o no les gusta a la mayoría de los
usuarios. —para descubrir cómo es realmente el usuario promedio de la web. El único problema es que no
hay un usuario promedio.

De hecho, todo el tiempo que he pasado observando a la gente usar la Web me ha llevado a la
conclusión opuesta: todos los usuarios de la Web son únicos y todo uso de la Web es básicamente
idiosincrásico.

Cuanto más observe atentamente a los usuarios y los escuche articular sus intenciones, motivaciones y
procesos de pensamiento, más se dará cuenta de que sus reacciones individuales a las páginas web se basan
en tantas variables que intentan describir a los usuarios en términos de gustos y preferencias unidimensionales.
los disgustos son inútiles y contraproducentes

productivo. El buen diseño, por otro lado, tiene en cuenta esta complejidad.

Y lo peor del mito del Usuario Promedio es que refuerza la idea de que un buen diseño web es en gran
medida una cuestión de averiguar qué le gusta a la gente. Es una noción atractiva: los menús desplegables
son buenos (porque a la mayoría de la gente le gustan), o son malos (porque a la mayoría de la gente no le
gusta). Debería tener enlaces a todo en el sitio en la página de inicio, o no debería. Los menús en la parte
superior funcionan mejor que los menús laterales. Los marcos, las páginas que se desplazan, etc. son buenos
o malos, en blanco o negro.

El problema es que no hay respuestas "correctas" simples para la mayoría de las preguntas de
diseño web (al menos no para las más importantes). Lo que funciona es un buen diseño integrado que
satisfaga una necesidad, cuidadosamente pensado, bien ejecutado y probado.

Tome el uso de Flash, por ejemplo.5 Si se les pregunta, un porcentaje de los usuarios dirá que realmente le
gusta Flash, y un porcentaje igual probablemente dirá que lo odia. Pero que

5 Flash, la herramienta de Macromedia para crear interfaces de usuario animadas e interactivas, no

flash (en minúsculas), el uso arbitrario de funciones geniales para hacer que un sitio sea más interesante.

[ 128 ]
 el granjero y el vaquero

que realmente odian es Flash mal utilizado: animaciones grandes y complicadas que toman un
mucho tiempo para descargar y no agrega ningún valor. Si los observa con atención y
haga las preguntas correctas, probablemente encontrará que estas mismas personas apreciarán
sitios que utilizan bits de Flash pequeños, trabajadores y bien pensados para agregar una
agradable chisporroteo o funcionalidad útil sin interponerse en el camino.

Eso no quiere decir que no haya algunas cosas que nunca debas hacer, y algunas cosas
rara vez deberías hacerlo. Hay algunas formas de diseñar páginas Web que son claramente
equivocado. Es solo que no son las cosas sobre las que los equipos web suelen discutir.

El antídoto para los debates religiosos

El punto es que no es productivo hacer preguntas como "¿A la mayoría de la gente le gusta
menús desplegables? El tipo correcto de pregunta que se debe hacer es "¿Este menú desplegable, con
estos artículos y esta redacción en este contexto en esta página crean una buena experiencia
para la mayoría de las personas que probablemente usarán este sitio?”

Y en realidad solo hay una forma de responder a ese tipo de preguntas: probando. Tienes que usar la
habilidad colectiva, la experiencia, la creatividad y el sentido común del equipo para
construir alguna versión de la cosa (incluso una versión cruda), luego ver ordinario
personas cuidadosamente mientras tratan de descubrir qué es y cómo usarlo.

No hay sustituto para eso.

Donde los debates sobre lo que le gusta a la gente hacen perder el tiempo y agotan la energía del equipo,
la prueba tiende a calmar los argumentos y romper los callejones sin salida moviendo la discusión
lejos del ámbito de lo que está bien o mal y en el ámbito de lo que funciona o no funciona. Y al
abrirnos los ojos a cuán variadas son las motivaciones de los usuarios,
percepciones y respuestas, las pruebas hacen que sea difícil seguir pensando que todos los
usuarios son como nosotros.

¿Puedes decir que creo que las pruebas son algo bueno?

El siguiente capítulo explica cómo probar su propio sitio.

[ 129 ]
capítulo

9
Test de usabilidad
con 10 céntimos al día
mantener la prueba simple, para que haga lo suficiente
 ¿Por qué no hicimos esto antes?
—lo que todos dicen en algún momento durante la
primera prueba de usabilidad de su sitio web

A Aproximadamente una vez al mes, recibo una de estas llamadas telefónicas:

Ed Grimley de XYZ Corp

me dio su nombre. …¿dos semanas?

Lanzaremos nuestro
sitio en dos semanas y queremos hacer
algunas pruebas de usabilidad.

Tan pronto como escucho "lanzamiento en dos semanas" (o incluso "dos meses") y "usabilidad

testing” en la misma oración, empiezo a tener esa sensación de viejo bombero dirigiéndose a la fábrica de

productos químicos en llamas, porque tengo una idea bastante clara de lo que está pasando.

Si son dos semanas, es casi seguro que se trata de una solicitud de verificación de desastres. El lanzamiento

se acerca rápidamente y todos se están poniendo nerviosos, y alguien finalmente

dice: "Tal vez sea mejor que hagamos algunas pruebas de usabilidad".

Si son dos meses, lo más probable es que lo que quieran es resolver algunos problemas en curso.

debates internos, generalmente sobre algo muy específico como esquemas de color.

La opinión en torno a la oficina está dividida entre dos diseños diferentes; a algunas personas les gusta el sexy,

a otras les gusta el elegante. Finalmente, alguien con suficiente influencia para autorizar el gasto se cansa de

discutir y dice: "Está bien, hagamos algunas pruebas para resolver esto".

[ 131 ]
Capítulo 9

Y aunque las pruebas de usabilidad a veces resuelven estos argumentos, lo principal que
suele hacer es revelar que las cosas sobre las que estaban discutiendo no son tan
importantes. Las personas a menudo prueban para decidir qué cortinas de color son las mejores,
solo para descubrir que se olvidaron de poner ventanas en la habitación. Por ejemplo, podrían
descubrir que no importa mucho si elige la barra de navegación horizontal o los menús verticales
si nadie entiende la propuesta de valor de su sitio.

Lamentablemente, así es como se realizan la mayoría de las pruebas de usabilidad: demasiado poco, demasiado

tarde y por todas las razones equivocadas.

Repite conmigo:
los grupos focales no son pruebas de usabilidad.
A veces, esa llamada telefónica inicial es aún más aterradora:

…vamos a lanzar nuestro sitio en dos

semanas y queremos hacer algunas ¿Pruebas de

pruebas de grupos focales. grupos focales?

Cuando la solicitud de última hora es para un grupo focal, generalmente es una señal de
que la solicitud se originó en Marketing. Cuando se están diseñando sitios web, la gente de
marketing a menudo siente que no tiene mucha influencia. A pesar de que son los que pasan la
mayor parte del tiempo tratando de averiguar quién es la audiencia del sitio y qué es lo que
quieren, los diseñadores y desarrolladores son los que tienen la mayor parte del control práctico
sobre cómo se arma el sitio.

[ 132 ]
 pruebas de usabilidad en 10 centavos al día

A medida que se acerca la fecha de lanzamiento, la gente de marketing puede sentir que su única esperanza
de cordura es apelar a una autoridad superior: la investigación. Y el tipo de investigación que conocen son
los grupos focales.

A menudo tengo que trabajar muy duro para que los clientes entiendan que lo que necesitan son pruebas
de usabilidad, no grupos focales. Aquí está la diferencia en pocas palabras:

> En un grupo focal, un pequeño grupo de personas (generalmente de 5 a 8) se sienta alrededor de una mesa y
reaccionan a las ideas y diseños que se les muestran. Es un proceso de grupo, y gran parte de su valor
proviene de los participantes que reaccionan a las opiniones de los demás. Los grupos focales son
buenos para obtener rápidamente una muestra de las opiniones y sentimientos de los usuarios sobre
las cosas.

> En una prueba de usabilidad, se le muestra algo a un usuario a la vez (ya sea un sitio web, un prototipo
de un sitio o algunos bocetos de páginas individuales) y se le pide que (a) averigüe qué es, o (b ) trate
de usarlo para hacer una tarea típica.

Los grupos focales pueden ser excelentes para determinar lo que su audiencia quiere, necesita y le gusta,
en abstracto. Son buenos para probar si la idea detrás del sitio tiene sentido y si su propuesta de valor es
atractiva. Y pueden ser una buena manera de probar los nombres que está utilizando para las características
de su sitio y de averiguar cómo se siente la gente con respecto a sus competidores.

Pero no son buenos para saber si su sitio funciona y cómo mejorarlo.

El tipo de cosas que puede aprender de los grupos focales son las cosas que necesita aprender desde
el principio, antes de comenzar a diseñar el sitio. Los grupos focales son para TEMPRANO en el proceso.
Incluso puede ejecutarlos tarde en el proceso si desea hacer una verificación de la realidad y ajustar su
mensaje, pero no los confunda con pruebas de usabilidad.
No le dirán si las personas realmente pueden usar su sitio.

Varias cosas verdaderas sobre las pruebas

Estas son las cosas principales que sé sobre las pruebas:

> Si quieres un gran sitio, tienes que probarlo. Después de haber trabajado en un sitio incluso durante
unas pocas semanas, ya no puede verlo como nuevo. Sabes demasiado. La única forma de saber si
realmente funciona es probarlo.

[ 133 ]
Capítulo 9

Las pruebas le recuerdan que no todo el mundo piensa como usted, sabe lo que sabe, usa la
Web como usted.

Solía decir que la mejor manera de pensar en las pruebas era que era como viajar: una
experiencia de ampliación. Te recuerda lo diferentes, y lo mismo, que son las personas, y te
da una nueva perspectiva de las cosas.

Pero finalmente me di cuenta de que las pruebas son más como recibir visitas de amigos de
fuera de la ciudad. Inevitablemente, mientras haces las rondas turísticas con ellos, ves cosas
sobre tu ciudad natal que normalmente no notas porque estás muy acostumbrado a ellas. Y al
mismo tiempo, te das cuenta de que muchas cosas que das por sentado no son obvias para
todos.

> Probar a un usuario es 100 por ciento mejor que no probar a ninguno. Las pruebas siempre
funcionan, e incluso la peor prueba con el usuario equivocado le mostrará cosas importantes
que puede hacer para mejorar su sitio. Siempre hago una prueba de usuario en vivo en mis
talleres para que las personas puedan ver que es muy fácil de hacer y que siempre produce
una gran cantidad de información valiosa. Pido un voluntario y le pido que intente realizar una
tarea en un sitio que pertenece a uno de los otros asistentes.
Estas pruebas duran menos de diez minutos, pero la persona cuyo sitio está siendo probado
suele garabatear varias páginas de notas. Y siempre preguntan si pueden tener la grabación
de la prueba para mostrársela a su equipo en casa. (Una persona me dijo que después de que
su equipo vio la grabación, hicieron un cambio en su sitio que luego calcularon resultó en un
ahorro de $100,000).

> Probar un usuario al principio del proyecto es mejor que probar 50 cerca del
final. La mayoría de la gente asume que las pruebas deben ser un gran problema. Pero si lo
convierte en un gran problema, no lo hará lo suficientemente pronto o con la frecuencia
suficiente para aprovecharlo al máximo. Una prueba simple al principio, mientras todavía tiene
tiempo para usar lo que aprende de ella, casi siempre es más valiosa que una prueba sofisticada más adelante.

Parte de la sabiduría convencional sobre el desarrollo web es que es muy fácil entrar y hacer
cambios. La verdad es que resulta que no es tan fácil hacer cambios en un sitio una vez que
está en uso. Un porcentaje de usuarios se resistirá a casi cualquier tipo de cambio, e incluso
los cambios aparentemente simples a menudo tienen efectos de gran alcance, por lo que
cualquier cosa que pueda evitar que se construya mal en primer lugar es una salsa.

[ 134 ]
 pruebas de usabilidad en 10 centavos al día

> La importancia de reclutar usuarios representativos está sobrevalorada. Es bueno hacer

sus pruebas con personas que son como las personas que usarán su sitio, pero es
mucho más importante probar pronto y con frecuencia. Mi lema, como verá, es "Reclute
libremente y califique en una curva".

> El objetivo de probar no es probar o refutar algo. Es para

informar su juicio. A la gente le gusta pensar, por ejemplo, que pueden usar las
pruebas para probar si el sistema de navegación "a" es mejor que el sistema de
navegación "b", pero no se puede. Nadie tiene los recursos para configurar el tipo de
experimento controlado que necesitarías. Lo que pueden hacer las pruebas es brindarle
información invaluable que, junto con su experiencia, juicio profesional y sentido
común, le facilitará elegir sabiamente, y con mayor confianza, entre "a" y "b".

> La prueba es un proceso iterativo. Probar no es algo que se hace una vez.
Haces algo, lo pruebas, lo arreglas y vuelves a probarlo.

> No hay nada mejor que una reacción de la audiencia en vivo. Una de las
razones por las que las películas de los hermanos Marx son tan maravillosas
es que antes de comenzar a filmar salían de gira en el circuito de vodevil y
representaban escenas de la película, hacían cinco funciones al día,
improvisaban constantemente y observaban qué líneas conseguían las
mejores risas. Incluso después de decidirse por una línea,LaGroucho
Sra. Teasdale (Margaret
insistía
Dumont) y Rufus T. Firefly
en probar ligeras variaciones para ver si se podía mejorar.escuchan a escondidas en Duck Soup.

Perdimos nuestro arrendamiento, pruebas de

usabilidad de venta por cierre del negocio
Las pruebas de usabilidad existen desde hace mucho tiempo, y la idea básica es
bastante simple: si desea saber si su software, su sitio web o el control remoto de
su VCR son lo suficientemente fáciles de usar, observe a algunas personas mientras
intentan usarlo. y observe dónde se meten en problemas. Luego arréglelo y pruébelo de nuevo.

Sin embargo, al principio, las pruebas de usabilidad eran una propuesta muy costosa.
Tenías que tener un laboratorio de usabilidad con una sala de observación detrás de un
espejo unidireccional y al menos dos cámaras de video para poder registrar las reacciones
de los usuarios y lo que estaban usando. Tenías que reclutar a mucha gente para poder obtener resultados

[ 135 ]
Capítulo 9

LAS CINCO PRINCIPALES EXCUSAS PLAUSIBLES PARA NO PROBAR SITIOS WEB

Es cierto que la mayoría de los programas de desarrollo web parecen estar

No tenemos basados en el chiste de una caricatura de Dilbert. Si las pruebas se agregarán a
tiempo. la lista de tareas pendientes de todos, si tiene que ajustar los cronogramas de
desarrollo en torno a las pruebas e involucrar a las personas clave en la
preparación de ellas, entonces no se realizará. Es por eso que debe hacer que las
pruebas sean lo más pequeñas posible. Bien hecho, ahorrará tiempo, porque no
tendrá que (a) discutir interminablemente y (b) rehacer las cosas al final.

Olvídese de $5,000 a 15,000. Si puede convencer a alguien para que traiga una
No tenemos el videocámara de su casa, solo necesitará gastar alrededor de $ 300 por cada ronda
dinero. de pruebas.

El hecho menos conocido sobre las pruebas de usabilidad es que es increíblemente

No tenemos la fácil de hacer. Sí, algunas personas lo harán mejor que otras, pero nunca he visto
experiencia. que una prueba de usabilidad no produzca resultados útiles, sin importar cuán mal
se haya realizado.

No necesitas uno. Todo lo que realmente necesita es una habitación con un

No tenemos un
escritorio, una computadora y dos sillas donde no lo interrumpan.
laboratorio de usabilidad.

Una de las mejores cosas de las pruebas de usabilidad es que las

No sabríamos cómo
lecciones importantes tienden a ser obvias para todos los que están mirando.
interpretar los
Los problemas graves son difíciles de pasar por alto.
resultados.

que fueron estadísticamente significativos. Era Ciencia. Cuesta $ 20,000 a $ 50,000 por disparo.
No sucedía muy a menudo.

Pero en 1989, Jakob Nielsen escribió un artículo titulado “Ingeniería de usabilidad

con descuento”1 y señaló que no tenía por qué ser así. no necesitabas un

1
Actas de la Tercera Conferencia Internacional sobre Interacción Humano-Computadora, Boston,
MA, septiembre de 1989.

[ 136 ]
 pruebas de usabilidad en 10 centavos al día

laboratorio de usabilidad, y podría lograr los mismos resultados con muchos menos usuarios.

La idea de las pruebas de usabilidad con descuento fue un gran paso adelante. El único problema es que
una década más tarde, la mayoría de las personas aún perciben las pruebas como algo importante, contratar
alguien para realizar una prueba todavía cuesta $ 5,000 a $ 15,000, y como resultado no
ocurrir casi con suficiente frecuencia.

Lo que les voy a recomendar en este capítulo es algo aún más

drástico: perdimos nuestro contrato de arrendamiento, pruebas de usabilidad de venta de cierre del negocio.

Voy a tratar de explicarte cómo hacer tus propias pruebas cuando no tienes dinero.
y sin tiempo No me malinterpreten: si puede permitirse el lujo de contratar a un profesional para que haga su
probando, ¡hazlo por todos los medios! Pero no lo haga si eso significa que hará menos pruebas.

PRUEBAS TRADICIONALES PRUEBAS DE ARRENDAMIENTO PERDIDO

NÚMERO DE Por lo general, ocho o más para justificar los Tres o cuatro
USUARIOS POR PRUEBA costos de instalación

RECLUTAMIENTO Seleccione cuidadosamente para que coincida con Agarra a algunas personas. Casi cualquiera que
ESFUERZO el público objetivo usos de la Web va a hacer.

DONDE PRUEBA Un laboratorio de usabilidad, con una observación. Cualquier oficina o sala de conferencias
habitación y un espejo unidireccional

QUE HACE Un profesional experimentado en usabilidad Cualquier ser humano razonablemente paciente
LA PRUEBA

VENTAJA Las pruebas tienen que ser programadas semanas en Las pruebas se pueden hacer casi en cualquier momento, con
PLANIFICACIÓN adelantado para reservar un laboratorio de usabilidad y poca programación anticipada
dar tiempo para el reclutamiento

PREPARACIÓN Redactar, discutir y revisar un protocolo de Decide lo que vas a mostrar

prueba

¿QUÉ/CUÁNDO A menos que tenga un gran presupuesto, ponga todo Ejecute pequeñas pruebas continuamente a lo largo
PRUEBAS? tus huevos en una canasta y prueba una vez el proceso de desarrollo
cuando el sitio está casi completo

COSTO $5,000 a $15,000 (o más) $300 (un estipendio de $50 a $100 para
cada usuario) o menos

LO QUE SUCEDE Un informe escrito de 20 páginas aparece como un El equipo de desarrollo (y los interesados
DESPUÉS semana después, el equipo de desarrollo partes interesadas) informan durante el almuerzo el

se reúne para decidir qué cambios hacer mismo día

[ 137 ]
Capítulo 9

¿Cuántos usuarios debe probar?

En la mayoría de los casos, tiendo a pensar que el número ideal de usuarios para cada ronda de
prueba es tres, o como máximo cuatro.

Es muy probable que los primeros tres usuarios encuentren casi todos los problemas más
significativos,2 y es mucho más importante hacer más rondas de pruebas que exprimir todo lo que
pueda de cada ronda. Probar solo a tres usuarios ayuda a garantizar que harás otra ronda pronto.3

Además, dado que habrá solucionado los problemas que descubrió en la primera ronda, en la
próxima ronda es probable que los tres usuarios descubran un nuevo conjunto de problemas, ya
que no se quedarán atascados en el primer conjunto de problemas.

Probar solo a tres o cuatro usuarios también permite evaluar y analizar en el mismo día, para que
pueda aprovechar lo que ha aprendido de inmediato. Además, cuando prueba más de cuatro a la
vez, generalmente termina con más notas de las que nadie tiene tiempo de procesar, muchas de
ellas sobre cosas que son realmente "liendres", lo que en realidad puede hacer que sea más difícil
ver el bosque para el árboles.

De hecho, esta es una de las razones por las que he dejado de generar informes escritos casi por
completo (a lo que me refiero como el "gran informe de la bocina") para mis revisiones de expertos
y para las pruebas de usabilidad. Finalmente me di cuenta de que, para la mayoría de los equipos
web, su capacidad para encontrar problemas supera con creces los recursos que tienen
disponibles para solucionarlos, por lo que es importante concentrarse en los problemas más
graves. En lugar de informes escritos, hoy en día informo mis hallazgos en una conferencia
telefónica con todo el equipo web, que puede durar una o dos horas. Al final de la llamada, todos
hemos acordado qué problemas son los más importantes para solucionar y cómo van a solucionarlos.

2
Consulte la columna de Alertbox de marzo de 2000 de Jakob Nielsen "Por qué solo necesita probar con
5 usuarios" en www.useit.com para una buena discusión del tema.

3 Si está contratando a alguien para que haga las pruebas por usted y el dinero no es un problema,
también podría probar a seis u ocho usuarios, ya que el costo adicional por usuario será
comparativamente bajo. Pero solo si eso no significa que hará menos rondas de pruebas.

[ 138 ]
 pruebas de usabilidad en 10 centavos al día

UNA PRUEBA CON 8 USUARIOS PROBLEMAS TOTALES

8 usuarios ENCONTRADO: 5

Ocho usuarios
pueden encontrar más
problemas en una sola prueba.

Pero los peores problemas

por lo general les
impedirán llegar lo
suficientemente lejos para
encontrar
algunos otros.

DOS PRUEBAS CON 3 USUARIOS PROBLEMAS TOTALES

ENCONTRADO: 9
Primera prueba: 3 usuarios Segunda prueba: 3 usuarios

Es posible que tres Pero en la

usuarios no encuentren segunda prueba,

tantos problemas en con el primer

una sola prueba. conjunto de

problemas
solucionados,
encontrarán
problemas que no
podrían haber visto en la primera prueba.

Reclutar libremente y calificar en una curva

Cuando las personas deciden probar, a menudo pasan mucho tiempo tratando de reclutar
usuarios que creen que reflejarán con precisión su público objetivo, por ejemplo, contadores
de entre 25 y 30 años de edad con uno a tres años de experiencia en computadoras que
recientemente compró zapatos caros.

El secreto mejor guardado de las pruebas de usabilidad es hasta qué punto no importa
mucho a quién pruebes.

Para la mayoría de los sitios, todo lo que realmente necesita son personas que hayan usado la Web lo suficiente como
para conocer los conceptos básicos.

[ 139 ]
Capítulo 9

Si puede permitirse contratar a alguien para que reclute a los participantes por usted y no
reducirá la cantidad de rondas de pruebas que realiza, entonces sea tan específico como
desee. Pero si encontrar al usuario ideal significa que vas a hacer menos pruebas, te
recomiendo un enfoque diferente:

Tome a cualquiera que pueda obtener (dentro de los límites) y califique en una curva.

En otras palabras, trate de encontrar usuarios que reflejen a su audiencia, pero no se

obsesione con eso. En su lugar, intente tener en cuenta las diferencias entre las personas
que evalúa y su audiencia. Estoy a favor de este enfoque por tres razones:

> Todos somos principiantes debajo de la piel. Rasca a un experto y a menudo encontrarás
a alguien que se las arregla para salir del paso, solo que en un nivel superior.

> Por lo general, no es una buena idea diseñar un sitio para que solo su público objetivo
audiencia puede usarlo. Si diseña un sitio para contadores usando una terminología
que cree que todos los contadores entenderán, lo que probablemente descubrirá es que
un pequeño pero no insignificante número de contadores no sabrá de lo que está
hablando. Y en la mayoría de los casos, debe dirigirse tanto a principiantes como a
expertos de todos modos, y si su abuela puede usarlo, un experto puede hacerlo.

> Los expertos rara vez se sienten insultados por algo que es lo suficientemente claro para
principiantes Todo el mundo aprecia la claridad. (La verdadera claridad, es decir, y no
solo algo que ha sido "simplificado").

Las excepciones:

> Si su sitio va a ser utilizado casi exclusivamente por un tipo de usuario y no es más difícil
reclutar de ese grupo, entonces hágalo. Por ejemplo, si su audiencia será casi en su
totalidad mujeres, entonces, por supuesto, pruebe solo mujeres.

> Si su audiencia está dividida entre grupos claramente definidos con

intereses y necesidades divergentes, debe evaluar a los usuarios de cada grupo al menos
una vez. Por ejemplo, si está construyendo un sitio universitario, para al menos una
ronda de pruebas desea reclutar a dos estudiantes, dos profesores, dos estudiantes de
último año de secundaria y dos administradores. Pero para las otras rondas, puedes
elegir cualquier combinación.

[ 140 ]
 pruebas de usabilidad en 10 centavos al día

> Si el uso de su sitio requiere un conocimiento específico del dominio (p. ej., una moneda
sitio de intercambio para profesionales de administración de dinero), entonces
necesita reclutar personas con ese conocimiento de dominio para al menos una ronda
de pruebas. Pero no lo haga para cada ronda si reducirá la cantidad de pruebas que realiza.

Cuando estás reclutando:

> Ofrezca un incentivo razonable. Los estipendios típicos para una sesión de prueba
de una hora van desde $ 50 para usuarios web "promedio" hasta varios cientos de
dólares para profesionales de un dominio específico, como cardiólogos, por
ejemplo. Me gusta ofrecerle a la gente un poco más que la tarifa actual, ya que (a)
deja en claro que valoro su opinión y (b) la gente tiende a llegar a tiempo, deseosa
de participar. Recuerde, incluso si la sesión dura solo 30 minutos, las personas
generalmente tienen que reservar otra hora para el tiempo de viaje. Además, prefiero
tener gente que sienta curiosidad por el proceso que gente que esté desesperada por el dinero.

> Mantenga la invitación simple. “Necesitamos que algunas personas visiten nuestro
sitio web y nos den su opinión. Es muy fácil y tomaría entre cuarenta y cinco minutos
y una hora. Y se le pagará $___ por su tiempo”.

> Evite hablar sobre el sitio (o la organización detrás del sitio)

antemano. Desea que su primer vistazo le diga si pueden descubrir qué es desde un
principio. (Por supuesto, si vienen a su oficina, tendrán una idea bastante clara de
quién es el sitio).

> No se avergüence de preguntar a amigos y vecinos. No tienes que sentir que estás
imponiendo si le pides a amigos o vecinos que participen. La mayoría de la gente
disfruta de la experiencia. Es divertido que alguien se tome en serio tu opinión y te
paguen por ello, ya menudo aprenden algo útil que no sabían sobre la Web o las
computadoras en general.

[ 141 ]
Capítulo 9

¿Dónde pruebas?
Todo lo que realmente necesita es una oficina o sala de conferencias con dos sillas, una PC o Mac
(con una conexión a Internet, si está probando un sitio en vivo), una videocámara, un largo
cable de video y un trípode.

“LABORATORIO” DE USABILIDAD DE LOST-OUR-LEASE

Entonces, ¿qué Bueno, estaré

Creo que haría ¡condenado!
harías a continuación?
Creo que haría clic aquí...
clic aquí...

El sujeto de prueba (A) se sienta frente al monitor de la computadora (B), Mientras tanto, el cable (F) lleva la señal de

mientras que el facilitador (C) le dice qué hacer y le hace preguntas. La videocámara a la TV (G) en una habitación cercana donde

videocámara (D) alimentada por una ardilla (E) se apunta al monitor para los miembros del equipo interesados (H) pueden observar.

registrar lo que ve el sujeto.

Puede usar el cable de video para pasar la señal de la videocámara a un televisor en

otra oficina, o incluso un cubículo, cerca para que todos en el equipo de desarrollo
puede ver sin molestar al usuario.

La videocámara necesita transmitir lo que ve el usuario (la pantalla de la computadora o el

diseños en papel, dependiendo de lo que esté probando) y lo que el usuario y el
dice el facilitador. En un laboratorio de usabilidad, a menudo verá una segunda cámara utilizada para mostrar el
observa la cara del usuario, pero esto no es necesario: el tono de voz del usuario suele
transmite frustración con bastante eficacia.

Puede comprar la videocámara, el televisor, el cable y el trípode por menos de $600. pero si tu
presupuesto no se extenderá tanto, probablemente pueda torcer el brazo de alguien para traer
una videocámara de casa en los días de prueba.

[ 142 ]
 pruebas de usabilidad en 10 centavos al día

No recomiendo usar la videocámara para grabar las sesiones. De hecho, yo solía recomendar
no hacer ninguna grabación de video, porque las cintas casi nunca se usaban y hacía que
todo el proceso fuera más complicado y costoso.

Sin embargo, en los últimos años, tres cosas han cambiado: las PC se han vuelto mucho
más rápidas, las unidades de disco se han vuelto mucho más grandes y el software de
grabación de pantalla ha mejorado drásticamente. Los grabadores de pantalla como
Camtasia4 se ejecutan en segundo plano en la PC de prueba y graban todo lo que sucede
en la pantalla y todo lo que dicen el usuario y el facilitador en un archivo de video que puede
reproducir en la PC. Resulta que estos archivos son muy valiosos porque son mucho más
fáciles de revisar rápidamente que las cintas de video y son muy fáciles de compartir a
través de una red. Le recomiendo que siempre use una grabadora de pantalla durante las pruebas de usuario.

¿Quién debe hacer las pruebas?

Casi cualquier persona puede facilitar una prueba de usabilidad; todo lo que realmente se necesita es el coraje

para intentarlo. Con un poco de práctica, la mayoría de las personas pueden hacerlo bastante bien.

Intente elegir a alguien que tienda a ser paciente, tranquilo, empático, que sepa escuchar y
que sea intrínsecamente justo. No elijas a alguien a quien describirías como "definitivamente
no una persona sociable" o "el chiflado de la oficina".

¿Quién debe observar?

Cualquiera que quiera. Es una buena idea animar a todos (miembros del equipo, personas
de marketing y desarrollo empresarial y cualquier otra parte interesada) a asistir.

Cuando las personas me preguntan cómo pueden convencer a la alta dirección de

que su organización debería invertir en usabilidad, mi recomendación más fuerte no
tiene nada que ver con cosas como "demostrar el rendimiento de

4 Hay varios grabadores de pantalla disponibles, pero soy partidario de Camtasia, fabricado
por TechSmith, la misma empresa que fabrica el programa de captura de pantalla SnagIt
(http://www.techsmith.com). Es muy confiable y tiene una serie de características
extremadamente útiles, y cuesta alrededor de $300. Por $ 1,000 más, tienen un producto
llamado Morae diseñado específicamente para capturar pruebas de usabilidad, algo así como
Camtasia con esteroides, que permite a los observadores ver la prueba en vivo en una PC en red, eliminando la neces

[ 143 ]
Capítulo 9

inversión." La táctica que creo que funciona mejor es lograr que la gerencia observe incluso una
prueba de usuario. Dígales que va a realizar algunas pruebas de usabilidad y que sería genial para
la moral del equipo web si pudieran asomar la cabeza durante unos minutos. En mi experiencia, los
ejecutivos a menudo quedan fascinados y se quedan más tiempo de lo que habían planeado, porque es
la primera vez que ven su sitio en acción y, a menudo, no es una imagen tan bonita como habían
imaginado.

¿Qué prueba y cuándo lo prueba?

La clave es comenzar a probar temprano (realmente nunca es demasiado temprano) y probar con
frecuencia, en cada fase del desarrollo web.

Incluso antes de comenzar a diseñar su sitio, debe probar sitios comparables.

Pueden ser competidores reales, o pueden ser sitios similares en estilo, organización o
características a lo que tiene en mente.

Úselos usted mismo, luego observe a una o dos personas usarlos y vea qué funciona y qué no.
Muchas personas pasan por alto este paso, pero es invaluable, como tener a alguien que construya
un prototipo de trabajo para usted de forma gratuita.

Si nunca ha realizado una prueba antes de probar sitios comparables, tendrá la oportunidad de
dominarlo sin presiones. También le dará la oportunidad de desarrollar una piel gruesa. Las primeras
veces que prueba su propio sitio, es difícil no tomarlo como algo personal cuando la gente no lo
entiende. Probar primero el sitio de otra persona lo ayudará a ver cómo reaccionan las personas a
los sitios y le dará la oportunidad de acostumbrarse.

Dado que los sitios comparables están "activos", puede realizar dos tipos de pruebas: pruebas "Get
it" y tareas clave.

> La prueba de "Consígalo" es justo lo que parece: muéstreles el sitio y vea si

entiéndalo: entienden el propósito del sitio, la propuesta de valor, cómo está organizado, cómo
funciona, etc.

> La prueba de tareas clave significa pedirle al usuario que haga algo y luego ver cómo
bien lo hacen.

[ 144 ]
 pruebas de usabilidad en 10 centavos al día

Como regla general, siempre obtendrá resultados más reveladores si puede encontrar
una manera de observar a los usuarios realizando tareas en las que tienen una mano para
elegir. Es mucho mejor, por ejemplo, decir "Encuentra un libro que quieras comprar, o un
libro que hayas comprado recientemente" que "Encuentra un libro de cocina por menos de
$14". Cuando las personas realizan tareas inventadas, no tienen una inversión emocional
en ellas y no pueden usar tanto de su conocimiento personal.

A medida que comienza a diseñar su propio sitio, nunca es demasiado pronto para comenzar
a mostrar sus ideas de diseño a los usuarios, comenzando con sus primeros bocetos. Los
diseñadores a menudo son reacios a mostrar el trabajo en curso, pero los usuarios pueden
sentirse más libres para comentar sobre algo que parece inacabado, ya que saben que no
ha invertido tanto en ello y aún está sujeto a cambios. Además, dado que no es un diseño
pulido, los usuarios no se distraerán con los detalles de implementación y podrán concentrarse
en la esencia y la redacción.

Más tarde, cuando comience a construir partes del sitio o prototipos funcionales, puede
comenzar a probar tareas clave en su propio sitio.

También recomiendo hacer lo que llamo pruebas de cubículo: cada vez que crea un nuevo
tipo de página, en particular formularios, debe imprimir la página y mostrársela a la persona
en el cubículo de al lado y ver si puede entenderla. Este tipo de prueba informal puede ser
muy eficiente y eliminar muchos problemas potenciales.

Una sesión de prueba de muestra

Aquí hay un extracto anotado de una sesión de prueba típica, pero imaginaria. El sitio es real,
pero desde entonces ha sido rediseñado. El nombre de la participante es Janice y tiene unos
25 años.

[ 145 ]
Capítulo 9

INTRODUCCIÓN

Hola, Janice. Mi nombre es Steve Krug y Toda esta primera sección

los guiaré a través de esta sesión. es el script que utilizo

cuando realizo pruebas.5

Probablemente ya lo sepas, pero déjame Siempre tengo una

copia frente a mí, y no
explicarte por qué te hemos pedido que vengas
dudo en leerla, pero creo
aquí hoy. Estamos probando un sitio web en el que es bueno improvisar
que estamos trabajando para poder ver cómo es que la un poco,
gente realincluso si eso
lo use.
significa cometer errores.
Quiero dejar claro de inmediato que estamos Cuando los usuarios ven
que me siento cómodo
probando el sitio, no usted. No puedes hacer
cometiendo errores, les
nada malo aquí. De hecho, este es probablemente ayuda a aliviar la presión.
el único lugar donde no tienes que preocuparte
por cometer errores.

Queremos escuchar exactamente lo que

piensas, así que no te preocupes si vas a herir
nuestros sentimientos.6 Queremos mejorarlo,
así que necesitamos saber honestamente lo que piensas.

A medida que avanzamos, les voy a pedir que

piensen en voz alta, que me digan lo que les
pasa por la cabeza. Esto nos ayudará.

5 Una copia del guión está disponible en mi sitio web (www.sensible.com) para que pueda
descargarlo y editarlo para su propio uso.
6
Si no trabajaste en la parte que se está evaluando, también puedes decir: “No te
preocupes por herir mis sentimientos. Yo no creé las páginas que van a ver”.

[ 146 ]
 pruebas de usabilidad en 10 centavos al día

Si tiene preguntas, solo pregunte. Es posible que Es importante mencionar esto,

porque parecerá descortés no
no pueda responderlas de inmediato, ya que
responder a sus preguntas
estamos interesados en cómo se comportan las sobre la marcha.
personas cuando no tienen a nadie sentado a su Tienes que dejar claro antes
de empezar que (a) no es
lado, pero intentaré responder cualquier pregunta
nada personal, y (b) intentarás
que aún tenga cuando hayamos terminado.
responderles al final si
todavía quieren saber.
Tenemos mucho que hacer, y voy a tratar de
mantenernos en movimiento, pero también intentaremos
asegurarnos de que sea divertido.

Es posible que haya notado la cámara. Con su En este punto, la mayoría de

la gente dirá algo como: "No voy
permiso, vamos a grabar la pantalla de la computadora
a terminar en los videos caseros
y lo que tiene que decir. La grabación se usará solo más divertidos de Estados

para ayudarnos a descubrir cómo mejorar el sitio, y Unidos, ¿verdad?"

nadie la verá excepto las personas que trabajan en el

proyecto. También me ayuda, porque no tengo que
tomar tantas notas. También hay algunas personas
mirando la pantalla en otra habitación.

Si quieres, te voy a pedir que firmes algo para Entrégueles el acuerdo de

divulgación y no divulgación
nosotros. Simplemente dice que tenemos su permiso
(si es necesario) para que lo
para grabarlo, pero que solo lo verán las personas firmen. Ambos deben ser lo

que trabajan en el proyecto. También dice que no más breves posible y estar
escritos en un inglés sencillo.7
hablarás con nadie sobre lo que te mostraremos hoy,
ya que aún no se ha hecho público.

¿Tiene algunas preguntas antes de que comencemos?

No, no lo creo.

7 Encontrará un formulario de consentimiento de grabación de muestra en mi sitio web.

[ 147 ]
Capítulo 9

PREGUNTAS DE ANTECEDENTES

Antes de ver el sitio, me gustaría hacerle algunas preguntas

Creo que es bueno
rápidas. Primero, ¿cuál es tu ocupación? comenzar con algunas
preguntas para tener una
idea de quiénes son y cómo usan Internet.
Les da la oportunidad de
Soy un enrutador.
relajarse un poco y le da la
oportunidad de demostrar
Nunca he oído hablar de eso antes. ¿Qué hace exactamente que va a escuchar con
atención lo que dicen, y
un enrutador? que no hay respuestas
correctas o incorrectas.

Poco. Tomo los pedidos a medida que llegan y los

No dudes en admitir tu
envío a la oficina correcta. ignorancia sobre
cualquier cosa. Tu papel
aquí no es parecer un
Bien. Ahora, ¿aproximadamente cuántas horas a la semana
experto, sino un buen
diría que pasa usando Internet, incluido el correo electrónico? oyente.

Observe que no está

No lo sé. Probablemente una hora al día en el trabajo
segura de cuánto tiempo
y quizás cuatro horas a la semana en casa. Sobre
pasa realmente en Internet.
todo eso es el fin de semana. Estoy demasiado La mayoría de la gente
cansada por la noche para molestarme. Pero a veces no lo es. No te preocupes.
Las respuestas precisas
me gusta jugar.
no son importantes aquí.
El punto principal aquí es
¿Cómo pasas ese tiempo? En un día típico, por ejemplo, solo hacer que hable y
piense sobre cómo usa
cuéntame qué haces, en el trabajo y en casa.
Internet y darle la
oportunidad de evaluar qué tipo de usuario es.

Bueno, en la oficina paso la mayor parte de mi

tiempo revisando el correo electrónico. Recibo

muchos correos electrónicos, y muchos de ellos

son basura, pero tengo que revisarlos de todos

modos. Y a veces tengo que investigar algo en el trabajo.

[ 148 ]
 pruebas de usabilidad en 10 centavos al día

¿Tiene algún sitio web favorito?

Yahoo, supongo. Me gusta Yahoo y lo uso

todo el tiempo. Y algo llamado Snakes.com,
porque tengo una serpiente como mascota.

¿En serio? ¿Qué tipo de serpiente? No tenga miedo de

desviarse y averiguar
un poco más sobre el
una pitón Mide alrededor de cuatro pies de largo, usuario, siempre y
pero debería llegar a medir ocho o nueve cuando cuando vuelva al tema pronto.
esté completamente desarrollado.

Guau. OK, ahora, finalmente, ¿has comprado algo

en Internet? ¿Cómo te sientes acerca de comprar
cosas en Internet?

He comprado algunas cosas recientemente.

No lo hice durante mucho tiempo, pero solo
porque no podía recibir las cosas. Fue difícil
conseguir las cosas entregadas, porque no
estoy en casa durante el día. Pero ahora uno
de mis vecinos está en casa todo el tiempo, así que puedo hacerlo.

¿Y qué has comprado?

Bueno, pedí un impermeable de LL Bean y

funcionó mucho mejor de lo que

Pensé que lo haría. En realidad, fue bastante fácil.

Vale genial. Hemos terminado con las preguntas, y

podemos empezar a mirar las cosas.

OK, eso creo.

[ 149 ]
Capítulo 9

REACCIONES A LA PÁGINA DE INICIO

Primero, solo voy a pedirle que mire esta
página y me diga qué cree que es, qué le llama
la atención y en qué cree que haría clic primero.
El navegador ha sido abierto,
pero minimizado. En este
punto, me estiro y hago clic
para maximizarlo.

Por ahora, no hagas clic en nada. Sólo dime en

qué harías clic.

Y de nuevo, en la medida de lo posible, nos

ayudará si puede intentar pensar en voz alta
para que sepamos lo que está pensando.

[ 150 ]
 pruebas de usabilidad en 10 centavos al día

Bueno, supongo que lo primero que noto es

En una prueba promedio,
que me gusta el color. Me gusta el tono es igual de probable que el

naranja y me gusta la pequeña imagen del sol próximo usuario diga que
odia este tono de naranja y
[en la parte superior de la página, en el logotipo de eLance].
que el dibujo es demasiado
simplista.

Vamos a ver. [Lee.] “El mercado global No se entusiasme demasiado

con las reacciones individuales
de servicios”. “Donde el mundo viene a a la estética del sitio.
hacer tu trabajo”.

No sé qué significa eso. No tengo

ocurrencia.

"Anima tu logotipo gratis". [Mirando la

sección Cool Stuff a la izquierda.] "Mercado de
gráficos 3D". “Comunidad eLance”. "Mercado
eLance".

[ 151 ]
Capítulo 9

Están pasando muchas cosas aquí. Pero no tengo

ni idea de qué es nada de eso.

Si tuvieras que adivinar, ¿cuál crees que podría ser? Este usuario está haciendo
un buen trabajo al pensar en
voz alta por su cuenta. Si no
fuera así, aquí es donde
Bueno, parece tener algo que ver con comprar y comenzaría a preguntarle:
"¿Qué estás pensando?"
vender... algo.

[Vuelve a mirar alrededor de la página.] Ahora

que miro la lista aquí abajo [la lista de categorías
al estilo de Yahoo en la mitad de la página], supongo
que tal vez deben ser servicios. Legales, financieros,
creativos... todos suenan como servicios.

Así que supongo que eso es lo que es.

Servicios de compra y venta. Tal vez como una
especie de páginas amarillas en línea.

ESTÁ BIEN. Ahora, si estuvieras en casa, ¿en qué harías clic

primero?

[ 152 ]
 pruebas de usabilidad en 10 centavos al día

Supongo que haría clic en eso de los gráficos en 3D.

Estoy interesado en gráficos 3D.

Antes de hacer clic en él, tengo una pregunta Hago esta pregunta porque
más. ¿Qué pasa con estas imágenes cerca de la parte los diseñadores del sitio
creen que la mayoría de los
superior de la página, las que tienen los números?
usuarios comenzarán
¿Qué hiciste con ellos? haciendo clic en las
imágenes de los cinco
pasos, y que al menos todos los verán.

Los noté, pero realmente no traté de descifrarlos.

Supongo que pensé que me estaban diciendo cuáles
serían los pasos del proceso.

¿Alguna razón por la que no les prestaste mucha

atención?

No. Supongo que aún no estaba listo para

comenzar el proceso. No sabía si quería usarlo
todavía. Solo quería mirar alrededor primero.

ESTÁ BIEN. Excelente.

[ 153 ]
Capítulo 9

PRUEBA DE UNA TAREA

Bien, ahora vamos a intentar otra cosa. Ahora le doy una tarea que
realizar para que podamos
¿Se te ocurre algo que te gustaría publicar como ver si puede usar el sitio para
el fin previsto.
proyecto si estuvieras usando este sitio?
objetivo.
Mmm. Déjame pensar. Creo que vi
"Mejoras para el hogar" allí en alguna
Siempre que sea posible,
parte. Estamos pensando en construir una es bueno dejar que el usuario

terraza. Tal vez publicaría eso. tenga algo que decir en la

elección de la tarea.

Entonces, si fueras a publicar el mazo como un

proyecto, ¿qué harías primero?

Supongo que haría clic en una de las

categorías aquí abajo. Creo que vi mejoras
en el hogar. [Mira.] Ahí está, debajo de
"Familia y hogar".

Entonces, ¿qué harías?

Bueno, haría clic en... [Vacila, mirando los

dos enlaces debajo de "Familia y hogar".]

[ 154 ]
 pruebas de usabilidad en 10 centavos al día

Bueno, ahora no estoy seguro de qué hacer. Resulta que está

equivocada. Precio fijo (en
No puedo hacer clic en Mejoras para el hogar, por
este caso) significa
lo que parece que tengo que hacer clic en
servicios disponibles por
"Solicitudes de propuesta" o "Precio fijo". Pero una tarifa fija por hora,
mientras que una RFP (o
no sé cuál es la diferencia.
Solicitud de propuesta) es
en realidad la opción que
Precio fijo que entiendo; me darán una generará cotizaciones. Este
cotización, y luego tienen que apegarse a ella. es el tipo de malentendido
Pero no estoy seguro de qué son las RFP. que a menudo sorprende a las personas que construyer

Bueno, ¿en cuál crees que harías clic? De ahora en adelante, solo
observo mientras intenta
Precio fijo, supongo. publicar un proyecto,
dejándola continuar hasta
¿Por qué no sigues adelante y lo haces? que (a) termine la tarea, (b)
se frustre mucho o (c) no
aprendamos nada nuevo
observándola. tratar de salir
del paso.

Le daría tres o cuatro

tareas más para hacer, que
no deberían tomar más de
45 minutos en total.

[ 155 ]
Capítulo 9

Revise los resultados de inmediato

Después de cada ronda de pruebas, debe hacer tiempo lo antes posible para que el
equipo de desarrollo revise las observaciones de todos y decida qué hacer a continuación.
Recomiendo encarecidamente que haga tres o cuatro pruebas en una mañana y luego
informe durante el almuerzo.

Estás haciendo dos cosas en esta reunión:

> Clasificación: revisar los problemas que la gente vio y decidir cuáles necesitan
ser arreglado

> Resolución de problemas: averiguar cómo solucionarlos.

Puede parecer que este sería un proceso difícil. Después de todo, estos son los mismos
miembros del equipo que han estado discutiendo sobre la forma correcta de hacer las cosas
todo el tiempo. Entonces, ¿qué va a hacer que esta sesión sea diferente?

Sólo esta:

Las cosas importantes que aprendes de las pruebas de

usabilidad generalmente tienen sentido. Tienden a ser
obvios para cualquiera que vea las sesiones.

Además, la experiencia de ver su obra a través de los ojos de otra persona a menudo
sugerirá soluciones completamente nuevas para los problemas, o le permitirá ver una idea
antigua bajo una nueva luz.

Y recuerde, este es un proceso cíclico, por lo que el equipo no tiene que ponerse de
acuerdo sobre la solución perfecta. Solo necesitas averiguar qué probar a continuación.

Problemas típicos
Estos son los tipos de problemas que verá con más frecuencia cuando realice la prueba:

> Los usuarios no tienen claro el concepto. Simplemente no lo entienden. Miran el sitio o una
página y no saben qué hacer con ello, o creen saberlo, pero se equivocan.

> Las palabras que están buscando no están ahí. Esto generalmente significa que o bien

[ 156 ]
 pruebas de usabilidad en 10 centavos al día

(a) las categorías que usó para organizar su contenido no son las que ellos
usarían, o (b) las categorías son lo que ellos esperan, pero simplemente no está
usando los nombres que ellos esperan.

> Hay demasiadas cosas pasando. A veces lo que están buscando es correcto
allí en la página, pero simplemente no lo están viendo. En este caso, debe (a) reducir
el ruido general en la página o (b) subir el volumen de las cosas que necesitan ver para
que "sobresalgan" más de la jerarquía visual.

Algunas pautas de triaje

Este es el mejor consejo que puedo darte para decidir qué arreglar y qué no.

> Ignorar los problemas de “kayak”. En cualquier prueba, es probable que vea
varios casos en los que los usuarios se extravían momentáneamente pero logran
volver a la normalidad casi de inmediato sin ninguna ayuda. Es como dar vueltas en
un kayak; siempre que el kayak se enderece lo suficientemente rápido, todo es parte
de la supuesta diversión. En términos de baloncesto, sin daño no hay falta.

Mientras (a) todos los que tienen el problema se den cuenta de que ya no van en
la dirección correcta rápidamente, y (b) logren recuperarse sin ayuda, y (c) no
parezca perturbarlos, usted puede ignorar el problema. En general, si la segunda
suposición del usuario sobre dónde encontrar las cosas siempre es correcta, eso es
suficiente.

Por supuesto, si hay una solución fácil y obvia que no rompa nada más, entonces
arréglala por todos los medios. Pero los problemas con el kayak normalmente no
sorprenden al equipo de desarrollo. Por lo general, están ahí debido a alguna
ambigüedad para la que no existe una solución simple. Por ejemplo, normalmente hay
al menos uno o dos elementos extraños que no encajan perfectamente en ninguna de
las categorías de nivel superior de un sitio. Entonces, la mitad de los usuarios pueden
buscar listas de películas en Estilos de vida primero, y la otra mitad las buscará primero
en Artes. Hagas lo que hagas, la mitad de ellos se equivocarán en su primera suposición,
pero todos lo entenderán en su segunda suposición, lo cual está bien.8

8
Puede que estés pensando "Bueno, ¿por qué no ponerlo en ambas categorías?" En general, creo
que es mejor que las cosas "vivan" en un solo lugar en una jerarquía, con un enlace cruzado
prominente de "ver también" en cualquier otro lugar donde la gente pueda buscarlas.

[ 157 ]
Capítulo 9

> Resiste el impulso de añadir cosas. Cuando es obvio en las pruebas que los usuarios
no están recibiendo algo, la primera reacción de la mayoría de las personas es agregar
algo, como una explicación o algunas instrucciones.

Muy a menudo, la solución correcta es quitar algo (o cosas) que oscurecen el

significado, en lugar de agregar otra distracción.

> Tome las solicitudes de "nuevas funciones" con pinzas. La gente suele decir: "Me gustaría
más si pudiera hacer x". Siempre vale la pena sospechar de estas solicitudes de nuevas
funciones. Si investiga más a fondo, a menudo resulta que ya tienen una fuente
perfectamente buena para x y no es probable que cambien; solo te están diciendo lo que
les gusta.

> Agarra la fruta madura. Lo principal que buscas en cada ronda

de las pruebas son las ganancias grandes y baratas. Estos se dividen en dos categorías:

> Golpeadores de cabeza. Estas son las sorpresas que aparecen

durante las pruebas en las que el problema y la solución eran
evidentes para todos en el momento en que vieron al primer
usuario intentar salir del paso. Estos son como dinero
encontrado, y debe arreglarlos de inmediato.

> Golpes baratos. También intente implementar cualquier

cambio que (a) requiera casi ningún esfuerzo, o (b) requiera
un poco de esfuerzo pero sea muy visible.

Y finalmente, hay un último consejo sobre “hacer cambios” que merece su propia sección:

No tires al bebé con los platos

Como cualquier buen diseño, las páginas web exitosas suelen ser un equilibrio delicado,
y es importante tener en cuenta que incluso un cambio menor puede tener un gran impacto.
A veces, el verdadero desafío no es solucionar los problemas que encuentra, sino
solucionarlos sin romper las piezas que ya funcionan.

Cada vez que realice un cambio, piense detenidamente qué más se verá afectado. En
particular, cuando haga que algo sea más prominente de lo que era, considere qué más
podría terminar siendo menos enfatizado como resultado.

[ 158 ]
 pruebas de usabilidad en 10 centavos al día

Una mañana al mes: eso es todo lo que pedimos

Idealmente, creo que todo equipo de desarrollo web debería dedicar una mañana al mes a realizar
pruebas de usabilidad.

En una mañana, puede evaluar a tres o cuatro usuarios y luego informar durante el almuerzo. Eso es todo.

Cuando salga del almuerzo, el equipo habrá decidido lo que va a arreglar y habrá terminado con
las pruebas del mes. Sin informes, sin reuniones interminables.

Hacerlo todo en una mañana también aumenta en gran medida las posibilidades de que la
mayoría de los miembros del equipo tengan tiempo para venir y ver al menos algunas de las
sesiones, lo cual es muy deseable.

Si va a intentar hacer algunas pruebas usted mismo, y espero que lo haga, encontrará más
consejos sobre cómo hacerlo en un capítulo llamado "Pruebas de usabilidad: la película" que se
encontraba en la primera edición de este libro. .9 Mi próximo libro tratará sobre las pruebas de
usabilidad del tipo "hágalo usted mismo", pero no quiero que espere hasta que empiece a probar.
Empezar ahora.

9 Puede descargar el capítulo de forma gratuita en http://www.sensible.com/secondedition.

[ 159 ]
capítulo

10
Usabilidad como
cortesía común
por qué su sitio web debe ser un mensch1

1
Mensch: una palabra yiddish de origen alemán que originalmente significaba “ser humano”. una persona de
integridad y honor; “un tipo de pie”; alguien que hace lo correcto.
 Sinceridad: esa es la parte difícil.
Si puedes fingir eso, el resto es fácil.
—viejo chiste sobre un agente de Hollywood

H ace algúnlatiempo,
sucedió, me
fecha de mi reservaron
vuelo un ser
también resultó vuelo a Denver.
la fecha límite paraComo
la lo
negociación colectiva entre la aerolínea en la que estaba reservado y uno de sus sindicatos.

Preocupado, hice lo que cualquiera haría: (a) Comenzar a revisar Google News
cada hora para ver si se había llegado a un acuerdo, y (b) visitar el sitio web de la
aerolínea para ver qué decían al respecto.

Me sorprendió descubrir que no solo no había nada sobre la inminente huelga en la

página de inicio de la aerolínea, sino que no había ni una palabra al respecto en
ningún lugar de todo el sitio. Yo busqué. Navegué. Revisé todas sus listas de
preguntas frecuentes. Nada más que negocios como siempre. "¿Huelga? ¿Qué huelga?

Ahora, en la mañana de una posible huelga de aerolíneas, debe saber que en

realidad solo hay una pregunta frecuente relacionada con el sitio, y la hacen cientos
de miles de personas que tienen boletos para la próxima semana: ¿Qué va a pasar?
¿a mi?

Podría haber esperado encontrar una lista completa de preguntas frecuentes dedicada al tema:

¿Realmente va a haber una huelga?

¿Cuál es el estado actual de las conversaciones?

Si hay una huelga, ¿qué pasará?

¿Cómo podré volver a reservar mi vuelo?
¿Qué harás para ayudarme?

Nada.

¿Qué iba a sacar de esto?

O (a) la aerolínea no tenía un procedimiento para actualizar su página de inicio en

circunstancias especiales, (b) por alguna razón legal o comercial no querían admitir
que podría haber una huelga, (c) no se le había ocurrido les dijo que la gente podría
estar interesada, o (d) simplemente no podían ser molestados.

[ 161 ]
Capítulo 10

No importa cuál haya sido la verdadera razón, hicieron un excelente trabajo al agotar
mi buena voluntad tanto hacia la aerolínea como hacia su sitio web. Su marca, que
gastan cientos de millones de dólares al año en pulir, definitivamente había perdido
parte de su brillo para mí.

La mayor parte de este libro se ha centrado en generar claridad en los sitios web:
asegurarse de que los usuarios puedan entender qué es lo que están viendo y cómo
usarlo, sin un esfuerzo excesivo. ¿Está claro para la gente? ¿Lo “entienden”?

Pero hay otro componente importante para la usabilidad web: hacer lo correcto:
ser considerado con el usuario. Además de "¿Está claro mi sitio?" también debe
preguntarse: "¿Mi sitio se comporta como un mensch?"

El depósito de buena voluntad

Siempre me ha resultado útil imaginar que cada vez que ingresamos a un sitio web,
comenzamos con una reserva de buena voluntad. Cada problema que encontramos
en el sitio baja el nivel de ese embalse. Aquí, por ejemplo, es cómo podría haber sido mi
visita al sitio de la aerolínea:

Entro al sitio. Miro alrededor de la No se menciona la huelga Hay una lista de cinco

página de inicio. en la página de inicio. enlaces a noticias en la

Mi buena voluntad es un poco
baja, porque no estoy feliz de
que sus negociaciones puedan
página de inicio, pero
Se siente bien organizado,
ninguno es relevante.
así que me relajo un poco. No me gusta el hecho de

causarme serios inconvenientes. Confío en que si la que se siente como un Hago clic en el enlace
información está aquí, podré negocio como siempre. Comunicados de prensa
encontrarla. en la parte inferior de la lista.

El último comunicado de prensa tiene cinco
días de antigüedad.
Voy a la página Acerca de nosotros.
Sin enlaces prometedores,
pero con muchas promociones,
lo cual es muy molesto.
¿Por qué están tratando de
venderme más boletos
cuando no estoy seguro de
que me lleven en avión
mañana?
Busco "huelga" y encuentro dos Miro sus listas de preguntas
comunicados de prensa sobre una frecuentes y luego me voy.
huelga hace un año y páginas de la
historia corporativa sobre una
huelga en la década de 1950.
En este punto, me gustaría irme,
pero ellos son la única fuente de
esta información.

[ 162 ]
 la usabilidad como cortesía común

El depósito es limitado, y si tratas a los usuarios lo suficientemente mal y lo agotas

hay una buena probabilidad de que se vayan. Pero irse no es lo único negativo posible
Salir; es posible que simplemente no estén tan ansiosos por usar su sitio en el futuro, o pueden
Piense menos en su organización.

Hay algunas cosas que vale la pena señalar sobre este depósito:

> Es idiosincrásico. Algunas personas tienen una gran

embalse, algunos pequeños. Algunas personas son más
sospechoso por naturaleza, o más malhumorado; otros son
inherentemente más paciente, confiado u optimista. los
El punto es que no se puede contar con una reserva muy grande.

> Es situacional. Si tengo mucha prisa, o acabo de tener una

mala experiencia en otro sitio, es posible que mi fondo de
comercio prescindible ya sea bajo cuando ingrese a su sitio,
incluso si naturalmente tengo una gran reserva.

> Puedes recargarlo. Incluso si has cometido errores

que han mermado mi buena voluntad, puedes
repóngalo haciendo cosas que me hagan sentir que usted
está velando por mis mejores intereses.

> A veces un solo error puede vaciarlo. Para

Me voy
ejemplo, simplemente abriendo un formulario de registro con
de aquí
toneladas de campos pueden ser suficientes para causar algunos

la reserva de la gente se desplome instantáneamente a cero.

[ 163 ]
Capítulo 10

Cosas que disminuyen la buena voluntad

Estas son algunas de las cosas que tienden a hacer que los usuarios sientan que
las personas que publican un sitio no tienen en mente sus mejores intereses:

> Ocultar información que quiero. Las cosas más comunes para ocultar son los números
de teléfono de atención al cliente, las tarifas de envío y los precios.

El objetivo de ocultar los números de teléfono de soporte es tratar de evitar que los
usuarios llamen, porque cada llamada cuesta dinero. El efecto habitual es disminuir la
buena voluntad y asegurarse de que se molestarán aún más cuando encuentren el
número y llamen. Por otro lado, si el número 800 está a la vista, tal vez incluso en todas
las páginas, de alguna manera saber que pueden llamar si lo desean suele ser suficiente
para que las personas busquen la información en el sitio por más tiempo, lo que aumenta
las posibilidades de que Resolverán el problema ellos mismos.

Algunos sitios ocultan la información de precios con la esperanza de que los usuarios
se involucren tanto en el proceso que se sientan involucrados en el momento en que
experimenten el "shock de la etiqueta". Mi ejemplo favorito son los sitios web para
acceso inalámbrico en lugares públicos como aeropuertos. Habiendo visto un mensaje
de "¡Acceso inalámbrico disponible!" firma y sabiendo que es gratis en algunos
aeropuertos, abre su computadora portátil, encuentra una señal e intenta conectarse. Pero
luego debe escanear, leer y hacer clic en tres páginas, siguiendo enlaces como "Acceso
inalámbrico" y "Haga clic aquí para conectarse" antes de llegar a una página que incluso
sugiere lo que podría costarle. Se siente como una vieja táctica de ventas telefónicas: si
pueden mantenerlo en línea el tiempo suficiente y seguir lanzando más de su discurso de
marketing, tal vez puedan convencerlo en el camino.

Castigándome por no hacer las cosas a tu manera. Nunca debería tener que pensar en
formatear datos: poner o no guiones en mi número de Seguro Social, espacios en mi
número de tarjeta de crédito o paréntesis en mi número de teléfono. Muchos sitios insisten
perversamente en que no haya espacios en los números de tarjetas de crédito, cuando los
espacios en realidad hacen que sea mucho más fácil obtener el número correcto. No me
hagas saltar por los aros solo porque no quieres escribir un poco de código.

[ 164 ]
 la usabilidad como cortesía común

Pidiéndome información que realmente no necesitas. La mayoría de los usuarios son muy
escéptico de las solicitudes de información personal, y le resulta molesto si un sitio
pide más de lo que se necesita para la tarea en cuestión.

Shucking y jiving mí. Fueron

siempre en busca de falsos
Derecha. Es por eso que su "inusualmente
sinceridad y falta de sinceridad alto volumen de llamadas” me
intenta convencerme de que tú mantiene en espera durante 20
minutos: porque mi llamada es
preocuparse por mí puede ser particularmente importante para usted, pero mi tiempo no lo es.

irritante. Piensa en lo que va

en tu cabeza cada vez que
escuche "Su llamada es importante para nosotros".

Poniendo chisporroteo en mi camino. Tener que esperar a través de una introducción Flash larga, o
hojear páginas infladas con fotos de marketing para sentirse bien lo deja claro
que no entiendes —ni te importa— que tengo prisa.

Su sitio parece amateur. Puede perder buena voluntad si su sitio se ve descuidado,

desorganizado o poco profesional, como si no se hubiera hecho ningún esfuerzo para hacerlo
presentable.

Tenga en cuenta que, si bien a las personas les encanta hacer comentarios sobre la apariencia de los sitios:
especialmente sobre si les gustan los colores, casi nadie se va a ir
un sitio simplemente porque no se ve muy bien. (Le digo a la gente que ignore todos los comentarios
que los usuarios hacen sobre los colores durante una prueba de usuario, a menos que tres de cada cuatro
la gente usa una palabra como "vomitar" para describir el esquema de color. Entonces vale la pena
repensando.2 )

Puede haber momentos en los que elija que su sitio haga algunas de estas cosas hostiles para el
usuario deliberadamente. A veces tiene sentido comercial no hacer
exactamente lo que el cliente quiere. Por ejemplo, las ventanas emergentes no invitadas casi siempre
molestar a la gente hasta cierto punto. Pero si sus estadísticas muestran que puede obtener el 10 por ciento
más ingresos mediante el uso de ventanas emergentes y cree que vale la pena molestar a sus usuarios,
puedes hacerlo. Es una decisión comercial. Solo asegúrese de hacerlo de una manera informada,
en lugar de inadvertidamente.

2
Esto realmente sucedió una vez durante una ronda de pruebas que facilité. Cambiamos el color.

[ 165 ]
Capítulo 10

Cosas que aumentan la buena voluntad

La buena noticia es que incluso si comete errores, es posible restaurar mi
buena voluntad haciendo cosas que me convenzan de que usted tiene mis intereses en el corazón.
La mayoría de estos son solo la otra cara de la otra lista:

Conozca las cosas principales que la gente quiere hacer en su sitio y haga
ellos obvio y fácil. Por lo general, no es difícil averiguar lo que la gente quiere hacer en un
sitio web determinado. Encuentro que incluso las personas que no están de acuerdo con
todo lo demás sobre el sitio de su organización casi siempre me da lo mismo
respuesta cuando les pregunto "¿Cuáles son las tres cosas principales que sus usuarios quieren
¿hacer?" El problema es que hacer esas cosas fáciles no siempre se convierte en lo mejor.
prioridad debe ser. (Si la mayoría de las personas visitan su sitio para solicitar un
hipoteca, nada debería interponerse en el camino para que sea muy fácil solicitar una hipoteca. )

Dime lo que quiero saber. Sea sincero acerca de cosas como los costos de envío,
tarifas diarias de estacionamiento del hotel, interrupciones del servicio, cualquier cosa que prefiera no tener

por adelantado sobre. Es posible que pierda puntos si sus tarifas de envío son más altas de
lo que me gustaría, pero a menudo ganará suficientes puntos por su franqueza y por facilitarme la
compensación de la diferencia.

Guárdame pasos donde puedas. Por ejemplo, en lugar de darme la

número de seguimiento de la compañía de envío para mi compra, poner un enlace en mi correo electrónico
recibo que abre su sitio y envía mi número de seguimiento cuando hago clic en él.
(Como de costumbre, Amazon fue el primer sitio en hacer esto por mí).

Poner esfuerzo en ello. Mi ejemplo favorito es el sitio de soporte técnico de HP,

donde parece que se ha invertido una enorme cantidad de trabajo en (a) generar
la información que necesito para resolver mis problemas, (b) asegurarme de que sea precisa
y útil, (c) presentándolo claramente, y (d) organizándolo para que pueda encontrarlo. He
tenía muchas impresoras HP, y en casi todos los casos en los que tuve un problema
He sido capaz de resolverlo por mi cuenta.

[ 166 ]
 la usabilidad como cortesía común

Sepa qué preguntas es probable que tenga y respóndalas. Frecuentemente

Las listas de preguntas hechas son enormemente valiosas, especialmente si

> Realmente son preguntas frecuentes, no argumentos de marketing disfrazados de preguntas frecuentes

(también conocido como QWWPWA: Preguntas que desearíamos que la gente hiciera).

> Los mantienes actualizados. El Servicio de Atención al Cliente y el Soporte Técnico pueden
fácilmente una lista de las cinco preguntas más frecuentes de esta semana.
Siempre pondría esta lista en la parte superior de la página de soporte de cualquier sitio.

> Son sinceros. A menudo, las personas buscan en las preguntas frecuentes la respuesta a
una pregunta que preferirías que no te hicieran. Sinceridad en estas situaciones
contribuye en gran medida a aumentar la buena voluntad.

Bríndeme comodidades como páginas fáciles de imprimir. Gente

Me encanta poder imprimir historias que abarcan varias páginas con un solo clic,
y CSS hace que sea relativamente fácil crear páginas fáciles de imprimir con poco
esfuerzo adicional. Eliminar los anuncios (la posibilidad de que un anuncio de banner tenga alguna
el impacto, además de ser molesto, es aún mayor cuando solo ocupa
espacio en el papel), pero no deje caer las ilustraciones, fotos y figuras.

Facilite la recuperación de los errores. Si realmente haces suficiente usuario

pruebas, podrá evitarme muchos errores antes de que sucedan.
Pero cuando la posibilidad de errores sea inevitable, proporcione siempre una respuesta elegante y
manera obvia para que me recupere. Ver Diseño Defensivo para la Web en mi
Lectura recomendada para obtener excelentes consejos sobre el tema.

En caso de duda, discúlpate. A veces no puede evitarlo: simplemente no tiene la capacidad

o los recursos para hacer lo que el usuario quiere (por ejemplo, su
El sistema de bibliotecas de la universidad requiere contraseñas separadas para cada uno de sus
bases de datos de catálogo, por lo que no puede dar a los usuarios el inicio de sesión único
que les gustaría). Si no puedes hacer lo que ellos quieren, al menos hazles saber que sabes que estás
incomodándolos.

[ 167 ]
capítulo

11
Accesibilidad,
Estilo en cascada
Sábanas, y tú
justo cuando crees que has terminado, un gato flota
por con tostadas con mantequilla atadas a su espalda
 Cuando se cae un gato, siempre cae de pie, y cuando se cae una tostada, siempre
cae con el lado untado con mantequilla hacia abajo. Propongo atar tostadas con mantequilla
a la espalda de un gato; los dos flotarán, girando, pulgadas sobre el suelo. Con una matriz
gigante de gatos con mantequilla, un monorraíl de alta velocidad podría conectar fácilmente Nueva Yor

—john frazee, en el diario de los resultados irreproducibles

PAGS
La gente a veces me pregunta: “¿Qué pasa con la accesibilidad? ¿No es eso parte de la usabilidad?

Y tienen razón, por supuesto. A menos que vaya a tomar la decisión general de que las personas
con discapacidades no forman parte de su audiencia, realmente no puede decir que su sitio es utilizable
a menos que sea accesible.

En este punto,1 todos los involucrados en el diseño web conocen al menos un poco acerca de la
accesibilidad web, aunque solo sea que hay algo especial en el número 508.2 Y, sin embargo, casi
todos los sitios a los que voy fallan mi prueba de accesibilidad de tres segundos, lo que aumenta la
tamaño del tipo.

Navegador
Comando
"Tamaño del texto"

Antes Después (sin diferencia)

¿Porqué es eso?

1 2005 dC

2
En caso de que haya estado literalmente escondido debajo de una roca durante los últimos años,
"508" se refiere a la Sección 508 de las Enmiendas a la Ley de Rehabilitación de 1988, que especifica los
estándares de accesibilidad para la tecnología de la información (como los sitios web) que deben cumplir
los cualquier vendedor que quiera hacer negocios con el gobierno de los Estados Unidos.

[ 169 ]
Capítulo 11

Lo que escuchan los desarrolladores y diseñadores

En la mayoría de las organizaciones, las personas que terminan siendo responsables
de hacer algo por la accesibilidad son las personas que realmente construyen la cosa:
los diseñadores y los desarrolladores.

Cuando intentan aprender sobre lo que deben hacer, cualquier libro o artículo que elijan
inevitablemente enumera el mismo conjunto de razones por las que necesitan que sus
sitios sean accesibles:

Tiene buen sentido comercial.

Las personas con discapacidad
usan la Web y tienen mucho dinero para Todos deberían tener las
gastar. mismas oportunidades y el
mismo acceso a la
información.
La mayoría de las
adaptaciones de
accesibilidad benefician
Es un enorme mercado
Sección 508: No es
a todos, no solo a las personas con discapacidades.
potencial. El 65% de la
solo una buena idea;
población tiene alguna discapacidad. Es la ley.

Hay mucho de verdad en todo esto. Desafortunadamente, también hay muchas cosas que es
poco probable que convenzan a los desarrolladores y diseñadores de 26 años de que
deberían estar "haciendo accesibilidad". Dos argumentos en particular tienden a hacerlos escépticos:

> Dado que su mundo se compone principalmente de jóvenes de 26 años sin discapacidad,
les resulta muy difícil creer que un gran porcentaje de la población realmente necesita
ayuda para acceder a la Web. Están dispuestos a descartarlo como el tipo de exageración
que hacen las personas cuando defienden una buena causa, pero también hay una
inclinación natural a pensar: "Si puedo hacer un agujero en uno de sus argumentos,
entonces". Tengo derecho a ser escéptico sobre el resto.

> También son escépticos sobre la idea de que hacer que las cosas sean más
accesibles beneficia a todos. Algunas adaptaciones, como el ejemplo clásico,
incluyen subtítulos ocultos, que a menudo resultan útiles para las personas que
pueden oír.3 Pero dado que este siempre parece ser el único ejemplo citado, se siente un poco como discut

3 Melanie y yo lo usamos a menudo cuando vemos películas británicas, por ejemplo.

[ 170 ]
 accesibilidad, hojas de estilo en cascada y usted

que el programa espacial valió la pena porque nos dio Tang.4 Es mucho más fácil para
los desarrolladores y diseñadores imaginar casos en los que es probable que las
adaptaciones de accesibilidad empeoren las cosas para "todos los demás".

Lo peor de este escepticismo es que oscurece el hecho de que en realidad solo hay una
razón importante:

> Es lo correcto.

Y no solo lo correcto; es profundamente lo que hay que hacer, porque el único argumento a
favor de la accesibilidad que no se hace con la suficiente frecuencia es lo extraordinariamente
mejor que hace la vida de algunas personas. Personalmente, no creo que nadie necesite más
que este ejemplo: las personas ciegas con acceso a una computadora ahora pueden leer el
periódico todos los días por su cuenta. Imagina eso.

¿Cuántas oportunidades tenemos de mejorar drásticamente la vida de las personas

simplemente haciendo un poco mejor nuestro trabajo?

Y para aquellos de ustedes que no encuentren convincente este argumento, tengan en

cuenta que tarde o temprano habrá un palo legislativo. Cuenta con eso.

Lo que los diseñadores y desarrolladores temen

A medida que aprenden más sobre la accesibilidad, tienden a surgir dos temores:

> Más trabajo. Para los desarrolladores en particular, la accesibilidad puede parecer solo una
cosa nueva más complicada para encajar en un cronograma de proyecto ya imposible.
En el peor de los casos, se transmite como una "iniciativa" desde arriba, completa con
informes, revisiones y reuniones de grupos de trabajo que consumen mucho tiempo.

> Diseño comprometido. Lo que más temen los diseñadores es lo que llamo gatos con
mantequilla: lugares donde el buen diseño para las personas con discapacidad y el buen
diseño para todos los demás van a estar en oposición directa. Les preocupa verse obligados
a diseñar sitios que sean menos atractivos y menos útiles para la mayoría de su audiencia.

4 Una bebida de desayuno en polvo con sabor a naranja, inventada para los astronautas (ver también: congelar
comida seca).

[ 171 ]
Capítulo 11

En un mundo ideal, la accesibilidad funcionaría como una señal que vi en la

parte trasera de un taxi de Chicago. Al principio parecía una señal ordinaria.
Pero algo en la forma en que captó la luz me hizo mirar más de cerca, y cuando
lo hice, me di cuenta de que era ingenioso.

El letrero se cubrió con una fina pieza de plexiglás y el mensaje se grabó en

relieve en Braille sobre el plexiglás. Por lo general, tanto la letra impresa como el
Braille habrían sido la mitad de grandes para que ambos pudieran caber en el
letrero, pero con este diseño, cada audiencia obtuvo la mejor experiencia posible. Fue una solución e

Sin embargo, creo que para algunos diseñadores, la accesibilidad evoca una imagen
parecida al cuento de Vonnegut en el que el gobierno crea igualdad al perjudicar a
todos.5

La solución real, como siempre, está

a unos años de distancia
Cuando las personas comienzan a leer sobre accesibilidad, generalmente se
encuentran con un consejo que suena muy prometedor:

5 En “Harrison Bergeron”, el personaje principal, cuya inteligencia está “muy por encima de lo normal”, es
obligado por ley a usar una "radio para discapacitados mentales" en su oído que emite varios ruidos
fuertes cada 20 segundos "para evitar que personas como George se aprovechen injustamente de sus cerebros".

[ 172 ]
 accesibilidad, hojas de estilo en cascada y usted

¡Excelente! Un hechizo

Usa un validador como Bobby comprobador de

para asegurarse de que accesibilidad.

su sitio cumpla con los

Directrices WCAG.

El problema es que, cuando ejecutan su sitio a través de un validador, resulta ser

más como un corrector gramatical que un corrector ortográfico. Sí, encuentra algo obvio.
errores y descuidos que son fáciles de corregir, como falta de texto alternativo.6 Pero también
inevitablemente aparece una serie de advertencias vagas de que puede estar haciendo algo
mal, y una larga lista de recomendaciones de cosas para que compruebes cuál
admite que pueden no ser problemas en absoluto.

Esto puede ser muy desalentador para las personas que recién están aprendiendo sobre
accesibilidad, porque las largas listas y los consejos ambiguos sugieren que hay mucho que
aprender.

Y la verdad es que es mucho más difícil de lo que debería ser hacer que un sitio sea accesible.

Después de todo, la mayoría de los diseñadores y desarrolladores no se volverán accesibles.

expertos Si la accesibilidad web va a volverse ubicua, tendrá que ser
más fácil de hacer Los lectores de pantalla y otras tecnologías adaptativas tienen que volverse más inteligentes,
las herramientas para construir sitios (como Macromedia Dreamweaver) tienen que hacerlo más fácil
para codificar correctamente para la accesibilidad, y las pautas deben mejorarse.

6 El texto alternativo proporciona una descripción de texto de una imagen ("Imagen de dos hombres en un velero", por ejemplo).

ejemplo), que es fundamental para las personas que utilizan lectores de pantalla o navegan con las imágenes desactivadas.

[ 173 ]
Capítulo 11

El progreso real requerirá mejoras en cuatro frentes diferentes, motivados

por cosas como el incentivo de las ganancias, la amenaza de juicios y legislación, y el deseo
para soportar dispositivos móviles, que comparten algunos problemas con la accesibilidad.

Uso Adaptativo más inteligente

Uso
Adaptativo más inteligente
universal de CSS tecnologías universal de CSS
tecnologías

Mejor
estándares
y mejores
Mejor
prácticas
estándares Mejor
Mejores ejemplos
y mejores desarrollador
herramientas para
instrumentos
508
prácticas desarrolladores

ejemplos

$$$
TELÉFONOS CELULARES Y PDAS

Las cinco cosas que puedes hacer ahora mismo

El hecho de que no sea un mundo perfecto en este momento no nos deja fuera de juego.
gancho, sin embargo.

Incluso con la tecnología y los estándares actuales, es posible hacer que cualquier sitio sea muy
accesible sin mucho esfuerzo centrándose en algunas cosas que tendrán
el mayor impacto. Y no implican acercarse a un gato con mantequilla.

#1. Solucionar los problemas de usabilidad

que confunden a todos
Una de las cosas que me molestan del argumento de Tang ("hacer que los sitios
accesibles los hace más utilizables para todos”) es que oscurece el hecho de que
lo contrario en realidad es cierto: hacer que los sitios sean más utilizables para "el resto de nosotros" es uno de
las formas más efectivas de hacerlos más efectivos para las personas con discapacidad.

[ 174 ]
 accesibilidad, hojas de estilo en cascada y usted

Si algo confunde a la mayoría de las personas que usan su sitio, es casi seguro que
confundirá a los usuarios que tienen problemas de accesibilidad. (No se vuelven
notablemente más inteligentes de repente porque tienen una discapacidad). Y es muy
probable que les resulte más difícil recuperarse de su confusión.

Por ejemplo, piense en la última vez que tuvo problemas para usar un sitio web (encontró un
mensaje de error confuso cuando envió un formulario, por ejemplo). Ahora imagina intentar
resolver ese problema sin poder ver la página.

Lo mejor que puede hacer para mejorar la accesibilidad de su sitio es probarlo con frecuencia y
suavizar continuamente las partes que confunden a todos. De hecho, si no hace esto primero, no
importa cuán rigurosamente aplique las pautas de accesibilidad, las personas con discapacidades
no podrán usarla. Si su sitio no está claro para empezar, hacerlo compatible con Bobby es como
[inserte aquí su metáfora favorita de poner lápiz labial en un cerdo].

#2. Leer un artículo

Como espero que ya hayas visto, la mejor manera de aprender cómo hacer que algo sea más
usable es observar a las personas que realmente intentan usarlo. Pero la mayoría de nosotros no
tenemos experiencia en el uso de tecnología adaptativa, y mucho menos en ver cómo otras personas la usan.

Si tuviera el tiempo y la motivación, le recomiendo localizar a uno o dos usuarios ciegos de la Web
y pasar unas horas con ellos observando cómo utilizan realmente su software lector de pantalla.

Afortunadamente, alguien ha hecho el trabajo pesado por ti. Mary Theofanos y Janice (Ginny)
Redish observaron a 16 usuarios ciegos que usaban lectores de pantalla para realizar una serie
de tareas en una variedad de sitios e informaron lo que observaron en un artículo titulado
"Pautas para sitios web accesibles y utilizables: observación de usuarios que trabajan con la
pantalla". Lectores.”7

Al igual que con cualquier tipo de prueba de usuario, produjo información invaluable. He aquí
un ejemplo del tipo de cosas que aprendieron:

7 Publicado en la Revista ACM, Interacciones (noviembre-diciembre 2003). Con

permiso de ACM, Ginny lo ha puesto a disposición para uso personal en http://
redish.net/content/papers/interactions.html .

[ 175 ]
Capítulo 11

Los usuarios de lectores de pantalla escanean con sus oídos. La mayoría de los usuarios
ciegos son tan impacientes como la mayoría de los usuarios videntes. Quieren obtener la
información que necesitan lo más rápido posible. No escuchan cada palabra de la página, al
igual que los usuarios videntes no leen cada palabra. Ellos "exploran con sus oídos",
escuchando lo suficiente para decidir si escuchar más. Muchos configuran la voz para
hablar a un ritmo asombrosamente rápido.

Escuchan las primeras palabras de un enlace o línea de texto. Si no parece relevante,

pasan rápidamente al siguiente enlace, a la siguiente línea, al siguiente encabezado,
al siguiente párrafo. Mientras que un usuario vidente puede encontrar una palabra
clave escaneando toda la página, un usuario invidente puede no escuchar esa palabra
clave si no está al principio de un enlace o una línea de texto.

Le recomiendo que lea este artículo antes de leer cualquier otra cosa sobre accesibilidad. En 20
minutos, le dará una apreciación de los problemas que está tratando de resolver que no obtendrá
de ningún otro artículo o libro.

#3. Lee un libro

Después de leer el artículo de Ginny y Mary, estará listo para pasar un día (o un fin de
semana) leyendo un libro sobre accesibilidad web. Hay varios buenos…

> Creación de sitios web accesibles por Joe Clark

> Construcción de sitios web accesibles por Jim Thatcher et al.

> Máxima accesibilidad: hacer que su sitio web sea más utilizable para todos por John
Slatin y Sharron Rush

> Un CD-ROM llamado The WebAIM Guide to Web Accessibility Techniques and Concepts

…y estoy seguro de que habrá más en un futuro cercano.8

Estos libros cubren mucho terreno, así que no te preocupes por absorberlo todo. Por ahora,
solo necesita tener una idea general.

8
Mantendré una lista actualizada de recomendaciones en mi sitio web.

[ 176 ]
 accesibilidad, hojas de estilo en cascada y usted

#4. Empezar a usar hojas de estilo en cascada

Primero, un poco de historia web.

Al principio, todo era texto. Cuando llegaron los primeros navegadores visuales, los
diseñadores descubrieron que, a diferencia de la autoedición, que les daba el control de todo,
HTML, que en realidad solo tenía la intención de mostrar trabajos de investigación, casi no les
daba control sobre nada. Los comandos para dar estilo al texto eran toscos y era muy difícil colocar
las cosas con precisión en una página. E incluso si pudiera, las páginas a menudo se veían
completamente diferentes cuando se veían en diferentes navegadores.

Para recuperar algo de control, los diseñadores

y desarrolladores comenzaron a usar tablas para
controlar el diseño. Durante años, la única forma
de controlar la posición de las cosas en una
página web era ponerlas en tablas... y tablas
dentro de tablas. La mayoría de las páginas
terminaron pareciendo una serie de muñecas
rusas anidadas.

Desafortunadamente, esto no funcionó bien con los Advanced Common Sense no

puede pagar un consultor aquí
primeros lectores de pantalla, que tendían a leer
es el hogar en línea de la web
servilmente línea por línea de izquierda a derecha, así: todo lo que sé sobre la usabilidad web...

También comenzaron a usar varios comandos HTML en formas en las que no debían usarse, para
tratar de tener más control sobre el estilo del texto. Era un mundo desordenado de hacks, unidos
con goma de mascar.

[ 177 ]
Capítulo 11

Afortunadamente, a partir de 1998, algunas personas muy decididas se hartaron de este estado
de cosas y decidieron convencer a los fabricantes de navegadores para que respaldaran los
estándares web que brindarían a los diseñadores un objetivo consistente. Un grupo de
diseñadores que se hacían llamar The Web Standards Project empleó una forma brillante de
resistencia no violenta: simplemente dejaron de hacer que sus propios sitios fueran compatibles
con navegadores que no admitían estándares como CSS y animaron a otros a hacer lo mismo.

Varios años después, CSS Zen Garden9 (una sola página HTML que se veía completamente
diferente dependiendo de cuál de las muchas hojas de estilo aportadas por el diseñador se le
aplicó) demostró que se podían crear diseños hermosos y sofisticados con CSS.

Las hojas de estilo en cascada ahora son tan compatibles con la mayoría de los
navegadores que no tiene ningún sentido crear un sitio sin ellas, porque las ventajas son
enorme:

> Infinitamente mayor control de formato.

> Flexibilidad. Un solo cambio en una hoja de estilo puede cambiar la apariencia de un
todo el sitio o generar automáticamente variaciones útiles como páginas para imprimir.

> Coherencia entre navegadores. Todavía se requieren soluciones alternativas y trucos para
garantizar que su CSS funcione en todos los navegadores, pero estos desaparecerán a medida
que los fabricantes de navegadores continúen mejorando su compatibilidad con CSS.

E implementar CSS le facilitará hacer dos cosas que mejorarán en gran medida la
accesibilidad de su sitio:

> Serialice su contenido. A diferencia del diseño basado en tablas, con CSS puede poner su
contenido en orden secuencial en el archivo de origen, que es como lo escuchará un usuario
de lector de pantalla, y aun así colocar las cosas donde desee en la página.

> Permita que su texto cambie de tamaño. CSS facilita cambiar el tamaño de su texto, lo
que es de gran ayuda para los usuarios con baja visión (y las personas con edad suficiente
para necesitar lentes bifocales).

9 www.csszengarden.com. Consulte The Zen of CSS Design de Dave Shea y Molly Holzschlag (New

Riders, 2005) para obtener una excelente descripción del proyecto.

[ 178 ]
 accesibilidad, hojas de estilo en cascada y usted

Probablemente, la forma más rápida de aprender CSS es pedirle a alguien que se especialice
en él que haga un "marcado" por usted (recodificando algunas de las plantillas de página de
su sitio para usar CSS) y aprenda viendo cómo lo hacen. Cuando esté listo, también hay una
serie de buenos libros sobre CSS, especialmente los de Eric Meyer.

#5. Ve por la fruta madura

Ahora está listo para hacer lo que la mayoría de la gente considera accesibilidad
web: implementar cambios específicos en su código HTML.

A partir de ahora, estas son probablemente las cosas más importantes que hacer:

> Agregue texto alternativo apropiado a cada imagen. Agregue un atributo alt para las
imágenes que los lectores de pantalla deben ignorar y agregue texto descriptivo y útil
para el resto. Todos los libros de accesibilidad Web tienen muy buenas explicaciones de cómo hacer esto.

> Haz que tus formularios funcionen con lectores de pantalla. Esto se reduce en gran
medida al uso del elemento de etiqueta HTML para asociar los campos con sus
avisos, para que las personas sepan lo que se supone que deben ingresar.

> Cree un enlace "Pasar al contenido principal" al comienzo de cada página.

Imagine tener que pasar 20 segundos (o uno o dos minutos) escuchando la navegación
global en la parte superior de cada página antes de poder ver el contenido, y entenderá
por qué esto es importante.

> Haga que todo el contenido sea accesible por teclado. Recuerde, no todos pueden usar
un ratón.

> No uses JavaScript sin una buena razón. Algunas tecnologías adaptativas
no lo soporte muy bien todavía.

> Utilice mapas de imagen del lado del cliente (no del lado del servidor). Las etiquetas alt no funcionan

con mapas de imágenes del lado del servidor.

Eso es todo. Probablemente aprenderá a hacer mucho más a medida que avanza, pero
incluso si solo hace lo que he cubierto aquí, estará haciendo un trabajo bastante bueno.

Con suerte, en cinco años podré simplemente eliminar este capítulo y usar el espacio
para otra cosa porque las herramientas para desarrolladores, los navegadores, los
lectores de pantalla y las pautas habrán madurado y se integrarán hasta el punto en que las
personas puedan crear sitios accesibles. sin pensarlo.

[ 179 ]
capítulo

12
¡Ayuda! mi
jefe quiere que yo
_____.
cuando las malas decisiones de diseño le suceden a la gente buena
 Temer. Ten mucho miedo.
—geena davis en la mosca

En
uando imparto mis talleres de usabilidad web,
He notado que muchas de las preguntas que la gente hace toman
esta forma:

¡Ayuda! Mi jefe (o “Mi gerente de marketing” o “Nuestro

CEO”) quiere que yo ______________.

Por ejemplo, "Mi gerente de marketing insiste en que hagamos que las personas brinden su
dirección de correo postal antes de que les enviemos nuestro boletín electrónico! ¿Qué puedo hacer?"

Dos de estas preguntas sobre los desastres de usabilidad impuestos desde arriba suelen surgir
arriba una y otra vez:

> Mi jefe quiere que le pidamos a los usuarios más información personal de la que
realmente necesito.

> Mi jefe quiere que nuestro sitio tenga más "pizazz" (léase: páginas de inicio, animación,
música, etc., etc.).

He llegado al punto en que cuando la gente me hace cualquiera de estas preguntas,

a menudo dicen, medio en broma, que si sirve de ayuda, estaré encantado de escribirle un
correo electrónico a su jefe (de un "experto" en usabilidad, con un libro, nada menos) explicando por qué esto es un
muy mala idea

Aquí están los correos electrónicos. Siéntete libre de usarlos como mejor te parezca.

[ 181 ]
capitulo 12

Los peligros de pedir demasiados datos personales De: Steve Krug

(skrug@sensible.com)

Para:[sujefe@suempleador.com]

En mi reciente taller de usabilidad web en [nombre de la ciudad], su [diseñador|desarrollador| web|

gerente][su nombre] me pidió consejo sobre cuánta información personal debe solicitar en un
formulario de registro. Me ofrecí a enviarte un correo electrónico recapitulando mi consejo para él.

Cualquiera que use la Web se ha topado con esto muchas veces: decide suscribirse a un boletín
informativo por correo electrónico (o solicitar una muestra gratuita, registrar un producto o crear una cuenta).
Cualquier cosa que implique que brindes información sobre ti y obtengas algo a cambio.

Hace clic en "Suscribirse" y aparece un formulario. Parece más largo de lo que esperaba y
rápidamente descubre por qué. Sin ninguna buena razón, se le pide que proporcione su dirección
postal. Y tu numero de telefono. Y tu ocupación. De repente, una tarea rápida se ha convertido en un
proyecto.

Los profesionales de la usabilidad tienen un término técnico para esta práctica. Es lo que llamamos
“una muy mala idea”.

Puedo entender que es tentador tratar de obtener la mayor cantidad de datos personales posible,
dados los usos que se le pueden dar. El problema es que las personas que completan cualquier tipo
de formulario en la Web siempre se preguntan: “¿Por qué me piden esta información? ¿Realmente
lo necesitan para darme lo que quiero? Si la respuesta es no, entonces la siguiente pregunta es:
"¿Entonces para qué lo quieren?"

En la mente de la mayoría de las personas, solo hay dos explicaciones posibles: (a) no tiene ni idea de
la Web que no sabe que encuentran esto ofensivo, o (b) lo sabe, pero desea desesperadamente la
información. para algún otro propósito, y no te importa ofenderlos para conseguirlo.

Como resultado, hay tres desventajas serias de pedir más de lo que necesita:

- Tiende a evitar que obtengas datos reales. Tan pronto como las personas se dan cuenta de que
estás pidiendo más de lo que necesitas, se sienten completamente justificadas para mentirte. A
menudo les digo a mis clientes que las direcciones de correo electrónico son como la heroína para
la gente de marketing: tan adictivas que no les parece extraño que el 10% de sus suscriptores se
llamen "Barney Rubble".

- Obtiene menos formularios completados. La fórmula es simple: cuantos menos datos solicite, más
envíos recibirá. La gente tiende a tener mucha prisa en la Web, y si el formulario parece un poco
más largo de lo que esperan, muchos simplemente no se molestarán.

- Te hace quedar mal. Las personas que realmente quieren su boletín pueden saltar

[ 182 ]
 ¡ayuda! mi jefe quiere que yo _______.

lo que sea que tengan que hacer, pero no se equivoquen: disminuirá su impresión de usted
mientras lo hacen. Por otro lado, si solo solicita la información que necesita, ha establecido
una relación con ellos y puede obtener más datos más adelante en intercambios posteriores.

Aquí hay tres pautas:

- Solo hazme proporcionar lo que necesitas para completar esta transacción.

- Tampoco pidas mucha información opcional . Solo la vista de muchos campos es

deprimente. Si solicita menos elementos opcionales, obtendrá más respuestas.

- Muéstrame el valor que voy a recibir a cambio de mi información. Dime exactamente

qué obtendré al registrarme, muéstrame una muestra de la newsletter, etc.

Espero que esto sea útil. Por cierto, basándome en la breve oportunidad que tuve de
conversar con [tu nombre], [él|ella] parece ser un excelente [diseñador|desarrollador|gerente].
Tienes suerte de tenerlo en tu equipo.

Steve Krug
Autor de ¡No me hagas pensar! Un enfoque de sentido común para la usabilidad web

Agregar "chisporroteo" a su sitio web De: Steve

Krug (skrug@sensible.com)

Para:[sujefe@suempleador.com]

Su [diseñador|desarrollador|gerente] web, [su nombre], asistió recientemente a uno de mis

talleres de usabilidad web y me pidió consejo sobre sus planes para hacer que su sitio sea
[más interesante visualmente|más atractivo] agregando [una página de bienvenida|algunos
animacion|fotos grandes|musica ambiental].

Le dije que estaría feliz de compartir algunos de los consejos que doy a mis propios clientes
ejecutivos cuando hacen solicitudes similares a sus equipos web.

Desafortunadamente, existe un problema inherente con la forma en que los ejecutivos se

involucran en el diseño del sitio Web. Dado que el sitio es crucial para su organización,
naturalmente se solicita su opinión. Pero debido a la forma en que se desarrollan los sitios,
todo lo que se le pide que comente es la apariencia del sitio, en base a algunos diseños
preliminares. Dado lo que tiene que hacer, lo único que puede juzgar razonablemente es "¿Me
parece bien?" y "¿Crea una buena impresión?" Como resultado, los directores ejecutivos casi
siempre presionan por algo que sea más atractivo visualmente, algo con más "chisporroteo" o "chisporroteo".

[ 183 ]
capitulo 12

El problema es que, excepto en algunos casos específicos, a los que me referiré en un minuto, los
sitios web realmente no necesitan mucha chispa. Sí, las apariencias cuentan. Sí, tiene que verse
presentable, profesional y atractivo. Pero "llamativo"? "Atractivo"? Casi nunca.

La mayor parte del tiempo en la Web, la gente no quiere participar; solo quieren hacer algo , y
los intentos de involucrarlos que interfieren con su misión actual se perciben como molestos,
despistados y el peor tipo de charlatanería. Y los intentos de agregar chisporroteo casi siempre se
interponen en su camino. No me molestaré en catalogar todos los problemas con todas las diferentes
formas de chisporroteo: páginas de bienvenida que te indican que tienes varios años de retraso.
Fotos grandes que tardan mucho en cargarse (¿alguna vez has usado tu propio sitio desde una
habitación de hotel?) y dejan menos espacio en la página para lo que la gente está buscando. Y
música y animaciones que distraen y que la mayoría de la gente no puede soportar.

A menos que su sitio brinde a las personas la información que desean y les facilite hacer lo que
usted desea que hagan, lo principal que está haciendo es anunciar que no tiene ni idea de la Web
o que se preocupa más por su imagen que por usted. a cerca de ellos.

Por supuesto que hay excepciones. Hay algunos sitios en los que chisporrotea tiene sentido,
sitios en los que lo que vendes es chisporroteo: sitios de entretenimiento (para música, películas,
etc.), sitios de marcas puras (para un cereal de desayuno, por ejemplo) y sitios de cartera para
desarrolladores web. . Pero si su sitio no está en esa lista, la mayor parte del chisporroteo será
contraproducente.

La moraleja es que puedes hacer todo lo que quieras para que tu sitio se vea bien, pero solo si no
es a expensas de que funcione bien. Y la mayor parte del chisporroteo se interpone en el camino
para que funcione bien.

Piense en su propia experiencia: los sitios que disfruta usar. ¿Es porque son "llamativos" o
porque tienen el contenido que quieres o necesitas? ¿Puedes nombrar un sitio que tenga contenido
que te resulte interesante o útil y que no uses porque no es lo suficientemente interesante
visualmente?

Espero que esto ayude.

Por cierto, tienes suerte de tener a [tu nombre] en tu equipo web. [Él/ella realmente sabe lo
que hace].

Steve Krug
Autor de ¡No me hagas pensar! Un enfoque de sentido común para la usabilidad web

[ 184 ]
 ¡ayuda! mi jefe quiere que yo _______.

Nunca digas nunca

Solo una advertencia: tenga en cuenta que no estoy diciendo que nunca deba
hacer ninguna de estas cosas. Si hay una cosa que aprendes al trabajar en muchos
sitios web diferentes, es que casi cualquier idea de diseño, sin importar cuán
terriblemente mala sea, se puede utilizar en las circunstancias adecuadas, con
suficiente esfuerzo. Y casi cualquier buena idea de diseño puede volverse inutilizable,
al estropear los detalles de la implementación.

Pero las cosas de las que estoy hablando aquí son generalmente muy malas
prácticas, y no deberías estar haciendo ninguna de ellas a menos que (a) realmente
sepas lo que estás haciendo, (b) tengas una maldita buena razón, y ( c) en realidad
vas a probarlo cuando hayas terminado para asegurarte de que has logrado que
funcione; no solo vas a tener la intención de probarlo.

Además, date cuenta de que tu jefe probablemente no solo esté siendo perverso.
Casi siempre hay una buena (o al menos no tan mala) intención detrás de la insistencia
en una mala idea de diseño. Tratar de comprender que la buena intención es a menudo
la mejor manera de descubrir cómo presentar su caso para un enfoque diferente.

Eso es todo amigos

Como Bob y Ray solían decir: "Cuelguen de sus pulgares y escriban si consiguen
trabajo". Espero que se registre en mi sitio web www.sensible.com de vez en cuando.

Pero sobre todo, ten buen ánimo. Como dije al principio, construir un gran sitio
web es un desafío enorme, y cualquiera que lo haga aunque sea a medias tiene mi
admiración.

Y, por favor, no tome nada de lo que he dicho como algo en contra de romper “las
reglas”, o al menos de doblarlas. Sé que incluso hay sitios en los que desea que la
interfaz haga pensar a la gente, los desconcierte o los desafíe. Solo asegúrese de saber
qué reglas está infringiendo y que al menos crea que tiene una buena razón para hacerlo.

[ 185 ]
Lectura
recomendada
 Ahora que ha leído la edición de Classics Illustrated, no se pierda los
placer de leer el original, disponible en su escuela o biblioteca pública.
—descargo de responsabilidad/exhortación obligatoria al final de cada cómic
ilustrado clásico

Hay docenas deque

libros y sitios web útiles relacionados
podría recomendar, con
pero estos son la tienen
los que usabilidad
realmente influyó en mi forma de pensar acerca de la Web.

> Arquitectura de la Información para la

World Wide Web
Louis Rosenfeld y Peter Morville, O'Reilly, 2ª edición, 2002 Sin duda,
el libro más útil sobre diseño de sitios web.
Abordan los problemas de navegación, etiquetado y búsqueda con
admirable claridad y practicidad.

> Por qué compramos: la ciencia de las compras

Paco Underhill, Simon and Schuster, 2000 Un
maravilloso resumen de muchos años de observación detallada de
compradores en su hábitat natural. Aunque el tema es el
experiencia de compra de ladrillo y mortero, el problema es el mismo que
Diseño web: creación de entornos complejos y atractivos donde las personas
busca cosas y encuéntralas.

> Fuentes de poder: cómo las personas toman decisiones

Gary Klein, MIT Press, 1999 El

estudio de Klein sobre la toma de decisiones naturalista es otro maravilloso
ejemplo de cómo la observación de campo puede revelar la diferencia
entre la forma en que pensamos que hacemos las cosas y la forma en que realmente
hazlo. Si el Catálogo de la Tierra entera aún existiera, este libro y Por qué
We Buy estaría en él.

[ 187 ]
Lectura recomendada

> La práctica de la creatividad: un manual para

Resolución dinámica de problemas en grupo
George M. Prince, Macmillan, 1972.
Tomé un curso en el método Synectics hace treinta y cinco años, y no
ha pasado una semana desde entonces que no haya usado algo que
aprendí de él. Piense en ello como una lluvia de ideas sobre esteroides,
junto con algunas ideas notables sobre cómo las personas trabajan
en grupos. El libro está agotado, pero puede encontrar una copia con
bastante facilidad a través de la Web.

> Sitio web de Jakob Nielsen, useit.com (www.useit.com). Comenzando con Ingeniería de
usabilidad en 1984, Jakob Nielsen ha sido durante mucho tiempo el defensor más elocuente
y estimulante de la usabilidad. Y desde el advenimiento de la Web, ha aparecido en todas
partes excepto en los cartones de leche predicando el valor de la usabilidad de la Web.

No siempre estoy de acuerdo con lo que dice, pero siempre

admiro la forma en que lo dice. Su sitio alberga sus
columnas Alertbox quincenales (otra razón para admirarlo:
un columnista que es lo suficientemente inteligente como
para saber que no tiene algo importante que decir todas las
semanas) y enlaces a todos los mejores recursos de
Tienes
usabilidad en la Web. visto a este hombre?

Consulte también sus informes de Nielsen Norman Group

(www.nngroup.com/reports/). Pueden parecer costosos
(por lo general, entre $100 y $300), pero contienen información confiable que no
encontrará en ningún otro lugar sobre áreas específicas (como la facilidad de uso de la
intranet) y segmentos de audiencia específicos (como niños, personas mayores y personas con discapacidade

[ 188 ]
 Lectura recomendada

> Usabilidad de la página de inicio: 50 sitios web

deconstruidos Jakob Nielsen, Marie Tahir, New

Riders, 2001 La mala noticia sobre este libro es que

después de haber visto los problemas de veinticinco páginas de inicio,
los ha visto todos.
Sin embargo, la buena noticia es que el excelente conjunto de 113 pautas
de diseño de la página de inicio incluidas en las primeras 28 páginas vale
el precio del libro completo.

> Manual de diseño de aplicaciones web: mejores prácticas

para software basado en la web Susan

Fowler y Victor Stanwick, Morgan Kaufmann, 2004 Susan y Victor

escribieron la Guía de aplicaciones web de Junior Woodchucks: Todo lo que
necesita saber está allí, incluidos muchos ejemplos de mejores prácticas,
ideas de años de experiencia, y variados arcanos fascinantes. Si está
diseñando o creando aplicaciones web, sería una tontería no tener una copia.

> Diseño Defensivo para la Web

37 Signals, New Riders, 2004 El

subtítulo (Cómo mejorar los mensajes de error, la ayuda, los formularios
y otros puntos críticos) lo dice todo. Un libro breve, excelente y práctico,
lleno de ejemplos de mejores prácticas, sobre cómo diseñar para evitar
que ocurran errores de los usuarios y ayudarlos a recuperarse sin dolor
cuando lo hagan.

[ 189 ]
Lectura recomendada

> El diseño de las cosas cotidianas Don Norman,

Basic Books, 2002 Publicado originalmente
como La psicología de las cosas cotidianas, luego renombrado
porque los diseñadores no lo encontraban en el departamento de
Psicología de las librerías, en realidad es un clásico de usabilidad.
Debido a que se publicó por primera vez en 1984, no encontrará
ninguna mención de la Web, pero los principios son los mismos.

Nunca volverás a mirar los picaportes de la misma manera.

> Una guía práctica para las pruebas de usabilidad

Joseph Dumas y Janice (Ginny) Redish, Intellect, 1999 El mejor

libro de instrucciones sobre pruebas de usuario y mi favorito, al
menos hasta que escriba el que sigo tomando notas.

Actualmente, Ginny también está escribiendo un libro sobre cómo

escribir para la Web, que puedo recomendar mucho, aunque no lo vea.

En la misma línea, Caroline Jarrett (www.formsthatwork.com/), a quien

considero la autoridad en el diseño de formularios Web, es
escribiendo el libro definitivo sobre, bueno... el diseño de formularios Web. Si no ha aparecido
en 2006, envíele un correo electrónico y acosarla al respecto.

> Noticias de usabilidad

http://psychology.wichita.edu/surl Este
boletín es mi fuente favorita de investigación de usabilidad. Publicado dos veces al año por
el Laboratorio de Investigación de Usabilidad de Software (SURL) de la Universidad Estatal
de Wichita, siempre contiene varias piezas de investigación bien pensadas muy agradables
y pequeñas. Los archivos completos están disponibles en línea.

[ 190 ]
 Lectura recomendada

> WebPalabra

http://www.webword.com/ John
Rhodes UsabilityViews.com http://
www.usabilityviews.com/ Chris

McEvoy Estos sitios son actualmente

las dos mejores formas de mantenerse
actualizado sobre todo lo que se publica en línea sobre la usabilidad. WebWord
de John Rhodes es más un verdadero blog en el que comenta los artículos a los que
vincula, pero Chris McEvoy se obstina en rastrear todo lo que vale la pena mirar. Entre
los dos, no te perderás nada.

> Usabilidad.gov basado en investigaciones

pautas

http://usability.gov/guidelines/index.html Este
excelente conjunto de pautas de uso y diseño web,
publicado por el Instituto Nacional del Cáncer (NCI),
incluye muy buenos ejemplos y referencias a la
investigación en la que se basa cada pauta.

Si tiene una pregunta sobre la usabilidad,

siempre vale la pena consultar aquí primero
para ver si la han cubierto.

www.usabilidad.gov

[ 191 ]
Expresiones de gratitud
…y todo lo que obtuve fue esta pésima camiseta
 ...y los hombres del USS Forrestal, sin cuya
cooperación esta película nunca se hubiera realizado.
—reconocimiento de película convencional

No te engañes. un libro como este es en gran parte el

D trabajo de una sola persona. No hay otro ser humano que haya pasado
casi tanto tiempo como el que tengo pensando en ello, perseverando
en ello, cambiando la misma oración de un lado a otro entre dos versiones
diferentes una y otra vez.

Pero tengo mi nombre en la portada, donde todos los demás involucrados obtienen un
poco menos que bupkus. E incluso si hubiera tenido un millón de años para trabajar en
ello, nunca estarías leyendo esto si no hubiera sido por el talento, la habilidad, el aliento,
la amabilidad, la paciencia, la generosidad y la tolerancia de muchas personas.

Editores, diseñadores, patrocinadores y habilitadores

Siempre he oído historias de terror sobre relaciones tormentosas entre granjeros y
vaqueros entre autores y editores, pero personalmente me encanta que un buen editor
me diga dónde me he descarriado. Con un libro, al igual que con un sitio web, no tiene
que trabajar mucho en él antes de estar demasiado cerca para ver las cosas con
claridad. Tuve la suerte de contar con el beneficio de dos editores:

> Karen Whitehouse de Macmillan siempre pensó que este libro era una buena idea,
siempre supo a lo que estaba tratando de llegar (incluso cuando no lo sabía), nunca
golpeó mis nudillos (incluso cuando me lo merecía) y siempre fue un placer para mí.
estar cerca. Si escribes un libro, deberías tener tanta suerte. Extrañaré no tener una
excusa para hablar con ella todo el tiempo.

> Barbara Flanagan, amiga desde hace mucho tiempo y magistral editora de estilo que,
según admite ella misma, ni siquiera puede leer una novela sin un lápiz en la mano,
leyó el manuscrito en varias etapas por la bondad de su corazón, en su copioso
tiempo libre. Me mostró formas elegantes de salir de innumerables rincones en los que
me había pintado.

Siempre que detecte un defecto en este libro, debe imaginarse a Karen o Bárbara, o a
ambas, diciendo: "Bueno, si realmente insistes...".

[ 193 ]
expresiones de gratitud

Al diseñar este libro, Allison Cecil asumió a sabiendas el trabajo de un

maníaco.1 Imagínese diseñar un libro para un autor obstinado y quisquilloso
que ha escrito un libro defendiendo sus propios principios de diseño e insiste en
que el libro debe reflejarlos. Y, naturalmente, en la gran tradición Beat the Clock
de hacerlo bajo el agua, todo tenía que hacerse en una cantidad de tiempo
increíblemente pequeña. Lo logró solo (a) renunciando al sueño, y todo lo demás,
durante semanas con una enorme buena gracia, y (b) mostrando un talento igual a
su paciencia. Al igual que con Karen y Bárbara, cualquier cosa que te parezca un
defecto de diseño es casi con seguridad algo que ella hizo solo porque le torcí el brazo.

David Matt y Elizabeth Oh de Roger Black Consulting y Trina Wurst y Sandra

Schroeder de Macmillan hicieron importantes contribuciones al diseño y la
producción, y Mark Matcho proporcionó las ilustraciones con una prisa impía.

Roger Black ha alentado generosamente mi trabajo durante años, y siempre es un

placer trabajar con él y ver los globos de pensamiento únicos y divertidos que se
forman sobre su cabeza. El único inconveniente es que muy pocas veces disfruto
del placer de su compañía porque siempre está en Uruguay o Singapur. Fue su
sugerencia que hiciera este libro en primer lugar, y él y Jock Spivy se aseguraron
de que Circle.com brindara el apoyo que lo hizo posible.

Alexandra Anderson-Spivy ("Ally") manejó el proyecto desde el final de Circle.com

y brindó valiosos consejos editoriales y, como es su estilo, invaluable apoyo moral
de principio a fin.

Cajas de resonancia
Confié en muchas personas para que me dijeran si realmente estaba teniendo
algún sentido o simplemente, en palabras de Scotty, el reportero en The Thing
from Another World2 , " lleno de arándanos silvestres". Pero confié más en mis dos mejores amigo

1
cf. La explicación de Kevin Kline sobre su vida como bombero en The January Man: "El edificio está en
llamas, todos salen corriendo, tú entras corriendo. Es el trabajo de un maníaco".

2
...el original de Howard Hawks de 1949, no el remake de John Carpenter.

[ 194 ]
 expresiones de gratitud

> Paul Shakespear pasó muchas horas, horas en las

que podría haber estado pintando, leyendo
borradores que apenas tenían sentido, cosas que
nunca podría haber mostrado a nadie más, y
diciéndome qué completar y qué tirar por la borda. Little Wing
2004 59" x
Las discusiones que siguieron fueron mucho 28" acrílico
sobre madera
más interesantes que este libro, como siempre ocurre
paulshakespear.com
con Paul.

> Richard Gingras sabe más sobre la publicación en línea y la creación de una experiencia
de usuario positiva que nadie que yo conozca. Su reacción a mi primer capítulo fue lo
que me permitió continuar, ya que su amistad ha hecho posible muchas cosas en mi
vida. Terminé de escribir este libro mientras me hospedaba con Richard, su esposa, Mitzi
Trumbo, su hija, Molly, y la maravillosa madre de Mitzi, Cleo, como hago siempre que
trabajo en Silicon Valley, mi "otra familia", como dice mi esposa. . Su compañía significa
más para mí de lo que puedo decir aquí.

Muchas otras personas fueron lo suficientemente generosas como para tomarse el tiempo
que realmente no tenían para leer y comentar varios borradores: Sue Hay, Hilary Goodall,
Peggy Redpath, Jennifer Fleming, Lou Rosenfeld, Robert Raines, Richard Saul Wurman,
Jeff Veen, Donna Slote , Matt Stark, Christine Bauer, Bob Gower, Dan Roam, Peter Stoermer
y John Kenrick. Como siempre ocurre con las pruebas de usuarios, sus reacciones y
sugerencias mejoraron enormemente el resultado final.

Además de leer borradores, Cleo Huggins, una de las mejores diseñadoras que conozco y
una de las personas más agradables e interesantes, hizo una oferta de ayuda
extraordinariamente generosa cuando más la necesitaba.

Gail Blumberg fue mi "salvavidas" para resolver problemas a lo largo de todo este
proceso, guiándome de manera segura a través de cada situación que requería delicadeza
o algún sentido de la política y haciéndome reír mientras lo hacía. A estas alturas le debo
tantas cenas para tantos favores que creo que tengo que comprarle un restaurante.

Mi vecina de al lado, la diseñadora gráfica Courtney McGlynn, que ha desempeñado

alegremente el papel de "usuario promedio" con poca antelación a lo largo de los
años cada vez que necesitaba hacer una prueba rápida de usuario, me ayudó a pensar
en algunos problemas de diseño molestos.

[ 195 ]
expresiones de gratitud

Mentores
Dave Flanagan, John Kirsch y Jon Hirschtick me enseñaron con su ejemplo que los
negocios duros y la decencia extraordinaria no son incompatibles, lo que me permitió
sentirme cómodo trabajando como consultor. John también me arrastró pateando y
gritando hasta la edad adulta profesional con un gasto personal no pequeño,
permaneciendo pacientemente mientras aprendía a escribir algo de más de una página,
un regalo que nunca podré devolver. Pete Johnson mejoró enormemente este libro sin
siquiera mirarlo, simplemente mostrándome con su ejemplo a lo largo de los años lo
que es escribir realmente bien.

Clientes, compañeros de trabajo, clientes convertidos en

amigos y compañeros de trabajo convertidos en amigos
Mucho de lo que sé acerca de la usabilidad de la Web provino de trabajar con muchas
personas inteligentes y talentosas como Arwyn Bryant, Jim Albrecht, John Lennon,
John Goecke, Jim Kent, Bill McCall, Dan Roam, James Caldwell, John Lyle Sanford,
Lucie Soublin, Peter Karnig y Theo Fels.

Familia
Mi hermano Phil Krug ha estado ahí para mí toda mi vida, sin contar los primeros
años de sujetándome y haciéndome cosquillas.

Mi hijo Harry fue enormemente paciente mientras escribía esto, incluso cuando eso
significaba bajar el volumen de su computadora mientras jugaba Midtown Madness.
Últimamente, asumió el papel de agente de prensa de nueve años, llevando el
manuscrito a nuestro Barnes & Noble local para ver cómo se vería en el estante,
creando una cubierta para él cuando lo necesitábamos y declarándolo un buen leer.

Mi esposa Melanie Sokol me ha dicho durante mucho tiempo que es mejor que no
diga en ninguna parte del libro que ella me apoyó. La verdad es que fue un apoyo
increíble durante los cuatro meses que se suponía que duraría el libro, e incluso
durante los siguientes cuatro meses. Y ni siquiera fue el tercer cuatrimestre que lo hizo;
eran pequeñas cosas, como el hecho de que aparentemente no tenía idea de cuándo, si
es que alguna vez, terminaría. Ella sabe lo agradecido que estoy.

[ 196 ]
 expresiones de gratitud

Otro
Flo y el equipo de Brueggers' Bagel Bakery en West Roxbury nunca me hicieron sentir
como una molestia en todas las mañanas que ocupé una mesa durante horas y horas,
tomando una taza de café, garabateando en innumerables hojas de papel y mirando al
vacío . .

Siendo un oso de poco cerebro, sé que he pasado por alto a alguien; probablemente tu
Con suerte, para cuando lea esto, su camiseta estará en el correo.

Actualización: la segunda edición

Me considero muy afortunado de que cuando fui a reunir a los sospechosos
habituales: Karen Whitehouse, Allison Cecil (si necesita diseñar un libro, ¡encuéntrela!),
Paul Shakespear, Barbara Flanagan y Roger Black, todos accedieron amablemente a
ayudarme. .

Una vez más, Harry y Melanie me han aguantado en el

modo de escritura (nunca una imagen bonita), mientras
hacen que todo valga la pena.

Varias personas fueron muy generosas al compartir

sus conocimientos conmigo, incluidos Ginny Redish,
Jeffrey Zeldman, Eric Meyer, Caroline Jarrett, Carol
Barnum y Lou Rosenfeld, mi compañero de viaje en el
taller y ahora un buen amigo. Harry Krug, hacia 2005

Gracias a la gente de Peachpit, Nancy Runzel, Marjorie Baer, Lisa Brazieal, Kim
Lombardi y el resto, y en particular a Rachel Charlton Tiley (y Kathy Malmloff antes que
ella) que respondieron con gran paciencia a montones de preguntas y solicitudes
relacionadas con libros. los años.

El café esta vez era del Putterham Circle Starbucks en Brookline.

Tienen una ensalada de frutas realmente buena (las uvas firmes son la clave) y han
sido tan hospitalarios como la gente de Brueggers la última vez.

Finalmente, a todos los que me escribieron o me saludaron en persona por el libro,

gracias. Ha sido un placer.

[ 197 ]
 índice

$25,000 Pirámide, 36 37
Diseño
Señales, 187 508. Ver
D-E
Sección 508
página de inicio,
95 navegación, 51
A Dumas, José, 190
Accesibilidad, 169 Elements of Style, The, 45
Amazon.com revisión experta de usabilidad, 3
búsqueda, 17
uso de fichas, 81
F
¿animal, vegetal o mineral?, 41 usuario
Preguntas frecuentes, 166

medio, mito del, 18, 128

“El granjero y el vaquero
Deberían ser amigos, los”, 122
B grupos focales, 132–133 formularios,
Vence al reloj, 95 gran 63

bocinazo, 3, 138 Cazador, Susan, 189

Breadcrumbs, 76
usuarios dominantes de
G
navegación, 55 navegación, 55, 57
Gates, Bill
Birmania-Afeitado, 31
saliendo del paso, 27
compra de la computadora portátil da
C Vinci, 79 navegación global. Véase navegación
Camtasia, 143 persistente gallina de los huevos de oro, tentación
Hojas de estilo en cascada (CSS), 177–178 de matar, depósito de buena voluntad 111 , 163–167
clics, 14, 37
Collyer, Bud, 95
H
convenciones, 34, 60
Hansel y Gretel, 76 charla
choque cultural, 127
feliz, eliminando, 46

[ 199 ]
índice

Hatch, Sen. Orrin, 37 convenciones

head slappers, 158 de navegación,
jerarquía, 95 ancho vs. 60 diseño, 51 nivel
profundo, 41 Diseño inferior, 70
de página de inicio, 95 persistente, 62
navegación diferente contenido revelador, 59
en, 107 enlace a, 66 palabras innecesarias, omisión,
45 solicitudes de nuevas
características, 158 Nielsen,
Jakob, 54, 137, 188, 189 ruido. Ver ruido visual

normando, don, 190

Instrucciones I–K , eliminando, 46
Jarrett, Caroline, 190
problemas de "kayak", 157 P–Q
Klein, Gary, 24, 187 Nombre de la página

Leyes de usabilidad de Krug, 11, 41, 45 importancia de, 71

hacer coincidir lo que el usuario
hizo clic, 73 posición en la página,
72 navegación persistente, 62
logotipo L. Consulte
navegación principal. Ver Secciones
Prueba de usabilidad de pérdida de arrendamiento de Site ID, 135, 137
Prince and the Pauper, The, 26 Prince,
George M., 188 print-friendly pages,
METRO 167
mensch, 160, 161, 162
elecciones sin sentido, promociones promociones de

41 declaración de misión, 103 contenido, 96 promociones

Morae, 143 de características, 96 menús desplegables, limitaciones de, 110

saliendo del paso, 26–29

R
N Redish, Janice (Ginny), 175, 190

nombres, importancia de, 14 registro, 96

[ 200 ]
 índice

reinventar la rueda, 36 debates Talking Heads, 51

religiosos, 124, 129 forma teletransportación, 58, 63
“correcta” de diseñar sitios Web, 7 Theofanos, Mary, 175
Rosenfeld, Luis, 67, 187 tragedia de los comunes, 112
prueba del tronco, 85

S
satisfactorio, 24–25 EN
escanear páginas, 22 Cuesta abajo, Paco, 187
cuadro de búsqueda, 38, 67 URL, escritas en el cuadro de
en la página de inicio, búsqueda, 27 usabilidad, definida,
95 opciones, 68 5 laboratorio de usabilidad, 142
redacción, 68 usuarios pruebas de usabilidad, 3, 135
dominantes de búsqueda, 54 número de usuarios para probar,

navegación secundaria. Consulte las subsecciones
Sección 508, 169 frentes de sección, 46
Secciones, 65 ID del sitio, 63 chisporroteo, 184
páginas de carga lenta, 59 Spool, Jared, 7
Stanwick, Victor, 189 letreros de calles, 72
subsecciones, 65 Sinéctica, 188
138 reclutar participantes, 139, 141
revisión de resultados, 156 sesión
de muestra, 146 valor de comenzar
temprano, 134 qué probar, 144
Utilidades, 65

Validador

V–Z , accesibilidad, 173 jerarquía

visual, 31 análisis sintáctico, 33
ruido visual, 38 Texto de
bienvenida, 101 White, EB, 45
Yahoo, 27 Indicador “Usted está
T aquí”, 27
pestañas, 79

codificación de

colores, 83 importancia de dibujar

correctamente, 82 eslogan, 101, 103–106

[ 201 ]
Esta página se dejó en blanco intencionalmente
 STEVE KRUG
se las arregló para trabajar
felizmente en una oscuridad
casi total como consultor
de usabilidad muy respetado Este libro fue producido digitalmente
utilizando Microsoft Word, Adobe
hasta la publicación de este libro en 2000.
Photoshop y Adobe Illustrator.
Pasó casi veinte años haciendo software y
El diseño y la producción se
sitios web más fáciles de usar en compañías
realizaron con QuarkXPress.
como Apple, Netscape, AOL, Lexus,
Excite@Home y BarnesandNoble.com. Los archivos se pasaron entre
todas las partes interesadas y
se revisaron con Adobe Acrobat.
ROGER NEGRO
es consultor de diseño La cara del texto es Farnham,
editorial. Durante los últimos diseñada por Christian Schwartz,
mayordomo
foto:
Erik

30 años, ha trabajado en Font Bureau. Los títulos de los

equipos de Rolling Stone,
Nueva York, Newsweek, Esquire, Los Angeles
Times, MSNBC.com y Discovery.com.
Recientemente asesoró en rediseños para
Poz.com y la revista Nintendo Power.
capítulos y los encabezados de los
párrafos se establecieron en MetaPlus,
diseñado por Erik Spiekermann.
Todos los subtítulos se establecieron
en FF Letter Gothic Text, diseñado por Albert Pin