Mejora y cambio de procesos en el diseño de interfaz

Los procesos de diseño de Nursoft al momento de diseñar interfaces tienen un proceso definido que nos permite entregar el mejor resultado.

Básicamente consta de 4 etapas definidas a continuación:

UI Spec (user interface specifications document)

Este documento tiene como objetivo principal permitir visualizar un borrador de la aplicación y ponerlo por escrito para que el equipo pueda leerlo, proponer ideas y modificarlo. La característica fundamental que debe tener este documento es que sea simple. Esto puede ser complejo, el concepto de que el diseño sea simple o “menos complicado” solo puede llegar a definirse en su totalidad en etapas posteriores de iteraciones constantes.

El formato del UI Spec debe contener todas las posibles vistas/páginas del software, incluyendo sus funcionalidades y características importantes. La idea es que todo el equipo pueda editar/modificar/comentar fácilmente. Una herramienta como Google Docs es ideal para estas cosas.

UX Flowchart

El UX Flowchart o diagrama de flujo describe la experiencia de usuario (UX) a través de la aplicación en detalle. Aquí es donde los ingenieros y lo diseñadores deben trabajar en estrecha colaboración para decidir qué tipo de herramientas de software puede apoyar mejor las interfaces previstas y definir cosas como donde se hará clic y por qué, qué tipo de comportamientos tendrá (por ejemplo swipe o drag), que iconos se requieren, etc.

Un ejemplo de flujograma propuesto por Startup Rocket es el siguiente

En este ejemplo, cada uno de los tipos de flecha representa una decisión crítica que tiene que ser discutida y analizada.

  • Las flechas de color azul representan transiciones normales de página a página. Estas son experiencias de usuario relativamente lentas.

  • Las flechas de color lavanda representan las transiciones que atraen el contenido del back.end o servidor y lo presentan como se desea.

  • Las flechas discontinuas de color café representan eventos JavaScript en la página, como un modal, lightbox, ventanas que se despliegan, pestañas nuevas, etc.
  • Las cajas amarillas (nodos) representan nuevas páginas o elementos de la UX.

Wireframe

Basándose en el UI Spec y el UX Flow Chart se asegura que el diseño del wireframe cumpla con todos los requerimientos necesarios para el diseño de la interfaz. En mi experiencia trabajando en wireframes puedo asegurar que, en general, cuanto más trabajo a conciencia y en detalle se haga, en este periodo, mejor. Mientras antes surjan las dudas y las respuestas dentro del proceso de diseño será mejor a la larga, cambiar o modificar el wireframe es inmensamente más sencillo, y menos demoroso, que alterar los mockups.

El objetivo principal de los wireframes es que el equipo presente sugerencias generales, comentarios y cambios pertinentes. Es importante destacar que en este periodo los detalles visuales puntuales no deben ser el tema central, sino la distribución general y la grilla del software, además de los temas más relacionados a funcionalidad y experiencia de usuario.

Mockups

La creación y desarrollo de los mockups debe seguir las pautas anteriormente planteadas, debe regirse por lo acordado en el UI Spec, UX Flowchart y el wireframe.

Algunos diseñadores trabajan los mockups primero en escala de grises, para centrarse en forma y figura primero, para posteriormente hacer un bajada al color.

Lo más importante que se busca en los mockups es que todos los elementos diseñados estén en su lugar, sabiendo que el número exacto, funcionalidades, enlaces, botones, etc, puede ser cambiado fácilmente debido a limitantes técnicas, iteraciones con el equipo o el mismo usuario mediante pruebas de usabilidad. El equipo necesita estar de acuerdo en la jerarquía visual,es decir, lo que el ojo de un usuario ve primero, y esto necesita ser traducido claramente en la mockup.

Si bien estos procesos en primera instancia hacen pensar que hacen más lento el proceso de diseño, agregando varias etapas previo al diseño de mockups, a la larga reducen enormemente tiempos al evitar problemas relacionados a malas planeaciones. Tomar todas las decisiones en conjunto y paso a paso para que todo el equipo siempre esté al tanto es la mejor forma de reducir tiempos de diseño y producción.