Documentos de Académico
Documentos de Profesional
Documentos de Cultura
No me hagas
Steve Krug pensar
Una aproximacin a la usabilidad en la Web
NO Segunda edicin
ME
HAGAS
Steve Krug
Traduccin
Una aproximacin a la Usabilidad en la Web Jos Manuel Daz
Madrid Mxico Santaf de Bogot Buenos Aires Caracas Lima Montevideo San
Juan
San Jos So Paulo White Plains
CONSULTORES EDITORIALES:
SEBASTIN DORMIDO BENCOMO
Departamento de Informtica y Automtica
UNIVERSIDAD NACIONAL DE EDUCACIN A DISTANCIA
Steve Krug
No me hagas pensar. Una aproximacin a la usabilidad en la Web. Segunda edicin
DE ESTA EDICIN
2006 PEARSON EDUCACIN, S.A.
Ribera del Loira, 28
28042 Madrid (Espaa)
ISBN-10: 84-8322-286-8
ISBN-13: 978-84-8322-286-7
Depsito Legal: M-8.606-2006
PEARSON PRENTICE HALL es un sello editorial autorizado de PEARSON EDUCACIN, 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:
Edicin: David Fayerman
Tcnico editorial: Ana Isabel Garca
Equipo de produccin: Direccin:
Jos Antonio Ciares
Tcnico: Diego Marn
Diseo de cubierta: Equipo de diseo de Pearson Educacin, S.A.
Composicin: Claroscuro Servicio Grfico, S.L.
Impreso por: Lavel, S. A.
Prlogo 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. CAPTULO 2 Cmo usamos realmente la Web? 20
Ojear, ser suficiente y arreglrselas
SEGUNDA EDICIN
V VI
CAPTULO 8 El granjero y el ganadero deben 122
Acerca
ser amigos
Por qu la mayora de los argumentos del equipo de diseo
web acerca de la usabiidad son una prdida de tiempo y
cmo 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 aos, la gente se ha asombrado con
podra actualizar los ejemplos." Incluso algunas personas me hubieran dicho que algunos de los sitios
mencionados en los ejemplos ya no existan.
esta obra.
Pero lo cierto es que muchos de los sitios mencionados ya no existan cuando el libro lleg a las
He recibido cantidad de mensajes de correo electrnico encantadores. No puede imaginarse lo
gratificante que es empezar la maana con alguien a quien no conoce y que le dice lo mucho que libreras. (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 haca que los ejemplos fueran menos claros.
An 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, podra 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 aos.
Muchas personas aprecian el hecho de que es pequeo. (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 edicin; Ms sitios buenos de los que copiar.
el rcord de "lectura rpida" parece estar en aproximadamente dos horas.)
Hojas de estilo en cascada (CSS) que realmente funcionan.
Un nmero gratificante de personas me han dicho que les gust el libro porque practica lo que
Convenciones tiles como las pginas orientadas a la impresin.
predica, en la redaccin y en el diseo.
Google como punto de partida de todas las acciones.
Algunas personas me han dicho que se han redo en voz alta, algo que realmente aprecio. (Un
lector me dijo que le hice rer tan fuerte que le sali la leche por la nariz. Cmo 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 podra querer).
Pero lo ms 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 diseo, y no a temas especficos sobre tecnologa o implementacin.
Y haba otro problema ms: yo estaba orgulloso de lo pequeo que era el libro. Me llev mucho
Slo pas un ao tras la aparicin del libro para que me empezaran a preguntar cundo iba a
trabajo, todo era parte de las "prcticas predicadas" por el negocio. Si aada material nuevo, tena
escribir la segunda edicin.
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 diseo y no de la tecnologa,
pensaba que pasara ms tiempo antes de quedar anticuado. Por tanto, qu estamos haciendo aqu?
Normalmente hubiera recurrido a la tcnica 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
cambiara, 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 EDICIN NO ME HAGAS PENSAR
Y como todos los que vienen a los talleres ya han ledo 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. Tambin tengo la
Cinco libras de galletas en una caja
ocasin de revisar un montn de diferentes tipos de sitios, porque todos los que asisten al taller pueden proponer un de cuatro libras
URL; durante el da hago "minirevisiones expertas de 12 minutos" de algunos de esos URL, y efecto pruebas de
Aunque yo pensaba que el libro estaba bien como estaba, al pensar en todo lo que quera
usuario sobre uno o dos ms. aadir me enfrentaba a un dilema an mayor: si no quera eliminar nada, cmo poda aadir
Y como cualquiera sabe, la enseanza es la mejor forma de aprender sobre algo. material nuevo de modo que el libro siguiera siendo suficientemente pequeo como para leerlo
durante un viaje en avin?
As, cuando mi editor empez a preguntarme por una segunda edicin el ao pasado, realmente empec a pensar
sobre cmo sera esa segunda edicin. Y aunque segua teniendo la sensacin que no haba mucho que cambiar o As las cosas, me apliqu mis propios consejos e hice como una especie de prueba con
eliminar de la primera edicin, comprend que haba otras cosas tiles sobre las que poda escribir. usuarios: configur un tabln de anuncios y ped a los lectores de la primera edicin que me
dijeran lo que podra eliminar. Y, afortunadamente, la prueba me sirvi para lo que normalmente
sirve una prueba con usuarios:
Parecido a qu? Confirmar algunas cosas que ya saba.
El material nuevo encaja en una de estas tres categoras:
Me ense algunas cosas que no saba; por ejemplo, no saba cmo la gente estaba
Oh, ahora lo he conseguido! Los talleres me han dado la oportunidad de pensar a travs de lo que hay en utilizando el libro y cul era la valoracin 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 ms 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 sugeran mover a otro libro los
personas que acuden a mis talleres son del tipo, "S cul es la forma correcta de hacer una cosa, pero mi captulos dedicados a las pruebas con usuarios. (Algunas haban odo que yo estaba preparando
jefe/cliente/socio de la empresa insiste en que lo haga de la forma errnea. Cmo puedo convencerle otro libro dedicado a este tipo de pruebas que podramos llamar de "bajo coste/hgalo usted
de lo contrario?" mismo", por lo que me decan que no echaran de menos unos captulos dedicados a hacer unas
pruebas que no tenan previsto hacer.)
Como pude comprobar que muchas personas parecen invertir mucho tiempo combatiendo con los
mismos problemas de diseo, pens que estara bien ofrecerles algo de municin. As que aad el Yo haba pensado en hacerlo, pero no quise porque (a) pens que los lectores echaran de
Captulo 12 para tratar problemas corno el siguiente: menos esos captulos, y (b) pens que tendran la sensacin 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 tenan que decirme,
montn de informacin personal innecesaria para poder suscribirse a nuestra hoja informativa, la solucin se hizo obvia: si comprima los tres captulos dedicados a las pruebas con usuarios
y no parece importarle que el 10% de nuestros suscriptores se llamen "Escombros de en uno ligeramente ms corto y que explicara los puntos ms importantes que todo el mundo
discusin". debe conocer, podra ganar unas veinte pginas para el material nuevo. Y si alguien quera
Los captulos "perdidos". Haba dos captulos que quera incluir en el primer libro, pero no lo hice disponer de la versin antigua ms larga de esos captulos, podra publicarlos gratuitamente en mi
para que libro fuera pequeo. Uno, el Captulo 10, habla de la importancia de tratar bien a los usuarios, sitio web'. Problema resuelto.
y el otro, el Captulo 11, est dedicado a la accesibilidad en la Web.
Finalmente, unos pequeos detalles caseros:
Tambin quise poner al da y ampliar mi lista de lecturas recomendadas, pues en estos cinco aos han Los enlaces. Si quiere visitar cualquiera de los URL mencionados en este libro,
aparecido grandes libros.
encontrar unos enlaces actualizados en mi sitio. (Slo en cas de que cualquiera de los sitios,
bien, ya sabe... desaparezca.)
XII
XI
Prlogo
NO ME HAGAS PENSAR OTRA VEZ
ACERCA DE LA SEGUNDA EDICIN
En todo caso, gracias por todo. Espero que el material nuevo le resulte til. Nos
En los primeros aos la plataforma era voltil. Pareca que las cosas cambiaban todas las semanas.
Estbamos inmersos en guerras de navegadores, con Netscape cuadrando todas las esquinas y el W3C
sacando a la luz nuevos estndares de HTML cada seis meses. Pero entonces, con la predecible
victoria de los de Redmond, todo se tranquiliz.
Esto supuso un alivio para los diseadores web, que se volvan locos por los constantes cambios en
el cdigo.
XIII XIV
Y como los diseadores 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. Despus de ms de
una dcada de trabajo, sigue mirando cada sitio web como si fuera el primero. Aqu no encontrar palabras
sobrantes: slo encontrar sentido comn y un juicio amistoso de cmo miramos, cmo pensamos y cmo
leemos.
Los principios que Steve comparte en este libro seguirn 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 reljese.
ROGERBLACK
Lame 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 diseo web del cliente para ayudarles a resolver los problemas.
C uando empec a comentar que estaba preparando un libro acerca de cmo hacer lo que yo
haca, 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 enva propuestas de diseos de pgina para el nuevo sitio web
que ellos mismos estn preparando o el URL del sitio ya existente que estn rediseando.
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 diseadores grficos y los desarrolladores suelen ser los responsables del diseo de las leerse en un viaje de avin largo). Y lo hice por dos motivos:
interfaces (en temas como el diseo de la interaccin; por ejemplo, lo que ocurre despus 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 informacin (la forma en que se organiza todo). que se use (6). Escribo para los que
Y la mayora de estas personas carece de un presupuesto para contratar a consultores de estn en las trincheras (diseadores,
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
diseo web que parecen consumir tantsimo tiempo.
dispone del tiempo necesario para leer
un libro largo.
TM
No se trata de ciruga disparatada
Lo bueno es que gran parte de lo que hago es de sentido comn y cualquiera que tenga
No es necesario saberlo todo. Al igual que en todos los campos, podra aprenderse
inters puede aprender a hacerlo. mucho sobre la usabilidad, pero, a menos que sea un profesional de la misma, hay
que poner un lmite a la cuanta de lo que realmente es prctico en el aprendizaje (7).
Despus de todo, la usabilidad slo 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 avin de combate o una puerta giratoria) con el
objetivo deseado sin sentirse completamente frustrado.
Como en la mayora de los casos de sentido comn, sin embargo, no es necesariamente
obvio hasta despus que alguien se lo haya sealado (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 consultora se llama Advanced Common se mueve alrededor del Sol. Dada la capacidad finita del cerebro humano, segn explica Holmes, no se puede
Sense (Sentido comn avanzado) (negocio que, en realidad llevo yo mismo junto a una permitir el lujo de pensar en hechos intiles que dejen a un lado a los tiles:
serie de espejos bien situados). El lema de mi empresa es: "No se trata de ciruga "Qu diablos es para m? Dice que viajamos alrededor del Sol, pero si furamos alrededor de la luna
disparatada". eso no influira lo ms mnimo ni en m ni en mi trabajo."
5 6
LAME PRIMERO
NO ME HAGAS PENSAR
Creo que las aportaciones ms 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, tambin, 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 ms importante poder entender estos principios que cualquier otra lista de la una calidad muy superior con defectos secundarios.
lavandera con normas especficas. He intentado resumir las pocas cosas que considero debera saber Ejemplos de todo tipo de sitios. La mayora de los ejemplos del libro procedende sitios de
toda persona que trabaje en la creacin de sitios web. comercio electrnico, pero los principios que se describen se aplican igualmente en la
pgina vanidosa de mi vecino de al lado, en la pgina del equipode ftbol de mi hija o en la
intranet de su empresa. Incluir ilustraciones de todos estos gneros diferentes hubiera dado
como resultado un libro mucho ms grueso y menos til.
Ausente en el momento de la foto
Si no desea perder tiempo buscndolas, aqu tiene algunas cosas que no encontrar en este
manual: Quin va primero?
"La 'verdad" sobre la forma correcta de disear 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 tambin para intentar hacerle pensar sobre su propia experiencia
disear sitios web. Es un proceso complicado y la respuesta real para la mayora de las como usuario de la Web mientras va leyndolo (algo que la mayora tendemos a olvidar cuando
preguntas que me hacen es que "simplemente depende" (8). Pero creo que hay unos cuantos tenemos puestos nuestros sombreros de diseo web). Todo esto nos lleva al siguiente empleo de los
principios prcticos rectores que siempre ayuda tenerlos en mente, y que son los que voy a pronombres a lo largo del libro:
intentar transmitir.
"Yo" soy yo, el autor. Unas veces soy yo el profesional de la usabilidad ("les digo a mis
Debate de modelos de empresa. Si la historia nos ha enseado algo es que los modelos de clientes...") y otras soy el que habla como usuario de la Web ("Si no puedo encontrar la opcin
empresa de Internet son como los autobuses: si se pierde uno, todo lo que hay que hacer es Bsqueda..."), pero siempre soy yo.
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 estara pasado de moda para cuando leyera "Usted" es usted, el lector, alguien que disea, crea, publica o paga las cuentas del sitio web.
este libro. "Nosotros" ("Cmo 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 ma. De lo nico nos incluye a "usted" y a "m".
que estoy seguro es de que: (a) la mayora 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 aparecern como una gran sorpresa deje claro de quin estoy hablando.
aunque a posteriori nos parezcan como algo completamente obvio.
Hablar mal de los sitios diseados de forma desacertada. Si le agrada la gente que se burla
de los sitios con defectos evidentes, ha comprado el libro equivocado. Disear, crear y
mantener un buen sitio web no es tarea fcil. Es un poco como el golf una cantidad exigua de
formas de introducir la pelotita en el agujero, un milln de ellas para no introducirla.
Cualquiera que lo consigue de una forma ms o menos correcta tiene toda mi admiracin.
___________
(8) Jared Spool y sus consultores de usabilidad en User Interface Engineering (Ingeniera de interfaz del usuario:
www.uie.com) tienen incluso camisetas con la expresin Ir depends ("simplemente depende").
8
LAME PRIMERO
1
recuerde que la usabilidad es importante. Ya conoce por su propia experiencia como usuario de la
Web que prestar atencin a la usabilidad implica menor frustracin y ms satisfaccin para sus
visitantes, adems de una mayor probabilidad de volver a verlos en otra ocasin.
Creo que mi mujer puso el dedo en la llaga mejor que cualquier estadstica 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
diseo, de vez en cuando podr llegar a casa a tiempo para cenar.
9
CAPITULO 1
Michael, qu hacen abiertas las merceras?
--KAY CORLEONE EN El. PADRINO II Considrelo de esta forma:
Cuando miro una pgina 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 fcil de
usar?"
Se trata de...
"
No me hagas pensar!
Durante muchos aos he venido diciendo que sta es mi primera norma de la usabilidad.
Cuantas ms pginas web veo, ms convencido estoy de ello.
Todo lo que con ello quiero decir es que, hasta lo que humanamente es posible, cuando
se mire una pgina web sta ha de ser obvia, evidente, clara y fcil de entender.
Tendra que poder "entenderla" (qu es y cmo usarla) sin agotar esfuerzos pensando en ella (1).
Pues de la suficiente; que nuestro vecino de al lado, por ejemplo, que no tiene inters
alguno por el tema de nuestro sitio y que apenas sabe cmo usar el botn Atrs, pueda ver
La pgina web inicial de nuestro sitio y diga, "Oh, si se trata de ". (Y con un poco de suerte
dir tambin, "Pero si es ____________________. Fantstico." Pero eso es otro tema.)
___________
(1) Existe, en realidad, un aspirante inmediato: "Elimine la mitad de las palabras en todas las pginas y despus
prescinda de la mirad de lo que haya quedado". Pero de esto nos ocuparemos en un captulo posterior.
11
12
NO ME HAGAS PENSAR!
CAPTULO 1
Pero si lo que veo es una pgina que me hace pensar, todo lo que se me ocurre est lleno
de interrogantes.
Lo que nos hace pensar
En una pgina web, cualquier cosa puede detenernos y hacernos pensar innecesariamente.
Por ejemplo, los nombres de las cosas. Los tpicos culpables son los nombres bonitos o
ingeniosos, los producidos por el departamento de marketing, los nombres especficos de la
empresa y los nombres tcnicos que no nos son familiares.
Pongamos, por ejemplo, que un amigo me dice que Corp XYZ pretende contratar una
persona con mis mismos ttulos acadmicos y me dirijo a su sitio web. En cuanto le echo un
vistazo a la pgina para hacer clic en algo, el nombre que han elegido para su seccin de
puestos de trabajo lo cambia todo.
Observe que todas estas cosas siempre se encuentran en algn 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 estn en "RAMA-D-TRAB" por motivos complejos de poltica interna o, simplemente, porque es
as como siempre se les ha llamado en el boletn de la empresa. Pero a lo que voy es que los esfuerzos
deberan ir siempre ms encaminados hacia lo "EVIDENTE" de lo que podamos llegar a pensar.
Otro foco innecesario de interrogantes en nuestras mentes es el tema de los vnculos y los
botones en los que se puede hacer clic, pero que nos hacen dudar si podemos o no pulsarlos. Como
usuario nunca debera emplear ni una milsima de segundo en pensar en cosas como si se puede o no
hacer clic en esto o aquello.
13
14
NO ME HAGAS PENSAR! CAPTULO 1
Otro ejemplo: en la mayora de los sitios de las libreras, antes de buscar un manual, tengo que
pensar en cmo quiero hacer la bsqueda (2).
Por descontado, la mayor parte de este "dilogo mental" tiene lugar en una fraccin de segundo,
aunque lo vea como un proceso bastante ruidoso. Incluso algo tan inocente, aparentemente, como un
nombre conocido (desde "Buscar" a "Bsqueda rpida") es capaz de generar otro interrogante.
________________
(2) Esto sigue siendo cierto cuando lo comprob hace un ao. Slo ahora, en 2005, la mayora de ellos finalmente
han mejorado.
15 16
NO ME HAGAS PENSAR! CAPTULO 1
Amazon.com, por otro lado, no hace mencin a la distincin entre Autor-Titulo-Palabra clave. Todo no se puede hacer obvio
Tan slo considera lo que usted escribe y hace lo que considera tiene ms sentido.
El objetivo para cada pgina debera ser que fuera evidente, que el usuario medio (3) slo
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 pgina fcil de
entender hay que pensar incluso un poquito para entenderla" (pero slo un poquito). La
apariencia de las cosas, sus nombres bien escogidos, la disposicin de la pgina y los textos
Escribe "Tom Clancy". Hace clic en "Ir". pequeos y cuidadosamente elaborados tienen que funcionar bien en su conjunto para conseguir
un reconocimiento casi instantneo.
Si no puede hacer una pgina fcil de entender, al menos tendr que hacerla autoexplicativa.
Despus de todo, por qu he de pensar en cmo quiero hacer la bsqueda? Y an peor, ;por qu
Por qu es todo esto tan
tengo que tener en cuenta la forma en que el mecanismo de bsqueda 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 extrao que parezca, no es por la razn que normalmente oye citar:
("Olvid preguntar, `Puedo?'").
Podra enumerar docenas de otras muchas cosas que los visitantes del sitio no deberan ni pensar.
Por ejemplo:
Dnde estoy?
Por qu lo han llamado de esa forma? En ocasiones esto es cierto, pero se sorprendera al conocer el tiempo que algunas
Pero lo ltimo que usted necesita es otra lista de comprobacin que aadir 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 diseo web. Lo ms importante que puede hacer es simplemente entender el
principio bsico de eliminacin 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
pginas que cree.
_________________
(3) El usuario medio real se encuentra en un stano hermticamente sellado en la Oficina
internacional para la normalizacin en Ginebra. Ya hablaremos sobre la mejor forma de pensar en
el "usuario medio".
17 18
NO ME HAGAS PENSAR!
CAPTULO
El hecho es que, en primer lugar, su sitio puede que no haya sido fcil de encontrar puede que
los visitantes no conozcan otra alternativa. La posibilidad de empezar de nuevo no parece muy
atractiva.
2
Y tambin est el fenmeno "Ya he esperado diez minutos al autobs, de modo que esperar un
poquito ms tampoco me hace dao". Adems, ;_quin va a decirnos que la competencia va a ser menos
frustrante? Cmo usamos
Y entonces, porqu?
Crear pginas fciles de entender se asemeja a tener un comercio con un buen sistema de
iluminacin: 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 terminarn minando
realmente
energa y entusiasmo (al igual que nuestro tiempo).
19
Por qu las cosas estn en el ltimo sitio donde las buscamos? Porque CAPTULO 2
cuando las encontramos dejamos de buscarlas.
-ADIVINANZA INFANTIL
Como puede imaginarse, resulta un poco ms complicado que todo esto y depende del tipo
de pgina, de lo que el usuario intenta hacer, de la prisa que tenga, etc. Pero esta visin impuesta
D urante los ltimos diez aos he pasado mucho tiempo observando a la gente usar est ms cerca de la realidad de lo que la gran mayora podemos imaginar.
la Web y lo que ms me ha sorprendido es la diferencia entre lo que pensamos
acerca de cmo se usan los sitios web y la forma en que realmente se utilizan. En el diseo de las pginas se cuenta con un usuario ms racional y atento. Es normal
Cuando se crean sitios nuevos, creemos que cada una de las pginas 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 ms
estudiarse minuciosamente, que nuestros textos elegantemente elaborados van a
ordenado, metdico 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 vnculo en el que hacer clic. No obstante, si quiere disear pginas 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 cmo se utiliza realmente la Web.
a cada nueva pgina, leer rpidamente parte del texto y hacer clic en el primer
vnculo que resulte interesante o se parezca, vagamente, a lo que se est
buscando. Normalmente hay partes extensas de la pgina que ni siquiera se Factor de vida n. 1:
miran. No leemos las pginas; 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 ms prxima a la "cartelera invertir poco tiempo en leer la mayora de pginas web (1). Por el contrario, las hojeamos
publicitaria que pasa a 100 kilmetros por hora". rpidamente (o las leemos muy por encima) en busca de palabras o frases que capten la atencin de
nuestra vista.
La excepcin, sin duda, son las pginas que contienen documentos como noticias, reportajes o
descripciones de productos. Pero incluso entonces, si el documento tiene ms de unos pocos
LO QUE DISEAMOS
PARA LA REALIDAD... prrafos, es muy posible que se imprima, porque leerlo sobre papel es ms fcil y rpido que hacerlo
en pantalla.
Nrmalmente tenemos prisa. El uso ms 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
ms que para leer lo estrictamente necesario.
Sabemos que no hay que leerlo todo. En la mayora de las pginas slo nos interesa una
fraccin de lo que hay en ellas. Tan slo buscamos las partes que se ajustan a nuestro inters 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
CMO USAMOS REALMENTE LA WEB?
CAPTULO 2
Factor de vida n. 2:
Somos buenos en ello. Hemos estado hojeando los peridicos, 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 clsicos 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 diseo de las pginas tendemos a contar con que el usuario hojea una pgina, 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 opcin; nos
Lo que vemos al mirar una pgina web depende de lo que tenemos en nuestra mente, aunque slo quedamos con la primera ms razonable, estrategia que se conoce como satisficing (2). Tan
sea una fraccin de lo que hay en la pgina. pronto como encontramos un vnculo que parece llevarnos a lo que en realidad buscamos, se
nos presenta una buena oportunidad para hacer clic en l.
LO QUE LOS DISEADORES CREAN... LO QUE LOS USUARIOS VEN... Ya haba observado este comportamiento durante unos aos, pero su significado no lo vi
claro hasta que le el libro de Gary Klein, Sources of Power: How People Make Decisions
(Orgenes del poder: cmo las personas toman decisiones)). Klein ha estudiado durante
muchos aos 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 energa nuclear se la juegan tomando decisiones en situaciones reales presionados por el
tiempo, objetivos imprecisos, informacin 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 rene informacin, identifica las posibles soluciones y
elige la mejor. El equipo de observadores empez con la hiptesis que debido al alto riesgo y la
extrema presin del tiempo, los comandantes del cuerpo de bomberos slo podran comparar dos
opciones, suposicin que consideraron era conservadora. Cuando sucedi, los comandantes del cuerpo
no confrontaron ninguna opcin, tomaron el primer plan razonable que les vino a la cabeza e hicieron
una prueba mental rpida de los problemas. De no encontrar ninguno, sera el plan de accin que
Al igual que Ginger, nos inclinamos a centrar nuestro inters en palabras y frases que parecen
encajar mejor con (a) la tarea que tenemos entre manos, (b) nuestros intereses personales del momento llevaran a cabo.
o en curso o, por supuesto, (c) las palabras que nos causan una reaccin repentina y que estn
integradas en nuestro sistema nervioso, como "Gratis", "Oferta", "Sexo" o nuestro propio nombre.
______________
(2) El economista Herbert Simon acu el trmino (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
CMO USAMOS REALMENTE LA WEB? CAPTULO 2
Normalmente tenemos prisa. Tal y como Klein seala, "optimizar es difcil y lleva mucho No averiguamos el funcionamiento de
tiempo; la estrategia satisficing es ms 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 ms obvias a las que se llega cuando se prueba la usabilidad (tanto en sitios web,
como en el software o en los electrodomsticos) es el grado de desconocimiento que tenemos al
consecuencias por haber errado en un sitio web se resuelven con slo usarlos: no entendernos su funcionamiento o la idea que tenemos de
hacer clic, o dos clics, en el botn Atrs, haciendo satisfactoria una estrategia efectiva. (El es totalmente desatinada.
botn Atrs es la caracterstica ms utilizada de los navegadores web.) Asumiendo, claro Son muy pocas las personas que, ante cualquier aparato tecnolgico, se toman un tiempo para
est, que las pginas se cargan rpidamente. 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 ms cuidadosa (una de las muchas razones por las que a la nuestras propias historias, vagamente verosmiles de lo que hacemos y del porqu de su
funcionamiento.
mayora de los usuarios de la Web no les gusta que las pginas se carguen despacio).
Me recuerda, con frecuencia, la escena al
El sopesar distintas opciones no garantiza la mejora de nuestras oportunidades. En los de El prncipe y el mendigo, donde el
sitios mal diseados esforzarse mucho en tomar la mejor opcin no ayuda nada. Suele tico prncipe descubre que su doble mendigo ha
resultar mejor hacer caso a la primera suposicin y utilizar el botn Atrs estado usando el Gran Sello de Inglaterra
si no funciona. como cascanueces en ausencia del prncipe.
Adivinar es ms divertido. Supone menos trabajo sopesar las opciones, y es ms rpido si (Tiene todo el sentido del mundo; para l, el
la suposicin es correcta. Adems, introduce un elemento optativo: la grata posibilidad de mendigo el sello slo es un gran trozo pesado de
dar con algo sorprendente y bueno. Pero el hecho es que hacemos las cosas as.
observado a muchsima 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 diseadores.
Depende de cosas como su esquema mental, de lo presionados que estn por el factor tiempo y
de la confianza que tienen en el sitio.
25
26
CMO USAMOS REALMENTE LA WEB? CAPTULO 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 mayora carece de importancia el Ilegar a enteder el
cuadro de bsqueda de Yahoo siempre que quieren ir all (no slo 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 da). Si se les pregunta resulta inteligencia, sino a la escasez de cuidado y atencin. En la mayor parte de los diseos 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 mayora de los diseadores Si damos con algo que funciona, seguimos con ello. Una vez encontramos algo que va bien
web se sorprenderan (sin importar si es acertado o no) solemos dejar de buscar una solucin 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 cmo diseadores y desarrolladores web observan su primera prueba
bsqueda 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 botn, bastante grande y gordo
Y lo curioso es que el arreglrselas no slo es cosa de principiantes. Incluso los usuarios etiquetado como "Software" en la barra del navegador, y dice algo as como "Bien, busco software, de
tcnicamente espabilados tienen, con frecuencia, lagunas asombrosas en su comprensin del modo que har clic en 'Cosas baratas' porque lo barato siempre est bien". El usuario puede incluso
funcionamiento de las cosas. (No me extraara que el propio Bill Gates, en algn momento de encontrar, al final, lo que busca, pero para los observadores puede o no resultar satisfactorio.
su vida, manipulara algunos aparatos tecnolgicos con la tcnica de "arreglndoselas".) La segunda vez que pasa, gritan: "Haga slo 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 arreglndoselas 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.
(buensimas noticias para Yahoo y AOL).
27 28
CMO 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.
Tambin es mayar la posibilidad de que entiendan el conjunto de lo que ofrece su sitio, no
slo 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 ms seguros y convencidos cuando usen su sitio y querrn volver. Podr
permitirse un sitio "en el que se las arreglan" slo hasta que alguien elabore otro que les
Diseo
de rtulos 101
convenza ms y les haga sentir muy bien.
Si la vida le da limones...
Ahora debe estar pensando (dado el panorama rosa plido de la audiencia de la Web y de DISEO DE PGINAS PARA HOJEAR, NO PARA LEER
cmo la utilizan): "Por qu simplemente no empiezo a trabajar en el local 7-11? Al menos mis
esfuerzos podran ser reconocidos".
29
S/no sabe/de quin son/estas seales no puede haber/llegado CAPTULO 3
demasiado lejos/Afeitado-Burma Lo que est relacionado
-SECUENCIA DE VALLAS PUBLICITARIAS PROMOCIONANDO ESPUMA
DE AFEITAR, URCA 1935 lgicamente, tambin 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 ttulo, visualizndo-
las con un estilo visual similar o
la mayor parte del sitio:
ponindolas en una zona
Creacin de una jerarqua visual clara en cada pgina.
claramente definida.
Aprovechamiento y uso de las convenciones.
Divisin de las pginas 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
Creacin de una jerarqua visual clara una seccin ("Libros de
Uno de los mejores mtodos para que nuestra pgina retenga la atencin del usuario es asegurndonos computacin") aparecera por
que el aspecto de las cosas en dicha pgina (todas las claves visuales) representen claramente y de encima del ttulo de un libro en
forma adecuada la relacin entre todas ellas: qu cosas estn relacionadas entre s y cules son parte
particular, englobando visualmente
de otras. En otras palabras, todas las pginas deben tener una jerarqua visual clara.
toda la zona de contenido de la
Las pginas con una jerarqua visual clara tienen
pgina, porque el libro es parte de la seccin. El ttulo, a su vez, abarcara los elementos que describen
tres caractersticas:
el libro. .
Lo ms importante ha de ser lo ms
No hay nada nuevo sobre las jerarquas visuales. Todas las pginas de los peridicos, por ejemplo,
prominente. Por ejemplo, los encabe-
zamientos ms importantes sern ms utilizan distintos tamaos de letra, y agrupan y anidan las secciones para darnos una informacin til
grandes, aparecern en negrita, en un y prctica de todos los contenidos de la pgina antes, incluso, de empezar a leer cualquier palabra. En
color distintivo, rodeados por ms la siguiente ilustracin la foto se corresponde con su artculo porque los dos estn bajo el mismo
espacio o en la parte superior de la titular y el artculo es el ms importante porque tiene el titular ms grande, la columna ms ancha y
pgina (o combinando varios de estos
una posicin destacada dentro de la pgina.
aspectos).
El titular que abarca El tamao del titular revela
estas tres columnas en tan slo una ojeada que
muestra, obviamente, se trata del artculo ms
que dichas columnas importante.
son parte del
mismo artculo.
31 32
DISEO DEL RTULOS 101 CAPTULO 3
Todos los das analizamos jerarquas visuales (tanto en lnea como sobre el papel), pero lo
Las convenciones nos favorecen
hacemos tan rpido que apenas nos damos cuenta que lo estamos haciendo hasta que no lo
En algn momento en nuestra juventud, y sin que nos ensearan, aprendimos a leer un
podemos hacer ms; y las claves visuales, o la ausencia de ellas, nos obligan a considerarlo.
p ridico. Si no sus palabras, s las convenciones.
e
Una buena jerarqua visual nos ahorra tales esfuerzos a la hora de preprocesar la pgina, 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 instantnea. aclara el contenido de la misma o (si el tamao de letra es muy pequeo) los crditos de la foco
Cuando una pgina carece de una jerarqua visual clara (por ejemplo, todo parece ser igual que revelan quin tom dicha instantnea.
de importante), el proceso de lectura rpida, de comprensin de palabras y frases, as como la Aprendimos a reconocer las distintas convenciones de la disposicin de las pginas 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 peridico y dar con los artculos
organizado, es mucho ms lento y el trabajo, mayor. que nos interesan. Y cuando empezamos a viajar a otras ciudades, aprendimos tamb n que todos losi
peridicos usaban las mismas convenciones (con pequeas variantes). As, resumiendo, podemos
Adems, es deseable una orientacin editorial en los sitios web, al igual que la existente en
afirmar que conocer las convenciones facilita la lectura de cualquier peridico.
otros medios de comunicacin. El editor conoce mejor que nadie las partes ms importantes, de
mayor valor o ms populares del contenido del sitio; por qu no se nos identifican tambin 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 mayora procedentes de
Analizar la pgina con una jerarqua visual
las convenciones de prensa (peridicos y revistas) aunque se siguen desarrollando otras nuevas.
resulta, incluso, un poco engaoso (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 vindose en tantas otras partes, que no necesitan ningn tipo de
es como leer una frase construida de forma
explicacin. El proceso de adopcin 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 convencin del uso metafrico del carrito de
un minuto porque estaba un poco tembloroso").
la compra en los sitios de comercio electrnico y los propios diseadores 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 momentnea nos
Esta jerarqua visual engaosa sugiere que todas
hace recapacitar, pensar, cuando no debera ser
las secciones del sitio forman parte de la seccin
as.
"libros sobre computadoras".
_____________________
(1) Piense por ejemplo, en los pequeos logotipos semitransparentes que empezaran a aparecer en la esquina de
la pantalla de su televisor hace unos aos para que reconociera de un vistazo el canal que traba viendo. Hoy en da
estn en todas partes, aunque la televisin ya exista unos cincuenta aos antes que estos logotipos aparecieran.
33
34
DISEO DEL RTULOS 101 CAPTULO 3
Dos cosas son importantes sobre las convenciones de la Web: En ocasiones, el tiempo empleado en
Son muy tiles. Como reinventar la rueda da como
norma general, las con- resultado la aparicin de un nuevo
venciones slo llegan a ser mecanismo rodante y revolucionario.
Otras, slo se acumula tiempo
convenciones si funcionan.
empleado en teinventar la rueda.
Las realmente efectivas
ayudan al usuario a Si no va a usar una convencin de la
Web ya existente, tendr que
desplazarse de un sitio a otro
sustituirla por algo (a) tan claro y fcil
sin grandes esfuerzos para de entender que no hay curva de
descubrir el funcionamiento aprendizaje (y entonces resulta tan
de las cosas. Las convenciones bueno como la convencin),
permiten descubrir
Se crea una sensacin tran-
al usuario gran
quilizadora de familiaridad, cantidad de
informacin sobre o (b) que el valor que aade fuera tan alto que merece la pena esa pequea curva de
por ejemplo, al ver una lista de
una pgina web, aprendizaje. Si va a innovar, tiene que entender el valor de lo que est reemplazando, y
vnculos a las secciones del incluso si no se
entiende ni una muchos diseadores tienden a subestimarlo cuando el valor que proporcionan las convenciones
sitio sobre un fondo coloreado es realmente importante.
palabra de ella.
La recomendacin que hago es la siguiente: innove slo cuando sepa que la idea es mejor (y
todos los que la vean exclamen sorprendidos "Guau!"), pero aproveche las convenciones cuando no
en el lateral izquierdo de la pgina, aunque a veces tengamos una sensacin tediosa de "dj vu". haya ideas mejores.
Los diseadores son reacios, con frecuencia, al abuso de ellas. Ante la posibilidad del uso de las
convenciones, los diseadores, por el contrario, se ven tentados a reinventar la rueda,
Divisin de las pginas en zonas
principalmente porque sienten (y no es del todo incorrecto) que su contrato les obliga a crear algo claramente definidas -
Lo ideal sera que el usuario pudiera reproducir una versin del antiguo programa concurso de
nuevo y diferente y no algo ya est visto. (No olvidemos que los elogios de los compaeros, los
Dick Clark $25.000 Pyramid en cualquier pgina web bien diseada (2). En un primer vistazo
premios y las ofertas de trabajo ms llamativas raramente se basan en criterios como "al mejor uso tendra que poder sealar las zonas diferentes de la pgina y decir, "Cosas que puedo hacer en este
de las convenciones".) sitio!", "vnculos con las mejores historias de hoy!", "productos que vende esta compaa!",
"cosas que estn locos por venderme!', "navegacin para llegar al resto del sitio!".
Es importante dividir la pgina en zonas claramente definidas porque permite al usuario decidir
rpidamente en qu partes quiere centrarse y cules puede, con tranquilidad,
___________
(2) Dada la categora, por ejemplo, "Cosas que usa un fontanero", los concursantes tendran que conseguir que sus
compaeros averiguaran esa categora dndoles ejemplos ("una llave inglesa, un corta tuberas,...").
36
35
DISEO DEL RTULOS 101 CAPTULO 3
ignorar. Muchos estudios sobre el rastteo inicial de una pgina web sugieren que el usuario decide
Algunos ejemplos favoritos es el cua.-
muy rpidamente las partes de la pgina que probablemente tengan la informacin prctica que dro de bsqueda 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 botn que ejecuta la bsqueda
no un botn (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 botn 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 ms prximo a dicho cuadro de bsqueda).
hacer clic. es muy importante dejar bien claro sobre lo que se puede hacer clic o no.
un pequeo grfico con una flecha triangular que tesulta ser uno de los
Por ejemplo, en la pgina 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 convencin pide que
carrera presidencial en el 2000 no estaba nada y:3re el que se puede hacer clic.
claro si se poda hacer clic sobre todo o sobre :...echa a la izquierda sera sufidesaparecer el interrogante
nada. Haba 18 vnculos en la pgina, pero slo
dos invitaban a que se hiciera clic en ellos por el Baje el sonido hasta
aspecto que tenan: un botn grande con la
etiqueta "Click here to CONTRIBUTE!" (haga
que casi desaparezca
andes enemigos de las pginas fciles de atrapar es el ruido visual. Existen, ::pos de
clic aqu para contribuir) y un vnculo de texto ruidos:
subrayado, "FULL STORY" (artculo completo).
abigarrado. Algunas pginas web me producen la misma sensacin que
leo la carta de Publisher's Clearing House y trato de averiguar qu pega-
El resto de los vnculos eran textos coloreados y adjuntar al formulario para entrar sin suscribirme, por accidente, a cual-
el problema era que todo el texto de la pgina
estaba tambin en colores, de manera que de
da la pgina dama por mi atencin, 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 debera ser mecnico
(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 pgina 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 campaa. En el
primer debate de candidatos republicanos televisado durante la campaa del 2000, dijo a George W. Bush: "Debo
decirle, seor gobernador, que a diferencia de su sitio web, es ms fcil encontrar todo en el mo. [Risita] El suyo
resulta bastante difcil de usar! No es agradable para el usuario." (Su sitio resultaba ms fcil de usar.)
_______________
37 " tl la otra, pero slo si se usa la palabra "Search" como etiqueta para el cuadro.
38
DISEO DEL RTULOS 101
4
fcil que permite al usuario obtener rpidamente cualquiet artculo del sitio. Las lneas, no
obstante, entre los distintos trminos aaden mucho ruido. Atenuar las lneas facilitara y
acelerara la lectura de los mens.
Animal,
El usuario dispone de tolerancias cambiantes para la complejidad y las distracciones; algunas personas
vegetal
no tienen problemas con las pginas abigarradas ni el ruido de fondo, pero otras s. Cuando se disean
pginas 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 MECNICAS?
39
CAPTULO 4
No importa el nmero de veces que hay que hacer clic en algo si
por ejemplo) entra en la categora de "mineral", no es necesario ningn tipo de meditacin para
la opcin es mecnica e inequvoca.
responder correctamente a la pregunta (3).
-SEGUNDA NORMA DE KRUG SOBRE USABILIDAD
Desgraciadamente, la mayora de las opciones en la Web no estn tan claras.
Los diseadores web, as como los profesionales de la usabilidad, han estado debatiendo duran te Por ejemplo, si voy a la pgina de actualiza
cin de Symantec porque quiero actualizar mi
mucho tiempo, y a lo largo de los aos, 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?
CAPTULO
5
Otro ejemplo: cuando intento comprar un producto o un servicio para utilizar en la oficina de
mi casa, me encuentro, con frecuencia, sitios que me piden que elija entre...
Casa
Oficina
Qu opcin es la ma? La cuestin es que en la Web nos encontramos con opciones a todas horas;
tomar decisiones mecnicas es una de las cosas ms importantes que logran que un sirio sea fcil de
utilizar.
Omisin
de palabras
innecesarias
EL ARTE DE NO ESCRIBIR EN LA WEB
43
CAPTULO 5
Elimine la mitad de las palabras en todas las pginas y luego deshgase de la mitad
Suprimir las palabras que no van a leerse tiene diversos efectos beneficiosos: gran nmero de captulos interesantes sobre____________,__________y________Esperamos que los
disfrute."
Reduce el nivel de ruido de la pgina.
El discurso innecesario es como una pequea charla (de contenido libre y, fundamentalmente,
Realza el contenido verdaderamente prctico.
expansivo y afable), pero. que el usuario, normalmente, carece del tiempo para leerlo: prefiere ir
Se acortan las pginas permitiendo ver al usuario ms de cada una con slo un vistazo y sin directamente al grano. Habra que (se debera) eliminar tanto discurso innecesario como fuera
avanzar o retroceder.
posible.
Con ello no estoy sugiriendo que los artculos de Salon.com sean ms cortos de lo que en
realidad son. Slo hablo de dos tipos especficos de escritura: discurso innecesario e instrucciones.
__________________
(1) William Strunk, Jt., y E.B. White, The Elements of Style. (Allyn y Bacon, 1979).
46
45
OMISIN DE PALABRAS INNECESARIAS CAPTULO 5
El cuestionario ha de completarse en tan slo 2-3 En este punto an trato de decidirme si me molesto con
minutos. el cuestionario, pero saber que es corto me dice que la
informacin es til.
En la parte inferior de este formulario puede dejar, si Esta instruccin carece de utilidad para m en este
lo desea, su nombre, su direccin y nmero de punto. Sera, al final del cuestionario, cuando podra
telfono. 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 ms 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 informacin importante
Servicio al cliente. y prctica. Desgraciadamente, sin embargo, no se
molestan en indicarme cmo contactar con el
www.verizon.com
Creo que un recorte agresivo es mucho ms prctico: departamento de Servicio al cliente (o an mejor, en
facilitarme un vnculo con el que poder hacerlo desde
aqu mismo).
DESPUS: 43 PALABRAS
Aydenos, por favor, a mejorar este sitio contestando a las siguientes preguntas. Slo 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
OMISIN DE PALABRAS INNECESARIAS
CAPTULO
Y ahora algo completamente diferente
En estos primeros captulos, he tratado de transmitir algunos principios a modo de consejo que
considero debe recordar a la hora de crear un sitio web.
Los dos captulos siguientes estudian la forma en que se aplican estos principios a los dos
6
desafos mayores y ms importantes del diseo web: la navegacin y la pgina principal.
Preprarse algo de comer porque son dos captulos largos.
Seales
en la calle
y migas
DISEO DE LA NAVEGACIN
49
CAPTULO 6
Y se puede uno encontrar en una preciosa casa acompaado de una
bellsima mujer y preguntarse, "bien..., cmo he llegado a todo esto?" Cuando cree que ha llegado al pasillo
TALKING HEADS, ONCE IN A LIFETIME
adecuado, empieza a mirar detenidamente pro-
Segn pasa por las puertas de Sears va pensando, "Hmmm! Dnde estn 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 ms
leerlos, desde el otro extremo del establecimiento.)
complejo, por una razn principalmente: a
medida que entra por la puerta dedica unos
microsegundos a tomar una decisin crucial,
prefiere empezar a buscar las motosierras o
"Hmmm!", piensa, "Herramientas o jardn?". Dado que Sears est especializado en prefiere preguntar a alguien?
las herramientas, se dirige hacia ese departamento. Se trata de una decisin 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
SEALES EN LA CALLE Y MIGAS CAPTULO 6
Algunas personas (Jakob Nielsen los llama usuarios "con dominio de la bsqueda" (2)
buscarn, casi siempre, el cuadro de bsqueda en cuanto visiten el sitio. (Puede que sean las mismas
personas que buscan al empleado ms prximo en cuanto entran en el comercio.)
_______________
(1) S. Z. "Cuddles" Sakall, o Eugene Sakall, nacido en Budapest en 1884. Irnicamente, 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 despus de huir de los Nazis.
(2) Vase "Search and You May Find" en el archivo de columnas Alertbox de Nielsen en
53 54
SEALES EN LA CALLE Y MIGAS CAPTULO 6
Con un poco de suerte, despus de hacer uno o dos clics, aparecer una lista con el tipo de
cosas que busca:
Ahora, ya puede hacer clic en los vnculos individuales para verlos en detalle, de la misma
forma que sacara los diferentes productos de las estanteras y leera sus etiquetas.
Finalmente, si no encuentra lo deseado, abandona. Esto es tan cierto tanto para un sitio
web como para el almacn Sears. Uno abandona cuando est convencido de que no tienen el
producto que buscamos o, cuando, simplemente, nos frustra el seguir buscando.
55
56
SEALES EN LA CALLE Y MIGAS CAPTULO 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 dnde estaban: justo detrs de la esquina, cerca de
explorar en la Web, de alguna forma sentimos estar movindonos por un espacio fsico y, si no, los frigorficos".
piense en los trminos utilizados para describir la experiencia: "navegar", "hojear" y " surfear" ,
Y nos dirigimos hacia all.
por ejemplo. Del mismo modo, hacer clic en un vnculo no "carga" o visualiza' otra pgina;
-
57
58
SEALES EN LA CALLE Y MIGAS CAPTULO 6
perder la nocin del tiempo en la Web (igual que ocurre cuando nos "perdemos" en un buen
libro (6). Nos ensea a usar el sitio. Si la navegacin hace bien su trabajo, mostrar,
Entre las desventajas est, creo, la explicacin al porqu usamos el trmino "navegacin implcitamente, el lugar por donde empezar y las opciones que hay. Si est
web" si nunca se habla de "navegacin por el centro comercial" o "navegacin por la correctamente realizada, debe ofrecer todas las instrucciones que usted necesita (lo que
biblioteca". Si consultamos navegacin en un diccionario encontramos dos cosas: ir de un es ideal, dado que la mayora de los usuarios ignoran las otras instrucciones).
sitio a otro y avetiguar dnde estamos.
Nos permite confiar en las personas que la han creado. En todo momento
Creo que hablamos de navegacin web porque "averiguar dnde estamos" es un pro-
blema bastante ms predominante en la Web que en los espacios fsicos. En la Web estamos durante el tiempo que estamos en un sitio web tenemos en mente lo siguiente: "Sabe
intrnsecamente perdidos, no podemos asomarnos por los pasillos para ver dnde estamos. La esta gente lo que est haciendo?". Es uno de los factores principales que usarnos a la
navegacin web compensa la ausencia del sentido del lugar incorporando la jerarqua del sitio, hora de decidir si merece la pena y si vamos a volver. Una navegacin clara y bien des-
creando una sensacin del tipo "all".
arrollada es una de las mejores oportunidades con las que cuenta un sitio para dar una
Pero la navegacin no slo es una caracterstica de los sitios web; es el propio sitio web, al buena impresin.
igual que el edificio, las estanteras y las cajas registradoras son Sears. Sin navegacin no hay un
"all" ms all.
Cules es la conclusin? La navegacin web tiene que ser buena. Convenciones de la navegacin web
Espacios fsicos como las ciudades y los edificios (e, incluso, espacios de informacin como
Propsitos de navegacin pasados los libros y las revistas) disponen de sus propios sistemas de navegacin, de sus convenciones que
han ido evolucionando con el paso del tiempo (seales en las calles, nmeros de pgina, ttulos
por alto de captulos). Las convenciones especifican, de una forma aproximada, la apariencia y la
Dos son, especialmente, los propsitos evidentes de la navegacin: nos ayuda a encontrar lo ubicacin de los elementos de navegacin, de manera que nos permiten saber en todo momento
que estamos buscando y nos dice tambin el lugar donde nos encontramos. lo que buscamos y dnde encontrarlo cuando lo necesitamos.
Podemos incluso hablar de un tercero: Colocarlos en un lugar estndar nos facilita el situarlos de forma ms rpida con un
mnimo esfuerzo; si se estandariza su apariencia, sern ms fciles de distinguir del resto.
Nos ofrece un lugar donde no nos perdamos. Sentirse perdido no es habitualmente algo Por ejemplo, esperamos encontrar en las esquinas las seales 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, tambin, que tengan el aspecto de unas
hecho bien, la navegacin pone el terreno bajo nuestros pies (aunque sea un terreno virtual) y seales de calle (que sean horizontales, no verticales).
nos proporciona las barandillas donde poder sujetarnos (hacindonos sentir bien asidos).
Pero la navegacin tiene, tambin, otras funciones muy importantes (y que se suelen pasar
por alto):
Nos dice lo que hay en cada lugar. Con una jerarqua visible, la navegacin nos presenta lo
que contiene el sitio. La navegacin nos revela el contenido; descubrir el sitio puede ser ms
importante, incluso, que el guiamos o situarnos.
Tambin 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) Tambin puede ser una razn ms por la que la carga lenta de pginas resulta tan molesta: qu tiene de
las revistas sabemos que hay una tabla de contenidos en alguna parte en las primeras pginas, y que
divertido volar si slo se puede ir a unos pocos kilmetros por hora?
stas tienen un nmero en su margen (y que estos nmeros tienen el mismo aspecto que en la tabla de
59
contenidos).
60
SEALES EN LA CALLE Y MIGAS CAPTULO 6
de dnde encuentre, pero siempre las encontrar aqu y siempre funcionarn as.
Solamente el hecho de tener La navegacin en el mismo lugar en todas las pginas y tener un
aspecto coherente confirma de forma inmediata, que an se encuentra en el mismo sitio (lo cual
es ms importante de lo que puede pensar). Mantenerlo as en todo el sitio significa que, muy
probablemente slo habr tendr que averiguar cmo funciona una sola vez.
La navegacin coherente debera, incluir los cinco elementos que ms se necesitan tener
siempre a mano:
61 62
SEALES EN LA CALLE Y MIGAS CAPTULO 6
Del mismo modo que esperamos ver el nombre del edificio encima de la puerta de entrada,
Dije todas las pginas? esperamos ver el identificador del sitio en la parte superior de la pgina (normalmente, en la
Ment; hay dos excepciones para la regla del "sgame a todas partes'':
esquina superior izquierda, o, al menos, cerca)'.
Pgina principal. La pgina principal no es como las otras pginas (tiene que soportar un
Y, por qu? Porque la identificacin del sitio representa al sitio entero y, como tal, ocupa el
peso diferente y tambin ha de cumplir con unos cometidos diferentes). Tal y como
lugar ms alto en la jerarqua lgica del mismo.
veremos en el siguiente captulo, algunas veces es mejor no recurrir a la navegacin
coherente en ella. Este sitio
Secciones del sitio
Formularios. En las pginas donde hay que rellenar un formulario, la navegacin coherente Subsecciones
puede ser una distraccin innecesaria. Por ejemplo, cuando pago mis compras en un sitio de Sub-subsecciones, etc.
comercio electrnico, lo nico que querr es que yo termine de rellenar los formularios. Esta pgina
Sucede lo mismo al registrarse, al obtener retroalimentacin o al comprobar las Zonas de la pgina
Elementos de la pgina
preferencias personales.
Para estas pginas resulta muy prctico tener una versin mnima de la navegacin Existen dos formas de alcanzar esta primaca dentro de la jerarqua visual de la pgina: convertirla
en lo ms prominente dentro de esa pgina o que sirva de marco para todo lo dems.
coherente que cuente slo con la identificacin del sitio, un vnculo a la pgina principal y
Dado que no querr poner el identificador como el elemento
cualquier servicio que pueda ser de ayuda para rellenar el formulario.
ms prominente de la pgina (exceptuando, quiz, en la pgina
principal), el mejor lugar para ponerlo (donde posiblemente me
Ahora s que no estamos en Kansas haga pensar menos) es la parte superior donde enmarcara la
En el caso de un sitio web, su identificacin es como el nombre de un edificio. En Sears slo
pgina 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 transportacin) rengo que verlo en todas las Adems de estar donde creemos que debera estar, el
pginas. identificador del sitio tambin debe tener el aspecto de un
identificador de sitio. Esto significa que debera tener los
atributos que esperamos ver en el logotipo de una marca o la seal exterior de un almacn: unos caracteres
distintivos y un grfico que sea reconocible, ya sea del tamao de un botn o del de una valla
publicitaria.
________________
(7)... es decir, en las pginas web escritas en idiomas que se leen de izquierda a derecha. Los lectores de pginas
rabes o hebreas esperarn que la identificacin del sitio est en el lado derecho.
63 64
SEALES EN LA CALLE Y MIGAS CAPTULO 6
Las secciones Las utilidades varan segn los diferentes tipos de sirios. En un sitio corporativo o de
Las secciones (denominadas, con frecuencia, navegacin principal) son los vnculos a las comercio electrnico, por ejemplo, podran ser las siguientes:
secciones principales del sitio: el nivel superior en la jerarqua del sitio. Acerca de nosotros Descargas Cmo comprar Registro
Archivos Directorio Trabajos Bsqueda
Pagar y salir Foros Mi ____________Carrito de la compra
Informacin Preguntas y respuestas Noticias Suscripcin
En la mayora de los casos, la navegacin coherente dispondr, adems, de un espacio para de la compaia FAQ
visualizar la navegacin secundaria: la lista de subsecciones de la seccin actual.
Contacte con nosotros Ayuda Seguimiento Mapa del sitio
del pedido
Servicio al cliente Pgina principal Notas de prensa Localizador del
establecimiento
Tabln de anuncios Relaciones de inversores Poltica de privacidadSu cuenta
Utilidades Normalmente, la navegacin coherente slo puede dar cabida a cuatro o cinco
Las utilidades son los vnculos a los elementos importantes del sitio que realmente no forman utilidades: las que los usuarios posiblemente necesiten con ms frecuencia. Si intenta
parte de la jerarqua de contenidos. encajar alguna ms, los usuarios se perdern en la multitud. Las que puede que se usen
menos deberan agruparse en la pgina principal.
Son cosas que nos pueden ayudar a usar el sitio (como Ayuda, Mapa del sitio o Carrito de la
D tan slo tres taconazos y diga:
compra) o nos pueden proporcionar informacin sobre su editor (como Acerca de nosotros y no hay como estar en casa
Uno de los elementos ms cruciales en la navegacin coherente es el botn o vnculo que
Contacte con nosotros).
me lleva a la pgina principal del sitio.
Al igual que las seales en un establecimiento, la
Tener el botn 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 botn Restaurar o utilizara la carta "Queda libre de la crcel".
prominente que las secciones.
Est empezando a surgir una convencin por la que el identificador del sirio dobla su
funcionalidad al aparecer tambin como botn que lleva a la pgina principal. Se trata de una idea
muy vlida que debera ponerse en prctica en todos los sitios, pero un nmero bastante asombroso de
usuarios ni siquiera lo conoce.
66
65
SEALES EN LA CALLE Y MIGAS CAPTULO 6
Por ahora, probablemente, es bueno:
Opciones. Si existe cualquier posibilidad de
Incluir un vnculo a la pgina confusin sobre el mbito de la bsqueda
principal en Secciones o Utilidades, o (dnde se est buscando: en el sitio, en parte del
Aadir con discrecin la palabra "Inicio" mismo o en la Web entera), inclyalo todo.
(o "Pgina principal") al identificador Pero pinseselo con mucho cuidado antes de fijar las opciones que limiten el mbito (por ejemplo,
del sirio en todas partes, excepto en la para buscar slo en la seccin actual del sitio). Prevea, igualmente, el ofrecer opciones distintas para
pgina principal, para que el usuario poder especificar lo que se busca (por ejemplo, bsqueda por ttulo o autor, o bsqueda por el nmero
sepa dnde puede hacer clic. de una pieza o por el nombre del producto).
Un mtodo de buscar
Dada la capacidad potencial de la bsqueda' y el nmero de personas que prefiere buscar en Raramente veo un caso donde el pago potencial por aadir opciones al cuadro de bsqueda coherente
lugar de echar un vistazo rpido, a menos que el sitio sea muy pequeo y est muy bien merece el coste que me produce el averiguar las opciones que hay y si necesito o no usarlas (es decir,
organizado, todas las pginas deberan tener un cuadro de bsqueda o un vnculo a la pgina de
si se me hace pensar).
bsqueda. Y aunque haya un mnimo de razones para buscar en su sitio, siempre
debe haber un cuadro de bsqueda.
Si se me quiere dar la opcin de ampliar la bsqueda, dmela si es prctica (cuando obtengo la pgina
No olvide que un gran porcentaje de usuarios en su primer acto oficial de investigacin de un
nuevo sitio, echarn un vistazo rpido a la pgina en busca de algo que coincida con uno de estos con los resultados de la bsqueda y descubro que la bsqueda arroja demasiados resultados,
tres modelos: necesitamos delimitar el mbito).
Creo que una de las razones fundamentales del xito de Amazon es la solidez de su bsqueda. Tal y
Se trata de una frmula muy sencilla: un cuadro de edicin, un botn y la palabra "Buscar". No se lo como mencion en el Captulo 1, Amazon fue una de las primeras libreras online (si no fue la
ponga difcil; atngase a la frmula y evite, en particular, lo siguiente: primera) que abandon la opcin "Ttulo/Autor/Palabra clave" de su cuadro de bsqueda 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 rpidamente", "Bsqueda rpida" o "Palabra clave de bsqueda". (Si utiliza
"Buscar" como etiqueta del cuadro, utilice las palabras "Ir ' como nombre del botn.) He realizado diversas pruebas con usuarios de libreras online; dejndoles total libertad, lo que
Instrucciones. Si se atiene a la frmula, cualquiera que haya usado la Web durante unos das sabr qu inevitablemente hacan en primer lugar era buscar un libro que les permitiera ver que la cosa
hacer. Aadir "Introduzca una palabra clave" es como decir "Djeme un mensaje despus de escuchar funcionaba. Y despus de muchas pruebas, el resultado me ense que la primera experiencia del
la seal" en su contestador automtico. Hace un tiempo era necesario, pero ahora slo le hara parecer usuario con Amazon se traduca en una bsqueda con xito, en tanto que en los sitios donde se
un poco negado. ofrecan al usuario varias opciones, ste se quedaba sorprendido ante el fracaso de la bsqueda porque
_______________ haba malinterpretado esas opciones.
(8) Desgraciadamente, tengo que decir "potencial", porque en la mayora de los sitios las posibilidades de que una
bsqueda ofrezca unos resultados prcticos son slo an del 50 por ciento. El uso de la bsqueda 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 inters
todo lo que dicen sobre la bsqueda.
68
67
SEALES EN LA CALLE Y MIGAS CAPTULO 6
... y pginas de ejemplo para la pgina principal y los dos niveles superiores.
Se hace una idea de cul fue el efecto de esta bsqueda sobre mi confianza en IMDB.com? Pgina principal Pgina a nivel de seccin Pgina de subseccin
En parte, creo, porque una buena navegacin multinivel es bastante difcil de disear (dado Ahora, debo admitir que tengo una especial debilidad por este tipo de trato porque
el limitado espacio de la pgina y el nmero de elementos que hay que encajar). procedo de Boston y all eres todo un afortunado si puedes leer las seales de la calle a
En parte porque los diseadores normalmente no disponen del tiempo suficiente para tiempo para efectuar el giro.
desentraar los dos primeros niveles.
Las seales de las calles son grandes. Al parar en un cruce se puede leer la seal de la menos sobre la que hay que trabajar en el diseo de la pgina, pero no es suficiente. El nombre de la
siguiente calle que cruza. pgina tambin es necesario.
Las seales estn 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 jerarqua visual de la pgina, el nombre
cual, todo lo que hay que hacer es mirar un poco hacia arriba). de sta debera aparecer enmarcando el contenido que es nico para esa pgina. (Despus de
todo, es a lo que se est dando un nombre, no a la navegacin o a los anuncios, que son slo
parte de la infraestructura.)
______________
(9) Vase Usted est Aqu", posteriormente en este captulo.
72
71
SEALES EN LA CALLE Y MIGAS CAPTULO 6
Claro que algunas veces tendr que tomar una solucin de compromiso,
normalmente, por las limitaciones del espacio. Si las palabras en las que hago
clic y el nombre de la pgina no se corresponden exactamente, lo ms
importante es que (a) se parezcan lo ms posible, y (b) la razn 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 pginas "gifts for men" (regalos para hombres) y
El nombre ha de ser prominente. Hay que buscar la combinacin de posicin, tamao, "gifts for women" (regalos para mujeres). Las palabras no son idnticas, pero se
color y caracteres para que el nombre diga: "ste es el encabezamiento para toda la pgina". En parecen tanto que ni me siento tentado a pensar en la diferencia.
En otras palabras, si hago. clic en un vnculo o botn que dice "Pur de patatas caliente", el sitio
me llevar a una pgina 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 milsimas de segundo: "Por qu son
esas dos cosas diferentes?". Si hay una mayor discrepancia entre el nombre del vnculo y el
nombre de la pgina 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
SEALES EN LA CALLE Y MIGAS CAPTULO 6
Breadcrumbs (migas)
En la Web esto se resuelve realzando mi situacin actual en cualquier barra de Al igual que los indicadores "Usted est aqu", las migas de pan nos indican dnde
estamos. (Algunas veces, incluso, incluyen un texto corno, por ejemplo, "Usted est
navegacin, lista o men que aparezca en la pgina.
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).
aadiendo ms ruido a la pgina. Una forma de asegurar que sobresalgan es aplicando Podra decirse que los marcadores de libros se parecen mucho a las migas de pan de los
ms de una distincin 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 algn momento. O podra sugerirse que los vnculos
Las claves visuales demasiado sutiles son realmente un problema muy comn. Los
visitados (vnculos que han cambiado de color para reflejar que se ha hecho clic en ellos)
diseadores adoran las claves sutiles, porque la sutileza es uno de los rasgos del diseo se parecen ms a las migas de pan porque sealan 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 pjaros) los har desaparecer (12).
ellas. ______________
En general, si usted es diseador 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 pjaros 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 inmolacin,
pero bsicamente trata de lo desagradable que resulta perderse.
(11) Realmente, la verdad es un poco ms complicada que esto. Si est interesado, Keith Instone ofrece un
tratamiento excelente del tema de las migas en la direccin
(12) Los vnculos ya visitados terminan expirando y volviendo a su color original si no vuelve a visitarlos. El
periodo de caducidad predeterminado vara entre 7 y 30 das, dependiendo del explorador que utilice. Ojal se me
75 hubiera ocurrido a m mismo la conexin imaginaria entre vnculos visi-
76
SEALES EN LA CALLE Y MIGAS CAPTULO 6
About.com cuenta con la mejor puesta en prctica de migas de pan que conozco e ilustra
Hasta hace muy poco, las migas de pan era algo muy raro que slo se encontraba en los sitios algunas de las "mejores prcticas".
con enormes bases de datos y con jerarquas muy profundas, como el directorio web de Pngalas en la parte superior. Las migas
Yahoo... parecen funcionar mejor si estn en la parte
superior de la pgina, 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 nmeros de
CNET... las pginas 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 pgina, acaban compitiendo con la navegacin
www.download.com principal. Cul es el resultado? Que me hace pensar. ("Cul es la navegacin real? Cul
debera estar usando?")
donde ofrecen a los usuarios cierta percepcin de su situacin dentro del gran esquema de las Utilice el signo > entre los distintos niveles. Por el mtodo de prueba y error se ha demostrado
cosas, al tiempo que permiten que los subsitios conserven sus esquemas de navegacin independientes, que el mejor separador entre los distintos niveles es el carcter "mayor que" (>).
y, con frecuencia, incompatibles.
Pero actualmente aparecen cada vez en ms sitios, algunas veces en lugar de una nave.
gacin bien desarrollada.
Los dos puntos (:) y la barra inclinada son factibles, pero > es ms satisfactorio y evidente
Para la mayora de los sitios, no creo que slo las migas de pan constituyan un buen esquema de
(probablemente porque, visualmente, sugiere un movimiento hacia delante y por los
navegacin. No son un buen sustituto para mostrar, al menos, las dos capas superiores de la jerarqua,
distintos niveles).
porque no revelan lo suficiente. Dan una idea, una visin, pero se trata ms bien de una visin
parcial limitada. No le estoy diciendo que no utilice slo migas, sino que no son una forma Utilice un tipo de letra pequeo. Una vez ms, para sealar que slo se trata de un accesorio.
buena de presentar la mayora de los sitios.
Utilice las palabras "Usted est aqu". La mayora de los usuarios entiende lo que son las
No me malinterprete. Si estn bien realizadas, las migas de pan son claras y fciles de entender, migas, pero aunque est en letras pequeas, no afecta a su claridad.
no ocupan demasiado espacio y proporcionan una forma muy acertada, conveniente y coherente de Ponga en negrita el ltimo trmino. El ltimo nombre de la lista debera ser el de la pgina
hacer dos de las cosas que con ms frecuencia se necesitan: retroceder un nivel o ir a la pgina actual y resaltndolo 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 slido de navegacin; en particular, para los sitios grandes con una jerarqua
profunda o cuando hay que relacionar un conjunto de subsitios.
_____________________
tados y pjaros 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
SEALES EN LA CALLE Y MIGAS CAPTULO 6
No las utilice en lugar del nombre de la pgina. Con frecuencia se ha intentado que el ltimo y
trmino de la lista de migas tenga una doble funcin y evitar as tener un nombre de 800.com
pgina separado. Algunos sitios han intentado hacer el ltimo trmino de la lista el ms 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 pgina al final de una lista.
Fidelity.com
Cuatro razones por las que me encantan las fichas LandsEnd.com
Todava 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 opcin maravillosa para navegar por los sitios grandes. Aqu estn las razones:
recurre a una metfora fsica en la interfaz del usuario y
funciona (14). Al igual que los separadores con etiqueta Son muy Jaras y fciles de entender. No he visto nunca a nadie (sin importar lo ignorante
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?".
carpetas de un cajn archivador, separan todo lo que
pertenece a esa seccin y facilitan que se abra una seccin Son difciles de perder de vista. Cuando hago pruebas consistentes en "apuntar y hacer clic"
a los usuarios, me sorprendo de la frecuencia con que pasan por alto las barras de botones
con slo tomar la etiqueta (o, en el caso de la Web,
situadas en la parte superior de la pgina web (15). Pero dado que las fichas son visualmente tan
haciendo clic en ella). distintivas, resulta bastante difcil que se pasen por alto. Dado tambin que es muy difcil que
Muchos sitios han empezado a utilizar las fichas para la navegacin. se las confunda por algo que no sea navegacin,
crean el tipo de separacin tan obvia a primera vista deseada entre la navegacin y el contenido.
_____________ Estn muy logradas. Los diseadores web siempre estn luchando porque las pginas sean
(13) Nota para uno mismo: compruebe si Microsoft empez a usar los cuadros de dilogo tabulados antes que ms interesantes visualmente. Si se hacen correctamente (vase a continuacin) las fichas
Bill Gates comprara el cuaderno de notas de Leonardo da Vinci.
pueden aadir 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 debera sorprenderme. Me las arregl con My Yahoo docenas de veces antes de caer en la cuenta de que la
idea de enturbiar las aguas metafricas usando la misma accin de arrastrar a la papelera de reciclaje para
fila de vnculos de la parte superior de la pgina eran ms secciones de My Yahoo. siempre haba supuesto que My
expulsarlos disquetes (resultando, a la larga, en millones de globos idnticos con pensamientos del tipo "Espere,
Yahoo era simplemente una pgina y que los vnculos eran otras partes de Yahoo.
no se borrar?").
79
80
SEALES EN LA CALLE Y MIGAS CAPTULO 6
A la larga se han visco forzados a llevar la metfora de la ficha hasta el punto de ruptura
Sugieren un espacio fsico. Las fichas crean la ilusin de que la etiqueta activa se desplaza
incluso efmera versin de dos filas estaba notablemente bien diseada.
fsicamente para colocarse en primer plano.
Todo el que est pensando en usar fichas debera estudiar cuidadosamente el diseo
de fichas clsicas de Amazon, e imitar fielmente los tres atributos claves:
Tienen que estar perfectamente dibujadas. Para que las fichas funcionen a la
Es un truco fcil pero efectivo, probablemente, porque se basa en una clave visual que detectamos
fcilmente ("unas cosas delante de otras"). De alguna forma, el resultado es una sensacin perfeccin, los grficos tienen que producir la ilusin visual de que la etiqueta de la ficha
ms fuerte de lo habitual por la que vemos que el sitio est dividido en secciones y nos efectiva est por delante de las dems. sta es la caracterstica principal que las convierte
encontramos en una de ellas. en fichas (incluso ms que la forma distintiva que tienen de solapa) (16).
Para crear esta ilusin, la solapa activa tiene que tener un color diferente o una
Si le agrada tanto Amazon, porqu sombra que contraste y debe conectar fsicamente con el espacio debajo de ella. Esto es
lo que la solapa activa "pasa" a la parte delantera.
no se casa con ella?
Al igual que ocurre con otras buenas prcticas web, Amazon fue uno de los primeros sitios en MAL: Sin conexin, no pasa a primer plano.
usar los separadores en forma de fichas para la navegacin y el primero que lo consigui
MEJOR: Conectada, pero sin contraste. El
correctamente. Con el paso del tiempo han continuado refinando y perfeccionando su
implementacin hasta alcanzar casi la perfeccin, si bien continan 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 grficos 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 pginas tienen el aspecto de solapas, pero actan botones normales.
81 82
SEALES EN LA CALLE Y MIGAS CAPTULO 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
Estn codificadas mediante colores.
fichas en los cruciales primeros segundos, cuando en realidad, ms cuenta.
Amazon utiliza un color de solapa
diferente para cada seccin del sitio, y
utiliza ese mismo color en los dems
elementos de navegacin de la pgina
para agruparlos.
La codificacin mediante colores de Amazon siempre ha tenido una ficha seleccionada en su pgina principal; durante mucho
las secciones es una idea bastante tiempo ha sido la de los libros.
buena (siempre que no se confe 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 aos)
Sin embargo, a medida que el sitio perdi un poco su centro de inters en los libros, dieron a la
simplemente no son capaces de detectar los distintos colores porque son daltnicos. pgina principal una ficha propia (denominada "Welcome").
83
84
CAPTULO 6
SEALES EN LA CALLE Y MIGAS
Ahora, realice la prueba con las cuatro pginas web que se presentan a continuacin y
compare sus resultados con los mos (los encontrar a continuacin de las pantallas de prueba, al
final del captulo).
Cuando haya terminado, pruebe el mismo ejercicio en una docena de pginas 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
SEALES EN LA CALLE Y MIGAS CAPTULO 6
Usted est aqu
QU LE PASA
A ESTA PGINA?
____________________________________________________________
MI VERSIN
He aadido...
Un nombre a la pgina
en la parte superior del
espacio de contenidos.
Un indicador "Usted est
aqu" en la lista de la iz-
quierda.
Un vnculo de bsqueda
en la lista de utilidades.
89 90
SEALES EN LA CALLE Y MIGAS CAPTULO 6
Puse el vnculo Audio/Video por encima del Hay una serie de dilemas subyacentes aqu que hay
nombre de la pgina, de forma que la jerarqua que resolver antes de pensar, incluso, en la distribucin
Tambin hice un poco ms grande el nombre de la Todo lo que he hecho ha sido comprimir la parte
pgina y lo desplac hacia la izquierda, en lugar superior un poco e intentar que se distinga el espacio
de centrarlo. (En una jerarqua visual, creo que del contenido ms fcilmente aadiendo un color de
Por la misma razn coloqu el botn de bsqueda pgina estuviera colocado de tal manera que se pudiera
92
91
SEALES EN LA CALLE Y MIGAS
7
A ESTA PGINA?
No le pasa gran cosa. Tuvo problemas para
encontrar algo?
Lo apoyo con mi caso.
El primer
paso para
MI VERSIN
No hay casi nada que mejorar aqu.
la recuperacin
Rehice la bsqueda. (Desconozco por qu
usaron "Enter Keywords" aqu cuando se
sirven de la simple palabra "Search" en casi
es admitir
todas las dems partes del sitio.)
Y si va a ofrecer una bsqueda, siempre es
mejor que incorpore la palabra "de" para que
que ha perdido
la frase sea: "Bsqueda _____________
de ___________________.
Tambin agrand un poco el tamao del
el control
nombre de la pgina para que la divisin
entre contenido y los espacios de navegacin
fuera an ms clara.
de la pgina
principal
DISEO DE LA PAGINA PRINCIPAL
93
Lucy, tienes que dar una explicacin. CAPTULO 7
-DESI ARRAZ, COMO RICKY RICARDO
Sugerencias. Como la portada de una
revista, la pgina principal necesita
convencerme con sugerencias de "lo bueno"
que hay en su interior. Los anuncios de
contenido exponen los ltimos, mejores y ms
populares contenidos, como las mejores
95 96
EL PRIMER PASO PARA LA RECUPERACIN ES ADMITIR QUE HA PERDIDO CAPTULO 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 dnde empezar. No hay nada peor que encontrar una pgina principal y no
tener idea de por dnde comenzar.
Establecer credibilidad y confianza. Para algunos visitantes, la pgina principal ser la
nica oportunidad de que su sitio cause una buena impresin. :
__________________
(1) Trmino heredado de los peridicos, que se refiere a la parte de la pgina que se puede ver sin
desplazarse. 98
97
EL PRIMER PASO PARA LA RECUPERACIN ES ADMITIR QUE HA PERDIDO CAPTULO 7
Tan rpido y claro como sea posible, la pgina 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: DESCRIPCIN GENERAL EN LA PGINA 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 ms probable que interprete correctamente todo lo Si el sitio es muy complejo o nuevo, un vnculo "Nuevo en este sitio?"
que veo en la pgina, lo que aumenta en gran medida mis posibilidades de tener una experiencia destacado es una buena idea. Pero no sustituye a la explicacin de la
satisfactoria y exitosa. descripcin general, ya que la mayora de los usuarios no harn clic en
No me malinterprete: todo lo dems 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 estn desesperanzadamente confundidos.
gente, dentro y fuera del equipo de desarrollo, viendo lo que hacen. Con demasiada frecuencia, sin
embargo, nadie tiene un inters 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 can. (Estos han sido sustituidos por) anuncios serios en los que el cmico Martin explica a los
consumidores lo que Outpost.com vende (computadores, tecnologa y equipamiento electrnico). "Pudimos
haberle dicho eso, pero disparamos jerbos con un can", bromea. "En qu estaramos pensando?...
99
100
EL PRIMER PASO PARA LA RECUPERACIN ES ADMITIR QUE HA PERDIDO CAPTULO 7
Cmo dar a entender el mensaje Aqu tiene unas pautas para dar a entender el mensaje:
Todo en la pgina principal puede contribuir a nuestro entendimiento de lo que es el
Utilice tanto espacio como sea necesario. La tentacin es no querer utilizar cualquier espacio
sitio. Sin embargo, hay dos lugares importantes en la pgina donde esperamos encontrar frases porque (a) usted no puede imaginar que cualquiera no sabe qu es este sitio, y (b) todo el
explcitas de lo que es el sitio. mundo pide utilizar el espacio de la pgina principal para otros fines.
La lnea de etiquetas. Uno de los espacios ms 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 lnea de etiquetas, y as lo leemos como una descripcin del utilidades), Essential.com tiene muchas explicaciones que dar, de modo que ellos utilizan
sitio entero. Veremos estas lneas con detalle en la siguiente seccin.
sabiamente mucho espacio de la pgina principal para hacerlo. Casi todos los elementos de la
pgina ayudan a explicar o reforzar sobre qu trata el sitio..
1. Lnea de etiqueta prominente.
2. Prominente pero breve
anuncio de bienvenida. Las
palabras "Why", "How" y "Plus"
se utilizan hbilmente 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
estos departamentos es comprar
El anuncio de bienvenida. El anuncio de bienvenida es una descripcin breve
del sitio, mostrada en un bloque destacado de la pgina principal que es visible sin algo, no slo conseguir infor-
desplazarse. macin.
El hecho no es que todo el mundo utilice estos dos elementos, o incluso que todo el 4. La cita testimonial (y la foto
mundo los vea. La mayora de los usuarios probablemente intentarn primero adivinar qu es
que dirige su ojo a ella) cuenta la
el sitio a partir del contenido global de la pgina principal. Pero si no pueden adivinarlo, querrn
historia de nuevo.
tener algn lugar en la pgina al que puedan ir para averiguarlo.
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 misin. Pero si lo hace, tiene que
asegurarse de que las seales visuales dejan claro que toda esta rea es un modificador del
identificador del sitio y no un anuncio, ya que los usuarios esperarn ver un anuncio en este
espacio y probablemente lo ignorarn.
101 102
EL PRIMER PASO PARA LA RECUPERACIN ES ADMITIR QUE HA PERDIDO CAPTULO 7
... pero no utilice ms espacio del necesario. Para la mayora 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 bsica, y los mensajes que ocupan la sirio.
pgina principal entera son habitualmente demasiado grandes como para que la gente
se interese por ellos. Hgalos cortos, lo suficiente para ir al grano, y nada ms. No se
sienta obligado a mencionar cualquier gran caracterstica, slo las ms importantes
(mximo cuatro).
No use una frase relativa a la misin de la empresa como anuncio de bienvenida. Muchos
sitios llenan su pgina principal con frases relativas a la misin 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 Amrica.: "XYZCorp le ofrece
porque estn en un lugar de la pgina donde la mayora de los usuarios esperan encontrar
soluciones de mbito mundial en el prspero campo de bla, bla, bla...". Nadie las lee.
una descripcin concisa del objetivo del sitio.
Es una de las cosas ms importantes que deben probarse. No puede confiar en su propio
criterio sobre esto. Debe mostrar la pgina 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 diseo est cumpliendo su cometido, porque el "enfoque principal" es lo
Las buenas taglines son claras e informativas.
nico que nadie dentro de la organizacin 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, espectculos y
publicaciones: "Miles de VCRs a precios imposibles", "Ms estrellas que en el cielo" (3), y All the Las taglines buenas tienen la extensin justa. De seis a ocho palabras son suficientes para comunicar
News That's Fit to Print (4) , por ejemplo. un pensamiento completo, aunque las ms cortas se asimilan ms fcilmente.
"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 aadi 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 dcadas 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 RECUPERACIN ES ADMITIR QUE HA PERDIDO CAPTULO 7
Las taglines buenas expresan diferenciacin y un beneficio claro. Tagline? No necesitamos ninguna
tagline psima
A algunos sitios no les hace falta una tagline. Por ejemplo:
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 beneficiaran de
manos", o "Para proteger y servir". Un lema expresa un principio director, un objetivo o un ideal, pero una tagline. Despus de todo, independientemente de lo conocido que sea, por qu renunciar
una tagline comunica una proposicin de valor. Los lemas son sublimes y alentadores, pero si no s de a una discreta oportunidad de explicar a los visitantes por qu estarn 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 misin online nunca es exactamente la
Las taglines buenas son gratas, enrgicas y a veces ingeniosas. El ingenio es bueno, misma y es importante explicar la diferencia.
pero slo 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 impresin de que BabyCenter.com
es slo par comprar "material" para bebs, cuando en realidad Una vez que s lo que estoy buscando, queda todava una pregunta importante que la pgina principal
__________
(5) Incluso Amazon tuvo una tagline hasta 1998, cuando ya era una palabra
familiar.
105
106
EL PRIMER PASO PARA LA RECUPERACIN ES ADMITIR QUE HA PERDIDO
Cuando entramos en un sitio nuevo, tras un vistazo rpido a la pgina principal deberamos
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 debera 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 deberan 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 difcil
encontrarlos cuando la pgina 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 bsqueda parezca un cuadro de bsqueda,
o que la lista de secciones parezca una lista de secciones). Tambin ayuda etiquetarlos
claramente, con etiquetas como "Buscar", "Examinar por categora", "Firmar" y "Empiece
aqu" (para un proceso paso a paso).
Descripciones de seccin. Ya que la pgina principal tiene que mostrar tanto como se
pueda de lo que yace debajo, puede que quiera aadir una frase descriptiva a cada nombre
de seccin, o incluso a la lista de subsecciones, algo para lo que no tiene espacio en cada
pgina.
107