Diseño web: cómo crear formularios para usuarios móviles

Diseño web: cómo crear formularios para usuarios móviles

• Tiempo de lectura: 4 min.Diseño web: cómo crear formularios para usuarios móviles

Bolsillo Facebook Twitter WhatsApp Correo electrónico

Los diseñadores han estado creando formularios para dispositivos móviles durante una década. Afortunadamente, el auge de los teléfonos inteligentes ha llevado directamente al surgimiento de HTML5, lo que permite a los diseñadores crear formularios que son mucho más elegantes de lo que eran en los albores de la era de los teléfonos inteligentes en 2007.

Los problemas específicos que surgen en torno a los formularios móviles no han cambiado significativamente, pero en algunos casos incluso han empeorado. El espacio en un smartphone sigue siendo muy limitado. Eso sí, la diagonal de pantalla de 5,5 pulgadas que es habitual hoy en día y las resoluciones en la gama UHD ofrecen mejores requisitos básicos que las 3,5 pulgadas y 320 x 240 píxeles de los smartphones de la prehistoria.

Incluso en la era de LTE, todavía no podemos confiar en que las conexiones de datos permanezcan estables. Esto puede resultar en problemas de procesamiento en el frontend, es decir, en el dispositivo móvil, así como problemas de procesamiento y/o almacenamiento en el backend. Siempre debe tener en cuenta el peor de los casos y, sobre todo, tener esto en cuenta en el diseño del formulario.

Ciertamente no es una situación que lo invite a completar un formulario. (Foto: Pexels)

Sin embargo, es probable que el mayor problema sea el creciente rechazo de entrada de los usuarios móviles. Introducir datos en un dispositivo móvil, a pesar de las mejoras en los teclados y el aumento de la precisión táctil, no es un tema que se asocie con la diversión. Siempre que se pueda evitar rellenar formularios en el móvil, el usuario medio lo hará.

No te pierdas nada: ¡Suscríbete a la newsletter de t3n! 💌

Por favor, introduzca una dirección de correo electrónico válida.

Lo sentimos, hubo un problema al enviar el formulario. Inténtalo de nuevo.

Por favor, introduzca una dirección de correo electrónico válida.

Nota sobre el boletín & protección de Datos

¡Casi listo!

Haga clic en el enlace del correo electrónico de confirmación para completar su registro.

¿Quieres más información sobre el boletín? Descubre más ahora

Es por eso que los diseñadores deben hacer que sea lo más fácil y agradable posible para los clientes potenciales completar los formularios. Hay algunas formas simples de hacer esto que ya pueden mejorar significativamente los formularios.

Use la menor cantidad posible de campos de formulario

Hay campos separados para el apellido y el nombre. Hay campos separados para calle y número de casa, así como para código postal, ciudad, código de área y número de teléfono. Esos son ocho campos que serían complicados de completar en un dispositivo móvil.

Es mucho más fácil para el usuario reducir el número de campos a cuatro agrupando cosas que pertenecen juntas, es decir, nombre y apellido en un campo, así como calle y número de casa, etc.

En general, debe seguir una dieta estricta, especialmente para los formularios móviles. Muchas preguntas que deben responderse mediante el formulario no son importantes en el primer paso. Por ejemplo, si crea un formulario de incorporación de usuarios, no tiene que pedir la talla de calzado de inmediato. En el caso de que esta información sea realmente importante, también podrá solicitar al usuario que posteriormente complete su perfil al respecto. Mobile solo pedimos lo que es absolutamente inevitable.

Este tema también incluye prescindir de elementos de diseño que son bastante desfavorables para los dispositivos móviles, especialmente los menús desplegables. No se deben utilizar menús desplegables ni listas en formularios móviles. Los dedos no son punteros de ratón y no hay dedos estandarizados en absoluto. Los errores de funcionamiento ya están preprogramados con estos elementos de entrada.

Sigue el ejemplo del estilo de bot moderno

Tenemos mensajeros como Whatsapp para agradecer la consulta en estilo conversacional. Sin embargo, el método tiene algunas ventajas. Al ingresar a un formulario al estilo de una conversación, los usuarios se encuentran en un entorno más o menos familiar. Sin embargo, es importante recordar que una buena conversación no es como un interrogatorio. Así que haces una pregunta, obtienes una respuesta, posiblemente brindes alguna información tú mismo y luego haces la siguiente pregunta. Así es como se abre camino a través del formulario.

Por supuesto, se debe tener cuidado de señalar a los usuarios en todo momento dónde se encuentran en el proceso. Por lo tanto, siempre se recomienda un diseño orientado a la página para el diseño del formulario en lugar de un desplazamiento prolongado.

El estilo conversacional también se presta para tratar el error del usuario. En lugar de una grosera "Contraseña incorrecta", es mejor responder con un mensaje de oración completa, vinculado a una explicación, por ejemplo:

"Lo siento, pero esta contraseña parece ser incorrecta. Si ha olvidado su contraseña, puede hacer que se la envíen de nuevo aquí".

Rellene siempre los campos de formulario con valores predeterminados cuando sea posibleDiseño web: cómo crear formularios para usuarios móviles

Este consejo tiene dos dimensiones. Por un lado, significa que una vez que se han ingresado los datos, siempre se vuelven a usar automáticamente cuando sea posible. Es posible que el cliente ya haya ingresado su nombre para suscribirse al boletín y ahora esté ocupado comprando un libro electrónico. Sería más conveniente si no tuviera que escribir su nombre nuevamente en este punto.

Por otro lado, el prellenado de campos de formulario también se puede realizar a través de los sensores de los dispositivos móviles. Por ejemplo, la ubicación se puede determinar fácilmente. Si creo servicios que incluyen una búsqueda local, como tiendas DHL cercanas, coloco al buscador directamente en un mapa usando GPS que representa el área inmediata, en lugar de atormentarlo con la entrada de un código postal.

La ubicación es instantánea. (Fuente: Shutterstock | Creado por: SydaProductions)

Sin embargo, en el caso de valores precargados, siempre debe proporcionar la opción de sobrescribir estos valores manualmente. Porque, por supuesto, es concebible que el buscador de tiendas de DHL esté buscando a un amigo de la ciudad vecina y no quiera explorar su entorno inmediato.

Conclusión: estos consejos mejorarán sus formularios

Los consejos enumerados aquí mejorarán bastante sus formularios móviles. Según el principio de Pareto, debería poder eliminar el 80 por ciento de los problemas de forma más comunes. Por supuesto, hay otros consejos que, si se implementan, harán que los formularios móviles sean aún mejores, como seguir las recomendaciones de accesibilidad móvil del W3C en general. Sin embargo, eso está más allá del alcance de este artículo.

Fuentes para leer más:

8 prácticas recomendadas para el diseño de formularios móviles | Asuntos de UX

Accesibilidad móvil | Iniciativa de accesibilidad web del W3C

10 métodos para optimizar sus formularios para dispositivos móviles | Revista de diseño Speckyboy

Mejor diseño de formas móviles | Lucas Wroblewski

También te puede interesar esto

Bolsillo Facebook Twitter WhatsApp Correo electrónico

Dieter Petereit

Periodista técnico desde los noventa | dr. Web a.D.

Temas relacionados

Diseño web DHL Libros electrónicos Google Pixel HTML5

No te pierdas nada más: Nuestro boletín

Por favor, introduzca una dirección de correo electrónico válida.

Elija su boletín t3n

+ Seleccionar más

Seleccione al menos un boletín.

Lo sentimos, hubo un problema al enviar el formulario. Inténtalo de nuevo.

Nota sobre el boletín & protección de Datos

¡Casi listo!

Haga clic en el enlace del correo electrónico de confirmación para completar su registro.