Tema 4 estrategias de diseño
-
Upload
miguel-gea -
Category
Education
-
view
789 -
download
1
description
Transcript of Tema 4 estrategias de diseño
Diseño de Interfaces de Usuario
Miguel Gea ([email protected]) Dpt. Lenguajes y Sistemas Informáticoss Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu
edición 2013
http://www.slideshare.net/mgea/tema-4-estrategias-de-diseo-2013
Introducción al DCU
“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 1988. http://www.google.com/corporate/tenthings.html
Larry Page, Sergey Brin
Tema 4. Estrategias de Diseño
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
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 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 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]
realidad virtual
realidad aumentada
comp. ubicua
R: Realidad, C: Computador !" Persona - Computador !" Persona - Mundo real
!" Mundo real - Computador
Paradigmas de interacción Tema 4. Estrategias de Diseño
Referencias: [Lores01]
realidad!virtual!
realidad!aumentada!
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
Referencias: Susan M. Weinschenk. 2011. http://uxmag.com/articles/the-secret-to-designing-an-intuitive-user-experience
Modelo Mental (Modelo de Usuario) • AprendizajePredecir
Modelo Conceptual • AsimilableConsistenteSimple
Diseño Orientado a Objetos Tema 4. Estrategias de Diseño
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
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
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
MODELO DE TAREAS
METÁFORAS
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
Diseño de Metáforas Tema 4. Estrategias de Diseño
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 Corta y pegar objetos
Aplicación Metáfora
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Escritorio:
Papelera
Ventana (contenedor) Carpetas (almacén)
Discos (dispositivos)
Apariencia visual de las metáforas
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Botones y Acciones:
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Botones y Acciones:
Concepto (acción):
Metáfora (objeto real que lo realiza)
Cortar Recortar
Borrar Borrar
Nuevo Pág en blanco
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Botones y Acciones:
Concepto (acción):
Metáfora (objeto real que lo realiza)
Adelante/ Atrás
Rebobinar/Adelantar
Compartir Dar/ofrecer
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Botones y Acciones:
Concepto (acción):
Metáfora (objeto real que lo realiza)
Ampliar Reducir
Lupa + -
Buscar Lupa/ Prismáticos
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Concepto (objeto):
Metáfora (objeto)
Elementos borrados
Papelera (contenedor)
Dispositivo almacenamiento
Buscar comportamiento
similar
Disquete
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"
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"
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"
Metáforas y affordances Tema 4. Estrategias de Diseño
Vista en álbum (cover flow): - Ver imagen del álbum que contiene “música”
Version 1! Version 2!
Presentación Tema 4. Estrategias de Diseño
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
Importancia: - Percepción del usuario
- Gestión de recursos
- Representación de objetos
Presentación Tema 4. Estrategias de Diseño
Composición: " Diseño del formato de pantalla!
" Representación de la información!
" Realimentación !
" Comunicación (mensajes)!! " I
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
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!
➫ 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
Presentación: claridad visual Tema 4. Estrategias de Diseño
Sin Agrupación Visual
ROTAR EN X ROTAR EN Y ROTAR EN Z MOVER EN X MOVER EN Y MOVER EN Z
ROTAR EN X ROTAR EN Y ROTAR EN Z MOVER EN X MOVER EN Y MOVER EN Z
Proximidad
ROTAR X Y Z
MOVER X Y Z
Proximidad y Similitud
Similitud - Tamaño - Tipo de letra - Indexación - Estilo
TEMAS APARTADOS
• Puntos Notas
Continuidad
Presentación: claridad visual Tema 4. Estrategias de Diseño
Presentación: claridad visual Tema 4. Estrategias de Diseño
BOTONES: Agrupación Visual y cierta similitud
Presentación: claridad visual Tema 4. Estrategias de Diseño
BOTONES: Agrupación Visual y
similitud
Presentación: formato pantalla Tema 4. Estrategias de Diseño
➫ 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
Presentación: formato pantalla Tema 4. Estrategias de Diseño
➫ Simetría ➫ Balanceado
➫ Regularidad y acentuación
➫ Agrupamiento y alineamiento
Presentación: formato pantalla Tema 4. Estrategias de Diseño
Ubicación desestructurada
Presentación: formato pantalla Tema 4. Estrategias de Diseño
Ubicación estructurada (alineación)
Presentación: formato pantalla Tema 4. Estrategias de Diseño
Referencia: W. Galitz, The Essential Guide to User Interface Design, Wiley 2002"
Presentación: formato pantalla Tema 4. Estrategias de Diseño
Referencia: W. Galitz, The Essential Guide to User Interface Design, Wiley 2002"
Uso de controladores geométricos (layout manager)
Métrica Diseño : - Densidad general/local - Agrupaciones - Volumen información
Presentación: formato pantalla Tema 4. Estrategias de Diseño
Proporción Relación entre elementos
1:1! 1:2!
a!b! =! =!b!
a+b! 1.618...!
La sección Áurea
Presentación: formato pantalla Tema 4. Estrategias de Diseño
(-) Alineación (-) Claridad visual: agrupar para reducir complejidad (-) Enfatizar etiquetas de campos de edición
Ejemplos:
Presentación: formato pantalla Tema 4. Estrategias de Diseño
(+) Formato 1:1 (+) Agrupación (+) Simetría
Ejemplos:
Presentación: formato pantalla Tema 4. Estrategias de Diseño
(+) Agrupación (+) Balanceado (+) Continuidad
Ejemplos:
Presentación: formato pantalla Tema 4. Estrategias de Diseño
2!
Ejemplos: Tamaños de despliegue
(-) Tamaño submenú frente a tamaño de pantalla (Windows XP)
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
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
$ % & ' ( ) *+
Presentación: códigos visuales Tema 4. Estrategias de Diseño
El lenguaje icónico: Propiedades
- Reconocimiento- Recuerdo- Discriminación
Elementos:
- Acciones - Objetos
Presentación: códigos visuales Tema 4. Estrategias de Diseño
Reconocimiento Discriminación
Presentación: diseño de Iconos Tema 4. Estrategias de Diseño
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/"
Presentación: diseño de Iconos Tema 4. Estrategias de Diseño
Diseño iconos. Principios
1. Usar la metáfora apropiada
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
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
Mac OSX XP
OS/2 Lisa KDE
Presentación: diseño de Iconos Tema 4. Estrategias de Diseño
Diseño iconos. Principios
3. Representación abstracta simbólica
b)
a)
c) d)
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
Presentación: el color Tema 4. Estrategias de Diseño
El Color
Tono
Brillo
saturación
Presentación: el color Tema 4. Estrategias de Diseño
Ameno (satisfacción del usuario)
Refuerza la organización lógica
_______________
Centra la atención
____________
Presentación: el color Tema 4. Estrategias de Diseño
El color. Principios
1 - Usar el color como técnica de codificación
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
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
Presentación: el color Tema 4. Estrategias de Diseño
El color. Principios
4 - Códigos de color modificables por el usuario
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
Estilo Menú Tema 4. Estrategias de Diseño
Referencia: Psycology of menu selection. http://www.lap.umd.edu/poms/"
Menú con diferente apariencia
Estilo Menú Tema 4. Estrategias de Diseño
Organización:
Simple Secuencial Arbol Red
Criterio - Número de opciones - Organización semántica - Información temporal
Estilo Menú Tema 4. Estrategias de Diseño
Componentes:
Estilo Menú Tema 4. Estrategias de Diseño
Estandarización:
- Nombre de las opciones - Ubicación relativa
Favorece el aprendizaje y la retención
Estilo Menú Tema 4. Estrategias de Diseño
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
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
Estilo Menú Tema 4. Estrategias de Diseño
Técnicas: Desactivar
Evitar errores
Estilo Menú: ejemplos Tema 4. Estrategias de Diseño
Aplicar técnicas de agrupación y desactivar
Estilo Menú: ejemplos 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
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
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
Estilo Manipulación Directa Tema 4. Estrategias de Diseño
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
Estilo Manipulación Directa Tema 4. Estrategias de Diseño
Manipulación tangible
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
Navegacion Web: • Donde estoy • De dónde vengo • Donde puedo ir • Como puedo llegar rápidamente
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)
Diseño Interacción: Patrones
Objetivo:
Técnicas:
Recursos: User Interface design Pattern library !
Pattern library for Interaction design!
- Reutilización de elementos de interacción frecuente!
- Descripción de alto nivel de las tareas !
http://ui-patterns.com/!
http://designingwebinterfaces.com!
http://www.welie.com/!
http://www.welie.com/patterns http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
Documentación
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:
Referencias ‣ 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/
Tema 4. Estrategias de Diseño