Los patrones de siempre,

las soluciones de hoy

Victor Pezzetti + Sergio Quaroni (UTN Rosario)
@vpezzetti

Nos presentamos
Vctor Pezzetti y Sergio Quaroni
Ingenieros en Sistemas de Informacin

Docentes ctedra Diseo de Sistemas de Carrera Ing

en Sistemas de Informacin, UTN Rosario (+ 10 aos)
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 guas
Estructura de un Patrn
Para qu los puedo usar
Patrones a diferentes niveles

contenido
navegacin
estructura de la pgina (layout)
mviles

Conclusiones

Comencemos definiendo...
Patrones
un patrn de diseo es una solucin a un
problema que se usa repetidamente en
contextos similares con algunas
variantes en la implementacin
Concepto creado por el arquitecto Christopher
Alexander, para diseo y construccin
urbanstica

Comencemos definiendo...
Patrones qu son?
Concretos, no generales
Vlidos a travs de diferentes plataformas
Productos, no procesos
Sugerencias, no requerimientos
Relaciones entre elementos
Adaptados a cada contexto de diseo

Aclaremos un poco
Diferencia entre Guas y Patrones de Interfaz
Las guas describen reglas generales a seguir.
Los patrones especifican qu hacer para conseguir
un objetivo concreto, en un contexto determinado.
Mediante explicaciones y ejemplos, especifican
cundo, cmo y por qu puede aplicarse la solucin.

Estructura
Partes de un patrn
Nombre
Qu
Cundo usarlo
Por qu
Cmo
Ejemplos
Otros patrones similares

Por qu patrones?
Para qu los puedo usar
Aprender
Ejemplos
Terminologa
Comparacin de alternativas de diseo
Inspiracin

Puntos de Vista
Clasifiquemos
Diferentes actividades para una interfaz
1.

Organizar el
Organizar
elContenido
Contenido

2.

Navegar por
Navegar
porelelsitio
sitio

3.

Organizar la
Organizar
laPgina
Pgina(layout)
(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

Patrones

Contenido

Contenido
Poniendo la casa en orden
Una pgina 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

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 ms de un contenido o documento al mismo tiempo

Contenido
Poniendo la casa en orden
2. PATRONES para Mostrar varias cosas
Feature, Search, and Browse
mostrar productos o contenido, permitir la navegacin y la bsqueda
de tems. Ofreciendo un atractor en la front page

News Stream
contenidos dinmicamente creados,
mostrando el ms reciente arriba de todo

Picture Manager
para manejar imgenes

Contenido
Poniendo la casa en orden
3. PATRONES para Herramientas para crear algo
Canvas Plus Palette
Presenta paleta icnica junto a un lienzo blanco (canvas).
El usuario crea objetos en el lienzo, cliqueando botones de la
paleta.

MacPaint, circa 1984

Photoshop CS5

Contenido
Poniendo la casa en orden
4. PATRONES para Facilitar una tarea
Wizard
Cuando se quiere dividir la tarea en pasos
pequeos

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

Patrones

Navegacin

Navegacin
Paseando por el barrio
Navegar sin temor, en el mar es lo mejor
1. Donde estoy? (signposts)
2. Cul es el camino? (wayfinding)
a) Buena sealizacin
b) Pistas
c) Mapas

Navegacin
Paseando por el barrio
PATRONES para no desorientarse
Sitemap Footer
Ubicar un mapa de sitio en el footer de cada
pgina. Debe ocupar un espacio compacto.

Breadcrumbs
Mostrar la lista de las pginas padre,
hasta llegar a la home

Navegacin
Paseando por el barrio
Circuitos tursticos

Stepwise

Escape hatch

Fully connected

Pan-and-zoom

Modal panel

Clear entry points

Navegacin
Paseando por el barrio
PATRONES segn el Modelo Navegacional
Clear Entry Points
Usar pocas llamadas que inciten a actuar

Modal Panel
Mostrar una nica pgina, sin
ningn otro tipo de navegacin
hasta haber finalizado la tarea

Escape Hatch
En pantallas con navegacin limitada, ubicar
un link que saque al usuario de la pantalla
hacia un lugar conocido.

Patrones

Estructura

Estructura (layout)
Cada cosa en su lugar
Jerarqua Visual destacando lo importante
El usuario debera poder deducir la estructura de informacin de la pgina a partir de su layout

Ttulos

Pequeos
items

Contenido

Densidad

Color de fondo

Posicin + Tamao

Agrupamientos y
contenedores

Ritmo

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

Botn de Confirmacin
al final del formulario

Estructura (layout)
Cada cosa en su lugar
PATRONES para Jerarqua Visual
Visual Framework
Disear cada pgina 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 seccin de la ventana,
agrupando herramientas y
contenido secundario en paneles
ms pequeos

Estructura (layout)
Cada cosa en su lugar
PATRONES para Jerarqua Visual (agrupamiento)
Module Tabs
Colocar los mdulos en el rea de
solapas para que sea visible un
mdulo por vez.

Titled Sections
Definir secciones, cada
una con un ttulo
destacado.

Accordion
Ubicar mdulos en una pila de paneles, que pueden ser
abiertos y cerrados, de manera independiente.

Estructura (layout)
Cada cosa en su lugar
PATRONES para Flujo Visual
Right/Left Alignment
Al disear 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

Patrones

Mviles

Mviles
El movimiento se demuestra andando
Desafos mviles
1. Pantallas pequeas
2. Gran variedad de anchos de pantalla
3. Pantallas tctiles
4. Dificultad para ingresar texto
5. Entornos fsicos desafiantes
6. Influencias sociales y atencin limitada

Mviles
El movimiento se demuestra andando
Los buenos productos mviles 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 (OReilly)

Mviles
El movimiento se demuestra andando
Consejos mviles
1. Comprenda qu necesitan los usuarios mviles
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 ms comunes

Mviles
El movimiento se demuestra andando
PATRONES para Mviles
Vertical Stack
Ordenar el contenido de las pginas
mviles en una columna vertical, con
poco o ningn uso de elementos laterales

Bottom Navigation
Ubicar los botones de navegacin en la
base de la pgina

Text Clear Button

Limpiar un campo con slopresionar un
botn

Conclusiones

Recursos
Bibliografia esencial
El libro del pato
(Jennifer Tidwell)

y sus patrones online

http://designinginterfaces.com

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 mssssss

No deje de completar su evaluacin online

ux2012.com.ar/encuesta
Muchas gracias!
Los patrones de siempre, las soluciones de hoy
Vctor Pezzetti + Sergio Quaroni (UTN Rosario)
vpezzetti@gmail.com