Patrocinado por docxpresso.com
Portada > Artículo

Puntos de entrada y jerarquía visual en las páginas de inicio: el caso de Hotelius

06-02-2006 - Armando Fidalgo

Resumen: 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.

Valoración media: 3,01 | Votos: 6318 | Lecturas: 23871

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.


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.


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.

Puntúa este artículo 1 punto 2 puntos 3 puntos 4 puntos 5 puntos

autor: Armando Fidalgo

Autor: Armando Fidalgo

Soy consultor de usabilidad y arquitectura de la información en Usolab.com.

Artículos publicados: 2

Búsquedas

  

Otros artículos

Archivo »

Todo sobre alzado

De interés

Publicar en alzado »

© Alzado.org | Algunos derechos reservados. Licencia Creative Commons