La proposici\u00f3n de valor en la p\u00e1gina de inicio<\/h3>\n
La proposici\u00f3n de valor es el elemento esencial que estructura el contenido de la p\u00e1gina principal de un sitio web<\/a><\/strong>. No se trata de un simple eslogan, sino de una formulaci\u00f3n para presentar a tus visitantes la necesidad que les tratas de resolver y por qu\u00e9 deber\u00edan elegirte para hacerlo. \u00bfC\u00f3mo se plantea una buena proposici\u00f3n de valor? Existen dos etapas principales para redactar un USP (\u2018Unique Selling Point\u2019) coherente en tu p\u00e1gina de inicio:<\/p>\n Identificar una proposici\u00f3n de valor implica pasa por determinar las necesidades de tu p\u00fablico objetivo. Despu\u00e9s, tendr\u00e1s que analizar c\u00f3mo las resuelves e incidir en los elementos diferenciadores frente a tu competencia.<\/p>\n En solo una frase, la proposici\u00f3n de valor debe ser clara, comprensible en 5-10 segundos para tu p\u00fablico objetivo. Tambi\u00e9n debe ser f\u00e1cil de recordar para tus visitantes. Encontrar el mensaje clave es fundamental, pero puede ser complejo.<\/p>\n Adem\u00e1s, la p\u00e1gina de inicio debe reflejar tu estrategia corporativa y, en funci\u00f3n de cada negocio, reflejar visualmente lo siguiente:<\/p>\n Tu posicionamiento de marketing: La p\u00e1gina principal de un sitio web debe reflejar los grandes ejes de diferenciaci\u00f3n sobre los que gira tu negocio, para que tu visitante los distinga con rapidez (low cost VS lujo, moderno VS tradicional, etc.).<\/p>\n Tu imagen de marca: la p\u00e1gina de inicio debe \u00abdejar huella\u00bb en el visitante con sus elementos gr\u00e1ficos (colores, logo, dise\u00f1o global, etc.). La identidad visual de la p\u00e1gina principal es igualmente indispensable para definir una imagen de marca clara, coherente con el posicionamiento y que refleje tu proposici\u00f3n de valor.<\/p>\n En el centro de tu \u00e1rbol web<\/a><\/strong>, la p\u00e1gina de inicio constituye por lo general una entrada principal, un punto de paso o tambi\u00e9n de referencia para que los visitantes se orienten, sea cual sea la fuente de tr\u00e1fico (org\u00e1nico, de campa\u00f1as, buscando un contenido espec\u00edfico, etc.). Por tanto, la navegaci\u00f3n por tu sitio web debe plantearse partiendo de esta p\u00e1gina central para que responda a todas estas necesidades y est\u00e9 adaptada al comportamiento de tu p\u00fablico objetivo.<\/p>\n La homapage tambi\u00e9n constituye los cimientos de tu posicionamiento natural, pero su optimizaci\u00f3n es diferente a la de otras p\u00e1ginas y est\u00e1 centrada principalmente en la experiencia de usuario. En general, el SEO de la p\u00e1gina de inicio no debe basarse en la optimizaci\u00f3n para una o varias palabras clave espec\u00edficas. Para optimizar su posicionamiento, es crucial elegir a qu\u00e9 paginas enlaza para encauzar la gran recepci\u00f3n de tr\u00e1fico, procedente de enlaces entrantes<\/a><\/strong>, a p\u00e1ginas m\u00e1s espec\u00edficas.<\/p>\n Por tanto, tendr\u00e1s que tratar de no incluir demasiados enlaces en tu p\u00e1gina de inicio, sino de elegir estrat\u00e9gicamente aquellos que faciliten la navegaci\u00f3n. El campo \u00abtitle\u00bb debe hacer referencia a tu marca o tu producto principal. Aseg\u00farate igualmente de completar tu metadescripci\u00f3n y e incluir en ella tu proposici\u00f3n de valor.<\/p>\n Tambi\u00e9n puedes insertar wigdets de Facebook y Twitter para invitar a la gente a compartir la p\u00e1gina principal. La elecci\u00f3n de los campos y el contenido son fundamentales ya que esta p\u00e1gina va a aparecer en bastantes b\u00fasquedas si se realiza un buen trabajo.<\/p>\n <\/i>Tambi\u00e9n te puede interesar<\/span><\/p>\n Una p\u00e1gina de inicio de una tienda online debe contener una serie de elementos est\u00e1ndar que hoy en d\u00eda se han convertido pr\u00e1cticamente en obligatorios, tal como refrentan las pruebas y las experiencias de navegaci\u00f3n de los visitantes.<\/p>\n Plant\u00e9ate completar tu men\u00fa principal horizontal con un men\u00fa secundario, muy pr\u00e1ctico para sitios web complejos con muchas secciones, que mejorar\u00e1 la usabilidad de forma significativa. El men\u00fa secundario puede ser desplegable para no sobrecargar el contenido y puede incluir im\u00e1genes de productos, un fondo transparente o una dise\u00f1o m\u00e1s atractivo. Se puede abrir pasando el rat\u00f3n o haciendo clic.<\/p>\n No obstante, si no se ubican correctamente (por ejemplo, si obstaculizan otros elementos de la navegaci\u00f3n), estos men\u00fas a gran escala pueden perjudicar la experiencia de usuario y aumentar los rebotes.<\/p>\n Situado en la cabecera, el buscador interno est\u00e1 a disposici\u00f3n de cualquier visitante que lo necesite. Adem\u00e1s de su valor para el posicionamiento, su dise\u00f1o y presentaci\u00f3n tambi\u00e9n son esenciales. Puedes mostrar un bot\u00f3n de llamada a la acci\u00f3n original e iconos est\u00e1ndar como la lupa y probar expresiones clave como \u00abBuscar\u00bb o \u00abEncuentra lo que buscas\u00bb.<\/p>\n Si tienes un tienda online, debes ofrecer acceso al carrito de la compra del cliente en la cabecera, aunque est\u00e9 vac\u00edo. Al lado, el bot\u00f3n de conexi\u00f3n a la cuenta de cliente tambi\u00e9n es un punto de referencia importante. Agrupar las funcionalidades de comercio electr\u00f3nico en un mismo punto es una buena idea (f\u00edjate en el ejemplo de amazon.com<\/a>). Recuerda: tu marca debe buscar elementos de diferenciaci\u00f3n, pero eso no significa modificar aspectos que funcionan en negocios similares.<\/p>\n El ejemplo de Sony es bastante ilustrativo de esta organizaci\u00f3n. Desde el men\u00fa \u00abMi\u00a0Sony\u00bb se puede acceder a todas las secciones secundarias de la gesti\u00f3n de cuenta. Al lado, el icono del coraz\u00f3n permite acceder a los art\u00edculos favoritos.<\/p>\n Aunque la proposici\u00f3n de valor debe aparecer ya en la parte superior de la p\u00e1gina principal de un sitio web, su desarrollo en la zona central de la p\u00e1gina detallando las ventajas comerciales tambi\u00e9n es fundamental.<\/p>\n En la p\u00e1gina principal de Wallapop, el eslogan que acompa\u00f1a el logo indica que es el principal sitio web de compraventa de art\u00edculos de segunda mano en Espa\u00f1a. El cuerpo de la p\u00e1gina de inicio se centra en reforzar esta idea de una forma: haciendo hincapi\u00e9 en la variedad de productos. Por \u00faltimo, el pie de p\u00e1gina muestra una lista muy amplia con todas las categor\u00edas y subcategor\u00edas de productos en letra bastante peque\u00f1a. En todo momento, Wallapop muestra al visitante que puede encontrar una gran cantidad de productos para satisfacer necesidades muy distintas.<\/p>\n No todo son nuevos visitantes. La p\u00e1gina principal de un sitio web tambi\u00e9n es la puerta de retorno para los visitantes que vuelven. Por tanto, es primordial tenerlos en cuenta. Si no encuentran ning\u00fan cambio visible en la p\u00e1gina de inicio, tus visitantes pensar\u00e1n que no est\u00e1s ofreciendo nada nuevo y las posibilidades de reconvertirlos o fidelizarlos se reducir\u00e1n. Para que la p\u00e1gina principal tenga el dinamismo que necesita, piensa en dos grandes categor\u00edas de acciones vinculadas con los cambios en tu negocio: novedades y promociones.<\/p>\n Puedes dar visibilidad a estas promociones en la cabecera (como en el ejemplo de Zalando), en un banner emergente, con una secci\u00f3n espec\u00edfica para promociones, etc. A menudo ser\u00e1 necesario dejar algunas fuera para no sobrecargar la p\u00e1gina de inicio, en funci\u00f3n de tu imagen de marca, tus expectativas y tu p\u00fablico objetivo, as\u00ed como de la estructuraci\u00f3n del contenido en tu p\u00e1gina principal. Otra buena pr\u00e1ctica es establecer un calendario editorial con una buena frecuencia de actualizaci\u00f3n (en funci\u00f3n de tu calendario comercial, por supuesto), para fomentar que el usuario a vuelve cada cierto tiempo a ver qu\u00e9 hay de nuevo.<\/p>\n Zalando opta por presentar su promoci\u00f3n del momento en una barra superior en la cabecera, que no ocupa mucho espacio pero tiene gran visibilidad dentro de su p\u00e1gina principal. En su carrusel destaca otros elementos diferenciadores como el env\u00edo gratuito o la posibilidad de devolver productos durante 100\u00a0d\u00edas.<\/p>\n La base de toda conversi\u00f3n es la confianza, as\u00ed que es necesario inspirarla en todo el recorrido del usuario, empezando por la p\u00e1gina de inicio. Si te gestionas una tienda online o un negocio en l\u00ednea, la confianza se genera creando un ambiente que favorezca las compras. Los compromisos de devoluci\u00f3n si el cliente no queda satisfecho, tener una URL segura (tipo https), ofrecer una etiqueta de pago segura (tipo McAfee Secure o Versign), mostrar los testimonios de clientes o facilitar el contacto con el servicio posventa son solo algunos elementos con los que se construye la confianza con tus usuarios.<\/p>\n Por ejemplo, la barra superior de la homepage de la tienda de bicicletas Santa Fixie sintetiza las proposiciones de valor con las que pretende generar confianza entre sus prospectos:<\/p>\n Plant\u00e9ate siempre probar los aspectos que deseas presentar y tambi\u00e9n la forma de presentarlos dentro de la web, ya que a veces los elementos de confianza pueden tener el efecto inverso al deseado y generar dudas en tus visitantes. Este art\u00edculo de VWO incluye una lista de ejemplos de test\u00a0A\/B que arrojaron conclusiones contrarias a lo que la intuici\u00f3n indicar\u00eda<\/a>. El primer ejemplo que presenta hace referencia a una prueba con dos formularios para inscribirse a una newsletter: uno de ellos inclu\u00eda el mensaje \u00ab\u00a1\u00danete a otras 14\u00a0752 personas y recibe actualizaciones gratis!\u00bb y el otro no. Contra todo pron\u00f3stico, el segundo formulario permiti\u00f3 obtener un 122\u00a0% m\u00e1s de registros que el que inclu\u00eda la prueba social.<\/p>\n La construcci\u00f3n de la p\u00e1gina principal de un sitio web es una etapa determinante del desarrollo de una p\u00e1gina web<\/strong><\/a>. Pararse a elaborar los bocetos antes de ponerse a programar permite evitar errores estructurales importantes que a posteriori resulta dif\u00edcil modificar.<\/p>\n La zonificaci\u00f3n permite desglosar y comenzar a jerarquizar los contenidos que conforman la p\u00e1gina de inicio para tener una visi\u00f3n de conjunto de su organizaci\u00f3n. Para realizar la zonificaci\u00f3n, puedes usar distintas herramientas, desde el tradicional croquis en papel hasta programas de mockups como Cacoo, Balsamiq o Axure RP, que en general son bastante intuitivos.<\/p>\n El wireframe o esquema de p\u00e1gina permite definir con m\u00e1s precisi\u00f3n la ubicaci\u00f3n de los diferentes elementos de tu p\u00e1gina de inicio. Con esta estructuraci\u00f3n se crea un prototipo de p\u00e1gina principal plasmado en un boceto funcional \u00aba escala\u00bb que permite tener una idea m\u00e1s realista del resultado. Si pruebas este prototipo en un programa de mockup, puedes tener una primera prueba de experiencia de usuario y comprobar si la identidad visual es conveniente antes de iniciar el desarrollo.<\/p>\n Este es el wireframe final de la p\u00e1gina principal de la cadena hotelera Allia.<\/p>\n <\/i>Cu\u00e1nto cuesta crear una p\u00e1gina web<\/span><\/p>\n <\/p>\n Por \u00faltimo, vamos a ver los aspectos de este art\u00edculo plasmados en algunos ejemplos de sitio web de distintos tipos.<\/p>\n La p\u00e1gina principal de Gastronomic Spain es un ejemplo de homepage de tienda online que combina la sencillez con la eficacia. Dando protagonismo a la imagen, consigue comunicar proposiciones de valor bastante variadas con un solo golpe de vista del visitante. Por ejemplo, la barra superior indica que ofrecen env\u00edos gratis a toda Europa a partir de una cierta cantidad y las im\u00e1genes de la cabecera ofrecen un c\u00f3digo regalo y la posibilidad de participar en un sorteo en redes sociales.<\/p>\n Esta p\u00e1gina de inicio tambi\u00e9n es un ejemplo de optimizaci\u00f3n del men\u00fa superior. Este comercio electr\u00f3nico de alimentaci\u00f3n tiene muchas categor\u00edas y subcategor\u00edas de productos, pero usan un men\u00fa desplegable que solo se muestra al pasar el rat\u00f3n sobre el enlace \u00abProductos\u00bb. De esta forma, evitan la saturaci\u00f3n del visitante. Deben cuidar, eso s\u00ed, que la palabra \u00abProductos\u00bb est\u00e9 muy bien situada en la pantalla para que al visitante no se le pase por alto consultarla: por eso ocupa un punto muy destacado en el mapa de calor de la homepage. Tambi\u00e9n sit\u00faan en un punto estrat\u00e9gico las novedades y las ofertas.<\/p>\n Por \u00faltimo, agrupan en la esquina superior derecha las funcionalidades de comercio electr\u00f3nico: carrito de la compra, cuenta de usuario y buscador de productos. Esta costumbre es habitual en muchas tiendas online porque ha demostrado ser eficaz.<\/p>\n La p\u00e1gina principal de Slack, una plataforma para gestionar la comunicaci\u00f3n de equipos de trabaja, tambi\u00e9n destaca por ofrecer informaci\u00f3n bastante completa de forma ligera. Con el eslogan \u00abSlack es el motor de tu trabajo\u00bb y un p\u00e1rrafo muy breve en el que explica para qu\u00e9 sirve, se posicionan en la mente del visitante que acaba de llegar. Para terminar de reforzar esta idea, una imagen din\u00e1mica muestra un ejemplo de conversaci\u00f3n de equipo que se podr\u00eda tener en la plataforma, tambi\u00e9n con la brevedad como elemento clave.<\/p>\n Adem\u00e1s, la p\u00e1gina de inicio de Slack es un ejemplo de que no siempre es necesario centrarse en los descuentos y promociones. En su lugar, la prioridad de Slack es hacer visible la posibilidad de probar la plataforma y contactar con el equipo de ventas. Con este tipo de herramientas, sobre todo en el \u00e1mbito B2B (de negocio a negocio), es normal que los potenciales clientes no pretendan comprar de inmediato. Mostrarse disponible y ofrecer demostraciones de productos en estos casos es el elemento diferenciador. En resumen, ponerse en la piel del p\u00fablico objetivo para dise\u00f1ar la homepage.<\/p>\n Cuando desplazas la p\u00e1gina principal hacia abajo, estas proposiciones se refuerzan con im\u00e1genes din\u00e1micas m\u00e1s detalladas o servicios espec\u00edficos que ofrece la plataforma (compartir archivos, colabora con socios, etc.).<\/p>\n La p\u00e1gina principal de los medios de comunicaci\u00f3n digitales supone un desaf\u00edo complejo: \u00bfc\u00f3mo conseguir que la informaci\u00f3n quede bien distribuida desde la p\u00e1gina principal? Cada visitante puede tener unas motivaciones muy distintas y, si puedes ofrecerle contenidos que le interesan, es necesario que los encuentre r\u00e1pidamente; si no se ir\u00e1 a buscarlos a otro sitio.<\/p>\n JotDown parte de un men\u00fa superior donde estructura sus contenidos por categor\u00edas (arte, ciencia, cine, etc.) y despu\u00e9s utiliza su secci\u00f3n \u00abEn portada\u00bb para enlazar siete art\u00edculos destacados. Consigue hacerlo en un men\u00fa lateral derecho que no quita ning\u00fan protagonismo a la imagen, que es a su vez un carrusel con esos mismos art\u00edculos. En la parte inferior, la organizaci\u00f3n por categor\u00edas permite distribuir los contenidos de forma ordenada y con mayor nivel de profundidad al mismo tiempo. Por el contrario, la inclusi\u00f3n de dos men\u00fas superiores horizontales del mismo color y con el mismo aspecto puede entorpecer la experiencia de usuario en algunos casos.<\/p>\n El uso del blanco y negro es una apuesta editorial de Jot Down para diferenciarse y generar una emoci\u00f3n de nostalgia en el lector. Sin duda, un recurso potente para posicionarse.<\/p>\n La p\u00e1gina principal de un sitio web, pilar central para pr\u00e1cticamente toda imagen de marca, es la puerta de entrada principal y la referencia ergon\u00f3mica central para orientarse. Por tanto, debe respetar un equilibrio complejo para responder a todos estos aspectos de la mejor forma posible. En pocas palabras, recuerda seguir los est\u00e1ndares de navegaci\u00f3n y mostrar tus principales proposiciones de valor. Pero sin olvidar ponerte en la piel de tu p\u00fablico objetivo y dejar espacio a la creatividad para diferenciarte.<\/p>\n","protected":false},"excerpt":{"rendered":" La calidad de la p\u00e1gina principal tiene un impacto crucial sobre la eficacia del sitio web en su totalidad, la comunicaci\u00f3n de la imagen de marca y la facilidad para navegar. Al fin y al cabo, es el elemento central del sitio. Crear, estructurar, dise\u00f1ar y despu\u00e9s optimizar la p\u00e1gina de inicio exige ser muy […]<\/p>\n","protected":false},"author":2,"featured_media":938,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"\n\n
Identificaci\u00f3n<\/strong><\/h5>\n<\/li>\n<\/ul>\n
\n
Formulaci\u00f3n<\/strong><\/h5>\n<\/li>\n<\/ul>\n
\n
\n
La p\u00e1gina principal, los cimientos de la casa<\/h3>\n
1. La entrada principal para la mayor\u00eda de los visitantes<\/h4>\n
\n
![\"Antigua](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/old-Homepage-Hubspot-1024x602.png\")
<\/p>\n\n
2. El elemento central de tu estrategia de posicionamiento<\/h4>\n
\n
<\/a>La concepci\u00f3n ergon\u00f3mica de la p\u00e1gina principal<\/h2>\n
Los fundamentos de la p\u00e1gina principal de un sitio web de comercio electr\u00f3nico<\/h3>\n
Los elementos indispensables de la cabecera<\/h4>\n
\n
\n
\n
![\"Sony](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/Sony-ES-1024x455.png\")
<\/p>\nElementos imprescindibles de la zona central y el pie de p\u00e1gina<\/h4>\n
\n
Proposici\u00f3n de valor y ventajas comerciales <\/strong><\/h5>\n<\/li>\n<\/ul>\n
![\"\"](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/Wallapop-prop-de-valor-1024x247.jpg\")
<\/p>\n![\"Pie](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/Wallapop-men\u00fa-inferior-1024x453.jpg\")
<\/p>\n\n
Actualizaci\u00f3n del contenido con novedades comerciales <\/strong><\/h5>\n<\/li>\n<\/ul>\n
![\"P\u00e1gina](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/Zalando-banner-superior-1024x369.jpg\")
<\/p>\n\n
Elementos que generan confianza <\/strong><\/h5>\n<\/li>\n<\/ul>\n
![\"Elementos](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/Santafixie-elementos-de-confianza-1024x110.jpg\")
<\/p>\nElaborar los bocetos: la zonificaci\u00f3n y el wireframe<\/h3>\n
La zonificaci\u00f3n de la p\u00e1gina de inicio<\/h4>\n
El wireframe: la estructuraci\u00f3n precisa del contenido de tu p\u00e1gina principal<\/h4>\n
![\"Wireframe](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/Wireframe-homepage-AlliaHotels.png\")
<\/p>\n\n
<\/a>Buenos ejemplos de p\u00e1gina principal de un sitio web<\/h2>\n
Gastronomic Spain<\/h3>\n
![\"P\u00e1gina](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/Ej1-Gastronomic-Spain-1024x485.jpg\")
<\/p>\nSlack<\/h3>\n
![\"P\u00e1gina](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/Ej2-Slack-1011x1024.png\")
<\/p>\nJot Down<\/h3>\n
![\"P\u00e1gina](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/10\/ejemplo-3-Jot-Down.jpg\")
<\/p>\nConclusi\u00f3n<\/h2>\n