Cómo estructurar una página web corporativa: 10 directrices y elementos para tener éxito

como estructurar una p√°gina web corporativa

Cómo estructurar una página web corporativa: 10 directrices y elementos para tener éxito

Sin una adecuada estructuraci√≥n, la arquitectura web ser√≠a cuando menos un caos. La organizaci√≥n, la simplicidad, la interrelaci√≥n entre los elementos y la prioridad por los m√°s importantes son los fundamentos de la estructura de una web corporativa. Familiarizarse con las directrices de dise√Īo (la regla de los tres clics, la adaptabilidad para el tr√°fico m√≥vil) y con las p√°ginas y elementos que lo componen (la home, los men√ļs, las secciones de contacto, productos/servicios y about) son claves para saber c√≥mo estructurar una p√°gina web.

Por estructura web entendemos el modo en que las p√°ginas se relacionan entre s√≠, abarcando sensu lato todos los elementos constituyentes de este ‘andamiaje’, que servir√° de soporte a los contenidos y garantizar√° una navegaci√≥n, usabilidad y UX eficientes.

Atendiendo a su jerarqu√≠a, ¬Ņc√≥mo debe ser una web corporativa? Existe una amplia tipolog√≠a de la que pueden destacarse tres modelos: (1) la estructura secuencial, donde el contenido se ordena cronol√≥gicamente, de manera que las p√°ginas m√°s recientes se posicionan en primer lugar, utilizada en medios de comunicaci√≥n y en el blog de webs corporativas; (2) la estructura jer√°rquica o en √°rbol, donde una p√°gina principal enlaza al resto de p√°ginas menores, que su vez pueden redireccionarle enlaces, y (3) la estructura en red o libre, donde una p√°gina principal enlaza a distintas secciones y p√°ginas internas sin un patr√≥n o jerarqu√≠a establecida, √ļnicamente atendiendo a los objetivos y necesidades de la empresa.

Con independencia de la estructura web elegida, las estrategias de dise√Īo deben respetar la regla de los tres clics o three-click rule, consistente en situar la informaci√≥n, productos, etc√©tera, a tres clics o menos de distancia con respecto a la p√°gina principal. Cuanto menor sea el n√ļmero de clics necesarios para cumplimentar una acci√≥n, mayor ser√° la fluidez en la navegaci√≥n, necesaria para garantizar una √≥ptima experiencia del usuario.

¬ŅCu√°les son los elementos clave para estructurar el dise√Īo web corporativo?

P√°gina principal

como estructurar una p√°gina web corporativa home

La p√°gina principal de una web constituye la carta de presentaci√≥n de la empresa y, en muchos casos, la primer√≠sima toma de contacto del cliente con sus productos y servicios. Conocida a su vez como home page o main page, esta secci√≥n coincide con la URL ra√≠z o root, del que parten el resto de p√°ginas, categor√≠as, fichas de productos, etc√©tera, de una web. Por su influencia en las restantes secciones, la p√°gina de inicio quiz√° sea el elemento m√°s valioso de la estructura en un dise√Īo web corporativo.

El objetivo de la p√°gina principal es organizar la informaci√≥n y los enlaces primarios que permitir√°n navegar por las p√°ginas internas. La presencia de CTAs, frases copy y otros reclamos evidencian otra de las funciones de esta secci√≥n: vender. Su estructuraci√≥n busca dosificar la informaci√≥n b√°sica acerca del negocio y concentrar la atenci√≥n del visitante en los elementos clave: la promoci√≥n del banner, el bot√≥n de ‘registrarse’, etc√©tera, gui√°ndole a trav√©s de una o varias rutas deseadas para la empresa. Por ejemplo, la p√°gina de inicio de Dollar Shave Club hace hincapi√© en la suscripci√≥n a su membres√≠a a trav√©s de banners y CTAs, pero tambi√©n dedica un espacio a informar sobre sus servicios, con enlaces que permiten ampliar esta informaci√≥n b√°sica.

Men√ļs

como estructurar una p√°gina web corporativa menu

Usabilidad y navegabilidad comparten algo m√°s que una asonancia. Optimizando la navegaci√≥n entre las diferentes p√°ginas y secciones de una web se consigue elevar la usabilidad y la UX, y un primer paso para lograrlo reside en la creaci√≥n de men√ļs. En esencia existen dos tipos de men√ļ en dise√Īo web corporativo: (1) el men√ļ del encabezado o header, considerado el principal y que se compone de los enlaces y p√°ginas internas de mayor entidad, y (2) el men√ļ a pie de p√°gina o del footer, que por lo general ampl√≠a las opciones del men√ļ principal con la adici√≥n de p√°ginas legales y de contacto. Estos men√ļs no son excluyentes, y a menudo se complementan con submen√ļs, enlaces de ¬ęregresar¬Ľ, men√ļs hamburguesa o migas de pan, √ļtiles para clarificar una jerarqu√≠a web demasiado compleja o escalonada. Incluso ciertas p√°ginas pueden carecer de men√ļ, como sucede con las p√°ginas de inicio dise√Īadas siguiendo el esquema one page.

Versión móvil

como estructurar una p√°gina web corporativa version movil

Aunque no pueda considerarse un elemento sino una adaptaci√≥n de elementos web, la versi√≥n m√≥vil, responsiva o adaptativa desempe√Īa un rol determinante en la percepci√≥n de la estructura de una p√°gina web corporativa. Tablets y m√≥viles representan hoy el 54,8% del tr√°fico web en el mundo, de acuerdo a Statista. Responsivizar webs para los mobile users evita perder m√°s de la mitad de las visitas online, y este proceso implica adaptar todos y cada uno de los elementos de dise√Īo (banners, men√ļs, p√°rrafos, contenido audiovisual) a la limitaciones del dispositivo de acceso, como las dimensiones de la pantalla o la capacidad de procesamiento. Este condicionante, por ejemplo, fuerza a comprimir el peso de las im√°genes y otros archivos de elevado cach√©; tambi√©n implica suprimir elementos problem√°ticos (pop-ups, animaciones flash) en la navegaci√≥n m√≥vil.

Productos/servicios

como estructurar una p√°gina web corporativa productos/servicios

Por la variedad de dise√Īos disponibles, no existe una p√°gina protot√≠pica para exponer los productos y servicios de una empresa. La multinacional californiana Cisco lista sus soluciones de redes y software en divs o bloques, incluyendo el t√≠tulo, un resumen y el enlace, mientras que Apple prefiere dedicar una landing page a cada uno de sus productos, casi siempre de dise√Īo one page que dosifique la informaci√≥n y calidades de sus tel√©fonos y relojes inteligentes. Sin embargo, todas secciones de productos/servicios de √©xito comparten rasgos y elementos, como la presencia de fichas de caracter√≠sticas t√©cnicas, el uso de abundante material audiovisual o las pruebas sociales, es decir, los testimonios de clientes satisfechos que recomiendan al visitante dar el ¬ęs√≠, quiero¬Ľ al producto en cuesti√≥n.

Acerca de

como estructurar una p√°gina web corporativa about

Indispensable en la estructura de una p√°gina web corporativa es la secci√≥n ‘acerca de’ o about (si bien recibe m√ļltiples nombres: ’empresa’, ‘nosotros’, etc√©tera). ¬ęUna excelente manera de distinguirse de la multitud es tener una p√°gina about verdaderamente √ļnica¬Ľ, ha expresado el dise√Īador Mark Nutter a Smashing Magazine. Pero la originalidad, a√ļn siendo un atributo deseable, no es el m√°s importante. Las mejores p√°ginas about se caracterizan por ser directas, ordenadas, prolijas en contenido y escaneables de un vistazo. Estas √ļltimas cualidades ser√≠an dif√≠ciles de conciliar sin el orden. Aunque Ford y Microsoft cuentan con p√°ginas about realmente densas, aciertan al dosificar la informaci√≥n en p√°ginas internas y relacionadas ‚ÄĒen el caso de la multinacional de Bill Gates, su p√°gina about enlaza con ‘Nuestra empresa’, ‘Staff’, ‘Nuestros valores’, etc√©tera. Estrechamente relacionada con esta secci√≥n de una p√°gina web corporativa se encuentran otras como las dedicadas a los afiliados y partners, la sala de prensa o las de oportunidades de empleo, dado que en muchos casos se incorporan a la p√°gina de about.

Páginas de contacto y atención al cliente

como estructurar una p√°gina web corporativa atencion al cliente

Estos elementos, a menudo separados en distintas secciones, se vinculan con frecuencia entre s√≠, siendo en cualquier caso p√°ginas de dise√Īo simple, claro y directo, con la informaci√≥n justa para facilitar las v√≠as de contacto al usuario. Las p√°ginas de contacto, atenci√≥n al cliente o soporte tienden a confundirse en determinados casos. Buen ejemplo es Amazon, ecommerce que muestra a pie de p√°gina la secci√≥n ‘¬ŅNecesitas ayuda?’ con un popurr√≠ de opciones relacionadas con la atenci√≥n al cliente (localizar env√≠os, Amazon Assistant, etc√©tera).

Similar es la soluci√≥n ofrecida por Zappos, cuyo apartado ‘Customer Service’ cumple esta misma funci√≥n e integra secciones vinculadas frecuentemente con el contacto, como el FAQs o la pol√≠tica de env√≠os y devoluci√≥n. Pero no todas las organizaciones se decantan por aglutinar estas secciones. La compa√Ī√≠a HP, que cuenta con un dise√Īo paradigm√°tico de c√≥mo hacer una web corporativa, incluye en el footer la secci√≥n ‘Contacte con HP’ en el apartado ‘Acerca de nosotros’, separando el apartado de ‘Soporte’ para las p√°ginas relacionadas con la asistencia al cliente.

Blog/noticias

como estructurar una p√°gina web corporativa blog

La bit√°cora y la sala de prensa de un negocio son espacios distintos: la primera comparte los conocimientos de la marca buscando ayudar, atraer o educar a su clientela, mientras que el segundo act√ļan como un canal de difusi√≥n de noticias y comunicados de la empresa. Aunque es imposible detallar en unos p√°rrafos todas las directrices de dise√Īo que garantizan el √©xito de un blog, sintetizaremos las fundamentales: (1) desarrollar contenido de valor y calidad para una audiencia determinada, (2) publicar con regularidad y consistencia, y (3) difundirlo a trav√©s de las redes sociales, la newsletter y otros canales propicios. Quiz√° te interese conocer las ventajas que presenta un blog corporativo.

Por su parte, la sala de prensa o press room es un elemento caracter√≠stico de una web corporativa y dispone en principio de una estructura similar a un blog: una especie de p√°gina principal con el listado o grid de publicaciones recientes, y las publicaciones propiamente con el titular y el cuerpo del texto. A diferencia de la bit√°cora, las noticias de la sala de prensa emplean un estilo neutro y un dise√Īo m√°s sobrio, careciendo en ocasiones de sidebar y de banner de suscripci√≥n, que s√≠ est√°n presentes en las entradas de un blog.

P√°ginas legales

como estructurar una p√°gina web corporativa paginas legales

El seguimiento legal en p√°ginas web es hoy exhaustivo, y las sanciones por irregularidades –de hasta 600.000 euros en acciones graves– est√°n a la orden del d√≠a. La informaci√≥n identificativa b√°sica, la responsabilidad y derechos del usuario o el procesamiento de sus datos personales deben ser accesibles al p√ļblico visitante (usuarios, clientes, proveedores, etc√©tera). Tres son las p√°ginas destinadas a facilitar esta informaci√≥n: el aviso legal, la pol√≠tica de privacidad y la pol√≠tica de cookies.

Primeramente, el aviso legal contiene los datos identificativos de la empresa responsable de la web, as√≠ como los t√©rminos y condiciones generales para navegar por la misma. En la pol√≠tica de privacidad, por su parte, se especifica el procesamiento y uso de la informaci√≥n sensible del usuario, desde su recolecci√≥n hasta el abandono de su tratamiento, siempre en funci√≥n del Reglamente General de Protecci√≥n de Datos (RGPD). Por √ļltimo, la pol√≠tica de cookies explica qu√© son estos archivos y detalla su tipolog√≠a, duraci√≥n, finalidad y ente regulador que los gestiona.