Área: Tecnología

Interfaz Web

M2 User interface y Arquitectura de información

 Módulo: 2
Curso: Interfaz Web

Mapa de Contenido

Estrategias para aplicación de conceptos y

Arquitectura de información
metodologías

Organización de la información de los contenidos y

su relación con el usuario y categorización en Organización
mapas de sitios

Etiquetado
Conceptos y metodología de arquitectura de la
información
Navegación
Conceptos referidos con arquitectura de
información
Búsqueda

Organización de los contenidos de un sitio web

Priorizando funcionalidades
para mejorar la navegación, y formas de discriminar dentro de la arquitectura de la
para priorizar funcionalidades dentro de la información
arquitectura de la información

Card Sorting
User interface
y Arquitectura
Diagramas de Flujo
de información
Metodologías de arquitectura requeridas para el
Inventario de Contenidos
desarrollo de proyectos

Mapa del Sitio

Wireframes

Patrones de interfaz de
usuario y tipos de navegación

Diferencias entre plataformas digitales Patrones UI

Análisis de diferentes plataformas digitales, los ¿Qué es un empty state?

conceptos y metodología de arquitectura de la
información, señalando las requeridas para el
desarrollo de un proyecto
 Módulo: 2
Curso: Interfaz Web

Índice

Introducción ............................................................................................................................................................................................................ 5
1 Estrategias para aplicación de conceptos y metodologías ........................................................................................................ 6
1.1 Arquitectura de información ...................................................................................................................................... 6
2 Organización de la información de los contenidos y su relación con el usuario y categorización en mapas de
sitios ........................................................................................................................................................................................................................... 7
3 Conceptos y metodología de arquitectura de la información ................................................................................................. 8
3.1 Organización ............................................................................................................................................................... 8
3.1.1 Organización Caja de los Andes ............................................................................................................................. 9
3.2 Etiquetado .................................................................................................................................................................. 9
3.3 Navegación ............................................................................................................................................................... 10
3.3.1 Breadcrumbs (Miga de pan) Falabella ................................................................................................................. 10
3.3.2 Wizard .................................................................................................................................................................. 10
3.4 Búsqueda .................................................................................................................................................................. 11
4 Conceptos referidos con arquitectura de información ............................................................................................................. 12
5 Organización de los contenidos de un sitio web para mejorar la navegación, y formas de discriminar para
priorizar funcionalidades dentro de la arquitectura de la información ........................................................................................ 13
5.1 Priorizando funcionalidades dentro de la arquitectura de la información .............................................................. 13
6 Metodologías de arquitectura requeridas para el desarrollo de proyectos ..................................................................... 14
6.1 Card Sorting .............................................................................................................................................................. 14
6.2 Diagramas de Flujo ................................................................................................................................................... 14
6.3 Inventario de Contenidos ......................................................................................................................................... 15
6.4 Mapa del Sitio........................................................................................................................................................... 15
6.5 Wireframes ............................................................................................................................................................... 15
7 Diferencias entre plataformas digitales ........................................................................................................................................... 16
7.1.1 Educativas ............................................................................................................................................................ 16
7.1.2 Sociales ................................................................................................................................................................ 16
7.1.3 Comercio electrónico ........................................................................................................................................... 16
7.1.4 Bancarias .............................................................................................................................................................. 16
7.2 Patrones de interfaz de usuario y tipos de navegación ........................................................................................... 17
7.2.1 Tipo de navegación - Patrones de interfaz de usuario ......................................................................................... 17
7.3 Patrones UI ............................................................................................................................................................... 18
 Módulo: 2
Curso: Interfaz Web

7.3.1 ¿Y cómo un elemento se convierte en un patrón? .............................................................................................. 18

7.4 ¿Qué es un empty state?.......................................................................................................................................... 20
7.4.1 ¿Dónde podemos encontrarnos con empty states? ............................................................................................ 20
8 Análisis de diferentes plataformas digitales, los conceptos y metodología de arquitectura de la información,
señalando las requeridas para el desarrollo de un proyecto ............................................................................................................ 23
Cierre ....................................................................................................................................................................................................................... 24
Referencias ............................................................................................................................................................................................................ 25
 Módulo: 2
Curso: Interfaz Web

Resultado de aprendizaje

Analiza conceptos y metodología de arquitectura de la información, señalando las requeridas para

el desarrollo de proyectos en diferentes plataformas digitales.

Introducción
La disciplina de la arquitectura de la información surge de la arquitectura real, de edificios y casas.

¿Imagina construir una casa sin sus planos? ¿Qué debemos preguntarnos antes de construir una casa?,
¿cuál es el terreno? ¿de qué tamaño es ese terreno? Y lo más importante, ¿quién va a vivir ahí? Todo eso
lo podemos pasar al plano digital y pensar ¿en qué dispositivo se va a ver nuestra web? y ¿quiénes lo van
a usar?

La arquitectura de la información está inmersa dentro de un flujo de trabajo del diseño de interfaces.
Permite crear un entorno que le facilita al usuario encontrar lo que está buscando y que cuando lo
encuentre pueda utilizarlo.

Muchas veces sucede que se trabajan los proyectos de sitios web o app, solo desde la fase visual, el UI. Y
nos encontramos con interfaces que lucen bien, que son atractivas, que sus botones son entendibles y
que tienen buen uso de la distribución del espacio. Todo eso a simple vista funciona, pero si no se ha
trabajado en el proceso de arquitectura de la información, cuando se comienza a navegar, es probable
que el usuario se pierda.

En resumidas cuentas, la arquitectura de la información tiene que ver con toda la preparación para el
diseño de la estructura, navegación y el orden de los elementos antes de pasar al diseño UI.

Este módulo tiene como objetivo guiarlo por el proceso de la Arquitectura de la información (AI) para
que entienda los conceptos, conozca las técnicas y pueda aplicar estos conocimientos en futuros
proyectos digitales.

Pág. 5
 Módulo: 2
Curso: Interfaz Web

1 Estrategias para aplicación de conceptos y

metodologías
En esta sección usted conocerá los aspectos más relevantes que tienen relación con el proceso de la
arquitectura de la información.

1.1 Arquitectura de información

La arquitectura de la información es una disciplina que forma parte del flujo de trabajo de diseño de
interfaces. Es un trabajo posterior al user research. Esta nos ayuda a organizar el contenido de un sitio
web o aplicación y definir donde irán cada uno de los elementos y facilitar la búsqueda al usuario.

En arquitectura de la información se debe pensar con qué presupuesto se cuenta, en que dispositivos se
verá el producto digital, quienes la usaran, etcétera. Cuando ya se tiene la estructura definitiva y
solucionado como navegaran los usuarios. Podemos empezar a tomar decisiones estéticas.

Esta disciplina es considerada como nueva, pero en realidad fue en 1975 cuando Richard Saul Wurman
comenzó a usar este término para referirse a lo que se dedicaba. Y la define como:
“El estudio de la organización de la información con el objetivo de permitir al usuario
encontrar su vía de navegación hacia el conocimiento y la comprensión de la
información” (Niall, 2020)

El instituto de arquitectura de la información lo define como:

“La práctica de decidir cómo organizar las partes de algo para ser comprensible.” (The
Information Architecture Institute, 2002)

Este concepto no solo se refiere al trabajo de organizar información sino al resultado de este, por ejemplo,
la arquitectura de la información de un sitio web va desde la organización de los contenidos, el rotulado
o etiquetado de dichos contenidos, la encontrabilidad, concepto que hace referencia a la forma de
ubicar, recuperar y navegar dentro de un sitio web.

Saber más
Si quieres saber en más detalle sobre encontrabilidad, visita
http://www.guiadigital.gob.cl/articulo/que-es-la-encontrabilidad.html

Saber más
Si quieres saber en más detalle sobre Arquitectura de la Información, visita
https://josefacchin.com/arquitectura-de-la-informacion-web/

Pág. 6
 Módulo: 2
Curso: Interfaz Web

2 Organización de la información de los contenidos y

su relación con el usuario y categorización en mapas
de sitios

Al momento de crear un sitio web o aplicación debemos organizar nuestro contenido guiado por la
Arquitectura de la información (AI) y un buen inicio es creando mapas de navegación. Estos son
entregables muy importantes en la AI. Hay algunas herramientas digitales que nos ayudan con esta tarea,
Sketch, Adobe XD y si queremos hacerlo de manera online tenemos algunos como Canva o Lucidchart,
que tienen una gran gama de plantillas y figuras básicas para su construcción.

Podemos definirlos como esquemas de la organización de la información de un sitio web, denotan la

jerarquía y nos permite elaborar algunos escenarios de comportamiento de los usuarios.

Estos nos dan una navegación preliminar para orientar a los usuarios en el recorrido que llevaran al visitar
un sitio web. Y además la estructura que este tendrá, un árbol de contenidos con sus niveles de jerarquía,
para así navegar en las diferentes categorías.

Se debe aclarar que los mapas

de navegación no son para
reflejar la organización de una
empresa, ya que lo importante
para el usuario son las
funcionalidades y tareas que
puede hacer dentro del sitio.

Para generar un mapa de

navegación primero
debemos tener definidos los
contenidos de nuestra
plataforma digital, y tenerlos
ordenados y agrupados por
secciones.
Imagen 1: boceto rápido de mapa de navegación. Fuente: Rodríguez, M. (2020).

Podemos elaborar un boceto rápido de mapa para luego pasarlo a uno mejor acabado.

Pág. 7
 Módulo: 2
Curso: Interfaz Web

Imagen 2: mapa de navegación. Fuente: Rodríguez, M. (2020).

Los mapas de navegación son fundamentales para el desarrollo de proyectos digitales, tanto como para
el cliente, el usuario o para uso interno.

3 Conceptos y metodología de arquitectura de la

información

El objetivo de la arquitectura de la información es que el usuario logre usar de manera fácil el sitio web y
encontrar los contenidos que busca en ella, por lo tanto, cuenta con algunos recursos que nos ayudan a
estructurar un sitio web y que definen la AI. Estos se llaman Componentes de la arquitectura de la
información. Y son los siguientes:

3.1 Organización
Dependiendo de cómo organicemos la información esto afectará en si es encontrada de manera fácil o
no por el usuario.

Lo interesante es cuestionarse, ¿cómo categorizamos la información? Puede ser, de manera cronológica,

alfabética o por tema. Esto pasa porque nuestra mente, constantemente busca patrones que podamos
procesar en grandes cantidades. Debido a eso, es que tenemos que generar una buena estructura de
organización siguiendo los modelos mentales que tiene el usuario. Idealmente eliminando la
ambigüedad, ya que la finalidad es que el usuario logre encontrar la información que busca.

Pág. 8
 Módulo: 2
Curso: Interfaz Web

3.1.1 Organización Caja de los Andes

En el caso de la imagen, vemos el menú de navegación de Caja los Andes. Es extenso ya que cuenta con
bastante contenido, donde claramente la información está organizada por tema. En el caso del menú
desplegable llamado
“Salud”, encontramos
todo el contenido al
que hace referencia y
dentro de esta
categoría, las
subcategorías del
mismo tema: licencias
médicas, beneficios
médicos, salud dental y
beneficios y farmacias.

Imagen 3: Menú de navegación. Fuente: (Caja los Andes, 2019)

3.2 Etiquetado
Este concepto corresponde a la definición de la terminología que usaremos en el producto digital, web
o app. Por ejemplo, se usará “celular” o “equipo móvil” “laptop” o “notebook”. La idea es mantener una
consistencia en la comunicación dentro de todo el sitio web.

Estas etiquetas pueden aplicarse tanto en el menú de navegación, títulos de secciones, encabezados,
atributos, etcétera y para lograr un buen sistema de etiquetado es necesario que se involucren los
usuarios, a través de Card Sorting que nos ayuden a definir los conceptos con que ellos buscarían dicha
información.

Etiquetado VTR
En la imagen vemos el menú de
navegación de VTR.com. En este
caso, su etiquetado es utilizado
para describir los planes de dos
productos o más definidos como
“Packs”. Además, el etiquetado en
cuanto a internet lo define como
“Banda Ancha” ya que se
posicionaron dentro del sector con
ese término.
Imagen 4: Menú de navegación VTR. Fuente: (VTR, 2017)

Pág. 9
 Módulo: 2
Curso: Interfaz Web

3.3 Navegación
Cuando hablamos de navegación, no nos referimos solamente al menú. Una buena práctica para que el
usuario pueda moverse entre secciones en sitios web con gran cantidad de páginas y contenido son los
breadcrumbs o camino de migas, que nos da el contexto del lugar donde se encuentra el usuario. Otro
ejemplo son los wizards o menús contextuales, que nos indican por ejemplo en qué parte de un proceso
de compra se encuentra el usuario.

La navegación nos permite poner en contexto al usuario, y también le da la posibilidad de moverse de

manera rápida. La buena navegación es la que acompaña de manera consistente al usuario durante toda
su visita a una web.

3.3.1 Breadcrumbs (Miga de pan) Falabella

En la imagen vemos marcado con rojo un ejemplo de breadcrumb de la página de Falabella, en donde el
usuario tiene
claridad que se
encuentra en
“Amplificación y Hi-
Fi, y además puede
regresar y navegar a
través de él.

Imagen 5: Breadcrumbs Falabella. Fuente: (Falabella, 2020)

3.3.2 Wizard
En un proceso de compra los wizard
nos pueden orientar en que parte del
proceso de compra o pago nos
encontramos. En este ejemplo vemos
como el usuario se encuentra en el
tercer paso “Métodos de pago” del
proceso de compra. Y el paso
siguiente al confirmar la compra es la
boleta.

Imagen 6: Checkout Process UI Design.

Fuente: (Ildiko, 2017)

Pág. 10
 Módulo: 2
Curso: Interfaz Web

3.4 Búsqueda
Los buscadores son utilizados para ubicar contenido de una necesidad más específica del usuario, e
implica algo más que solo poner un buscador a su disposición. Ya que tenemos que ver que precisión
tendrán los resultados, y pensar si dentro de este mismo se puede ayudar al usuario, como, por ejemplo,
con un autocompletar.

Un ejemplo de autocompletar es
el buscador predictivo de Google,
o como el de la imagen, donde el
usuario al comenzar a escribir una
palabra, el buscador le sugiere de
inmediato algunos resultados
desplegados.
Imagen 7: Cómo debería ser el directorio de plugins de WordPress. Fuente: (Tellado, 2020)

Pág. 11
 Módulo: 2
Curso: Interfaz Web

4 Conceptos referidos con arquitectura de información

En esta disciplina como en muchas del proceso de desarrollo de interfaces web, nos encontraremos con
algunos conceptos que es importante conocer para lograr una mejor comprensión del lenguaje técnico
y mejorar la comunicación, ya que son concepciones que se utilizan con frecuencia dentro del rubro del
diseño de interfaces.

▪ Carga cognitiva: término que se utiliza mucho en psicología y hace referencia a la capacidad de
un usuario para retener información en un corto periodo de tiempo.
▪ Call to action: su traducción al español sería llamado a la acción; también se usa con su sigla
CTA. y se refiere a un elemento de interfaz, normalmente un botón que llame la atención para
atraer al usuario a hacer clic, por ejemplo, el botón “Suscribirse” o “Registrarse”.
▪ Dato cuantitativo: son datos numéricos que permiten corroborar una hipótesis en alguna
investigación guiada por estadísticas.
▪ Dato cualitativo: son datos, no numéricos que nos permiten corroborar una hipótesis.
▪ Diagrama de flujo: representación gráfica de los pasos para resolver un problema.
▪ Breadcrumb (Miga de pan): navegación secundaria que indica la ubicación al usuario dentro de
un sitio web o aplicación. Gracias a la navegación con migas de pan, el usuario puede revisar qué
páginas ha visitado anteriormente. Esta navegación secundaria suele construirse
jerárquicamente según la web y muestra la ruta lógica desde la página principal hasta la posición
actual.
▪ Mapa de empatía: técnica que se usa para describir un potencial usuario, por la cual se busca
generar la mayor cantidad de empatía con el usuario.
▪ Responsivo: proviene del inglés responsive y que significa adaptable o que hace referencia a la
adaptabilidad. Un sitio web responsive es aquel que se adapta a distintos dispositivos.
▪ Taxonomía: es un concepto utilizado en distintas áreas, una ciencia que clasifica y ordena en
grupos. En arquitectura de la información este término se utiliza como método para jerarquizar la
información que se mostrará en un sitio web.

Pág. 12
 Módulo: 2
Curso: Interfaz Web

5 Organización de los contenidos de un sitio web para

mejorar la navegación, y formas de discriminar para
priorizar funcionalidades dentro de la arquitectura
de la información

Depende como organicemos la información en un sitio web, lograremos que los contenidos sean fáciles
de encontrar o no. Para hacer un diseño que concuerde con la organización de los contenidos es
necesario desarrollar un esquema de organización para separarlos en grupos a partir de un criterio
concreto.
Tipo de organización:
▪ Exactos: grupo bien definido y excluyente, sirve para separar por cosas ya conocidas. Como por
ejemplo alfabéticos, cronológicos y geográficos.
▪ Ambiguos: grupo que sirve para identificar contenido que no conocemos, como por tema, tarea
o audiencia.

5.1 Priorizando funcionalidades dentro de la arquitectura de la

información
En los sitios web o aplicaciones, los usuarios llevan a cabo una serie de acciones y actividades que tienen
algún objetivo, pero no todas esas acciones tienen el mismo nivel de importancia.

En el mundo de la arquitectura de la información se conoce como rutas rojas las actividades críticas y
flujos claves que lleva un usuario dentro de un sistema digital. Es el camino crucial que recorre el usuario
para lograr un objetivo y se deben eliminar todo tipo de obstáculo para ofrecerle una mejor experiencia.
Por ejemplo, en un sitio web de venta online, una ruta roja es elegir o comprar un producto.

Para poder identificar esas acciones cruciales es necesario tomar en cuenta la frecuencia con la que los
usuarios realizan dicha actividad.

Al definir esas rutas rojas, estamos decidiendo que funcionalidades debemos priorizar, cuáles son las que
el usuario espera llevar a cabo y a través de cuales realizará la compra del producto.

Pág. 13
 Módulo: 2
Curso: Interfaz Web

6 Metodologías de arquitectura requeridas para el

desarrollo de proyectos
Existen una serie de metodologías y técnicas que nos sirven para la definición de una buena arquitectura
de la información, a continuación, detallaremos algunas.

6.1 Card Sorting

Tal como habíamos visto en el módulo I, un Card Sorting con los usuarios nos ayudan a categorizar, ya
que son quienes definirán las categorías según sus apreciaciones. Esta etapa consiste en entregar una
serie de tarjetas con los nombres de los productos y secciones de la web para que ellos las ordenen según
sus percepciones.

6.2 Diagramas de Flujo

Es la representación visual de algún
proceso que exista en un sitio web, por
ejemplo, iniciar sesión. Tiene por
objetivo demostrar mediante una
secuencia de ciertas tareas que el
usuario que intenta acceder posee
credenciales válidas.

Imagen 8: diagrama de flujo. Fuente: Rodríguez, M. (2020).

Pág. 14
 Módulo: 2
Curso: Interfaz Web

6.3 Inventario de Contenidos

Es un documento que describe en qué parte del sitio se encuentran todos los contenidos; ya sean
imágenes, textos, pdf, videos, etcétera y su objetivo es mostrar la jerarquía de los contenidos.

6.4 Mapa del Sitio

El mapa del sitio nos sirve para ver esquemáticamente la organización de los contenidos, y es necesario
trabajarlos en la primera etapa de diseño del sitio web o aplicación.

6.5 Wireframes
También como vimos en el módulo I, son bocetos o representaciones esquemáticas de un sitio web, y
nos sirven para definir el orden de los contenidos y elementos.

Pág. 15
 Módulo: 2
Curso: Interfaz Web

7 Diferencias entre plataformas digitales

Las plataformas digitales son aquellos sitios web en que un usuario puede acceder a cuentas personales.
Son soluciones online que nos ayudan en la ejecución de diversas tareas para variadas necesidades. Cada
una cuenta con diferentes funciones.

Existe una gran variedad de plataformas digitales, ya que cada una soluciona una problemática distinta.
A continuación, veremos los principales tipos que existen.

7.1.1 Educativas
Estas plataformas tienen el enfoque de la educación en línea o a distancia, su idea es emular la experiencia
de aprendizaje presencial. Sirven para complementar o ampliar conocimientos. Como ejemplo podemos
nombrar, Domestika, Platzi, Creahana, Canvas, etcétera.

7.1.2 Sociales
Conocidas también como redes sociales, son de las plataformas más utilizadas. Su función es conectar a
las personas con familiares, amigos y conocidos.

Dentro de este grupo podemos nombrar Facebook, Instagram, Linkedin.

7.1.3 Comercio electrónico

Plataformas de comercio electrónico hay en abundancia en estos tiempos. Con ellas podemos comprar
productos o servicios a través de internet.

Como ejemplo tenemos a WooCommerce y Shopify.

7.1.4 Bancarias
Actualmente todos los bancos tienen sus propias plataformas digitales, que contienen información de
productos, cuentas personales, accesos a créditos, etcétera, algunas de ellas son, Banco de Chile, Banco
Estado y Scotiabank.

Pág. 16
 Módulo: 2
Curso: Interfaz Web

7.2 Patrones de interfaz de usuario y tipos de navegación

Son estructuras que ordenan y agrupan los contenidos de un sitio web, y sirven para definir la navegación
y las herramientas de búsqueda, si esta estructura es muy profunda los usuarios pueden ignorar la
navegación. La navegación debe ser natural y familiar para el usuario.

7.2.1 Tipo de navegación - Patrones de interfaz de usuario

La navegación y los patrones de interfaz de usuario son cosas distintas pero que tienen como objetivo
común la usabilidad del producto digital.

Como se definió con anterioridad, la navegación tiene relación con la forma del usuario de moverse entre
páginas y contenidos. A su vez, existen diversas formas de navegación que se explican a continuación.

▪ Navegación Jerárquica
Es una de las estructuras de navegación más utilizadas
y su forma es de árbol, donde la raíz es su origen.
Tienen la ventaja de que el usuario siempre sabrá
donde está ubicado. Esta estructura limita en el
sentido que, para ir a otro sitio, el usuario debe volver
atrás o comenzar desde cero. Pero permite una libre
navegación en el sitio web.

Imagen 9: esquema de navegación jerárquica. Fuente: Rodríguez, M. (2020).

▪ Navegación de hipertexto
En esta navegación la información no se
organiza de manera lineal, sino que está
conectada por cualquier tipo de
asociación.

Son de poco entendimiento para el

usuario, ya que es muy complejo a la hora
de asociar conceptos.
Imagen 10: esquema de navegación de hipertexto. Fuente: Rodríguez, M. (2020).

Pág. 17
 Módulo: 2
Curso: Interfaz Web

▪ Navegación lineal
Es la más simple, ya que el usuario puede pasar de un
nivel de información a otro.

Imagen 11: esquema de navegación lineal. Fuente: Rodríguez, M.

(2020).

7.3 Patrones UI
Los Patrones UI (User Interface) son fundamentales en el desarrollo de interfaces web. Estos nos ayudan
a mejorar la experiencia de usuario y la usabilidad en un sitio web o aplicación. Y esto es porque son
modelos ya establecidos que nos sirven para hacer más intuitivas las plataformas digitales.

Cuando hablamos de intuición en productos digitales, nos referimos a que ese producto se use casi sin
pensar. Pero la intuición para el ser humano en relación con la plataforma web, no viene por que sí, viene
del aprendizaje, es decir que para que un usuario entienda un elemento de interfaz tiene que haberlo
usado antes con resultados positivos para resolver algún tipo de problema.

Es así como los patrones de diseño nos permiten reducir la carga cognitiva del usuario al visitar nuestra
interfaz.

7.3.1 ¿Y cómo un elemento se convierte en un patrón?

▪ Al haber sido comprobada su efectividad resolviendo problemas similares en ocasiones
anteriores.
▪ Debe ser reutilizable, lo que significa que es aplicable a diferentes problemas de diseño en
distintas circunstancias.

Algunos ejemplos de Patrones UI

▪ Menú hamburguesa
Normalmente se encuentran en los sitios móviles o en aplicaciones y sirven
para desplegar el menú de navegación.

Pág. 18
 Módulo: 2
Curso: Interfaz Web

▪ Tabs
También conocidas como pestañas, sirven para
cambiar rápidamente de un contenido a otro sin
tener que cambiar de página.

Imagen 12: Organización de pestañas. Fuente: (Material Design, s.f.)

▪ Filtros de búsqueda
Sirven para hacer una búsqueda más exhaustiva, y
cuando el resultado de búsqueda es muy numeroso.

Imagen 13: Filtro de búsqueda Falabella. Fuente: (Falabella, s.f.)

Pág. 19
 Módulo: 2
Curso: Interfaz Web

Saber más
Si quieres saber en más detalle sobre los patrones UI
Visita la biblioteca de patrones de google, llamada Material design

https://material.io/

7.4 ¿Qué es un empty state?

Se conoce como empty states a las páginas de un sitio web o aplicación en las que todavía no hay
contenido.

Generalmente cuando diseñamos una app o una web lo hacemos con páginas que ya tienen imágenes,
textos y otros elementos gráficos, pero en la realidad, por ejemplo, cuando un usuario ingresa por primera
vez a una app, se encontrará con muchas páginas sin contenido.

7.4.1 ¿Dónde podemos encontrarnos con empty states?

▪ Al usar la app por primera vez:

Cuando se descarga por primera vez una app, seguramente
el usuario no sabrá cómo funciona, es ese momento cuando
está sin contenido es cuando se puede perder a un usuario,
por eso una pantalla sin contenido bien diseñada es la
oportunidad de mostrarle a nuestro usuario como llevar a
cabo algunas funcionalidades.

Imagen 14: Print de pantalla de Whatsapp App. Fuente Solis, M (2020)

Pág. 20
 Módulo: 2
Curso: Interfaz Web

▪ Cuando se produce algún error

Que se produzcan errores mientras se navega es un poco
frustrante para el usuario, sobre todo cuando no se le explica
el por qué, o se le explica con palabras técnicas que no tienen
por qué entender. La mejor forma de lidiar con este tipo de
problemas es comunicárselo, pero de una forma sencilla.

En este caso, se explica de manera simple que la aplicación no

puede ser utilizada sin conexión a internet.

Al mismo tiempo entrega una solución concreta que es

conectarse a una red, o bien, la alternativa de entrar en
“descargas” y escuchar música que ha seleccionado
previamente para oír sin conexión.

Imagen 15: Print de pantalla de Spotify App. Fuente: Solis, M. (2020).

▪ En bandeja de notificaciones
Cuando el usuario ingresa por primera vez a alguna app o
sitio web, con bandeja de entrada, como un correo
electrónico, por ejemplo y no tiene ninguna notificación, lo
más probable es que se encuentre con un empty state. O en
el caso que se hayan borrado todos los mensajes también
se encontrará con el mismo mensaje. Lo más conveniente
para una buena experiencia de usuario será que se le
explique de manera grata.

Imagen 16: Cómo configurar Outlook para android. Fuente: (365, 2018)

Pág. 21
 Módulo: 2
Curso: Interfaz Web

▪ Cuando no se encuentra algún resultado

Si diseñamos buscadores, se deben prever algunas cosas,
como que el usuario cometa algún error; si esto ocurre, se
debe dar ayuda para corregirlo. Por ejemplo, si ya se
equivocó, sugerirle algunas cosas para mejorar su búsqueda
o que compruebe si ha escrito bien el texto. Para eso es
necesario usar un lenguaje claro, amigable y, sobre todo, no
culpar al usuario.

Si después de todo, no encuentra lo que estaba buscando,

ofrecerle algo similar.

Netflix lo hace muy bien cuando no se concreta la búsqueda.

En este caso se buscó “Terminator” y como no está en la
cartelera de Netflix, sugiere una lista de títulos relacionados.

Imagen 17: Print de pantalla de Netflix App. Fuente: Solís, M. (2020)

Pág. 22
 Módulo: 2
Curso: Interfaz Web

8 Análisis de diferentes plataformas digitales, los

conceptos y metodología de arquitectura de la
información, señalando las requeridas para el
desarrollo de un proyecto
Cuando debamos desarrollar un proyecto, sea cual sea la plataforma digital, banca, educativa, comercio
electrónico, entre otras; debemos aplicar conceptos y métodos de arquitectura de la información para
lograr una buena organización, disposición y estructuración de los contenidos.

Para eso, una AI correcta debe ser:

▪ Intuitiva: Es decir que se pueda aprender a navegar en un corto plazo
▪ Flexible: Pensada para la realización de tareas para diferentes tipos de usuario y diversas tareas
▪ Escalable: Pensando los contenidos en un futuro crecimiento de estos.

Teniendo en consideración los puntos anteriores, el proceso general que debemos seguir para planificar
la estructura que tendrá un sitio web, es el siguiente:

Entregables de AI
1. Inventario de Contenidos
2. Cardsorting
3. Diagrama de flujo
4. Mapa de sitio
5. Wireframes

Los entregables de AI se denominan de esta forma ya que debe existir siempre una retroalimentación
entre equipo y cliente, esto conlleva que, durante el proceso de creación, diseño y construcción del
producto digital, siempre se le debe mostrar al cliente los avances del trabajo para que éste pueda
validarlos y así darle continuidad al proceso. Es decir, siempre debe existir evidencia del trabajo
desarrollado.

NOTA: El contenido de wireframes de los entregables de la arquitectura de la información lo revisaremos

en detalle en el próximo módulo.

Pág. 23
 Módulo: 2
Curso: Interfaz Web

Cierre
En este módulo nos interiorizamos en el proceso llamado arquitectura de la información. Su propósito es
organizar, estructurar y etiquetar de manera correcta los proyectos digitales, asegurándonos la
consistencia de la plataforma en sus aspectos funcionales y su proyección a futuro.

Nos adentramos en la clasificación de los mapas de navegación más utilizados, los que permiten
organizar la navegación y orientar de manera preliminar al usuario en el recorrido que llevarán dentro de
un sitio web.

Conocimos los componentes de la AI: organización, etiquetado, navegación y búsqueda, que son
fundamentales para orientar y definir la estructura del producto digital. En cuanto a los patrones de
interfaz de usuario, los diseños ejemplificados nos permiten facilitar y mejorar la experiencia de usuario,
ya que son los más usados o reconocidos por éstos, debido a su simpleza y masificación en distintos
proyectos digitales.

Fundamental es conocer y aplicar las metodologías de la AI, ya que nos permiten desarrollar un proceso
de manera gradual y esquematizada de acuerdo a los objetivos del proyecto; teniendo en cuenta siempre
cuáles son los objetivos de éste, la visión del cliente, el público al cual va dirigido, sus intereses y
necesidades para a partir de ahí, establecer el etiquetado de los contenidos relevantes y necesarios,
estableciendo una secuencia del proceso para evaluar el mapa del sitio que se acomode a la finalidad del
proyecto, para luego desarrollar los wireframes. Todo esto siempre en constante trabajo en equipo y
validación del cliente.

Los patrones de interfaz son una de las herramientas que facilitará la experiencia del usuario, ya que hoy
existen tantas plataformas como productos y necesidades y éstas requieren acomodarse al usuario para
que se sienta cómo y seguro utilizando patrones que ya les son familiares y su experiencia navegando en
el producto digital sea exitosa.

En resumidas cuentas, diseñar una arquitectura de la información de manera adecuada, nos permitirá
desarrollar nuestro trabajo de manera ordenada, estructurada y esto se verá reflejado en la usabilidad y
experiencia de usuario.

Pág. 24
 Módulo: 2
Curso: Interfaz Web

Referencias
365, T. O. (2018). Cómo configurar Outlook para android. Obtenido de
https://www.bitacoraoffice365.com/como-configurar-outlook-para-android/
Caja los Andes. (2019). Menú de navegación. Obtenido de https://www.cajalosandes.cl/home_personas
Falabella. (2020). Breadcrumbs Falabella. Obtenido de https://www.falabella.com/falabella-
cl/category/cat2860024/Amplificacion-y-HI-FI
Falabella. (s.f.). Filtro de búsqueda Falabella. Obtenido de https://www.falabella.com/falabella-
cl/category/cat2860024/Amplificacion-y-HI-FI2020
Ildiko, G. (2017). Checkout Process UI Design. Obtenido de
https://www.behance.net/gallery/54639713/Day-349-Checkout-Process-UI-Design
Material Design. (s.f.). Tabs organize content across different screens, data sets, and other interactions.
Obtenido de https://material.io/components/tabs#usage
Niall, P. (2020). Entrevista a Richard Saul Wurman, arquitecto y fundador de TED. Recuperado el 25 de 05
de 2020, de https://www.plataformaarquitectura.cl/cl/937778/entrevista-a-richard-saul-wurman-
arquitecto-y-fundador-de-ted
Tellado, F. (2020). Cómo debería ser el directorio de plugins de WordPress. Obtenido de
https://ayudawp.com/wphive/
The Information Architecture Institute. (2002). What is Information Architecture? Obtenido de
https://www.iainstitute.org/what-is-ia
VTR. (2017). Menú de navegación. Obtenido de https://vtr.com/

Pág. 25