Arquitectura de Información y Diseño de Experiencia del Usuario

Arquitectura de InformaciónDiseño de Experiencia de Usuario

AI+UX

Juan C CamusJuan C. Camus2014

@jccamus - www.usando.info – Julio 2014 - 1 de 40

John Wanamaker (July 11, 1838 – December 12, 1922)

@jccamus - www.usando.info – Julio 2014 - 2 de 40

“Half the money I spend on advertising is wasted; gthe trouble is I don't know which half ”

@jccamus - www.usando.info – Julio 2014 - 3 de 40

@jccamus - www.usando.info – Julio 2014 - 4 de 40

@jccamus - www.usando.info – Julio 2014 - 5 de 40

@jccamus - www.usando.info – Julio 2014 - 6 de 40

@jccamus - www.usando.info – Julio 2014 - 7 de 40

US$ 3,4 MMM US$ 3,8 MMMUS$ 3,4 MMM3 meses

US$ 3,8 MMM1 año

@jccamus - www.usando.info – Julio 2014 - 8 de 40

un sitio web funcionasi el usuario actúa

sin preguntarcómo se opera

@jccamus - www.usando.info – Julio 2014 - 9 de 40

@jccamus - www.usando.info – Julio 2014 - 10 de 40

@jccamus - www.usando.info – Julio 2014 - 11 de 40

@jccamus - www.usando.info – Julio 2014 - 12 de 40

@jccamus - www.usando.info – Julio 2014 - 13 de 40

Test Interactivo de Eyetracking (Poynter 2004)Test Interactivo de Eyetracking (Poynter 2004)

@jccamus - www.usando.info – Julio 2014 - 14 de 40

EyetrackingEyetracking

@jccamus - www.usando.info – Julio 2014 - 15 de 40

Banner blindnessBanner blindness

@jccamus - www.usando.info – Julio 2014 - 16 de 40

Steve Krug Jakob Nielsen

@jccamus - www.usando.info – Julio 2014 - 17 de 40

@jccamus - www.usando.info – Julio 2014 - 18 de 40

@jccamus - www.usando.info – Julio 2014 - 19 de 40

@jccamus - www.usando.info – Julio 2014 - 20 de 40

@jccamus - www.usando.info – Julio 2014 - 21 de 40

Audio Highway Listen Up – circa 1996Audio Highway Listen Up circa 1996

@jccamus - www.usando.info – Julio 2014 - 22 de 40

NOMAD Jukebox Zen – circa 2004NOMAD Jukebox Zen circa 2004

@jccamus - www.usando.info – Julio 2014 - 23 de 40

iPod Nano – circa 2006iPod Nano circa 2006

@jccamus - www.usando.info – Julio 2014 - 24 de 40

Ipod Nano 2nd Gen– circa 2006

@jccamus - www.usando.info – Julio 2014 - 25 de 40

• PDF gratis; Licencia CC BY NC SA• PDF – gratis; Licencia CC BY NC SA• Desde 5 Nov. 2009 hasta hoy: 22.000 • www.tienes5segundos.cl

@jccamus - www.usando.info – Julio 2014 - 26 de 40

Jesse James Para hacer un sitio web:JGarrett Para hacer un sitio web:

@jccamus - www.usando.info – Julio 2014 - 27 de 40

Jesse James Para hacer un sitio web:JGarrett Para hacer un sitio web:

@jccamus - www.usando.info – Julio 2014 - 28 de 40

Jesse James Para hacer un sitio web:JGarrett Para hacer un sitio web:

• Primero: entender al cliente• Luego: entender a la audiencia• Luego: entender a la audienciaDespués• Qué contenidos se quieren ofrecerQué contenidos se quieren ofrecer• Qué va a hacer el usuario con ellosCon todo eso:Con todo eso:• Definir la estructura• Definir la navegaciónv gY, por último…• …definir el diseño visual

@jccamus - www.usando.info – Julio 2014 - 29 de 40

¿Cómo seguir?¿Cómo seguir?

Wurman Rosenfeld y Morville Garrett WodtkeWurman Rosenfeld y Morville Garrett Wodtke

@jccamus - www.usando.info – Julio 2014 - 30 de 40

DefinicionesDefiniciones

• Arquitectura de Información:– Es un arte y una ciencia.– Organiza conjuntos de información.

Permite que cualquier persona entienda la información que se ofrece– Permite que cualquier persona entienda la información que se ofrece.– Favorece el “autoservicio”.

• Desde el web:• Desde el web:– Arquitectura de Información es el conjunto de prácticas que entendiendo

el objetivo de un sitio web, organiza el contenido en subconjuntos de nombres comprensibles para el usuario final, facilitando las operaciones de búsqueda y uso de la información que contienen.

@jccamus - www.usando.info – Julio 2014 - 31 de 40

DefinicionesDefiniciones

• Organización de los patrones inherentes a la información – Wurman

• Usa herramientas, técnicas y experiencias de disciplinas que ven la información como algo importante y valioso por sí mismo – Rosenfeld

• El arte y la ciencia de organizar y etiquetar para apoyar las capacidades de uso y búsqueda Morvillebúsqueda - Morville

• Define cómo las personas procesan la información y construye relaciones entre sus diferentes elementos – Garrett

• Sistema para asegurar que un sitio web efectivamente incorpora las necesidades del usuario – Wodtke

@jccamus - www.usando.info – Julio 2014 - 32 de 40

Definiciones

L

Definiciones

Lou

“Information architecture involves the design of organization and navigation systems to help people find and manage information more successfully”systems to help people find and manage information more successfully.

Garrett

Information Architecture: Stuctural design of the informaiton space to facilitateInformation Architecture: Stuctural design of the informaiton space to facilitate intuive access to content.“

Peter

[information architecture is]“… creating consistent and functional systems for navigation, graphics, page layout and title languages so that the user knows where to go, what to do, and encourages them to return.

@jccamus - www.usando.info – Julio 2014 - 33 de 40

AI – Definiciones• Otra visión de RosenfeldOtra visión de Rosenfeld

@jccamus - www.usando.info – Julio 2014 - 34 de 40

DefinicionesDefiniciones

• El panal de Morville: Facetas de la E i i d l U iExperiencia del Usuario

@jccamus - www.usando.info – Julio 2014 - 35 de 40

DefinicionesDefiniciones

• Los círculos de RosenfeldUsuario

Contenido

“La Arquitectura La Arquitectura de Información es la cola que mueve al perro”

Contexto

@jccamus - www.usando.info – Julio 2014 - 36 de 40

Herramientas: diseñar con wireframesHerramientas: diseñar con wireframes

@jccamus - www.usando.info – Julio 2014 - 37 de 40

Herramientas: diseñar la experienciaHerramientas: diseñar la experiencia

@jccamus - www.usando.info – Julio 2014 - 38 de 40

Herramientas: probar con usuariosHerramientas: probar con usuarios

@jccamus - www.usando.info – Julio 2014 - 39 de 40

Herramientas: cómo seguirHerramientas: cómo seguir

• Arquitectos de Información en el Mundo (inglés):– IA Institute: http://www.iainstitute.org/– Wurman: http://wurman.com/rsw/

R f ld h // l i f ld /– Rosenfeld: http://www.louisrosenfeld.com/– Morville: http://www.semanticstudios.com/– Garrett: http://jjg.net/– Wodtke: http://www.eleganthack.com/Wodtke: http://www.eleganthack.com/

• Arquitectos de Información en el Mundo (español):– Webestilo: http://www.webestilo.com/guia/– J. Arango: http://www.jarango.com/es/– Alzado: http://www.alzado.org/

• Arquitectos de Información en Chile:• Arquitectos de Información en Chile:– D. Vergara: http://www.darcy.cl/– J.Velasco: http://www.mantruc.com/– M. Gutierrez: http://www.malisa.cl/p // /– J. Barahona: http://www.ayerviernes.com/– J.C.Camus: http://www.usando.info/

@jccamus - www.usando.info – Julio 2014 - 40 de 40