Documentos de Académico
Documentos de Profesional
Documentos de Cultura
No Me Hagas Pensar Steve Krug
No Me Hagas Pensar Steve Krug
No me hagas
Steve Krug pensar
Una aproximación a la usabilidad en la Web
NO Segunda edición
ME
HAGAS
Steve Krug
Traducción
Una aproximación a la Usabilidad en la Web José Manuel Díaz
• Madrid • México • Santafé de Bogotá • Buenos Aires • Caracas • Lima • Montevideo • San
Juan •
San José • Sáo Paulo • White Plains
CONSULTORES EDITORIALES:
SEBASTIÁN DORMIDO BENCOMO
Departamento de Informática y Automática
UNIVERSIDAD NACIONAL DE EDUCACIÓN A DISTANCIA
Steve Krug
No me hagas pensar. Una aproximación a la usabilidad en la Web. Segunda edición
DE ESTA EDICIÓN
© 2006 PEARSON EDUCACIÓN, S.A.
Ribera del Loira, 28
28042 Madrid (España)
ISBN-10: 84-8322-286-8
ISBN-13: 978-84-8322-286-7
Depósito Legal: M-8.606-2006
PEARSON PRENTICE HALL es un sello editorial autorizado de PEARSON EDUCACIÓN, S.A.
Traducido de: Don"t Make Me Think! A common sense approach to Web usability.
Second Edition.
Copyright © 2006 by Steve Krug
ISBN 0-321-34475-8
Equipo editorial:
Edición: David Fayerman
Técnico editorial: Ana Isabel García
Equipo de producción: Dirección:
José Antonio Ciares
Técnico: Diego Marín
Diseño de cubierta: Equipo de diseño de Pearson Educación, S.A.
Composición: Claroscuro Servicio Gráfico, S.L.
Impreso por: Lavel, S. A.
Prólogo XIV
Ya mi hijo Harry que seguramente escribirá libros mucho mejores que éste, si él quiere.
A mi hermano mayor Phil que fue un mensch toda su vida. CAPÍTULO 2 ¿Cómo usamos realmente la Web? 20
Ojear, ser suficiente y arreglárselas
SEGUNDA EDICIÓN
V VI
CAPÍTULO 8 El granjero y el ganadero deben 122
Acerca
ser amigos
Por qué la mayoría de los argumentos del equipo de diseño
web acerca de la usabiidad son una pérdida de tiempo y
cómo evitarlos
Agradecimientos 192
VII
Cuando pensaba que estaba fuera, me vuelven a meter
-MICHAEL CORLEONE, EN "EL PADRINO” , PARTE III
NO ME HAGAS PENSAR
D esde que este libro se publicara por primera vez hace cinco años, la gente se ha asombrado con
podría actualizar los ejemplos." Incluso algunas personas me hubieran dicho que algunos de los sitios
mencionados en los ejemplos ya no existían.
esta obra.
Pero lo cierto es que muchos de los sitios mencionados ya no existían cuando el libro llegó a las
He recibido cantidad de mensajes de correo electrónico encantadores. No puede imaginarse lo
gratificante que es empezar la mañana con alguien a quien no conoce y que le dice lo mucho que librerías. (Recuerde, el libro salió antes de que estallara la burbuja de Internet.) El hecho de que los
disfruta con algo que uno ha hecho. (¡Lo recomiendo encarecidamente!) sitios no existieran no hacía que los ejemplos fueran menos claros.
Aún mejor es el hecho de que a la gente le gusta el libro por las mismas razones que lo he Otras personas hubieran dicho: "Bien, podría hablar de cosas relacionadas con la Web que han
escrito. Por ejemplo: cambiado." Es verdad, algunas cosas relacionadas con la Web han cambiado en los últimos años.
• Muchas personas aprecian el hecho de que es pequeño. (Algunos me han dicho que se lo Algunos de los cambios han sido buenos:
leyeron durante un vuelo, que era uno de los objetivos que me marqué para la primera edición; • Más sitios buenos de los que copiar.
• Un número gratificante de personas me han dicho que les gustó el libro porque practica lo que
• Convenciones útiles como las páginas orientadas a la impresión.
predica, en la redacción y en el diseño.
• Google como punto de partida de todas las acciones.
• Algunas personas me han dicho que se han reído en voz alta, algo que realmente aprecio. (Un
lector me dijo que le hice reír tan fuerte que le salió la leche por la nariz. ¿Cómo algo como • El cambio de los modelos empresariales que ha pasado de los anuncios en forma de banners
este libro puede servirle de ayuda a la vez que le hace pensar que ha invertido bien el tiempo?) (sobre cosas que no quiero) a los anuncios Google (para cosas que realmente podría querer).
Pero lo más satisfactorio es que esas personas me dijeron que les ayudó a hacer mejor su trabajo. • Casi nadie utiliza ya los marcos. ...y otros
• Pop-ups.
Pero, ¿qué ha hecho usted por nosotros • Phishing.
últimamente? Pero estos cambios no me hicieron sentir la necesidad de actualizar el libro, que está dedicado a
los principios del diseño, y no a temas específicos sobre tecnología o implementación.
Y había otro problema más: yo estaba orgulloso de lo pequeño que era el libro. Me llevó mucho
Sólo pasó un año tras la aparición del libro para que me empezaran a preguntar cuándo iba a
trabajo, todo era parte de las "prácticas predicadas" por el negocio. Si añadía material nuevo, tenía
escribir la segunda edición.
que tirar por la borda parte de un material existente que funcionaba muy bien.
Durante mucho tiempo, me resistí a esa idea. Me gustaba el libro tal como era y pensaba que
estaba funcionando bien, y como estaba basado en los principios del diseño y no de la tecnología,
pensaba que pasaría más tiempo antes de quedar anticuado. Por tanto, ¿qué estamos haciendo aquí?
Normalmente hubiera recurrido a la técnica de preguntar al consultor/terapeuta lo que él Para mí, uno de los mayores beneficios del libro es que he podido pasar mucho tiempo en los
cambiaría, pero la respuesta hubiera sido casi siempre la misma: "Bien, supongo que talleres de aprendizaje.
En esos talleres, intento hacer lo mismo que digo en el libro: mostrar a esas personas lo que
pienso cuando reviso la usabilidad de un sitio web.
IX
X
ACERCA DE LA SEGUNDA EDICIÓN NO ME HAGAS PENSAR
Y como todos los que vienen a los talleres ya han leído el libro, naturalmente tengo que poner ejemplos diferentes
para explicar los mismos puntos, y tengo que recurrir a otras formas de explicar las mismas cosas. También tengo la
Cinco libras de galletas en una caja
ocasión de revisar un montón de diferentes tipos de sitios, porque todos los que asisten al taller pueden proponer un de cuatro libras
URL; durante el día hago "minirevisiones expertas de 12 minutos" de algunos de esos URL, y efectúo pruebas de
Aunque yo pensaba que el libro estaba bien como estaba, al pensar en todo lo que quería
usuario sobre uno o dos más. añadir me enfrentaba a un dilema aún mayor: si no quería eliminar nada, ¿cómo podía añadir
Y como cualquiera sabe, la enseñanza es la mejor forma de aprender sobre algo. material nuevo de modo que el libro siguiera siendo suficientemente pequeño como para leerlo
durante un viaje en avión?
Así, cuando mi editor empezó a preguntarme por una segunda edición el año pasado, realmente empecé a pensar
sobre cómo sería esa segunda edición. Y aunque seguía teniendo la sensación que no había mucho que cambiar o Así las cosas, me apliqué mis propios consejos e hice como una especie de prueba con
eliminar de la primera edición, comprendí que había otras cosas útiles sobre las que podía escribir. usuarios: configuré un tablón de anuncios y pedí a los lectores de la primera edición que me
dijeran lo que podría eliminar. Y, afortunadamente, la prueba me sirvió para lo que normalmente
sirve una prueba con usuarios:
¿Parecido a qué? • Confirmar algunas cosas que ya sabía.
•
El material nuevo encaja en una de estas tres categorías:
• ¡Oh, ahora lo he conseguido! Los talleres me han dado la oportunidad de pensar a través de lo que hay en
Me enseñó algunas cosas que no sabía; por ejemplo, no sabía cómo la gente estaba
utilizando el libro y cuál era la valoración que le otorgaban.
•
el libro. Algunas cosas las he escrito de una forma ligeramente diferente porque creo que ahora las
Me llevé una gran sorpresa que me permitió mejorarlo significativamente.
entiendo un poco mejor, o porque he encontrado una forma más adecuada de explicarlas.
• ¡Ayuda! Mi jefe quiere que_____ Muchas de las preguntas que me formulan las La gran sorpresa era la gran cantidad de personas que me sugerían mover a otro libro los
personas que acuden a mis talleres son del tipo, "Sé cuál es la forma correcta de hacer una cosa, pero mi capítulos dedicados a las pruebas con usuarios. (Algunas habían oído que yo estaba preparando
jefe/cliente/socio de la empresa insiste en que lo haga de la forma errónea. ¿Cómo puedo convencerle otro libro dedicado a este tipo de pruebas que podríamos llamar de "bajo coste/hágalo usted
de lo contrario?" mismo", por lo que me decían que no echarían de menos unos capítulos dedicados a hacer unas
pruebas que no tenían previsto hacer.)
Como pude comprobar que muchas personas parecen invertir mucho tiempo combatiendo con los
mismos problemas de diseño, pensé que estaría bien ofrecerles algo de munición. Así que añadí el Yo había pensado en hacerlo, pero no quise porque (a) pensé que los lectores echarían de
Capítulo 12 para tratar problemas corno el siguiente: menos esos capítulos, y (b) pensé que tendrían la sensación de que les estaba obligando a
Mi director de marketing insiste en que tenemos que hacer que el visitante proporcione un comprar el segundo libro. Pero en cuanto empecé a leer lo que los usuarios tenían que decirme,
montón de información personal innecesaria para poder suscribirse a nuestra hoja informativa, la solución se hizo obvia: si comprimía los tres capítulos dedicados a las pruebas con usuarios
y no parece importarle que el 10% de nuestros suscriptores se llamen "Escombros de en uno ligeramente más corto y que explicara los puntos más importantes que todo el mundo
discusión". debe conocer, podría ganar unas veinte páginas para el material nuevo. Y si alguien quería
• Los capítulos "perdidos". Había dos capítulos que quería incluir en el primer libro, pero no lo hice disponer de la versión antigua más larga de esos capítulos, podría publicarlos gratuitamente en mi
para que libro fuera pequeño. Uno, el Capítulo 10, habla de la importancia de tratar bien a los usuarios, sitio web'. Problema resuelto.
y el otro, el Capítulo 11, está dedicado a la accesibilidad en la Web.
Finalmente, unos pequeños detalles caseros:
También quise poner al día y ampliar mi lista de lecturas recomendadas, pues en estos cinco años han • Los enlaces. Si quiere visitar cualquiera de los URL mencionados en este libro,
aparecido grandes libros.
encontrará unos enlaces actualizados en mi sitio. (Sólo en casó de que cualquiera de los sitios,
bien, ya sabe... desaparezca.)
XII
XI
Prólogo
NO ME HAGAS PENSAR OTRA VEZ
ACERCA DE LA SEGUNDA EDICIÓN
En todo caso, gracias por todo. Espero que el material nuevo le resulte útil. Nos
En los primeros años la plataforma era volátil. Parecía que las cosas cambiaban todas las semanas.
Estábamos inmersos en guerras de navegadores, con Netscape cuadrando todas las esquinas y el W3C
sacando a la luz nuevos estándares de HTML cada seis meses. Pero entonces, con la predecible
victoria de los de Redmond, todo se tranquilizó.
Esto supuso un alivio para los diseñadores web, que se volvían locos por los constantes cambios en
el código.
XIII XIV
Y como los diseñadores no entramos, por norma, en contacto con los seres humanos reales, 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 trabajo, sigue mirando cada sitio web como si fuera el primero. Aquí no encontrará palabras
sobrantes: sólo encontrará sentido común y un juicio amistoso de cómo miramos, cómo pensamos y cómo
leemos.
Los principios que Steve comparte en este libro seguirán siendo los mismos, independientemente de lo que
ocurra con Internet (con las convenciones web, o con el sistema operativo, o con el ancho de banda, o con la
potencia de los computadores). Así que tome asiento y relájese.
ROGERBLACK
Léame primero
ACLARADO DE VOZ Y RENUNCIA DE RESPONSABILIDADES
Nueva York, julio de 2005
XV
¿Realmente es necesario hacer este viaje NO ME HAGAS PENSAR
—ESLOGAN DE. LOS POSTERS DE. LA SEGUNDA GUERRA
MUNDIAL QUE ALENTABAN Al. RACIONAMIENTO DE GAS
• Trabajo con el equipo de diseño web del cliente para ayudarles a resolver los problemas.
C uando empecé a comentar que estaba preparando un libro acerca de cómo hacer lo que yo
hacía, todos me preguntaron lo mismo: "¿No te da miedo quedarte sin trabajo?". Lo cierto es
que tengo un gran trabajo.
• La gente ("los clientes") me envía propuestas de diseños de página para el nuevo sitio web
que ellos mismos están preparando o el URL del sitio ya existente que están rediseñando.
• Miro los diseños o uso el sitio y deduzco si son lo suficientemente fáciles de manejar ("examen
tiene en cuenta. Además, el trabajo está bien pagado.
de experto en usabilidad"). Algunas veces pago a gente para que intente utilizar el sitio Créanme, no me atrevería ni en lo más mínimo a poner en peligro esta forma de vida (3).
mientras yo observo ("prueba de usabilidad") (1)
• Redacto
Pero, en realidad, hay muchos sitos web necesitados de ayuda (y sólo unos pocos que hacen lo
un informe que yo mismo hago) que, salvo que hubiera un colapso total y repentino del boom de Internet (4),
describiendo los me ofrecen la oportunidad de seguir trabajando durante unos cuantos años más.
problemas probables con
los que, considero, los De repente, muchas personas con más bien poca experiencia previa, o incluso ninguna, se han
usuarios se van a tenido que responsabilizar de proyectos de gran presupuesto que pueden determinar el futuro de sus
encontrar ("asuntos de empresas. Estas personas buscarán a otras que les digan si lo están haciendo correctamente.
usabilidad") y sugiero ______________
posibles soluciones 2.
(3) Ahora tengo un trabajo aún más cómodo. Desde que salió el libro, paso mucho de mi tiempo en los talleres de
__________________________ aprendizaje. donde, a diferencia de la consultoría, no hay oportunidad de postergar una tarea. Al final del día, todo
(1) .. nunca confundir con "voyeurismo está hecho.
(2) Realmente, esto es algo que ha cambiado desde la primera edición, y la razón por la que he dejado de (4) Obviamente, poco después de que yo escribiera esto aumentó el auge (a últimos del 2000). Aún así,
escribir al respecto la encontrará en d Capítulo 9. seguramente ahora hay más personas trabajando en temas de usabilidad que entonces.
3 4
NO ME HAGAS PENSAR
LEAME PRIMERO
Y es un libro fino -
He trabajado mucho para que el libro sea breve (espero que lo sea suficientemente para poder
Los diseñadores gráficos y los desarrolladores suelen ser los responsables del diseño de las leerse en un viaje de avión largo). Y lo hice por dos motivos:
interfaces (en temas como el diseño de la interacción; por ejemplo, lo que ocurre después que el • S i e s b r e v e , e s m á s probable
usuario haya hecho clic) y la arquitectura de la información (la forma en que se organiza todo). que se use (6). Escribo para los que
Y la mayoría de estas personas carece de un presupuesto para contratar a consultores de están en las trincheras (diseñadores,
usabilidad que revisen el trabajo (para qué hablar de tener uno cerca todo el tiempo). desarrolladores, productores de sitios,
directores de proyectos, gente de marke-
Escribo este manual para los que no pueden permitirse contratar (o contar con) personal
ting, personas que extienden los
como yo. Del mismo modo, espero sea de gran valor para los que trabajan con profesionales
cheques, y gente que ha formado su
de la usabilidad.
propio grupo y se encargan de todo). La
Espero, por lo menos, que ayude a evitar algunas discusiones interminables y viciadas del
usabilidad no es el trabajo de su vida y no
diseño web que parecen consumir tantísimo tiempo.
dispone del tiempo necesario para leer
un libro largo.
TM
No se trata de cirugía disparatada
•
Lo bueno es que gran parte de lo que hago es de sentido común y cualquiera que tenga
No es necesario saberlo todo. Al igual que en todos los campos, podría aprenderse
interés puede aprender a hacerlo. mucho sobre la usabilidad, pero, a menos que sea un profesional de la misma, hay
que poner un límite a la cuantía de lo que realmente es práctico en el aprendizaje (7).
Después de todo, la usabilidad sólo significa el asegurarse que algo funcione bien: que una
persona con capacidad y experiencia media (o incluso por debajo de la media) pueda ser
capaz de usar algo (ya sea un sitio web, un avión de combate o una puerta giratoria) con el
objetivo deseado sin sentirse completamente frustrado.
Como en la mayoría de los casos de sentido común, sin embargo, no es necesariamente
obvio hasta después que alguien se lo haya señalado (5).
Sin duda alguna: , si se lo puede permitir, contrate una persona como yo. De no ser
posible, espero que el presente manual le permita hacerlo a usted mismo (en su largo ______
tiempo libre).
(6) Un buen principio de la usabilidad es que si algo requiere mucho tiempo (o parece vaya a necesitarlo)
es menos probable que se acabe utilizando.
(7) Siempre he disfrutado de un pasaje de "Un estudio en escarlata" (A Study in
_______ Scarlet) donde el Dr. Watson se horroriza al ver que Sherlock Holmes no sabe que la Tierra
(5).. una de lar razones por la que mi negocio de consultoría se llama Advanced Common se mueve alrededor del Sol. Dada la capacidad finita del cerebro humano, según explica Holmes, no se puede
Sense (Sentido común avanzado) (negocio que, en realidad llevo yo mismo junto a una permitir el lujo de pensar en hechos inútiles que dejen a un lado a los útiles:
serie de espejos bien situados). El lema de mi empresa es: "No se trata de cirugía "¿Qué diablos es para mí? Dice que viajamos alrededor del Sol, pero si fuéramos alrededor de la luna
disparatada". eso no influiría lo más mínimo ni en mí ni en mi trabajo."
5 6
LÉAME PRIMERO
NO ME HAGAS PENSAR
Creo que las aportaciones más valiosas que hago en cada uno de los proyectos procede siempre de
la presencia constante en la mente de los principios claves de la usabilidad. Creo, también, que para la C o m o resultado va a descubrir que los sitios que utilizo como ejemplos complementado de
mayor parte de la gente es más importante poder entender estos principios que cualquier otra lista de la una calidad muy superior con defectos secundarios.
lavandería con normas específicas. He intentado resumir las pocas cosas que considero debería saber • Ejemplos de todo tipo de sitios. La mayoría de los ejemplos del libro procedende sitios de
toda persona que trabaje en la creación de sitios web. comercio electrónico, pero los principios que se describen se aplican igualmente en la
página vanidosa de mi vecino de al lado, en la página del equipode fútbol de mi hija o en la
intranet de su empresa. Incluir ilustraciones de todos estos géneros diferentes hubiera dado
como resultado un libro mucho más grueso y menos útil.
Ausente en el momento de la foto
Si no desea perder tiempo buscándolas, aquí tiene algunas cosas que no encontrará en este
manual: ¿Quién va primero?
• "La 'verdad" sobre la forma correcta de diseñar sitios web. He estado trabajando en esto He intentado evitar las referencias constantes a "usuario" y a "usuarios" en todo el texto en parte
durante bastante tiempo; el suficiente para saber que no hay una forma "correcta" para por el factor tedioso y en parte también para intentar hacerle pensar sobre su propia experiencia
diseñar sitios web. Es un proceso complicado y la respuesta real para la mayoría de las como usuario de la Web mientras va leyéndolo (algo que la mayoría tendemos a olvidar cuando
preguntas que me hacen es que "simplemente depende" (8). Pero creo que hay unos cuantos tenemos puestos nuestros sombreros de diseño web). Todo esto nos lleva al siguiente empleo de los
principios prácticos rectores que siempre ayuda tenerlos en mente, y que son los que voy a pronombres a lo largo del libro:
• "Yo" soy yo, el autor. Unas veces soy yo el profesional de la usabilidad ("les digo a mis
intentar transmitir.
• Debate de modelos de empresa. Si la historia nos ha enseñado algo es que los modelos de clientes...") y otras soy el que habla como usuario de la Web ("Si no puedo encontrar la opción
empresa de Internet son como los autobuses: si se pierde uno, todo lo que hay que hacer es Búsqueda..."), pero siempre soy yo.
• "Usted" es usted, el lector, alguien que diseña, crea, publica o paga las cuentas del sitio web.
esperar un poco hasta que llegue el siguiente. No soy un experto para hacer dinero en la Web,
y si lo fuera, lo que tuviera que decir probablemente estaría pasado de moda para cuando leyera
este libro. • "Nosotros" ("Cómo usamos en realidad la Web") somos todos los usuarios de la Web, lo que
• Predicciones para el futuro de la Web. Su conjetura es tan buena como la mía. De lo único nos incluye a "usted" y a "mí".
que estoy seguro es de que: (a) la mayoría de las predicciones que oigo son casi siempre Puede que ocasionalmente deje a un lado estas normas, pero espero que el contexto siempre
incorrectas, y (b) las cosas que resulten ser importantes aparecerán como una gran sorpresa deje claro de quién estoy hablando.
aunque a posteriori nos parezcan como algo completamente obvio.
• Hablar mal de los sitios diseñados de forma desacertada. Si le agrada la gente que se burla
de los sitios con defectos evidentes, ha comprado el libro equivocado. Diseñar, crear y
mantener un buen sitio web no es tarea fácil. Es un poco como el golf una cantidad exigua de
formas de introducir la pelotita en el agujero, un millón de ellas para no introducirla.
Cualquiera que lo consigue de una forma más o menos correcta tiene toda mi admiración.
___________
(8) Jared Spool y sus consultores de usabilidad en User Interface Engineering (Ingeniería de interfaz del usuario:
www.uie.com) tienen incluso camisetas con la expresión Ir depends ("simplemente depende").
8
LÉAME PRIMERO
1
recuerde que la usabilidad es importante. Ya conoce por su propia experiencia como usuario de la
Web que prestar atención a la usabilidad implica menor frustración y más satisfacción para sus
visitantes, además de una mayor probabilidad de volver a verlos en otra ocasión.
Creo que mi mujer puso el dedo en la llaga mejor que cualquier estadística que he visto:
¡No me hagas
pensar!
PRIMERA NORMA DE LA USABILIDAD DE KRUG
Espero que el libro le ayude a crear un sitio mejor y, si puede evitar algunas discusiones sobre el
diseño, de vez en cuando podrá llegar a casa a tiempo para cenar.
9
CAPITULO 1
Michael, ¿qué hacen abiertas las mercerías?
--KAY CORLEONE EN El. PADRINO II Considérelo de esta forma:
Cuando miro una página que no me hace pensar, todo lo que se me ocurre son cosas
como: "Veamos, esto es ____________ . Y eso___________ . Y eso es precisamente lo que
quiero".
"¿Qué es lo que hay que tener en cuenta si quiero que mi sitio web sea fácil de
usar?"
La respuesta es sencilla; no se trata de "que nada importante esté a más de dos clics de
distancia", de "hablar el lenguaje del usuario" o, incluso, de "ser coherente".
Se trata de...
"
¡No me hagas pensar!
Durante muchos años he venido diciendo que ésta es mi primera norma de la usabilidad.
Cuantas más páginas web veo, más convencido estoy de ello.
Todo lo que con ello quiero decir es que, hasta lo que humanamente es posible, cuando
se mire una página web ésta ha de ser obvia, evidente, clara y fácil de entender.
Tendría que poder "entenderla" (qué es y cómo usarla) sin agotar esfuerzos pensando en ella (1).
Pues de la suficiente; que nuestro vecino de al lado, por ejemplo, que no tiene interés
alguno por el tema de nuestro sitio y que apenas sabe cómo usar el botón Atrás, pueda ver
La página web inicial de nuestro sitio y diga, "Oh, si se trata de ". (Y con un poco de suerte
dirá también, "Pero si es ____________________. Fantástico." Pero eso es otro tema.)
___________
(1) Existe, en realidad, un aspirante inmediato: "Elimine la mitad de las palabras en todas las páginas y después
prescinda de la mirad de lo que haya quedado". Pero de esto nos ocuparemos en un capítulo posterior.
11
12
¡NO ME HAGAS PENSAR!
CAPÍTULO 1
Pero si lo que veo es una página que me hace pensar, todo lo que se me ocurre está lleno
de interrogantes.
Lo que nos hace pensar
En una página web, cualquier cosa puede detenernos y hacernos pensar innecesariamente.
Por ejemplo, los nombres de las cosas. Los típicos culpables son los nombres bonitos o
ingeniosos, los producidos por el departamento de marketing, los nombres específicos de la
empresa y los nombres técnicos que no nos son familiares.
Pongamos, por ejemplo, que un amigo me dice que Corp XYZ pretende contratar una
persona con mis mismos títulos académicos y me dirijo a su sitio web. En cuanto le echo un
vistazo a la página para hacer clic en algo, el nombre que han elegido para su sección de
puestos de trabajo lo cambia todo.
Observe que todas estas cosas siempre se encuentran en algún punto entre "Evidente para
codo el mundo" y "Completamente confuso", pero siempre existe un punto de equilibrio.
Por ejemplo, "TRABAJOS" puede parecer demasiado indecoroso para Corp XYZ, puede
que estén en "RAMA-D-TRAB" por motivos complejos de política interna o, simplemente, porque es
así como siempre se les ha llamado en el boletín de la empresa. Pero a lo que voy es que los esfuerzos
deberían ir siempre más encaminados hacia lo "EVIDENTE" de lo que podamos llegar a pensar.
Otro foco innecesario de interrogantes en nuestras mentes es el tema de los vínculos y los
botones en los que se puede hacer clic, pero que nos hacen dudar si podemos o no pulsarlos. Como
usuario nunca debería emplear ni una milésima de segundo en pensar en cosas como si se puede o no
hacer clic en esto o aquello.
13
14
¡NO ME HAGAS PENSAR! CAPÍTULO 1
Otro ejemplo: en la mayoría de los sitios de las librerías, antes de buscar un manual, tengo que
pensar en cómo quiero hacer la búsqueda (2).
Por descontado, la mayor parte de este "diálogo mental" tiene lugar en una fracción de segundo,
aunque lo vea como un proceso bastante ruidoso. Incluso algo tan inocente, aparentemente, como un
nombre conocido (desde "Buscar" a "Búsqueda rápida") es capaz de generar otro interrogante.
________________
(2) Esto sigue siendo cierto cuando lo comprobé hace un año. Sólo ahora, en 2005, la mayoría de ellos finalmente
han mejorado.
15 16
¡NO ME HAGAS PENSAR! CAPÍTULO 1
Amazon.com, por otro lado, no hace mención a la distinción entre Autor-Titulo-Palabra clave. Todo no se puede hacer obvio
Tan sólo considera lo que usted escribe y hace lo que considera tiene más sentido.
El objetivo para cada página debería ser que fuera evidente, que el usuario medio (3) sólo
AMAZON.COM con mirar supiera de lo que se trata y la forma de usarse.
Bien. "Buscar libros
en_________” No obstante, algunas veces, si hace algo en concreto que es realmente original o innovador, o
incluso, algo bastante complicado, debe conformarse con la claridad. En una página fácil de
entender hay que pensar incluso un poquito para «entenderla" (pero sólo un poquito). La
apariencia de las cosas, sus nombres bien escogidos, la disposición de la página y los textos
Escribe "Tom Clancy". Hace clic en "Ir". pequeños y cuidadosamente elaborados tienen que funcionar bien en su conjunto para conseguir
un reconocimiento casi instantáneo.
Si no puede hacer una página fácil de entender, al menos tendrá que hacerla autoexplicativa.
Después de todo, ¿por qué he de pensar en cómo quiero hacer la búsqueda? Y aún peor, ;por qué
¿Por qué es todo esto tan
tengo que tener en cuenta la forma en que el mecanismo de búsqueda del sitio quiere que yo importante?
formule la pregunta como si se tratara de un troll de malas pulgas haciendo guardia en un puente? Por extraño que parezca, no es por la razón que normalmente oye citar:
("Olvidó preguntar, `¿Puedo?'").
Podría enumerar docenas de otras muchas cosas que los visitantes del sitio no deberían ni pensar.
• ¿Dónde estoy?
Por ejemplo:
• ¿Por qué lo han llamado de esa forma? En ocasiones esto es cierto, pero se sorprendería al conocer el tiempo que algunas
Pero lo último que usted necesita es otra lista de comprobación que añadir a sus ya muchas listas personas tardan en abandonar los sitios que les frustran. Muchas personas que se encuentran
con problemas en un sitio tienden a culparse a sí mismas y no al propio sitio.
existentes de control de diseño web. Lo más importante que puede hacer es simplemente entender el
principio básico de eliminación de los interrogantes. De conseguirlo, empezará a darse cuenta de todo
lo que le hace pensar mientras usa la Web, y al final aprenderá a reconocerlo y evitarlo en todas las
páginas que cree.
_________________
(3) El usuario medio real se encuentra en un sótano herméticamente sellado en la Oficina
internacional para la normalización en Ginebra. Ya hablaremos sobre la mejor forma de pensar en
el "usuario medio".
17 18
¡NO ME HAGAS PENSAR!
CAPÍTULO
El hecho es que, en primer lugar, su sitio puede que no haya sido fácil de encontrar puede que
los visitantes no conozcan otra alternativa. La posibilidad de empezar de nuevo no parece muy
atractiva.
2
Y también está el fenómeno "Ya he esperado diez minutos al autobús, de modo que esperar un
poquito más tampoco me hace daño". Además, ;_quién va a decirnos que la competencia va a ser menos
frustrante? ¿Cómo usamos
Y entonces, ¿porqué?
Crear páginas fáciles de entender se asemeja a tener un comercio con un buen sistema de
iluminación: todo tiene mejor aspecto. Utilizar un sitio que no nos haga pensar en cosas irrelevantes
parece natural, fluido, pero el desconcierto de las cosas que no nos interesan nos terminarán minando
realmente
energía y entusiasmo (al igual que nuestro tiempo).
19
¿Por qué las cosas están en el último sitio donde las buscamos? Porque CAPÍTULO 2
cuando las encontramos dejamos de buscarlas.
-ADIVINANZA INFANTIL
Como puede imaginarse, resulta un poco más complicado que todo esto y depende del tipo
de página, de lo que el usuario intenta hacer, de la prisa que tenga, etc. Pero esta visión impuesta
D urante los últimos diez años he pasado mucho tiempo observando a la gente usar está más cerca de la realidad de lo que la gran mayoría podemos imaginar.
la Web y lo que más me ha sorprendido es la diferencia entre lo que pensamos
acerca de cómo se usan los sitios web y la forma en que realmente se utilizan. En el diseño de las páginas se cuenta con un usuario más racional y atento. Es normal
Cuando se crean sitios nuevos, creemos que cada una de las páginas van a que se asuma que todos usan la Web de la misma forma que nosotros lo hacemos y, al igual
que todos, nos inclinamos a pensar que nuestro propio comportamiento es mucho más
estudiarse minuciosamente, que nuestros textos elegantemente elaborados van a
ordenado, metódico y sensato de lo que realmente es.
leerse y entenderse de l a forma en que se ha organizado todo, sopesando las
opciones antes de decidir el vínculo en el que hacer clic. No obstante, si quiere diseñar páginas web eficientes, tiene que aprender a convivir con
Pero lo que en realidad se suele hacer (si tenemos suerte) es echar un vistazo tres factores sobre cómo se utiliza realmente la Web.
a cada nueva página, leer rápidamente parte del texto y hacer clic en el primer
vínculo que resulte interesante o se parezca, vagamente, a lo que se está
buscando. Normalmente hay partes extensas de la página que ni siquiera se Factor de vida n.° 1:
miran. No leemos las páginas; las hojeamos
Pensamos en crear "literatura de calidad" (o al menos "el folleto de un Uno de los pocos hechos bien documentados sobre el uso de la Web es que las personas tienden a
producto"), cuando la realidad del usuario está mucho más próxima a la "cartelera invertir poco tiempo en leer la mayoría de páginas web (1). Por el contrario, las hojeamos
publicitaria que pasa a 100 kilómetros por hora". rápidamente (o las leemos muy por encima) en busca de palabras o frases que capten la atención de
nuestra vista.
La excepción, sin duda, son las páginas que contienen documentos como noticias, reportajes o
descripciones de productos. Pero incluso entonces, si el documento tiene más de unos pocos
LO QUE DISEÑAMOS
PARA… LA REALIDAD... párrafos, es muy posible que se imprima, porque leerlo sobre papel es más fácil y rápido que hacerlo
en pantalla.
• Nórmalmente tenemos prisa. El uso más corriente de la Web viene motivado por el deseo de
ahorrar tiempo y, por ello, los usuarios de la Web tienden a actuar como verdaderos tiburones: o
se mueven constantemente o mueren. Simplemente, no disponemos del tiempo suficiente
más que para leer lo estrictamente necesario.
• Sabemos que no hay que leerlo todo. En la mayoría de las páginas sólo nos interesa una
fracción de lo que hay en ellas. Tan sólo buscamos las partes que se ajustan a nuestro interés y a
la tarea que tenemos entre manos; el resto es, simplemente, irrelevante. Hojear es la forma de
encontrar esas partes relevantes.
______________
(1) Consulte la columna Alertbox de Jakob Nielsen de octubre de 1997, "How Users Read on the Web",
disponible en www.useit.com
21
22
¿CÓMO USAMOS REALMENTE LA WEB?
CAPÍTULO 2
Factor de vida n.° 2:
• Somos buenos en ello. Hemos estado hojeando los periódicos, las revistas y los libros durante
toda nuestra vida para dar con esas partes que nos interesan, y sabemos que funciona. No tomamos decisiones óptimas. Nos
El efecto red se parece mucho a los clásicos dibujos animados Far Side de Gary Larson en es suficiente
cuanto a la diferencia entre lo que decimos a los perros y lo que ellos oyen. En los dibujos, el perro
(de nombre Ginger) parece escuchar atentamente lo que su ama le dice seriamente sobre no acercarse En el diseño de las páginas tendemos a contar con que el usuario hojea una página, considera
a la basura. Pero desde el punto de vista del perro, todo lo que ella dice es "bla bla GINGER bla bla las opciones disponibles y elige la mejor.
bla bla GINGER bla bla bla". No obstante, en realidad, la mayor parte de las veces no seleccionamos la mejor opción; nos
Lo que vemos al mirar una página web depende de lo que tenemos en nuestra mente, aunque sólo quedamos con la primera más razonable, estrategia que se conoce como satisficing (2). Tan
sea una fracción de lo que hay en la página. pronto como encontramos un vínculo que parece llevarnos a lo que en realidad buscamos, se
nos presenta una buena oportunidad para hacer clic en él.
LO QUE LOS DISEÑADORES CREAN... LO QUE LOS USUARIOS VEN... Ya había observado este comportamiento durante unos años, pero su significado no lo vi
claro hasta que leí el libro de Gary Klein, Sources of Power: How People Make Decisions
(Orígenes del poder: cómo las personas toman decisiones)). Klein ha estudiado durante
muchos años el modo natural de tomar decisiones: por qué gustan las actuaciones de los
bomberos, los pilotos, los maestros de ajedrez y el modo en que los operadores de grandes
plantas de energía nuclear se la juegan tomando decisiones en situaciones reales presionados por el
tiempo, objetivos imprecisos, información limitada y en condiciones cambiantes.
El equipo de observadores de Klein empezó el primer estudio (comandantes del cuerpo de bomberos
en escenas con fuego) con el modelo normalmente aceptado sobré la toma racional de
decisiones: ante un problema, la persona reúne información, identifica las posibles soluciones y
elige la mejor. El equipo de observadores empezó con la hipótesis que debido al alto riesgo y la
extrema presión del tiempo, los comandantes del cuerpo de bomberos sólo podrían comparar dos
opciones, suposición que consideraron era conservadora. Cuando sucedió, los comandantes del cuerpo
no confrontaron ninguna opción, tomaron el primer plan razonable que les vino a la cabeza e hicieron
una prueba mental rápida de los problemas. De no encontrar ninguno, sería el plan de acción que
Al igual que Ginger, nos inclinamos a centrar nuestro interés en palabras y frases que parecen
encajar mejor con (a) la tarea que tenemos entre manos, (b) nuestros intereses personales del momento llevarían a cabo.
o en curso o, por supuesto, (c) las palabras que nos causan una reacción repentina y que están
integradas en nuestro sistema nervioso, como "Gratis", "Oferta", "Sexo" o nuestro propio nombre.
______________
(2) El economista Herbert Simon acuñó el término (un cruce entre satisfactorio y suficiente) en Models of Man:
Social and Rational (Modelos de hombre: social y racional, Wiley, 1957).
(3) Prensa del MIT, 1998.
23 24
¿CÓMO USAMOS REALMENTE LA WEB? CAPÍTULO 2
Entonces, ¿por qué los usuarios no buscan la mejor opción? Factor de vida n.° 3:
• Normalmente tenemos prisa. Tal y como Klein señala, "optimizar es difícil y lleva mucho No averiguamos el funcionamiento de
tiempo; la estrategia satisficing es más efectiva". las cosas. Nos las arreglamos
• Las consecuencias por el error cometido no son importantes. A diferencia de los bomberos, las Una de las cosas más obvias a las que se llega cuando se prueba la usabilidad (tanto en sitios web,
como en el software o en los electrodomésticos) es el grado de desconocimiento que tenemos al
consecuencias por haber errado en un sitio web se resuelven con sólo
• hacer clic, o dos clics, en el botón Atrás, haciendo satisfactoria una estrategia efectiva. (El
usarlos: no entendernos su funcionamiento o la idea que tenemos de
es totalmente desatinada.
botón Atrás es la característica más utilizada de los navegadores web.) Asumiendo, claro Son muy pocas las personas que, ante cualquier aparato tecnológico, se toman un tiempo para
está, que las páginas se cargan rápidamente. Cuando no es así, tenemos que tomar nuestras leer las instrucciones. Por el contrario, seguimos adelante, nos las arreglamos, nos intentamos
propias decisiones de forma más cuidadosa (una de las muchas razones por las que a la nuestras propias historias, vagamente verosímiles de lo que hacemos y del porqué de su
funcionamiento.
mayoría de los usuarios de la Web no les gusta que las páginas se carguen despacio).
• El sopesar distintas opciones no garantiza la mejora de nuestras oportunidades. En los
Me recuerda, con frecuencia, la escena al
de El príncipe y el mendigo, donde el
sitios mal diseñados esforzarse mucho en tomar la mejor opción no ayuda nada. Suele tico príncipe descubre que su doble mendigo ha
resultar mejor hacer caso a la primera suposición y utilizar el botón Atrás estado usando el Gran Sello de Inglaterra
si no funciona. como cascanueces en ausencia del príncipe.
• Adivinar es más divertido. Supone menos trabajo sopesar las opciones, y es más rápido si (Tiene todo el sentido del mundo; para él, el
la suposición es correcta. Además, introduce un elemento optativo: la grata posibilidad de mendigo el sello sólo es un gran trozo pesado de
dar con algo sorprendente y bueno. Pero el hecho es que hacemos las cosas así.
observado a muchísima gente usar software y
sitios web de forma eficiente pero muy alejada
Con esto no se está diciendo que los usuarios nunca sopesan las opciones antes de hacer clic.
de las verdaderas intenciones de los diseñadores.
Depende de cosas como su esquema mental, de lo presionados que estén por el factor tiempo y
de la confianza que tienen en el sitio.
25
26
¿CÓMO USAMOS REALMENTE LA WEB? CAPÍTULO 2
Mi ejemplo favorito es el de las personas (y he visto, al menos, una docena de ellas ¿Por qué ocurre esto?
personalmente durante las pruebas con usuarios) que escriben el URL completo del sitio en el • No nos importa. Para la gran mayoría carece de importancia el Ilegar a enteder el
cuadro de búsqueda de Yahoo siempre que quieren ir allí (no sólo para encontrar el sitio por funcionamiento de las cosas en tanto podamos usarlas. Y no se debe a la falta de
primera vez, sino siempre que quieren ir allí, incluso varias veces al día). Si se les pregunta resulta inteligencia, sino a la escasez de cuidado y atención. En la mayor parte de los diseños de las
evidente que algunos piensan que Yahoo es Internet y que ésa es la forma de usarse (4).
cosas simplemente no nos interesa (5).
La mayoría de los diseñadores • Si damos con algo que funciona, seguimos con ello. Una vez encontramos algo que va bien
web se sorprenderían (sin importar si es acertado o no) solemos dejar de buscar una solución mejor. Usaremos
enormemente si supieran la
cantidad de personas que una mejor si nos encontramos por casualidad con otra, pero muy raramente buscamos otra.
escriben los URL en el cuadro de Siempre es interesante ver cómo diseñadores y desarrolladores web observan su primera prueba
búsqueda de Yahoo.
de usabilidad. La primera vez que ven a un usuario hacer clic en algo completamente inadecuado se
sorprenden: por ejemplo, cuando para el usuario pasa desapercibido un botón, bastante grande y gordo
Y lo curioso es que el arreglárselas no sólo es cosa de principiantes. Incluso los usuarios etiquetado como "Software" en la barra del navegador, y dice algo así como "Bien, busco software, de
técnicamente espabilados tienen, con frecuencia, lagunas asombrosas en su comprensión del modo que haré clic en 'Cosas baratas' porque lo barato siempre está bien". El usuario puede incluso
funcionamiento de las cosas. (No me extrañaría que el propio Bill Gates, en algún momento de encontrar, al final, lo que busca, pero para los observadores puede o no resultar satisfactorio.
su vida, manipulara algunos aparatos tecnológicos con la técnica de "arreglándoselas".) La segunda vez que pasa, gritan: "¡Haga sólo clic en 'Software'!". La tercera podrá ver: los
pensar: "Pero, ¿por qué nos molestamos haciendo esto?".
Y la pregunta es acertada: si la gente se las arregla de esa forma, ¿importa realmente si lo "llegan
a encender"? La respuesta es que sí importa, y mucho, porque aunque ir arreglándoselas funciona
unas veces, termina siendo ineficaz y proclive al error.
_________________
(5) A los desarrolladotes web les cuesta a menudo entender (o incluso llegar a creer) que la gente
_________ piense tealmente de esta manera, ya que a sí mismos les interesa conocer en profundidad el funcio-
(4) De la misma forma, me he encontrado con usuarios de AOL que creen claramente que AOL es Internet
namiento de las cosas.
(buenísimas noticias para Yahoo y AOL).
27 28
¿CÓMO USAMOS REALMENTE LA WEB?
CAPITULO
Por otra parte, si los usuarios "lo entienden":
• La probabilidad de encontrar lo que buscan es mayor, lo cual es positivo para ellos y para
usted.
• También es mayar la posibilidad de que entiendan el conjunto de lo que ofrece su sitio, no
sólo las partes con las que se topan.
3
• Puede, igualmente, aprovechar mejor el que vayan a las partes de su sitio que desee que
vean.
• Se van a encontrar más seguros y convencidos cuando usen su sitio y querrán volver. Podrá
permitirse un sitio "en el que se las arreglan" sólo hasta que alguien elabore otro que les
Diseño
de rótulos 101
convenza más y les haga sentir muy bien.
Si la vida le da limones...
Ahora debe estar pensando (dado el panorama rosa pálido de la audiencia de la Web y de DISEÑO DE PÁGINAS PARA HOJEAR, NO PARA LEER
cómo la utilizan): "¿Por qué simplemente no empiezo a trabajar en el local 7-11? Al menos mis
esfuerzos podrían ser reconocidos".
29
•
Sí/no sabe/de quién son/estas señales no puede haber/llegado CAPÍTULO 3
demasiado lejos/Afeitado-Burma Lo que está relacionado
-SECUENCIA DE VALLAS PUBLICITARIAS PROMOCIONANDO ESPUMA
DE AFEITAR, URCA 1935 lógicamente, también lo está
visualmente. Por ejemplo, se
S abiendo que sus usuarios pasan zumbando, hay cinco claves para segurarse que ven (y entienden)
pueden agrupar las cosas similares
bajo un mismo título, visualizándo-
las con un estilo visual similar o
la mayor parte del sitio:
•
poniéndolas en una zona
Creación de una jerarquía visual clara en cada página.
•
claramente definida.
• •
Aprovechamiento y uso de las convenciones.
División de las páginas en zonas claramente definidas. Todo se engloba visualmente bien
•
•
Dejar bien claro sobre lo que se puede hacer clic. para que queden delimitadas las
Minimizar el ruido.
partes que pertenecen a cada
bloque. Por ejemplo, el titular de
Creación de una jerarquía visual clara una sección ("Libros de
Uno de los mejores métodos para que nuestra página retenga la atención del usuario es asegurándonos computación") aparecería por
que el aspecto de las cosas en dicha página (todas las claves visuales) representen claramente y de encima del título de un libro en
forma adecuada la relación entre todas ellas: qué cosas están relacionadas entre sí y cuáles son parte
particular, englobando visualmente
de otras. En otras palabras, todas las páginas deben tener una jerarquía visual clara.
toda la zona de contenido de la
Las páginas con una jerarquía visual clara tienen
página, porque el libro es parte de la sección. El título, a su vez, abarcaría los elementos que describen
tres características:
•
el libro. .
Lo más importante ha de ser lo más
No hay nada nuevo sobre las jerarquías visuales. Todas las páginas de los periódicos, por ejemplo,
prominente. Por ejemplo, los encabe-
zamientos más importantes serán más utilizan distintos tamaños de letra, y agrupan y anidan las secciones para darnos una información útil
grandes, aparecerán en negrita, en un y práctica de todos los contenidos de la página antes, incluso, de empezar a leer cualquier palabra. En
color distintivo, rodeados por más la siguiente ilustración la foto se corresponde con su artículo porque los dos están bajo el mismo
espacio o en la parte superior de la titular y el artículo es el más importante porque tiene el titular más grande, la columna más ancha y
página (o combinando varios de estos
una posición destacada dentro de la página.
aspectos).
El titular que abarca El tamaño del titular revela
estas tres columnas en tan sólo una ojeada que
muestra, obviamente, se trata del artículo más
que dichas columnas importante.
son parte del
mismo artículo.
31 32
DISEÑO DEL RÓTULOS 101 CAPÍTULO 3
Todos los días analizamos jerarquías visuales (tanto en línea como sobre el papel), pero lo
Las convenciones nos favorecen
hacemos tan rápido que apenas nos damos cuenta que lo estamos haciendo hasta que no lo
En algún momento en nuestra juventud, y sin que nos enseñaran, aprendimos a leer un
podemos hacer más; y las claves visuales, o la ausencia de ellas, nos obligan a considerarlo.
p riódico. Si no sus palabras, sí las convenciones.
e
Una buena jerarquía visual nos ahorra tales esfuerzos a la hora de preprocesar la página, de
Aprendimos, por ejemplo, que una frase con letras grandes es normalmente un titular tuya
organizar y establecer prioridades en los contenidos, lo que nos permite captar todo de forma
historia se resume debajo de él; que el texto que hay debajo de una foto es un pie de cito que
casi instantánea. aclara el contenido de la misma o (si el tamaño de letra es muy pequeño) los créditos de la foco
Cuando una página carece de una jerarquía visual clara (por ejemplo, todo parece ser igual que revelan quién tomó dicha instantánea.
de importante), el proceso de lectura rápida, de comprensión de palabras y frases, así como la Aprendimos a reconocer las distintas convenciones de la disposición de las páginas y de su
propia idea que nos formamos cada uno de lo que es importante y de la forma en que todo está formato, hecho que nos facilitó y nos ahorró tiempo al hojear un periódico y dar con los artículos
organizado, es mucho más lento y el trabajo, mayor. que nos interesan. Y cuando empezamos a viajar a otras ciudades, aprendimos tamb én que todos losi
periódicos usaban las mismas convenciones (con pequeñas variantes). Así, resumiendo, podemos
Además, es deseable una orientación editorial en los sitios web, al igual que la existente en
afirmar que conocer las convenciones facilita la lectura de cualquier periódico.
otros medios de comunicación. El editor conoce mejor que nadie las partes más importantes, de
mayor valor o más populares del contenido del sitio; ¿por qué no se nos identifican también y Todos los medios editoriales desarrollan sus propias convenciones, las perfeccionan y crean
nos evitan problemas? otras nuevas con el transcurso del tiempo (1). La Web tiene muchas de ellas, la mayoría procedentes de
Analizar la página con una jerarquía visual
las convenciones de prensa (periódicos y revistas) aunque se siguen desarrollando otras nuevas.
resulta, incluso, un poco engañoso (por ejemplo,
Todas las convenciones nacen de la idea brillante de alguien. Si funciona lo suficientemente
si un titular abarca cosas que no son parte de él),
bien, otros sitios la imitan y termina viéndose en tantas otras partes, que no necesitan ningún tipo de
es como leer una frase construida de forma
explicación. El proceso de adopción lleva su tiempo, pero va bastante deprisa en Internet, al igual
descuidada ("Bill puso el gato sobre la mesa por
que en el resto. Por ejemplo, ya es de sobra conocida la convención del uso metafórico del carrito de
un minuto porque estaba un poco tembloroso").
la compra en los sitios de comercio electrónico y los propios diseñadores ya usan el icono del carrito
Aunque normalmente podamos entender lo que
sin etiquetarlo como "Carrito de la compra"
la frase quiere decir, de forma momentánea nos
Esta jerarquía visual engañosa sugiere que todas
hace recapacitar, pensar, cuando no debería ser
las secciones del sitio forman parte de la sección
así.
"libros sobre computadoras".
_____________________
(1) Piense por ejemplo, en los pequeños logotipos semitransparentes que empezaran a aparecer en la esquina de
la pantalla de su televisor hace unos años para que reconociera de un vistazo el canal que traba viendo. Hoy en día
están en todas partes, aunque la televisión ya existía unos cincuenta años antes que estos logotipos aparecieran.
33
34
DISEÑO DEL RÓTULOS 101 CAPÍTULO 3
• Los diseñadores son reacios, con frecuencia, al abuso de ellas. Ante la posibilidad del uso de las
convenciones, los diseñadores, por el contrario, se ven tentados a reinventar la rueda,
División de las páginas en zonas
principalmente porque sienten (y no es del todo incorrecto) que su contrato les obliga a crear algo claramente definidas -
Lo ideal sería que el usuario pudiera reproducir una versión del antiguo programa concurso de
nuevo y diferente y no algo ya está visto. (No olvidemos que los elogios de los compañeros, los
Dick Clark $25.000 Pyramid en cualquier página web bien diseñada (2). En un primer vistazo
premios y las ofertas de trabajo más llamativas raramente se basan en criterios como "al mejor uso tendría que poder señalar las zonas diferentes de la página y decir, "¡Cosas que puedo hacer en este
de las convenciones".) sitio!", "¡vínculos con las mejores historias de hoy!", "¡productos que vende esta compañía!",
"¡cosas que están locos por venderme!', "¡navegación para llegar al resto del sitio!".
Es importante dividir la página en zonas claramente definidas porque permite al usuario decidir
rápidamente en qué partes quiere centrarse y cuáles puede, con tranquilidad,
___________
(2) Dada la categoría, por ejemplo, "Cosas que usa un fontanero", los concursantes tendrían que conseguir que sus
compañeros averiguaran esa categoría dándoles ejemplos ("una llave inglesa, un corta tuberías,...").
36
35
DISEÑO DEL RÓTULOS 101 CAPÍTULO 3
ignorar. Muchos estudios sobre el rastteo inicial de una página web sugieren que el usuario decide
Algunos ejemplos favoritos es el cua.-
muy rápidamente las partes de la página que probablemente tengan la información práctica que dro de búsqueda de drkoop.com (sitio de
busca y, casi nunca, mira el resto (como si no estuvieran ahí). t:ta Koop).
Dejar bien claro Siempre que lo utilizo tengo que pensar, porque el botón que ejecuta la búsqueda
no un botón (aunque tenga dos claves visuales estupendas: dispone de la "IV'
sobre lo que se puede hacer clic [buscar], que es una de las dos etiquetas perfectas para el botón del cua-
Dado que la mayor parte de lo que la gente hace en la Web es buscar lo siguiente sobre lo que y es lo que está más próximo a dicho cuadro de búsqueda).
hacer clic. es muy importante dejar bien claro sobre lo que se puede hacer clic o no.
un pequeño gráfico con una flecha triangular que tesulta ser uno de los
Por ejemplo, en la página principal (3) de la de la Web ("haga clic aquí"). Pero la flecha apunta fuera del tex-
web del Senador Orrin Hatch durante su fallida aludiendo a otra cosa distinta, en tanto que la convención pide que
carrera presidencial en el 2000 no estaba nada y:3re el que se puede hacer clic.
claro si se podía hacer clic sobre todo o sobre :...echa a la izquierda sería sufidesaparecer el interrogante
nada. Había 18 vínculos en la página, pero sólo
dos invitaban a que se hiciera clic en ellos por el Baje el sonido hasta
aspecto que tenían: un botón grande con la
etiqueta "Click here to CONTRIBUTE!" (haga
que casi desaparezca
andes enemigos de las páginas fáciles de atrapar es el ruido visual. Existen, ::pos de
clic aquí para contribuir) y un vínculo de texto ruidos:
subrayado, "FULL STORY" (artículo completo).
abigarrado. Algunas páginas web me producen la misma sensación que
leo la carta de Publisher's Clearing House y trato de averiguar qué pega-
El resto de los vínculos eran textos coloreados y adjuntar al formulario para entrar sin suscribirme, por accidente, a cual-
el problema era que todo el texto de la página
estaba también en colores, de manera que de
da la página dama por mi atención, el efecto puede ser abrumador. Pode-¡Infinidad
un vistazo resultaba imposible disting u i r
de invitaciones para que compremos! ¡Multitud de puntos _-_Tz..2maciones y
-
empezar a hacer clic en las cosas. Si se obliga al usuario a pensar en algo que debería ser mecánico
(como, por ejemplo, sobre qué hacer clic), se está desaprovechando la reserva limitada de paciencia
y de buena voluntad con que el usuario aparece ante un sitio nuevo.
______________
(3) Orrin Hatch se merece, al menos, una nota a pie de página en la historia de la usabilidad, ya que fue (hasta lo
que conozco) el primer candidato a la presidencia en convertir la usabilidad web en un tema de campaña. En el
primer debate de candidatos republicanos televisado durante la campaña del 2000, dijo a George W. Bush: "Debo
decirle, señor gobernador, que a diferencia de su sitio web, es más fácil encontrar todo en el mío. [Risita] ¡El suyo
resulta bastante difícil de usar! No es agradable para el usuario." (Su sitio resultaba más fácil de usar.)
_______________
37 " tl la otra, pero sólo si se usa la palabra "Search" como etiqueta para el cuadro.
38
DISEÑO DEL RÓTULOS 101
4
obstante, entre los distintos términos añaden mucho ruido. Atenuar las líneas facilitaría y
aceleraría la lectura de los menús.
¿Animal,
El usuario dispone de tolerancias cambiantes para la complejidad y las distracciones; algunas personas
vegetal
no tienen problemas con las páginas abigarradas ni el ruido de fondo, pero otras sí. Cuando se diseñan
páginas web es bueno asumir que todo es ruido visual hasta que se demuestre lo contrario. o mineral?
¿POR QUÉ LE GUSTAN AL USUARIO LAS OPCIONES MECÁNICAS?
39
CAPÍTULO 4
No importa el número de veces que hay que hacer clic en algo si
por ejemplo) entra en la categoría de "mineral", no es necesario ningún tipo de meditación para
la opción es mecánica e inequívoca.
responder correctamente a la pregunta (3).
-SEGUNDA NORMA DE KRUG SOBRE USABILIDAD
Desgraciadamente, la mayoría de las opciones en la Web no están tan claras.
Los diseñadores web, así como los profesionales de la usabilidad, han estado debatiendo duran te Por ejemplo, si voy a la página de actualiza
ción de Symantec porque quiero actualizar mi
mucho tiempo, y a lo largo de los años, sobre la cantidad de veces que se espera que el usuario haga copia de Norton AntiVirus, me voy a encontrar
clic para obtener lo que quiere sin frustrarse demasiado (1). Algunos sitios tienen incluso unas normas con dos opciones antes de poder seguir.
41 42
¿ANIMAL, VEGETAL O MINERAL?
CAPÍ T U LO
Otro ejemplo: cuando intento comprar un producto o un servicio para utilizar en la oficina de
5
mi casa, me encuentro, con frecuencia, sitios que me piden que elija entre...
Casa
Oficina
¿Qué opción es la mía? La cuestión es que en la Web nos encontramos con opciones a todas horas;
tomar decisiones mecánicas es una de las cosas más importantes que logran que un sirio sea fácil de
utilizar.
Omisión
de palabras
innecesarias
EL ARTE DE NO ESCRIBIR EN LA WEB
43
CAPÍTULO 5
Elimine la mitad de las palabras en todas las páginas y luego deshágase de la mitad
Suprimir las palabras que no van a leerse tiene diversos efectos beneficiosos: gran número de capítulos interesantes sobre____________,__________y________Esperamos que los
• Se acortan las páginas permitiendo ver al usuario más de cada una con sólo un vistazo y sin
expansivo y afable), pero. que el usuario, normalmente, carece del tiempo para leerlo: prefiere ir
directamente al grano. Habría que (se debería) eliminar tanto discurso innecesario como fuera
avanzar o retroceder.
posible.
Con ello no estoy sugiriendo que los artículos de Salon.com sean más cortos de lo que en
realidad son. Sólo hablo de dos tipos específicos de escritura: discurso innecesario e instrucciones.
__________________
(1) William Strunk, Jt., y E.B. White, The Elements of Style. (Allyn y Bacon, 1979).
46
45
OMISIÓN DE PALABRAS INNECESARIAS CAPÍTULO 5
El cuestionario ha de completarse en tan sólo 2-3 En este punto aún trato de decidirme si me molesto con
minutos. el cuestionario, pero saber que es corto me dice que la
información es útil.
En la parte inferior de este formulario puede dejar, si Esta instrucción carece de utilidad para mí en este
lo desea, su nombre, su dirección y número de punto. Sería, al final del cuestionario, cuando podría
teléfono. De hacerlo, condecoremos con usted en un hacer algo con él. El único efecto que produce es que
futuro para que participe en una encuesta que nos las instrucciones parezcan más desalentadoras.
ayude a mejorar este sitio.
Si tiene comentarios o preguntas que hacer y que El hecho de no utilizar este formulario en caso de
requieran una respuesta, por favor, contacte con el necesitar una respuesta es una información importante
Servicio al cliente. y práctica. Desgraciadamente, sin embargo, no se
molestan en indicarme cómo contactar con el
www.verizon.com
Creo que un recorte agresivo es mucho más práctico: departamento de Servicio al cliente (o aún mejor, en
facilitarme un vínculo con el que poder hacerlo desde
aquí mismo).
DESPUÉS: 43 PALABRAS
Ayúdenos, por favor, a mejorar este sitio contestando a las siguientes preguntas. Sólo tardará 2-3 minutos en
completar este cuestionario.
ADVERTENCIA: Si tiene alguna pregunta o comentario que requiera respuesta no use este formulario. Contacte
entonces, por favor, con nuestro Servicio al cliente.
48
47
OMISIÓN DE PALABRAS INNECESARIAS
CAPÍTULO
Y ahora algo completamente diferente
En estos primeros capítulos, he tratado de transmitir algunos principios a modo de consejo que
considero debe recordar a la hora de crear un sitio web.
Los dos capítulos siguientes estudian la forma en que se aplican estos principios a los dos
6
desafíos mayores y más importantes del diseño web: la navegación y la página principal.
Prepárarse algo de comer porque son dos capítulos largos.
Señales
en la calle
y migas
DISEÑO DE LA NAVEGACIÓN
49
CAPÍTULO 6
Y se puede uno encontrar en una preciosa casa acompañado de una
bellísima mujer y preguntarse, "bien..., ¿cómo he llegado a todo esto?" Cuando cree que ha llegado al pasillo
—TALKING HEADS, ONCE IN A LIFETIME
adecuado, empieza a mirar detenidamente pro-
Según pasa por las puertas de Sears va pensando, "¡Hmmm! ¿Dónde están aquí las distintos estantes llenos de productos en busca
del que le interesa.
motosierras?" y, una vez dentro, empieza a buscar en los nombres de los
departamentos, en la parte superior. (Son lo suficientemente grandes para poder
Pero el proceso mismo es un poco más
leerlos, desde el otro extremo del establecimiento.)
complejo, por una razón principalmente: a
medida que entra por la puerta dedica unos
microsegundos a tomar una decisión crucial,
¿prefiere empezar a buscar las motosierras o
"¡Hmmm!", piensa, "¿Herramientas o jardín?". Dado que Sears está especializado en prefiere preguntar a alguien?
las herramientas, se dirige hacia ese departamento. Se trata de una decisión basada en un
Cuando llega a Herramientas, empieza a buscar las indicaciones al final de cada pasillo. conjunto de variables (lo familiarizado que está
con la tienda, la confianza que tiene en su
capacidad de organizar las cosas de una forma
sensata, la prisa que tiene e, incluso, lo sociable
que sea).
51 52
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Algunas personas (Jakob Nielsen los llama usuarios "con dominio de la búsqueda" (2)
buscarán, casi siempre, el cuadro de búsqueda en cuanto visiten el sitio. (Puede que sean las mismas
personas que buscan al empleado más próximo en cuanto entran en el comercio.)
_______________
(1) S. Z. "Cuddles" Sakall, o Eugene Sakall, nacido en Budapest en 1884. Irónicamente, la mayor parte de los
Observe que, aunque uno mismo empiece a buscar por sí solomismo, si las cosas no resultan, existe actores habituales del Rick's que representaban el papel de anti-nazis eran, en realidad, actores famosos del
una gran posibilidad probabilidad de terminar preguntando a alguien para que le dé unas indicaciones. escenario europeo y de la pantalla que aterrizaron en Hollywood después de huir de los Nazis.
(2) Véase "Search and You May Find" en el archivo de columnas Alertbox de Nielsen en
53 54
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Con un poco de suerte, después de hacer uno o dos clics, aparecerá una lista con el tipo de
cosas que busca:
Ahora, ya puede hacer clic en los vínculos individuales para verlos en detalle, de la misma
forma que sacaría los diferentes productos de las estanterías y leería sus etiquetas.
• Finalmente, si no encuentra lo deseado, abandona. Esto es tan cierto tanto para un sitio
web como para el almacén Sears. Uno abandona cuando está convencido de que no tienen el
producto que buscamos o, cuando, simplemente, nos frustra el seguir buscando.
55
56
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
La insoportable ligereza de echar un La primera vez podemos llegar a las motosierras siguiendo las indicaciones, pero la siguiente
vez es muy probable que pensemos:
vistazo
Buscar cosas en un sitio web y buscarlas en el mundo "real" comparten muchas similitudes. Al "¿Motosierras? Ah, sí, recuerdo dónde estaban: justo detrás de la esquina, cerca de
explorar en la Web, de alguna forma sentimos estar moviéndonos por un espacio físico y, si no, los frigoríficos".
piense en los términos utilizados para describir la experiencia: "navegar", "hojear" y " surfear" ,
Y nos dirigimos hacia allí.
por ejemplo. Del mismo modo, hacer clic en un vínculo no "carga" o visualiza' otra página;
-
arriba o abajo. Podemos hablar de movimientos hacia arriba y hacia abajo, pero se Ésta es una de las razones por la que los marcadores de los libros (atajos personales
refieren a la jerarquía (a un nivel más general o más específico). almacenados) son tan importantes, y por la que el botón Atrás representa entre el 30 y el
• Ausencia de la sensación de ubicación. En los espacios físicos, a medida que nos
40 por ciento de todas las veces que se hace clic en la Web (5).
desplazamos, vamos conociéndolos. Desarrollamos un sentido del lugar donde están las También explica el motivo de la importancia del concepto de las páginas principales, las
cosas y podemos, incluso, atajar para conseguirlas. cuales son, relativamente, lugares fijos. Cuando está en un sitio, la página principal es
como la estrella polar. El poder hacer clic en ella (la página principal) abre toda una gama de
posibilidades para poder empezar.
Esta ausencia de espacios físicos tiene sus pros y sus contras. Entre las ventajas está la
________________________ sensación de ingravidez que puede ser excitante y que explica, en parte, por qué es tan fácil
(3) Éste es uno de los motivos por los que resulta práctico que los vínculos cambien de color cuando hayamos
hecho clic en ellos. Nos da una pequeña sensación de terreno ya cubierto.
__________________
(4) Éste es uno de los motivos por los que resulta práctico que los vínculos cambien de color cuando hayamos
(5) L. Catledge y J. Pitkow, "Characterizing Browsing Strategies in the World-Wide-Web." En las
hecho clic en ellos. Nos da una pequeña sensación de terreno ya cubierto.
sesiones de la Tercera Conferencia internacional sobre la Web, en Darmstadt, Alemania (1995).
57
58
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
• Nos permite confiar en las personas que la han creado. En todo momento
sitio a otro y avetiguar dónde estamos.
Creo que hablamos de navegación web porque "averiguar dónde estamos" es un pro-
blema bastante más predominante en la Web que en los espacios físicos. En la Web estamos durante el tiempo que estamos en un sitio web tenemos en mente lo siguiente: "¿Sabe
intrínsecamente perdidos, no podemos asomarnos por los pasillos para ver dónde estamos. La esta gente lo que está haciendo?". Es uno de los factores principales que usarnos a la
navegación web compensa la ausencia del sentido del lugar incorporando la jerarquía del sitio, hora de decidir si merece la pena y si vamos a volver. Una navegación clara y bien des-
creando una sensación del tipo "allí".
arrollada es una de las mejores oportunidades con las que cuenta un sitio para dar una
Pero la navegación no sólo es una característica de los sitios web; es el propio sitio web, al buena impresión.
igual que el edificio, las estanterías y las cajas registradoras son Sears. Sin navegación no hay un
"allí" más allá.
¿Cuáles es la conclusión? La navegación web tiene que ser buena. Convenciones de la navegación w eb
• Espacios físicos como las ciudades y los edificios (e, incluso, espacios de información como
Propósitos de navegación pasados los libros y las revistas) disponen de sus propios sistemas de navegación, de sus convenciones que
han ido evolucionando con el paso del tiempo (señales en las calles, números de página, títulos
por alto de capítulos). Las convenciones especifican, de una forma aproximada, la apariencia y la
Dos son, especialmente, los propósitos evidentes de la navegación: nos ayuda a encontrar lo ubicación de los elementos de navegación, de manera que nos permiten saber en todo momento
que estamos buscando y nos dice también el lugar donde nos encontramos. lo que buscamos y dónde encontrarlo cuando lo necesitamos.
Podemos incluso hablar de un tercero: Colocarlos en un lugar estándar nos facilita el situarlos de forma más rápida con un
• Nos ofrece un lugar donde no nos perdamos. Sentirse perdido no es habitualmente algo
mínimo esfuerzo; si se estandariza su apariencia, serán más fáciles de distinguir del resto.
Por ejemplo, esperamos encontrar en las esquinas las señales de las calles, esperamos hacerlo
demasiado agradable. (,Se siente mejor "perdido" o "conociendo el camino"?) Si se ha mirando hacia arriba (nunca hacia abajo) y, esperamos, también, que tengan el aspecto de unas
hecho bien, la navegación pone el terreno bajo nuestros pies (aunque sea un terreno virtual) y señales de calle (que sean horizontales, no verticales).
nos proporciona las barandillas donde poder sujetarnos (haciéndonos sentir bien asidos).
Pero la navegación tiene, también, otras funciones muy importantes (y que se suelen pasar
por alto):
• Nos dice lo que hay en cada lugar. Con una jerarquía visible, la navegación nos presenta lo
que contiene el sitio. La navegación nos revela el contenido; descubrir el sitio puede ser más
importante, incluso, que el guiamos o situarnos.
También damos por sentado que el nombre de cualquier edificio esté encima o junto a la puerta
__________________
principal. En una tienda de comestibles esperamos ver indicaciones cerca del final de cada pasillo. En
(6) También puede ser una razón más por la que la carga lenta de páginas resulta tan molesta: ¿qué tiene de
las revistas sabemos que hay una tabla de contenidos en alguna parte en las primeras páginas, y que
divertido volar si sólo se puede ir a unos pocos kilómetros por hora?
éstas tienen un número en su margen (y que estos números tienen el mismo aspecto que en la tabla de
59
contenidos).
60
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
de dónde encuentre, pero siempre las encontrará aquí y siempre funcionarán así.
Solamente el hecho de tener La navegación en el mismo lugar en todas las páginas y tener un
aspecto coherente confirma de forma inmediata, que aún se encuentra en el mismo sitio (lo cual
es más importante de lo que puede pensar). Mantenerlo así en todo el sitio significa que, muy
probablemente sólo habrá tendrá que averiguar cómo funciona una sola vez.
La navegación coherente debería, incluir los cinco elementos que más se necesitan tener
siempre a mano:
61 62
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Del mismo modo que esperamos ver el nombre del edificio encima de la puerta de entrada,
¿Dije todas las páginas? esperamos ver el identificador del sitio en la parte superior de la página (normalmente, en la
Mentí; hay dos excepciones para la regla del "sígame a todas partes'':
• Página principal. La página principal no es como las otras páginas (tiene que soportar un
esquina superior izquierda, o, al menos, cerca)'.
Y, ¿por qué? Porque la identificación del sitio representa al sitio entero y, como tal, ocupa el
peso diferente y también ha de cumplir con unos cometidos diferentes). Tal y como
lugar más alto en la jerarquía lógica del mismo.
veremos en el siguiente capítulo, algunas veces es mejor no recurrir a la navegación
coherente en ella. Este sitio
• Formularios. En las páginas donde hay que rellenar un formulario, la navegación coherente
Secciones del sitio
Subsecciones
puede ser una distracción innecesaria. Por ejemplo, cuando pago mis compras en un sitio de Sub-subsecciones, etc.
comercio electrónico, lo único que querrá es que yo termine de rellenar los formularios. Esta página
Sucede lo mismo al registrarse, al obtener retroalimentación o al comprobar las Zonas de la página
Elementos de la página
preferencias personales.
Para estas páginas resulta muy práctico tener una versión mínima de la navegación Existen dos formas de alcanzar esta primacía dentro de la jerarquía visual de la página: convertirla
en lo más prominente dentro de esa página o que sirva de marco para todo lo demás.
coherente que cuente sólo con la identificación del sitio, un vínculo a la página principal y
Dado que no querrá poner el identificador como el elemento
cualquier servicio que pueda ser de ayuda para rellenar el formulario.
más prominente de la página (exceptuando, quizá, en la página
principal), el mejor lugar para ponerlo (donde posiblemente me
Ahora sé que no estamos en Kansas haga pensar menos) es la parte superior donde enmarcaría la
En el caso de un sitio web, su identificación es como el nombre de un edificio. En Sears sólo
página entera.
tengo que ver el nombre al entrar; una vez dentro, sé que estoy en Sears hasta que salgo. Pero en la
Web (donde el principal modo de movimiento es la tele transportación) rengo que verlo en todas las Además de estar donde creemos que debería estar, el
páginas. identificador del sitio también debe tener el aspecto de un
identificador de sitio. Esto significa que debería tener los
atributos que esperamos ver en el logotipo de una marca o la señal exterior de un almacén: unos caracteres
distintivos y un gráfico que sea reconocible, ya sea del tamaño de un botón o del de una valla
publicitaria.
________________
(7)... es decir, en las páginas web escritas en idiomas que se leen de izquierda a derecha. Los lectores de páginas
árabes o hebreas esperarán que la identificación del sitio esté en el lado derecho.
63 64
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Las secciones Las utilidades varían según los diferentes tipos de sirios. En un sitio corporativo o de
Las secciones (denominadas, con frecuencia, navegación principal) son los vínculos a las comercio electrónico, por ejemplo, podrían ser las siguientes:
secciones principales del sitio: el nivel superior en la jerarquía del sitio. Acerca de nosotros Descargas Cómo comprar Registro
Archivos Directorio Trabajos Búsqueda
Pagar y salir Foros Mi ____________Carrito de la compra
Información Preguntas y respuestas Noticias Suscripción
En la mayoría de los casos, la navegación coherente dispondrá, además, de un espacio para de la compañia FAQ
visualizar la navegación secundaria: la lista de subsecciones de la sección actual.
Contacte con nosotros Ayuda Seguimiento Mapa del sitio
del pedido
Servicio al cliente Página principal Notas de prensa Localizador del
establecimiento
Tablón de anuncios Relaciones de inversores Política de privacidadSu cuenta
Son cosas que nos pueden ayudar a usar el sitio (como Ayuda, Mapa del sitio o Carrito de la
Dé tan sólo tres taconazos y diga:
compra) o nos pueden proporcionar información sobre su editor (como Acerca de nosotros y no hay com o est ar en casa
Uno de los elementos más cruciales en la navegación coherente es el botón o vínculo que
Contacte con nosotros).
me lleva a la página principal del sitio.
Al igual que las señales en un establecimiento, la
Tener el botón Inicio a la vista constantemente tranquiliza en caso de perderse. Siempre puedo volver
lista de utilidades debe ser ligeramente menos
a empezar, como si pulsara el botón Restaurar o utilizara la carta "Queda libre de la cárcel".
prominente que las secciones.
Está empezando a surgir una convención por la que el identificador del sirio dobla su
funcionalidad al aparecer también como botón que lleva a la página principal. Se trata de una idea
muy válida que debería ponerse en práctica en todos los sitios, pero un número bastante asombroso de
usuarios ni siquiera lo conoce.
66
65
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Por ahora, probablemente, es bueno:
Creo que una de las razones fundamentales del éxito de Amazon es la solidez de su búsqueda. Tal y
Se trata de una fórmula muy sencilla: un cuadro de edición, un botón y la palabra "Buscar". No se lo como mencioné en el Capítulo 1, Amazon fue una de las primeras librerías online (si no fue la
ponga difícil; aténgase a la fórmula y evite, en particular, lo siguiente: primera) que abandonó la opción "Título/Autor/Palabra clave" de su cuadro de búsqueda y que acepta
Palabras muy elaboradas. El usuario buscará la palabra "Buscar", de modo que use "Buscar" y no cualquier cosa que se escriba en él.
"Encontrar", "Encontrar rápidamente", "Búsqueda rápida" o "Palabra clave de búsqueda". (Si utiliza
"Buscar" como etiqueta del cuadro, utilice las palabras "Ir á' como nombre del botón.) He realizado diversas pruebas con usuarios de librerías online; dejándoles total libertad, lo que
Instrucciones. Si se atiene a la fórmula, cualquiera que haya usado la Web durante unos días sabrá qué inevitablemente hacían en primer lugar era buscar un libro que les permitiera ver que la cosa
hacer. Añadir "Introduzca una palabra clave" es como decir "Déjeme un mensaje después de escuchar funcionaba. Y después de muchas pruebas, el resultado me enseñó que la primera experiencia del
la señal" en su contestador automático. Hace un tiempo era necesario, pero ahora sólo le haría parecer usuario con Amazon se traducía en una búsqueda con éxito, en tanto que en los sitios donde se
un poco negado. ofrecían al usuario varias opciones, éste se quedaba sorprendido ante el fracaso de la búsqueda porque
_______________ había malinterpretado esas opciones.
(8) Desgraciadamente, tengo que decir "potencial", porque en la mayoría de los sitios las posibilidades de que una
búsqueda ofrezca unos resultados prácticos son sólo aún del 50 por ciento. El uso de la búsqueda es un tema
importante en sí mismo y el mejor consejo que puedo ofrecer es que se haga con una copia de Information
Architecture for the World Wide Web, de Louis Rosenfeld y Peter Morville (O'Reilly, 2002), y se tome con interés
todo lo que dicen sobre la búsqueda.
68
67
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
... y páginas de ejemplo para la página principal y los dos niveles superiores.
¿Se hace una idea de cuál fue el efecto de esta búsqueda sobre mi confianza en IMDB.com? Página principal Página a nivel de sección Página de subsección
En parte, creo, porque una buena navegación multinivel es bastante difícil de diseñar (dado Ahora, debo admitir que tengo una especial debilidad por este tipo de trato porque
el limitado espacio de la página y el número de elementos que hay que encajar). procedo de Boston y allí eres todo un afortunado si puedes leer las señales de la calle a
En parte porque los diseñadores normalmente no disponen del tiempo suficiente para tiempo para efectuar el giro.
desentrañar los dos primeros niveles.
En parte porque simplemente no parece tan importante. (Después de todo, ¿es realmente
importante? No es fundamental, ni siquiera es secundario.) Hay una tendencia a pensar que si el
usuario ha llegado tan lejos en el sitio, será capaz de entender su funcionamiento.
• Las señales de las calles son grandes. Al parar en un cruce se puede leer la señal de la menos sobre la que hay que trabajar en el diseño de la página, pero no es suficiente. El nombre de la
siguiente calle que cruza. página también es necesario.
• Las señales están en el lugar correcto (suspendidas sobre la calle por la que vamos, con lo • El nombre ha de estar en el lugar adecuado. En la jerarquía visual de la página, el nombre
cual, todo lo que hay que hacer es mirar un poco hacia arriba). de ésta debería aparecer enmarcando el contenido que es único para esa página. (Después de
todo, es a lo que se está dando un nombre, no a la navegación o a los anuncios, que son sólo
parte de la infraestructura.)
______________
(9) Véase «Usted está Aquí", posteriormente en este capítulo.
72
71
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Claro que algunas veces tendrá que tomar una solución de compromiso,
normalmente, por las limitaciones del espacio. Si las palabras en las que hago
clic y el nombre de la página no se corresponden exactamente, lo más
importante es que (a) se parezcan 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
Gifts for Him (regalos para él) y Gifts for Her (regalos para ella), me
encuentro con nombres de páginas "gifts for men" (regalos para hombres) y
• El nombre ha de ser prominente. Hay que buscar la combinación de posición, tamaño, "gifts for women" (regalos para mujeres). Las palabras no son idénticas, pero se
color y caracteres para que el nombre diga: "Éste es el encabezamiento para toda la página". En parecen tanto que ni me siento tentado a pensar en la diferencia.
la mayoría de los casos será el texto más grande de la página.
• El nombre debe corresponderse con aquello sobre lo que he hecho clic. Aunque nadie lo
“Ust ed est á aquí”
Una de lag formas que tiene la navegación de contrarrestar la sensación inherente a la Web de
menciona, todos los sirios hacen un contrato social implícito con sus visitantes:
"perdido en el espacio" es mostrándome dónde estoy en un esquema, igual que el indicador "Usted
El nombre de la página se corresponderá con las palabras en las que he hecho clic
está aquí" lo hace sobre el plano de un centro comercial (o en un Parque Nacional).
para llegar hasta allí.
En otras palabras, si hago. clic en un vínculo o botón que dice "Puré de patatas caliente", el sitio
me llevará a una página de nombre "Puré de patatas caliente".
Puede que parezca trivial, pero en realidad se trata de un acuerdo crucial. Cada vez que lo
viola un sitio, me veo obligado a pensar, aunque sean unas milésimas de segundo: "¿Por qué son
esas dos cosas diferentes?". Si hay una mayor discrepancia entre el nombre del vínculo y el
nombre de la página o muchas discrepancias menores, mi confianza en el sitio (y la competencia
de las personas que lo han publicado) se verá disminuida.
EN LO QUE
HAGO CLIC A LO QUE LLEGO
73 74
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Breadcrumbs (migas)
En la Web esto se resuelve realzando mi situación actual en cualquier barra de Al igual que los indicadores "Usted está aquí", las migas de pan nos indican dónde
estamos. (Algunas veces, incluso, incluyen un texto corno, por ejemplo, "Usted está
navegación, lista o menú que aparezca en la página.
aquí".)
Se llaman migas de pan porque nos recuerdan a la pista de migas de pan que Hansel iba
dejando caer en el bosque para poder volver, junto a Gretel, a casa (10).
añadiendo más ruido a la página. Una forma de asegurar que sobresalgan es aplicando Podría decirse que los marcadores de libros se parecen mucho a las migas de pan de los
más de una distinción visual; por ejemplo, un color diferente y texto en negrita. cuentos, ya que se van dejando caer a medida que avanzamos, previendo la posibilidad de
volver sobre nuestros pasos en algún momento. O podría sugerirse que los vínculos
Las claves visuales demasiado sutiles son realmente un problema muy común. Los
visitados (vínculos que han cambiado de color para reflejar que se ha hecho clic en ellos)
diseñadores adoran las claves sutiles, porque la sutileza es uno de los rasgos del diseño se parecen más a las migas de pan porque señalan el camino que hemos tomado y, si no se
sofisticado. Pero los usuarios web por lo general tienen tanta prisa que no reparan en vuelven a visitar pronto, nuestro explorador (como los pájaros) los hará desaparecer (12).
ellas. ______________
En general, si usted es diseñador y piensa que una clave visual destaca suficiente, (10) En la historia original, la madrastra de H&G convence al padre para que los pierda en el bosque durante los
probablemente significa que debe hacerla el doble de grande. malos tiempos y así la familia entera no morirá de hambre. El suspicaz e ingenioso H echa a perder el plan porque
va dejando caer piedrecitas en el camino que les devuelve a casa. La siguiente vez (!) es obligado a usar miguitas
de pan en lugar de las piedrecitas para que los pájaros las coman antes que H&G puedan volver a retomar sus
pasos de vuelta. La historia, finalmente, deriva en un intento de canibalismo, en un gran robo, en una inmolación,
pero básicamente trata de lo desagradable que resulta perderse.
(11) Realmente, la verdad es un poco más complicada que esto. Si está interesado, Keith Instone ofrece un
tratamiento excelente del tema de las migas en la dirección
(12) Los vínculos ya visitados terminan expirando y volviendo a su color original si no vuelve a visitarlos. El
periodo de caducidad predeterminado varía entre 7 y 30 días, dependiendo del explorador que utilice. Ojalá se me
75 hubiera ocurrido a mí mismo la conexión imaginaria entre vínculos visi-
76
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
About.com cuenta con la mejor puesta en práctica de migas de pan que conozco e ilustra
Hasta hace muy poco, las migas de pan era algo muy raro que sólo se encontraba en los sitios algunas de las "mejores prácticas".
con enormes bases de datos y con jerarquías muy profundas, como el directorio web de • Póngalas en la parte superior. Las migas
Yahoo... parecen funcionar mejor si están en la parte
superior de la página, encima de todo.
Hm >Arta > Visual Arta > Photography > Nature and > Photographers > Creo que se debe a que literalmente se
Personal Exhibits
www.yahoo.com marginan ( h a c i e n d o q u e t e n g a n u n
.., o como injertos en la parte superior de los grandes conglomerados de tipo multisitio como aspecto de accesorio, como los números de
CNET... las páginas en los libros o revistas). Si las
CNET About CNET Editorial and Disclosure Policy
migas
www.cnet.com
CNET : Carnes Action : Unreal Tournament
www.gamecenter.com
CNET Downloads PC Utilities File & Disk Management se desplazan hacia la parte inferior de la página, acaban compitiendo con la navegación
www.download.com principal. ¿Cuál es el resultado? Que me hace pensar. ("¿Cuál es la navegación real? ¿Cuál
debería estar usando?")
donde ofrecen a los usuarios cierta percepción de su situación dentro del gran esquema de las • Utilice el signo > entre los distintos niveles. Por el método de prueba y error se ha demostrado
cosas, al tiempo que permiten que los subsitios conserven sus esquemas de navegación independientes, que el mejor separador entre los distintos niveles es el carácter "mayor que" (>).
y, con frecuencia, incompatibles.
Pero actualmente aparecen cada vez en más sitios, algunas veces en lugar de una nave.
gación bien desarrollada.
Los dos puntos (:) y la barra inclinada son factibles, pero > es más satisfactorio y evidente
Para la mayoría de los sitios, no creo que sólo las migas de pan constituyan un buen esquema de
(probablemente porque, visualmente, sugiere un movimiento hacia delante y por los
navegación. No son un buen sustituto para mostrar, al menos, las dos capas superiores de la jerarquía,
distintos niveles).
• Utilice un tipo de letra pequeño. Una vez más, para señalar que sólo se trata de un accesorio.
porque no revelan lo suficiente. Dan una idea, una visión, pero se trata más bien de una visión
parcial limitada. No le estoy diciendo que no utilice sólo migas, sino que no son una forma
• Utilice las palabras "Usted está aquí". La mayoría de los usuarios entiende lo que son las
buena de presentar la mayoría de los sitios.
No me malinterprete. Si están bien realizadas, las migas de pan son claras y fáciles de entender, migas, pero aunque esté en letras pequeñas, no afecta a su claridad.
no ocupan demasiado espacio y proporcionan una forma muy acertada, conveniente y coherente de • Ponga en negrita el último término. El último nombre de la lista debería ser el de la página
hacer dos de las cosas que con más frecuencia se necesitan: retroceder un nivel o ir a la página actual y resaltándolo en negrita le otorgará el relieve que se merece.
principal. Creo que son de mucho valor como parte de una dieta equilibrada, como un accesorio a
un esquema sólido de navegación; en particular, para los sitios grandes con una jerarquía
profunda o cuando hay que relacionar un conjunto de subsitios.
_____________________
tados y pájaros que se comen las miguitas de pan, pero fue Mark Bernstein quien primero lo escribió
en 1988. Yo lo encontré por casualidad en el libro de Peter Glour Elements of Hypermedia Design
que se puede leer de forma gratuita en
77 78
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
• No las utilice en lugar del nombre de la página. Con frecuencia se ha intentado que el último y…
término de la lista de migas tenga una doble función y evitar así tener un nombre de 800.com
página separado. Algunos sitios han intentado hacer el último término de la lista el más Amazon.com
grande. Beyond.com bn.com
Borders.com
CNET : Games : Action : Unreal Tournament
www.gamecenter.com Buy.com CDNOW
Parece que puede funcionar, pero no es así, probablemente porque se opone a nuestras
eToys.com
expectativas de que los encabezamientos vayan a la izquierda o en el centro, no «colgados" en
Fatbrain.com
medio de la página al final de una lista.
Fidelity.com
Cuatro razones por las que me encantan las fichas LandsEnd.com
Todavía no he podido probarlo, pero sospecho,
Pets.com
convencido, que Leonardo da Vinci inventó los
Quicken.com
separadores con etiquetas a finales del siglo xv. Al igual
Schwab.com
que los dispositivos de la interfaz, las solapas de ficha
Snap.com
son, claramente, producto de un genio (13).
ToysRUs.com
Las fichas son uno de los pocos casos en los que se
Creo que son una opción maravillosa para navegar por los sitios grandes. Aquí están las razones:
• Son muy Jaras y fáciles de entender. No he visto nunca a nadie (sin importar lo ignorante
recurre a una metáfora física en la interfaz del usuario y
funciona (14). Al igual que los separadores con etiqueta
que sea con los computadores) que vea una interfaz con fichas y diga, "iHmmm! ¿Para qué
en las carpetas de tres anillas o las etiquetas en las
sirven estas cosas?".
• Son difíciles de perder de vista. Cuando hago pruebas consistentes en "apuntar y hacer clic"
carpetas de un cajón archivador, separan todo lo que
pertenece a esa sección y facilitan que se abra una sección
a los usuarios, me sorprendo de la frecuencia con que pasan por alto las barras de botones
con sólo tomar la etiqueta (o, en el caso de la Web,
situadas en la parte superior de la página web (15). Pero dado que las fichas son visualmente tan
haciendo clic en ella). distintivas, resulta bastante difícil que se pasen por alto. Dado también que es muy difícil que
Muchos sitios han empezado a utilizar las fichas para la navegación. se las confunda por algo que no sea navegación,
crean el tipo de separación tan obvia a primera vista deseada entre la navegación y el contenido.
•
•
_____________ Están muy logradas. Los diseñadores web siempre están luchando porque las páginas sean
(13) Nota para uno mismo: compruebe si Microsoft empezó a usar los cuadros de diálogo tabulados antes que más interesantes visualmente. Si se hacen correctamente (véase a continuación) las fichas
Bill Gates comprara el cuaderno de notas de Leonardo da Vinci.
pueden añadir un estilo pulido y cumplir un objetivo útil.
(14) La idea de arrastrar cosas al icono de una papelera de reciclaje para eliminarlas (concebido en Xerox PARC y
_____________
divulgado por Apple) es la otra cosa que me viene a la mente. Desgraciadamente, Apple no se pudo resistir a la
(15) No debería sorprenderme. Me las arreglé con My Yahoo docenas de veces antes de caer en la cuenta de que la
idea de enturbiar las aguas metafóricas usando la misma acción de arrastrar a la papelera de reciclaje para
fila de vínculos de la parte superior de la página eran más secciones de My Yahoo. siempre había supuesto que My
expulsarlos disquetes (resultando, a la larga, en millones de globos idénticos con pensamientos del tipo "Espere,
Yahoo era simplemente una página y que los vínculos eran otras partes de Yahoo.
¿no se borrará?").
79
80
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
• Sugieren un espacio físico. Las fichas crean la ilusión de que la etiqueta activa se desplaza
A la larga se han visco forzados a llevar la metáfora de la ficha hasta el punto de ruptura
incluso efímera versión de dos filas estaba notablemente bien diseñada.
físicamente para colocarse en primer plano.
Todo el que esté pensando en usar fichas debería estudiar cuidadosamente el diseño
de fichas clásicas de Amazon, e imitar fielmente los tres atributos claves:
Tienen que estar perfectamente dibujadas. Para que las fichas funcionen a la
Es un truco fácil pero efectivo, probablemente, porque se basa en una clave visual que detectamos
fácilmente ("unas cosas delante de otras"). De alguna forma, el resultado es una sensación perfección, los gráficos tienen que producir la ilusión visual de que la etiqueta de la ficha
más fuerte de lo habitual por la que vemos que el sitio está dividido en secciones y nos efectiva está por delante de las demás. Ésta es la característica principal que las convierte
encontramos en una de ellas. en fichas (incluso más que la forma distintiva que tienen de solapa) (16).
Para crear esta ilusión, la solapa activa tiene que tener un color diferente o una
sombra que contraste y debe conectar físicamente con el espacio debajo de ella. Esto es
Si le agrada t ant o Amazon, porqué lo que la solapa activa "pasa" a la parte delantera.
no se casa con ella?
• Al igual que ocurre con otras buenas prácticas web, Amazon fue uno de los primeros sitios en MAL: Sin conexión, no pasa a primer plano.
usar los separadores en forma de fichas para la navegación y el primero que lo consiguió
MEJOR: Conectada, pero sin contraste. El
correctamente. Con el paso del tiempo han continuado refinando y perfeccionando su
implementación hasta alcanzar casi la perfección, si bien continúan incorporando fichas a medida paso a primer plano es limitado.
que se expanden hacia diferentes mercados. EL MEJOR: ¡Bien! La tenemos en primer
plano.
_________________
(16) Sea lo que sea lo que haga, no utilice gráficos con forma de solapas si no funcionan como - Internet Movie
Database (propiedad de Amazon, y de alguna forma, uno de los mejores sitios de.la Web) comete este error.
Los botones de la parte superior de todas las páginas tienen el aspecto de solapas, pero actúan botones normales.
81 82
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
• Al entrar en el sitio hay una etiqueta seleccionada. Si no hay ninguna ficha seleccionada al
entrar en un sitio (como en Quicken.com, por ejemplo), pierdo el impacto que producen las
• Están codificadas mediante colores.
fichas en los cruciales primeros segundos, cuando en realidad, más cuenta.
Amazon utiliza un color de solapa
diferente para cada sección del sitio, y
utiliza ese mismo color en los demás
elementos de navegación de la página
para agruparlos.
La codificación mediante colores de Amazon siempre ha tenido una ficha seleccionada en su página principal; durante mucho
las secciones es una idea bastante tiempo ha sido la de los libros.
buena (siempre que no se confíe en que
todos lo han notado). Algunas personas
(aproximad a m e n t e 1 d e c a d a 2 0 0
mujeres y 1 de cada 12 hombres, en
particular por enci ma de los 40 años)
Sin embargo, a medida que el sitio perdió un poco su centro de interés en los libros, dieron a la
simplemente no son capaces de detectar los distintos colores porque son daltónicos. página principal una ficha propia (denominada "Welcome").
83
84
CAPÍTULO 6
SEÑALES EN LA CALLE Y MIGAS
• ¿Dónde estoy en el esquema de las cosas? (Indicadores del tipo "Usted está aquí".)
3. Secciones y subsecciones.
4. Navegación local.
• ¿Cómo busco algo? 5. Indicador/es "Usted está aquí".
6. Búsqueda.
¿Cuál es el motivo de las dudas? El tan frecuente olvido de que la experiencia en la Web es más
como tener la sensación de estar presionado que como seguir un camino en un jardín. Cuando se Identificador del sitio
diseñan las páginas es muy tentador pensar que el usuario llegará a ellas si empieza en la página Búsqueda
principal y sigue las rutas agradables y cuidadas que usted ha dispuesto. Pero, en realidad, lo que
Secciones
ocurre es que si nos quedamos con frecuencia en medio de un sitio sin tener idea alguna de dónde
estamos es porque hemos seguido un vínculo desde un motor de búsqueda u otro sitio y nunca antes
hemos visto el esquema de navegación de ese sitio (17) Nombre de la página
¿Y lo de los ojos vendados? Querrá que su visión sea un poco borrosa porque el verdadero
ensayo no es acerca de si puede entenderlo o no con suficiente tiempo y con un examen próximo. El Navegación local
estándar debe ser que estos elementos salgan de la página de una forma tan clara que no importe si
se está mirando muy de cerca o no. Querrá únicamente confiar en el aspecto global de las cosas, no
en los detalles (18).
__________________
(17 ) Esto es aún más cierto hoy que hace cinco arios, debido a que muchos usuarios todo lo que hacen en la Web
empieza por una búsqueda en Google.
(18) Toro Tullis, de Fidelity Investmenrs, llevó a cabo un experimento ingenioso en la misma línea para evaluar la
eficacia de diferentes plantillas de página. Rellenó todas las plantillas con textos absurdos y pidió a los usuarios
que identificaran, simplemente por su aspecto, distintos elementos, como el título de la página y la navegación del
sitio.
85
86
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Ahora, realice la prueba con las cuatro páginas web que se presentan a continuación y
compare sus resultados con los míos (los encontrará a continuación de las pantallas de prueba, al
final del capítulo).
Cuando haya terminado, pruebe el mismo ejercicio en una docena de páginas al azar de
diferentes sitios. Es una forma estupenda de desarrollar su propio sentido de lo que funciona y de
lo que no.
88
87
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Usted está aquí
¿QUÉ LE PASA
A ESTA PÁGINA?
____________________________________________________________
MI VERSIÓN
He añadido...
• Un nombre a la página
en la parte superior del
espacio de contenidos.
• Un indicador "Usted está
aquí" en la lista de la iz-
quierda.
• Un vínculo de búsqueda
en la lista de utilidades.
89 90
SEÑALES EN LA CALLE Y MIGAS CAPÍTULO 6
Puse el vínculo Audio/Video por encima del Hay una serie de dilemas subyacentes aquí que hay
nombre de la página, de forma que la jerarquía que resolver antes de pensar, incluso, en la distribución
También hice un poco más grande el nombre de la Todo lo que he hecho ha sido comprimir la parte
página y lo desplacé hacia la izquierda, en lugar superior un poco e intentar que se distinga el espacio
de centrarlo. (En una jerarquía visual, creo que del contenido más fácilmente añadiendo un color de
Por la misma razón coloqué el botón de búsqueda página estuviera colocado de tal manera que se pudiera
92
91
SEÑALES EN LA CALLE Y MIGAS
7
A ESTA PÁGINA?
No le pasa gran cosa. ¿Tuvo problemas para
encontrar algo?
Lo apoyo con mi caso.
El primer
paso para
MI VERSIÓN
No hay casi nada que mejorar aquí.
la recuperación
Rehice la búsqueda. (Desconozco por qué
usaron "Enter Keywords" aquí cuando se
sirven de la simple palabra "Search" en casi
es admitir
todas las demás partes del sitio.)
Y si va a ofrecer una búsqueda, siempre es
mejor que incorpore la palabra "de" para que
que ha perdido
la frase sea: "Búsqueda _____________
de ___________________”.
También agrandé un poco el tamaño del
el control
nombre de la página para que la división
entre contenido y los espacios de navegación
fuera aún más clara.
de la página
principal
DISEÑO DE LA PAGINA PRINCIPAL
93
Lucy, tienes que dar una explicación. CAPÍTULO 7
-DESI ARRAZ, COMO RICKY RICARDO
• Sugerencias. Como la portada de una
revista, la página principal necesita
convencerme con sugerencias de "lo bueno"
que hay en su interior. Los anuncios de
contenido exponen los últimos, mejores y más
populares contenidos, como las mejores
• Transacciones. Parte del espacio de la página principal tiene que destinarse a anuncios,
siempre hay una...cosa...más.
Piense en todas las cosas que debe tener una página principal: promociones cruzadas y transacciones bilaterales que se hayan hecho.
• Identidad y misión del sitio. De repente, la página principal tiene que decirnos qué es este • Accesos directos. Las partes de contenido que se solicitan más frecuentemente
sitio y para qué es, y si es posible, por qué deberíamos estar aquí y no en otro sitio. (actualizaciones de software, por ejemplo) pueden merecer sus propios vínculos en la página
• Jerarquía del sitio. La página principal tiene que dar una visión conjunta de lo que ofrece el
principal de modo que la gente no tenga que buscarlas.
sitio, tanto del contenido ("¿Qué puedo encontrar aquí?") como de sus características • Registro. Si el sitio utiliza registro, la página principal necesita vínculos para que los nuevos
usuarios se registren y para que los antiguos firmen, y una forma de hacerme ver que ya estoy
("¿Qué puedo hacer aquí?") y cómo está todo organizado. Habitualmente de esto se encarga
registrado ("Bienvenido de nuevo, Steve Krug").
la navegación coherente.
• Búsqueda. La mayoría de los sitios necesitan tener un cuadro de búsqueda muy visible en la
Además de estas necesidades concretas, la página principal también tiene que cumplir algunos
• Mostrarme lo que estoy buscando. La página principal necesita hacer obvio cómo conseguir lo
objetivos abstractos:
página principal.
que quiero, suponiendo que está en alguna parte del sitio.
95 96
EL PRIMER PASO PARA LA RECUPERACIÓN ES ADMITIR QUE HA PERDIDO… CAPÍTULO 7
• ... y lo que no estoy buscando. Al mismo tiempo, la pagina principal debe exponerme
algunas de las cosas maravillosas que el sitio tiene que ofrecer en las que puedo estar
interesado, incluso aunque no las esté buscando.
• Mostrarme dónde empezar. No hay nada peor que encontrar una página principal y no
tener idea de por dónde comenzar.
• Establecer credibilidad y confianza. Para algunos visitantes, la página principal será la
única oportunidad de que su sitio cause una buena impresión. :
__________________
(1) Término heredado de los periódicos, que se refiere a la parte de la página que se puede ver sin
desplazarse. 98
97
EL PRIMER PASO PARA LA RECUPERACIÓN ES ADMITIR QUE HA PERDIDO… CAPÍTULO 7
Tan rápido y claro como sea posible, la página principal tiene que responder las cuatro preguntas LAS CINCO EXCUSAS PRINCIPALES ADMISIBLES PARA NO EXPLICAR LA
que tengo en mente cuando entro en un sitio por primera vez: DESCRIPCIÓN GENERAL EN LA PÁGINA PRINCIPAL
Cuando está construyendo un sitio, es tan obvio para usted lo que está
ofreciendo y por qué es insensatamente grande que es dificil recordar que
no es obvio para todo el mundo.
Sin embargo, si "lo consigo", será mucho más probable que interprete correctamente todo lo Si el sitio es muy complejo o nuevo, un vínculo "¿Nuevo en este sitio?"
que veo en la página, lo que aumenta en gran medida mis posibilidades de tener una experiencia destacado es una buena idea. Pero no sustituye a la explicación de la
satisfactoria y exitosa. descripción general, ya que la mayoría de los usuarios no harán clic en
No me malinterprete: todo lo demás es importante. Usted necesita impresionarme, convencerme, ella hasta que ya lo hayan intentado, y fallado, por sí mismos. Y para
dirigirme y exponerme sus negocios. Pero estas cosas se cuelan por las grietas; siempre habrá mucha entonces, puede que ya estén desesperanzadamente confundidos.
gente, dentro y fuera del equipo de desarrollo, viendo lo que hacen. Con demasiada frecuencia, sin
embargo, nadie tiene un interés creado en conseguir el punto principal de cruce.
_______________
(2) Wall Street Journal 30 de marzo de 2000:
Para su debut en la Super Bowl de 1999, Outpost.com aireó el ahora infame anuncio mostrando "jerbos"
disparados por un cañón. (Estos han sido sustituidos por) anuncios serios en los que el cómico Martin explica a los
consumidores lo que Outpost.com vende (computadores, tecnología y equipamiento electrónico). "Pudimos
haberle dicho eso, pero disparamos jerbos con un cañón", bromea. "¿En qué estaríamos pensando?...
99
100
EL PRIMER PASO PARA LA RECUPERACIÓN ES ADMITIR QUE HA PERDIDO… CAPÍTULO 7
Cómo dar a entender el mensaje Aquí tiene unas pautas para dar a entender el mensaje:
Todo en la página principal puede contribuir a nuestro entendimiento de lo que es el
• Utilice tanto espacio como sea necesario. La tentación es no querer utilizar cualquier espacio
sitio. Sin embargo, hay dos lugares importantes en la página donde esperamos encontrar frases porque (a) usted no puede imaginar que cualquiera no sabe qué es este sitio, y (b) todo el
explícitas de lo que es el sitio. mundo pide utilizar el espacio de la página principal para otros fines.
• La línea de etiquetas. Uno de los espacios más valiosos es situado al lado derecho del
identificador del sitio. Cuando vemos una frase visualmente conectada al identificador, Tome como ejemplo Essential.com. Debido a su nueva propuesta (elija sus propios proveedores de
sabemos que intenta ser una línea de etiquetas, y así lo leemos como una descripción del utilidades), Essential.com tiene muchas explicaciones que dar, de modo que ellos utilizan
sitio entero. Veremos estas líneas con detalle en la siguiente sección.
sabiamente mucho espacio de la página principal para hacerlo. Casi todos los elementos de la
página ayudan a explicar o reforzar sobre qué trata el sitio..
1. Línea de etiqueta prominente.
2. Prominente pero breve
anuncio de bienvenida. Las
palabras "Why", "How" y "Plus"
se utilizan hábilmente para for-
mar una lista, de manera que no
parezca un gran e imponente
bloque de texto.
3. El encabezado "Shop by
Department" aclara que el fin de
Hay una tercera posibilidad: puede utilizar el espacio completo a la derecha del identi-
ficador del sitio en la parte superior para extenderse en su misión. Pero si lo hace, tiene que
asegurarse de que las señales visuales dejan claro que toda esta área es un modificador del
identificador del sitio y no un anuncio, ya que los usuarios esperarán ver un anuncio en este
espacio y probablemente lo ignorarán.
101 102
EL PRIMER PASO PARA LA RECUPERACIÓN ES ADMITIR QUE HA PERDIDO… CAPÍTULO 7
• ... pero no utilice más espacio del necesario. Para la mayoría de los sitios no hay necesidad En un sitio web, la tagline aparece debajo, encima o al lado del identificador del
de usar mucho espacio para comunicar la propuesta básica, y los mensajes que ocupan la sirio.
página principal entera son habitualmente demasiado grandes como para que la gente
se interese por ellos. Hágalos cortos, lo suficiente para ir al grano, y nada más. No se
sienta obligado a mencionar cualquier gran característica, sólo las más importantes
(máximo cuatro).
• No use una frase relativa a la misión de la empresa como anuncio de bienvenida. Muchos
sitios llenan su página principal con frases relativas a la misión corporativa que suenan Las taglines constituyen una forma muy eficaz de dar a encender su mensaje,
como si estuvieran escritas por una finalista de Miss América.: "XYZCorp le ofrece
porque están en un lugar de la página donde la mayoría de los usuarios esperan encontrar
soluciones de ámbito mundial en el próspero campo de bla, bla, bla...". Nadie las lee.
• Es una de las cosas más importantes que deben probarse. No puede confiar en su propio
una descripción concisa del objetivo del sitio.
criterio sobre esto. Debe mostrar la página principal a personas ajenas a su empresa para Algunos de los atributos que debe buscar al seleccionar una tagline son los siguientes:
•
que le digan si el diseño está cumpliendo su cometido, porque el "enfoque principal" es lo
Las buenas taglines son claras e informativas.
único que nadie dentro de la organización notará que se ha perdido.
Una tagline es la frase medular que caracteriza a la empresa entera, resumiendo lo que es y
lo que la hace especial. Las taglines existen desde hace mucho tiempo en publicidad, espectáculos y
publicaciones: "Miles de VCRs a precios imposibles", "Más estrellas que en el cielo" (3), y All the Las taglines buenas tienen la extensión justa. De seis a ocho palabras son suficientes para comunicar
News That's Fit to Print (4) , por ejemplo. un pensamiento completo, aunque las más cortas se asimilan más fácilmente.
"Wrk.Wisely TM" puede ser una buena tagline para un anuncio
televisivo, pero en un sitio web no me dice lo suficiente.
Creo que Onvia se dio cuenta y añadió una segunda tagline.
Desafortunadamente, "Taking
tare of the
business of running your small
__________________ business" se va al extremo
(3) Estudios Metro-Goldwyn-Mayer, en las décadas de los 30 y los 40.
opuesto: es demasiado largo.
(4) The New York Times. No obstante, he de admitir una preferencia personal por la parodia de la revista Mad:
"Al! the News That Fits, We Print'. (algo así como "imprimimos todas las noticias que encajen").
103 104
EL PRIMER PASO PARA LA RECUPERACIÓN ES ADMITIR QUE HA PERDIDO… CAPÍTULO 7
• Las taglines buenas expresan diferenciación y un beneficio claro. ¿Tagline? No necesitamos ninguna
tagline pésima
A algunos sitios no les hace falta una tagline. Por ejemplo:
Ahorrar tiempo, dinero y salud son claramente • Los sitios que son bien
cosas buenas. Pero no nos dicen nada sobre el conocidos por su origen
offline.
sitio.
No confunda una tagline con un lema, como "Traemos cosas buenas a la vida", "Está en buenas Personalmente, sin embargo, he argumentado que incluso estos sitios se beneficiarían de
manos", o "Para proteger y servir". Un lema expresa un principio director, un objetivo o un ideal, pero una tagline. Después de todo, independientemente de lo conocido que sea, ¿por qué renunciar
una tagline comunica una proposición de valor. Los lemas son sublimes y alentadores, pero si no sé de a una discreta oportunidad de explicar a los visitantes por qué estarán mejor en su sitio? E
lo que habla, un lema no me va a decir nada. incluso si un sitio procede de una marca offline fuerte, la misión online nunca es exactamente la
• Las taglines buenas son gratas, enérgicas y a veces ingeniosas. El ingenio es bueno, misma y es importante explicar la diferencia.
pero sólo si ayuda a comunicar, no a oscurecer, el beneficio.
"Cradle and all" es una tagline muy ingeniosa, atractiva. Sin
La quinta pregunta
embargo, puede dar al visitante la impresión de que BabyCenter.com
es sólo par comprar "material" para bebés, cuando en realidad Una vez que sé lo que estoy buscando, queda todavía una pregunta importante que la página principal
__________
(5) Incluso Amazon tuvo una tagline hasta 1998, cuando ya era una palabra
familiar.
105
106
EL PRIMER PASO PARA LA RECUPERACIÓN ES ADMITIR QUE HA PERDIDO…
Cuando entramos en un sitio nuevo, tras un vistazo rápido a la página principal deberíamos
poder decir con confianza:
• Aquí tenemos que empezar si queremos buscar.
En sitios construidos siguiendo un proceso paso a paso (solicitar una hipoteca, por
ejemplo), el punto de entrada al proceso debería ofrecerse de golpe. Y en sirios donde tenga
que registrarme si soy un usuario nuevo o firmar si ya me registré con anterioridad, los lugares
donde registrarme o firmar deberían estar destacados.
Por desgracia, la necesidad de promocionar todo (o al menos todo lo que soporta este
modelo de negocio semanal) algunas veces oculta estos puntos de entrada. Puede ser difícil
encontrarlos cuando la página está llena de anuncios clamando "¡Empiece aquí!" y ¡No, haga clic
aquí primero!".
La mejor forma 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,
o que la lista de secciones parezca una lista de secciones). También ayuda etiquetarlos
claramente, con etiquetas como "Buscar", "Examinar por categoría", "Firmar" y "Empiece
aquí" (para un proceso paso a paso).
• Descripciones de sección. Ya que la página principal tiene que mostrar tanto como se
pueda de lo que yace debajo, puede que quiera añadir una frase descriptiva a cada nombre
de sección, o incluso a la lista de subsecciones, algo para lo que no tiene espacio en cada
página.
107