Tema 4 estrategias de diseño

2,406 views
2,722 views

Published on

Estrategias de diseño
Cuarto tema de la asignatura Diseño de Interfaces de Usuario
Grado de Ingeniería Informática.
Universidad de Granada

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,406
On SlideShare
0
From Embeds
0
Number of Embeds
1,437
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tema 4 estrategias de diseño

  1. 1. Tema 4: Estrategias de Diseño DISEÑO DE INTERFACES DE USUARIO edición 2015 ! ! 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 http://www.slideshare.net/mgea/ 10 nov, 2015
  2. 2. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu El personaje: Google 2 “Céntrate en el usuario y todo lo demás llegará” “..Google es la única empresa abocada a desarrollar el motor de búsqueda perfecto, algo que comprende exactamente lo que el usuario quiere decir y le entrega exactamente lo que está buscando" Con ese fin en mente, Google insiste en continuar innovando y se niega a aceptar las limitaciones de los modelos existentes. Crearon la empresa Google en 1998. http://www.google.com/corporate/tenthings.html Larry Page, Sergey Brin (Google)
  3. 3. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Indice Paradigmas de interacción Diseño orientado a objetos Metáforas Capa de presentación Diseño mediante estilos Documentación 3
  4. 4. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Paradigmas de interacción 4 Modelos de los que se deriva el sistema de interacción y establece las características de la comunicación 1 Modelo de escritorio. 2 Realidad Virtual: Sistema (generado por ordenador) que produce una apariencia de realidad en la que el usuario tiene la sensación de estar presente. 3 Realidad Aumentada: Sistema que define una visión directa o indirecta de un entorno físico del mundo real, cuyos elementos se combinan con elementos virtuales para la creación de una realidad mixta a tiempo real. 4 Computación Ubicua: integración de los sistemas informáticos en el entorno de la persona, de forma que los ordenadores no se perciban como objetos diferenciados. [Rekimoto95] [Lores01] realidad virtual realidad comp. ubicua R: Realidad, C: Computador !" Persona - Computador !" Persona - Mundo real !" Mundo real - Computador
  5. 5. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Paradigmas de interacción 5 Referencias: [Lores01] realidad virtual realidad aumentada
  6. 6. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Paradigmas de interacción 6 Milgram-Virtuality Continuum [Milgram94] [Azuma01]  
  7. 7. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Interacción: Modelo conceptual 7 La interacción es una actividad cognitiva • El usuario debe recordar una serie de órdenes • Realizar unas acciones para conseguir una finalidad • Conocimiento mediante aprendizaje Modelo Mental (Modelo de Usuario) • Aprendizaje • Predecir Modelo Conceptual • Asimilable • Consistente • Simple [Weinch11]
  8. 8. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño Orientado a Objetos 8 Modelo basado en: • Objetos y Acciones • Objetos intrínsecos y de Control Referencias: http://www.cs.umd.edu/class/fall2002/cmsc838s/tichi/oai.html OBJETO Acción Acción INTRINSECOS CONTROL LIBRO Mod_ISBN Mod_TÍTULO REGLA Ocultar Poner_Escala
  9. 9. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño Orientado a Objetos 9 Acciones: Lenguaje de órdenes • Acciones de grupo (insertar, ordenar, eliminar...) • Seleccionar, Crear/Eliminar, Mover/Copiar, Modificar Modos: estado que habilita un conjunto de tareas de interacción al usuario • Acción-Objeto • Objeto-Acción (puede ser como ventana modal) Borrar Mover Rotar El lenguaje modal debe suministrar información de estado
  10. 10. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Ejemplo: Things 10 Objetos: Registro, Papelera, Buzón, proyectos, tareas Objetos control: Visualización, ventana Acciones: Editar, Guardar, (ver)hoy, Nueva (new)..
  11. 11. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño de Metáforas 11 Propósito: • Descripción del modelo conceptual • Establecer similitud entre dos elementos distintos (uno de ellos comprensible por el usuario) Partes del modelo conceptual MODELO DEL SISTEMA MODELO DE TAREAS METÁFORAS
  12. 12. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño de Metáforas 12 Diseño • Identificación tareas usuario • Generación de la metáfora • Evaluación de la metáfora • expresividad • representatividad • adaptabilidad a usuarios • extensibilidad
  13. 13. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño de Metáforas 13 Procesador Textos Selección de metáforas para tipo de aplicaciones Máquina escribir ¿? Sistema Operativo Escritorio Bases de Datos Tablas de Datos Web (HTML) Navegación Maquetación/Imprenta Corta y pegar objetos Aplicación Metáfora Blog Bitácora
  14. 14. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño de Metáforas: ejemplos 14 Escritorio: Papelera Ventana (contenedor) Carpetas (almacén) Discos (dispositivos) Apariencia visual de las metáforas
  15. 15. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño de Metáforas: ejemplos 15 Botones y Acciones:
  16. 16. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño de Metáforas: ejemplos acciones 16 Concepto (acción): Metáfora (objeto real que lo realiza) Cortar Recortar Borrar Borrar Nuevo Pág en blanco
  17. 17. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño de Metáforas: ejemplos acciones 17 Concepto (acción): Metáfora (objeto real que lo realiza) Adelante/ Atrás Rebobinar/Adelantar Compartir Dar/ofrecer
  18. 18. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño de Metáforas: ejemplos acciones 18 Concepto (acción): Metáfora (objeto real que lo realiza) Ampliar Reducir Lupa + - Buscar Lupa/ Prismáticos
  19. 19. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño de Metáforas: ejemplos objetos 19 Concepto (objeto): Metáfora (objeto) Elementos borrados Papelera (contenedor) Dispositivo almacenamiento Buscar comportamiento similar Disquete
  20. 20. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Metáforas y affordances 20 Diálogo con pestañas: - Intuitivo (y fácil de usar) Version 1 Version 2 Referencia:Joel Spolsky.Affordances and Metaphors. http://www.joelonsoftware.com/uibook/chapters/fog0000000060.html
  21. 21. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Metáforas y affordances 21 Diálogo con pestañas: - Con sobrecarga de opciones pierde su eficacia Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm
  22. 22. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Metáforas y affordances 22 Diálogo con pestañas: - Ambito de las acciones (confusion) Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm
  23. 23. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Metáforas y affordances 23 Vista en álbum (cover flow): - Ver imagen del álbum que contiene “música” Version 2
  24. 24. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 24 ! ! Diseño para dispositivos: layout
  25. 25. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 25 Mobile Device Screen Sizes Resource Guide Diseño para dispositivos: layout
  26. 26. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Importancia: - Percepción del usuario - Gestión de recursos - Representación de objetos Layout 26 simbología, codificación tamaño de pantalla, uso del ratón impresión general del sistema Objetivo: - Organizar la información de E/S y su apariencia [Tidwell06]
  27. 27. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Composición: • Diseño del formato de pantalla • Representación de la información • Realimentación • Comunicación (mensajes) Layout 27 ! " I
  28. 28. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Características - jerarquía visual (Densidad, tamaño, color, posición, regularidad) - Flujo visual (continuidad de la narración) Layout - diseño de páginas 28 [Tidwell06]
  29. 29. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Layout. Principios de claridad visual 29 Aspectos de diseño: • Claridad Visual (agrupación y alineación) # Enfatizar la organización lógica de la información (Reglas de Gestalt) • Codigos visuales # Distinción visual entre elementos de distinta naturaleza • Consistencia visual # Organización de los elementos de distinta naturaleza • Formato de pantalla # Gestión y organización del espacio disponible Similitud Proximidad Clausura Continuidad
  30. 30. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Principios de Gestalt 30 http://webdesign.tutsplus.com/es/articles/the-gestalt-principle-design-theory-for-web-designers--webdesign-1756
  31. 31. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Layout: claridad visual 31 Principios de Gestalt: - Análisis de cómo organiza el observador los estímulos visuales ➫ Clausura ➫ Continuidad ➫ Similitud # Objetos similares se perciben como un único estímulo # Percepción del área/forma (cierre) que engloba a los objetos # Discriminación de objetos diferentes según continuidad natural ➫ Proximidad # Objetos próximos se perciben como un único estímulo
  32. 32. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Layout.: claridad visual 32 [Tidwell06, Capt4]
  33. 33. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Layout: claridad visual 33 BOTONES: Agrupación Visual y similitud
  34. 34. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Layout: Formato y Consistencia visual 34 ➫ Simetría Conocido desde la antigüedad como una propiedad de los objetos en relación al Universo ➫ Balanceado ➫ Regularidad y acentuación ➫ Agrupamiento y alineamiento
  35. 35. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Layout: Formato y Consistencia visual 35 ➫ Simetría➫ Balanceado ➫ Regularidad y acentuación ➫ Agrupamiento y alineamiento
  36. 36. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Layout: Formato y Consistencia visual 36 Ubicación desestructurada [Galitz02]
  37. 37. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 37 Ubicación estructurada (alineación) Layout: Formato y Consistencia visual [Galitz02]
  38. 38. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 38 [Galitz02] Layout: Formato y Consistencia visual
  39. 39. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 39 Uso de controladores geométricos (layout manager) Métrica Diseño : - Densidad general/local - Agrupaciones - Volumen información [Galitz02] Layout: Formato y Consistencia visual
  40. 40. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 40 Proporción: Relación entre elementos 1:1 1:2 a b = = b a+b 1.618... La sección Áurea Layout: Formato y Consistencia visual
  41. 41. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 41 (-) Alineación (-) Claridad visual: agrupar para reducir complejidad (-) Enfatizar etiquetas de campos de edición Ejemplos: Layout: Formato y Consistencia visual
  42. 42. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 42 (+) Formato 1:1 (+) Agrupación (+) Simetría Ejemplos: Layout: Formato y Consistencia visual
  43. 43. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 43 (+) Agrupación (+) Balanceado (+) Continuidad Ejemplos: Layout: Formato y Consistencia visual
  44. 44. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 44 2 Ejemplos: Tamaños de despliegue (-) Tamaño submenú frente a tamaño de pantalla (Windows XP) Layout: Formato y Consistencia visual
  45. 45. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: códigos visuales 45 Diseño de la Información: Preparación de la información para mostrarla de forma comprensible, y que pueda ser utilizada por los humanos de forma eficiente y efectiva, utilizando los medios más naturales para su adquisición. Técnicas: - Comunicación visual - Representación espacial de conceptos - Simbología y codificación
  46. 46. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: códigos visuales 46 El lenguaje icónico Representación gráfica de un concepto Importancia: - Rápido Reconocimiento - Internacionalización - Espacio $ % & ' ( ) *
  47. 47. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: códigos visuales 47 El lenguaje icónico: Propiedades - Reconocimiento - Recuerdo - Discriminación Elementos del lenguaje: - Acciones - Objetos
  48. 48. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: códigos visuales 48 Reconocimiento Discriminación
  49. 49. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: diseño de Iconos 49 Diseño iconos. Principios 1. Usar la metáfora apropiada 2. Considerar compatibilidad internacional 3. Representación abstracta simbólica 4. Consistencia visual en familia de iconos Referencia: http://www.nerv.es/blog/10-errores-comunes-en-el-diseno-de-iconos/
  50. 50. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: diseño de Iconos 50 Diseño iconos. Principios 1. Usar la metáfora apropiada
  51. 51. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: diseño de Iconos 51 Diseño iconos. Principios 2. Considerar compatibilidad internacional (y contexto cultural) a b c d
  52. 52. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: diseño de Iconos 52 Diseño iconos. Principios 3. Representación abstracta simbólica Evitar texto en iconos Simplicidad en detalles con significado Mac OSX XP OS/2 Lisa KDE
  53. 53. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: diseño de Iconos 53 Diseño iconos. Principios 3. Representación abstracta simbólica b) a) c) d)
  54. 54. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: diseño de Iconos 54 Diseño iconos. Principios 4. Consistencia visual en familia de iconos Usar un foco de luz consistente Optimizar la resolución Color 2D /3D
  55. 55. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: diseño de Iconos 55
  56. 56. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: el color 56 El Color Tono Brillo saturación
  57. 57. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: el color 57 Objetivos Ameno (satisfacción del usuario) Refuerza la organización lógica _______________ Centra la atención ____________
  58. 58. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: el color 58 El color. Principios 1 - Usar el color como técnica de codificación
  59. 59. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: el color 59 El color. Principios 2 - Uso del color conservadoramente Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm
  60. 60. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: el color 60 El color. Principios 3 - Prestar atención a la combinación de colores Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm
  61. 61. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Presentación: el color 61 Tema 4. Estrategias de Diseño El color. Principios 4 - Códigos de color modificables por el usuario
  62. 62. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño mediante Estilos 62 Estilos de interacción - Diseño Menús - Navegación - Formularios - Diseño Web - Patrones de Interacción The Essential Guide to User Interface Design Second Edition An Introduction to GUI Design Principles and Techniques Wilbert O. Galitz John Wiley & Sons, Inc. NEW YORK • CHICHESTER • WEINHEIM • BRISBANE • SINGAPORE • TORONTO Wiley Computer Publishing
  63. 63. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Menú 63Referencia: Psycology of menu selection. http://www.lap.umd.edu/poms/ Menú con diferente apariencia
  64. 64. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Menú 64 Organización: Simple Secuencial Arbol Red Criterio - Número de opciones - Organización semántica - Información temporal
  65. 65. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Menú 65 Componentes:
  66. 66. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Menú 66 Estandarización: - Nombre de las opciones - Ubicación relativa Favorece el aprendizaje y la retención
  67. 67. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Menú 67 Interacción guiada por acciones Interacción guiada por objetos Archivo Mantenimiento Movimientos Informes Ayuda Películas Socios Proveedores Auxiliares Alquilar Devolver Reservar Pedidos P. Alquiladas Socios Por demanda Archivo Películas Socios Proveedores Auxiliares
  68. 68. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Menú 68 Elementos Botones (simples, radio, check) objetos Menús (barra principal, pulldown y anidados) Consideraciones No sobrecargar los menús (7± 2) Nombre significativo de los botones Minimizar el espacio (uso de lenguaje icónico) Aplicar agrupamiento: Similitud Por importancia Alfabético Más frecuentes Favorece tiempo de respuesta, aprendizaje y retención en usuario
  69. 69. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Menú 69 Técnicas: Desactivar Evitar errores
  70. 70. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Menú 70 Aplicar técnicas de agrupación y desactivar
  71. 71. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Menú: ejemplos 71 Tema 4. Estrategias de Diseño 15 ítem / 5 bloques / 2 anidados 9 ítem Sobrecarga de items: aplicar técnicas de agrupación y desactivar
  72. 72. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Formularios 72 Uso Introducción masiva de datos relativos a un concepto del dominio de la aplicación (cliente, propiedad) Método eficaz Técnicas Agrupación y alineación : legibilidad Uso adecuado de controles Disposición de Acciones
  73. 73. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Manipulación Directa 73 Principios: 1 Virtualidad Representación de la realidad manipulable Representación familiar de objetos y acciones 2 Transparencia Centrarse en la actividad en vez de la herramienta Iconos reconocibles 3 Facilidad de uso Representación física y espacial más fácil de recordar Realimentación visual (selección, acciones, etc.) 4 Centrado en el Ratón (mouse) Mecanismo de selección/arrastre
  74. 74. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Estilo Manipulación Directa 74 Manipulación tangible
  75. 75. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño Web 75 1 Objetivo • Organizar y estructurar la información de forma adecuada • Favorecer la navegación • Problema de sobrecarga de información 2 Organización Web • Dividir en contenido en fragmentos lógico • Organizacion jerárquica (en base a importancia) • Establecer relaciones entre fragmentos de contenido • Balancear el diseño (p.e. dos niveles de profundidad) 3 Navegacion Web: • Donde estoy • De dónde vengo • Donde puedo ir • Como puedo llegar rápidamente
  76. 76. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Diseño Interacción: Patrones 76 Objetivo: - Reutilización de elementos de interacción frecuente Técnicas: - Descripción de alto nivel de las tareas Recursos - User Interface design Pattern library http://ui-patterns.com/ - http://designingwebinterfaces.com - Pattern library for Interaction design www.welie.com
  77. 77. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu Documentación 77 Documentación Usuario Comprar Aprender Usar Medio Papel On-line Características Versión demo (tour guiado) Cursos Tutorial Manual de Usuario Ayuda en línea • Hipertexto • Multimedia • Sensible al contexto • Consulta (buscador) • Manual • Plantillas • Folletos • Libro • Guía rápida consulta Herramientas:
  78. 78. Tema 4. Estrategia de diseño. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 78 Referencias [Azuma01] Azuma, R., Baillot, Y., Behringer, R., Feiner, S., Julier, S. & MacIntyre, B. Recent advances in augmented reality. IEEE Computer Graphics and Applications 2001, Vol. 21, No. 6, pp. 34–47 Online: http://www.cc.gatech.edu/~blair/papers/ARsurveyCGA.pdf [Galitz02] Galitz, W.: The Essential Guide to User Interface Design, Wiley 2002 [Levin14] M. Levin: Designing Multi-Device Experiences, O’Reilly Media 2014 [LOWD13] T. Lowdermilk, User-Centered Design. O'Reilly Media, Inc. 2013 (online UGR: http://sl.ugr.es/ 06NR) [Lores01] Metáforas, estilos y paradigmas. En J. Lorés (ed.) Interacción Persona-Ordenador: libro digital. ISBN: 84-607-2255-4, AIPO-2001 http://www.aipo.es/libro/pdf/03Metafo.pdf [Pyle13] B. Pyle, “Mobile Device Screen Sizes Resource Guide,” Jacobs & Clevenger, May 2013, http://bit.ly/IT06W5. [Rekimoto95] Rekimoto, The World through the Computer: Computer Augmented Interaction with Real World Environments. 1995 http://www.sonycsl.co.jp/person/rekimoto/uist95/uist95.html [Tidwel06] Tidwell, J.: Designing Interfaces: Patterns for Effective Interaction Design. O'Reilly, 2006 [Weinch11] Susan M. Weinschenk. 2011. http://uxmag.com/articles/the-secret-to-designing-an-intuitive- user-experience Patrones de interacción. http://ui-patterns.com/

×