Download - Seminario Patrones y tareas de interaccion
![Page 1: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/1.jpg)
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
![Page 2: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/2.jpg)
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
![Page 3: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/3.jpg)
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)
![Page 4: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/4.jpg)
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/
![Page 5: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/5.jpg)
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)
![Page 6: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/6.jpg)
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)
![Page 7: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/7.jpg)
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
![Page 8: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/8.jpg)
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
![Page 9: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/9.jpg)
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...
![Page 10: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/10.jpg)
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
![Page 11: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/11.jpg)
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
![Page 12: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/12.jpg)
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
![Page 13: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/13.jpg)
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
![Page 14: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/14.jpg)
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
![Page 15: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/15.jpg)
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
![Page 16: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/16.jpg)
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
![Page 17: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/17.jpg)
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
![Page 18: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/18.jpg)
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
![Page 19: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/19.jpg)
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
![Page 20: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/20.jpg)
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
![Page 21: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/21.jpg)
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
![Page 22: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/22.jpg)
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
![Page 23: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/23.jpg)
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
![Page 24: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/24.jpg)
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
![Page 25: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/25.jpg)
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)
![Page 26: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/26.jpg)
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
![Page 27: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/27.jpg)
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
![Page 28: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/28.jpg)
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
![Page 29: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/29.jpg)
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
![Page 30: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/30.jpg)
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
![Page 31: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/31.jpg)
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
![Page 32: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/32.jpg)
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
![Page 33: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/33.jpg)
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
![Page 34: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/34.jpg)
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
![Page 35: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/35.jpg)
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
![Page 36: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/36.jpg)
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
![Page 37: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/37.jpg)
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
![Page 38: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/38.jpg)
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
![Page 39: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/39.jpg)
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
![Page 40: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/40.jpg)
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
![Page 41: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/41.jpg)
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
![Page 42: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/42.jpg)
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
![Page 43: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/43.jpg)
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
![Page 44: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/44.jpg)
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=/
![Page 45: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/45.jpg)
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
![Page 46: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/46.jpg)
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”,...
![Page 47: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/47.jpg)
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
![Page 48: Seminario Patrones y tareas de interaccion](https://reader033.vdocuments.co/reader033/viewer/2022051412/5494c05dac7959412e8b4be1/html5/thumbnails/48.jpg)
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)