Este documento presenta patrones de diseño para la arquitectura de información y la experiencia del usuario en interfaces digitales. Explica que los patrones describen soluciones probadas a problemas comunes de organización de contenido para mantener a los usuarios orientados. Incluye ejemplos de patrones para escritorio como todo-en-uno y jerarquía estricta, y para móviles como jerárquico y pestañas. También distingue patrones de guías de estilo al ser heurísticos en lugar de basados en reglas.

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. Experiencia del Usuario

3. felicidad confianza+ =
1 2 3 4A B

4. Arquitectura de Información

5. = Navegación

8. “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

9. “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

10. “...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

13. Imagina que quieres
diseñar el campus de
una universidad...

14. ¿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?

15. 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

16. 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.

17. Lo que nosotros creemos que
el usuario necesita:

18. Lo que el usuario realmente
necesita:

19. 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.

20. 1
2
3

22. Patrones para escritorio

23. Todo-en-uno

25. Plano

27. Índice

29. Margarita (concentrador)

31. Jerarquía estricta

33. Jerarquía
multidimensional

35. Búsqueda

37. Patrones para móviles

38. Jerárquico

39. Centralizador

40. Matrioska

41. Pestañas

42. Panel de control

43. Vista filtrada

45. http://bit.ly/1FquqSg

46. 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

47. 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/

48. ¡Gracias!
Mauricio Angulo S.
Consultor en Experiencia de Usuario
email > mauricio@tesseractspace.com
twitter > @mauricioangulo
www.tesseractspace.com

49. 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”

50. Guías de estilo vs
Lenguaje de patrones
General Específico
Principio
Guía
heurística
Patrón