Spanish (Español) translation by Claudia Márquez (you can also view the original English article)
Una buena página de contacto es esencial para mantener relaciones con sus visitantes. Ya sea que estemos hablando de comercio electrónico, revistas, sitios web personales, servicios en línea, los usuarios generalmente buscarán una página de contacto como su primer medio de comunicación con usted. Por extraño que parezca, muchos diseñadores web descuidan la página de contactos, restando importancia considerando que es uno de los aspectos menos importantes de un sitio web. Es hora de areglarlo.
La importancia de una buena página de contacto
Una página de contacto a menudo se pasa por alto. ¿Cuántas veces ha visitado un sitio web, quiere ponerse en contacto para quejarse sobre un producto o servicio, o hacer una pregunta? ¿Y con qué frecuencia ha tenido problemas con un formulario de contacto?
Una buena página de contacto puede beneficiar a cualquier tipo de negocio. Puede mejorar la satisfacción del cliente ayudando a los usuarios con sus problemas. También puede ayudar a una empresa a mejorar sus productos y servicios al proporcionar una vía para comentarios valiosos.
Otros canales pueden ser limitados cuando se trata de comentarios de los usuarios. Televisión, radio, revistas, periódicos ... todos son una forma de comunicación unidireccional. La comunicación en línea debe de ir en las dos direcciones; un diálogo entre una empresa y un visitante. Ambas partes pueden beneficiarse de eso, que es exactamente por qué una buena página de contacto es esencial.
Colocación:
Primera fase: la ubicación de su información de contacto. Tener la mejor página de contactos en el mundo no es bueno si los visitantes no pueden encontrarla. Tener en cuenta algunas convenciones de diseño puede ayudar a sus visitantes.
Hablando generalmente, la información de contacto puede encontrarse en dos lugares:
La navegación principal es una ubicación ideal para un enlace de página de contacto. Los visitantes generalmente buscan información de contacto en el lado derecho de una página porque se ve como un elemento de importancia secundaria. Por esta razón, comúnmente verá el enlace de la página de contacto como uno de los últimos elementos dentro de la navegación del sitio.
También puede ver una subnavegación más pequeña en la esquina superior derecha de la pantalla. Esta es también una posición valiosa para la página de contacto. Dicho esto, es mejor evitar colocar un enlace a la página de contacto en un menú desplegable, ya que podría pasarse por alto fácilmente.
El pie de página también es una ubicación popular para la información de contacto. Puede mantener un enlace a la página de contacto:
o la información de contacto más importante en sí:
Es complicado anticipar el flujo de visitantes a una página de contacto, por lo que la ubicación de un enlace en al menos dos ubicaciones como se menciona lo cubre bastante bien.
Página de Contacto Escenciales
Ahora que estamos seguros de que los visitantes pueden encontrar su camino a la página de contacto, es hora de pensar en el contenido real. Comencemos con los conceptos básicos y echemos un vistazo a la información que debe estar presente.
Dirección de correo electrónico / Formulario de contacto
Una dirección de correo electrónico es la forma más fácil de contactar a una empresa en línea. Alternativamente, puede usar un formulario de contacto que envíe un correo electrónico. A través de un formulario de contacto, usted tiene más control sobre el contenido (campos obligatorios) y puede evitar el correo no deseado. Más sobre los formularios de contacto más adelante en este artículo.
Dirección
Los negocios de operaciones comerciales no deben olvidar mencionar su dirección. Si tiene varias tiendas, es mejor crear una página separada para cada ubicación. Complete esta página con información de contacto específica de la tienda, horarios de apertura, indicaciones para llegar en automóvil, etc. Esto no solo es útil para los visitantes, sino que también puede ayudar a su sitio a realizar consultas de búsqueda locales.
Teléfono
Mostrar un número de teléfono transmite una sensación de confianza. A menudo se ve como una señal de que esta es una empresa real, que puede ser realmente útil para las tiendas en línea.
Medios de comunicación social
Muchos sitios web están comenzando a agregar botones de redes sociales a su página de contacto. Aunque esto probablemente no beneficie a todos los sitios, para algunos visitantes puede ser un valor agregado real. Sobre todo porque cada vez más empresas ofrecen soporte al cliente a través de Twitter (a veces incluso las 24 horas del día, 7 días a la semana).
Extras
No existe una solución para tener una buena página de contacto. Cada sitio web o empresa requiere ciertos elementos que pueden ser redundantes en otros sitios.
Hay mucha información adicional o características que pueden ser útiles en una página de contacto. Para las tiendas tradicionales físicas, puede ser una buena idea mencionar los horarios de apertura, por ejemplo. Las grandes empresas pueden vincularse a su función de chat en vivo y los sitios de comercio electrónico pueden consolidar la confianza de los usuarios al mostrar su número de VAT.
Información utilizable
Hacer que la información en su página de contacto sea utilizable puede evitar mucha frustración a los visitantes.
Incluya su información de contacto como texto HTML en lugar de imágenes. Esto puede parecer obvio, pero hay muchos sitios web que usan otras técnicas. El texto HTML se puede copiar y pegar, lo que facilita al visitante guardar sus datos de contacto.
Una dirección de correo electrónico debe usar el enlace mailto. Esto permite a los visitantes que hacen clic en él enviar un correo electrónico sin tener que copiar primero la dirección de correo electrónico de destino y abrir un nuevo correo electrónico. Sin embargo, puede surgir un problema con esta técnica, en forma de robots de correo no deseado que recogen las direcciones de correo electrónico asociadas con un enlace mailto :. Por lo tanto, es posible que desee pensar primero en ofuscar direcciones de correo electrónico utilizando un servicio como mailtoencoder.com.
En una nota relacionada: los números de teléfono también deberían ser interactivos. El año pasado, publicamos un consejo rápido sobre cómo hacer que se pueda hacer clic en un número de teléfono. Gracias a una pequeña porción de código, los teléfonos inteligentes pueden reconocer números de teléfono, lo que los hace rescatable. Esto es realmente útil para los usuarios de dispositivos móviles.
Las empresas que dependen en gran medida de sus tiendas tradicionales físicas se pueden beneficiar enormemente de un mapa interactivo, lo que permite a los usuarios encontrar rápidamente su camino hasta el punto de venta. Mostrar la dirección de una tienda es excelente, pero es mejor agregar un mapa interactivo.
Gracias a Google Maps nunca ha sido tan fácil incorporar esta útil función. Simplemente ingrese su dirección en Google Maps y haga clic en el ícono de enlace en la barra lateral. Allí encontrarás el código de inserción.
¿Sabías que puedes personalizar tu mapa? Puede aplicar estilos a los colores del mapa, agregar marcadores de mapas personalizados y crear una leyenda. Encontrará más información en developers.google.com. También puede considerar servicios alternativos, como el increible Mapbox.
No olvide los motores de búsqueda (SEO)
Como visitante, reconocerá instantáneamente una dirección en una página de contacto. Sin embargo, los motores de búsqueda necesitan un poco más de ayuda para reconocer los diversos elementos.
Podemos resolver esto usando datos estructurados. Los datos estructurados son una forma de marcado HTML que proporciona a los motores de búsqueda más información sobre el significado subyacente del contenido.
¿Como funciona? Digamos que tenemos una agencia de diseño web llamada 'Fine Design' que se encuentra en 3102 Highway 98, Mexico Beach, FL. Microdata permite a los motores de búsqueda comprender mejor esta dirección. El código HTML se verá más o menos así:
1 |
|
2 |
<div itemscope itemtype="http://schema.org/LocalBusiness"> |
3 |
<h2><span itemprop="name">Fine Design</span></h2> |
4 |
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> |
5 |
<span itemprop="streetAddress">3102 Highway 98</span> |
6 |
<span itemprop="addressLocality">Mexico Beach</span>, |
7 |
<span itemprop="addressRegion">FL</span> |
8 |
</div>
|
9 |
</div>
|
Es posible que desee ir un paso más allá y ajustar este bloque en una direccion. El elemento de dirección solo se debe usar en direcciones relevantes para el contexto del sitio, no simplemente en cualquier dirección antigua que pueda tener dentro de su contenido. El uso de este elemento ha causado dolores de cabeza a los desarrolladores durante años, por lo que si no está seguro, ¡no se preocupe demasiado por eso!
Eso es todo por la dirección de la empresa. Sin embargo, también podemos usar microdatos para el número de teléfono y la dirección de correo electrónico:
1 |
|
2 |
Tel: <span itemprop="telephone">850-648-4200</span> |
3 |
Email: <a href="mailto:info@finedesign.com" itemprop="email">info@finedesign.com</a> |
Gracias a este marcado motores de búsqueda saben que esta es la dirección de dirección, número de teléfono y correo electrónico de la compañía de la ‘Fine Design’. Es información implícita, lo que significa que los visitantes no pueden verla, pero es un motor de búsqueda muy útil.
También podría considerar usar el microformato hCard, que permite guardar fácilmente datos de contacto en varias plataformas. Lea más sobre microformatos en html5doctor.com.
Formularios de contacto
La mayoría de los sitios web usan un formulario de contacto en su página de contacto. Sin embargo, algunos formularios de contacto son innecesariamente complicados y poco amigables para el usuario.
Tan simple como podría parecer un formulario de contacto, en realidad es una combinación de varios componentes cruciales. Cada uno de estos componentes debe trabajar en conjunto para proporcionar la mejor experiencia de usuario.
Campos de entrada
Los campos de entrada, como campos de texto, botones de opción, casillas de verificación, etc., le permiten al usuario completar la información necesaria.
Los visitantes del sitio son más propensos a completar formularios más cortos ya que requieren menos esfuerzo. La cantidad de campos de entrada es un acto de equilibrio entre la experiencia del usuario y las necesidades del negocio. Hubspot analizó más de 40,000 formularios y observó el efecto de un aumento en el número de campos de entrada. El resultado de su estudio es que debe usar el menor número posible de campos de formulario y ser especialmente cuidadoso con las áreas de texto más sofisticadas y cuadros de selección.
Ayude a sus visitantes a completar estos campos indicando el formato adecuado. Los números de teléfono y las fechas pueden ser complicados, especialmente para los visitantes internacionales. El atributo de marcador de posición HTML5 lo ayudará aquí.
Luego, asegúrese de resaltar los campos obligatorios (una convención común es usar un asterisco *). Declarar explícitamente que se requiere un campo de entrada o que el campo es opcional es un camino seguro a seguir.
Finalmente, puede ser útil resaltar el campo activo. Esto puede ser tan sutil o tan llamativo como desee.
A continuación se muestra un ejemplo de formulario de contacto de un tutorial de Jim Nielsen. Utiliza un asterisco rojo para los campos obligatorios, da algunos consejos de formato y resalta el campo activo.
Validación de formulario
La validación de formularios en línea también puede evitar dolores de cabeza en algunos formularios de contacto. Es muy frustrante tener que volver a enviar un formulario una y otra vez porque ingresó los datos o datos incorrectos en un formato incorrecto. Como mencionamos anteriormente, lo mejor es ayudar a los visitantes mostrando el formato requerido (por ejemplo, fechas, número de teléfono ...).
Botones
No puede tener un formulario de contacto sin un botón de envío. Este botón debe estar en la parte inferior del formulario. Use 'enviar mensaje' como texto de botón en lugar de 'enviar' para recordar a los clientes lo que están haciendo.
Un estándar común de antaño es incluir un botón 'reiniciar' o 'limpiar formato'. No lo haga la gente hará clic accidentalmente. No hay nada peor que escribir un mensaje elaborado y perderlo debido a un botón 'reiniciar'.
Retroalimentación
El visitante ha rellenado su información de contacto, ha escrito un mensaje y presiona el botón 'enviar'. ¿Ahora que? ¿Logró el mensaje o no?
Asegúreles a sus visitantes que el mensaje se ha enviado correctamente al mostrar un mensaje de confirmación. Un correo electrónico de confirmación también es una opción.
El mismo consejo aplica para los errores. Mostrar un error cuando el mensaje no se envió es imprescindible, puede evitar muchas discusiones futuras. El mensaje de error debe ser fácil de usar, así que evite mostrar códigos de error sorprendentes.
Diseño de página de contacto
Hay muchos requisitos técnicos para diseñar una mejor página de contacto, pero no olvidemos uno de los aspectos más importantes: el diseño visual.
Si está utilizando un formulario de contacto, haga que sus campos sean grandes, amigables y atractivos para completar. El espacio en blanco y el relleno pueden ser de gran utilidad.
Los visitantes del sitio web a menudo siguen un patrón en forma de ¨F¨ cuando navegan por una página web, así que tenlo en cuenta cuando diseñas tu diseño. Para formularios de contacto, es mejor apilar todos los campos verticalmente en lugar de colocarlos uno al lado del otro. Esto reduce el número de movimientos oculares que los visitantes deben realizar para completar el formulario.
Una página de contacto debe ajustarse a la identidad visual del resto del sitio. Una apariencia consistente es la clave. Echa un vistazo a esta página de contacto de "Let's Travel Somewhere", por ejemplo, diseñada en forma de postal.
Y como con la mayoría de las tareas relacionadas con el diseño web; la creatividad vale la pena. Neil Patel diseñó su página de contacto en forma de una infografía, triplicando sus solicitudes de contacto.
Ejemplos de formularios de contacto
Hablando de buenos formularios de contacto, echemos un vistazo a algunos ejemplos de inspiración (haga clic en cada imagen para visitar el sitio web respectivo):
Conclusión
Antes de diseñar su página de contacto, asegúrese de que sus visitantes puedan encontrarla. Enlace a él desde su navegación principal o pie de página. Recuerde que la mayoría de las personas buscan información de contacto en el lado derecho de la pantalla.
Piense en la información que debe incluirse. La capacidad de enviar un mensaje, ya sea a través de una dirección de correo electrónico o un formulario de contacto, es esencial. Una dirección y un número de teléfono también pueden ser útiles. Información adicional, como enlaces a perfiles de redes sociales y horarios de apertura, puede ser útil para ciertas empresas.
La interactividad también es importante. Utilice el atributo mailto para las direcciones de correo electrónico (de forma ofuscada) y el atributo tel: para los números de teléfono (muy útil para los visitantes móviles). También se puede incrustar un mapa interactivo como Google Maps, pero considere las consecuencias en el rendimiento.
La usabilidad del formulario de contacto puede hacer o deshacer una página de contacto. Comience solo pidiendo la información más esencial. Mostrar el formato adecuado para los campos de entrada y usar la validación en línea puede evitar muchos dolores de cabeza. No olvide mostrar un mensaje de confirmación cuando se envíe el formulario.
Lectura adicional
By
