Diseño de formularios para aplicaciones complejas

Desde sistemas ERP complejos hasta redes sociales como Facebook, casi todas las aplicaciones cuentan con formularios para recabar información de los usuarios. Este artículo ilustra 13 maneras distintas de mostrar formularios, y exploramos el futuro de la introducción de datos.

Modal

Las ventanas modales funcionan muy bien en formularios poco complejos e inputs limitados. Los modales, en líneas generales, son fáciles de implementar y suelen simplificar la experiencia de navegación del usuario. Además, evitan que el usuario interactúe con otros elementos de la página que no sea el mismo modal. Si cuentas con un formulario largo y complejo, considera la posibilidad de implementarlo en una página aparte.

Multi-modal

Los formularios multi-modales (no se me ocurre otra palabra para definirlos) se muestran como paneles que se pueden arrastrar, permitiendo al usuario interactuar con múltiples formularios a la vez. Es decir, el usuario puede mover los modales alrededor de la página, permitiéndoles ver la información que se encuentra debajo de ellos. La ventaja de estos multi-modales es que el usuario puede contemplar distinto contenido al mismo tiempo, en lugar de navegar por pestañas, pasos, etc. Pero no todo son ventajas en este diseño de formulario, muchos usuarios novatos pueden perserse y cometer acciones erróneas.

Slideout

Los formularios slideout se muestran en un lateral de la vista de la página web y se aprovechan del scroll de la misma, manteniéndose siempre visibles. Al igual que los formularios modales, este diseño es contextual, permitiendo al usuario acceder a la información desde la vista principal. La ventaja de utilizar este método es que puedes ocupar todo lo alto de la ventana, pudiendo así mostrar formularios más extensos.

Popover

Los formularios popover son ideales para ediciones rápidas. Los popovers se muestran al lado de los datos relacionados por lo que los usuarios no pierden el foco de atención ni su ubicación en su navegación con la aplicación.

Inline

Los formularios inline permiten a un usuario crear entradas simples y editar directamente datos concretos sin tener que ser redirigidos a otra página. Los formularios inline, por lo general, se abren desde el típico menú de Edición Rápida y guardan automáticamente los cambios a medida que el usuario interactúa con sus campos.

Tabla editable

Al igual que los formularios inline, las tablas editables permiten a los usuarios manipular los datos directamente desde donde se muestran. Son ideales para listados presentados en tablas, tales como hojas de cálculo o las líneas de una factura.

Takeover

Los formularios takeover otorgan la oportunidad al usuario de interactuar con formularios complejos, más que nada porque siempre cuentan con la capacidad de volver a pasos anteriores. Los takeovers son ideales para ingresar datos a nivel de sistema que no necesitan una vista posterior.

Wizard

Los formularios Wizard permiten ingresar datos de manera secuencial, es decir, paso por paso. Los formularios Wizard son ideales para formularios complejos que los usuarios no volverán a completar nunca jamás. Se deben utilizar cuando un usuario necesite completar un proceso desconocido. ¿Lo peor? Su experiencia de navegación es paupérrima para formularios que se utilicen bastante.

Formulario seccionado

Los formularios seccionados son geniales para introducir información compleja. El usuario se beneficia se tener el contexto completo del formulario, en lugar de un formulario multi-página como los wizards. Es decir, el usuario es libre de rellenar la información que el considere necesaria libremente, sin tener que hacer de manera lineal, lo que le ofrece una mayor flexibilidad.

Drag & Drop

Aunque no es un formulario muy común, los editores drag & drop permiten a los usuarios seleccionar input predefinidos y arrastrarlos a sus presentación WYSIWYG. Debido a que imita una interacción que realizamos en el mundo físico, añade un toque de diversión al hecho de completar un formulario.

WYSIWYG

Lo que puedes ver en esta línea se puede realizar en editores de texto como Microsoft Word, gestores de correo electrónico como MailChimp, editores de sitios web como SquareSpace, etc. Los editores WYSIWYG permiten al usuario crear contenido enriquecido son tener conocimientos de HTML, CSS o JS.

Rellenar espacios en blanco

Este tipo de formulario, es un formulario típico en la vida real extrapolado al diseño de formulario en las aplicaciones. Se trata de rellenar los espacios en blanco (campos inputs) presentes en una frase o un párrafo, permitiendo al usuario completar la declaración con sus datos. Es ideal para contratos e información sensible.

Interfaces conversacionales

Las intefaces conversacionales o CUI consisten en un bot que responde a las entradas de voz o texto de forma libre. El bot responde o proporciona un mayor control para hacer frente a las solicitudes del usuario. Se emplea el aprendizaje automático para interpretar mejor las respuestas y adaptarse.

Fuente: uxdesign.cc

Guardar

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP