Iterando en el diseño de la pantalla de administración de WordPress

La idea de un "proceso iterativo" no es nada nuevo en el desarrollo de software. Está presente en varias metodologías diferentes y probablemente porque funciona bien, especialmente cuando se obtienen comentarios de los clientes.

Uno de los lugares en los que también lo encuentro útil es cuando construyo interfaces de administración para complementos de WordPress.

Para ser claros, no soy diseñador, así que cuando se trata de trabajo de front-end, siempre me remito a la guía de estilo y las maquetas que el diseñador me proporciona desde el principio del proyecto. (Solo menciono esto porque creo que es una práctica que cualquiera que no sea diseñador debería seguir, pero estoy divagando).

Pero cuando se trata de trabajar en pantallas de administración o pantallas de back-end para WordPress, tiendo a seguir una regla estricta: asegúrese de que se vea lo más natural posible.

Entonces, ¿cómo tienen que ver el desarrollo iterativo y la interfaz de las pantallas de administración de WordPress?

Diseño de pantalla de administración de WordPress

Este artículo en particular no habla de las cosas que se esperan para guardar información. Es decir, estoy asumiendo todo:

• desinfección,
• validación,
• cheques instantáneos,
• verificaciones de permisos,

Y los similares son entendidos y manejados.

Para esta publicación, voy a mantenerlo simple. Digamos que queremos tener:

• un par de campos de texto,
• un botón de guardar,
• un botón de reinicio,
• y tal vez algo extra al final.

¿Cómo podría desarrollarse esto a través de un proceso iterativo al diseñarlo?

1 Bocetándolo

Digamos que está trabajando en algo y está planeando cómo se verá la pantalla administrativa. Dado lo que teníamos arriba, tal vez un boceto inicial podría verse así:

Bastante fácil, ¿verdad? Representa lo que el proyecto necesita mantener y muestra todo lo que necesitamos para esta pantalla de administración en particular.

2 Construyéndolo

Una vez ensamblado, debe verse lo más nativo posible. Dados los estilos que tenemos disponibles en WordPress, es relativamente fácil crear esto con las API y el marcado disponibles:

¿Y qué hace cada campo y botón?

3 Refinándolo

Aquí es donde entra en juego el perfeccionamiento de la funcionalidad. Por ejemplo:

• No creo que el botón Guardar deba habilitarse hasta que se completen los campos obligatorios,
• Creo que el botón Restablecer debería borrar lo que está presente,
• Debería haber un cierto grado de mensajes de error que representen lo que debemos hacer cuando algo falla, cuando algo puede no estar bien o algo está completamente mal.

Obviamente, es mucho más fácil hablar de esto cuando no se refiere a un proyecto específico, pero tal vez algunas de las ideas sean aplicables a lo que sea que estés haciendo.

¿Mejoras asincrónicas?

Una de las cosas a las que nos hemos acostumbrado con dispositivos como nuestros teléfonos y ciertas partes de nuestros sistemas operativos es que cuando activamos un interruptor o hacemos un pequeño cambio, los datos se guardan.

Es decir, no se requiere ninguna acción de confirmación (aparte de algo destructivo como eliminar un archivo, por supuesto). Los datos simplemente se guardan y la opción funciona.

Sin embargo, todavía vemos muchos botones Guardar en WordPress, ¿no es así? ¿Qué hay de guardar las entradas a través de Ajax u otro método asincrónico? Esto es algo que aún tengo que implementar, pero ciertamente lo he considerado.