En estos días me ha tocado realizar un proceso para mi empresa October Studio de convertirnos en proveedores del estado. Me he encontrado con mucho “Bad UX” en todas sus expresiones pero con suerte logre completar el proceso hasta que llegué a este formulario. Este formulario es parte del website de compras dominicanas, primero debo mencionar que me habría sido imposible llegar a él sin la asistencia telefónica de una representante. 

La página web en general muestra mucha inconsistencia y la navegación es bastante difícil. El objetivo de este formulario es completar una solicitud de membresía como proveedor del estado. Aclaro que para solicitar este acceso ya debes tener una constancia de que tu empresa está registrada.

Enumere todos los errores que encontré solo en este formulario y más abajo comparto una posible solución, te explico también cómo llegué a esas conclusiones: 

1- Un botón de cancelar: la acción de este botón es dar un paso hacia atrás algo que es totalmente innecesario si estas en una web porque el navegador ya tiene una opción que te permite retroceder.

2- Alineación del formulario: esto es simple, es más difícil leer moviendo la cabeza de izquierda a derecha que manteniendo la mirada fija e ir bajando a medida que completamos un formulario. Para los formularios la mejor forma de lectura es label y campo de arriba hacia abajo.

3- Información sin acción: Esta parte me parece poco necesaria porque en el encabezado del website ya sale mi nombre, yo se que estoy solicitando una membresía y aquí no lo pudiera cambiar si quisiera y poner un estado cuando nunca cambia a otro tampoco me parece útil. El usuario siempre la verá en borrador hasta que no le de a crear.

4- Traducciones: debajo de cada encabezado de las secciones del formulario incluyeron su traducción al inglés. Mi objeción con esto es que si soy una persona que no habla español esto no me sirve de mucho porque el resto del formulario está en otro idioma. Lo mejor seria permitirme traducir todo y no dejarlo a medias.

5- Acciones que no parecen acciones: Cuando el usuario deba hacer clic sobre un elemento en una web debe verse y actuar como tal. Aunque el símbolo más común para adjuntar un archivo es un clip poner solo el icono no representa una acción.

6- Adjuntar archivo de forma externa: aun no entiendo la razón y me gustaría escucharla, pero para adjuntar un archivo esta página abre una nueva ventana. Esto la verdad nunca lo había visto y me parece muy raro cuando ya hay opciones para hacer drag and drop y buscar un archivo en mi computadora.

7- Fecha de solicitud: esto también me pareció innecesario porque entiendo que debería tomar automáticamente la fecha de hoy pero daremos el beneficio de la duda y pensaremos que si es necesario. El problema es que luego probé y me di cuenta que me permitió seleccionar una fecha ¡del 2029!. Simplemente algo anda mal con esto y hay que corregirlo.

8- Dos botones idénticos con acciones distintas: el botón de la esquina superior derecha sirve para  crear un ticket y el de la esquina inferior derecha para enviar la solicitud ya completada. El problema es que visualmente no corresponden a ningún lugar y se ve exactamente iguales.

9- Nombres que no se corresponden: en la tabla de documentos adjuntos dice agregar fecha pero aquí si toma automáticamente la fecha de hoy. Así que aquí no se agrega nada simplemente muestra con qué fecha se cargará el documento.

10- Validaciones que asustan: he mencionado en ocasiones anteriores que el lenguaje negativo hay que evitarlo a toda costa. Cuando una aplicación valida un campo obligatorio que está vacío eso no es un error, no lo llamen así. Con un amable y sutil recordatorio al usuario para que vuelva al campo que dejó sin llenar es suficiente. Todo está bajo control y no hay que hacer un drama con algo que se soluciona fácil.

Mi posible solución

Aquí les dejo un rediseño de las posibles soluciones que se podrían implementar. Dejo claro también que no se rediseña así a la ligera y basado en su propia opinión. Estoy 100% segura que si me siento con un personal de esta institución y entiendo sus proceso este diseño sería totalmente diferente. 

Otra cosa que debes tomar en cuenta al momento de rediseñar una pantalla es que no estás para hacer un rebranding de la marca. Por eso no cambie colores ni tipografía aunque quizás si tiene muchas oportunidades, ese en este momento no es mi trabajo.

¿Tienes algo más que te gustaría añadir? Si encontraste otro error déjalo en los comentarios.