Patrones y Tareas de interacción
o Tareas de interaccióno Patrones de interaccióno Layout (disposición bocetos)
Diseño de Interfaces de Usuario
CASO DE ESTUDIO
Miguel Gea ([email protected])Dpt. Lenguajes y Sistemas InformáticossGrado en Ingeniería InformáticaUniversidad de Granadahttp://utopolis.ugr.es/diu Noviembre, 2013
2Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Tareas interacción:
Tareas o Buscar o Navegar por la informacióno Formularioo Identificación o Preferenciaso Asistencia en la tarea
Layout (Boceto) o Paginación (disposición elementos). o Ventanas de Diálogo
PatronesSoluciones de interacción
2
3Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Patrones de organización (layout)http://designinginterfaces.com/
Un patron de diseño IU captura la esencia de una solución de éxito para un sistema interactivo
La arquitectura de la información (Information architecture, IA) es el arte de estudiar, analizar, organizar y estructurar la información y presentación de los datos en un espacio de visualización.
Actividades que comprende la información: presentación, búsqueda, navegación, categorización, ordenación, manipulación, etc
Modalidades de enfocar el diseño: 1.Mostrar un sólo elemento (mapa, producto )2.Mostrar una lista de elementos (visor de fotos, canal de noticias)3.Suministrar herramientas para crear cosas (canvas, workspaces) 4.Facilitar una tarea (preferencias, ajustes)
4Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
6 Patrones de organización
http://designinginterfaces.com/patterns/
Patrones de organización el diseño de una aplicación
1.Feature, Search, and Browse2.News Stream3.Picture Manager4.Dashboard5.Lienzo y paletas
http://designinginterfaces.com/
5Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Patrones de organización (layout)http://designinginterfaces.com/
PATRON 1 : CARACTERÍSTICA /BUSCAR/ NAVEGAR (feature/search/browse)
6Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Patrones de organización (layout)http://designinginterfaces.com/
PATRON 2 : FLUJOS DE INFORMACION (news stream)
7Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Patrones de organización (layout)http://designinginterfaces.com/
PATRON 3 : GESTOR DE IMAGENES
8Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Patrones de organización (layout)http://designinginterfaces.com/
PATRON 4 : Tablero / Dashboard
Dashboard - MAC OS Ximg: http://pacmac.es/eliminar-dashboard-de-os-x-mavericks/
Google - Anaytics
9Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Tareas básicas: Buscar
Objetivo: o Suministrar exactamente la información que el usuario demanda en un formato fácil de
usar y comprensible
Requisitos: o Item conocido a priori (confirmar su existencia)
Volumen de información Tipo de Información
o Homogénea / heterogenea
Clasificada (tags) o noo Del tipo…, que posea …, marcada como…
Busqueda o Lingüística (en lenguaje natural) Que contenga.., que coincida…o Espacial (cerca de …) o Contextual (creada en … por …)o Semántica (que me explique…)o Visual (que tenga apariencia de…)o Social (que sea popular…)o Automático (filtrado) / Fijar condiciones y aplicar
9
Patrones: o Search Box / caja de búsquedaTable filter /
filtrado de tabla o Advanced Search / búsqueda av
anzadaAutocomplete / Autocompletaro Tag Cloud...
10Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Tarea Buscar: Caja de búsqueda
El usuario debe buscar un ítem o información específica
Puede tener una caja de filtrado
www.tucows.com
11Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Tarea Buscar: fitrado de tabla
Gran volumen de información (homogénea) El usuario quiere acotar la búsqueda mostrada en la tabla a unos datos
concretos Filtrado selectivo por a) Clasificación y b) Contenido (en rango)
a)
b)
11
12Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Tarea Buscar: Busqueda avanzada
Gran volumen de información homogénea: páginas web Busqueda lingüística (avanzada)
12
13Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Tarea Buscar: autocompletar
El usuario introduce la etiqueta y se buscan concordancias
Sugerencias de posibles nombres mientras se escribe
14Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Tarea Buscar: información clasificada (indexada)
Información homogenea (ayuda) Busqueda clasificada (alfabéticamente)
14
15Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Buscar: ejemplo diferentes alternativas
Información heterogénea (secciones) Busqueda múltiple: lingüística, categorias, social…
15
16Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Buscar: ejemplo (Biblioteca multimedia)
B18
Varios modos (alternativos)
16
17Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Busqueda ciega
Un único modo
Para qué?Qué pasa si no se tiene el DNI? Cuantos usuarios hay?
17
18Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Resultados busqueda
B18
Presentación tabulada (ordenación)
18
19Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Resultados busqueda
Presentación tabulada (solo?)
Para qué se quiere la Información?
19
20Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Navegar por los datos
OBJETIVOo Facilitar el paso entre ventanas e información de forma sencilla
y rápida, de modo que el usuario sepa en cada momento:o Dónde está o De dónde vieneo Dónde puede iro Como se puede hacer rápidamente
20
21Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Navegar por los datos (técnicas)
Anterior - siguiente
22Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Navegar por los datos (técnicas)
Miga de Pan
23Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Navegar por los datos (técnicas)
Presentación Tabulada
24Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Navegación por dependencias (browse)
Busqueda categorías multinivel (dependencia jerárquica)
24
25Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Navegar por los datos (técnicas)
Selección en dos niveles (maestro detalle)
26Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Formularios
Formulario OBJETIVO
o Entrada (masiva) de datos representando una entidad/objeto
COMPOSICIÓNo Campos de edición y grupos de botoneso El usuario necesita conocer el tipo de información necesaria en cada casoo Debe ser legible y fácilmente editable o Debe conocer lo que es obligatorio de lo que es opcional
26
27Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Formularios: opinar
Valoración cualitativa y cuantitativa
28Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
B5
Controles
Asistentes
29Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Valores por defecto
Asistentes
Combos
Selecciones
Campos de texto
Campos con formato
30Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Asistentes
Manejo de datos: Doble Lista
31Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Disposición general (layout)
Secuencia del diálogo Ventanas complementarias/independientes
32Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Paginación
B5
33Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Paginación: orientada a dispositivo
Navegación
Navegación
Objetos
Acciones
34Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Paginación
Orientada a función
35Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Paginación
Orientada a DocumentoOBJETIVO
Un conjunto de elementos (paletas, botones) para control del texto
COMPOSICIÓN
Valores modales, navegación
Uno o varios docs
36Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Paginación
Orientada a ObjetoOBJETIVO: Vincular las acciones según objeto
37Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Paginación
Paneles apilados desplegable
Conjunto de opciones/acciones agrupadas en paneles con comportamiento dentro de una barra de herramientas
Uso: Se pueden desplegar (abrir/cerrar)
Pueden ser excluyentes
38Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Paginación
Capas / Pestañas
39Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Paginación
Pestañas de Navegación
Uno o dos niveles
40Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Paginación
Panel con caja de herramientas
41Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Ventanas de Diálogo
Ventanas Modales
42Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Ventanas de Diálogo
Distinta configuración para misma tarea
43Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Ventanas de Diálogo: mensajes
44Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Patrones de diseño: descripción
http://www.kissmetrics.com/
http://messagepub.com/login
http://robo.to/
http://97bottles.com/account/signin/?next=/
45Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Patrones de diseño: clasificaciones
• Entradas de información (formularios) • Navegación • Tratar con datos• Sociales
http://ui-patterns.com/
http://designinginterfaces.com/
• Organizar el Contenido • Navegación y exploración• Organizar la página • Acciones
http://www.welie.com/patterns
• Navegación • Búsqueda• Tratar con datos• Obtener entradas• Interacciones básicas• Compras• Elecciones
46Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
2.2. Patrones de diseño: descripción
Usar Cuando
El usuario tiene que manejar
varios items (de una lista
larga) o crear una nueva.
Pueden estar ordenador Se le
pueden aplicar operaciones (a
algunos o a todos los ítems)
Cómo
El usuario debe ver todos los
ítems de la lista.
Si está vacía , debe aparecer
“no hay elementos”,...
47Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Referencias (I)
Genéricos
J. Tidwell, Designing Interfaces: Patterns for Effective Interaction Design, 2nd ed. O’Reilly, 2010
http://designinginterfaces.com/
http://ui-patterns.com/
http://www.welie.com/patterns
http://patterntap.com/
http://www.cs.helsinki.fi/u/salaakso/patterns
47
48Miguel Gea
Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada
Móvil
http://pttrns.com
Web http://www.smileycat.com/design_elements/
http://developer.yahoo.com/ypatterns/
http://patternry.com/patterns/
Patrones interfaces sociales
C. Crumlish, E: Malone: Designing Social Interfaces, O’Reilly, 2009
http://www.designingsocialinterfaces.com/patterns/
Referencias (II)
Recommended