Seminario Patrones de interacción Diseño de Interfaces de Usuario Grado de Ingeniería Informática. Universidad de Granada Primera act. Nov. 2013 Ultima act. Nov 2015

1. SEMINARIOS
Miguel Gea (mgea@ugr.es)
Dpt. Lenguajes y Sistemas Informáticos
Grado en Ingeniería Informática
Universidad de Granada
http://utopolis.ugr.es/diu
Patrones y
tareas de interacción
DISEÑO DE INTERFACES DE USUARIO
• Tareas de interacción
• Patrones de interacción
• Layout (disposición bocetos)
11 Nov, 2015

2. Tareas
Buscar
Navegar por la información
Formulario
Identificación
Preferencias
Asistencia en la tarea
…
Layout (Boceto)
Paginación (disposición elementos)
Componentes de la interacción:
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2
Patrones
Soluciones de interacción

3. Patrones para organizar la información
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
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 (organizar CONTENIDO):
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)
Basado en las tareas principales del usuario: información, procesos,
creación.
3

4. Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 4
1) Sobre un elemento
• hay un elemento principal
• objetivo: gestionar la interacción centrada en ese
elemento (ver, ampliar, reproducir…)
• Ejemplos patrones: VISTAS ALTERNATIVAS
http://designinginterfaces.com/patterns/
Patrones para organizar la información

5. Patrones para organizar la información
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 5
http://designinginterfaces.com/patterns/
2) Sobre lista de elementos
• muy común y frecuente (menús, productos, …)
• muchas posibilidades organización atendiendo:
extensión de la lista, plana/jerárquica, ordenación,
filtros, búsquedas
• Ejemplos: PATRÓN DESTACADO/BUSCAR/NAVEGAR, GESTOR DE IMÁGENES /
GALERIA, FLUJOS DE NOTICIAS/INFORMACION

6. Patrones para organizar la información
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 6
http://designinginterfaces.com/patterns/
Dashboard - MAC OS X
img: http://pacmac.es/eliminar-dashboard-de-os-x-mavericks/ Google - Anaytics
3) Herramientas para crear algo
• Organizar la información en torno a un elemento y
su manipulación (editor + herramientas)
• Ejemplos
• Canvas con paleta
• Espacios de trabajo (workspaces)
• Tablero / Dashboard

7. Patrones para organizar la información
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 7
http://designinginterfaces.com/patterns/
4) Sobre una tarea
• realizar una actividad (imprimir, registrar, comprar)
• tarea con pasos, elecciones..
• Ejemplos: ASISTENTE (WIZARD), PREFERENCIAS

8. Patrones para organizar la información
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 8
5) Combinado: Destacado/Buscar/Navegar
• PATRÓN organización: DESTACADO/BUSCAR/
NAVEGAR
• combina varios estilos para organizar la información
http://designinginterfaces.com/patterns/

9. Ejemplos: centrado en tarea
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 9
[skynet, 2015/16]

10. Ejemplos: centrado en tarea
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 10
[skynet, 2015/16]

11. Tareas de usuario
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 11
! Buscar (search). El usuario quiere localizar un elemento
dentro de una colección mediante la identificación (con
datos relativos al elemento)
!Navegación (browse) El usuario quiere localizar contenido
y para ello se recorre los item en el espacio del trabajo
(menús)
! Datos de usuario. Se solicita información al usuario.
Requiere completar datos.
!Informacion. Muestra información estructurada, resultado
de una busqueda, una selección, categorías, datos, etc.
! Asistencia. Soporte, ayuda…

12. Tarea: Buscar/search
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 12
Objetivo:
Suministrar exactamente la información que el usuario demanda
en un formato fácil de usar y comprensible
Requisitos:
Item conocido a priori (confirmar su existencia)
Volumen de información
Tipo de Información
Homogénea / heterogenea
Clasificada (tags) o no
Del tipo…, que posea …, marcada como…
Tipo de búsqueda
Lingüística (en lenguaje natural) Que contenga.., que coincida…
Espacial (cerca de …)
Contextual (creada en … por …)
Semántica (que me explique…)
Visual (que tenga apariencia de…)
Social (que sea popular…)
Automático (filtrado)
Fijar condiciones y aplicar
Patrones:
Search Box / caja de búsqueda
Table filter / filtrado de tabla
Advanced Search / búsqueda avanzada
Autocomplete / Autocompletar
Tag Cloud
...

13. Tarea Buscar. Patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 13
Caja de búsqueda.
El usuario debe buscar un ítem o información específica
Puede tener una caja de filtrado
www.tucows.com
Search Box
http://www.welie.com/patterns/
1997 2005 2015

14. Tarea Buscar. Patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 14
El usuario introduce la etiqueta y se buscan concordancias
Agilizar selección mediante AUTOCOMPLETAR
Sugerencias de posibles nombres mientras se escribe
autocomplete
http://www.welie.com/patterns/

15. Tarea Buscar. Patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 15
Gran volumen de información (homogénea)
El usuario quiere acotar la búsqueda mostrada en la tabla a unos datos
concretos. FILTRADO
Filtrado selectivo por a) Clasificación y b) Contenido (en rango)
a)
b)
http://ui-patterns.com/patterns/LiveFilter
live filter

16. Tarea Buscar. Patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 16
Gran volumen de información homogénea: páginas
web. Búsqueda lingüística (avanzada)
advanced search
http://www.welie.com/patterns/

17. Tarea Buscar. Ejemplos
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 17
[Pract. brico J.A. 2014/15]
[Pract. museo 2006/07] [Pract. museo. Galería arte Munich 2006/07]

18. Tarea Buscar. Resultados búsqueda
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 18
Objetivo al buscar…. obtener unos resultados
Presentación tabulada (solo?)
Para qué se quiere la Información?

19. Tarea Buscar: búsqueda ciega
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 19
Un único modo
Para qué?
Qué pasa si no se tiene el DNI?
Cuantos usuarios hay?

20. Tarea Buscar
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 20
!Información homogénea (ayuda)
!Busqueda clasificada (alfabéticamente)
http://www.welie.com/patterns/showPattern.php?patternID=site-index
site index

21. Tarea Navegar
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 21
OBJETIVO
Facilitar el paso entre ventanas e información de
forma sencilla y rápida, de modo que el usuario
sepa en cada momento:
- Dónde se está (puntos de referencia)
- Dónde se puede ir (wayfinding)
- Orientarse (mapas)
- Como se puede hacer rápidamente (mantener
distancias cortas)

22. Bookmarks
(marcas)
Tarea Navegar: modos navegación
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 22
Multinivel (zonas
interconectados entre sí )
[Tidwel07]
Multinivel
(todo conectado)
Nodo y enlaces
(todo conectado)
Piramidal (nodo principal y
navegación entre secundarios)
Secuencial
(paso a paso)
Pan/Zoom
(exporación)
Puntos de entrada
(claramente identificados)
Navegación modal
(ventanas modales)

23. Tarea Navegar: Patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 23
mapa del sitio. búsqueda de una “página” en web
http://www.welie.com/patterns/showPattern.php?patternID=sitemap
site map / footer map

24. Tarea Navegar: Patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
tab navigation
http://www.welie.com/patterns/showPattern.php?patternID=doubletab
http://ui-patterns.com/patterns/NavigationTabs/
24
Presentación anidada con tabuladores
Facilita navegación entre grupos de items relacionados (ej. menú)

25. Tarea Navegar: Patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
menu / fat menu
25
- Página con enlaces
- Menu desplegable (drop-down)
con multiples opciones (fat menu)
http://designinginterfaces.com/patterns/fat-menus/

26. Tarea navegación: Patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Menús apilados
Conjunto de opciones/acciones agrupadas en paneles con
comportamiento dentro de una barra de herramientas
Uso:
Se pueden desplegar (abrir/cerrar)
Pueden ser excluyentes
26
http://ui-patterns.com/patterns/AccordionMenu
http://www.welie.com/patterns/showPattern.php?patternID=accordion
accordion

27. Navegación por dependencias
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 27
Navegación por categorías multinivel (dependencia jerárquica)

28. Tarea navegar: Patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 28
El usuario quiere mostrar un conjunto de datos que
no se pueden visualizar en una única pantalla
http://ui-patterns.com/patterns/Pagination/examples/696
http://ui-patterns.com/patterns/Pagination/
http://www.welie.com/patterns/showPattern.php?patternID=paging
http://www.welie.com/patterns/images/paging-digg.png
pagination

29. Tarea Navegar: patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 29
breadcrumbs
http://www.welie.com/patterns/showPattern.php?patternID=crumbs
http://ui-patterns.com/patterns/Breadcrumbs/
El usuario necesita conocer donde está dentro de una estructura
jerárquica (con más de 3 niveles de profundundidad)
Permite moverse rápidamente entre los niveles

30. Tarea Buscar: vista alternativa (ejemplo)
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
B18 Biblioteca multimedia
30
Varios modos (alternativos)

31. Tarea: Ejemplos navegación
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 31
Navegación piramidal, secuencias

32. Tarea: Ejemplos navegación
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 32
Navegación Menu. Orden items?

33. Tarea: input (datos del usuario)
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 33
OBJETIVO
Entrada (masiva) de datos representando una entidad/objeto
COMPOSICIÓN
Campos de edición y grupos de botones
El usuario necesita conocer el tipo de información necesaria en
cada caso
Debe ser legible y fácilmente editable
Debe conocer lo que es obligatorio de lo que es opcional

34. Tarea: input
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 34
Identificar al usuario (iniciar sesión, Identificar, Cerrar
sesión, registrar)
signIn
http://www.kissmetrics.com/
http://messagepub.com/login
http://robo.to/
http://97bottles.com/account/signin/?next=/

35. Tarea: input
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 35
list builder
[TIDWEL07]
http://www.welie.com/patterns/showPattern.php?patternID=list-builder
http://ux.stackexchange.com/questions/79542/
better-list-builder-pattern

36. Tarea: input
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 36
structured format / Fill in the blank
[TIDWEL07]

37. Tarea: input ejemplos
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 37

38. Tarea. mostrar información
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 38
Presentación datos (resultados…).
Ordenación (cronológica, relevancia, alfabética)
Jerarquía (nivel, maestro/detalle)
Apariencia (texto/imagen)

39. Tarea mostrar: patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 39
http://designinginterfaces.com/patterns/news-stream/
news stream
Mostrar items (lista) en orden cronológico inverso (ultimo
en primer lugar)
Actualización dinámica. Combina diferentes fuentes en un
único flujo

40. Tarea mostrar: patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 40
Tarea Mostrar Datos: Maestro/detalle
Mostrar información
Dos paneles dependientes. el primero muestra una lista de items y el seg
el seleccionado
Selección en dos niveles para navegar por datos
http://designinginterfaces.com/patterns/two-panel-selector/
two panel selector

41. Tarea Mostrar: patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 41
http://ui-patterns.com/patterns/Gallery/examples/3170
http://designinginterfaces.com/wp-content/images/picture-manager-iphoto.png
http://designinginterfaces.com/wp-content/images/picture-manager-flickr.png
picture manager / gallery
Mostrar retícula de imágenes en miniatura (THUMBNAIL GRID)

42. Tarea Mostrar: patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 42
list inlay
Mostrar lista de elementos en filas o columnas. Cuando se
selecciona, se muestran detalles.
Uso para: noticias, mail,
Uso común en dispositivos móviles
http://designinginterfaces.com/patterns/list-inlay/

43. Tarea Mostrar patrón
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 43
Seleccionar un item de un posible conjunto (de forma visual)
Pasar de uno a otro…
http://www.welie.com/patterns/showPattern.php?patternID=carrousel
http://ui-patterns.com/patterns/Carousel/
http://ui-patterns.com/patterns/Carousel/examples/299
http://ui-patterns.com/patterns/Carousel/examples/323
carrusel

44. Tarea. mostrar, ejemplos
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
B18
44
Presentación datos tabulada (ordenación). Cómo se
navega entre elementos.. como se sabe donde se
está y el elemento buscado?)

45. Tarea. hacer una cosa (tarea)
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 45
Ayuda a tomar una decisión, hacer algo… Actúan
como asistentes o ventanas auxiliares para un tipo de
dato o acción solicitada

46. Tarea: Asistentes
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 46
! El usuario quiere realizar una tarea pero que implica una serie de decisiones o
pasos previos
! Facilitar la realización de esos pasos (para no expertos)
! importante fijar “valores por defecto
wizards

47. Tarea: Asistentes
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 47
http://ui-patterns.com/patterns/Wizard
http://www.welie.com/patterns/showPattern.php?patternID=wizard
Aplicados a distintos elementos para indicar los
valores por defecto (Combos, Selecciones, Campos de
texto, Campos con formato..)
wizards

48. Tarea: Asistentes
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 48
Procesos de asistencia por pasos.
wizards
http://ui-patterns.com/patterns/Wizard/examples/1441
http://ui-patterns.com/patterns/StepsLeft/

49. Disposición general (organización)
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 49
Forma de componer la información en páginas.

50. Paginación
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
B5
50
organización de los espacios y su uso

51. Paginación: orientada a dispositivo
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Navegación
Navegación
Objetos
Acciones
51
Forma de usar espacios en dispositivos (predefinidos)

52. Patrones de diseño: clasificaciones
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
• 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
52

53. Patrones diseño: clasificación / vistos
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 53
accordion
advanced search
autocomplete
breadcrumbs
carrusel
fat menu
fill in the blank
gallery
list builder
list inlay
live filter
menu
pagination
picture manager
Search Box
signIn
site index
site map
structured format
tab navigation
two panel selector
wizards

54. Patrones diseño: ejemplo descripción
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
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”,...
54

55. Librerías de patrones
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
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
55

56. Librerías de patrones
Seminario: Patrones y tareas interacción . Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
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/
56