Seminario Patrones y tareas de interaccion
Upcoming SlideShare
Loading in...5
×
 

Seminario Patrones y tareas de interaccion

on

  • 517 views

Seminario Patrones de interacción

Seminario Patrones de interacción
Diseño de Interfaces de Usuario
Grado de Ingeniería Informática.
Universidad de Granada

Statistics

Views

Total Views
517
Views on SlideShare
289
Embed Views
228

Actions

Likes
0
Downloads
7
Comments
0

3 Embeds 228

http://utopolis.ugr.es 199
http://ricmy-1207.blogspot.com 23
http://webcache.googleusercontent.com 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Seminario Patrones y tareas de interaccion Seminario Patrones y tareas de interaccion Presentation Transcript

  • Diseño de Interfaces de Usuario CASO DE ESTUDIO Patrones y Tareas de interacción o Tareas de interacción o Patrones de interacción o Layout (disposición bocetos) Miguel Gea (mgea@ugr.es) Dpt. Lenguajes y Sistemas Informáticoss Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu Noviembre, 2013
  • Tareas interacción:  Tareas o o o o o o Buscar Navegar por la información Formulario Identificación Preferencias Asistencia en la tarea Patrones Soluciones de interacción  Layout (Boceto) o Paginación (disposición elementos). o Ventanas de Diálogo Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 2 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Patrones de organización (layout) http://designinginterfaces / 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) Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 3 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 6 Patrones de organización http://designinginterfaces / Patrones de organización el diseño de una aplicación 1.Feature, Search, and Browse 2.News Stream 3.Picture Manager 4.Dashboard 5.Lienzo y paletas http://designinginterfaces.com/patterns/ Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 4 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Patrones de organización (layout) http://designinginterfaces / PATRON 1 : CARACTERÍ STICA /BUSCAR/ NAVEGAR (feature/search/browse) Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 5 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Patrones de organización (layout) http://designinginterfaces / PATRON 2 : FLUJOS DE INFORMACION (news stream) Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 6 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Patrones de organización (layout) http://designinginterfaces / PATRON 3 : GESTOR DE IMAGENES Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 7 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Patrones de organización (layout) http://designinginterfaces / PATRON 4 : Tablero / Dashboard Dashboard - MAC OS X img: http://pacmac.es/eliminar-dashboard-de-os-x-mavericks/ Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada Google - Anaytics 8 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 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  Patrones: o o Homogénea / heterogenea o Search Box / caja de búsquedaTable filte filtrado de tabla Advanced Search / búsqueda av anzadaAutocomplete / Autocompletar Tag Cloud...  Clasificada (tags) o no o Del tipo…, que posea …, marcada como…  Busqueda o o o o o o o 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 Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 9 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 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 Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 10 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 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) b) a) Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 11 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Tarea Buscar: Busqueda avanzada  Gran volumen de información homogénea: páginas web  Busqueda lingüística (avanzada) Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 12 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Tarea Buscar: autocompletar  El usuario introduce la etiqueta y se buscan concordancias  Sugerencias de posibles nombres mientras se escribe Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 13 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Tarea Buscar: información clasificada (indexada)  Información homogenea (ayuda)  Busqueda clasificada (alfabéticamente) Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 14 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Buscar: ejemplo diferentes alternativas  Información heterogénea (secciones)  Busqueda múltiple: lingüística, categorias, social… Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 15 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Buscar: ejemplo (Biblioteca multimedia) Varios modos (alternativos) B18 Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 16 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Busqueda ciega  Un único modo Para qué? Qué pasa si no se tiene el DNI? Cuantos usuarios hay? Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 17 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Resultados busqueda Presentación tabulada (ordenación) B18 Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 18 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Resultados busqueda Presentación tabulada (solo?) Para qué se quiere la Información? Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 19 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Navegar por los datos OBJETIVO o 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 viene o Dónde puede ir o Como se puede hacer rápidamente Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 20 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Navegar por los datos (técnicas) Anterior - siguiente Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 21 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Navegar por los datos (técnicas) Miga de Pan Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 22 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Navegar por los datos (técnicas) Presentación Tabulada Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 23 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Navegación por dependencias (browse)  Busqueda categorías multinivel (dependencia jerárquica) Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 24 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Navegar por los datos (técnicas) Selección en dos niveles (maestro detalle) Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 25 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Formularios Formulario  OBJETIVO o Entrada (masiva) de datos representando una entidad/objeto  COMPOSICIÓN o o o o 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 Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 26 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Formularios: opinar Valoración cualitativa y cuantitativa Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 27 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Asistentes Controles B5 Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 28 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Asistentes Valores por defecto  Combos  Selecciones  Campos de texto  Campos con formato Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 29 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Asistentes Manejo de datos: Doble Lista Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 30 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Disposición general (layout)  Secuencia del diálogo  Ventanas complementarias/independientes Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 31 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Paginación B5 Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 32 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Paginación: orientada a dispositivo Objetos Acciones Navegación Navegación Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 33 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Paginación Orientada a función Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 34 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Paginación OBJETIVO Orientada a Documento  Un conjunto de elementos (paletas, botones) para control del texto COMPOSICIÓN  Valores modales, navegación  Uno o varios docs Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 35 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Paginación Orientada a Objeto OBJETIVO: Vincular las acciones según objeto Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 36 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 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 Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 37 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Paginación Capas / Pestañas Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 38 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Paginación Pestañas de Navegación Uno o dos niveles Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 39 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Paginación Panel con caja de herramientas Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 40 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Ventanas de Diálogo Ventanas Modales Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 41 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Ventanas de Diálogo Distinta configuración para misma tarea Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 42 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Ventanas de Diálogo: mensajes Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 43 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Patrones de diseño: descripción http://robo.to/ http://www.kissmetrics.com/ http://messagepub.com/login Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada http://97bottles.com/account/signin/?next=/ 44 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Patrones de diseño: clasificaciones http://ui-patterns.com/ • • • • Entradas de información (formularios) Navegación http://www.welie.com/patterns Tratar con datos Sociales • Navegación • Búsqueda ttp://designinginterfaces.com/ • Tratar con datos • Obtener entradas • Organizar el Contenido • Interacciones básicas • Navegación y exploración • Compras • Organizar la página • Elecciones • Acciones Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 45 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 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”,... Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 46 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 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 Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 47 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • Referencias (II) 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/patt erns/ Diseño de Interfaces de Usuario http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 48 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos