El? Contactanos? la forma muy a menudo se lanza como una idea rápida en lugar de un elemento que establece el tono de la comunicación. Hoy analizaremos varias técnicas sencillas que puede usar para llevar sus formularios de contacto de aburridos a brillantes.
En el camino, veremos varios ejemplos de excelentes formularios de contacto junto con recursos sobre cómo recrear el efecto en su propio sitio.
1: diseñalo
Usted pensaría que esto no hace falta decirlo, pero miré un montón de? Póngase en contacto con nosotros? las páginas y los formularios para prepararse para esta publicación y el 90% o más de ellos utilizaron los formularios de interfaz de usuario del navegador predeterminados (blanco, esquinas cuadradas, aburrido). Esto no es necesariamente algo malo, pero si está buscando una manera de animar su página de contacto, los campos de formulario son un buen lugar para comenzar. Intente cambiar el color de los campos para que coincida mejor con su sitio, redondee las esquinas o agregue trazos como en los ejemplos anteriores. Un poco de estilo ayuda mucho a darle a sus formularios un aspecto personalizado.
Recurso útil:
Si necesita ayuda, consulte esta publicación de 40 Tutoriales de estilo de formulario web CSS para desarrolladores web.
2: dale enfoque
Visite el sitio de arriba y comience a llenar el formulario de contacto. Mientras lo hace, el sitio se atenúa para que el formulario de contacto sea el único foco de su atención. Esta es una hermosa manera de asegurar que los usuarios no comiencen a contactarte solo para distraerse con otro contenido. También es una excelente manera de hacer que tus visitantes digan "ooooh".
Recurso útil:
Pase por Build Internet para aprender a atenuar el contenido con jQuery.
3: Hazlo tonto
Si realmente desea animar a los usuarios a que se pongan en contacto con usted, haga que el entorno alrededor del formulario de contacto sea amigable y acogedor. Esto hace que su empresa parezca más accesible y que, de manera subconsciente, sus visitantes esperen una respuesta amistosa (¡asegúrese de entregar una!). Los ejemplos anteriores utilizan colores brillantes e ilustraciones tontas para realizar esta tarea, pero siéntase libre de ser creativo con tipografía, íconos o cualquier otra cosa que pueda pensar para reducir la tensión que alguien podría sentir al acercarse a usted con una pregunta o comentario.
Recurso útil:
Aquí hay algunos personajes super baratos y tontos de Graphic River para que comiences.
4: Dale un mapa
Si su sitio es para un? Ladrillo y mortero? Tienda o cualquier tipo de ubicación física, la integración de un mapa en su página de contacto es una necesidad absoluta para que los clientes potenciales puedan encontrarlo. Esto puede ser tan simple como un mapa ilustrado estilizado o tan completo como un mapa interactivo de Google. Los ejemplos anteriores adoptan el enfoque interactivo (en mi opinión, la mejor manera de hacerlo), el segundo de los cuales incluso integra direcciones de conducción personalizadas, que se muestran prominentemente en la parte superior del mapa.
Recurso útil:
Si necesita ayuda, consulte este generador gratuito de Google Map para su página de inicio.
5: Hazlo inteligente
Para ver lo que quiero decir con "inteligente," Visita los dos ejemplos anteriores. El primero verifica el contenido que los usuarios escriben en el campo para asegurarse de que sea correcto (es decir, validación de formulario). Por ejemplo, si escribes? Joe? en el campo de dirección de correo electrónico, el formulario le indica que ingrese una dirección de correo electrónico válida. El segundo ejemplo simplemente implementa el resaltado de formularios de manera creativa. Al hacer que el campo actual del usuario se destaque de alguna manera, los ayuda a mantener su enfoque y posición en el formulario. Es un pequeño toque de usabilidad que realmente puede ayudar a cualquier persona que pueda tener problemas para ver en qué campo se encuentra.
Recursos útiles:
¿No tienes idea de cómo hacerte formas inteligentes? Aquí hay algunos recursos de validación de formularios para que pueda elegir:
- Validación de forma realmente fácil
- Tutorial: Validación de formularios con JavaScript
- Secuencia de comandos de validación de forma gratuita (Apple Developer Connection)
6: caminar a través de él
Si hay información específica que necesita del usuario, como requisitos de presupuesto o área de interés, no cuente con que el usuario la incluya, incluso si hace explícito que la información debe estar allí. En su lugar, use las casillas de verificación, los botones de radio y los menús desplegables como una forma de asegurarse de que no se omitan. Estas herramientas no solo ayudan a los usuarios a recordar todo lo que se debe incluir, sino que generalmente hacen que el proceso de contacto sea mucho más sencillo al eliminar una gran cantidad del trabajo de escritura.
Recursos útiles:
Echa un vistazo a esta lista completa de elementos UI desglosados por navegador y sistema operativo.
7: animalo
Los dos sitios anteriores utilizan un menú desplegable animado para su formulario de contacto. Colocar este menú directamente en la página de inicio hace que sea realmente fácil para los visitantes conocerte sin buscar información de contacto. El aspecto desplegable le permite realizar esta tarea sin agregar desorden a su página de inicio. Observe que el menú de Blue Acorn en realidad empuja el contenido del sitio hacia abajo mientras que Fred Maya se desliza sobre el contenido existente. Ambas formas funcionan bien, pero prefiero el método Blue Acorn, ya que no obstruye nada y es más fácil de leer sin la transparencia.
Recursos útiles:
Para lograr un efecto similar en su sitio, consulte el tutorial de Noupe sobre cómo crear un menú desplegable atractivo con jQuery y CSS.
8: tema
Mi respuesta estándar para todas las cosas creativas: ¡crea un tema inteligente! Hacer que una interfaz refleje algo con lo que las personas ya están familiarizadas no solo puede proporcionar excelentes ideas de diseño, sino que también puede aumentar su capacidad de uso (también puede disminuir su capacidad de uso si no tiene cuidado). El ejemplo anterior utiliza un iPod touch como interfaz para el formulario de contacto. ¡Intenta pensar en algo único para el tuyo! Las posibilidades incluyen cualquier cosa, desde una nota post-it hasta una tarjeta de presentación.
9: Hazlo conversacional
El ejemplo anterior fue una de las ideas más singulares que encontré. Algo así como el formulario de contacto Mad Libs, el usuario recibe algunas frases y se le pide que complete los espacios en blanco.Esto asegura que obtenga la información que desea, pero que se presenta al usuario es un formato mucho más amigable que los campos antiguos con etiquetas. ¡Claro que puede decirse que es menos utilizable porque implica más lectura por parte del usuario, pero obtiene una estrella dorada en diversión!
10: Hazlo sobredimensionado
Una forma sencilla de llamar la atención de un usuario con cualquier cosa que diseñe es hacerlo mucho más grande de lo que esperaban. Después de usar un montón de formularios de contacto de tamaño normal, el que está en el sitio anterior parecía francamente enorme. La sorpresa fue agradable, ya que me encantó el gran tamaño de las formas y el texto. No estoy exactamente seguro de por qué, pero por alguna razón, big se siente amigable!
Conclusión
Ahora debería estar lleno de nuevas ideas sobre cómo hacer de su propio contacto un motivo de orgullo. Avanza y crea increíbles páginas de contacto y cuéntanos sobre ellas en los comentarios a continuación. También asegúrese de hacernos saber cuál de los ejemplos anteriores fue su favorito junto con sus propias ideas para mejorarlos.