La estructura correcta

Estructura, estructura, estructura – Es el hilo conductor que pasa consecuentemente por su página web, es indispensable para una óptima composición. Aquí tiene algunos consejos prácticos para una buena estructura de la página web.

© Fotolia/NicoElNino

El concepto "Mobile First"

El concepto “Mobile First” va un poco más lejos. Le da simplemente la vuelta a la forma usual de trabajo en el diseño web. Se trabaja yendo desde la versión más pequeña del diseño hasta la más grande. Este concepto tiene en cuenta los siguientes puntos:

Menos es más – No solo para pantallas pequeñas

Ya que en una pequeña pantalla de smartphone hay poco espacio a disposición, en el diseño uno se debería concentrar en lo esencial y reflexionar sobre cuáles son los elementos de la página web verdaderamente importantes para el usuario. Lo ideal en este procedimiento sería conseguir una estructura fácil de visualizar y de manejar que se pueda aplicar también a pantallas más grandes.

¿Por qué el visitante de una página web no debería recibir una información igualmente reducida y concentrada en lo esencial? Solo porque en un escritorio grande se tenga más espacio para el diseño eso no quiere decir que haya que rellenarlo hasta el último pixel con informaciones que desvíen la atención.

El concepto “Mobile First” propone por lo tanto sacar provecho del aparente punto débil (p.ej. la falta de espacio en las pantallas pequeñas) y, renunciando a informaciones y elementos no esenciales, conseguir una estructura fácil de manejar, fácil de visualizar y de un aspecto agradablemente reducido para todos los tamaños de pantalla.

 

Página de inicio

La página de inicio de una página web, la “homepage”, es la puerta de entrada para aproximadamente el 90% de los usuarios. La mayoría de ellos accede a los contenidos por medio de esa página. Por lo tanto, se trata de la página más importante de toda su comunicación online y sirve siempre de orientación central en su página web.

Desde el punto de vista del usuario la página de inicio debe responder a las siguientes preguntas:

  • ¿Encontraré aquí la información que estoy buscando? Y si es así, ¿dónde?
  • ¿Quién la publica? ¿La información es profesional/fiable/auténtica?
  • ¿Hay aquí más información que todavía no conozco?
  • ¿La página de inicio me muestra la gama de la oferta de la AHK?

“Usabilidad web” es el concepto clave, ya que el visitante solo se queda más tiempo y navega por los contenidos si las páginas web son fáciles de usar para el usuario. La decisión del visitante de abandonar una página web o no, se toma en solo pocos segundos. Se toman elementos de texto e imágenes como indicios para determinar si una página web “está bien” y merece la pena. Por lo tanto, la impresión general que aportan los conceptos del menú, encabezamientos, textos de introducción, imágenes, eventualmente incluso ilustraciones y gráficos, debe permitir captar rápidamente qué contenidos se encuentran en la página.

Usted mismo puede hacer un pequeño test de evaluación: Tape con una mano su logotipo en la pantalla e intente evaluar si un usuario podría apreciar el propósito y el contenido de su sitio web en función de los demás elementos.

Página distribuidora (nivel 2)

El nivel 2 sirve para dar una primera vista general sobre un ámbito limitado temáticamente. La tarea más importante de las denominadas páginas distribuidoras es ofrecer una primera información por medio de imágenes llamativas y breves textos de introducción que aparecen al pasar el ratón por encima. Ese efecto aporta una mayor facilidad de uso y está encontrando cada vez más aprobación entre los usuarios.

Las páginas distribuidoras sirven, por ejemplo, como una vista general temática sobre servicios o publicaciones.

 

Reglas y tendencias para una estructura amigable para el usuario

Elementos esenciales de una página web amigable son el diseño, la navegación y el contenido. Influyen en que un visitante alcance su objetivo o no. Aquí tenemos algunas reglas importantes:

Contenido y diseño

    • Cada página debe tener un título inequívoco.
    • Un texto de introducción hace posible un acceso rápido al contenido de la página en cuestión
    • En los textos largos, utilice encabezamientos intermedios que sean informativos. Muchos usuarios de internet solo echan un vistazo rápido a una página web y a la hora de encontrar contenidos relevantes se orientan por los títulos o los enlaces.
    • Cuando se utilice cuadros con fondos en color hay que procurar que haya un contraste adecuado entre el texto, el primer plano y el fondo.
    • Imágenes y gráficos deben encajar bien con el tema de la respectiva página web. 

Navegación y enlaces

  • La navegación debe ser sencilla y comprensible.
  • En la navegación principal deben aparecer conceptos esenciales de su oferta de la AHK. Por favor tenga en cuenta que la barra de navegación solo tiene espacio para cinco términos (seis si son palabras cortas). Encuentre palabras clave concisas y significativas para presentar su oferta de información.
  • En el margen superior izquierdo de las subpáginas hay una ruta del enlace (en inglés breadcrumb navigation) que informa al visitante mostrándole en todo momento en qué ámbito de la página web se encuentra y facilitándole la navegación. Regla general: La página web no debe superar una profundidad máxima de cuatro niveles.
  • Resuma todas las informaciones sobre su AHK en un espacio propio, idealmente en la metanavegación, por ejemplo en "quiénes somos" o "la AHK". En ese lugar los visitantes encontrarán una descripción de la organización, la red, las personas de contacto con sus datos de contacto, ofertas de trabajo, información de prensa, etc.
  • Trabaje con submenús, los cuales solo se muestran cuando se accede al área principal deseada. Los enlaces deben ser inequívocamente reconocibles como tales. Los usuarios de internet reconocen inmediatamente que los textos subrayados son un enlace.
  • A la hora de crear enlaces, utilice un texto descriptivo que conste de un solo término o de pocas palabras.
  • Compruebe regularmente que todos los enlaces funcionen bien.
  • Marque los enlaces a páginas externas así como los enlaces para descargas.
  • Determine en qué casos debe abrirse una nueva ventana del navegador.
  • Los enlaces que llevan a una página web dentro de su página web, deben abrirse siempre en la misma ventana del navegador.
  • Los enlaces que llevan a una página fuera de su página web, deben abrirse siempre en una nueva ventana del navegador.

Posibilidades de diálogo

  • Sus datos de contacto (número de teléfono, dirección de e-mail, dirección postal) deben encontrarse en la parte inferior de su página web.
  • Cree una página de contacto en la metanavegación y no esconda las informaciones de contacto en el aviso legal.
  • Ponga a las personas de contacto de la AHK en las correspondientes subpáginas. A no ser que haya distintos responsables para las distintas sedes, solo debe aparecer una persona de contacto, la cual será también la encargada de recibir las consultas de la página web
  • Publique su horario de oficina para que los interesados no tengan que hablar con su contestador automático.
  • Anime a los visitantes a realizar una consulta por medio de un formulario de contacto resaltando que no será vinculante y que será beneficiosa para el interesado.
  • Si recibe a interesados o clientes personalmente en su oficina, incluya en su página web un mapa y una descripción de cómo llegar hasta allí.
  • Mientras menos campos utilice en sus formularios online, más interesados rellenarán el formulario.
  • Asegúrese de que el primer campo a rellenar sea fácil de encontrar. El visitante debe ser capaz de comenzar a rellenarlo inmediatamente.
  • Asegúrese de que los usuarios puedan rellenar el formulario con el tabulador en el orden correcto y lógico.

Tendencia I: Desplazarse en vez de clicar

Clicar está pasado de moda, desplazarse está de moda. Esta tendencia se puede ver en particular en los onepagers y en diseños adaptables más extensos. Desplazarse es más intuitivo, se evita tener que hacer muchos clics en distintas subpáginas y se ahorra también tiempo de carga. Ya en la primera navegación en la página de inicio de una web, el usuario debería poder encontrar todas las informaciones relevantes con un simple vistazo. Quien quiera adentrarse con mayor profundidad en el tema debe tener también la posibilidad de hacerlo por medio de clics.

Tendencia II: Storytelling

El “storytelling” o narración de historias es una tendencia relacionada también con el desarrollo del onepager: El usuario se desplaza por la página de inicio y lee una historia fascinante sobre la organización y sus servicios. La trabajosa recolección de informaciones por muchas subpáginas diferentes es sustituida por una historia concisa. Esta narración de historias se ve apoyada por la tendencia a desplazarse (“scrollytelling”) de manera que el usuario pasa a una agradable y fluida lectura.