Published 14 years ago
(updated 12 years ago)
A inicios del 2009 el staff de SG nos presentó la posibilidad de realizar el diseño de interfaz para su nuevo proyecto: SG Guía, 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 colaboración en este proyecto consistió en desarrollar la arquitectura de información así como el diseño gráfico de la interfaz, mientras que la implementación en la herramienta de administración de contenido fue realizadas por el equipo de SG. 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!
SG Guía ya se encuentra disponible en www.sg.com.mx/guia por si quieres
echarle un vistazo para que puedas entender mejor este artículo.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ó documentación con su visión del proyecto, un modelo de dominio, detalle de actores y 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 seleccionó Drupal (www.drupal.org) y es parte de nuestra responsabilidad conocer las mejores prácticas de diseño para dicha plataforma.
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 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 qué 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 enfocado 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 SG Guía, el equipo gráfico de gelattina diseñó 9 pantallas que mostraban 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 específico a los íconos 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
asegurar que haya sido integrado correctamente con el administrador de contenido y que el concepto original se haya respetado al máximo. Una parte fundamental antes de publicar cualquier sitio es el beta testing no sólo de la interfaz, sino del proyecto completo para asegurarse de que no haya enlaces rotos, imágenes y textos fuera de lugar, etc. Dependiendo del tiempo y el presupuesto, es recomendable hacer usability testing para refinar la interfaz con la retroalimentación de usuarios reales, además de hacer una optimización del sitio para buscadores, aunque ambos temas los dejaremos para futuros artículos.
La prueba de la cajuela
Durante las etapas de diseño y QA tomamos en cuenta la “prueba de la cajuela”. Lo que sucede es que solemos pensar que la navegación de un sitio empieza desde la página principal. Sin embargo, la mayoría de las veces los buscadores dirigen a los usuarios a partes específicas en el interior del sitio, por lo que es importante asegurarnos de que el visitante podrá ubicarse al llegar a cualquiera de nuestras paginas.
La prueba de la cajuela (trunk test) fue creada por Steve Krug y consiste
en una evaluación sencilla para determinar si un sitio tiene una buena interfaz sin importar en que pagina 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 página interior del sitio web a evaluar.
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 realizar una búsqueda?
Esta prueba sencilla nos ayuda a mantener en mente conceptos esenciales
para facilitar no solo la navegación si no la interacción del usuario con nuestro sitio.
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. Para eso se requiere de un equipo multidisciplinario con experiencia en las áreas de usabilidad, arquitectura de información, diseño gráfico y desarrollo de aplicaciones. Mientras más se utilice la empatía con el usuario y se combine el conocimiento de sus hábitos, mayor probabilidad tendrá de éxito el proyecto. SG Guía 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 algún comentario que pueda mejorarla, lo recibiremos con gusto.
Acerca del Autor
Romeo Márquez es fundador de gelattina, una agencia especializada en Web 2.0, diseño de interfaces, Marketing Digital, Social Media, Widgets y Video para Web. Adicionalmente es miembro de la Usability Professionals Association. Para gelattina, ha dirigido proyectos de diseños de interfaces para The Home Depot, Coca-cola, Banorte, Banregio, JackBe, Hoteles Marriott, ABA Seguros entre otros. Puedes seguirme en Twitter en @RomeoMarquez y @gelattina www.gelattina.com romeo@gelattina.com +52.81.8115.6150
Nuestra colaboración en este proyecto consistió en desarrollar la arquitectura de información así como el diseño gráfico de la interfaz, mientras que la implementación en la herramienta de administración de contenido fue realizadas por el equipo de SG. 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!
SG Guía ya se encuentra disponible en www.sg.com.mx/guia por si quieres
echarle un vistazo para que puedas entender mejor este artículo.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ó documentación con su visión del proyecto, un modelo de dominio, detalle de actores y 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 seleccionó Drupal (www.drupal.org) y es parte de nuestra responsabilidad conocer las mejores prácticas de diseño para dicha plataforma.
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 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 qué 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 enfocado 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 SG Guía, el equipo gráfico de gelattina diseñó 9 pantallas que mostraban 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 específico a los íconos 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
asegurar que haya sido integrado correctamente con el administrador de contenido y que el concepto original se haya respetado al máximo. Una parte fundamental antes de publicar cualquier sitio es el beta testing no sólo de la interfaz, sino del proyecto completo para asegurarse de que no haya enlaces rotos, imágenes y textos fuera de lugar, etc. Dependiendo del tiempo y el presupuesto, es recomendable hacer usability testing para refinar la interfaz con la retroalimentación de usuarios reales, además de hacer una optimización del sitio para buscadores, aunque ambos temas los dejaremos para futuros artículos.
La prueba de la cajuela
Durante las etapas de diseño y QA tomamos en cuenta la “prueba de la cajuela”. Lo que sucede es que solemos pensar que la navegación de un sitio empieza desde la página principal. Sin embargo, la mayoría de las veces los buscadores dirigen a los usuarios a partes específicas en el interior del sitio, por lo que es importante asegurarnos de que el visitante podrá ubicarse al llegar a cualquiera de nuestras paginas.
La prueba de la cajuela (trunk test) fue creada por Steve Krug y consiste
en una evaluación sencilla para determinar si un sitio tiene una buena interfaz sin importar en que pagina 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 página interior del sitio web a evaluar.
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 realizar una búsqueda?
Esta prueba sencilla nos ayuda a mantener en mente conceptos esenciales
para facilitar no solo la navegación si no la interacción del usuario con nuestro sitio.
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. Para eso se requiere de un equipo multidisciplinario con experiencia en las áreas de usabilidad, arquitectura de información, diseño gráfico y desarrollo de aplicaciones. Mientras más se utilice la empatía con el usuario y se combine el conocimiento de sus hábitos, mayor probabilidad tendrá de éxito el proyecto. SG Guía 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 algún comentario que pueda mejorarla, lo recibiremos con gusto.
Acerca del Autor
Romeo Márquez es fundador de gelattina, una agencia especializada en Web 2.0, diseño de interfaces, Marketing Digital, Social Media, Widgets y Video para Web. Adicionalmente es miembro de la Usability Professionals Association. Para gelattina, ha dirigido proyectos de diseños de interfaces para The Home Depot, Coca-cola, Banorte, Banregio, JackBe, Hoteles Marriott, ABA Seguros entre otros. Puedes seguirme en Twitter en @RomeoMarquez y @gelattina www.gelattina.com romeo@gelattina.com +52.81.8115.6150
- Log in to post comments