El simple hecho de que un usuario aterrice en cualquier página de un determinado sitio web representa una oportunidad para convencer o realizar conversiones, el éxito depende en gran medida de que este encuentre la solución o respuesta a lo que busca en un entorno adecuado y bien organizado. Está claro que el planteamiento del diseño en cada página de un sitio web es importante, así como la disposición de los elementos que forman parte de ella, su colocación en el espacio y la forma de mostrase en diferentes tipos de dispositivos. Hacemos un repaso de los elementos, componentes y sistemas más habituales que es posible utilizar en el diseño de páginas web, tanto en el terreno corporativo o comercial, como en el del desarrollo de la marca personal, prepárate por que son unos cuantos.
Contenidos de esta publicación
Elementos comunes a las diferentes páginas del sitio
Cabecero
El cabecero de la página muestra una imagen relacionada con la actividad que también puede incluir breves textos explicativos o introductorios para poner en situación al visitante. Esta a su vez puede ser común en diferentes apartados o cambiar según la temática de cada una de las páginas del sitio. Se trata de un elemento muy recomendable para incorporar sobre todo en páginas principales o de aterrizaje, como la denominada «home» de sitios web corporativos, pero resulta también muy útil para exhibir fotos carismáticas en la promoción de la marca personal según el caso.
Barras o artilugios para la disposición de Menús
Los menús en disposición horizontal o vertical (esta última menos habitual) son imprescindibles para facilitar la navegación del usuario, siempre de la forma más intuitiva posible. La organización de los menús está íntimamente relacionada con la el planteamiento de una apropiada arquitectura de la información y la estructura para la disposición de páginas en el sitio web, para organizar con el mejor criterio los diferentes apartados y secciones que lo componen.
Títulos visibles de páginas y publicaciones
Que el usuario sepa en todo momento dónde se encuentra gracias al título que encabeza la página es importante desde el punto de vista de la usabilidad, no todos los desarrollos contemplan la posibilidad de mostrar o no, según el caso, más o menos evidente, los títulos de las páginas o publicaciones. Los sistemas que incluyen o permiten habilitar esta funcionalidad garantizan la orientación del visitante entre los diferentes apartados o secciones del sitio web, indiferentemente de su complejidad.
Barras laterales
La barra lateral o “side bar” resulta imprescindible en las páginas web que albergan contenido dinámico asociado a las publicaciones de blogs informativos o noticias, tero también en tiendas online y portales con gran cantidad de contenido. Su utilidad principal es albergar los textos con hipervínculos de las diferentes categorías y etiquetas a cuya temática se asocian las publicaciones, pero además pueden contener otros sub-elementos como imágenes publicitarias y todo tipo de funcionalidades implementadas a través de widgets o plugins, ambos recursos muy utilizados en las aplicaciones para la gestión de contenidos.
Áreas de Widgets
Las áreas de widget cumplen una misión importante en las barras laterales y pies de página, ya que permiten la inserción de otros módulos con funcionalidades adicionales o extraordinarias. Su colocación y elección depende el enfoque del sitio web, aunque es ellas de pueden encontrar contenidos comunes como pueden ser direcciones o localizaciones comerciales, llamadas a la acción, o enlaces a páginas de aterrizaje cuya información interesa que se muestre en todas las páginas.
Pie de página
El pie de página o footer es un elemento esencial situado en la parte inferior de la página, su función es disponer información común a todas las páginas del sitio web, en el pueden incluirse otros widgets o componentes con la dirección comercial, campos de búsqueda, formularios, promociones, y hasta enlaces a cualquier otro apartado del sitio, incluyendo otras páginas e incluso publicaciones de un blog. En este mismo espacio o a continuación de el, es habitual encontrar enlaces a páginas muy específicas y comunes a muchos sitios web, mapa del sitio, política de privacidad, condiciones, faqs, información sobre cookies, etc…
Elementos para la disposición de contenidos en las páginas
Cajas y espacios de texto
Los espacios y cajas para el texto no pueden faltar en la gran mayoría de las páginas, para introducir al visitante en el contexto de la publicación apoyándose en otros contenidos como imágenes y piezas audiovisuales. Los textos bien formateados también cumplen la importante misión de facilitar a los buscadores la categorización de cada página al indexar su contenido, ofreciendo mayor cantidad de pistas para su diferenciación sobre otras, aparte de los títulos y descripciones habituales.
Cajas y espacios para las imágenes
Las imágenes ponen en evidencia para el espectador la temática o el enfoque de la página de un primer y rápido vistazo. De las características, particularidades y fuerza que transmitan dependerá la primera impresión que el visitante se haga sobre nuestra actividad, ganando su confianza y despertando el interés por la lectura. La misión de las imágenes es recíproca a la de los textos, en la mayoría de los casos la carencia de uno u otro material perjudica la percepción y la correcta interpretación de los contenidos desde el punto de vista del usuario, pero también en lo que se refiere al SEO.
Galerías de imágenes
Cuando se hace necesario organizar varias imágenes relacionadas con un tema concreto para mostrarlas en una misma página, la mejor solución es disponerlas en una galería, que puede estar concebida en formato de rejilla. La forma de interactuar con las imágenes de una galería puede ser variada, desde hacer click para visualizar cada imagen en un tamaño mayor en otra URL, hasta hacerlo de forma interactiva a través de una ventaja flotante, que a su vez invite a realizar un pase de diapositivas.
Secciones de portafolio
Si el objetivo de una determinada página es servir de muestrario para enseñar trabajos o proyectos realizados con anterioridad, lo más interesante es implementar un sistema de portafolio. El portafolio puede mostrar en su correspondiente sección imágenes representativas de cada proyecto en miniatura, que permitan acceder haciendo click a la página que alberga la información relacionada al completo, con sus especificaciones.
Botones interactivos
Los botones pueden ser de casi cualquier tamaño y estética, respetando el equilibrio entre una buena apariencia del conjunto y adecuada usabilidad para favorecer la experiencia de usuario. Su correcta colocación y la elección de los colores y formas permiten percibir al usuario una navegabilidad intuitiva y hasta sugerirle los pasos a seguir, para continuar informándose o realizar una conversión.
Divisor de secciones o separador
Con tantas opciones para la posible disposición de elementos en una misma página que deba mostrar información muy extensa, puede hacerse necesario dividir en secciones cada parte para evitar confusión. El divisor puede ser una simple línea continua, de guiones o puntos, con un grosor y color determinados, y su misión es precisamente esta, separar otros elementos entre ellos para poner límite a su área de influencia.
Reproductores multimedia
Reproductores de Vídeo
El reproductor de vídeos brinda la posibilidad de insertarlos para comunicar de una forma más efectiva al explicar conceptos o narrar acontecimientos, sobre todo para visitantes con un interés real en la actividad asociada al conjunto del sitio web que dispongan de tiempo para visualizarlos. La inserción de vídeos es relativamente fácil a través de la mayoría de tecnologías de desarrollo web, tanto si se alojan en el servidor propio, como embebidos o «incrustados» en la página gracias a scripts que incluyen las rutas o enlaces a plataformas de terceros, que facilitan su descarga y visualización por el sistema de streaming, en cuyo caso se consumen menos recursos sobre los servicios de hosting contratados.
Reproductores de audio
El reproductor de audio en la página web pone al alcance del usuario la necesidad incipiente de informarse, instruirse o deleitarse en sus desplazamientos, o realizando otras actividades que no impliquen estar delante de una pantalla, gracias a los podcast o grabaciones en diferentes formatos de archivo que facilitan su compresión. Cada vez son más las empresas y profesionales que incluyen en las páginas de sus sitios web audioguías inspiradas en el mercado, o en sus productos y servicios.
Deslizador o carrusel de imágenes
Incorporar un módulo que permita mostrar una sucesión de imágenes puede aportar valor para que el usuario visualice diferentes mensajes en una misma página. Este comportamiento resulta útil para exhibir diferentes tipos de servicios asociados, ofertas y promociones de una forma más visual, añadiendo textos superpuestos o formando parte cada imagen, y en algunos casos permiten la inserción de archivos de audio para crear un climax apropiado con música ambiental.
Deslizador de vídeo
Algunos productos o servicios requieren mostrar sus características, funciones o desempeño por medio de diferentes clips o piezas de vídeo en el mínimo espacio, incluir un deslizador que permita la interacción para desplazarse a través de ellos en estos casos resulta una opción muy interesante. El deslizador de vídeo también es muy útil para visualizar materiales en el ámbito didáctico o educativo, y como exponente o promotor de servicios de carácter audiovisual.
Elementos expandibles
Cajas con pestañas horizontales
La caja con pestañas horizontales resulta muy útil cuando se requiere disponer información importante en un espacio vertical relativamente corto, evitando al usuario hacer scroll o desplazamiento vertical utilizando la barra del navegador o rueda del ratón. El contenido del módulo cambiará según la pestaña dispuesta en la hilera horizontal en la que se haga click, y la altura total del espacio que ocupa el módulo estará determinada por la caja cuyo contenido sea más extenso y los componentes más avanzados de este sistema permiten incluir también fotografías.
Acordeón o persiana
La persiana se extiende verticalmente cada vez que el usuario hace click en alguno de sus apartados, mostrando la información relacionada que contiene. El módulo en algunos casos puede configurarse para volver a encoger cada apartado cuando se hace click en otro diferente, permitiendo la elasticidad a la hora de mostrar según que contenido. La buena experiencia de usuario en este caso depende de una disposición del resto de los elementos de la página, ya que los contenidos por debajo del espacio que ocupe el elemento se desplazarán hacia abajo, quedando en algunos casos fuera de la interfaz o ventana del navegador, esto también depende en gran medida de la resolución y formato de pantalla en el dispositivo con el que se visualice la página.
Elementos para facilitar la organización o filtración de los contenidos
Sección de Categorías
El concepto de “categorías” suele estar asociado con páginas y otros tipo de contenido adicionales entre los que se haga necesario filtrar la información para concretar el resultado que se acabe mostrando. El ejemplo más habitual son las variedades temáticas a las que pueden ir asociadas las entradas de un blog, o las diferentes familias de productos en un ecommerce.
Sección de Etiquetas
Las etiquetas son palabras simples o compuestas que cumplen una función organizativa similar a la de sus hermanas mayores, “las categorías” mencionadas en anteriormente, pero en este caso menos relevante a los ojos del buscador. Sin embargo, el uso de paneles o nubes de etiquetas elegidas con criterio y bien estructuradas puede ampliar considerablemente las posibilidades de filtrar la información con una mayor variedad de términos, y resolver búsquedas más concretas como apoyo incondicional a las categorías, utilizando palabras más específicas o generalistas, pero diferentes a las de estas.
Campos de búsqueda
Los campos de búsqueda resultan especialmente útiles en sitios web a partir de cierto volumen y variedad de contenido, las tiendas online con numerosos artículos o los medios de prensa online son casos evidentes. Para poder implementar o habilitar esta función con efectividad, el sitio web debería estar creado con tecnologías que permitan organizar el contenido de forma dinámica, ya que las búsquedas estarán relacionadas a su vez con consultas a una base de datos, en la mayoría de los casos operativa y funcional en el lado de servidor, (ver conceptos sobre tecnologías de desarrollo web).
Elementos para la captación, persuasión o venta de productos o servicios
Llamadas a la acción
Las cajas o módulos de llamadas a la acción son ideales para persuadir, sugerir o invitar a que el usuario siga los pasos adecuados para satisfacer su demanda y realizar la conversión. La llamada a la acción puede incluir textos, imágenes y botones, piezas interactivas y hasta animaciones con el objetivo de despertar el interés de la audiencia. Los colores formas y comportamiento de sus funcionalidades deben estar bien estudiados, ya que cualquier click puede suponer una oportunidad para convertir o vender.
Aunque la publicidad es susceptible de poder presentarse en cualquier caja de imagen o archivo multimedia insertado con enlaces, existen otras maneras que permiten hacerlo de manera más eficiente. Estos sistemas y plugins ofrecen la posibilidad de mostrar diferentes tipos de anuncios de forma aleatoria, pero algunos van más allá para mostrar al usuario el contenido visual asociado a campañas de publicidad online de tipo display como puedan ser las de Google AdSense, y hasta con la posibilidad de renderizar aquellos anuncios en los que pueda estar más interesado, gracias a determinadas cookies y al historial de búsqueda almacenado en el navegador, se trata de un sistema complejo asociado al concepto del “remarketing”. También es un recurso utilizado en las campañas de marketing de afiliación.
Espacios o cajas testimoniales
Las opiniones positivas de los clientes o influenciadores siempre son de agradecer, gracias a los módulos testimoniales es posible mostrarlas para generar confianza en otros usuarios que aún no lo son, por supuesto ofreciendo información o enlaces asociados a sus perfiles para demostrar su autenticidad.
Tablas de precios
Los productos o servicios pueden tener costes diferentes según sus características, las tablas de precios ayudan a mostrar esta información de forma clara para caer en la cuenta de las diferencias. El diseño más habitual de las tablas de precios suele tener una disposición vertical, con símbolos de verificación, cuadros y textos de diferentes colores que permiten personalizar las opciones recomendadas o supuestamente más interesantes, desde el punto de vista de la empresa o del usuario.
Fichas de productos
Las fichas de productos son elementos característicos en las páginas de tiendas online que pueden tener estructuras en diferentes composiciones, mostrando más o menos información, y en algunos casos hasta variedad de contenidos multimedia, además de las fotografías del producto. Estos elementos suelen disponer además de funcionalidades específicas para añadir el producto al carrito o lista de la compra, de forma que se pueda acceder a su correspondiente apartado posteriormente y continuar con los pasos para realizar la conversión a través de otros medios como pasarelas de de pago. Las fichas de producto y el entramado que supone su implementación, suelen estar ligados a las plataformas o gestores de contenidos que se utilizan para el comercio electrónico, aunque puede resultar interesante o necesario crearlas utilizando otros recursos, que ofrezcan la posibilidad de realizar la compra a través de proveedores externos de servicios de pago, por ejemplo en el caso de vender un único producto.
Elementos para establecer contacto o facilitar la comunicación bidireccional
Formulario de contacto
El formulario de contacto desempeña la importante labor de hacer llegar las consultas, dudas o demanda de productos o servicios a la cuenta de correo asociada a la actividad. Es aconsejable que este elemento disponga de algún sistema para evitar el spam, y también de la posibilidad de realizar una comprobación o check-in que obligue al usuario a realizar una operación manual de forma añadida, que lo diferencie de un robot de software de los que se enfocan a estas tareas fraudulentas, lo habitual es solicitar la cantidad que corresponde al resultado de la suma de dos cifras o la respuesta evidente a una pregunta concreta. En los casos en los que el formulario deba permitir la carga de archivos, se recomienda tomar precauciones en cuanto a tamaño permitido para evitar consumir recursos del servidor como consecuencia de errores por parte del usuario o prácticas maliciosas.
Los botones sociales facilitan la interacción del público en el entorno de la web 2.0, tanto por medio de interacciones para compartir el contenido por parte del usuario en sus redes sociales, como para realizar el seguimiento de las acciones de la empresa o actividad a través de este tipo canales. Implementar en estos módulos la posibilidad de conocer el número de interacciones a través de cada red social es muy interesante, siempre de cara a valorar las estadísticas, para saber cuales son las páginas de mayor éxito y posiblemente reparar en los motivos que ayuden a mejorar otras.
Campos para mostrar o exhibir comentarios
En el marco de la web 2.0 también se valora positivamente la opción de que la comunicación sea bidireccional, ofreciendo al visitante la posibilidad de dejar comentarios, opiniones o preguntas a través de estos campos, sobre todo en las páginas o publicaciones en las que se considere que su intervención aportará valor haciéndolas más interesantes. Esta iniciativa conlleva el riesgo de spam, ya que muchos visitantes pueden aprovechar las páginas o publicaciones que incluyan comentarios con mayor tirón o visitas, para colocar enlaces externos a otras con sus servicios más o menos relacionados, así que vale la pena tomar precauciones como la posibilidad de validar los comentarios antes de que se publiquen, o de eliminarlos en caso de que omitan las buenas prácticas, también dentro del ámbito de la educación y la ética.
Formularios de suscripción
Ofrecer la posibilidad de suscribirse a través de la página para ampliar o recibir información posterior a la visita “Opt-In”, es algo muy habitual para iniciar una relación comercial. En este contexto también existe la alternativa de enviar un correo de confirmación a la cuenta de correo que se le solicita al usuario en alguno de los campos del formulario, es el concepto del “double Opt-In”, y sirve para verificar que está realmente interesado en los productos o servicios.
Formularios específicos
Cuando se hace imprescindible que el usuario especifique o indique sus preferencias ante una serie de opciones que van más allá de recopilar información para una primera toma de contacto, se utilizan formularios con campos, casillas de verificación y puntos de check-in específicos y relativos a preguntas concretas que el usuario deberá responder. Este tipo de formularios se utilizan menos frecuentemente, solo en páginas de aterrizaje asociadas a etapas del embudo de conversión en las que los usuarios tienen una idea más o menos clara de lo que necesitan, y de las diferencias que supondrá su elección.
Elementos con características singulares
Cajas o espacios para la información de perfil
¿Quién es quién y por qué?, las cajas con la información del perfil responden a estas preguntas con campos predeterminados que permiten introducir y mostrar estos datos. Se utilizan habitualmente para exhibir información sobre los responsables de la empresa, las personas que forman el equipo o los redactores que participan en los contenidos del blog.
Cuando la variedad de información es significativa puede ser recomendable utilizar un módulo que permita avanzar y retroceder entre diferentes publicaciones. Este tipo de navegadores interactivos son muy útiles para ofrecer la posibilidad al espectador de elegir entre las últimas entradas de un blog, o el acceso a un conjunto de páginas destacables o de mayor interés por algún motivo.
Deslizador de publicaciones
Al igual que el navegador de publicaciones visto en el apartado anterior, este deslizador permite reunir visualmente diferentes páginas, pero con una estética propia de un pase de diapositivas, en el que la fuente principal es la imagen destacada asociada a cada una de ellas. Es un recurso muy utilizado en páginas de medios de prensa digitales y revistas online para destacar las noticias más relevantes asociadas a la temática durante un período determinado.
Contadores
Los contadores son efectivos para mostrar información numérica de forma visual y por lo tanto fácilmente interpretable, pero también pueden cumplir la misión de establecer unos tiempos determinados entre períodos como límite para algún acontecimiento. Existen también contadores de barra, que aumentaran su tamaño en horizontal en relación a una cifra numérica o porcentual, contadores circulares que harán lo mismo en base a una circunferencia, y están los que muestran solo la información numérica de forma incremental o regresiva, estos últimos muy útiles para descontar días, horas y minutos que adviertan por ejemplo, de la fecha de vencimiento de una oferta.
Campos para la introducción de código
Con la convergencia de tantas tecnologías para el desarrollo de aplicaciones, se hace habitual que muchos profesionales quieran compartir el código que utilizan en la creación o personalización de sus proyectos. Los campos para la introducción de código permiten colocar líneas o fragmentos de lenguajes de programación en una interfaz adecuada para ello, de forma que los diferentes elementos de su sintaxis no interfieran o alteren el normal funcionamiento de la página.
Conclusiones
La elección de los elementos, componentes o módulos de cada página y su correcta organización y disposición es muy importante, se trata de el paso posterior al planteamiento de una buena arquitectura web y favorece una natural e intuitiva experiencia de usuario. En IngenioVirtual realizamos sitos web estudiando la mejor manera de disponer los diferentes elementos y contenidos en cada caso, entendemos los requerimientos diferenciados de cada cliente para orientar el comportamiento del usuario a satisfacer su demanda realizando la conversión. Si necesitas un sitio web para tu negocio o actividad ponte en contacto, te asesoramos sobre las diferentes opciones y posibilidades para crearlo según la etapa en la que se encuentre tu idea o proyecto.
