Diseño de rótulos 101 DISEÑO DE PÁGINAS PARA HOJEAR, NO PARA LEER
No Me Hagas Pensar - Steve Krug - Segunda Edicion.Sabiendo que sus usuarios pasan zumbando, hay cinco claves para segurarse que ven (y entienden) la mayor parte del sitio: Creación de una jerarquía visual clara en cada página. Aprovechamiento y uso de las convenciones. División de las páginas en zonas claramente definidas. Dejar bien claro sobre lo que se puede hacer clic.
Minimizar el ruido.
Creación de una jerarquía visual clara Uno de los mejores métodos para que nuestra página retenga la atención del usuario es asegurándonos que el aspecto de las cosas en dicha página (todas las claves visuales) representen claramente y de forma adecuada la relación entre todas ellas: qué cosas están relacionadas entre sí y cuáles son parte de otras. En otras palabras, todas las páginas deben tener una jerarquía visual clara. Las páginas con una jerarquía visual clara tienen tres características: Lo más importante ha de ser lo más prominente. Por ejemplo, los encabe-zamientos más importantes serán más grandes, aparecerán en negrita, en un color distintivo, rodeados por más espacio o en la parte superior de la página (o combinando varios de estos aspectos).
Lo que está relacionado lógicamente, también lo está visualmente. Por ejemplo, se pueden agrupar las cosas similares bajo un mismo título, visualizándo-las con un estilo visual similar o poniéndolas en una zona claramente definida.
Todo se engloba visualmente bien para que queden delimitadas las partes que pertenecen a cada bloque. Por ejemplo, el titular de una sección ("Libros de computación") aparecería por encima del título de un libro en particular, englobando visualmente toda la zona de contenido de la página, porque el libro es parte de la sección. El título, a su vez, abarcaría los elementos que describen el libro. . No hay nada nuevo sobre las jerarquías visuales. Todas las páginas de los periódicos, por ejemplo, utilizan distintos tama?os de letra, y agrupan y anidan las secciones para darnos una información útil y práctica de todos los contenidos de la página antes, incluso, de empezar a leer cualquier palabra. En la siguiente ilustración la foto se corresponde con su artículo porque los dos están bajo el mismo titular y el artículo es el más importante porque tiene el titular más grande, la columna más ancha y una posición destacada dentro de la página. El titular que abarcaestas tres columnasmuestra, obviamente,que dichas columnasson parte delmismo artículo. El tama?o del titular revela en tan sólo una ojeada que se trata del artículo más importante.
Todos los días analizamos jerarquías visuales (tanto en línea como sobre el papel), pero lo hacemos tan rápido que apenas nos damos cuenta que lo estamos haciendo hasta que no lo podemos hacer más; y las claves visuales, o la ausencia de ellas, nos obligan a considerarlo. Una buena jerarquía visual nos ahorra tales esfuerzos a la hora de preprocesar la página, de organizar y establecer prioridades en los contenidos, lo que nos permite captar todo de forma casi instantánea. Cuando una página carece de una jerarquía visual clara (por ejemplo, todo parece ser igual de importante), el proceso de lectura rápida, de comprensión de palabras y frases, así como la propia idea que nos formamos cada uno de lo que es importante y de la forma en que todo está 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 otros medios de comunicación. El editor conoce mejor que nadie las partes más importantes, de mayor valor o más populares del contenido del sitio; ?por qué no se nos identifican también y nos evitan problemas? Analizar la página con una jerarquía visual resulta, incluso, un poco enga?oso (por ejemplo, si un titular abarca cosas que no son parte de él), es como leer una frase construida de forma descuidada ("Bill puso el gato sobre la mesa por un minuto porque estaba un poco tembloroso"). Aunque normalmente podamos entender lo que la frase quiere decir, de forma momentánea nos hace recapacitar, pensar, cuando no debería ser así. Esta jerarquía visual enga?osa sugiere que todas las secciones del sitio forman parte de la sección "libros sobre computadoras".
Las convenciones nos favorecen
En algún momento en nuestra juventud, y sin que nos ense?aran, aprendimos a leer un periódico. Si no sus palabras, sí las convenciones. Aprendimos, por ejemplo, que una frase con letras grandes es normalmente un titular tuya historia se resume debajo de él; que el texto que hay debajo de una foto es un pie de cito que aclara el contenido de la misma o (si el tama?o de letra es muy peque?o) los créditos de la foco que revelan quién tomó dicha instantánea. Aprendimos a reconocer las distintas convenciones de la disposición de las páginas y de su formato, hecho que nos facilitó y nos ahorró tiempo al hojear un periódico y dar con los artículos que nos interesan. Y cuando empezamos a viajar a otras ciudades, aprendimos también que todos los periódicos usaban las mismas convenciones (con peque?as variantes). Así, resumiendo, podemos afirmar que conocer las convenciones facilita la lectura de cualquier periódico. Todos los medios editoriales desarrollan sus propias convenciones, las perfeccionan y crean otras nuevas con el transcurso del tiempo (1). La Web tiene muchas de ellas, la mayoría procedentes de las convenciones de prensa (periódicos y revistas) aunque se siguen desarrollando otras nuevas. Todas las convenciones nacen de la idea brillante de alguien. Si funciona lo suficientemente bien, otros sitios la imitan y termina viéndose en tantas otras partes, que no necesitan ningún tipo de explicación. El 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 convención del uso metafórico del carrito de la compra en los sitios de comercio electrónico y los propios dise?adores ya usan el icono del carrito sin etiquetarlo como "Carrito de la compra"
(1) Piense por ejemplo, en los pequeños logotipos semitransparentes que empezaran a aparecer en la esquina de la pantalla de su televisor hace unos a?os para que reconociera de un vistazo el canal que traba viendo. Hoy en día están en todas partes, aunque la televisión ya existía unos cincuenta a?os antes que estos logotipos aparecieran.
Dos cosas son importantes sobre las convenciones de la Web:
Son muy útiles. Como norma general, las con-venciones sólo llegan a ser convenciones si funcionan. Las realmente efectivas ayudan al usuario a desplazarse de un sitio a otro sin grandes esfuerzos para descubrir el funcionamiento de las cosas.
Se crea una sensación tran-quilizadora de familiaridad, por ejemplo, al ver una lista de vínculos a las secciones del sitio sobre un fondo coloreado Las convenciones permiten descubrir al usuario gran cantidad de información sobre una página web, incluso si no se entiende ni una palabra de ella.
en el lateral izquierdo de la página, aunque a veces tengamos una sensación tediosa de "déj? vu".
Los dise?adores son reacios, con frecuencia, al abuso de ellas. Ante la posibilidad del uso de las convenciones, los dise?adores, por el contrario, se ven tentados a reinventar la rueda, principalmente porque sienten (y no es del todo incorrecto) que su contrato les obliga a crear algo nuevo y diferente y no algo ya está visto. (No olvidemos que los elogios de los compa?eros, los premios y las ofertas de trabajo más llamativas raramente se basan en criterios como "al mejor uso de las convenciones".)
En ocasiones, el tiempo empleado en reinventar la rueda da como resultado la aparición de un nuevo mecanismo rodante y revolucionario. Otras, sólo se acumula tiempo empleado en teinventar la rueda. Si no va a usar una convención de la Web ya existente, tendrá que sustituirla por algo (a) tan claro y fácil de entender que no hay curva de aprendizaje (y entonces resulta tan bueno como la convención), o (b) que el valor que a?ade fuera tan alto que merece la pena esa peque?a curva de aprendizaje. Si va a innovar, tiene que entender el valor de lo que está reemplazando, y muchos dise?adores tienden a subestimarlo cuando el valor que proporcionan las convenciones es realmente importante. La recomendación que hago es la siguiente: innove sólo cuando sepa que la idea es mejor (y todos los que la vean exclamen sorprendidos "?Guau!"), pero aproveche las convenciones cuando no haya ideas mejores. División de las páginas en zonas claramente definidas -
Lo ideal sería que el usuario pudiera reproducir una versión del antiguo programa concurso de Dick Clark $25.000 Pyramid en cualquier página web bien dise?ada (2). En un primer vistazo tendría que poder se?alar las zonas diferentes de la página y decir, "?Cosas que puedo hacer en este sitio!", "?vínculos con las mejores historias de hoy!", "?productos que vende esta compa?ía!", "?cosas que están locos por venderme!', "?navegación para llegar al resto del sitio!". Es importante dividir la página en zonas claramente definidas porque permite al usuario decidir rápidamente en qué partes quiere centrarse y cuáles puede, con tranquilidad,
Dada la categoría, por ejemplo, "Cosas que usa un fontanero", los concursantes tendrían que conseguir que sus compa?eros averiguaran esa categoría dándoles ejemplos ("una llave inglesa, un corta tuberías,...").
ignorar. Muchos estudios sobre el rastteo inicial de una página web sugieren que el usuario decide muy rápidamente las partes de la página que probablemente tengan la información práctica que busca y, casi nunca, mira el resto (como si no estuvieran ahí).
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 lo que hacer clic. es muy importante dejar bien claro sobre lo que se puede hacer clic o no. Por ejemplo, en la página principal (3) de la web del Senador Orrin Hatch durante su fallida carrera presidencial en el 2000 no estaba nada claro si se podía hacer clic sobre todo o sobre nada. Había 18 vínculos en la página, pero sólo dos invitaban a que se hiciera clic en ellos por el aspecto que tenían: un botón grande con la etiqueta "Click here to CONTRIBUTE!" (haga clic aquí para contribuir) y un vínculo de texto subrayado, "FULL STORY" (artículo completo).
El resto de los vínculos eran textos coloreados y el problema era que todo el texto de la página estaba también en colores, de manera que de un vistazo resultaba imposible distinguir los vínculos que había. www.orrinhatch.com Pero no es un defecto catastrófico; estoy 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 debería ser mecánico (como, por ejemplo, sobre qué hacer clic), se está desaprovechando la reserva limitada de paciencia y de buena voluntad con que el usuario aparece ante un sitio nuevo.
Orrin Hatch se merece, al menos, una nota a pie de página en la historia de la usabilidad, ya que fue (hasta lo que conozco) el primer candidato a la presidencia en convertir la usabilidad web en un tema de campa?a. En el primer debate de candidatos republicanos televisado durante la campa?a del 2000, dijo a George W. Bush: "Debo decirle, se?or gobernador, que a diferencia de su sitio web, es más fácil encontrar todo en el mío. [Risita] ?El suyo resulta bastante difícil de usar! No es agradable para el usuario." (Su sitio resultaba más fácil de usar.)
Algunos ejemplos favoritos es el cuandro de búsqueda de drkoop.com (sitio detnta Koop).
Siempre que lo utilizo tengo que pensar, porque el botón que ejecuta la búsqueda no un botón (aunque tenga dos claves visuales estupendas: dispone de la "IV' [buscar], que es una de las dos etiquetas perfectas para el botón del cua- y es lo que está más próximo a dicho cuadro de búsqueda).
un pequeño gráfico con una flecha triangular que tesulta ser uno de los de la Web ("haga clic aquí"). Pero la flecha apunta fuera del texo aludiendo a otra cosa distinta, en tanto que la convención pide que y:3re el que se puede hacer clic. :...echa a la izquierda sería sufidesaparecer el interrogante Baje el sonido hasta que casi desaparezca andes enemigos de las páginas fáciles de atrapar es el ruido visual. Existen, pos de ruidos: abigarrado. Algunas páginas web me producen la misma sensación que leo la carta de Publisher's Clearing House y trato de averiguar qué pega- adjuntar al formulario para entrar sin suscribirme, por accidente, a cual- da la página dama por mi atención, el efecto puede ser abrumador.
Pode Infinidad de invitaciones para que compremos! ?
Multitud de puntos, maciones y colores llamativos! ?
Griterío continuo! de fondo.
En algunas páginas se está como en una fiesta; ninguna fuente de lo suficientemente alta para que lo distraiga, pero existen infinidad de fragmentos de ruido visual que nos terminan agotando.
la otra, pero sólo si se usa la palabra "Search" como etiqueta para el cuadro.
Por ejemplo, los menús de MSNBC constituyen un mecanismo de navegación potente y fácil que permite al usuario obtener rápidamente cualquiet artículo del sitio. Las líneas, no obstante, entre los distintos términos a?aden mucho ruido. Atenuar las líneas facilitaría y aceleraría la lectura de los menús.
El usuario dispone de tolerancias cambiantes para la complejidad y las distracciones; algunas personas no tienen problemas con las páginas abigarradas ni el ruido de fondo, pero otras sí. Cuando se diseñan páginas web es bueno asumir que todo es ruido visual hasta que se demuestre lo contrario.