La idea sobre diseño web ha ido cambiando estos últimos años. Hace unos años, las restricciones y dificultades técnicas eran tan elevadas que gran parte del esfuerzo se ponía en la tecnología. Existían también limitaciones esenciales en el marco conceptual. Podríamos resumir una página web era que «funcionase». Una década después, ese objetivo, sin ser más sencillo, se asume como logrado. El reto ahora es que cumpla su función comunicativa de forma coherente respetando los estándares.
Y sobre función comunicativa y estándares… tenemos ya al nuestro alcance mucha literatura. Muchos de los conceptos no son nuevos, formaban parte del cuerpo teórico de disciplinas como la Comunicación, la Antropología Cultural, la Semiótica, etc. Simplemente se han contextualizado, revisado y adaptado al nuevo espacio comunicativo.
Resumen del Contenido
El usuario, el protagonista
La aparición de la web 2.0, la llamada web social, donde el usuario es el protagonista ha sido quizás el factor más novedoso y de ineludible referencia en el momento en que decidimos comunicar un mensaje en esta vasta red que nos tiene atrapados.
La función comunicativa centrada en el usuario, en sus emociones y en sus experiencias pasa, pues, a ser prioridad absoluta en nuestro planteamiento de diseño. Debemos pensar y diseñar una web pensando en los usuarios (nuestra audiencia), sus intereses, sus motivaciones y condicionantes. Tener ésto en cuenta nos puede librar de ideas equivocadas y conceptos que, por arrogancia o ignorancia, acaban no cumpliendo las expectativas puestas en nuestro proyecto web.
Así pues, si queremos obtener resultados satisfactorios, deberemos sustentar nuestro trabajo en dos patas: la certeza de lo que queremos transmitir y el conocimiento de aquellos a quiénes se lo queremos transmitir.
¿Por dónde empezar?
Lo primero que debemos hacer es pensar y hacer pensar. Pensar en nuestra futura web, en los objetivos que perseguimos, en lo que queremos comunicar, en los servicios que queremos dar… y contrastar nuestras ideas con los potenciales usuarios de nuestra web. Para ello es muy útil realizar sesiones de brainstorming (tormenta de ideas) donde sentaremos a nuestro público potencial y le haremos preguntas para que reflexionen en voz alta. Se trata de conocer a fondo las necesidades de nuestra audiencia, sus gustos y preferencias.
Si no es posible hacer una sesión de este tipo, intercambiar tus ideas con un amigo o familiar (que cumplan con el perfil de tu audiencia) puede ser muy útil.
Por otro lado, miraremos con lupa a los que ya han hecho algún proyecto similar al que queremos diseñar. No es que vayamos a copiarles, no, se trata de ver aquello que ya funciona bien, las buenas prácticas, y aquello que no da resultado.
Con toda esta información será el momento de ordenar todas las ideas para definir cuáles serán los objetivos que queremos cumplir con la web, cuál será nuestra audiencia y cómo nos dirigiremos a ella, de qué manera nos diferenciaremos de la competencia, qué contenidos serán los más importantes… A partir de esta reflexión ya podremos empezar a construir el «esqueleto» de nuestro proyecto, que comenzará a tomar forma.
El esqueleto de la web
Empezaremos definiendo la información que queremos ofrecer y la manera cómo la vamos a agrupar. Es decir, crearemos el árbol de contenidos: se trata de organizar los contenidos de una forma lógica e intuitiva para que el usuario sepa rápidamente donde hacer clic para encontrar la información que está buscando.
Cuando tengamos el árbol de contenidos medianamente cerrado (los árboles, como pasa en la naturaleza, no paran de crecer y transformarse) decidiremos cómo se mostrará y distribuirá la información en nuestra web. Una manera muy práctica de hacerlo es «dibujar» cada pantalla: se trata de hacer esbozos (también llamados wireframes) con un papel y un lápiz o utilizando programas informáticos como Power Point, Visio, OmniGraffle, etc. Lo ideal es hacer un wireframe para cada página del árbol de contenidos, de esta manera tendremos una visión general de la futura web.
Los wireframes nos ayudarán a reflexionar sobre la mejor manera de mostrar los contenidos, saber cuáles son las informaciones más importantes, cómo navegará el usuario por nuestra web… Los wireframes tienen que ser realistas y viables tanto desde el punto de vista técnico como económico y deben servir para solucionar dudas o temas pendientes antes de pasar a la fase de diseño, maquetación y programación.
Diseño y maquetación
Y finalmente llega el momento de ponerle cara al proyecto mediante un diseño adecuado. Y decimos adecuado porqué el diseño debe ir más allá de la mera función estética: debe apoyar y complementar las decisiones tomadas y seguir los objetivos definidos.
Una vez tenemos el diseño, es el momento de encajar las piezas mediante la maquetación. El maquetador se encarga de que las piezas de diseño se ajusten bien las unas con las otras y de que todo se vea como ha sido planteado previamente por los diseñadores. Si el azul es celeste, deberá verse celeste y no marino, por ejemplo, o si hay 5 píxeles de distancia entre dos fotos, deberán ser 5 píxeles y no 7.
¿Lo estamos haciendo bien? La usabilidad
El proceso ideal incluye aquí un alto en el camino: hemos definido los objetivos, conocemos las expectativas de nuestros usuarios y con ello hemos hecho un planteamiento estructural y de diseño, pero… ¿Lo estamos haciendo bien? Es un buen momento para plantear una nueva reunión, una nueva puesta en común con nuestra audiencia para saber si hemos comprendido lo que nos querían transmitir, si hemos acertado en el diseño, en la manera de plantear la navegación, en la organización de la información… Todo ello afectará a la usabilidad (la facilidad de uso).
Hay diferentes manereas de testear la usabilidad de una web: test de usabilidad, entrevistas en profundidad, análisis heurísticos… El objetivo es detectar qué aspectos deben mejorarse para adaptarlos a la lógica de los usuarios y garantizar que cuando visiten nuestra web puedan cumplir rápidamente los objetivos que les han llevado a visitarnos.
Programación, lanzamiento y seguimiento
Una vez finalizados los retoques pertinentes, se pasa a la fase de programación, la parte más técnica del proyecto, y se prueba el funcionamiento antes de su publicación en Internet. A partir de este momento, empezarán las tareas de difusión y promoción.
Y la tarea de difusión y promoción, pasa, obligatoriamente por el posicionamiento en los distintos buscadores, especialmente en Google. Para existir en Internet tenemos que estar en Google, para ello debemos elegir con sumo cuidado las palabras clave (keywords) con las que queremos que nos encuentren cuando algun usuario las teclee en un buscador y conseguir que otras webs (blogs, Technorati, Del-ici-ous) enlacen a nuestra página. De esta manera conseguiremos dos cosas:
- Si estamos presentes en otras webs más, fácil será que nos conozcan y que los usuarios que nunca llegarían directamente a nuestra web, lo hagan a partir de una web que tenga nuestro enlace.
- Cuántas más páginas enlacen a la nuestra, mejor será nuestro posicionamiento en Google, y más fácil será hacernos visibles.
Una web nunca hay que «aparcarla» sin más: debemos estar pendientes de lo que en ella acontece, observar el comportamiento de nuestros usuarios, ya sea mediante una medición analítica (cómo se mueven los usuarios, qué páginas visitan, cuánto tiempo están en cada página, qué contenidos no miran…) o mediante el análisis de sus comentarios, intercambios, inquietudes, sugerencias… y actuar en consecuencia: cambiando determinados elementos, añadiendo contenidos, reorganizando la información, etc.
Hay que tener en cuenta que la vida de un una web no es eterna, necesita evolucionar al mismo tiempo que lo hacen nuestros objetivos, las necesidades de la audiencia, las herramientas y los comportamentos sociales. Por lo tanto, es conveniente repetir periódicamente el proceso desglosado en este artículo para no perder el impulso en este entorno tan dinámico y cambiante llamado Internet.
Enlaces de interés
- No solo usabilidad, revista de diseño web
http://www.nosolousabilidad.com/ - Boxes and Arrows
http://www.boxesandarrows.com - WebEstilo
http://www.webestilo.com - Alzado
http://www.alzado.org - Useit (Jakob Nielsen)
http://www.useit.com - Guías y tutoriales de usabilidad
http://www.usability.gov/ - Faz, revista de diseño de interacción
http://www.revistafaz.org/