Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Navegabilidad y Usabilidad

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Conceptos estudiados

• Arquitectura de la información

• Navegabilidad

• Diseño gráfico de la información

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Arquitectura de la Información

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos Arquitectura de la

información

• Definición

• Elementos Fundamentales

• Ejercicio

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Definición

La arquitectura de la información se encuentra íntimamente ligada con la usabilidad, ya que determina la forma en la cual se estructuran los contenidos y herramientas que conforman el sitio (barras de navegación, motores de búsqueda, sistemas de etiquetas, información en general, la forma de realizar transacciones de comercio electrónico, entre otras cosas).

Una arquitectura de información bien proyectada clarifica la misión y visión del sitio, equilibrando las necesidades del cliente y los usuarios; así como también contribuye a que el usuario tenga una experiencia de navegación satisfactoria.

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos Elementos

Fundamentales

Paso 1: Investigación

• Análisis de la industria • Determinación de la audiencia • Estudios de la competencia • Ideas iniciales sobre el sitio

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos Elementos

Fundamentales

Paso 2: Clasificar los contenidos

¿Hasta donde vamos? ¿Cual es la cantidad de contenidos?Jerarquía y Arboles

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Jerarquía

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Arbol

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos ¿Cómo organizar la

información?

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Ejemplos

• Amazon

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Ejemplos

• Amazon

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Ejemplos

• Imdb

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Ejemplos

• Imdb

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Card Sorting

Preguntas que podemos contestar con esta técnica:

• ¿Cuál es la manera más adecuada de agrupar la información?

• ¿Los usuarios encontrarán la información si la clasifico de esta manera?

• ¿El nombre de las opciones del menú se entienden correctamente?

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Admisiones

Actualidad Universitaria

Acerca de la Universidad

Oferta Académica

Programas de posgradoEventosHistoria de la UniversidadRadio Universidad Estéreo 104.1 FMCasos especiales de admisionesProgramas de educación a distanciaFilosofía de la UniversidadAdmisiones a programas de pregradoAdmisiones a programas de posgradoNoticiasProgramas de pregrado

TarjetasCategorías

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Navegación

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Navegación

¿Por qué es más difícil que en la vida real?

2 perfiles principales de navegación:

• El buscador

• El que “echa un vistazo”

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Principios

• Nos ayuda a encontrar lo que estamos buscando

• Nos dice también el lugar donde nos encontramos.

• Nos ofrece un lugar donde no nos perdamos

• Nos dice lo que hay en cada lugar

• Nos enseña a usar el sitio

• Nos permite confiar en las personas que la han creado

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos Elementos

Fundamentales

• D.N.I.

• Enlace página Principal

• Secciones/Sub-secciones

• Utilidades (ayuda, etc.)

• Búscador

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos D.N.I + enlace a la home

Secciones, Sub-secciones

Buscador

Utilidades

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

D.N.I.

• Estar donde creemos que debería estar

• Debe tener el aspecto de un identificador de sitio.

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Secciones

• Las secciones (denominadas, con frecuencia, navegación principal) son los vínculos a las secciones principales del sitio: el nivel superior en la jerarquía del sitio.

• En la mayoría de los casos, la navegación coherente dispondrá, además, de un espacio para visualizar la navegación secundaria: la lista de subsecciones de la sección actual.

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Utilidades• Las utilidades son los vínculos a los elementos importantes del

sitio que realmente no forman parte de la jerarquía de contenidos.

• Menos prominentes

• Cuatro o cinco

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Botón “Inicio” ***

• Uno de los elementos más importantes. Cómo en el Monopoly “Quedas libre de la cárcel”

• ...Lamentablemente poco usado

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Buscador• Fundamental (40% de los usuarios lo utilizan según

Jakob Nielsen)

• Diferentes modelos pero una regla: el más sencillo posible. ¿Cómo lograrlo? Con una herramienta potente

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Más alla

• Nombre de las páginas

• ¿Donde estoy?

• Etiquetas

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Nombre de las páginas

• Todas las páginas necesitan un nombre

• El nombre ha de estar en el lugar adecuado

• El nombre ha de ser prominente.

• El nombre debe corresponderse con aquello sobre lo que he hecho clic.

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

¿Donde estoy?

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Foco: Migas de pan

• Póngalas en la parte superior.

• Utilice el signo > entre los distintos niveles.

• Utilice un tipo de letra pequeño.

• Utilice las palabras "Usted está aquí".

• Ponga en negrita el último término.

• No las utilice en lugar del nombre de la página.

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Etiquetas• Son muy fáciles de entender.

• Son difíciles de perder de vista.

• ¿Cómo hacerlas?

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Prueba del Maletero

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

Taller 1: Diseño gráfico de la información

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

¿Qué es?

Escu

ela

Supe

rior

de

Art

e y

Espe

ctác

ulos

KIVAhttp://www.kiva.org/