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 ([email protected])Dpt. Lenguajes y Sistemas InformáticossGrado en Ingeniería InformáticaUniversidad de Granadahttp://utopolis.ugr.es/diu Noviembre, 2013

mailto:[email protected]

http://utopolis.ugr.es/diu

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


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)


http://designinginterfaces.com/

4Miguel Gea


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/patterns/


5Miguel Gea



PATRON 1 : CARACTERÍSTICA /BUSCAR/ NAVEGAR (feature/search/browse)



6Miguel Gea



PATRON 2 : FLUJOS DE INFORMACION (news stream)



7Miguel Gea



PATRON 3 : GESTOR DE IMAGENES



8Miguel Gea



PATRON 4 : Tablero / Dashboard

Dashboard - MAC OS Ximg: http://pacmac.es/eliminar-dashboard-de-os-x-mavericks/

Google - Anaytics



http://pacmac.es/eliminar-dashboard-de-os-x-mavericks/

http://pacmac.es/eliminar-dashboard-de-os-x-mavericks/

9Miguel Gea


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...


http://www.welie.com/patterns/showPattern.php?patternID=search

http://www.welie.com/patterns/showPattern.php?patternID=advanced-search

10Miguel Gea


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


http://www.tucows.com/

11Miguel Gea


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


Tarea Buscar: Busqueda avanzada

Gran volumen de información homogénea: páginas web Busqueda lingüística (avanzada)

12


13Miguel Gea


Tarea Buscar: autocompletar

El usuario introduce la etiqueta y se buscan concordancias

Sugerencias de posibles nombres mientras se escribe


14Miguel Gea


Tarea Buscar: información clasificada (indexada)

Información homogenea (ayuda) Busqueda clasificada (alfabéticamente)

14


15Miguel Gea


Buscar: ejemplo diferentes alternativas

Información heterogénea (secciones) Busqueda múltiple: lingüística, categorias, social…

15


16Miguel Gea


Buscar: ejemplo (Biblioteca multimedia)

B18

Varios modos (alternativos)

16


17Miguel Gea


Busqueda ciega

Un único modo

Para qué?Qué pasa si no se tiene el DNI? Cuantos usuarios hay?

17


18Miguel Gea


Resultados busqueda

B18

Presentación tabulada (ordenación)

18


19Miguel Gea


Resultados busqueda

Presentación tabulada (solo?)

Para qué se quiere la Información?

19


20Miguel Gea


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


Navegar por los datos (técnicas)

Anterior - siguiente


22Miguel Gea



Miga de Pan


23Miguel Gea



Presentación Tabulada


24Miguel Gea


Navegación por dependencias (browse)

Busqueda categorías multinivel (dependencia jerárquica)

24


25Miguel Gea



Selección en dos niveles (maestro detalle)


26Miguel Gea


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


Formularios: opinar

Valoración cualitativa y cuantitativa


28Miguel Gea


B5

Controles

Asistentes


29Miguel Gea


Valores por defecto

Asistentes

Combos

Selecciones

Campos de texto

Campos con formato


30Miguel Gea


Asistentes

Manejo de datos: Doble Lista


31Miguel Gea


Disposición general (layout)

Secuencia del diálogo Ventanas complementarias/independientes


32Miguel Gea


Paginación

B5


33Miguel Gea


Paginación: orientada a dispositivo

Navegación

Navegación

Objetos

Acciones


34Miguel Gea


Paginación

Orientada a función


35Miguel Gea


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


Paginación

Orientada a ObjetoOBJETIVO: Vincular las acciones según objeto


37Miguel Gea


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


Paginación

Capas / Pestañas


39Miguel Gea


Paginación

Pestañas de Navegación

Uno o dos niveles


40Miguel Gea


Paginación

Panel con caja de herramientas


41Miguel Gea


Ventanas de Diálogo

Ventanas Modales


42Miguel Gea


Ventanas de Diálogo

Distinta configuración para misma tarea


43Miguel Gea


Ventanas de Diálogo: mensajes


44Miguel Gea


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


Patrones de diseño: clasificaciones

• Entradas de información (formularios) • Navegación • Tratar con datos• Sociales

http://ui-patterns.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


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


Referencias (I)

Genéricos

J. Tidwell, Designing Interfaces: Patterns for Effective Interaction Design, 2nd ed. O’Reilly, 2010



http://www.welie.com/patterns

http://patterntap.com/

http://www.cs.helsinki.fi/u/salaakso/patterns

47

48Miguel Gea


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)

seminario patrones y tareas de interaccion

Education