Los patrones de siempre, las soluciones de hoyVictor Pezzetti + Sergio Quaroni (UTN Rosario)@vpezzetti
Nos presentamosVí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
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
Comencemos definiendo...
“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”
Patrones
Concepto creado por el arquitecto Christopher Alexander, para diseño y construcción urbanística
Comencemos definiendo...
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
Patrones – ¿qué son?
Aclaremos un poco
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.
Diferencia entre Guías y Patrones de Interfaz
Estructura
Nombre
Qué
Cuándo usarlo
Por qué
Cómo
Ejemplos
Otros patrones similares
Partes de un patrón
¿Por qué patrones?
Aprender
Ejemplos
Terminología
Comparación de alternativas de diseño
Inspiración
Para qué los puedo usar
Puntos de Vista
Diferentes actividades para una interfaz
1. Organizar el Contenido
2. Navegar por el sitio
3. 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
Clasifiquemos
1. Organizar el Contenido
2. Navegar por el sitio
3. 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
ContenidoPatrones
Contenido
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
Poniendo la casa en orden
Contenido
1. PATRONES para “Mostrar una única cosa”
Alternative Views presentar contenido desde varios puntos de vista
Many Workspacesver más de un contenido o documento al mismo tiempo
Poniendo la casa en orden
Contenido
2. PATRONES para “Mostrar varias cosas”
Feature, Search, and Browsemostrar productos o contenido, permitir la navegación y la búsqueda
de ítems. Ofreciendo un atractor en la front page
News Streamcontenidos dinámicamente creados, mostrando el más reciente arriba de todo
Poniendo la casa en orden
Picture Managerpara manejar imágenes
Contenido
3. PATRONES para “Herramientas para crear algo”
Canvas Plus PalettePresenta paleta icónica junto a un lienzo blanco (canvas).
El usuario crea objetos en el lienzo, cliqueando botones de la paleta.
Poniendo la casa en orden
Photoshop CS5MacPaint, circa 1984
Contenido
4. PATRONES para “Facilitar una tarea”
WizardCuando se quiere dividir la tarea en pasos
pequeños
Settings EditorPara 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
Poniendo la casa en orden
NavegaciónPatrones
Navegación
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
Paseando por el barrio
Navegación
PATRONES para no desorientarse
Sitemap FooterUbicar un mapa de sitio en el footer de cada página. Debe ocupar un espacio compacto.
Paseando por el barrio
BreadcrumbsMostrar la lista de las páginas padre,
hasta llegar a la home
Navegación
Circuitos turísticos
Paseando por el barrio
Fully connected
Stepwise Escape hatch
Clear entry pointsPan-and-zoom Modal panel
Navegación
PATRONES según el Modelo NavegacionalClear Entry Points
Usar pocas llamadas que inciten a actuar
Modal PanelMostrar una única página, sin ningún otro tipo de navegación hasta haber finalizado la tarea
Paseando por el barrio
Escape HatchEn pantallas con navegación limitada, ubicar
un link que saque al usuario de la pantalla hacia un lugar conocido.
EstructuraPatrones
Estructura (layout)
Jerarquía Visual – destacando lo importante
Cada cosa en su lugar
Títulos
Pequeños items
Densidad Color de fondo
Posición + Tamaño Ritmo
Contenido
Agrupamientos y contenedores
El usuario debería poder deducir la estructura de información de la página a partir de su layout
Estructura (layout)
Flujo Visual – el camino al éxito
Cada cosa en su lugar
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
Estructura (layout)
PATRONES para Jerarquía Visual
Visual FrameworkDiseñar cada página para usar mismo layout,
colores y elementos de estilo, pero con suficiente flexibilidad para manejar contenido variable.
Center StageColocar el área principal en la mayor sección de la ventana, agrupando herramientas y contenido secundario en paneles más pequeños
Cada cosa en su lugar
Estructura (layout)
PATRONES para Jerarquía Visual (agrupamiento)Titled Sections
Definir secciones, cada una con un título
destacado.
Module TabsColocar los módulos en el área de solapas para que sea visible un módulo por vez.
Cada cosa en su lugar
AccordionUbicar módulos en una pila de paneles, que pueden ser
abiertos y cerrados, de manera independiente.
Estructura (layout)
PATRONES para Flujo VisualRight/Left Alignment
Al diseñar un formulario, justificar etiquetas a derecha y campos a izquierda
Diagonal BalanceDistribuir elementos de manera balanceada, colocando peso visual en esquinas superior-izquierda e inferior-derecha
Cada cosa en su lugar
MóvilesPatrones
Móviles
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
El movimiento se demuestra andando
Móviles
“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)
El movimiento se demuestra andando
Móviles
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
El movimiento se demuestra andando
Móviles
PATRONES para Móviles
Vertical StackOrdenar el contenido de las páginas
móviles en una columna vertical, con poco o ningún uso de elementos laterales
Bottom NavigationUbicar los botones de navegación en la base de la página
El movimiento se demuestra andando
Text Clear ButtonLimpiar un campo con sólopresionar un
botón
Conclusiones
Recursos
El libro del pato…(Jennifer Tidwell)
Bibliografia esencial
…y sus patrones online http://designinginterfaces.com
Recursos
Bibliotecas de patrones online
Para buscar en la web
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
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)[email protected]