Los 25 mejores ejemplos de páginas de contacto para inspirar al suyo (actualizado para 2020)
Páginas de contacto. Todos los tienen, los necesitan, pero ¿realmente está prestando atención a la estrategia detrás de ellos?
Es cierto, ¿no? Una de las páginas más valiosas de su sitio web suele ser una ocurrencia tardía.
Es una de esas cosas que tiene que estar ahí, pero a menudo, arroja la información necesaria y la deja así.
¡Qué desperdicio!
El nombre de la página en sí es un llamado a la acción; Trátelo con algo de respeto.
Las páginas de contacto son a menudo el punto de partida para un nuevo visitante en una misión. Es adonde van cuando tienen una pregunta y realmente quieren hablar con una persona en su organización.
Existen para servir al usuario con el propósito de brindarle información sobre cómo pueden ponerse en contacto contigo.
El objetivo de cada página de contacto es convertir tu página presentando de forma clara y eficaz los métodos para ponerte en contacto con una empresa lo más rápido posible.
Aquí Estas son algunas de las mejores prácticas que debe tener en cuenta al crear su próxima página de contacto:
- Comience con una copia, explique por qué el usuario debe comunicarse con usted y solicítele que lo haga.
- Evite la información innecesaria. El propósito de su página de contacto es uno de los más directos. Si la información no se centra en explicar cómo alguien puede comunicarse con usted directamente, no debería estar allí. .
- No pida información innecesaria. Mantenga los campos de su formulario al grano y no agregue preguntas para las que no necesite respuestas inmediatas para ayudar al usuario en su viaje.
- Ofrezca más de una forma de comunicarse con usted. A veces, los usuarios quieren hablar contigo por teléfono o chatear en vivo, en lugar de completar un formulario. Asegúrese de darles la opción de elegir el método con el que se sientan más cómodos.
- Personalice tanto como pueda. Utilice funciones como contenido inteligente y lógica condicional para adaptar la página a las necesidades del usuario. ¿Tiene un conjunto de preguntas diferente para un cliente potencial que para un usuario que necesita asistencia? Asegúrese de que su página muestre las preguntas y la información correctas sin importar la persona.
- Establezca las expectativas correctas. Asegúrele al usuario que se pondrá en contacto con él. Resalta tu tiempo de respuesta o hazles saber de quién estarán escuchando.
Ahora que sabes cuáles son las mejores páginas de contacto, ¿estás listo para ver algunos ejemplos de estrellas?
Estás de suerte. ¡He seleccionado este artículo con la ayuda de todo nuestro equipo de diseño!
Cada uno de nosotros ha elegido cinco de nuestras páginas favoritas de contacto y le informamos por qué nos gusta, qué podrían haber hecho mejor. y una inspiración sólida para el próximo rediseño de su página de contacto.
Ashleigh Respicio:
1. Aplicación Marvel
¡Qué ejemplo tan divertido! Esta página de contacto de Marvel permite al usuario completar un formulario general simple o segmentarse para encontrar la ayuda específica que necesitan (es decir, ventas, prensa o soporte).
A continuación, se utiliza la fotografía real. en la sección de ubicación ayuda a poner una cara a una marca y proporciona información sobre la cultura de la oficina de la empresa (los empleados parecen disfrutar de su trabajo es una ventaja).
🔎 Relacionado: La guía definitiva para proyectos de rediseño de sitios web para Empresas
En términos de diseño, la adición de señales visuales habría ayudado a guiar el ojo del usuario, empujándolo inconscientemente a la información debajo del pliegue.
Conclusión: Muestra algo de personalidad. Esta página destaca la cultura de su marca tanto a través de la ilustración como de la fotografía real, lo que las hace sumamente accesibles.
2. Sleeknote
En lugar de simplemente completar un formulario, Sleeknote también ofrece ayuda al usuario con enlaces que lo dirigen a encontrar información adicional o realizar acciones populares. . También han tenido especial cuidado en agregar pruebas sociales, con logotipos confiables.
Visualmente, es genial que el formulario sea corto y toda la información esté organizada de manera condensada, pero el espaciado consistente entre elementos podría mejorar la experiencia y el desplazamiento rápido a otras áreas de la página.
Incluso van tan lejos como para incluir una llamada a la acción colorida en la parte inferior de la página para mover al usuario más abajo en el embudo con una prueba gratuita. ¡Realmente están dejando que esta página haga un trabajo pesado!
Conclusión: adelante, no dude en incluir un siguiente paso en su página de contacto. Tienes su atención, úsala para guiarlos más abajo en tu embudo.
3. Zendesk
Zendesk satisface todas las necesidades principales con su página de contacto mientras mantiene un diseño limpio. . Han incluido un formulario, una opción para ponerse en contacto con el soporte del producto, así como información de ubicación con un mapa.
Aunque la página contiene todos los elementos básicos, carece de los estallidos de color y gráficos que vemos en el resto del sitio y las señales visuales para guiar al usuario por la página hacia el resto de la información. .
Conclusión: la simplicidad es muy útil. Te animo a que uses este ejemplo como punto de partida y, con un poco de personalidad adicional, ¡tu página de contacto podría terminar en una de estas listas!
4. Freshworks
Freshworks utiliza un diseño sutil que es simple, pero que resalta eficazmente la información clave.
El botón «Ponte en contacto», simple y de alto contraste, conduce a un formulario que se abre en una caja de luz. Esta es una excelente manera de mantener la página breve y precisa mientras se habilitan todas las funciones cruciales. Este tipo de , la micro-interacción inesperada puede agregar un enfoque refrescante a una página de contacto que de otra manera sería estándar.
Si bien la simplicidad de la página es refrescante, carece de la marca / personalidad que se transmite en el resto del sitio web. Al agregar un Algunas de las ilustraciones utilizadas en otras páginas, la página de contacto se sentiría más cohesiva y de marca.
En resumen: presente su información de una manera única. La caja de luz en esta página es poco común y memorable.
5. Cobre
En este ejemplo, está claro que el cobre ha prestado especial atención a manteniendo su c Una página de contacto coherente con la apariencia de todo su sitio web.
Los colores utilizados son coherentes con la marca y la imagen de una mujer sonriente es acogedora e informal, lo que hace que las personas se sientan más cómodas para comunicarse con una pregunta o comentario …
Conclusión: cuanto más accesible parezca su marca, más apto será el usuario para interactuar.
Joe Rinaldi: 6. Stripe
Stripe marca todas las casillas de verificación principales para una página de contacto exitosa. Tiene un diseño limpio que deja en claro cómo comunicarse con su equipo y el contenido de la página tiene un tono cálido y amigable.
Lo que más me gusta de esta página, sin embargo, es cómo muestran un puñado de las empresas con las que trabajan junto al formulario. Mostrar las empresas que utilizan su software me hizo pensar: «Si estas grandes empresas confían en Stripe, ¿por qué no debería yo?», Y ayuda a aliviar las reservas que un visitante pueda tener acerca de comunicarse con su equipo de ventas. Ver estos logotipos me hizo pensar » Si estas grandes empresas confían en Stripe, ¿por qué no debería yo?
Lo que más falta en esta página es el tipo de información de contacto disponible para el usuario. El formulario es excelente, pero los usuarios no están al tanto de la ubicación ni de ningún número de teléfono.
En resumen: la prueba social es ENORME. Si lo tienes, ¡haz alarde de ello! Agregar ese elemento extra de confianza justo al lado de un punto de conversión es una victoria.
7. Yeti
Yeti se enorgullece de vender artículos para beber y neveras portátiles de calidad orientados a los fanáticos del aire libre.
En todo su sitio presentan fotografías con temas de la naturaleza y titulares como «Creado para la naturaleza» para reforzar su marca de actividades al aire libre y resonar en su audiencia.
Ese esfuerzo no termina en su página de contacto.
Con demasiada frecuencia, las empresas tratan las páginas de contacto como una ocurrencia tardía en el proceso de diseño y terminan juntando una página genérica con plantilla.
Me encanta que Yeti lleve su marca y su voz a la página de contacto con un hermosa imagen de un excursionista. Se suman a esto al incluir una línea de texto atrevida: «Si bien somos buenos con las señales de humo, hay formas más sencillas de ponernos en contacto y responder a sus preguntas».
Si bien todas estas Los elementos son geniales, la página carece de formulario. La llamada a la acción «Enviar un correo electrónico» podría servir mejor como un formulario en una caja de luz (¡como uno de los ejemplos de Ashleigh!), ins en lugar de abrirse en una pestaña completamente nueva.
En resumen: El hecho de que las páginas de contacto sean una necesidad estándar no significa que su contenido y su tono tengan que serlo. Manténgase fiel a su marca en esta página, así como en cualquier otra.
8. Atlassian
Atlassian es una empresa de software empresarial que ofrece una serie de productos diferentes orientados a mantener organizadas a las grandes empresas.
Especializada en organización, no sorprende que su página de contacto sea extremadamente limpia y bien organizada. Facilitan a los visitantes encontrar el departamento específico que buscan y comunicarse con ellos.
También se aseguraron de que la página se sintiera cálida, amigable y confiable al incluir la capacidad de comunicarse y brindar comentarios directamente a los fundadores.
🔎 Relacionado: Cómo crear una estrategia de mensajería de marca que le encantará a su público
Si bien la adición de fotos reales a la cabeza también es excelente, no sé con quien estoy hablando. Agregar ese toque personal adicional ayudaría en gran medida a mostrarle al usuario que te importa.
En resumen: no tengas miedo de ser vulnerable.Atlassian se arriesga enormemente al solicitar comentarios abiertos, pero estoy seguro de que los comentarios sinceros que han recibido a través de esta página les han permitido mejorar su experiencia de usuario.
9. Infinum
A veces, la ruta «corta y dulce» es el camino a seguir. La empresa de desarrollo de aplicaciones, Infinum, logra este enfoque simple.
Tan pronto como llegas a la página, te saludan con un enorme «Hola» amistoso.
A partir de ahí, te hacen saber que están aquí para ayudarte y te presentan tres opciones simples. La página está limpia, las acciones disponibles a realizar se muestran con mucha claridad y la cantidad limitada de contenido de la página es fácil de leer.
Todas las piezas están aquí, pero la experiencia del usuario después de hacer clic en la dirección de correo electrónico es mediocre. En lugar de presentarle al usuario un formulario en página, el cliente de correo predeterminado de su computadora se abre automáticamente para que usted le escriba un correo electrónico a la empresa. Es torpe y la adquisición no es bienvenida.
En resumen: no lo pienses demasiado. A veces, mantener el diseño sencillo y resaltar lo que el usuario está buscando obviamente en la mansión más clara puede ser muy efectivo.
10. Bubblewits
Bubblewits, un desarrollador de aplicaciones móviles, lleva su página de contacto un paso más allá convirtiéndola en una fuente de generación de clientes potenciales. Lo primero que ve cuando llega es su breve formulario de contacto, pero la parte realmente interesante está justo debajo, donde han incluido una tabla de precios con vínculos a «Comenzar».
¡Es básicamente la mitad de la página de precios!
Tan inteligente como es, Desafortunadamente, la página todavía carece de algunas señales de dirección visuales que ayuden a que los visitantes se desplacen hacia abajo para verla.
En resumen: no hay un libro de reglas que diga que su página de contacto debe tener una parte inferior del formulario del embudo y eso es todo. Experimente con el uso de su página de contacto para calificar más clientes potenciales.
Joel Waggener11. Dollar Shave Club
Dólar Sh ave Club (DSC) realmente quiere ayudar al visitante y demuestra que cuando es literalmente recibido por un amigable menú desplegable que pregunta cómo pueden ayudarlo en esta página única de contacto.
En lugar de hacerlo directamente conectarte con alguien, DSC hace un esfuerzo para ayudarte a encontrar la respuesta por tu cuenta primero, ahorrándote tiempo y energía.
Cada pregunta que respondes en el menú desplegable de la página te lleva a una pregunta más micro hasta usted (con suerte) encontrará lo que necesita. Si de alguna manera no lo hace, han incluido una llamada a la acción que cambia el contenido de la página a una sensación de «contacto» más tradicional.
Me alegra que DSC ofrezca la página de contacto más tradicional con el tiempo, pero podrían poner esta información en alguna parte. en la página de inicio de Contáctenos. No afectaría el flujo, pero mejoraría la experiencia de sentir que necesita saltar a través del aro para obtener un ser humano real.
Además, considerando que Dollar Shave Club tiene redacción notoriamente muy divertida, me hubiera gustado ver algo de esa personalidad incorporada en la página.
En resumen: muestre algo de personalidad y no deje elementos cruciales en su propia página de contacto.
12. Buzzworthy Studio
Buzzworthy es una marca ruidosa, que es muy evidente en su sitio y su contacto. us no es una excepción. El texto grande y una propuesta de valor excelente conducen directamente a una CTA llamativa. La información de contacto también está allí, pero lograron atraerlo Tenga en cuenta en qué quieren realmente que se centre: el CTA de Iniciar un proyecto.
Si bien me encanta el CTA, está demasiado bajo en la página de la versión de escritorio. El diseño general de la página podría mejorarse si reevaluaran las pausas de respuesta y el usuario sufre de demasiado espacio en blanco entre los elementos, especialmente cuando no hay un mensaje visual que los llame a desplazarse más.
En resumen: el texto grande como un gráfico no lo hace t siempre funcionan, pero tienen éxito con elementos de diseño mínimos debido a la excelente redacción. Una página de contacto generalmente sencilla siempre puede ser mejorada mediante una excelente redacción de textos conversacionales.
13. Squarespace
El diseño minimalista de Squarespace es una gran desviación de algunos de los otros ejemplos que he compartido, pero esa es exactamente la razón ¡está en mi lista!
En lugar de un enfoque de una o la otra para su página de contacto, Squarespace ha determinado que el usuario se aventura en esta página para encontrar información en una de seis categorías.
Una vez que el usuario se auto-selecciona, el vínculo lo lleva a un formulario fácil de completar o un centro de ayuda temático que navega a su propio ritmo.
Es simple, va al grano y lleva al usuario exactamente a donde tienen que irse.
En resumen: no tengas miedo de resaltar quién eres. ¡Lo mejor de esta página es que todas las respuestas están literalmente en «espacios cuadrados»!
14.Soluciones de salud de Fitbit
Este es un gran ejemplo de una página que logró la simplicidad y el estilo, todo en uno. Hemos visto muchas páginas sencillas de contacto, que nos encantan y hemos elogiado, pero Fitbit las ha hecho mejor. El usuario recibe una declaración simple sobre qué hacer en la página y cuál será la respuesta de seguimiento.
Luego pueden identificar quiénes son (probablemente para que su información pueda dirigirse a la mayoría lugar apropiado) y llene un breve formulario.
Todo ha sido diseñado. Todo es de marca. El usuario no se salta un latido en esta experiencia.
Desafortunadamente, aunque esta página lo clava por encima del pliegue, siento que la información debajo del formulario está un poco perdida. La página puede beneficiarse de un enlace de salto o un tipo de diseño «elige tu ruta» que hemos visto en algunos otros ejemplos. La información está ahí, pero ¿es accesible para el usuario?
Conclusión: No olvides pequeños detalles en su página de contacto. Debería ser simple, pero no tema aplicar un estilo consistente a los elementos aquí.
15. Adobe
Ahora, Adobe hace un gran trabajo al segmentar.
Al llegar, se les pregunta a los visitantes si buscan ventas o soporte y, en cualquier caso, el usuario puede elegir cómo le gustaría recibir más información. Puede enlazar a los foros de la comunidad, ser dirigido a la mesa de ayuda o simplemente llamar a uno de los muchos números de teléfono proporcionados.
Desde allí, el el usuario puede ver ubicaciones globales e incluso profundizar en enlaces muy específicos sobre consultas de medios, patrocinio e investigación. Por último, si ninguna de esas opciones le gusta, simplemente puede llamarlos al número 800 o chatear en vivo con ellos. ¡Esta página es una victoria desde todos los ángulos!
Lo único que realmente le falta a esta página es el estilo característico de Adobe. Es sencillo y al grano. Se trata de la información de la página, y con razón, pero los usuarios se quedan con una página muy simple que no da ningún guiño a la coherencia del diseño. ¡Conviértalo en un escaparate!
En resumen: este es un excelente diseño para agregar muchos enlaces útiles a una sola página de una manera que no sea abrumadora. Piense en la información que necesita proporcionar a sus usuarios, ¿puede reorganizar los elementos para que sea más útil?
Jessie-Lee Nichols16. Mailchimp
Mailchimp comienza con un título simple y directo que va directo a un módulo de selección automática.
Tener el la capacidad de autoidentificarse lleva al usuario exactamente a donde necesita ir para obtener la información más relevante para su viaje.
A partir de ahí, hay una dirección de correo simple y algunos enlaces directos a muy específicos «contáctenos ”Preguntas sobre API y abuso.
En general, me gusta adónde iba Mailchimp con esta página, pero carece de un formulario. Un formulario simple o chat en vivo eliminaría el límite para obtener una respuesta, incluso con una página tan útil.
En resumen: Piense en las preguntas que responde con frecuencia y agregue esa información muy específica a su página de contacto. Obtendrá a los usuarios la información que necesita y se ahorrará algunos problemas.
17 . Hootsuite
Hootsuite ha hecho que sea excepcionalmente fácil ponerse en contacto con ellos en su página de contacto.
Probablemente refleje un co mmon comportamiento del usuario, comienzan la página con un formulario de venta simple. Si eso no es lo que necesita, proporcionan otras formas de conectarse y encontrar respuestas a la derecha de ese formulario, incluidas las redes sociales y su centro de ayuda.
Por último, tiene todas sus oficinas internacionales enumeradas en en caso de que desee comunicarse con alguien más en su área.
Las ventas son claramente la principal prioridad de Hootsuite aquí, pero debo asumir que muchos usuarios también vienen a la página para obtener asistencia.
Preferiría para ver que el soporte tiene el mismo peso que las ventas en esta página y presentar al usuario una opción más de una u otra.
En resumen: si tiene una página de contacto multipropósito, asegúrese de brindar opciones de usuario y no t encasillarlos en el formulario estándar de una página.
18. PayPal
¡Me atrae mucho lo centrada en el usuario que está esta página!
La copia Inmediatamente comienza la conversación preguntando «Tengo un problema con:» y luego solicitando que el usuario pueda elegir su ruta.
Si ninguno de estos se aplica, puede ingresar su búsqueda consulta en la barra de búsqueda en la parte superior de la página. Luego, más abajo, PayPal ofrece otras tres formas más tradicionales de ponerse en contacto con ellos, por teléfono, correo electrónico o foro.
Para mejorar la página, un formulario o una función de chat en vivo sería útil para los usuarios. A veces, solo desea poder comunicarse con nosotros.
En resumen: acérquese a su página de contacto desde un punto de vista basado en soluciones. Lo más probable es que su visitante tenga algo en mente les gustaría saber de usted, trabajar desde allí.
19.Basecamp
Me encanta lo personal que es la página de contacto de Basecamp.
Desde su primer contacto en esta página , usted sabe con quién hablará y cuánto tiempo pasará antes de que respondan.
Para colmo, esta página no podría ser más de marca. Los patrones sutiles y las ilustraciones mantienen la experiencia del usuario extremadamente consistente con la de otras páginas.
En cuanto a la mejora, mientras que el formulario hace preguntas que permitirán al equipo de soporte abordar las necesidades del usuario rápidamente, es algo abrumador. ¡Esas son preguntas muy específicas! Tener una opción para el chat en vivo podría hacer que esto parezca menos abrumador.
En resumen: ¡Dale una cara a tu marca! Dejar que el usuario sepa quién va a estar al otro lado de su interacción genera confianza y hace que las personas se sientan más cómodas y seguras de que en realidad están hablando con otro ser humano, no con un bot.
Marcella Jalbert20. HubSpot
La página de contacto de HubSpot permite al usuario «elegir su camino» para ayudarlos a obtener las respuestas más relevantes que necesitan rápidamente.
A medida que el usuario se desplaza, encontrará números de teléfono locales de las ubicaciones nacionales e internacionales de HubSpot, ¡e incluso proporcionarán indicaciones para llegar a la sede más cercana!
Por último, hay una función de chat en vivo en la página. En caso de que necesite ayuda, en este mismo momento, puede hacer clic e iniciar una conversación.
Por muy útil que sea la página, sería bueno ver enlaces de salto basados en regiones globales para ayudar al usuario navegue por la página larga.
En resumen: considere a su audiencia geográficamente. Si su audiencia se beneficiaría mejor de su propia ubicación, asegúrese de que puedan ser guiados fácilmente a la mejor fuente.
21. Blue Bottle Coffee
La página de contacto de Blue Bottle Coffee es muy simplista, pero eso es lo que la hace brillante. y para que te mantengas en contacto (con el formulario de suscripción), una imagen para estar en la marca, múltiples formas de contactar diferentes departamentos y un formulario de contacto muy corto.
Siendo la página tan simple, sería genial si podrían usar contenido inteligente para rellenar previamente el campo de correo electrónico en el formulario de contacto si el usuario lo ha introducido en el campo de suscripción. Es un pequeño gesto, pero uno que los usuarios agradecerían.
En resumen: hemos cubierto muchos ejemplos que incluyen una TONELADA de información, este lo hace simple. No tenga miedo de exponer los elementos básicos y dejarlo así.
22. InVision
La parte de esta página de contacto es parte de una página de empresa mucho más grande que proporciona al usuario múltiples facetas de información que cualquier usuario podría potencialmente estar buscando en una página de contacto.
Desde los valores fundamentales de la empresa hasta sus posiciones abiertas, esta página incluso brinda a los usuarios la capacidad de descargar un kit de medios, todo mientras mantiene el formulario en sí simple y para el punto.
Si bien es increíble que esta página proporcione tanta información, a veces puede resultar abrumadora. Hay enlaces de salto en la parte superior de la página, pero sería bueno si siguieran la página con el usuario.
En resumen: Piense en todas las razones por las que un usuario necesitaría acceder a su contacto. y bríndeles las respuestas que necesitan, ¡incluso si hay muchas!
Unbounce
¡Qué útil! Unbounce ha cubierto todas sus bases en su página de contacto.
Han incluido varias formas de comunicarse con ellos en función de sus necesidades y su ubicación. Además, además de eso, tienen enlaces a su documentación, foros e información sobre cómo asociarse con ellos.
En la parte inferior de la página, también tienen los nombres y rostros de su equipo de soporte. Realmente me atrae este toque personal, pero han perdido la oportunidad de vincular sus biografías, sus correos electrónicos o charlar con estas personas.
En resumen: Realice un seguimiento de las señales visuales que esta página ofrece a los usuarios. Las banderas y los bloques de colores atraen fácilmente a los usuarios a la información que más les importa.
24. Lucky Orange
Esta página va directo al grano.
Tan pronto como se carga, se le presenta un formulario de contacto simple en un modo emergente. Si ponerse en contacto con ellos directamente no es algo que desee hacer, simplemente haga clic fuera del modal y elija una de las muchas opciones que pueden ayudar al usuario en su viaje.
Esta es una gran ventaja para el centro de conocimiento que vive más allá del formulario.
Ahora, por muy brillante que sea el formulario modal, el usuario no tiene la opción de pasar del formulario y luego traerlo de regreso. Es usarlo o perderlo y eso podría ser muy frustrante para algunos usuarios.
Conclusión: Piense en cómo puede aislar las funciones que sus usuarios realmente buscan en su página de contacto, haga las cosas muy fáciles y obvias para ellos.
En pocas palabras, esto es lo que necesita saber
Si está pensando en renovar su página de contacto, tenga en cuenta nuestras mejores prácticas y sea entusiasta. siempre quiere pensar en cómo puede ser más útil para sus usuarios.
Haga que las cosas sean lo más fáciles posible para que el usuario las complete y no olvide establecer la expectativa correcta para cuándo escucharán