Ux2012 - Patrones de Interfaz (by Jennifer Tidwell)

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)vpezzetti@gmail.com