Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Patrones de diseño para IA
(con ejemplos)
Mauricio Angulo S.
Consultor en Experiencia de Usuario
email > mauricio@tesserac...
Experiencia del Usuario
felicidad confianza+ =
1 2 3 4A B
Arquitectura de Información
= Navegación
“Cuando una plataforma digital
carece de definición y estructura,
los usuarios pueden perderse en
el contenido. La Arquite...
“Al definir patrones formales
para arquitectura de
información, los gestores de
contenido pueden utilizar
modelos probados...
“...métodos estructurados para
describir buenas prácticas de diseño
en un campo de conocimiento”
- Wikipedia
Patrones de a...
Imagina que quieres
diseñar el campus de
una universidad...
¿Cómo distribuir la
responsabilidad del
diseño en todos los
niveles de una jerarquía
grande manteniendo la
consistencia y ...
Patrones:
“Un patrón describe un problema que ocurre
una y otra vez en nuestro entorno y contiene la
solución mínima para ...
Patrones de diseño
centrados en el usuario
Un proyecto está centrado en
el usuario cuando se diseña
con la meta específica...
Lo que nosotros creemos que
el usuario necesita:
Lo que el usuario realmente
necesita:
Tipos de patrones:
1. Interfase y layout:
Diseño de UI y editorial
2. Estructura de la información y
dinámicas de navegaci...
1
2
3
Patrones para escritorio
Todo-en-uno
Plano
Índice
Margarita (concentrador)
Jerarquía estricta
Jerarquía
multidimensional
Búsqueda
Patrones para móviles
Jerárquico
Centralizador
Matrioska
Pestañas
Panel de control
Vista filtrada
http://bit.ly/1FquqSg
El primer jueves de cada mes a las 19:30 hrs:
- Un tema diferente por mes
- Tres expertos por tema
- ¡Pizza y...
- … cerve...
Mobile Day México es un congreso sobre desarrollo de
aplicaciones móviles en contextos empresariales.
Se realizará el 19 d...
¡Gracias!
Mauricio Angulo S.
Consultor en Experiencia de Usuario
email > mauricio@tesseractspace.com
twitter > @mauricioan...
Guías de estilo vs
Lenguaje de patrones
Guía de estilo:
● Basada en reglas
● Basada en estructuras
● Enfocada en el lengua...
Guías de estilo vs
Lenguaje de patrones
General Específico
Principio
Guía
heurística
Patrón
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Patrones para Arquitectura de Información y ejemplos
Upcoming SlideShare
Loading in …5
×

Patrones para Arquitectura de Información y ejemplos

7,690 views

Published on

Mi presentación en el Día Mundial de la Arquitectura de Información en la Ciudad de México #WIAD sobre patrones de diseño para arquitectura de información en web y móviles

Published in: Design

Patrones para Arquitectura de Información y ejemplos

  1. 1. Patrones de diseño para IA (con ejemplos) Mauricio Angulo S. Consultor en Experiencia de Usuario email > mauricio@tesseractspace.com twitter > @mauricioangulo www.tesseractspace.com
  2. 2. Experiencia del Usuario
  3. 3. felicidad confianza+ = 1 2 3 4A B
  4. 4. Arquitectura de Información
  5. 5. = Navegación
  6. 6. “Cuando una plataforma digital carece de definición y estructura, los usuarios pueden perderse en el contenido. La Arquitectura de Información es la práctica de organizar el contenido y mostrar sus interrelaciones para que el usuario se mantenga orientado y encuentre lo que busca.” - Erik Hennum, IBM, 2005
  7. 7. “Al definir patrones formales para arquitectura de información, los gestores de contenido pueden utilizar modelos probados para mejorar la Experiencia de sus Usuarios.” - Erik Hennum, IBM, 2005
  8. 8. “...métodos estructurados para describir buenas prácticas de diseño en un campo de conocimiento” - Wikipedia Patrones de arquitectura: ”...formas para derivar y describir soluciones de diseño” - Prof. Michael Hughes
  9. 9. Imagina que quieres diseñar el campus de una universidad...
  10. 10. ¿Cómo distribuir la responsabilidad del diseño en todos los niveles de una jerarquía grande manteniendo la consistencia y armonía en el diseño general?
  11. 11. Patrones: “Un patrón describe un problema que ocurre una y otra vez en nuestro entorno y contiene la solución mínima para ese problema, de manera que esa solución se puede utilizar un millón de veces sin realizarla de la misma manera dos veces.” - Christopher Alexander
  12. 12. Patrones de diseño centrados en el usuario Un proyecto está centrado en el usuario cuando se diseña con la meta específica de satisfacer sus deseos y necesidades de manera valiosa, simple y disfrutable.
  13. 13. Lo que nosotros creemos que el usuario necesita:
  14. 14. Lo que el usuario realmente necesita:
  15. 15. Tipos de patrones: 1. Interfase y layout: Diseño de UI y editorial 2. Estructura de la información y dinámicas de navegación: Índices, tablas de contenido, contenido relacionado, controles de navegación 3. Contenido: Taxonomía de contenido, estrategia de comunicación.
  16. 16. 1 2 3
  17. 17. Patrones para escritorio
  18. 18. Todo-en-uno
  19. 19. Plano
  20. 20. Índice
  21. 21. Margarita (concentrador)
  22. 22. Jerarquía estricta
  23. 23. Jerarquía multidimensional
  24. 24. Búsqueda
  25. 25. Patrones para móviles
  26. 26. Jerárquico
  27. 27. Centralizador
  28. 28. Matrioska
  29. 29. Pestañas
  30. 30. Panel de control
  31. 31. Vista filtrada
  32. 32. http://bit.ly/1FquqSg
  33. 33. El primer jueves de cada mes a las 19:30 hrs: - Un tema diferente por mes - Tres expertos por tema - ¡Pizza y... - … cerveza gratis! Más información en www.uxnights.com
  34. 34. Mobile Day México es un congreso sobre desarrollo de aplicaciones móviles en contextos empresariales. Se realizará el 19 de marzo de 2015 en la Ciudad de México. http://sg.com.mx/mobileday/
  35. 35. ¡Gracias! Mauricio Angulo S. Consultor en Experiencia de Usuario email > mauricio@tesseractspace.com twitter > @mauricioangulo www.tesseractspace.com
  36. 36. Guías de estilo vs Lenguaje de patrones Guía de estilo: ● Basada en reglas ● Basada en estructuras ● Enfocada en el lenguaje ● Orientada a productos ● “Presenta esta clase de contenido de esta manera” Patrones: ● Heurístico ● Basado en comportamientos ● Enfocada en la información ● Consistente entre productos ● “En este escenario, haz que el contenido actúe de esta forma”
  37. 37. Guías de estilo vs Lenguaje de patrones General Específico Principio Guía heurística Patrón

×