Diseñar formularios adecuados para móviles

En el artículo Better Form Inputs for Better Mobile User Experiences nos muestra una serie de recomendaciones para optimizar los formularios para webs usadas en teléfonos móviles. Un recurso muy útil. Básicamente, usa los elementos de formularios adecuados a los tipos de datos que va a contener, así se mostrará un teclado mucho más útil. Y no estaría mal que también lo tuvieran en cuenta los desarrolladores de aplicaciones móviles, porque hay casos que avergüenzan.

Y no puedo evitar recordar algo que se hizo bien en XHTML 1.1 Basic, como ya contaba hace algunos años en Web móvil y campos de texto en formularios.

Patrones de diseño móvil: los teléfonos se usan con una mano

¿Cómo se interacciona con los teléfonos móviles? Las observaciones nos dicen que con una sola mano:

¿Cómo se debería diseñar una aplicación o web móvil? Teniendo en cuenta el contexto de uso.

Hay un artículo cuya lectura y estudio es muy recomendable. Aunque trata sobre aplicaciones móviles, creo que muchas de las conclusiones y recomendaciones que hacen pueden, como poco, tomarse en consideración también en el diseño web móvil: How To Design Mobile Apps For One-Hand Usage.

El artículo plantea una serie de comportamientos y patrones, para luego presentar unas recomendaciones.

common user behaviors and UX patterns
* Navigation UX Patterns
* Designing For Actions
* Shopping, Transactional And Checkout Flow Design Patterns
* Searching, Sorting, And Filtering Pattern
* Input And Interaction Patterns
* Miscellaneous Patterns

How To Design Mobile Apps For One-Hand UsageMaitrik Kataria

Teniendo en cuenta que en ocasiones, se interactúa con el teléfono únicamente con el pulgar, nos podemos imaginar las zonas más accesibles y las más complejas para acceder en una pantalla (recuerda los zurdos).

El artículo contiene algunas ilustraciones (extraídas del primer enlace) que muestran de un vistazo algunos resultados destacables.

Tal vez tengamos que dejar de definir pantallas con un ordenador, y empezar a hacerlo con una libreta 😉