1

Caso de Estudio: Diseo de la Interfaz de SG Gua

A inicios del 2009 el staff de SG nos present la posibilidad de realizar el diseo de interfaz
para su nuevo proyecto: SG Gua, una herramienta para ayudar a los profesionistas de TI a
encontrar los productos y servicios relacionados con el desarrollo de software. 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 colaboracin en este proyecto consisti en desarrollar la arquitectura de
informacin as como el diseo grfico de la interfaz, mientras que la implementacin en la
herramienta de administracin de contenido fue realizadas por el equipo de SG. Dicho sea
de paso, las oficinas de SG se encuentran en la Ciudad de Mxico y gelattina est basada
en Monterrey, por lo que trabajar a distancia solamente hizo el proyecto an ms
atractivo!
SG Gua ya se encuentra disponible en www.sg.com.mx/guia por si quieres echarle un
vistazo para que puedas entender mejor este artculo.
La pre-produccin
Notamos una gran ventaja de trabajar con el equipo de SG puesto que tienen muy buenas
prcticas de documentacin de requerimientos. Para el anlisis inicial SG nos proporcion
documentacin con su visin del proyecto, un modelo de dominio, detalle de actores y
casos de uso del sitio.
Toda esa informacin es muy valiosa pues en todo proyecto de diseo de interfaz, es
sumamente importante entender quien ser el usuario final de la aplicacin, para as,
poder lograr satisfacer sus necesidades en trminos de usabilidad.
Para este proyecto, los dos pblicos 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 administracin de
contenido. Es importante tomar en cuenta la plataforma de desarrollo para disear la
interfaz de acuerdo a los requerimientos tcnicos. Para este proyecto se seleccion Drupal
(www.drupal.org) y es parte de nuestra responsabilidad conocer las mejores prcticas de
diseo para dicha plataforma.

2
Para crear una interfaz de usuario eficiente
1. Brief Creativo
Este documento nos ayuda a definir las necesidades del negocio y los resultados deseados
del diseo. El brief tambin ayuda a recabar la informacin relacionada con la identidad
corporativa de la compaa, tecnologas a utilizar en el proyecto, listar requerimientos
estticos, proyectos competidores y dar un panorama general de los contenidos a publicar.
SG fue muy especfico en sus requerimientos por lo que desde un inicio, qued muy clara
la expectativa que tenamos que cumplir.
2. Arquitectura de informacin
Durante esta etapa, el arquitecto de informacin clasifica el contenido y busca crear un
men de navegacin optimizado. El resultado que se obtiene es el mapa del sitio que ser
clave para la etapa de diseo.
En esta etapa es bueno realizar un benchmark entre proyectos similares para aprender e
identificar los elementos que mejor puedan servirnos. Un men de navegacin bien
planeado es crtico para lograr una buena usabilidad ya que el usuario final no debe
pensar demasiado para identificar donde podra estar la informacin que busca.
La SGua originalmente contemplaba que las 4 categoras principales fueran parte de la
opcin del men Categoras. En el inters de facilitar la navegacin al usuario, se opt
por desplegarlas como parte del men principal. Adems del men de navegacin
principal, se plantearon una serie de elementos que no son propiamente parte de la
navegacin pero que sirven como ayuda al usuario, por ejemplo, el listado alfabtico de
todas las empresas registradas ubicado en la columna derecha.
Finalmente el arquitecto de informacin realiza los wireframes (representacin
sin elementos grficos que muestran contenido y comportamiento de las pginas) de la
portada e interiores ya que sirven como herramienta de discusin entre l y los
programadores, diseadores y cliente. Los wireframes son particularmente tiles durante
la etapa de planeacin ya que dejarn claro qu elementos se planean incluir en la
interfaz.
3. Diseo grfico
Las dos etapas anteriores nos dan la suficiente informacin para que el diseador realice la
mejor interfaz posible totalmente orientada al pblico del sitio. En esta etapa el diseador
realiza tambin su propio benchmarking enfocado en buscar las soluciones grficas que
sirvan mejor al sitio.

3
Con un mapa de sitio claro, wireframes bien definidos, conocimiento del perfil del usuario
final y una idea clara del contenido, el diseador tiene todo lo que necesita para crear la
interfaz. Como vers, no es slo cuestin de sentarse a disear si no existe todo un
proceso de planeacin detrs!
Para poder replicar la experiencia del usuario comn de la SG Gua, el equipo grfico de
gelattina dise 9 pantallas que mostraban el recorrido de un usuario desde la portada del
sitio hasta que encontrara la informacin de un producto en particular, ya sea por
navegacin directa o haciendo uso del buscador.
Durante la sesin de revisin con SG validamos que todos los elementos propuestos fueran
viables tcnicamente y que no hubiera alguna restriccin tcnica de Drupal para poder
implementarlos.
4. Maquetacin
Una vez aprobado el diseo, el equipo de desarrollo pudo entrar en accin para maquetar
las plantillas de acuerdo a los estndares web, es decir, con XHTML, CSS. Adicionalmente,
se integr jQuery al cdigo, un framework de JavaScript que en este proyecto se utiliz
entre otras cosas, para darle un movimiento especfico a los conos de portada.
5. Integracin con Administrador de Contenido
La integracin del diseo con Drupal, fue ejecutada por el equipo de desarrollo de SG y
gelattina apoy proporcionando las plantillas y los elementos complementarios que la
aplicacin fue requiriendo.
6. QA & Testing
La fase final previa a la publicacin incluye la revisin del diseo buscando
asegurar que haya sido integrado correctamente con el administrador de contenido y que
el concepto original se haya respetado al mximo. Una parte fundamental antes de
publicar cualquier sitio es el beta testing no slo de la interfaz, sino del proyecto completo
para asegurarse de que no haya enlaces rotos, imgenes y textos fuera de lugar, etc.
Dependiendo del tiempo y el presupuesto, es recomendable hacer usability testing para
refinar la interfaz con la retroalimentacin de usuarios reales, adems de hacer una
optimizacin del sitio para buscadores, aunque ambos temas los dejaremos para futuros

4
artculos.

La prueba de la cajuela
Durante las etapas de diseo y QA tomamos en cuenta la prueba de la cajuela. Lo que
sucede es que solemos pensar que la navegacin de un sitio empieza desde la pgina
principal. Sin embargo, la mayora de las veces los buscadores dirigen a los usuarios a
partes especficas en el interior del sitio, por lo que es importante asegurarnos de que el
visitante podr ubicarse al llegar a cualquiera de nuestras pginas.
La prueba de la cajuela (trunk test) fue creada por Steve Krug y consiste en una
evaluacin sencilla para determinar si un sitio tiene una buena interfaz sin importar en que
pgina se encuentre el usuario. La idea es esta: imagina que te meten a la cajuela de un
carro y te dan muchas vueltas para desubicarte y al final eres liberado en una pgina
interior del sitio web a evaluar.
Si la pgina est bien diseada deberas ser capaz de responder a estas preguntas sin
dudarlo:
Qu sitio es este?
En qu pgina estoy?
Cules son las secciones principales de este sitio?

5
Cules son mis opciones en este nivel?
Dnde estoy?
Cmo puedo realizar una bsqueda?
Esta prueba sencilla nos ayuda a mantener en mente conceptos esenciales para facilitar
no solo la navegacin si no la interaccin del usuario con nuestro sitio.
Conclusin
La creacin de un proyecto web, cualquiera que sea su tamao, que busque ser exitoso
requerir de un buen trabajo de integracin tanto en la parte tecnolgica como en la
interfaz del usuario. Para eso se requiere de un equipo multidisciplinario con experiencia
en las reas de usabilidad, arquitectura de informacin, diseo grfico y desarrollo de
aplicaciones. Mientras ms se utilice la empata con el usuario y se combine el
conocimiento de sus hbitos, mayor probabilidad tendr de xito el proyecto. SG Gua fue
creada para cumplir con las necesidades de los lectores de esta revista, por lo que te invito
a conocer el sitio y utilizarlo. Si tienes algn comentario que pueda mejorarla, lo
recibiremos con gusto.
Preguntas sobre el caso de estudio
1. Sobre qu trataba el proyecto?
2. En el proyecto, Qu faces se siguieron?
3. Segn el criterio del autor, cuales faces brindan la informacin necesaria para
el diseo Grfico?
4. Cul fase permite asegurar que todo el proyecto est integrado y no existan
errores?
5. En qu consiste la prueba de la cajuela?
6. En el diseo de un sitio web, qu preguntas deben responder las pginas a las
que se puede accesar?
7. Qu reas interviene en la creacin de un sitio web?