Algunos usuarios, al llegar a la página de inicio de determinados sitios web, no saben qué hacer o no saben por dónde empezar para alcanzar el objetivo por el que están allÃ. El aspecto en muchas de ellas suele ser uniforme, sin un punto focal destacado que les sugiera por dónde empezar, sin puntos de entrada claros que les permitan encontrar el contenido de su interés o les oriente en su interacción. Destacar las tareas prioritarias, con una localización espacial adecuada y con una jerarquÃa visual clara que dirija la mirada de los usuarios, es esencial en el diseño eficiente de las páginas de inicio de las compañÃas.
Los usuarios al llegar a una página de inicio, por lo general eligen la primera opción que piensan que les conducirá hacia los objetivos que desean cumplir. No leen y ojean todas las opciones disponibles y luego toman una decisión sopesada, si no que pulsan lo primero que les parece adecuado. Por eso es primordial jerarquizar visualmente la información, según la importancia que tengan los mensajes que se quieren comunicar. Es fundamental dirigir la mirada y la secuencia de los usuarios según interese a la compañÃa, para que los usuarios alcancen los objetivos para las que están en la web. Esto se puede conseguir, por ejemplo, mediante una jerarquÃa visual clara y ofreciendo destacadospuntos de entrada al sitio.
Para comentar estos aspectos utilizaremos dos páginas de inicio del sitio web Hotelius, la página anterior al reciente rediseño y la propuesta de rediseño realizada por Usolab, en la que se ha basado el rediseño actual.
Puntos de entrada claros
Los puntos de entrada visuales bien diseñados captan la atención del usuario y le orientan sobre las opciones existentes, minimizando su esfuerzo y su impaciencia al recalar en la página. Asà mismo, para enfatizar estos centros de interés se deben reducir las barreras o distracciones que compitanpor captar la atención.
En la antigua página de inicio de Hotelius no existe un punto claro de arranque de la interacción del usuario. No hay un elemento destacado que capte la atención, sugiera y sirva de comienzo. No existe un foco visual claro, si no que los elementos tienen un peso visual similar.
En el rediseño propuesto por Usolab el buscador, elemento clave en esta página de hoteles, destaca sobre el resto, por la posición, la dimensión, el fondo, el tamaño de fuente del tÃtulo, etc. Estas caracterÃsticas visuales hacen que contraste con el resto de componentes de la página, ayudando a los visitantes a captar el elemento principal del diseño, y les permita saber de forma inmediata por dónde pueden empezar.
Reducir o eliminar el ruido visual o elementos innecesarios
Tufte, una de las mayores autoridades reconocidas en el área de diseño de la información, señala en su libro The Visual Display of Quantitative Information, que el diseño debe centrar su atención en los datos, en el contenido a informar, maximizando la señal a transmitir y presentándola de forma sencilla y concisa,para asà realzar los aspectos clave, a la vez que se minimiza el ruido, loselementos innecesarios. Recomienda concentrarse en los datos y no en los contenedores de los datos, reduciendo o eliminando los elementos (cajas, sombras, imágenes, bordes, lÃneas, etc.) innecesarios que añaden complejidad visual y desvÃan la atención de los usuario de los elementos importantes.
En la página antigua de Hotelius, la frecuente utilización de los fondos azules, las repetidas formas rectangulares utilizadas, el similar color y tamaño de los tÃtulos de cada grupo de información, etc., es decir, la semejanza visual de muchos de los elementos visuales de la página hace que no existan centros de interés claros, y se vea todo bastante igual. Sin embargo, en la propuesta de rediseño se han reducido los elementos distractores y el ruido visual de la página: no se utilizan los fondos azules que añaden carga visual a la página, se eliminan las cajas innecesarias, se usan diferentes tamaños y colores en los tÃtulos de sección, etc.
Ofrecer jerarquÃa visual
Una buena jerarquÃa visual de la información en una página es un factor clave para la claridad de su diseño y para su correcta comprensión e interacción. Ayuda al usuario a identificar qué es lo más importante, qué es lo siguiente más importante, etc. Priorizando el contenido de esta forma, se orienta su mirada y se le guÃa a través de los contenidos de la página de una forma lógica.
La jerarquÃa se crea utilizando diferentes variables visuales, como la situación en la página, el tamaño y la forma de los elementos, la tipografÃa, el color, las imágenes, etc. Según se dispongan y presenten en la página tendrán un mayor o menor peso visual, es decir, captarán más o menos la atención del usuario. Por esto, un buen diseño hará que los elementos que tengan más peso visual sean los que más relevancia tengan para la empresa, que los componentes más importantes sean los más destacados visualmente.
Una jerarquÃa adecuada tiene importancia desde el inicio mismo del proceso de percepción de la página. El usuario, nada más aterrizar en ella, ve primero grandes masas o áreas uniformes, según su color, textura, luminiscencia, etc. Después distingue regiones o grupos de información similares entre sÃ. Finalmente comienza a distinguir los detalles y empieza a leer textos y frases concretas. De aquà la importancia de dirigir la atención y la secuencia de captación de los usuarios desde el principio, utilizando una jerarquÃa visual clara.
![]("http://www.alzado.org/imgconts/autor_id1/hotelius_viejo_little.jpg")
Página de inicio anterior
La página antigua de Hotelius no tiene una clara jerarquÃa visual, no se percibe fácilmente cuáles son los elementos más importantes de la misma. Existe cierta uniformidad entre sus elementos, por ejemplo, por la utilización frecuente del mismo color de fondo azul (o del similar tono gris).
Por otro lado, los elementos situados debajo del logotipo, en la parte superior de la columna izquierda (las banderas y los textos con tamaños y colores llamativos), llaman la atención y desvÃan de los elementos importantes.
Asà mismo, el uso del mismo color y tamaño en los textos que titulan algunos grupos de información (â??Encuentra tu hotelâ?, â??Ofertas Fin de semanaâ?,â?Š) no ayudan a destacar los diferentes grupos.
La localización en el centro de la página del buscador, elemento principal, al estar rodeada de otros elementos con igual peso visual, hace que no destaque.
Asà mismo, el tamaño de la tipografÃa de las opciones situadas en la parte superior de la página (â??Buenos hoteles a buenos preciosâ?, â??Atención al clienteâ?…) añade complejidad visual a la página.
![]("http://www.alzado.org/imgconts/autor_id1/hotelius_usolab_little.jpg")
Propuesta de rediseño de Usolab
En la propuesta de rediseño hay tres grupos de información claros, los formados porlas tres columnas. También se han eliminado casitodos los elementos de la parte superior izquierda, salvo el logotipo.
En la parte superior izquierda, después del logo se sitúa el elemento más importante de la página, el buscador. El bloque del buscador, por su color de fondo y por el sombreado del borde, emerge y se destaca del fondo gris de la página. Además, se utiliza un tamaño grande de tipografÃa para titular el bloque (â??Buscar Hotelâ?). Dentro de él, tanto el uso de la negrita como la utilización de números, indica al usuario la jerarquÃa visual y le ayuda en la interacción.
La parte central se organiza creando agrupaciones separadas por espacios en blanco, y por un tÃtulo en la tipografÃa grande y en diferentes colores.
En la columna derecha se agrupa información complementaria, dos imágenes de hoteles destacados, con un tamaño y color que equilibran el peso visual de la página.
La comunicación y presentación visual juega un papel básico en transmitir a los usuarios qué es lo que les ofrece un sitio web y cómo lo pueden conseguir. Es fundamental, por tanto, para alcanzar los objetivos de negocio realizados a través de un medio eminentemente visual como es Internet.