seminario patrones y tareas de interaccion

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 (mgea@ugr.es)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)