You are on page 1of 196
No me hagas pensar Una aproximacion a la usabilidad en la Web Segunda edicion Steve Krug Traduccién José Manuel Diaz Aporte por: PICHU: YER’ Madrid * México * Santafé de Bogord * Buenos Aires * Caracas * Lima * Montevideo * San Juan * San José * Sao Paulo * White Plains indice de contenido PROLOGO INTRODUCCION CAPITULO 1 CAPITULO 2 CAPITULO 3 CAPITULO 4 CAPITULO 5 CAPITULO 6 CAPITULO 7 ‘Acerca de la segunda edicién. Vu Prélogo xIV Léame primero ‘Aclarado de voz y renuncia de responsabilidades jNo me hagas pensar! 10 Primera norma de la usabilidad de Krug ZComo usamos realmente la Web? 20 Ojear; ser suficiente y ameglarselass Disefio de rétulos 101 30 piseflo de paginas para hojear, no para leer zAnimal, vegetal o mineral? 40 Por qué le gustan al usuario las opciones mecdnicas? Omision de palabras Mimesesarias 44 Flarte de no escribir en la Web Sefiales en la calle y migas 50 Disefto de la navegacién El primer paso para la recuperacion 94 es admitir que ha perdido el control de Ia pagina principal Disefto de la pagina principal VI CAPITULO 8 CAPITULO 9 CAPITULO 10 CAPITULO 11 CAPITULO 12 El granjero y el ganadero deben 122 ser amigos Por qué la mayoria de los argumentos del equipo de disefio web acerca de ia usabilfdad son una pérdida de tiempo y cémo evitarlos Prueba de usabilidad por 10 centavos 130, al dia Sencillez en las pruebas La usabilidad como cortesia comin 160 Por qué su sitio web debe ser un mensch Accesibilidad, hojas de estilo en cascada y usted 168 ‘Simplemente cuando piensa que ya lo ha hecho, aparece un gato con una tastada untada con mantequilla atada ata espalda iAyuda! Mi jefe quiere que : 180 Cuando los mejores toman malas decisiones dé diserto Lecturas recomendadas 186 Agradecimientos - 192 indice analitico 198 vil Prologo NO ME HAGAS PENSAR OTRA VEZ 22% lo mucho que han cambiado las cosas desde el afio 2000, cuando se imprimié la primera edicién de este libro, sorprende que el disefio bésico de la Web siga siendo igual en muchos casos. En los primeros afios la plataforma era voldtil. Parecfa que las cosas cambiaban todas las semanas, Estdbamos inmersos en guerras de navegadores, con Netscape cuadrando todas las esquinas y el W3C sacando a la luz nuevos estindares de HTML cada seis meses. Pero entonces, con la predecible victoria de los de Redmond, todo se tranquilizé. Esto supuso un alivio para los disefiadores web, que se volvian locos por los constantes cambios en el e6digo. Pero ese alivio pronto se fue convirtiendo en frustracién. La inflexibilidad de HTML, la carencia de fuentes, la adaptabilidad de las paginas web que provoca que el disefio sea tan impreciso, el confuso conjunto de resoluciones y navega- dores (aun cuando casi siempre se utiliza Explorer)... Todos estos factores son tan molestos. La exasperacién de los disefiadores se comp! debido a la lenta coagulacién de una cierta cantidad de convenciones restrictivas, como el uso de banners. No todas las conven ciones son malas, en absoluto. De hecho, los usuarios adoran las convenciones, aun cuan- do los disefiadores las encuentran constringentes. Para la mayorfa de las personas, es bastante duro conseguir que el computador funcione. Y mientras estas convenciones pueden cambiar, hay una constancia que nunca cambia: Ja naturaleza humana. A pesar de lo radical y destructivo que una fuerza social y comercial como Internet ha sido, todavia no ha conseguido provocar una mutacién notable en la espe- cie. xIV Y como los disefiadores no entramos, por norma, en contacto con los seres humanos reales, es muy dil conocer a Steve Krug (0 al menos tener este libro), porque Steve conoce alos usuarios. Después de mas de una década de trabajo, sigue mirando cada sitio web como sifuera el primero. Aqui no encontraré palabras sobrantes: s6lo encontrar4 sentido comtin yun juicio amistoso de cémo miramos, cémo pensamos y cémo leemos. Los ptincipios que Steve comparte en este libro seguirdn siendo los mismos, indepen- dientemente de lo que ocurra con Internet (con las convenciones web, o con el sistema ope rativo, o con el ancho de banda, o con la potencia de los computadores). Asi que tome asien- toy reldjese. ROGER BLACK Nueva York, julio de 2005 ee alocee ACLARADO DE VOZ Y RENUNCIA DE RESPONSABILIDADES— eRealmente es necesario hacer este viaje? ESLOGAN DE 10S POSTERS DE LA SEGUNDA GUERRA MUNDIAL QUE ALENTARAN Al, RACIONAMIENTO DE GAS, uuando empecé a comentar que estaba preparando un libro acerca de emo hacer lo que ‘0 hacta, todos me preguntaron lo mismo: “No te da miedo quedarte sin traba Lo cierto es que tengo un gran trabajo. + La gente (“los clientes”) me envia propuestas de disefios de pagina para el nuevo sitio web que ellos mismos estin preparando o el URL del sitio ya existente que estan redli- sefnando. Nuevo disenio A Nuevo diseno 8 Sitio existente de pagina principal de pagina principal ss de manejar (examen de experto en usabilidad”). Algunas veces pago a gente para que intente uti- ® Miro los disefios 0 uso el sitio y deduzco si son lo suficientemente fiic lizar el sitio mi nntras yo observo (“prueba de usabilidad”) * Redaeto un informe deseribien- do los problemas probables con / = [ er, 2 los que, considero, los usuarios (= i Informe de usabilidad. se van a encontrar (“asuntos de } usabilidad”) y sugiero posibles soluciones’, nunca confiendir con “voyenrismo”. Realmente, esto es algo que ha cambiado desde Ia primera edicién, y la ntzén por la que he dejado de escribir al respecto la encontrard ex el Capleulo 9, NO ME HAGAS PENSAR * ‘Trabajo con el equipo de disesio web del cliente para ayudarles a resolver los problemas Podriamos hacerlo de esa forma, pero, si ponemos, por ejemplo, las historias mas importantes. debajo del anuncio de personalizacion Me pregunto si quedan bollos. 18), mire! Alguien ha traido unos En ocasiones trabajamos por telefono. y otras en persona + Me pagan por cllo. El trabajar como consultor me permite participar en proyectos interesantes con perso- s realmente preparadas y brillances; al rerminar, los sitios estiin mejor que cuando empe- vamos a trabajar. La mayor parte del tiempo de trabajo lo paso en casa sin tener que asistir a reuniones diatias soporiferas ni tratar con politicas de oficina. Puedo decir lo que pienso y normalmente se tiene en cuenta, Ademés, el trabajo estd bien pagado. Créanme, no me atreveria ni en lo mas minimo a poner en peligro esta forma de vida Pero, en realidad, hay muchos sitos web necesitados de ayuda (y sélo unos pocos que hacen Jo que yo mismo hago) que, salvo que hubiera un colapso total y repentino del boom de Internet’, me ofiecen la oportunidad de seguir trabajando durante unos cuiantos aftos mis, De repente, muchas personas con mas bien poca experiencia previa, 0 incluso ninguna, sc han tenido que responsabilizar de proyectos de gran presupuesto que pueden determinar el futuro de sus empresa correctamente stas personas buscardin a otras que les digan silo estan haciendo ! Ahora sengo 2 trabajo aiin mds cémode, Desde que slid el libro, paso mucho de mi tiempo en las tulleres de aprendizaje, donde, a diferencia de ta consulteria, no bay oportunidad de postengar una tarea Al final del dia, todo eid hecho. Obviamente, poco después de que yo escribiera esto asmenth ef ange (a tleimos det 2000). Attn ast seguramente ahora hay neds personas trabajando en temas de usabilidad que entonces. LEAME PRIMERO Los diseftadores graficos y los desarrolladores suelen ser los responsables del disefio de las interfaces (en temas como el disefio de la interaccidn; por ejemplo, lo que ocurre después que el usuario haya hecho clic) y la arquitectura de la informacién (la forma en que se orga- niza todo). Y la mayorfa de estas personas carece de un presupuesto para contratar a consultores de usabilided que revisen el trabajo (para qué hablar de tener uno cerca todo el tiempo) EBscribo este manual para los que no pueden permitirse contratar (0 contar con) perso- nal como yo, Del mismo modo, espero sea de gran valor para los que trabajan con profe- sionales de la usabilidad. Espero, por Io menos, que ayude a evitar algunas discusiones interminables y viciadas del disefio web que parecen consumir tantisimo tiempo. No se trata de cirugia disparatada™ Lo bueno es que gran parte de lo que hago es de sentido comiin y cualquiera que ten- gaiinterés puede aprender a hacerlo, Después de todo, Ia usabilidad sdlo significa el asegurarse que algo funcione bien: que Una persona con capacidad y experiencia media (o incluso por debajo de la media) pueda ser capaz de usar algo (ya sea un sitio web, un avién de combate o una puerta giratoria) con ¢l objetivo deseado sin sentirse completamente frustrado. Como en Ia mayorfa de los casos de sentido comtin, sin embargo, no es necesariamen- te obvio hasta después que alguien se lo haya sefialado’. Sin duda alguna: , si se lo puede permitis, contrate una persona como yo. De no ser Posible, espero que el presente manual le permita hacerlo a usted mismo (en su largo tiem- po libre). * sw tna de las razones por la gue mi negocio de consultoria se llama Advanced Common Sense Gemido comin avanzado) (negocio que, en realidad, Uevo yo mismo junto a una serie de epejos bien sitwades). El ema de mi empresa es: "No se trata de cirugia disparatada’ NO ME HAGAS PENSAR Y es un libro fino He trabajado mucho para que el libro sea breve (espero que lo sea suficientemente para poder leerse en un viaje de avién largo). Y lo hice por dos motivos: + Si es breve, es més probable que se use’. Escribo. pa Coletta publecitaria iawn a los que estén en las trincheras ( lladozes, productores de sitios, directores de pro- seftadores, desarro- yectos, gente de marke- ting, petsonas que extienden los cheques, y gente que ha formado su propio grupo y se encargan de todo). La usabilidad no es el tra- bajo de su vida y no dis pone del tiempo nece- sario para leer un libro largo. + No es necesario saberlo todo. Al igual que en todos los campos, podria aprenderse mucho sobre la usabilidad, pero, a menos que sea un profesional de la misma, hay que poner un limite a la cuantia de lo que realmente es prictico en el aprendizaje”. Un bnen principio de la usabilidad es que si algo requiere mucho tiempo (0 parece vaya a nece- sitarlo) es menos probable que se acabe utilizando. Siempre he disfrutado de un pasaje de “Un estudio en escarlata” (A Study in Searle) donde el Dr. Watson se horroriza al ver que Sherlock Holmes no sabe que la Tierra se mueve altededot del Sol. Dada la capacidad finita del cerebro huimano, segiin explica Holmes, no se puede permitir el lujo de pensat en hechos intiiles que dejen aun lado 2 los ticles: 2Qué diablos es para m@? Dice que vsjamos alrededor del Sol, pecosifueramos alrededor de la lana «so no influ fo mas mimo ai en mi ni en mi abajo.” 6 LEAME PRIMERO valiosas que hago en cada uno de los proyectos procede dad. Creo, también, que para la mayor parte de la gente es mas importante poder entender estos princi- pios que cualquier otra lista de la lavanderfa con normas especificas. He intentado resumnir las pocas cosas que considero deberia saber toda persona que trabaje en la creacién de sitios web. eo que las aportaciones mé siempre de la presencia constante en la mente de los principios claves de la usabil Ausente en el momento de la foto Si no desea perder tiempo buscéndolas, aqui tiene algunas cosas que no encontrar cn este manuals + “La verdad” sobre la forma correcta de disefiar sitios web. He estado trabajando en esto durante bastante tiempo; el suficiente para saber que no hay una forma “correcta” para diseftar sitios web. que me hacen es que “simplemente depende” que hay unos cuantos principios précticos rectores que siempre ayuda tenerlos en mente, y que son los que voy a intentar transmitir, un proceso complicado y la respuesta real para la mayoria de las pregunt Pero creo + Debate de modelos de empresa. Si la historia nos ha ensetiado algo es que los mode- Jos de empresa de Internet son como los aurobuses: si se pierde uno, todo lo que hay que hacer es esperar un poco hasta que llegue el siguiente. No soy un experto para hacer dinero en la Web, y silo fuera, lo que tuviera que decir probablemente estarfa pasado de moda para cuando leyera este libro. * Predicciones para el futuro de la Web. Su conjetura es tan buena como la mia. De lo tinico que estoy seguro es de que: (2) la mayoria de las predicciones que oigo son casi siempre incorrectas, y (b) las cosas que resulten ser importantes aparecerin como tuna gran sonpresa aunque posteriori nos parezean como algo completamente obvio, *+ Hablar mal de los sitios disefiados de forma desacertada. Si le agrada la gente que se burla de los sitios con defectos evidentes, ha comprado el libro equivocado. Dise- ilar, crear y mantener un buen sitio web no es tarea facil. Es un poco como el golf tuna cantidad exigua de formas de introducir Ia pelotita en el agujero, un millén de ellas para no introducirla. Cualquiera que lo consigue de una forma mis 0 menos correcta tiene toda mi admiracién. * Jared Spool y sus consultores de usabilidad en User Interface Engineering (Ingenieria de inter fiz del usuario: www.ti.com) tienen incluso camisetas con la expresién Jt depends (simpleme depende”) NO ME HAGAS PENSAR Como resultado va a descubrir que los sitios que utilizo como ejemplos acaban sien- do de una calidad muy superior con defectos secundarios. + Ejemplos de todo tipo de sitios. La mayoria de los ejemplos del libro proceden de sitios de comercio electrénico, pero los principios que se describen se aplican igual- mente en la pégina vanidosa de mi vecino de al lado, en la pagina del equipo de fit- bol de mi hija o en la intranet de su empresa. Incluir ilustraciones de todos estos géne- ros diferentes hubiera dado como resultado un libro mucho més grueso y menos tril. EQuién va primero? He intentado evitar las referencias constantes a “usuario” y a “usuarios” en todo el tex- to en parte por el factor tedioso y en parte también para intentar hacerle pensar sobre su propia experiencia como usuario de la Web mientras va leyéndolo (algo que la mayorfa ten- demos a olvidar cuando tenemos puestos nuestros sombreros de disefio web). Todo esto nos lleva al siguiente empleo de los pronombres a lo largo del libro: + “Yo” soy yo, el autor, Unas veces soy yo el profesional de la usabilidad (“les digo a mis clientes...”) y otras soy el que habla como usuario de la Web (“Si no puedo encon- trar la opcién Biisqueda...”), pero siempre soy yo. + “Usted” es usted, el lector, alguien que disefia, crea, publica o paga las cuentas del sitio web. + “Nosotros” (‘“Cémo usamos en realidad la Web”) somos todos los usuarios de la Web, lo que nos incluye a “usted” y a “mi”, Puede que ocasionalmente deje a un lado estas normas, pero espero que el contexto siempre deje claro de quién estoy hablando. LEAME PRIMERO zEs realmente necesario hacer este viaje? Podrfa enumerar algunas estadisticas recurrentes e impresionantes sobre los cientos de miles de délares que dejardn sobre la mesa este afio los sitios a los que no les importa dema- siado la usabilidad. Pero dado que ya tiene un libro sobre usabilidad en sus manos, probablemente no nece sita que le recuerce que la usabilidad es importante. Ya conoce por su propia experiencia como usuario de la Web que prestar acencin a Ia usabilidad implica menor frustracién y mds satisfaccidn para sus visitantes, adems de una mayor probabilidad de volver a verlos en otra ocasién. Creo que mi mujer puso el dedo en la Llaga mejor que cualquier estadistica que he visto: Si algo es complicado de utilizar, simplemente no lo uso demasiado Espero que el libro le ayude a crear un sitio mejor y, si puede evitar algunas discusiones sobteel diseito, de ver en cuando podré llegar a casa a tiempo pa CAPITULO iNo me hagas pensar! PRIMERA NORMA DE LA USABILIDAD DE KRUG Michael, zqué hacen abiertas las mercertas? Kay CORLEONE EN Et PabRINO IL Meo. preguntar con cierta frecuencia: “Qué es lo que hay que tener en cuenta si quiero que mi sitio web sea ficil de usar?” _La respuesta es sencilla; no se trata de “que nada importance esté a més de dos clics de distancia’, de “hablar el lenguaje del usuario” o, incluso, de “ser coherente” Se trata de.. “iNo me hagas pensar!” Di dad. Cuantas més piginas web veo, més convencido estoy de ello. ante muchos afios he venido diciendo que ésta es mi primera norma de la usabili- Se trata del principio fundamental, el vow de calidad primordial a ka hora de decidir si algo en cl diseiio web funciona o no. Si sélo tiene capacidad en sti mente para una tinica norma de usabilidad, quédese con ella Todo lo que con ello quiero decir es que, hasta lo que humanamente es posible, cuan- dlo se mire una pagina web ésta ha de ser obvia, evidente, clara y Fieil de entender. agotar esfucrzos pensando en ‘Tendria que poder “entenderla” (qué es y cémo usarla) si la, Pero, zde qué claridad w abviedad estamos hablando? Pues de la suficientes que nuestro yecino de al lado, por ejemplo, que no tiene interés alguno por el tema de nuestro sitio y que apenas sabe edo usar el botdn Atrés, pueda ver Ja pagina web inicial de nuestro sitio y diga, “Oh, si se trata de __”. (Y con un poco de suerte diré también, “Pero sies Fantistico.” Pero eso es otto tema.) * Bxiste, en realidad, un sas y después prescinda de la mitad de lo que haya quedado”, Pero de esto nos ocuparemos en un apitulo posterior: spitante inmediato: “Blimine la mitad de las palabras en todas las pgi- CAPITULO 1 Considérelo de esta forma: Cuando mito una pagina que no me hace pensar, todo lo que se me ocurre son cosas como: “Veamos, esto es Y x0 Y eso es precisamente lo que quiero” Veamos. Esto tiene aspecto de ser las categorias de productos... y éstas son fF as compres especiales de| dia. Memoria, médemns.. Aqui estan: los menitores. lic {NO ME HAGAS PENSAR! Peto si lo que veo es una pagina que me hace penser, todo lo que se me ocurre esté lle- no de interrogantes. PENSANDO Hmm! (uilésimas de segundo Supongo que éste es al boten, he iHmm! 25 éste el batdn? » Resultados Cg Ny “ . » Results Pucde estar pensando, “Bucno, no me ha costado mucho averiguar si se hk puede hacer o no clic sobre esto, Si se pasa el cursor por encima cambia de Rests forma: la flecha se convierte en una mano apuncando, ;Qué dificultad hay?”. Lo que ocurte cuando estamos usando la Web es que los interrogantes que nos surgen aumentan nuestro volumen de trabajo cognitivo y distraen nuestra atencidn de la tarea que tenemos entre manos. Las distracciones pueden ser leves, pero se acumulan y pueden, inclu- $0, llevarnos a abandonar. Por norma tenemos que a la gente, en general, no le gusta sentirse desconcertada cuan- q a Be gl do se pone a pensar en cémo hacer las cosas. El que las personas que crean los sitios no se preocupen demasiado por facilitar el trabajo (y hacerlo evidente) puede Hegat a minar nucs- tra confianza en el sitio y sus editores. CAPITULO 1 Orzo ejemplo: en la mayorfa de los sitios de las librerfas, antes de buscar un manual, tengo que pensar en cémo quiero hacer la busqueda’. LA MAYORIA DE LOS SITIOS DE LAS LIBRERIAS GN Veamos. "Busqueda rapida". Debe ~ \_ ser lo mismo que “Buscar”, 5 iverdad? eTengo que hacer clic en el ment desplegable? Todo lo que sé del libro es que su autor es Tom Clancy. 2Es Clancy le palabra clave? De cualquier forma, gqué es una palabra clave? ‘Supango que tengo que usar el mend. Hace clic en fa flecha. “Titulo. Autor. Palabra clave,” Deel Bien, quiero “Autor” oe Hace clic en “Autor Escribe “Tom Clangy" Hace cic en “Buscar Por descontado, la mayor parte de este “didlogo mental” riene lugar en una fraccién de segundo, aunque lo vea como un proceso bastante ruidoso, Incluso algo tan inocente, apa- rentemente, como un nombre conocido (desde “Buscar” a “Buisqueda répida”) es capaz de generar otro interrogante. 0 sigue siendo cierto cuando lo comprobé hace un aio, Sélo ahora, en 2005, la mayoria de ellos finalmente han mejorado, 16 iNO ME HAGAS PENSAR! Amazon.com, por otro lado, no hace mencién a la distincién entre Autor-Titulo-Pal. bra clave. ‘Tan sélo considera lo que usted escribe y hace lo que considera tiene mds sentido. AMAZON.COM Bien. "Buscar libros en Escribe “Tom Clancy” Hace clic en “Ir”. Después de todo, gpor qué he de pensar en cémo quiero hacer la biisqueda? ¥ atin peor, spor qué tengo que tener en cuenta la forma en que el mecanismo de brisqueda del sitio quiere que yo formule la pregunta como si se tratara de un troll de malas pulgas haciendo guardia en un puente? (“Olvids pregunta, ‘;Puedo?”). Pod ni pensar, Por ejemplo: + Donde estoy? a enumerar docenas de otras muchas «1 que los visitantes del sitio no deberfan :Por dénde empieza? * :Dénde han puesto * Qué es lo mas importante de esta pagina? + :Por qué lo han llamado de esa forma? Pero lo ultimo que usted necesita es otra lista de comprobacién que afiadir a sus ya muchas listas existentes de control de disefio web. Lo més importante que puede hacer es simplemente entender el principio basico de eliminacidn de los interrogantes. De conse- guitlo, empezard 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 paginas que cree. capituLo 1 Todo no se puede hacer obvio F] objetivo para cada pagina deberia ser que fuera evidente, que el usuario medio* sélo con mirar supieta de lo que se trata y la forma de usarse. No obstante, algunas veces, si hace algo en concreto que es realmente original o inno- vados, o incluso, algo bastante complicado, debe conformarse con la claridad. En una pigi- na facil de entender hay que pensar incluso un poquito para “entenderla” (pero sélo un poquito). La apariencia de las cosas, sus nombres bien escogidos, la disposicién de la pigi na y los eextos pequefios y cuidadosamente claborados tienen que funcionar bien en st con= junto para conseguir un reconocimiento casi instanténeo. Si no puede hacer una pagina fécil de entender, al menos tendré que hacerla autoexpli- catia éPor qué es todo esto tan importante? Por extrafio que parezca, no es por la razén que normalmente oye citar: En Interne, la competencia es s6lo cuesti6n de hacer clic aqui o alla, de manera que si frustra a los Usuarios no tardaran en ise a otra lac En ocasiones esto es cietto, pero se sorprenderia al conocer el tiempo que algunas per- sonas tardan en abandonar los sitios que les frustean. Muchas personas que se encuentran con problemas ea un sitio tienden a culpasse a si mismas y no al propio sitio. + El usuario medio real se encuentra en un sétano herméticamente sellado en la Oficina inter- nacional para la normalizacién en Ginebra. Yah lo medio” rremos sobre la mejor forma de pensar en el “usua- iNO ME HAGAS PENSAR! El hecho es que, en primer lugar, su sitio puede que no haya sido facil de encontrar y puede que los visitantes no conozcan otra alternativa. La posibilidad de empezar de nuevo no parece muy atractiva Y tambign esté el fendmeno “Ya he esperado diez minutos al autobiis, de modo que esperar un poquito mas tampoco me hace daiio”, Ademis, zquién va a decimos que la com- petencia va a ser menos fruscrante? Y entonces, por qué? Crear paginas ficiles de entender se asemeja a tener un comercio con un buen sistema deiluminacio todo tiene mejor aspecto. Urilizar un sitio que no nos haga pensar en cosas inrelevantes parece natural, fluido, pero el desconcierto de las cosas que no nos interesan nos terminarin minando energia y entusiasmo (al igual que nuestro tiempo). ‘Aungue la estudiaremos en el siguiente capitulo, cuando examinemos la forma en que realmente se usa la Web, la raz6n principal por la que es tan importante que no me hagan pensar es que la mayorfa de las personas va a dedicar mucho menos tiempo a las pdginas que disefiamos de lo que realmente nos gustaria pensar que pasan. Como resultado de todo esto concluimos diciendo que si queremos que las paginas web sean eficaces, han de mostrar su encanto tras un vistazo répido. La mejor forma de conse- guitlo es crear paginas Ficiles de entender 0, al menos, claras. CAPITULO PROC to Mt 1eutes eto ke la Web? NTs Paes eae ne Ce) [Por gud Tes es ext ene dina to donde scorer Pore cuando las encontrames dejamos de buscarlas, = turante los tilrimas diez afios he pasado mucho tiempo observafido a la gente usar la Web y lo que més me ha sorprendido ¢s la diferencia entre lo,que pensamos acerca de cémo se usan los sitios web y la forma en que realmente se utilizan. Cuando se erean si nas van a estudiarse minuciosamente, que nuestros textos elegantemente claborados van a leerse y entenderse de la forma en que se ha organizado todo, sopesando las opciones antes de decidir el vinculo en el que hacer clic 6 ntievos, creemos que cada una de las p Pero lo que en realidad se suele hacer (si tenemos suerte) és echar un vistazo a cada nue- va pagina, leer répidamente parte del texto y hacer clic en el primer vinculo que resulte inte- resante 0 se parezca, vagamente, a lo que se est buscando, Nermalmente hay partes exten- sas de la pagina que ni siquiera se miran. Pensamos en crear “liceratura de calidad” (0 al menos “el folleto de un producto”), cuan- do la realidad del usuario esed mucho mis prdxima a la “cartelera publicitaria que pasa a 100 ilémettos por hora”. LO QUE DISENAMOS Mira alrededor Lectura febrimente en busca de algo que: Lectura a) que es interesante Lectura 0.38 parece on vvagainente a0 cue ue esté [Pasa para la buscando, y teflon] en lo que puede Frckmente se bade haecicenel Tan pronto como vinculo encuentra algo que ‘adecesernente se ajusta bastante deaido, bien, hace clic Sino resuita, hace licen el batén Atrés yo intenta otra vez 21 CAPITULO 2 Como puede imaginarse, resulta un poco més complicado que todo esto y depende del tipo de pagina, de lo que el usuario intenta hacer, de la prisa que renga, ete. Pero esta visién. simplista esté mas cerca de la realidad de lo que la gran mayoria podemos imaginar En el disefio de las paginas se cuenta con un usuario mas racional y atento, Es normal que se asuma que todos usan la Web de la misma forma que nosotros lo hacemos y, al igual que todos, nos inclinamos a pensar que nuestro propio comportamiento es mucho més ordenado, metédico y sensato de lo que realmente No obstante, si quiere disefiar piginas web eficientes, tiene que aprender a convivir con tres Factores sobre eémo se utiliza realmente la Web. Factor de vida n.° 1: No leemos las paginas; las hojeamos Uno de los pocos hechos bien documentados sobre el uso de la Web es que las personas tienden a invertir poco tiempo en leer la mayoria de paginas web'. Por el contrario, las hojeamos répidamente (0 las leemos muy por encima) en busca de palabras o frases que cap- ten la atencién de nuestra vista. La excepcidn, sin duda, son las péginas que contienen documentos como noticias, reportajes o descripciones de productos. Pero incluso entonces, si el documento tiene més de unos pocos parrafos, es muy posible que se imprima, porque leerlo sobre papel es més ficil y eépido que hacerlo en pantalla. Por qué echamos sélo un vistaro? + Normalmente tenemos prisa. El uso més corriente de la Web viene motivado por el deseo de ahorrs tiempo y, por ello, los usuarios de la Web tienden a actuar como ver- dadetos tiburones: o se mueven constantemente o mueren, Simplemente, no dispo- nemos del tiempo suficiente mds que para leer lo estrictamente necesario, + Sabemos que no hay que leerlo todo. En la mayoria de las péginas s6lo nos intere- sa.una fraccién de lo ue hay en ellas, Tan slo buscamos las partes que se ajustan a nuestro interés y a la tarea que tenemos entre manos: el resto es, simplemente, irrele- vante, Hojear es la forma de encontrar esas partes relevantes ' Consulte la columna Alertbox de Jakob Nielsen de octubre de 1997, “How Users Read on the Web", disponible en vawwauseit.com, {COMO USAMOS REALMENTE LA WEB? + Somos buenos en ello. Hemos estado hojeando los per cdicos, las revistas y los libros durante toda nuestra vida para dar con esas partes que nos interesan, y sabemos que funciona. El efecto red se parece mucho a los clisicos dibujos animados Far Side de Gary Larson en cuanto a la diferencia entre lo que decimos a los perros y lo que ellos oyen. En los dibu- jos, el perro (de nombre Ginger) parece escuchar atentamente lo que su ama le dice seria- mente sobre no acercarse a la basura. Pero desde el punto de vista del perro, todo lo que ella dice es “bla bla GINGER bla bla bla bla GINGER bla bla bla” Lo que vemos al mirar una pagina web depende de lo que tenemos en nuestra mente, aunque sélo sea una fraccién de lo que hay en la pagina. LO QUE LOS DISENADORES LO QUE LOS USUARIOS CREAN VEN. LirSkcont Quiero comprar of un bilete. £Cémo compruebo las milas que me corresponden por mis frecuentes viajes? Al igual que Ginger, nos inclinamos a centrar nuestro interés en palabras y frases que parecen encajar mejor con (a) la tarea que tenemos entre manos, (b) nuestros intereses per- sonales del momento o en curso 0, por supuesto, (c) las palabras que nos causan una reac- clin repentina y que estén integradas en nuestro sistema nervioso, como “Gratis”, “Oferta”, “Sexo” 0 nuestro propio nombre. CAPITULO 2 Factor de vida n.° 2: No tomamos decisiones optimas. Nos es suficiente En el dis sidera las opciones disponibles y elige la mejor fo de las pag inas tendemos a contar con que el usuario hojea una pégina, con- No obstante, en realidad, la mayor parte de las veces no seleccionamos la mejor opcién; nos quedamos con la primera mas razonable, estrategia que se conoce como satisficing ‘Tan pronto como enconcramos un vineulo que parece llevarnos a lo que en realidad busca- mos, se nos presenta una buena oportunidad para hacer clic en él Ya habia observado este comportamiento durante unos afios, pero su significado no lo vi claro hasta que lef el libro de Gary Klein, Sources of Power: How People Make Deci- do. durante muchos afios el modo natural de tomar decisiones: por qué gustan las actuaciones sions (Origenes del poder: cémo las personas toman decisiones)’. Klein ha estudia de los bomberos, los pilotos, los maestros de ajedrez y el modo en que los operadores de grandes plantas de energia nuclear se la juegan tomando decisiones en situaciones reales pre~ sionados por el tiempo, objet biantes. vos imprecisos, informacién limitada y en condiciones cam- El equipo de observadores de Klein empezs el primer estudio (comandanres del cuerpo de bomberos en escenas con fuego) con el modelo normalmente aceptado sobre la toma racional de decisiones: ante un problema, la persona retine informaci bles soluciones y elige la mejor. El equipo de obs n, identifica kas posi- vadores empez6 con la hipétesis que debi- dlo al alto riesgo y la extrema presién del tiempo, los comandantes del cuerpo de bomberos sdlo podrian comparar dos opciones, suposicién que consideraron cra conseryadora. Cuan- dlo sucedi6, los comandantes del cuerpo no confrontaron ninguna opeién, tomaron el pri- mer plan razonable que les vino a la cabeza e hicieron una prucba mental répida de los pro- blem: . De no encontrar ninguno, serfa el plan de accién que Hlevarian a cabo. * El economista Herbert Simon acuné el término (un cruce entre satisfactorio y suficiente) en Models of Man: Social and Rational (Modelos de hombre: social y racional, Wiley, 1957). Prensa del MIT, 1998, {COMO USAMOS REALMENTE LA WEB? Entonces, zpor qué los usuarios no buscan la mejor opcién? * Normalmente tenemos prisa. Tal y como Klein sefala, “optimizar es dificil y lleva mucho tiempo; la esteategia sarsficing es mds efectiva”. * Las consecuencias por el error cometido no son importantes. A diferencia de los bomberos, las consecuencias por haber errado en un sitio web se resuelven con sélo hacer clic, o dos clics, en el borén Atrds, haciendo satisfactoria una estrategia ofecti- va (El botén Atras cs la caracterfstica mas utilizada de los navegadores web.) Asumiendo, claco estd, que las paginas se cargan répidamente. Cuando no es asf, tene- mos que tomar nuestras propias decisiones de forma més cuidadosa (una de las muchas razones por las que a la mayorfa de los usuarios de la Web no les gusta que Jas paginas se carguen despacio) * El sopesar distintas opciones no garantiza la mejora de nuestras oportunidades. En los sitios mal diseftados esforzarse mucho en tomar la mejor opcién no ayuda nada, Suele resultar mejor hacer caso a la primera suposicién y utilizar el botén Atras sino funciona. Adivinar es més divertido. Supone menos trabajo sopesar las opciones, y ¢s més répido si la suposicién es correcta. Ademés, introduce un elemento optativo: la grata posibilidad de dar con algo sorprendente y bueno. Con esto no se esté diciendo que los usuarios nunca sopesan las opciones antes de hacer clic, Depende de cosas como su esquema mental, de lo presionados que estén por el factor tiempo y de la confianza que tienen en el sitio. 25 CAPITULO 2 Factor de vida n.° 3: No averiguamos el funcionamiento de las cosas. Nos las arreglamos Una de las cosas més obvias a las que se llega cuando se prueba la usabilidad (tanto en Jos sitios web, como en el software o en los electrodomésticos) es el grado de desconoci- miento que tenemos al usarlos: no entendemos su funcionamiento o la idea que tenemos de ello es totalmente desatinada. Son muy pocas las personas que, ante cualquier aparato tecnolégico, se toman un tiem po para leer las instrucciones. Por el contrario, seguimos adelante, nos las arreglamos, nos inventamos nuestras propias historias, vagamente verosimiles de lo que hacemos y del por- qué de su fncionamiento. Me recuerda, con freenencia, la escena al final de El principe y el mendigo, donde el auténtico principe descubre que su doble mendi- go ha estado usando el Gran Sello de Inglaterra como cascanuces en ausencia del principe. (Tie- ine todo el sentido del mundo; para él, el mendi- i go, el sello sdlo ¢s un gran troz0 pesado de metal.) Pero el hecho es que hacemos las cosas asi He observado a muchisima gente usar software y sitios web de forma eficiente pero muy alejada de Jas verdaderas intenciones de los disenadores. 26 ECOMO USAMOS REALMENTE LA WEB? jemplo favorito es el de las personas (y he visto, al menos, una docena de ellas per- sonalmente durante las pruebas con usuarios) que escriben el URL completo del sitio en el cuadro de biisqueda de Yahoo siempre que quieren ir alli (no sélo para encontrar el sitio pot primera vez, sino siempre que quieren ir allf, incluso varias veces al dia). Si se les pregunta resulta evidente que algunos picnsan que Yahoo cs Internet y que ésa es Ia forma de usarse‘, YAHOO! © os Le mayorla de los diseftadores web se sorprenderian enormemente si supieran la cantidad de personas que escriben los URL en el cuadro de bilsqueda de Yahoo. = eck a etree = Y lo curioso es que el arreglarselas no sélo es cosa de principiantes. Incluso los usuarios técnicamente espabilados tienen, con frecuencia, lagunas asombrosas en su comprensién del fancionamiento de las cosas. (No me extrafiarfa que el propio Bill Gates, en algyin momen- to de su vida, manipulara algunos aparatos tecnoldgicos con la técnica de “arreglandoselas”.) 4 De la misma forma, me he encontrado con usuarios de AOL que ereen claramente que AOL «= Internet (buenisizas noticias para Yahoo y AOL). 27 CAPITULO 2 Por qué ocurre esto? *+ No nos importa, Para la gran mayorfa carece de importancia el llegar a entender el funcionamiento de las cosas en tanto podamos usarlas. ¥ no se debe a la falta de ince- ligencia, sino a la escasez de cuidado y atencién. En la mayor parte de los disefios de las cosas simplemente no nos interesa’. * Si damos con algo que funciona, seguimos con ello. Una vez encontramos algo que va bien (sin importar si es acertado 0 no) solemos dejar de buscar una solucién mejor, Usaremos una mejor si nos encontramos por casualidad con otra, pero muy raramente buscamos otra. Siempre es interesante ver cémo disefiadores y desarrolladores web observan su prime- ra prueba de usabilidad. La primera vez que ven a un usuario hacer clic en algo completa~ mente inadecuado se sorprenden: por ejemplo, cuando para el usuario pasa desapercibido un botéa, bastante grande y gordo ctiquetado como “Software” en la barra del navegador, ¥ dice algo ast como “Bien, busco software, de mado que haré clic en ‘Cosas bararas’ por- que lo barato siempre est bien”. El usuario puede incluso encontrar, al final, lo que busca, peto para los observadores puede o no resular satisfactorio. La segunda ver que pasa, gritan: “jHaga sélo clic en “Software”. La tercera podrd ver- los pensar: “Pero, zpor qué nos molestamos haciendo esto? Y Ja pregunta es acertad: Jo “Ilegan a entender”? La respuesta es que si importa, y mucho, porque aunque ir arre- glindoselas funciona unas veces, termina siendo ineficaz y proclive al error. si la gente se las arregla de esa forma importa realmente si » A los desartolladores web les cuesia a menudo entender (0 incluso llegar a ereer) que la gente piease cealmence de esta manera, ya que a s{ mismos les interesa conocer en profundidad el funcio- namiento de las cosas. 28 2COMO USAMOS REALMENTE LA WEB? Por otra parte, si los usuarios “lo entienden”: * La probabilidad de encontrar lo que buscan es mayor, lo cual es positivo para ellos y para usted. + También es mayor la posibilidad de que entiendan el conjunto de lo que oftece sit sitio, no sélo las partes con las que se topan, + Puede, igualmente, aprovechar mejor el que vayan a las partes de su sit jor el q que vean. que dese * Sevan a encontrar mas seguros y convencidos cuando usen su sitio y querrin volver. Podrai perm un siti “en el que se las arreglan’ sélo hasta que alguien elabore otro que les convenza mis y les haga sentir muy bien. Si la vida le da limones... Ahora debe estar pensando (dado el panorama rosa palido de la audiencia de la Web y de cémo la utilizan): “Por qué simplemente no empiezo a trabajar en el local 7-11? Al menos mis esfuerzos pedrian ser reconocidos”. Entonces, zqué tiene que ver una chica? Creo que la respuesta es sencilla: si su audiencia responde como si usted estuviera dise- fiando vallas publicitarias, entonces discfie grandes vallas publicitarias. CAPITULO Diseno de rotulos 101 oye) aay -Xel PW Sr Wale) 2a em oli Sitno sabelde quién sonlestas seftales no puede haberfllegado demasiado lejos/Afeitado-Burma —SECUENCIA DE VALLAS PUBLICITARIAS PROMOCIONANDO DE AFEITAR, Ci UMA 14 1935, iG Scie {que sus usuarios pasan zumbando, hay cinco claves para asegurarse que ven (y jontienden) la mayor parte del sitio: * Creacién de una jerarquia visual clara en cada pagina + Aprovechamiento y uso de las convenciones. Divisién de las paginas en zonas claramente definidas. Dejar bien claro sobre lo que se puede hacer clic. + Minimizar el ruido. Creacién de una jerarquia visual clara Uno de los mejores métodos para que nuestra pagina retenga la atencidn del usuatio es asegurindonos que el aspecto de las cosas en dicha pagina (todas las claves visuales) repre- senten claramente y de forma adecuada la relacién entre todas ellas: qué cosas estén relacio- ‘as deben tener nadas entre sf y cules son parte de otras. En otras palabras, todas las pé tuna jerarquta visual clara Las pdginas con una jerarquia visual clara tienen tres caracteristicas: + Lo mas importante ha de ser lo més Muy importante prominente. Por ejemplo, los encabe zamientos mds importantes serin més grandes, aparecerin en negrita, en un Un poco menos importante color distintive, rodeados por mas espacio o en la parte superior de la pigina (0 combinando varios de estos aspectos). al CAPITULO 3 = Lo que esté relacionado légicamente, también lo estd visualmente. Por ejemplo, se pueden agrupar las cosas similares bajo un mismo titulo, visualizindo- las con un estilo vigual simi- lar o poniéndolas en una zona claramente definida * Todo se englaby visual- mente bien para que que- IE den delimitadas las partes que pertenecen a cada bloque. Por cjemplo, cl ticular de una seceién (“Libros de computacién’) apareceria por encima del titulo de un libro’tn parti- cular, englobandg, visual- mente toda la zona de contenido de la pégina, porque el libro es parte de la seccién. El titulo, a su vez, abarcaria los elementos que describen el libro. ‘No hay nada nuevo sobre las jerarqufas visuales, Todas las paginas de los periédicos, por ejemplo, utilizan distintos tamaiios de letra, y agrupan y anidan las secciones para darnos una informacién dil y prictica de todos los contenidos de la pagina antes, incluso, de empe- zara leer cualquier palabra. En la siguiente ilustracién la foro se corresponde con su articu- lo porque los dos estén bajo el mismo titular y el articulo es el mds importante porque tie- ne el titular mas grande, la columna mds ancha y una posicién destacada dentro de la pagina. El titular que abarca estas tres columnas muestra, obviamente, que dichas columnas son parte del mismo articulo, | tamano del titular revela en tan s6lo una ojeada que se trata del articulo mas importante 32 DISENO DE ROTULOS 101 Todos los das analizamos jerarquias visuales (tanto en linea como sobre el papel), pero lo hacemos tan répido que apenas nos damos cuenta que lo estamos haciendo hasta que no lo ipido que ap. podemos hacer més y las claves visuales, o la ausencia de ellas, nos obligan a consideratlo. Una buena jerarquia visual nos ahorra tales esfierzos a la hora de preprocesar la pagina, de oxganizar y establecer prioridades en los contenides, lo que nos permite caprar todo de forma casi instantinea. Cuando una pagina carece de una jerarquia visual clara (por ejemplo, todo parece set igual de importante), el proceso de lectura répida, de comprensién de palabras y frases, ast como la propia idea que nos formamos cada uno de lo que es importante y de la forma en que todo esta organizado, es mucho més lento y el trabajo, mayor. ‘Ademés, es deseable una orientacién editorial en los sitios web, al igual que la existente en orr0s medios de comunicacién. El editor conoce mejor que nadie las partes més impor- tuntes, de mayor valor o mas populares del contenido del sitios zpor qué no se nos identifi- can también y nos evitan problemas? Analizar la pagina con una jerarquia visual resulta, incluso, un poco engafioso (por ejemplo, si un ticular abarca cosas que ao son parte de él), es como leer una frase construida de forma descuidada (“Bill puso al gato sobre la mesa por un minuto porque estaba un poco tembloroso”). ‘Aunque normalmente podamos encen- der lo que la fiase quiere decir, de forma Esta jerarquia visual enganosa suciere PP nen tl hk i . ‘que todas las secciones del sitio OS ae apatite Dots forman parte de la seccién “Libros cuando no deberia ser asf sobre computadoras" 33, CAPITULO 3 Las convenciones nos favorecen En algiin momento en nuestra juventud, y sin que nos ensefiaran, aprendimos a leer un periédico. Si no sus palabras, si las convenciones, “Aptendimos, por ejemplo, que una frase con letras grandes es normalmente wn citular ceuya joria se resume debajo de él; que el texto que hay debajo de una foto es un pie de foto que aclara el contenido de la misma o (si el tamafo de letra es muy pequefio) los eré- ditos de la foto que revelan quién tomé dicha instanténea, Aprendimos a reconocer las distintas convenciones de la disposicién de las paginas y de su formato, hecho que nos facilité y nos ahorr6 tiempo al hojear un periddico y dar con los articulos que nos interesan. Y cuando empezamos a viajar a otras ciudades, aprendimos tam- bign que todos los periédicos usaban las mismas convenciones (con pequefias variantes). Ja lectura de cual- Asi, resumiendo, podemos afirmar que conocer las convenciones faci quier periddico. ‘Todos los medios editorials desarrollan sus propias convenciones, las perfeccionan y crean otras nuevas con el transcurso del tiempo’. La Web tiene muchas de ellas, la mayorfa procedentes de las convenciones de prensa (periédicos y revistas) aunque se siguen desario- llando otras nuevas. Todas las convenciones nacen de la idea brillante de alguien. Si funciona Jo suficiente- mente bien, otros sitios lz imitan y termina viéndose en tafitas otras partes, que no necesi- tan ningtin tipo de explicacién. 1 proceso de adopcién lleva su tiempo, pero va bastante deprisa en Internet, al igual que en el resto. Por ejemplo, ya es de sobra conocida la con- vencién del uso metafirico del carrito de la compra en los sitios de comercio electrénico y los propios diseftadores ya usan el icono del carrito sin etiquetarlo como ”Carrito de la com- pra’. jense, por ejemplo, en los pequetios logotipos semitransparentes que empezaron a aparecer én Ia esquina de la pantalla de su televisor hace unos afios para que reconociera de un vistazo el canal que estaba viendo, Hoy en dfa estén en todas partes, aunque la televisi6n ya exist unos cineuenta aiios antes que estos logotipos aparecieran. 34 DISENO DE ROTULOS 101 Dos cosas son importantes sobre las convenciones de la Web: + Son muy titiles. Como norma general, las co venciones sélo Hlegan a ser convenciones si funcio- nan, Las realmente efecti- vas ayudan al usuario a desplazarse de un sitio a oro sin grandes esfuerzos para descubrir el funcio- Las convenciones permiten descubrir al usuario gran cantidad de informacion sobre una pagina web, incluso sino se entiende ni una palabra de ella namiento de las cosas, Se crea una sensacién tran- quilizadora de familiari- dad, por ejemplo, al ver una lista de vinculos a las secciones del sitio. sobre un fondo coloreado en el lateral izquierdo de la pagina, aunque a veces tengamos una sensacién tediosa de “dee ou” * Los disefiadores son reacios, con frecuencia, al abuso de ellas. Ante la posibilidad. del uso de las convenciones, los discfiadores, por el contrario, se ven tentados a rein- ventar la rueda, principalmente porque sienten (y no es del todo incorrecto) que st contrato les obliga a crear algo nuevo y diferente y no algo ya esté visto. (No olvide- ‘mos que los elogios de los compaticros, los premios y las ofertas de trabajo més lla- mativas raramente se basan en criterios como “al mejor uso de las convenciones”.) CAPITULO 3 En ocasiones, el tiempo emplea- do en reinventar la rueda da RUEDA como resultado la aparicién de un nuevo mecanismo rodante y revolucionario. Otras, sélo. se acumula tiempo empleado en reinventar la rucda. Sino va a usar una convencién de la Web ya existente, tendré . Potente pendente 48,022 AC. 42,629 AC., 36210 que sustituirla por algo (a) tan | gc. area ac. os09 ac, 20,710 Ac dlaro y ficil de entender que no | 78001, AG, 19,711 AC, 18224 AG, AG, BC 74 AC 15,690 AC,, 15,689 AC, 15,675 AC,, 15, hay curva de aprendizaje entonces resulta tan bueno como Ja convencién), 0 (b) que el valor que afiade fuera can alto que merece la pena esa pequefia curv: esti re de aprendizaje. Si va a innovar, tiene que entender el valor de lo que nplazando, nuchos disentadores tienden a subestimarlo cuando el valor que proporcionan las convenciones ¢s realmente importante. Ta recomendacién que hago es la siguiente: innove slo cuando sepa que Ia idea es mejor (y todos los que la v an exclamen sorprendidos *;Guau!"), pero aproveche las con- venciones cuando no haya ideas mejor Division de las paginas en zonas claramente definidas : Lo ideal serfa que el usuario pudiera reproducir una versién del antiguo programa con- curso de Dick Clark $25.000 Pyramid en cualquier pégina web bien disefiada®, En un pei- mer vistazo tendria que poder sefialar las zonas diferentes de la pagina y de ir, “;Cosas que *, “iproductos que avegacién para llegar al puedo hacer en este sitio!”, “jvinculos con las mejores historias de hoy’ vende esta compafifal”, “cosas que estin locos por venderme!”, resto del sitio! Es importante dividir la pagina en zonas claramente definidas porque permice al usua- rio decidir répidamente en qué partes quiere centrarse y cudles puede, con tranquilidad, Dada la caregori por ejemplo, “Cosas que usa un fontanero”, los concursantes tendrfan que conseguir que sus compaiteros averiguaran esa categoria daindoles ejemplos (“una llave inglesa, , un cor- ta tuberias, 36 DISENO DE ROTULOS 101 ignorar, Muchos estudios sobre el rastreo inicial de una pagina web sugieren que el usuario decide muy répidamente las partes de la pagina que probablemente tengan la informacién prictica que buséa y, casi nunca, mira el resto (como si no estuvieran ahi) Dejar bien claro sobre lo que se puede hacer clic Dado que la mayor parte de lo que la gente hace en la Web es buscar lo siguiente sobre Jo que hacer clic, es muy importante dejar bien claro sobre lo que se puede hacer clic o no. Por cjemplo, en le pégina principal? de la web del Senador Orrin Hatch durante su falli- da carrera presidencial en el 2000 no estaba nada claro si se podia hacer clic sobre todo 0 sobre nada. Habia 18 vinculos en la pagina, pero sélo dos invitaban a que se hiciera clic en cllos por el aspecto que tenian: un botén gran- de con la etiqueta “Click here co CONTRI- ITED” (haga clic aqui para contribuir) y un yinculo de texto subrayado, “FULL STORY” (articulo completo). El resto de los vinculos eran textos colore- ados y el problema era que todo el texto de la pigina estaba también en colores, de manera que de un vistazo resultaba imposible distin- guit los vinculos que habia www.orrinhatch.com Pero no es un defecto catastréfico stoy ‘ seguro de que a los usuarios no les llevé mucho tiempo empezar a hacer clic en las cosas. Si se obliga al usuario a pensar en algo que deberfa ser mecinico (como, por ejemplo, sobre qué hacer clic), se esté desaprovechando la reserva limitada de paciencia y de buena volun- tad con que el usuario aparece ante un sitio nuevo. Orrin Hatch se merece, al menos, una nota a pie de pagina en la historia de la usabilidad, ya que fue thasta lo que conozco) cl primer candidato a la presidencia en convertr la usabilidad web en un tema de campafa. En el primer debate de candidatos republicanos televisado durante la campafia del 2000, dijo a George W. Bush: “Debo decirl, sefior gobernados, que a diferencia de su sitio wet 6: més ficil encontrar todo en el mio. [Risita};El suyo resulta bastante dificil de usar! No es agrada- ble para el usuario.” (Su sitio resultaba mas facil de usar.) 37 CAPITULO 3 Otro de mis ejemplos favoritos es el cusa- dro de biisqueda de drkoop.com (sitio de mad salud de C, Everett Koop) Siempre que lo utilizo tengo que pensar, porque el botén que ¢jecuta la buisqueda no tiene el aspecto de un borén (aunque tenga dos claves visuales esrupendas: dispone de kt palabra “SEARCH” [buscar], que es una de las dos etiquetas perfectas para el borén del cua- dro de biisqueda’, y es lo que esta més proximo a dicho cuadro de buisqueda). Incluso tiene un pequefio grafico con una flecha triangular que resulta ser uno de los indicadores convencionales de la Web (“haga clic aqui”). Pero la flecha apunta firera del tex- to, como si estuviera aludiendo a otra cosa distinta, en tanto que !a convencién pide que sefiale el texto sobre cl que se puede hacer clic. Colocar la flecha a la izquierda seria sufi- lente para hacer desaparecer el interrogante SEARCH drkoop-com de mi cabeza Baje el sonido hasta que casi desaparezca ‘Uno de los grandes enemigos de las paginas ficiles de atrapar es el ruido visual. Existen, en realidad, dos tipos de ruidos: + Negocio-abigarrado. Algunas paginas web me producen la misma sensacién que tengo cuando leo la carta de Publisher’ Clearing House y trato de averiguar qué pegs tina ha que adjuntar al formulario para entrar sin suscribirme, por accidente, a cul- quier revista. Cuando toda la pagina clama por mi atencién, el efecto puede ser abrumador. Pode- mos encontrar: jInfinidad de invitaciones para que compremos! ;Multitud de puntos con exclamaciones y colores llamativos! ;Grierio continuo! * Ruido de fondo. En algunas piiginas se esti como en una fiesta; ninguna fuente de ruido esté lo suficientemente alta para que lo distraiga, pero existen infinidad de diminutos fragmentos de ruido visual que nos term an agotando. “Go” (ica) o5 la otra, pero sélo si se usa la palabra “Search” como etiquera para el euiadto. 38 DISENO DE ROTULOS 101 Por ejemplo, los mentis de MSNBC constituyen un mecanismo de navegacién potente y fail que permite al usuario obtener répidamente cualquier articulo del sitio. Las Iineas, no obstante, entre los distintos términos ana in mucho ruido. Atenuar las lineas facilitaria y acelerarfa la lectura de los ments. owimsnbc.com Fl usuario dispone de tolerancias cambiantes para la complejidad y las distraccioness algunas personas no tienen problemas con las paginas abigarradas ni el ruido de fondo, pero otras si. Cuando se disefian piiginas web es bueno asumir que todo es ruido visual hasta que se demuestre lo contratio. 39 CAPITULO éAnimal, vegetal — oO mineral? @POR QUE LE GUSTAN AL USUARIO LAS OPCIONES MECANICAS? No importa el mimero de veces que hay que hacer clic en algo si Ia opciones mecdnica e inequivoca. SEGUNDA NORMA DF KRUG SOBRE USABILIPAD 0s diseadores web, asi como los profesionales de la usabilidad, han estado debatiendo ;durante mucho tiempo, y a lo largo de los afios, sobre la cantidad de veces que se espera que el usuario hage clic para obtener lo que quiere sin frustrarse demasiado. Algunos sitios tienen incluso unas normas de disefio que establecen que nunca se ha de sobrepasar un ni- mexo determinado de clics (normalmente tres, cuatro o cinco) para acceder a cualquier pé- gina del sitio. Aparentemente, el “ntimero de clics para acceder a cualquier parte” parece un ctiterio bastante prictico, aunque, con ¢l paso del tiempo, he llegado a pensar que lo que realmente importa no es el niimero de clics que tengo que hacer para alcanzar lo que quiero (si bien cxisten limites), sino la dificultad en la eleccién de ese clic (el esfuerzo necesario de pensa- miento y la incertidumbre sobre si la eleccién tomada es la correcta). En general, creo que se puede decir sin temor a equivocaciones que al usuario no le im- porta el niimero de clics que tenga que hacer en tanto que sea sencillo y oftezca una con- fianza continuada sobre el aciervo en la pista que se persigue (siguiendo lo que Jared Spool denomina “la fragancia de la informacién”). Creo que la regla de oro puede ser algo como que “tres clics mecénicos e inequivocos equivalen a un clic que requiere cierto grado de re- flexidn. La primera pregunta clésica en el juego de palabras “Animal, vegeral o mineral?” ¢s un magnifico ejemplo de la eleccién mecdnica. En tanto se acepte la premisa que todo lo que no es planta o animal (incluyendo cosas tan diversas como pianos, poemas y enciclopedias, ' En realidad, se trata solamente de una parte de un debate mas extenso sobre los méritos relati- ves de la jerarquia de un sitio amplio frente a la jerarquia de un sitio profundo. Un sitio amplio se di- "vide en més eategorias dentro de cada nivel, pero tiene menos niveles. Asf, son necesarios menos clics ~ fasta alcanzar el botén. Un sitio profundo tiene més niveles y requiere mas clics, aunque las opciones: a considerar en cada nivel son menores 2 Byidencemente, hay excepeiones. $i tengo que profundizar a cravés de las mismas pates del si- tio de forma repetida, por ejemplo, o repetir una secuencia de clics en una aplicacién web, 0 si van a tadar mucho las péginas en cargarse, entonces el valor de unos pocos clics aumenta. i 41 CAPITULO 4 por ejemplo) entra en In categoria de “mineral”, no es necesario ningtin tipo de meditacién para responder correctamente a la pregunta’. Desgtaciadamente, la mayorfa de las opciones en la Web no estan tan claras. ina de actualiza- cidn de Symantec porque quiero actualizar mi Por ejemplo, si voy a la p: NAV for Windows 9568 Enaich, US a copia de Norton AntiVirus, me voy a encontrar con dos opciones antes de poder seguir. Una de las opciones, la seleccidn del idioma, es relativamente sencilla. Sélo requiere un ninimo ejercicio de reflexidn que concluye con que English, US significa “inglés de Esta- dos Unidos” en contraposicién a English, UK. Si me molestara en hacer clic en el meni desplegable veria que, 3845 3 on realidad, sdlo me las estoy arteglando, porque no hay English, UK pes lerian cence en ha lista. spe Cerio) ‘También me quedaria un poco desconcertado por la opcién Es- Leese, pafiol (English, Inr) pero no me quitaria el suefio. heck freer La orra opcién, Product, es, no obstante, un poco mis incierta. El problema estd en que se refiere a “NAV for Windows 95/98”. Ahora estoy seguro de que todos los que trabajan cn Symantec ven perfectamente claro que NAV y “Norton An- tiVirus” son lo mismo, aunque requiere, al menos, un pequefio salto de confianza por mi parte. Y aunque estoy seguro de estar usando Windows 98, hay, al menos, una m{nima som- bra de duda en mi cabeza sobre si es exactamente lo mismo que “Windows 95/98”. Puede que haya alguna versién denominada “Windows 95/98" que desconozco. ha olvidado cl juego, hay una versién estupenda contra la que puede jugar en la We hetpsl/ieww.20¢.nen Creado por Robin Burgener, utiliza un algoritmo de red neuronal y reproduce tun juego fantistico. Sin embargo, lo han hecho més irreflexivo al afiadir “Otro” y “Desconocide” como respuestas aceptables a la primera pregunta. ZANIMAL, VEGETAL 0 MINERAL? Otro ejemplo: cuando intento comprar un producto o un servicio pata utilizar en la off- cina de mi casa, me encuentro, con frecuencia, sitios que me piden que elija entre. Casa Oficina ue opcidn es la mia? La cuestién es que en la Web nos encontramos con opciones a Qué op. q todas horas; tomar decisiones mecinicas es una de las cosas mds importantes que logran que un sitio sea facil de utilizar. 4B CAPITULO Op siteI(eyt} de Va ee ST al ilsmmeeies Tare to} EL ARTE DE NO ESCRIBIR EN LA WEB Elimine la mitad de las palabras en todas las paginas y lwego deshigase de la mitad de lo que quede. TERCERA NORMA DE KRUG SOBRE LA USABILIDAD, las cinco o seis cosas que aprendi en la universidad, la que mejor recuerdo (y mas me ba beneficiado) es la norma ntimero diecisiete de E. B. White en su The Elements of Seyle (Elementos del estilo): 17. Omitanse las palabras innecesarias. La ese sarias y un parrafo debe omitir las frases superfluas por el mismo motivo ura vigorosa es concisa. Una frase no debe tener palabras innece- que el dibujo debe prescindir de las Iineas innecesarias y cualquier apara- to de las partes inttiles' Me sorprende que la mayoria de las paginas web que veo contienen una cantidad bas- tante considerable de palabras que simplemente ocupan espacio y que no se van a leer. Sélo por el hecho de estar ahi, todas estas palabras sugieren que, en realidad, hay que leerlas para entender lo que pasa, lo cual hace que las paginas parezcan mis desalentadoras de Io que realmente son Mi Tercera norma puede parecer excesiva, porque tiene intencién de serlo. Eliminar la mitad de las palabras ¢s, en realidad, un objetivo reali de prescindir de la mitad de las palabras en la mayorfa de las paginas web sin que se pierda a; creo no tener problemas a la hora nada de su valor. La idea de omitir después la mitad de lo que nos queda es sélo una forma dealentar a ser despiadado con ello, Supsimir las palabras que no van a leerse tiene diversos efectos beneficiosos: * Reduce el nivel de ruido de la pagina. + Realza el contenido verdaderamente prictico. + Seacortan las paginas permitiendo ver al usuario més de cada una con sdlo un vista zo y sin avanzar 0 retroceder. Con ello no estoy sugitiendo que los articulos de Salon.com sean mis cortos de lo que én realidad son. Solo hablo de dos tipos especificos de escritura: discurso innecesatio e ins- snucciones. William Strunk, Jr, y E.B. White, The Elements of Style, (Allyn y Bacon, 1979). CAPITULO 5 EI discurso innecesario tiene que desaparecer ‘Todos reconocemos el discurso innecesario cuando lo vemos: cl texto preliminar (0 introduccién) ¢s el que nos da la bienvenida al sitio y nos dice lo fantéstico que es 0 nos cexplica lo que vamos a ver en la seccién en la que acabamos de entrar. Sino estd seguro de saber si se trata de un discurso innecesario, puede probarlo con algo infalible: si escucha muy atentamente mientras esta leyendo podré oir una yocecita en el fondo de su cabeza que dice “Bla-bla-bla-bla-bla...”. Gran parte del discurso innecesario es del tipo de escritura publicitaria de felicitacién a suele encontrar en los folletos mal escritos. A diferencia de los buenos uno mismo que se folletos publicicarios, el discurso innecesario carece de informacién prictica y esta enfocado al elogio de lo buenos que somos en lugar de definir qué nos hace tan buenos, Aunque el discurso innecesario se encuentra algunas veces en las paginas principales (normalmente en pérrafos que empiczan con “Bienvenido a ...”), su habitat favorito son las paginas de primera plana de las secciones del sitio ("primeras planas de las secciones”). Dado que estas paginas contienen normalmente la tabla de contenidos y no un contenido real pro- pio, existe la tentacién de llenarlas con discursos innecesarios. Lamentablemente, el efecto que produce ¢s como si un editor de libros se viera obligado a afiadir un pérrafo a la tabla de la pagina de contenidos diciendo, “Este libro contiene un gran niimero de capitulos inte- resantes sobre Esperamos que los disfrure.” EI discurso innecesario es como una pequena charla (de contenido libre y, fundamen- talmente, expansivo y afible), pero que el usuario, normalmente, carece del tiempo pata leetlo: prefiere que (se deber ditectamente al grano, Hab ) eliminar tanto discurso innecesario como fuera posible OMISION DE PALABRAS [NNESESmRIas Hay que eliminar instrucciones La otra fuente principal de palabras innecesarias son las instrucciones. Lo primero que hay que saber sobre ellas es que nadie las va a leer (al menos hasta que repetidos intentos an fracasado). E incluso enronces, si las instruc- selas” ha por la metodologfa de “arreglé ciones son muy farragosas, lo mas probable es que el usuario no encuentre la informacién que necesita, El objetivo sera, entonces, poder eliminar completamente toda instruccién y ponerlo todo claro, hacerlo de facil comprensién 0, al menos, lo més aproximado posible. Si las ins- trucciones son absolutamente necesarias, redtizcalas a lo estrictamente esencial. itio de Verizon, Por ejemplo, si hago clic en Site Survey (encuesta sobre el sitio) en el me aparece una pantalla entera lena de instrucciones que leer. The following questionnaire is designed to provide us with information that wil help us improve the sits and make it more ralevant to your needs. please select your answers from the ‘trop-dawn menus and radio buttons below. The questionnaire should only take you 2-3 minutes ta complete. is At the battom of this form you can choose to leave your name, _ [stdrass, and telophone numbor Ifyou leave your name and umber, you may be contacted inthe future fo participate in a survey to help us improve this site. : if you have comments or concems that require 3 respc |please contact Customer Service 1. How many times have you visited this site? | [rtisismytrstsisi 3] www.verizon.com Creo que un recorte agresivo es mucho mis prictico: capituLo 5 is 103 PALABRAS BI siguiente cuestionario se ha di ado para proporcionarnos la infor macidn necesaria que nos ayudard a mejorar el sitio y hacerlo mds adecua- do a sus necesidades, Por favor, seleccione sus respuestas en Jos mentis desplegables y en los boww- nes de radio inferiores. F] cuestionario ha de completarse en tan sélo 2-3 minutos En la parce inferior de este formulario. puede dejar, si lo desea, si: nombre, sti diteccién y niimero de teléfono. De hacerlo, contactaremos con usted en un futuro para que participe en una encuesta que nos ayudle a mejo- rar este sitio dene eomentarios o preguntas que hacer y que ceqjuieran una respuesta, por favor, contacte con el Servicio al diente, DESPUES: 43 PALABRAS Aytidenos, por favor a mejorar este sitio contestando a las siguientes pr La primera frase es solo un discurso inneceserio introductorio. Sabemos io que es un estudic (una encuesta); [o Unico que necesito son las palabras “nos ayudara” para que me muestren que entien= den que les estay haciendo un favor cumplimen- téndolo La mayoria de los usuarios no necesitan que se les diga como rellenar un formulario web y los que necesitan saberlo desconocen lo que es un “menu desplegable” y “un botdn de radio” En este punto atin trato de decidirme si me moles: to con e! cuestionario, pero saber que es corto me dice que fa informacion es dtl Esta instruccién carece de utilidad para mi en este punto. Seria, al final del cuestionario, cuando podiria hacer algo con él. El Unica efecto que pro- duce es que las instrucciones parezcan mas des- alentadoras El hecho de no utilizar este formulario en caso de necesitar una respuesta es Una informacion impor- te y practica. Desgraciadamente, sin embarao, no se molestan en indicarme como contacter con el departamento de Servicio al cliente (6 aun mejor, en faciitarme un vinculo con el que poder hacerlo desde aqui mismo). ta janis, Solo tardara 2-3 minuitas en complerar este cucstionario, ADVERTENCIA: Si tiene alguna pregunta 0 comentario que requiera respuesta no use exte formulation, Contacte entone por favor, con nuestro OMISION DE PALABRAS (KINPEEHeRIES Y ahora algo completamente diferente En estos primeros capitulos, he tratado de transmitir algunos principios a modo de con- sejo que considero debe recordar a la hora de crear un sitio web. Los dos capitulos siguientes estudian la forma en que se aplican estos principios a los dos desafios mayores y mas importantes del disefio web: la navegacién y la pagina principal. Preparase algo de comer porque son dos capitulos largos. 49 CAPITULO oad ite) Cer en la calle — pratt DISENO DE LA NAVEGACION Y-se puede uno encontrar en una preciosa casa acompatiado de una bellésima mujer y preguntarse, “bien..., ;cbmo he llegado a todo esto?” [2 si el ak MARCHAMOS FELICES ¢FUE SUFICIENTE? sf MARCHAMOS DESCONTENTO 56 SENALES EN LA CALLE Y MIGAS La insoportable ligereza de echar un vistazo Buscar cos imili- en un sitio web y buscarlas en el mundo “real” comparten muchas tudes. Al explorar en la Web, de alguna forma sentimos estar moviéndonos por un espacio fisico y, si no, piense en los términos utilizados para describir la experiencia: “hojeas” y “surfea i vegar”, por ejemplo, Del mismo modo, hacer clic en un vinculo no “carga” 0 liza” otra pagina; “conduce” a la pagina, Pero la experiencia en la Web carece de muchos de los momentos con los que contamos 6a nuestras vidas para sortear las dificultades. Considere las siguientes particularidades del espacio web: * Falta de sensacién de escalas. Incluso después de haber usado exhaustivamente un sitio web, y a menos que sea un sitio muy pequefio, carecemos del menor sentido del 0002 ;17.0002)". Por lo que sabe- mos, podria haber gran cantidad de rincones que jamais se explorarin. Comparelo también con una revista, un museo © un gran almacén donde siempre sc tiene, al menos, un sentido aproximado de la proporcién vista y no vista. tamafio que puede llegar a alcanzar (;50 paginas? El resultado practico al que llegamos nos habla de la gran dificultad que existe sobre si se ha visto todo lo que nos interesa de un sitio, asi como cudndo se ha de parar de buscar*, * Ausencia de sensacién de direccién. En un s arriba 0 abajo. Podemos hablar de mov’ quierda 0 derecha, jentos hacia arriba y hacia abajo, pero se io web no hay reficren a la jerarquia (a un nivel mas general o més especifico) * Ausencia de la sensacién de ubicacién. En los espacios fisicos, 2 medida que nos desplazamos, vamos conociéndolos. Desatrollamos un sentido del lugar donde escén las cosas y podemos, incluso, atajar para conseguitlas * Bate es uno de los motivos por los que resulta prictico que los vinculos cambien de color cuan- do hayamos hecho clic en ellos. Nos da una pequefta sensacién de terreno ya cubicrto. “ Este es uno de los motives por los que resulta prictico que los vinculos cambien de color cuan- dd hayamos hecho clic en ellos. Nos da una pequefia sensacién de terreno ya cubierto caPiTULO 6 ra ver podemos llegar a las motosiettas siguiendo las indicaciones, pero la La pri siguiente vez es muy probable que pensemos <;Motosierras? Ah, sf, recuerdo dénde estaban: justo detrés de la esquina, cerca de los ftigorificos”. ¥ nos dirigimos hacia allt, PRIMERA VEZ SIGUIENTES VISITAS Pero en la Web los pies nunca tocan el suelo; por ol contario, uno se desplaza mediante I c en los distintos vinculos, Haga clic en “Herramientas con. clies que motor” y aparece, repentinamente, teletransportado al pasillo de las herramientas con ‘motor sin tener que atravesar ningiin tipo de espacio ni mirar las cosas que encuen- tra en su camino. Cuando queremos volver sobre algo en la Web, en lugar de contar con el sentido fisi- co del lugar donde estdbamos, sélo tenemos que recordar su lugar en In je quia con- ceptual y volver sobre nuestros pasos. sta es una de las razones por la que los marcadores de los libros (atajos personales almacenados) son tan importantes, y por la que el bordn Atris representa entre el 30 y €1 40 por ciento de todas las veces que se hace clic en la Web*. ‘También explica el motivo de la importancia del concepto de las paginas principales, las cuales son, relativamente, lugares fijos, Cuando est en un sitio, Ia pagina princi- pal es como la estrella polar. El poder hacer clic en ella (Ia paigina principal) abre toda una gama de posibilidades para poder empezar Esta ausencia de espacios fisicos tiene sus pros y sus contras. Entre las venrajas est la tan ficil sensacidn de ingravidez que puede ser excitante y que explica, en parte, por qué L, Catledge y J. Pitkow, “Characterizing Browsing Scraregies in the World-Wide-Web.” En las sesiones de la Tercera Conferencia internacional sobre la Web, en Darmstadt, Alemania (1995) 58 SENALES EN LA CALLE Y MIGAS perder la nocién del tiempo en a Web (igual que ocurre cuando nos “perdemos” en un buen libro)é Entre las desventajas est4, creo, la explicacién al porqué usamos el término “navega sxcb” si nunca se habla de “navegacién por el centro comercial” o “navegacién por ka biblio- ceca’, Si consultamos navegacién en un diccionario encontramos dos cosas: ir de un sitio a otro y averiguar dénde estamos. Creo que hablamos de navegacidn web porque “averiguar dénde estamos” es un pro- blema bastante més predominance en la Web que en los espacios fisicos. En la Web estamos intrinsecamente perdidos, no podemos asomarnos por los pasillos para ver dénde estamos. La navegacién web compensa la ausencia del sentido del lugar incorporando la jerarquia del sitio, creando una sensacién del tipo “alli”. Pero la navegacidn no sélo es una caracteristica de los sitios web es el propio sitio web, al igual que el edificio, las estanterias y las cajas registradoras son Sears. Sin navegacién no hay an “allt” mis alld. iCuiles es la conclusin? La navegacién web tiene que ser buena. Propésitos de navegacion pasados por alto Dos son, espe cialmente, los propésitos evidences de la navegacién: nos ayuda a encon- amos buscando y nos dice tambi¢n el lugar donde nos encontramos. Podemas incluso hablar de un tercero: + Nos ofrece un lugar donde no nos perdamos. Sentirse perdido no ¢s habitualmen- te algo demasiado agradable. (;Se siente mejor “perdido” o “conociendo el camino”) Si se ha hecho bien, la navegacién pone el terreno bajo nuestros pies (aunque sea un terreno virtual) y nos proporciona las barandillas donde poder sujetarnos (haciéndo- nos sentir bien asidos). Pero la navegacidn tiene, también, otras funciones muy importantes (y que se suclen pasar por alto): + Nos dice lo que hay en cada lugar. Con una jerarquia visible, la navegacién nos pre- senta lo que contiene el sitio. La navegacién nos revela el contenido; descubrir el sitio puede ser més importante, incluso, que el guiarnos © situarnos. © También puede ser una razén as por la que la carga lenta de piginas resulea tan molesta: qué tiene de divertido volar si slo se puede ir a unos pocos kilometros por hora? 59 CAPITULO 6 * Nos ensefia a usar el sitio. Si la navegacién hace bien su trabajo, mostrar, implici- tamente, el lugar por donde empezar y las opciones que hay. Si est correctamente realizada, debe oftecer todas las instrucciones que usted necesita (lo que es ideal, dado que la mayorfa de los usuarios ignoran las otras instrucciones).. * Nos permite confiar en las personas que la han creado. En todo momento duran- te el tiempo que estamos en un sitio web tenemos en mente lo siguiente: “:Sabe esta gente lo que esta haciendo?”. Es uno de los factores principales que usamos a la hora de decidir si merece la pena y si vamos a volver. Una navegacién clara y bien des- arrollada es una de las mejores oportunidades con las que cuenta un sitio para dar una buena impresién Convenciones de la navegacion web Expacios fisicos como las ciudades y los edificios (¢, incluso, espacios de informacién como los libros y las revistas) disponen de sus propios sistemas de navegacién, de sus con- venciones que han ido evolucionando con el paso del tiempo (sefiales en las calles, mimetos de pagina, ieulos de capitulos). Las convenciones especifican, de una forma aproximada, la apariencia y la ubicacién de los elementos de navegacién, de manera que nos permiten saber en todo momento lo que buscamos y dénde encontrarlo cuando lo necesitamos. Colocarlos en un lugar estindar nos facilita el situarlos de forma més rpida con un m{nimo esfuerzo; si se estandariza su apariencia, serin mis ficiles de distinguir del resto. Por ejemplo, esperamos encontrar en las esquinas las seitales de las calles, esperamos ia arriba (nunca hacia abajo) y; esperamos, también, que rengan el aspecto de unas seftales de calle (que sean horizontales, no verticales).. hacerlo mirando También damos por sentado que el nombre de cualquier edificio esté encima o junto a aaciones cerca del final la puerta principal. En una tienda de comestibles esperamos ver indi de cada pasillo, Ea las revistas sabemos que hay una tabla de contenidos en alguna parte en Jas primera nea el mismo a s paginas, y que éstas tienen un niimero en su margen (y que estos ntimeros tie- pecto que en la tabla de contenidos) 60 SENALES EN LA CALLE Y MIGAS Pensemos en lo frustrante que resulta cuando una de las convenciones no se cumple (por ejemplo, cuando en las revistas no aparece el ntimero de pagina en las paginas de publi- cidad). Las convenciones de navegacién para la Web han aparecido de forma muy rpida, en su mayoria adaptadas de las convenciones ya existentes. Aunque sigan desarrolkindose, aqui se exponen algunos elementos bésicos: Identificacion delsitio _—_-Secciones Ultilidades Indicador “Usted se encuentra aqui Nombre de la Mansi: pagina | More fits More options sim ft leans Navegacion local (cosas en el nivel actual flaceatiaars baggy ftieane anv ft lean chore ampenter ean shod Resultados "Broken Badges" (999 ITV-Series] Pero cuando cambié el Ambito a “Quotes” (citas), allf se encontraba. Busqueda ————> Resultados. {Se hace una idea de cual fue el efecto de esta busqueda sobre mi confianza en IMDB.com? 69 CAPITULO 6 Secundario, terciario y todo lo que siga a terciario Ocurre con tanta frecuencia que me he acostumbrado a esperarlo: cuando los disefia- dores con quienes no he trabajado antes me mandan sus disefios de paginas preliminares para que compruehe los problemas de usabilidad, casi inevirablemente preparo un orga cles de profundidad grama que muestra un sitio con cuatro casa NIVEL 1 i wt i NIVEL 4- oe we y paginas de ejemplo para la pigina principal y los dos niveles superiores. PXYZ le adora! Pagina principal Pagina a nivel de seccién Pagina de subseccian Contintio buscando més como un loco, 6 al menos buscando el lugar en que se ha des- orientado con “Algo magico pasa aqui”, pero no encuentro ni eso. Creo que éste es uno de los problemas mis frecuentes en el diseno web (especialmente en los sitios més grandes): no se le presta la misma atencién a la navegacién de nivel inferior que a la del nivel superior. Por eso, en muchos sitios, en cuanto se supera el segundo nivel, la navegacién se deteriora y se vuelve ad hoe. El problema es tan comatin que resulta realmente dificil encontrar buenos ejemplos de navegacién con tres niveles. Por qué ocurte esto? 70 SENALES EN LA CALLE Y MIGAS En parte, creo, porque una buena navegacién multinivel es bastante dificil de disefier (dado el limitado espacio de la pagina y el mimero de elementos que hay que encajat). En parte porque los disenadores normalmente no disponen del tiempo suficiente para desentraar los dos primeros niveles. En parte porque simplemente no parece tan importante. (Después de todo, jes real- ‘mente importante? No ¢s fundamental, ni siquiera es secundario.) Hay una tendencia a pen- sar que si el usuario ha Hegado tan lejos en el siti 4 capaz de entender su funciona- miento. Después esté el problema de conseguir contenidos de muestra y ejemplos de la jerarquia para las pagi gui, porque ni los responsables de los contenidos, normalmente, han Hegado tan lejos en determinadas cosas as de niveles i nferiores. Incluso si los disenadores lo piden, no lo van a conse- Pero la realidad muestra que el usuario termina pasando ranto tiempo en las paginas de niveles inferiores como en las de niveles superiores y wa resuelto el a menos que se he de la navegacién de arriba hacia abajo y desde el principio, es muy dificil insertasla luego y que termine siendo algo coherente. (Cuil es la mo Es fundamental contar con paginas de ejemplo que muestren la navegacién en todos los niveles potenciales del sitio antes de empezar a discutir sobre ef esquema de colores de la pagina principal. Nombres de las paginas o gpor qué me . ¢ A gusta tanto conducir en Los Angeles? Si ha pasado algiin tiempo en Los Angeles sabra que no se trata sdlo de la letra de una cancién que dice que Los Angeles es, en verdad, una autopista inmensa. Puesto que son los propios ciudadanos de Los Angeles los que se roman can en serio el tema de Ja conduccién, disponen de la mejor sefalizacién que jams haya visto. En Los Angeles: * Las sefiales de las calles son grandes. Al parar en un cruce se puede leer la sefal de la siguiente calle que cruza. * Las seftales estén en el lugar correcto (suspendidas sobre la calle por la que vamos, con lo cual, todo lo que hay que hacer es mirar un poco hacia atriba) CAPITULO 6 Ahora, debo admitir que tengo una especial debilidad por este tipo de trato porque pro- cedo de Boston y alli eres todo un afortunado si puedes leer las seftales de la calle a tiempo para efectuar el giro. Covington Road Los Angeles Boston 2Cudl es el resultado? Cuando conduzco en Los Angeles dedico menos energfa y aten- Gién a saber dénde estoy y més al tréfico, a la conversacién y a escuchar Al Things Conside- red, Me encanta conducir en L.A. Los nombres de las paginas son las sefiales de las calles en la Web. Al igual que las sefia- les de las calles, cuando las cosas van bien no presto ningiin tipo de atencién a los nombres, pero tan pronto como siento que no voy en la direccidn adecuada necesito encontrar el nombre de la pagina, sin esfuerzo, para poder orientarme de nuevo. Debe conocer cuatro cosas acerca de los nombres de las péginas: * Todas las paginas necesitan un nombre. Al igual que cada esquina ha de tener su propia sefial en la calle, todas las paginas deben tener un nombre. Estoy en la esquina entre Subastas y Venta de articulos Algunas veces, los disefiadores piensan: “Bien, hemos destacado el nombre de la péigi- nna en Ta navegacién’, Serd suficiente.”. Lo cual puede resultar tentador porque aho- tra espacio y es una cosa menos sobre la que hay que trabajar en el disefio de la pagi- nna, pero no es suficiente. El nombre de la pagina también es necesario. * El nombre ha de estar en ef lugar adecuado. En la jerarqufa visual de la pagina, el nombre de ésta deber‘a aparecer enmarcando el contenido que es tinico para esa pagi- na. (Después de todo, es a lo que se esté dando un nombre, no a la navegacién o a los anuncios, que son sélo parte de la infraestructura.) > Véase “Usted estd aqui”, posteriormente en este capftulo. + El nombre ha de ser prominente. Hay que buscar la combi SENALES EN LA CALLE Y MIGAS contenido ico de cién de posicién, tamafio, color y caracteres para que el nombre diga: “Este es el encabezamiento para toda la pagina’, En la mayorfa de los casos serd el texto mas grande de la pagina. El nombre debe corresponderse con aquello sobre lo que he hecho clic. Aunque nadie lo menciona, codes los sitios hacen un contrato social implicito con sus itantes: EI nombre de la pdgina se corresponderd con las palabras en las que he hecho clic para Uegar hasta all. En otras palabras, si hago clic en un vinculo o borén que dice “Puré de patatas calien- te”, el sitio me Hevard a una pagina de nombre “Puré de patatas caliente” Puede que parezca trivial, pero en realidad se trara de un acuerdo crucial. Cada vez que lo viola un tio, me veo obligado a pensar, aunque sean unas milésimas de segun- do: “:Por qué son esas dos cosas diferentes?”. Si hay una mayor discrepancia entre el nombre del vinculo y el nombre de la pagina o muchas discrepancias menores, mi confianza en el sitio (y la competencia de las personas que lo han publicado) se verd disminuida. EN LO QUE HAGO CLIC ALO QUE LLEGO * ie Los nombres coinciden. Los nombres no coinciden, ape ean lisnee es a meena eg eae ia necesario pensar. confianza CAPITULO 6 Claro que algunas veces tendré que tomar una solucién de compromiso, normalmen labras en las que hago clic y el nombre de te, por las limitaciones del espacio. Si las p la pagina no se corresponden exactamente, lo mas importante es que (a) se parezcan lo més posible, y (b) la raz6n de la diferencia sea obvia. Por ejemplo, en Gap.com, si hago clic en los borones Gifts for Him (regalos para él) y Gifts for Her (regalos para ella), me encuentro con nombres de piginas “gifts for men” (regalos para hom- bres) y “gifts for women’ (regalos para mujeres). Las palabras no son idénticas, pero se parecen tanto que ni me siento tentado a pensar en la diferencia “Usted esta aqui” Una de las formas que tiene la naveg ‘Web de “perdido en el espacio” es mostrindome dénde estoy en un esquema, igual que el indicador “Usted est4 aqui” lo hace sobre el plano de un centro comercial (0 en un Parque ién de contrarrestar la sensacién inherente a la Nacional). eos ques SENALES EN LA CALLE Y MIGAS En la Web esto se resuclve realzando mi sieuacién actual en cualquier barra de navega- cién, lista o ment que aparezca en la pagi CI Wonenrs} a (YX Por lo que veo, parece que Hy (No Soyer sec ie a, Whats New meme (7 Women's Sale Khakis pa pantalones de Gap Materity. > Parts Storts 3 mujer/pantalones corto: En este ejemplo, la seccién actual, Women’s, y la subseccién Pants/Shorts estin “mar- cadas”. Hay una serie de formas para resaltar la ubicacién actual: Poniendo un puntero junto a lo.que se desea Cambiando el Usando texto Invirtiendo Cambiando el seleccionar color del texto en negrita el color color del botén Sports Sports Sports Business Business Business Business >Entertainment © Entortainment Entertainment [Entertainment Politics, Politics Polties Potitics _] El defecto més comtin de los indicadores “Usted est4 aqui” es que son demasiado suti- les, Tienen que resaltarse o, de lo contrario, pierden su valor de clave visual y terminan afia- diendo més ruido a la pégina. Una forma de asegurar que sobresalgan es aplicando mds de tuna distinci6n visuals por ejemplo, un color diferente y texto en negrita. Las claves visuales demasiado sutiles son realmente un problema muy comtin. Los dise- fiadores adoran las claves sutiles, porque la sutileza es uno de los rasgos del disefio sofistica- do, Pero los usuarios web por lo general tienen tanta prisa que no reparan en elas. En general, si usted es diseftador y piensa que una clave visual destaca suficiente, pro- bablemente significa que debe hacerla el doble de grande, CAPITULO 6 Breadcrumbs (migas) Al igual que los indicadores “Usted esté aqui”, las migas de pan nos indican dénde esta- mos, (Algun: ncluyen un texto como, por ejemplo, “Usted esté aqui”.) @ You are here: Home> Hobbies > Book Collecting > Welcome veces, incluso, weww about.com 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, A diferencia de los indicadores “Usted esti aqui”, que le indican su situacién en el con- texto de la jerarquia del sitio, las migas de pan sélo muestran el camino desde la pagina prin- cipal al lugar donde se encuentra’, (Una miga muestra dénde se encuentra en el esquema slobal de las cosas, y la otra dice cémo llegar alli; es un poco como la diferencia entre mirar tun mapa de carreteras y mirar un conjunto de direcciones sucesivamente. Las direcciones pueden ser muy précticas, pero se aprende mis del mapa.) Podtfa decirse que los marcadores de libros se parecen mucho a las migas de pan de los cutentos, ya que se van dejando cacr a medida que avanzamos, previendo la posibilidad de volver sobre nuestros pasos en algiin momento. © podria sugeritse que los vinculos visita- dos (vinculos que han cambiado de color para reflejar que se ha hecho clic en ellos) se pare- cen mds a las migas de pan porque sefialan el camino que hemos tomado y, si no se vuelven a visitar pronto, nuestro explorador (como los péjaros) los hard desaparecer”. En la historia original, la madrastra de H8¢G convence al padre para que los pierda en el bos- que durante los malos tiempos y Ia familia entera no morird de hambre. El suspicar ¢ ingenioso H echa a perder el plan porque va dejando caer piedrecitas en el camino que les devuelve a casa, La siguiente ver () ¢s obligado a usar miguitas de pan en lugar de las piedrecitas para que los pajaros las coman antes que H8eG puedan volver a retomar sus pasos de vuelta. La historia, finalmente, deriva en un intento de canibalismo, en un gran robo, en una inmolacién, pero bisicamente trata de lo des- agradable que resulta perderse. " Realmente, la verdad es un poco més complicada que esto. Si esta interesado, Keith Instone ofrece un tratamiento excelente del tema de las migas en la direccién hesp://usci-experience.org * Les vinculos ya visitados terminan expirando y volviendo a su color original si no vuelve a visitarlos. El periodo de caducidad predeterminado varia entre 7 y 30 dias, dependiendo del explora- dor que utilice. Ojald se me hubiera ocurride a mi mismo la conexién imaginaria entre vinculos visi- 76 SENALES EN LA CALLE Y MIGAS Hasta hace muy poco, las migas de pan era algo muy raro que sélo se encontraba en los sitios con enormes bases de datos y con jerarqufas muy profundas, como el directorio web de Yahoo... vi 5 > Phologranhy > Nature and Wildlife > Photograohers > www.yahoo.com, _ 0 como injertos en la parte superior de los grandes conglomerados de tipo multisitio como CNET. Soeurbiee es www.cnet.com, Wiens ‘www. gamecenter.com. a ces wwww.download.com donde oftecen a los usuarios cierta percepcidn de su situacién dentro del gran esquema de las cosas, al tiempo que permiten que los subsitios conserven sus esquemas de navegacién independientes, y, con frecuencia, incompatibles. Pero actualmente aparecen cada vez en mis sitios, algunas veces en lugar de una nave- gacién bien desarrollada. Para la mayor‘a de los sitios, no creo que sélo las migas de pan constituyan un buen esquema de navegacién. No son un buen sustituto para mostrar, al menos, las dos capas superiores de la jerarquia, porque no revelan lo suficiente. Dan una idea, una vision, pero se tata mds bien de una visién parcial limitada. No le estoy diciendo que no utilice sélo migas, sino que no son una forma buena de presentar la mayoria de los sitios. No me malinterprete. $i estén bien realizadas, las migas de pan son claras y ficiles de entender, no ocupan demasiado espacio y proporcionan una forma muy acertada, conve- niente y coherente de hacer dos de las cosas que con mas frecuencia se necesitan: retroce- der un nivel o ira la pagina principal. Creo que son de mucho valor como parte de una dieta equilibrada, como un accesorio a un esquema sélido de navegacién; en particular, para los sitios grandes con una jerarquia profunda o cuando hay que telacionar an con- junto de subsitios. tados y péjaros que se comen las miguitas de pan, pero fue Mark Bernstein quien primero lo escribié ‘en 1988, Yo lo encontré por casualidad en el libro de Peter Glour Elements of Hypermedia Design ppecthypes hum. que se puede leer de forma gratuita en worw.icen org/clen CAPITULO 6 About.com cuenta con la mejor puesta en prictica de migas de pan que conozco ¢ ilus- tra algunas de las “mejores précti + Pongalas en la parte supe- rior. Las migas pare nar mejor si estén en la parte funcio- superior de In pagina, encima de todo. Creo que se debe a que literalmente se marginan (haciendo que tengan un aspecto de accesorio, como los nimeros de las paginas en los www. about.com libros o revistas). Si las migas se desplazan hacia Ia parte inferior de la pagina, acaban compitiendo con la navega- cién principal. ;Cual es el resultad real? ;Cual deberia estar usando?”) Que me hace pensar. (*:Cusl es ln navegaci * Utilice el signo > entre los distintos niveles. Por cl método de prucha y ertor se ha demostrado que el mejor separador entre los distintos niveles es cl cardcter “mayor que’ (2). Home > Hobbies > Book Collecting » Welcome vaww.about.com @ You are here Los dos puntos (2) yla barra inclinada son factibles, pero > ¢s més satisfactorio y evi- dente (probablemente porque, visualmente, sugiere un movimiento hacia delante y por los distintos niveles). * Utilice un tipo de letra pequefio. Una ver més, para seftalar que sélo se trata de un accesorio, * Utilice las palabras “Usted esta aqui”. La mayoria de los usuarios entiende lo que no afecta a su claridad. son las migas, pero aunque esté en letras pequefia + Ponga en negrita el ultimo término. El tltimo nombre de la lista deberfa ser el de 1h pagina actual y resaltdndolo en negrita le otorgaré el relieve que se merece. SENALES EN LA CALLE Y MIGAS * No las utilice en lugar del nombre de la pagina. Con frecuencia se ha intentado que el tilkimo término de la lista de migas tenga una doble funcién y evitar asf tener un nombre de pagina separado, Algunos sitios han intentado hacer el tltimo térmi- no de la lisea el mas grande. ete aed) ‘wow gamecentercom Parece que puede funcionar, pero no es asi, probablemente porque se opone a nues- tras expectativas de que los encabezamientos vayan a Ia izquierda o en el centro, no na al final de una lista Igados” en medio de la pig Cuatro razones por las que me encantan las fichas Todavia no he podido probarlo, pero sos pecho, convencido, que Leonardo da Vinci inventd los separadores con etiquetas a finales del siglo xv. Al igual que los dispositivos de la interfaz, las solapas de ficha son, claramente, producto de un genio". Las fichas son uno de los pocos casos en los que se recurte a una metifora fisica en la interfaz del usuario y funciona". Al igual que Jos separadores con eriqueta en las carpetas de tres anillas o las etiquetas en las carperas de un (ot Dees . econ cajén archivados, separan todo lo que pertene- ce a esa seccién y facilitan que se abra una sec- cin con sélo tomar la etiqueta (0, en el caso dela Web, haciendo clic en ella) Muchos sitios han empezado a utilizar las fichas para la navegacién. > Nota para uno mismo: compruche si Microsoft empezs a usat los cuadros de didlogo tabula- dos antes que Bill Gates comprara el cuaderno de notas de Leonardo da Vinci. * La idea de arrastrar cosas al icano de una papelera de reciclaje para eliminarlas (concebido en Xerox PARC y divulgado por Apple) s Ia otra cosa que me viene a la mente. Desgraciadamente, Apple no se pudo resistira la idea de enturbiar las aguas metafiricas usando la misma accién de arras- twat a la papelera de reciclaje para expulsar los disqu es (resultando, a la larga, en millones de globos idénticos con pensamientos del tipo “Espere, :no se borraré”), CAPITULO 6 caer EY 800.com Amazon.com Beyond.com bn.com Borders.com Buy.com CDNOW www drugstore.com Toys.com Fatbrain.com Fidelity.com LandsEnd.com Pets.com Quicken.com schwab.com Snap.com ToysRUs.com drugstorecom. mitsloan.mit.edu Creo que son una opcién maravillosa para navegar por los sitios grandes. Aqui estén las razones: + Son muy claras y ficiles 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, “Hmmm! ;Para qué sirven estas cosas?” + Son dificiles 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 Tes barras de botones situadas en la parte superior de la pagina web ®. Pero dado que las fichas son visualmente tan distintivas, resulta bastante dificil que se pasen por alto. Dado también que es muy dificil que se las confunda por algo que no sea navegacién, crean el tipo de separacién tan obvia a primera vista deseada entre la navegacién y el contenido. + Estdn muy logradas. Los disefiadores web siempre estén luchando porque las pégi- ras sean mds interesantes visualmente. Si se hacen correctamente (véase a continua- i6n) las fichas pueden afadir un estilo pulido y cumplir un objetivo til, * No deberia sorprenderme. Me las arreglé con My Yahoo docenas de veces antes de caer en la cuenta de que la fila de vinculos de la parte superior de la pagina eran mas secciones de My Yahoo. Siempre habia supuesto que My Yahoo era simplemente una pigina y que los vinculos eran otras pat- tes de Yahoo. 80 SENALES EN LA CALLE Y MIGAS + Sugieren un espacio fisico. Las fichas crean la ilusién de que la etiqueta activa se des- plaza fisicamente para colocarse en primer plano. Es un truco ficil pero efecrivo, probablemente, porque se basa en una clave visual que detectamos facilmente (“unas cosas delante de otras”). De alguna forma, el resultado cs una sensacién mis fuerte de lo habitual por la que vernos que el sitio estd dividido en secciones y nos encontramos en una de ellas. Si le agrada tanto Amazon, gpor qué no se casa con ella? Al igual que ocurre con otras buenas practicas web, Amazon fue uno de los primeros sitios en usar los separadores en forma de fichas para la navegacién y el primero que Io con- siguié correctamente. Con el paso del tiempo han continuado refinando y perfeccionando su implementacién hasta alcanzar casi la perfeccién, si bien contingan incorporando fichas a medida que se expanden hacia diferentes mercados. anacencog Te = oui Je 1998 EEE a prem Octubre de 1999 81 CAPITULO 6 A la larga se han visto forzados a llevar la metafora de la ficha hasta el punto de ruptu- ra, pero incluso su efimera versién de dos filas estaba notablemente bien disenada. Todo el que esté pensando en usar fichas deberfa estudiar cuidadosamente el disefio de las fichas clésicas de Amazon, ¢ imirar fielmente los tres atributos claves: + Tienen que estar perfectamente dibujadas. Para que las fichas funcionen a la perfec- Gi8n, los gréficos tienen que producir la ilusién visual de que la etiqueta de la ficha activa esta por delante de las demas. Esta es la caracteristica principal que las convierte en fichas (incluso mds que la forma distintiva que tienen de solapa) Para crear esta ilusién, la solapa activa tiene que tener un color diferente 0 una som- bra que contraste y debe conectar fisicamente con el espacio debajo de ella. Esto es por lo que la solapa activa “pasa” a la parte delantera. (fizzy (a) MAL: Sin conexion, no pasa a primer plano. (a EEG) metion: conectada, pero sin contraste. El 90 a prrimer plano es limitado. Bit (ED tt meo: sien ta tenemos en primer plano. % Sea lo que sea lo que haga, no utilice grificos con forma de solapas si no funcionan como fichas. La Internet Movie Database (propiedad de Amazon, y de alguna forma, uno de las mejores sitios de la Web) comete este error Los botones de la parte superior de todas las paginas tienen el aspecto de solapas, pero actian como borones normales. SENALES EN LA CALLE Y MIGAS + Estdn codificadas mediante colores. Amazon utiliza un color de solapa diferente para cada seccién del sitio, y uti za ese mismo color en los demés elementos de navega-

You might also like