Arquitectura de información
Repositorio de recursos para la creación de wireframes
Dentro de la arquitectura de información y la creación de prototipos digitales (aplicaciones, sitios web, landings, etc) siempre es útil contar con un repositorio o banco de elementos que puedan ser reutilizados para no comenzar desde cero cada vez que tenemos un nuevo proyecto.
La utilidad de “normar” u “ordenar” estos elementos no implica que la estructura o la creación de los wireframes sea rígida y no podamos adaptarlos, sino que apunta a tener una base estándar desde la cual comenzar, que nos permita ordenar las distintas versiones y visualizaciones de un mismo proyecto.
Por ejemplo, al crear una plantilla de un sitio para escritorio, se requiere además la realización de su vista móvil y/o tablet. En ese traspaso muchas veces las jerarquías de títulos se pierden o los elementos varían a tal punto que pueden confundir a quien utiliza los wireframes como guía (generalmente el diseñador de interfaz o al desarrollador).
Elementos de un wireframe que se deben considerar
En IDA realizamos nuestro propio repositorio y trabajamos continuamente para mantenerlo actualizado. En él puedes encontrar los siguientes elementos:
Encabezados
Corresponde a recomendaciones de tamaños tipográficos y sus variaciones al transformarse el tamaño de la pantalla. Cada proyecto puede variar estas características pero el comportamiento y las jerarquías de los títulos y elementos de texto debe ser consecuente transversalmente en el sitio o software.
Formularios
Esta sección presenta tipos de inputs mediante los cuales el usuario puede ingresar información al sistema. En general estos se encuentran dentro de formularios complejos, con varios campos de diferente índole.
Comentarios
Las cajas de comentarios permiten a los usuarios interactuar con los sistemas, dejando una ventana abierta para ingresar información y expresar sus opiniones. Se suelen usar en páginas dinámicas como noticias, eventos, posts y artículos, entre otros.
Pasos o explicaciones
Corresponden a divisiones en procesos o formularios complejos, que ayudan a separar en etapas el flujo completo de una actividad. En ocasiones sólo basta con una indicación visual de cuántos pasos hay y en cuál estoy, mientas que a veces será necesario crear un módulo o caja con los pasos.
Menús
Los menús de navegación suelen ubicarse en el header o encabezado de página. Pueden tener diferentes jerarquías de contenido.
Navegación
- Botones y complementos de navegación: Además de los elementos de navegación transversales, también se usan botones y breadcrumbs que dan libertad de desplazamiento por el sitio y dentro de la página.
- Navegación contextual: Módulos con navegación contextualizados, usualmente ubicados en los sidebar laterales de páginas interiores.
- Navegación de contenido: Elementos que permiten agrupar grandes cantidades de información y navegarla dentro de una página.
Listas
Listas numeradas y no numeradas utilizadas para indicar ordenar contenido.
Imágenes y videos
Contenido multimedia utilizado en distintos contextos, por ejemplo, como contenido principal, en galerías, en módulos donde acompañan a título o texto, etc.
Tablas
Agrupación de contenido dispuesto de manera simple y compleja, variando en cantidad de columnas, filas y contenido anidado.
Personas
Estos módulos presentan a personas en diferentes contextos para diferenciarlos de un listado común. Cada proyecto puede requerir información variada de las personas, como nombre, cargo, enlace a un currículum o sitio, teléfono, mail, etc.
Este archivo no sólo nos sirve para utilizarlo en el computador, sino que también nos ayuda en el ejercicio de prototipar fuera de este.
Un ejemplo concreto de lo anterior fue el IDA Workshop AI que realizamos hace algunos días, donde los participantes debían crear dos wireframes para un sitio. Optamos por este método porque no todos tendrían las herramientas bases para utilizar el repositorio (notebook + sketch) y de este modo la creación de los prototipos sería mucho más fluida, evitando que comiencen a “diseñar” o a darse vueltas en cómo deben ser los módulos, cuando el enfoque principal es diagramar la información en el lienzo.
Encabezados
Formularios
Comentarios
Pasos o explicaciones
Menús
Navegación
- Botones y complementos de navegación: Además de los elementos de navegación transversales, también se usan botones y breadcrumbs que dan libertad de desplazamiento por el sitio y dentro de la página.
- Navegación contextual: Módulos con navegación contextualizados, usualmente ubicados en los sidebar laterales de páginas interiores.
- Navegación de contenido: Elementos que permiten agrupar grandes cantidades de información y navegarla dentro de una página.
Listas
Imágenes y videos
Tablas
Personas
Autor
Equipo IDA
Equipo IDA
Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.
Artículos relacionados
14 años y 2.550 posts después.
Sabíamos optimizar WordPress como nadie. Por eso lo dejamos
Accesibilidad cognitiva
Estás perdiendo a uno de cada cinco usuarios porque el modo oscuro no es una estrategia de inclusión
Diseño de Experiencia