El siguiente artículo fue escrito por Romeo Márquez para la revista Software Guru, el cual puede ser consultado aquí
A inicios del 2009 el staff de Software Gurú nos presentó a Gelattina la posibilidad de realizar el diseño de interfaz para su nuevo proyecto: SGuía, una herramienta creada para ayudar a los profesionistas de TI a encontrar los productos y servicios que le apoyen a desarrollar software de alta calidad.
El proyecto nos pareció muy interesante y a la vez vimos una buena oportunidad de documentar el proceso para compartirlo con los lectores de SG.
Nuestra colaboración en el proyecto se enfocó a desarrollar la arquitectura de información así como el diseño gráfico de la interfaz mientras que la integración con la administración de contenido fueron realizadas por el equipo de Software Gurú.
Dicho sea de paso, las oficinas de SG se encuentran en la Ciudad de México y gelattina está basada en Monterrey, por lo que trabajar a distancia solamente hizo el proyecto aun más atractivo!
La pre-producción
Notamos una gran ventaja de trabajar con el equipo de SG puesto que tienen muy buenas prácticas de documentación de requerimientos. Para el análisis inicial SG nos proporcionó su visión del proyecto, un modelo de dominio, actores o usuarios y los casos de uso del sitio.
Toda esa información es muy valiosa pues en todo proyecto de diseño de interfaz, es sumamente importante entender quien será el usuario final de la aplicación, para así, poder lograr satisfacer sus necesidades en términos de usabilidad.
Para este proyecto, los dos públicos principales son:
1) Profesionales de IT en busca de servicios
2) Proveedores buscando promover sus productos
Otro aspecto clave tiene que ver con el conocimiento del sistema de administración de contenido. Es importante tomar en cuenta la plataforma de desarrollo para diseñar la interfaz de acuerdo a los requerimientos técnicos. Para este proyecto se selecciónó Drupal y es parte de nuestra responsabilidad conocer las mejores prácticas de diseño para dicha plataforma.
Los 6 pasos con los que se creó la interfaz de usuario de SGuía
1. Brief Creativo
Este documento nos ayuda a definir las necesidades del negocio y los resultados deseados del diseño.
El brief también ayuda a recabar la información relacionada con la identidad corporativa de la compañía, tecnologías a utilizar en el proyecto, listar requerimientos estéticos, proyectos competidores y dar un panorama general de los contenidos a publicar.
SG fue muy específico en sus requerimientos por lo que desde un inicio, quedó muy clara la expectativa que teníamos que cumplir.
2. Arquitectura de información
Durante esta etapa, el arquitecto de información clasifica el contenido y busca crear un menú de navegación optimizado. El resultado que se obtiene es el mapa del sitio que será clave para la etapa de diseño.
En esta etapa es bueno realizar un benchmark entre proyectos similares para aprender e identificar los elementos que mejor puedan servirnos.
Un menú de navegación bien planeado es crítico para lograr una buena usabilidad ya que el usuario final no debe pensar demasiado para identificar donde podría estar la información que busca.
La SGuía originalmente contemplaba que las 4 categorías principales fueran parte de la opción del menú “Categorías”. En el interés de facilitar la navegación al usuario, se optó por desplegarlas como parte del menú principal.
Además del menú de navegación principal, se plantearon una serie de elementos que no son propiamente parte de la navegación pero que sirven como ayuda al usuario, por ejemplo, el listado alfabético de todas las empresas registradas ubicado en la columna derecha.
Finalmente el arquitecto de información realiza los Wireframes (representación sin elementos gráficos que muestran contenido y comportamiento de las páginas) de la portada e interiores ya que sirven como herramienta de discusión entre él y los programadores, diseñadores y cliente.
Los wireframes son particularmente útiles durante la etapa de planeación ya que dejarán claro que elementos se planean incluir en la interfaz.
3. Diseño gráfico
Las dos etapas anteriores nos dan la suficiente información para que el diseñador realice la mejor interfaz posible totalmente orientada al público del sitio.
En esta etapa el diseñador realiza también su propio benchmarking con un enfoque en buscar las soluciones gráficas que sirvan mejor al sitio.
Con un mapa de sitio claro, wireframes bien definidos, conocimiento del perfil del usuario final y una idea clara del contenido, el diseñador tiene todo lo que necesita para crear la interfaz. Como verás, no es sólo cuestión de sentarse a diseñar si no existe todo un proceso de planeación detrás!
Para poder replicar la experiencia del usuario común de la SGuía, el equipo gráfico de gelattina diseñó 9 pantallas que mostraran el recorrido de un usuario desde la portada del sitio hasta que encontrara la información de un producto en particular ya sea por navegación directa o haciendo uso del buscador.
Durante la sesión de revisión con SG validamos que todos los elementos propuestos fueran viables técnicamente y que no hubiera alguna restricción técnica de Drupal para poder implementarlos.
4. Maquetación
Una vez aprobado el diseño, el equipo de desarrollo pudo entrar en acción para maquetar las plantillas de acuerdo a los estándares Web, es decir, con XHTML, CSS.
Adicionalmente, se integró jQuery al código, un Framework de JavaScript que en este proyecto se utilizó entre otras cosas, para darle un movimiento especifico a los iconos de portada.
5. Integración con Administrador de Contenido
La integración del diseño con Drupal, fue ejecutada por el equipo de desarrollo de SG y gelattina apoyó proporcionando las plantillas y los elementos complementarios que la aplicación fue requiriendo.
6. QA & Testing
La fase final previa a la publicación incluye la revisión del diseño buscando asegurarse de que haya sido integrado correctamente con el administrador de contenido
Una parte fundamental antes de publicar cualquier sitio es el beta testing no solo a la interfaz, sino adicionalmente al proyecto completo.
Dependiendo del tiempo y el presupuesto, es recomendable hacer usability testing.
La prueba de la Cajuela
La prueba de la cajuela (Trunk test) fue creada por Steve Krug -experto en usabilidad- y consiste en una evacuación sencilla para determinar si un sitio tiene una buena interfaz.
Solemos pensar que la navegación de un sitio empieza desde la página principal. Sin embargo, los buscadores suelen dirigirnos a partes específicas en el interior del sitio
Imagina que te meten a la cajuela de un carro y te dan muchas vueltas y al final te avientan a una página interior de un sitio Web.
Si la página está bien diseñada deberías ser capaz de responder a estas preguntas sin dudarlo:
¿Qué sitio es este?
¿En que página estoy?
¿Cuáles son las secciones principales de este sitio?
¿Cuáles son mis opciones en este nivel?
¿Dónde estoy?
¿Cómo puedo buscar?
Conclusión
La creación de un proyecto Web -cualquiera que sea su tamaño- que busque ser exitoso requerirá de un buen trabajo de integración tanto en la parte tecnológica como en la interfaz del usuario.
Mientras más se utilice la empatía con el usuario y se combine el conocimiento de sus hábitos de navegación, mayor probabilidad tiene de éxito el proyecto.
La SGuia fue creada para cumplir con las necesidades de los lectores de esta revista, por lo que te invito a conocer el sitio, utilizarlo y enviarme cualquier comentario o retroalimentación!
Recientemente fuimos invitados a dar un taller para el congreso Identidades en Construcción, organizado por los alumnos de la carrera de Relaciones Internacionales del Tec de Monterrey.
!
Follow us all around the Web
It's easy, just click here