Tema 4 estrategias de diseño

  • 794 views
Uploaded on

Estrategias de diseño …

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
794
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Diseño de Interfaces de Usuario edición 2013 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 http://www.slideshare.net/mgea/tema-4-estrategias-de-diseo-2013
  • 2. Introducción al DCU Tema 4. Estrategias de Diseño “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 Larry Page, Sergey Brin exactamente lo que está buscando" Google 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 1988. http://www.google.com/corporate/tenthings.html
  • 3. Tema 4. Estrategias de Diseño Paradigmas de interacción Diseño orientado a objetos Metáforas Capa de presentación Diseño mediante estilos Documentación
  • 4. Paradigmas de interacción Tema 4. Estrategias de Diseño 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 realidad virtual produce una apariencia de realidad en la que el usuario tiene la sensación de estar presente en ella. 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 realidad aumentada 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. Referencias: [Lores01] R: Realidad, C: Computador !" Persona - Computador !" Persona - Mundo real !" Mundo real - Computador comp. ubicua
  • 5. Paradigmas de interacción Tema 4. Estrategias de Diseño realidad! virtual! realidad! aumentada! Referencias: [Lores01]
  • 6. Interacción: Modelo conceptual Tema 4. Estrategias de Diseño • 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) • AprendizajePredecir Modelo Conceptual • AsimilableConsistenteSimple Referencias: Susan M. Weinschenk. 2011. http://uxmag.com/articles/the-secret-to-designing-an-intuitive-user-experience
  • 7. Diseño Orientado a Objetos Tema 4. Estrategias de Diseño Modelo basado en: Objetos y Acciones Objetos intrínsecos y de Control OBJETO Acción Acción INTRINSECOS LIBRO Mod_ISBN Mod_TÍTULO CONTROL REGLA Ocultar Poner_Escala Referencias: http://www.cs.umd.edu/class/fall2002/cmsc838s/tichi/oai.html
  • 8. Diseño Orientado a Objetos Tema 4. Estrategias de Diseño 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 Borrar Mover Rotar El lenguaje modal debe suministrar información de estado
  • 9. Diseño de Metáforas Tema 4. Estrategias de Diseño 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 METÁFORAS MODELO DE TAREAS
  • 10. Diseño de Metáforas Tema 4. Estrategias de Diseño Diseño Identificación tareas usuario Generación de la metáfora Evaluación de la metáfora expresividad representatividad adaptabilidad a usuarios extensibilidad
  • 11. Diseño de Metáforas Tema 4. Estrategias de Diseño Selección de metáforas para tipo de aplicaciones Aplicación Procesador Textos Sistema Operativo Bases de Datos Web (HTML) Maquetación Metáfora Máquina escribir ¿? Escritorio Tablas de Datos Navegación Corta y pegar objetos
  • 12. Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño Escritorio: Ventana (contenedor) Carpetas (almacén) Discos (dispositivos) Papelera Apariencia visual de las metáforas
  • 13. Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño Botones y Acciones:
  • 14. Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño Botones y Acciones: Concepto (acción): Cortar Borrar Metáfora (objeto real que lo realiza) Recortar Borrar Pág en blanco Nuevo
  • 15. Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño Botones y Acciones: Concepto (acción): Adelante/ Atrás Compartir Metáfora (objeto real que lo realiza) Rebobinar/Adelantar Dar/ofrecer
  • 16. Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño Botones y Acciones: Concepto (acción): Ampliar Reducir Buscar Metáfora (objeto real que lo realiza) Lupa + - Lupa/ Prismáticos
  • 17. Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño Concepto (objeto): Elementos borrados Dispositivo almacenamiento Buscar comportamiento similar Papelera (contenedor) Disquete Metáfora (objeto)
  • 18. Metáforas y affordances Tema 4. Estrategias de Diseño 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"
  • 19. Metáforas y affordances Tema 4. Estrategias de Diseño Diálogo con pestañas: - Con sobrecarga de opciones pierde su eficacia Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm"
  • 20. Metáforas y affordances Tema 4. Estrategias de Diseño Diálogo con pestañas: - Ambito de las acciones (confusion) Referencia: http://interfacehallofshame.eu/www.iarchitect.com/tabs.htm"
  • 21. Metáforas y affordances Tema 4. Estrategias de Diseño Vista en álbum (cover flow): álbum que contiene “música” Version 1! - Ver imagen del Version 2!
  • 22. Presentación Tema 4. Estrategias de Diseño Objetivo: - Organizar la información de E/S y su apariencia Importancia: - Percepción del usuario ! impresión general del sistema - Gestión de recursos ! tamaño de pantalla, uso del ratón - Representación de objetos ! simbología, codificación
  • 23. Presentación Tema 4. Estrategias de Diseño Composición: "   Diseño del formato de pantalla! "   Representación de la información! "   Realimentación ! !(mensajes)! " I "   Comunicación
  • 24. Presentación: claridad visual Tema 4. Estrategias de Diseño Aspectos de diseño: Claridad Visual # Enfatizar la organización lógica de la información 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
  • 25. Presentación: claridad visual Tema 4. Estrategias de Diseño Principios de Gestalt! Análisis de cómo organiza el observador los estímulos visuales! ➫  Similitud! # Objetos similares se perciben como un único estímulo ➫  Proximidad! # Objetos próximos se perciben como un único estímulo ➫  Clausura! # Percepción del área/forma (cierre) que engloba a los objetos ➫  Continuidad! # Discriminación de objetos diferentes según continuidad natural
  • 26. Presentación: claridad visual Tema 4. Estrategias de Diseño ROTAR EN X ROTAR EN Y ROTAR EN Z MOVER EN X MOVER EN Y MOVER EN Z Proximidad ROTAR EN X ROTAR EN Y ROTAR EN Z MOVER EN X MOVER EN Y MOVER EN Z Sin Agrupación Visual Similitud - Tamaño - Tipo de letra - Indexación - Estilo ROTAR X Y Z MOVER X Y Z Proximidad y Similitud TEMAS APARTADOS •  Puntos Notas Continuidad
  • 27. Presentación: claridad visual Tema 4. Estrategias de Diseño
  • 28. Presentación: claridad visual Tema 4. Estrategias de Diseño BOTONES: Agrupación Visual y cierta similitud
  • 29. Presentación: claridad visual Tema 4. Estrategias de Diseño BOTONES: Agrupación Visual y similitud
  • 30. Presentación: formato pantalla Tema 4. Estrategias de Diseño Conocido desde la antigüedad como una propiedad de los objetos en relación al Universo ➫  Balanceado ➫  Simetría ➫  Regularidad ➫  Agrupamiento y alineamiento y acentuación
  • 31. Presentación: formato pantalla Tema 4. Estrategias de Diseño ➫  Balanceado ➫  Regularidad y acentuación ➫  Simetría ➫  Agrupamiento y alineamiento
  • 32. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ubicación desestructurada
  • 33. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ubicación estructurada (alineación)
  • 34. Presentación: formato pantalla Tema 4. Estrategias de Diseño Referencia: W. Galitz, The Essential Guide to User Interface Design, Wiley 2002"
  • 35. Presentación: formato pantalla Tema 4. Estrategias de Diseño Uso de controladores geométricos (layout manager) Métrica Diseño : - Densidad general/local - Agrupaciones - Volumen información Referencia: W. Galitz, The Essential Guide to User Interface Design, Wiley 2002"
  • 36. Presentación: formato pantalla Tema 4. Estrategias de Diseño Proporción Relación entre elementos 1:1! 1:2! La sección Áurea a! b! =! =! 1.618...! b! a+b!
  • 37. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ejemplos: (-) Alineación (-) Claridad visual: agrupar para reducir complejidad (-) Enfatizar etiquetas de campos de edición
  • 38. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ejemplos: (+) Formato 1:1 (+) Agrupación (+) Simetría
  • 39. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ejemplos: (+) Agrupación (+) Balanceado (+) Continuidad
  • 40. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ejemplos: Tamaños de despliegue 2! (-) Tamaño submenú frente a tamaño de pantalla (Windows XP)
  • 41. Presentación: códigos visuales Tema 4. Estrategias de Diseño 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
  • 42. Presentación: códigos visuales Tema 4. Estrategias de Diseño El lenguaje icónico Representación gráfica de un concepto $ Importancia: Rápido Reconocimiento Internacionalización Espacio % & ' ( ) *+
  • 43. Presentación: códigos visuales Tema 4. Estrategias de Diseño El lenguaje icónico: Propiedades - Reconocimiento- Recuerdo- Discriminación Elementos: - Acciones - Objetos
  • 44. Presentación: códigos visuales Tema 4. Estrategias de Diseño Reconocimiento Discriminación
  • 45. Presentación: diseño de Iconos Tema 4. Estrategias de Diseño Diseño iconos. Principios 1.  2.  3.  4.  Usar la metáfora apropiada Considerar compatibilidad internacional Representación abstracta simbólica Consistencia visual en familia de iconos Referencia: http://www.nerv.es/blog/10-errores-comunes-en-el-diseno-de-iconos/"
  • 46. Presentación: diseño de Iconos Tema 4. Estrategias de Diseño Diseño iconos. Principios 1. Usar la metáfora apropiada
  • 47. Presentación: diseño de Iconos Tema 4. Estrategias de Diseño Diseño iconos. Principios 2. Considerar compatibilidad internacional (y contexto cultural) a b c d
  • 48. Presentación: diseño de Iconos Tema 4. Estrategias de Diseño Diseño iconos. Principios 3. Representación abstracta simbólica Evitar texto en iconosSimplicidad en detalles con significado Lisa OS/2 KDE Mac OSX XP
  • 49. Presentación: diseño de Iconos Tema 4. Estrategias de Diseño Diseño iconos. Principios 3. Representación abstracta simbólica a) b) c) d)
  • 50. Presentación: diseño de Iconos Tema 4. Estrategias de Diseño Diseño iconos. Principios 4. Consistencia visual en familia de iconos Usar un foco de luz consistente Optimizar la resolución Color2D /3D
  • 51. Presentación: el color Tema 4. Estrategias de Diseño El Color Tono Brillo saturación
  • 52. Presentación: el color Tema 4. Estrategias de Diseño Centra la atención ____________ Refuerza la organización lógica _______________ Ameno (satisfacción del usuario)
  • 53. Presentación: el color Tema 4. Estrategias de Diseño El color. Principios 1 - Usar el color como técnica de codificación
  • 54. Presentación: el color Tema 4. Estrategias de Diseño El color. Principios 2 - Uso del color conservadoramente Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm
  • 55. Presentación: el color Tema 4. Estrategias de Diseño El color. Principios 3 - Prestar atención a la combinación de colores Referencia: http://interfacehallofshame.eu/www.iarchitect.com/color.htm
  • 56. Presentación: el color Tema 4. Estrategias de Diseño El color. Principios 4 - Códigos de color modificables por el usuario
  • 57. Diseño mediante Estilos Tema 4. Estrategias de Diseño Estilos de interacción - Diseño Menús - Navegación - Formularios - Diseño Web - Patrones de Interacción
  • 58. Estilo Menú Menú con diferente apariencia Referencia: Psycology of menu selection. http://www.lap.umd.edu/poms/" Tema 4. Estrategias de Diseño
  • 59. Estilo Menú Tema 4. Estrategias de Diseño Organización: Simple Secuencial Criterio - Número de opciones - Organización semántica - Información temporal Arbol Red
  • 60. Estilo Menú Tema 4. Estrategias de Diseño Componentes:
  • 61. Estilo Menú Tema 4. Estrategias de Diseño Estandarización: - Nombre de las opciones - Ubicación relativa Favorece el aprendizaje y la retención
  • 62. Estilo Menú Tema 4. Estrategias de Diseño Interacción guiada por acciones Archivo Mantenimiento Movimientos Informes Ayuda Películas Socios Proveedores Auxiliares Alquilar Devolver Reservar Pedidos P. Alquiladas Socios Por demanda Interacción guiada por objetos Archivo Películas Socios Proveedores Auxiliares
  • 63. Estilo Menú Tema 4. Estrategias de Diseño 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
  • 64. Estilo Menú Tema 4. Estrategias de Diseño Técnicas: Desactivar Evitar errores
  • 65. Estilo Menú: ejemplos Tema 4. Estrategias de Diseño Aplicar técnicas de agrupación y desactivar
  • 66. Estilo Menú: ejemplos 9 ítem Tema 4. Estrategias de Diseño 15 ítem / 5 bloques / 2 anidados Sobrecarga de items: aplicar técnicas de agrupación y desactivar
  • 67. Estilo Formularios Tema 4. Estrategias de Diseño 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
  • 68. Estilo Manipulación Directa Tema 4. Estrategias de Diseño Fundamentos: 1 Virtualidad Representación de la realidad manipulable 2 Transparencia Centrarse en la actividad en vez de la herramienta 3 Facilidad de uso Representación física y espacial más fácil de recordar 4 Centrado en el Ratón (mouse) Mecanismo de selección/arrastre
  • 69. Estilo Manipulación Directa 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 Tema 4. Estrategias de Diseño
  • 70. Estilo Manipulación Directa Tema 4. Estrategias de Diseño Manipulación tangible
  • 71. Diseño Web Tema 4. Estrategias de Diseño Objetivo: •  Organizar y estructurar la información de forma adecuada •  Favorecer la navegación •  Problema de sobrecarga de información 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) Navegacion Web: •  Donde estoy •  De dónde vengo •  Donde puedo ir •  Como puedo llegar rápidamente
  • 72. Diseño Interacción: Patrones http://www.welie.com/patterns Objetivo: h ttp://designingwebinterfaces.com/designing-web-interfaces-12screen-patterns http://designingwebinterfaces.com/designing-web-interfaces-12screen-patterns - 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! http://www.welie.com/!
  • 73. Documentación Documentación Usuario Comprar Aprender Usar Herramientas: Medio Papel On-line Características Versión demo (tour guiado) Cursos Manual de Usuario •  Manual •  Plantillas •  Folletos •  Libro •  Guía rápida consulta Tutorial Ayuda en línea •  Hipertexto •  Multimedia •  Sensible al contexto •  Consulta (buscador)
  • 74. Referencias Tema 4. Estrategias de Diseño ‣  W. Galitz, The Essential Guide to User Interface Design, Wiley 2002 ‣  [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 ‣  Interface hall of shame. http://interfacehallofshame.eu/ ‣  Patrones de interacción. http://ui-patterns.com/