{ida Workshop

Del contenido a los wireframes y al diseño de interfaz

Tras nuestro workshop “De la arquitectura al diseño: ¿Cómo jerarquizamos la información en pantalla?”, hicimos una revisión sobre los elementos iniciales que nos permiten jerarquizar la información antes del mapa de contenidos.

Logramos entender el valor que tiene en nuestros proyectos, la información y los mensajes que dispone para un usuario. Sabemos que cuando comenzamos a desarrollar una nueva plataforma, debemos entregar contenidos jerarquizados y priorizados, que permitan encontrar un valor tras cada disposición y formato.

Para lograr esta misión, debemos encontrar esta información desplegada de forma lógica y sencilla. Ese es un trabajo exclusivo de los mapas de contenido y wireframes. Dos herramientas que detallaremos a continuación.

El mapa de contenido

Combinando toda la información obtenida de etapas anteriores – es decir, con el uso del inventario y cardsorting- creamos un mapa de árbol en el que ordenamos los contenidos en base a la jerarquía creada. Separaremos los niveles de navegación y marcaremos las relaciones directas e indirectas con flechas.

Este ejercicio reflejará por primera vez la magnitud real del proyecto que tenemos frente a nosotros.

Un buen mapa debe graficar todas las relaciones de jerarquía y así permitir al equipo elaborar los escenarios de comportamiento de los usuarios; determinando la estructura de navegación de las personas a través del sitio o servicio online.

Además debemos contemplar las características por las que un mapa de contenido es importante para nuestra organización:

Tiene un rol en la comunicación

1. Es lenguaje transversal entre los equipos asociados al proyecto
2. Debe iniciar una conversación objetiva respecto al sitio web
3. Es el primer entregable formal de un nuevo diseño. Es concreto

Da sentido

1. Dimensiona y acota el proyecto ya que delimita claramente su magnitud
2. Muestra relaciones por afinidad, no solamente por jerarquía
3. Distingue entre tipos de elementos, como página de contenido y formulario

Permite proyección

1. Proyecta el crecimiento del sitio, dejando claro dónde puede crecer
2. Detecta plantillas especiales o puntos sensibles, como transacciones
3. Debe ser coherente con la futura base de datos

La información que vayamos recolectando a través de este proceso nos permitirá ir priorizando los puntos clave y tomar mejores decisiones de cara a los siguientes pasos. Etapas en las que comenzaremos a acercarnos al diseño de nuestras interfaces de manera incipiente.

Identificar el contenido más relevante

Debemos notar que hay páginas que son más importantes que otras, ya sea por su contenido o porque tienen necesidades especiales. Por ejemplo, determinar cuándo se requiere o no de un formulario. En los casos en que necesitemos una página simple de texto, la determinaremos como plantilla y se usará en diferentes opciones del sitio.

Por lo tanto, en esta etapa diferenciamos todos los tipos de páginas que componen nuestro mapa. Al finalizar este paso, deberíamos tener una lista con las plantillas para hacer los wireframes de cada una. Preferiblemente con anotaciones sobre las cualidades que las distinguen entre sí.

Wireframes: Estructura de pantallas

La premisa sobre la que debemos abordar esta última etapa de la Arquitectura de información es la siguiente: “un wireframe es un esquema que nos permite trabajar divisiones de pantalla” y se debe hacer cargo de traducir cómo se vería en la pantalla un mapa de contenidos.

Estas divisiones son estructuras de pantalla que se mantendrán de forma permanente en el sitio con pequeñas modificaciones según las necesidades de cada contenido. Es la primera instancia de representación visual donde jerarquizamos la información y distribuimos el contenido con el que los usuarios interactúan.

Cuando comenzamos con su elaboración nos preguntamos ¿Cuántos wireframes serán necesarios? Y la respuesta es, “los que deban hacerse”. Sin embargo, existen criterios que debemos considerar para comenzar este proceso. Estos criterios son:

• Tipos de contenido
• Variaciones
• Interacciones definidas
• Casos borde
• Páginas tipo

De este modo, un set de wireframes nos permiten visibilizar las interacciones que deberá contener cada página o plantilla. Lo que evidencia en primera instancia los componentes de un flujo de interacción.

Generalmente siempre es correcto implementar este tipo de herramientas. Más aún cuando partimos con un proyecto desde cero. Si se realizan de forma correcta, veremos facilitadas tareas posteriores en los procesos de diseño y desarrollo web.

Primeros pasos

Existen diferentes tipos de wireframes, y tener clara su funcionalidad nos permitirá avanzar progresiva y positivamente en nuestros proyectos. Si quieres comenzar a ejercitar hacer este ejercicio por primera vez, te recomendamos iniciar con un wireframe en lápiz y papel.

También existen diferentes softwares online en los que puedes trabajar con plantillas y desarrollar cada una de tus páginas. Para saber cómo realizar este proceso, vuelve a ver nuestro {ida workshop “De la arquitectura al diseño” o revisa “Métodos de co-diseño UX” en nuestro canal de YouTube.