La experiencia de contacto suele ser lo último que tiene en mente un diseñador al crear un sitio web, y eso tiene que cambiar.
La página o sección de contacto es (por lo general) una de las partes más importantes de todo tu sitio web. Representa el punto de conexión entre tú y quienes visitan tu página.
Si eres diseñador freelance o trabajas en cualquier negocio que necesite clientes potenciales, este podría ser el inicio de una colaboración valiosa (y con un gran potencial económico).
Entonces, ¿por qué esta experiencia suele dejarse para el final? ¿No deberíamos invertir en ella tantos recursos como en nuestras páginas de inicio?
Para crear una experiencia de contacto efectiva, debes lograr un equilibrio entre la navegación y el diseño del formulario. Tu navegación debe facilitar la búsqueda del formulario o la página de contacto, y el formulario debe ser fácil de entender y plantear las preguntas adecuadas.
Con esto en mente, aquí tienes algunos métodos únicos para dar acceso a tu formulario de contacto, junto con ejemplos de estos patrones en acción.
Pestaña / panel de contacto
Una pestaña o panel de contacto puede ser una forma muy efectiva de presentar tu formulario. No solo facilita la navegación (porque no lleva al usuario a una página nueva), sino que también utiliza un toque de diseño interactivo que lo distingue de la típica página de contacto.
Plantilla FlyCMS
Esta plantilla de Webflow hace un gran trabajo al introducirte de forma sutil a una sección de contacto completa.
Esté donde esté la persona en tu sitio, siempre estará a un clic de distancia de múltiples formas de ponerse en contacto. En lugar de enviar al usuario a una página nueva, la plantilla Fly CMS ofrece todo lo necesario en un panel deslizante sencillo y elegante.
Plantilla Essential
Otra plantilla popular de Webflow, Essential, ofrece una interacción de contacto aún más singular al mostrar un botón de contacto fijo en la parte inferior de cada página. Cuando alguien hace clic, se encuentra con un formulario de contacto bien diseñado y con información útil.
Plantilla Mill
También puedes hacer que tu formulario de contacto se deslice desde un lateral de la página. La plantilla Mill utiliza una interacción de deslizamiento para facilitar el contacto sin ocupar demasiado espacio en la pantalla.
Superposiciones de contacto a pantalla completa
Me encanta la idea de usar superposiciones. No solo hacen que la información de contacto sea visible al instante, sino que también aíslan la experiencia para que el usuario pueda concentrarse en lo único que importa: contactarte.
Ejemplos de superposiciones de Codrops
El popular blog de diseño Codrops ha creado una demostración fantástica de superposiciones a pantalla completa. Puedes recrear fácilmente cualquiera de los ejemplos de Codrops en Webflow y simplemente reemplazar su contenido con un formulario o tu información de contacto. Para empezar, sigue nuestro tutorial sobre ventanas modales emergentes y dale a tu "modal" una posición fija de pantalla completa. (Tendrás que hacer algunos ajustes adicionales con nuestro panel de Interacciones para lograr algunos de los diseños de Codrops).
Secciones de contacto
A veces, tu diseño no requiere interacciones ni formularios de contacto sofisticados que se deslizan. Aquí es donde una sencilla sección de contacto anclada puede brillar. Se utiliza a menudo en sitios web de una sola página, pero también puedes añadir una sección de contacto como llamada a la acción final en cada página de un sitio web multipágina. Luego, solo tienes que añadir un enlace de Contacto en tu navegación principal y anclarlo a la sección de contacto de cada página (como en FlyCMS).
En lugar de enviar a la gente a una página nueva, ofréceles un formulario o una experiencia de contacto de fácil acceso al final de la página. De esta forma, pueden leer todo el contenido antes de ponerse en contacto, o ir directamente a la sección de contacto a través del enlace Contacto en tu navegación principal.
¿Cómo ayudas a la gente a ponerse en contacto contigo?
¿Uno de tus sitios web cuenta con una experiencia de contacto única? ¡Nos encantaría verla! ¡Compártela con nosotros en Facebook o Twitter!
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
