Basado en libro Designing Interfaces (Jennifer Tidwell) 2da ed - Presentado en UX2012 (http://ux2012.com.ar) - Dic 2012

1. Los patrones de siempre,
las soluciones de hoy
Victor Pezzetti + Sergio Quaroni (UTN Rosario)
@vpezzetti

2. Nos presentamos
Víctor Pezzetti y Sergio Quaroni
Ingenieros en Sistemas de Información
Docentes cátedra Diseño de Sistemas de Carrera Ing
en Sistemas de Información, UTN Rosario (+ 10 años)
Desarrolladores de aplicaciones, con foco en el usuario
Actualmente reestructurando contenidos de la materia,
en Usabilidad y UX

3. De qué hablamos
• Definiciones
• Diferencia entre patrones y guías
• Estructura de un Patrón
• Para qué los puedo usar
• Patrones a diferentes niveles
• contenido
• navegación
• estructura de la página (layout)
• móviles
• Conclusiones

4. Comencemos definiendo...
Patrones
“un patrón de diseño es una solución a un
problema que se usa repetidamente en
contextos similares con algunas
variantes en la implementación”
Concepto creado por el arquitecto Christopher
Alexander, para diseño y construcción
urbanística

5. Comencemos definiendo...
Patrones – ¿qué son?
Concretos, no generales
Válidos a través de diferentes plataformas
Productos, no procesos
Sugerencias, no requerimientos
Relaciones entre elementos
Adaptados a cada contexto de diseño

6. Aclaremos un poco
Diferencia entre Guías y Patrones de Interfaz
Las guías describen reglas generales a seguir.
Los patrones especifican qué hacer para conseguir
un objetivo concreto, en un contexto determinado.
Mediante explicaciones y ejemplos, especifican
cuándo, cómo y por qué puede aplicarse la solución.

7. Estructura
Partes de un patrón
Nombre
Qué
Cuándo usarlo
Por qué
Cómo
Ejemplos
Otros patrones similares

8. ¿Por qué patrones?
Para qué los puedo usar
Aprender
Ejemplos
Terminología
Comparación de alternativas de diseño
Inspiración

9. Puntos de Vista
Clasifiquemos
Diferentes actividades para una interfaz
1. Organizar el Contenido
Organizar el Contenido
2. Navegar por el sitio
Navegar por el sitio
3. Organizar la Página (layout)
Organizar la Página (layout)
4. Mostrar Listas
5. Ejecutar Acciones
6. Mostrar datos Complejos
7. Obtener input el usuario
8. Usar Social Media
9. Volverse Movil
Volverse Movil

10. Patrones
Contenido

11. Contenido
Poniendo la casa en orden
Una página tendrá alguno de estos objetivos:
1. Mostrar una única cosa (mapa, libro, etc)
2. Mostrar varias cosas
3. Ofrecer herramientas para crear algo
4. Facilitar una tarea

12. Contenido
Poniendo la casa en orden
1. PATRONES para “Mostrar una única cosa”
Alternative Views
presentar contenido desde varios puntos de vista
Many Workspaces
ver más de un contenido o documento al mismo tiempo

13. Contenido
Poniendo la casa en orden
2. PATRONES para “Mostrar varias cosas”
Feature, Search, and Browse
mostrar productos o contenido, permitir la navegación y la búsqueda
de ítems. Ofreciendo un atractor en la front page
News Stream
contenidos dinámicamente creados,
mostrando el más reciente arriba de todo
Picture Manager
para manejar imágenes

14. Contenido
Poniendo la casa en orden
3. PATRONES para “Herramientas para crear algo”
Canvas Plus Palette
Presenta paleta icónica junto a un lienzo blanco (canvas).
El usuario crea objetos en el lienzo, cliqueando botones de la
paleta.
MacPaint, circa 1984
Photoshop CS5

15. Contenido
Poniendo la casa en orden
4. PATRONES para “Facilitar una tarea”
Wizard
Cuando se quiere dividir la tarea en pasos
pequeños
Settings Editor
Para cambiar seteos o preferencias.
No es una tarea paso-a-paso.
La interfaz da acceso a los usuarios a una amplia variedad
de opciones y permite cambiar solo las necesarias

16. Patrones
Navegación

17. Navegación
Paseando por el barrio
Navegar sin temor, en el mar es lo mejor…
1. ¿Donde estoy? (signposts)
2. ¿Cuál es el camino? (wayfinding)
a) Buena señalización
b) Pistas
c) Mapas

18. Navegación
Paseando por el barrio
PATRONES para no desorientarse
Sitemap Footer
Ubicar un mapa de sitio en el footer de cada
página. Debe ocupar un espacio compacto.
Breadcrumbs
Mostrar la lista de las páginas padre,
hasta llegar a la home

19. Navegación
Paseando por el barrio
Circuitos turísticos
Stepwise Escape hatch
Fully connected
Clear entry points
Pan-and-zoom Modal panel

20. Navegación
Paseando por el barrio
PATRONES según el Modelo Navegacional
Clear Entry Points
Usar pocas llamadas que inciten a actuar
Modal Panel
Mostrar una única página, sin
ningún otro tipo de navegación
hasta haber finalizado la tarea
Escape Hatch
En pantallas con navegación limitada, ubicar
un link que saque al usuario de la pantalla
hacia un lugar conocido.

21. Patrones
Estructura

22. Estructura (layout)
Cada cosa en su lugar
Jerarquía Visual – destacando lo importante
El usuario debería poder deducir la estructura de información de la página a partir de su layout
Densidad Color de fondo
Títulos Contenido
Posición + Tamaño Ritmo
Pequeños Agrupamientos y
items contenedores

23. Estructura (layout)
Cada cosa en su lugar
Flujo Visual – el camino al éxito
La secuencia de pasos para completar la tarea, que se detecta al primer vistazo.
Puntos focales son áreas irresistibles
para los ojos del usuario
Llamadas a la Accion – dentro y fuera del flujo
Botón de Confirmación
al final del formulario

24. Estructura (layout)
Cada cosa en su lugar
PATRONES para Jerarquía Visual
Visual Framework
Diseñar cada página para usar mismo layout,
colores y elementos de estilo, pero con suficiente
flexibilidad para manejar contenido variable.
Center Stage
Colocar el área principal en la
mayor sección de la ventana,
agrupando herramientas y
contenido secundario en paneles
más pequeños

25. Estructura (layout)
Cada cosa en su lugar
PATRONES para Jerarquía Visual (agrupamiento)
Module Tabs Titled Sections
Colocar los módulos en el área de Definir secciones, cada
solapas para que sea visible un una con un título
módulo por vez. destacado.
Accordion
Ubicar módulos en una pila de paneles, que pueden ser
abiertos y cerrados, de manera independiente.

26. Estructura (layout)
Cada cosa en su lugar
PATRONES para Flujo Visual
Right/Left Alignment
Al diseñar un formulario, justificar
etiquetas a derecha y campos a izquierda
Diagonal Balance
Distribuir elementos de manera balanceada,
colocando peso visual en esquinas superior-izquierda
e inferior-derecha

27. Patrones
Móviles

28. Móviles
El movimiento se demuestra andando
Desafíos móviles
1. Pantallas pequeñas
2. Gran variedad de anchos de pantalla
3. Pantallas táctiles
4. Dificultad para ingresar texto
5. Entornos físicos desafiantes
6. Influencias sociales y atención limitada

29. Móviles
El movimiento se demuestra andando
“Los buenos productos móviles se crean,
nunca se portan.
Hay que comenzar comprendiendo a sus
usuarios y los beneficios que el medio
tiene para ofrecer”
Brian Fling
Mobile Design and Developement (O’Reilly)

30. Móviles
El movimiento se demuestra andando
Consejos móviles
1. Comprenda qué necesitan los usuarios móviles
2. “Desvista” el sitio hasta llegar a su esencia
3. Utilice el hardware del dispositivo
4. Haga que el contenido sea lineal
5. Optimice las secuencias más comunes

31. Móviles
El movimiento se demuestra andando
PATRONES para Móviles
Vertical Stack
Ordenar el contenido de las páginas
móviles en una columna vertical, con
poco o ningún uso de elementos laterales
Bottom Navigation
Ubicar los botones de navegación en la
base de la página
Text Clear Button
Limpiar un campo con sólopresionar un
botón

32. Conclusiones

33. Recursos
Bibliografia esencial
El libro del pato…
(Jennifer Tidwell)
…y sus patrones online http://designinginterfaces.com

34. Recursos
Para buscar en la web
Bibliotecas de patrones online
Welie – http://www.welie.com
Yahoo – http://developer.yahoo.com/ypatterns
Infragistics – http://quince.infragistics.com
Designing Social Interfaces - http://www.designingsocialinterfaces.com
Android - http://www.androiduipatterns.com
UI Patterns - http://ui-patterns.com
y mucho mássssss

35. No deje de completar su evaluación online
ux2012.com.ar/encuesta
¡Muchas gracias!
Los patrones de siempre, las soluciones de hoy
Víctor Pezzetti + Sergio Quaroni (UTN Rosario)
vpezzetti@gmail.com