9 Consejos Sobre el Diseño de Información para Hacerte un Mejor Diseñador Web

Probablemente sea la parte menos glamurosa del diseño web, pero el diseño de la información no es en absoluto la menos importante. La búsqueda y el consumo de información es la función por excelencia de la web, superando ampliamente a las compras, el juego y la comunicación, todas las cuales incluyen también por sí mismas una buena parte de diseño de información. El cómo los usuarios encuentren y después se sirvan de esa información depende de cómo ésta esté estructurada y presentada. Por lo tanto, todo diseñador web debería estar preparado para tomar decisiones cualificadas e informadas sobre cómo hacerlo.

1 - Sé Metódico

El Diseño de Información es un problema que alcanza más complejidad cuanto mayor sea el sitio web. Sin embargo, incluso un sitio web pequeño se beneficiará de un proceso metódico, realizado paso a paso para encontrar la manera de ordenar y organizar su contenido. Aquí tienes algunos simples pasos que puedes tomar:

1. Comprender el Contenido del Sitio, los Procesos y su Finalidad
   Es muy difícil organizar un montón de material si no sabes de que va realmente. Así que tu primera tarea es hojear el contenido del sitio, los procesos y las metas. El contenido de un sitio hace referencia a sus textos, imágenes, vídeos u otros recursos que te hayan proporcionado o indicado que deben figurar en el sitio. Los procesos de un sitio son las tareas y flujos de trabajo que los usuarios tendrán que completar para interactuar con un sitio Web. Y las metas del sitio son los objetivos a cumplir en él tanto por parte del cliente como del usuario.

   De modo que, por ejemplo, en un restaurante sencillo tal vez encuentres que tienes texto para las páginas de la 1 a la 20, y sabes que los usuarios intentarán completar alguna tarea como hacer una reserva. También podrías observar que los objetivos del usuario en el sitio son averiguar los servicios que ofrece el restaurante, donde se encuentra, si hay mesas disponibles, y después, si somos afortunados, querrán realizar una reserva. Finalmente, los objetivos del cliente podrían consistir en ser de utilidad al usuario, pero también seducirlos a probar una serie de especialidades que el restaurante ofrece.
   
   

2. Priorizar y Buscar la Rutas del Usuario
   Una vez que tengas una idea firme sobre lo que está pasando en el sitio, podrías empezar a priorizar la información y averiguar cómo recorren el sitio los usuarios. ¿Qué caminos toman para alcanzar sus objetivos? ¿Qué páginas son las más importantes para ellos? ¿Qué debería ocupar el espacio principal o portada y cuál es la información sencillamente auxiliar o secundaria?

   Incluso en un ejemplo tan simple como nuestra página web para un restaurante, hay muchas formas de ajustar la información. Por ejemplo podrías trasladar las especialidades directamente a la Página de Inicio, podrías adjuntarlas o promocionarlas durante el proceso de reserva, o convertirlas en menús. Del mismo modo descubrirás que dados los objetivos del cliente, tendrás una prioridad diferente para contenido de cada página. Tal vez el cliente te diga que nadie es capaz de localizar la ubicación del restaurante, por lo que tendrás que crear una sección titulada "Como llegar" en la página y destacarla.

3. Organizar la Información
   Habiendo comprendido lo que está pasando en el sitio y teniendo claro cómo los diferentes elementos se relacionan entre sí, cómo los usuarios quieren moverse a través de ellos y cuán importantes son las distintas secciones, ahora puedes organizar la información en el sitio. Esta organización implica no sólo la categorización de las páginas, por ejemplo decidir si 'sobre la compañía' encaja en una pestaña 'acerca de', sino también cuestionar y reorganizar el contenido que te han proporcionado. Es posible que te encuentres ocasiones en las que sea mejor combinar varias páginas, partir una sección larga, convertir texto en una representación más simple tipo diagrama, o cualquier otro tipo de cambios.

   Desarrolla un mapa del sitio o un plan de cuál será la jerarquía de la información a incluir. Aunque los sitemaps son generalmente un simple conjunto de cajetines indicando páginas, puedes trabajar con todo tipo de información extra, explicando cómo el sitio va a ser configurado, incluir cosas como los enlaces rápidos desde la página de inicio, la forma en la que diferentes secciones podrían reunirse y las rutas que un usuario podría realizar a través del sitemap.

Después de darnos cuenta de cuanta información existe ya en los marketplaces, ahora creemos que un wiki es la forma más efectiva de organizarlo

2 - Piensa de Forma Imaginativa y Poco Convencional

Los sitios web razonablemente complejos pueden ser reordenados y reorganizados de muchas maneras diferentes. Uno de los sitios en los que he trabajado organizando y reorganizando incontables veces la información es FlashDen. He perdido la cuenta del número de veces que he mirado ese menú y lo he reorganizado. En algunos casos sólo hemos movido páginas a otros grupos diferentes de forma que la organización parezca más lógica, y en otras ocasiones hemos introducido conceptos de organización menos convencionales.

Por ejemplo hace ya algunos meses el menú fue adquiriendo demasiada complejidad, así que eliminamos un montón de esos elementos de menú "blandos" y creamos un blog que ahora alberga concursos, newsletters, enlaces internos y otras páginas que estaban saturando el menú.

Recientemente hemos descubierto que tenemos gran cantidad de lo que yo llamo "rezagadas", esto es, páginas sin cabida en el menú. Desde el punto de vista del diseño de información, estas páginas rezagadas son terribles, ¡incluso me cuesta recordar cómo llegar a algunas de ellas! La solución en esta ocasión es construir un sistema tipo wiki, ubica el contenido de nivel superior en el menú entre bastidores y luego usa la wiki para albergar la información de niveles más profundos con su propio servicio de búsqueda, funciones de selección por etiquetas y categorías.

La conclusión a la que he llegado con mis experiencias en FlashDen es que organizar la información no tiene que consistir necesariamente en colocarla en menús y submenús. Podrías descubrir que cierta información no debería estar en un sitio web, o que requiere un subsitio, o que tienes que hacer algo totalmente nuevo. Con FlashDen tengo la ventaja de que han pasado ya casi 3 años durante los cuales he estado observando el contenido y aún a día de hoy encuentro nuevas disposiciones y soluciones.

Para ser un diseñador de información eficaz y para encontrar las soluciones óptimas, a menudo requerirás de una forma de pensar original. Por supuesto, ¡decir "original" es mucho más fácil de decir que de hacer! A veces estamos obcecados por una visión limitante sin ser conscientes de ello. Hace algún tiempo escuché hablar de un experimento donde un montón de bichos saltarines se colocaron en una caja de cristal y al cabo del tiempo aprendieron a saltar solo a la altura de la caja. Cuando se retiró la tapa de vidrio, los bichos continuaron saltando a la misma altura restringida sin siquiera darse cuenta de que saltando más alto podrían salir de ella.

¿Cómo superar una visión limitante cuando no eres consciente? ¡Simple! Con la ayuda de otros que no estén restringidos por los mismos problemas que tú tienes. Para diseños de información compleja a menudo suelo pedir a otras personas ideas para organizarla dándoles únicamente el problema en crudo, sin aportar mis propias modificaciones o propuestas. Conseguir, por ejemplo ideas de un programador u observaciones de un usuario a menudo te traerá sorpresas ya que sus puntos de vista son completamente diferentes a los tuyos y no están viciados por un sistema de pensamiento único.

Si hay alguien que tiene un sitio web enorme, ese es Chevron. ¿Cómo organizarías tú toda esa información?

3 - Mantén Tu Estructura Equilibrada

En el momento de organizar grandes bloques de información, una pregunta obvia que siempre surge es cuán profunda o amplia debe ser tu navegación. La profundidad se refiere a cuántas capas de categorías y subcategorías hay, mientras que la anchura es relativa a la cantidad de las mismas por nivel. El truco es encontrar un equilibrio. Si hay demasiados elementos en un solo nivel, sobre todo el nivel superior, corres el riesgo de confundir al usuario. Por otro lado si el usuario tiene que hacer clic en muchos niveles, el riesgo es que los acabes perdiendo.

Una buena regla es mantener el número de opciones en un determinado nivel de entre 4 a 8. Si tienes más de 8 elementos de nivel superior, cada uno con 8 subcategorías y cada uno con 8 sub-subcategorías, tendrás suficiente espacio para un sitio de 512 páginas. Por supuesto las cosas rara vez se equilibran así de bien automáticamente. Por tanto tendrás que tener cuidado de no acabar teniendo un lado abarrotado y otro despejado. Por ejemplo, en un sitio con un par de cientos de páginas, si pones el contacto en alguna parte del nivel superior, lo más probable es que no vaya a tener 8 subcategorías con 8 sub-subcategorías. Es muy probable que la sección de contacto vaya a ser bastante simple, incluso en un sitio complejo.

Por otro lado si no pones algo como contacto en el nivel superior, podrás conseguir una profundidad más equilibrada de la información, sin embargo correrás el riesgo de quedarte con una tarea las tareas más importantes que debe llevar a cabo el incompleta, ya que le será difícil de encontrar la información de contacto. Una solución sencilla a este problema en particular podría ser añadir 'enlaces' en los que ofrezcas al usuario varias opciones desde la Página de Inicio para saltar a más profundidad en la estructura de la web sin navegar de la manera habitual.

En Tuts+ hemos decidido facilitar los hábitos de los usuarios colocando una demo y un botón.

4 - Diseño para la lectura en "Escaneo", el filtrado y los saltos

No sé si a ti también te pasa, pero es realmente rara la ocasión en la que leo una página web completa. Ya se trate de leer unas instrucciones, unos términos y condiciones de un servicio o una copia común, la mayoría de las veces lo que hago es hojear, escanear y saltar. Suponiendo que yo no soy el único que hace esto, tendría sentido diseñar páginas para facilitar esta forma de consumo de información.

No rodees la información clave entre bloques de texto, resáltala. No des a los usuarios párrafos extremadamente largos y uno tras otro, rómpelos con títulos, subtítulos, viñetas y diagramas, ¡cueste lo que cueste! Piensa en cómo un usuario utilizará el sitio y diséñalo para facilitarle el uso.

Un buen ejemplo de diseño pensando en la forma de consumo del usuario es nuestro sitio Tuts+, un sitio que como muchos de vosotros sabéis, publica tutoriales sobre temas de desarrollo web. En Tuts+ nos dimos cuenta desde el principio que mayoría de la gente, la primera vez que consulta un tutorial echa una primera hojeada a través de él hasta el final de la página, donde trata de encontrar un enlace a una demo y/o fuente de código para decidir si el tutorial es digno de una lectura en profundidad. Una vez nos dimos cuenta de esto, fue un asunto sencillo añadir unos botones especiales que dirigiesen a la versión especial de Prueba y al código fuente, colocados siempre en la parte superior de los tutoriales. Este simple ajuste para adecuar nuestro diseño a los patrones de consumo del usuario nos ha aportado muchos comentarios de usuarios satisfechos.

PatternTap es un buen lugar para obtener ideas y ver cómo otras personas diseñan artículos e información textual

5 - Diseña texto que de ganas de leer

No sé si sencillamente me estoy volviendo más viejo, o si pasar todo el tiempo delante de una pantalla me ha vuelto exigente, pero últimamente me irrita enormemente cuando me presentan un texto que no me incita a su lectura. El objetivo del diseño de un sitio es generalmente transmitir la información y ésta, en su gran mayoría está presentada en forma de texto, así que centrarse en mostrarlo correctamente debería ser una prioridad.

El uso de tamaños de letra demasiado pequeños, un bajo contraste entre el texto y el color de fondo o el mal uso de un texto claro sobre un fondo oscuro, son todos pecados de diseño que todos hemos cometido (¡yo mismo muchos de ellos en una ocasión!) Pero más allá de éstos, hay otras maneras con las que tu diseño puede incitar a que el visitante realmente lea. Intenta diseñar de tal forma que tu diseño enfoque a los visitantes hacia la copia y los conduzca suavemente con títulos, subtítulos, demarcaciones, destacados y otras técnicas que atrapen la mirada.

Un ejemplo simple de orientar a los usuarios a través de un sitio web - guía de 4 pasos de ThemeForest

6 - Ayuda al usuario tanto a ubicarse entre las páginas como a atravesar la información de cada una de ellas páginas

Con anterioridad mencioné las Rutas de los Usuario, se trata de establecer maneras en las que los usuarios tiendan a atravesar un sitio Web. Muchas de estas rutas vendrán por sí solas al observar como se comporta la gente, pero con una planificación, podrás elegir la forma en la que el usuario será guiado a través de una única página y también a través de varias páginas. Una vez que sepas sobre qué rutas específicas vas a trabajar para diseñar sus guías visuales y sus enlaces para ayudarles a avanzar por ese camino.

Por ejemplo en FlashDen, cuando un nuevo usuario llega, nuestro objetivo es conseguir que se registren, que encuentren los archivos, que depositen dinero y luego compren esos archivos. Así que primero les ofrecemos un resumen del proceso de cuatro pasos en la Página de Inicio, después en cada parada hay indicaciones que dirigen al usuario hacia el paso siguiente. En nuestro próximo rediseño espero hacer esta ruta mucho más obvia ya que es imprescindible que el sitio funcione como debería. Ten en cuenta que el camino que estoy describiendo no es para 4 páginas, sino para 4 tareas. Por ejemplo encontrar archivos específicos podría implicar que el usuario tenga que buscar entre decenas de páginas, ésta es una tarea discreta. Las rutas del usuario no tienen que darse a través de determinadas páginas, ¡pueden simplemente englobarse en una serie de tareas!

¡Un libro que merece realmente pena de Steve Krug!

7 - No compliques en exceso las cosas

No debería hacer falta recalcar que la simplicidad es mejor para los usuarios que la complicación. Sin embargo, es muy fácil sobrecargar los diseños. Sé que a menudo hago que las cosas parezcan más complicadas de lo que realmente son para disponer de más elementos visuales en la página con los que trabajar (¡eres malvado Collis, eres malvado Collis!) Otro pecado derivado de complicar demasiado las cosas utilizar palabras innecesarias en los botones y llamadas a la acción (CTAs), como bien explica Steven Krug en su excelente libro Don't Make Me Think (No Me Hagas Pensar) muestra como ejemplo un sitio de empleo hipotético con un botón que dice:

• Empleos Vacantes
• Oportunidades de Empleo
• Empleos por categoría

Uno de estos está bastante claro, otro es razonablemente evidente y la otra, bueno es… quién lo sabe.

¡La información puede ser presentada en formas diferentes a texto!

8 - Visualizar información

Como diseñadores, conocemos más que la mayoría, el valor de una buena imagen visual. Y existen un montón de oportunidades para crear diagramas o visualizaciones con algunos datos, conceptos o información. Este mismo artículo como recordarán comienza con un diagrama muy básico sobre cuál es la relación entre el diseño de interfaces, el diseño de información y el diseño estético. Estas imágenes no sólo rompen la monotonía del texto, sino que también se retienen mejor en la memoria y te dan la oportunidad de dotar de vida a tu página.

DoshDosh tiene un interesante artículo sobre visualización de información, diagramas y lo que el autor llama infografías que merece la pena revisar aunque sólo sea para ver sus brillantes ejemplos gráficos.

El análisis de los objetivos y las rutas nunca había sido tan fácil gracias a herramientas como Analytics

9 - Analizar tu diseño de la información

El diseño de información es una de esas cosas que resulta difícil conseguir a la primera. Así que una vez hayas creado un sitio web deberías analizarlo para ver cómo la gente lo usa y digiere la información, cómo se comportan y descubrir qué podrías mejorar tu diseño.

En este sentido, una herramienta excelente es Google Analytics. Por ejemplo anteriormente mencioné Rutas de los Usuario, Analytics te permite registrar la rutas a través de tus páginas mediante su función Objetivos o "Goals". Configura una secuencia de páginas y Analytics te informará del porcentaje de visitantes que la siguen a través de (y por extensión aquellos que abandonan esa ruta) cada punto.

Otra característica de la analítica que puedes usar es seguimiento de los términos de búsqueda que te permite conocer qué están buscando tus usuarios en el campo de búsqueda de tu propio sitio. ¡Saber lo que está buscando la gente te indicará qué información debería estar disponible más fácilmente o estar ubicada en un lugar predominante!