Download - Tema 4 estrategias de diseño
![Page 1: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/1.jpg)
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
![Page 2: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/2.jpg)
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
![Page 3: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/3.jpg)
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
![Page 4: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/4.jpg)
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
![Page 5: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/5.jpg)
Paradigmas de interacción Tema 4. Estrategias de Diseño
Referencias: [Lores01]
realidad!virtual!
realidad!aumentada!
![Page 6: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/6.jpg)
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
![Page 7: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/7.jpg)
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
![Page 8: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/8.jpg)
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
![Page 9: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/9.jpg)
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
![Page 10: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/10.jpg)
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
![Page 11: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/11.jpg)
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
![Page 12: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/12.jpg)
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
![Page 13: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/13.jpg)
Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño
Botones y Acciones:
![Page 14: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/14.jpg)
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
![Page 15: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/15.jpg)
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
![Page 16: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/16.jpg)
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
![Page 17: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/17.jpg)
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
![Page 18: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/18.jpg)
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"
![Page 19: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/19.jpg)
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"
![Page 20: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/20.jpg)
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"
![Page 21: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/21.jpg)
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!
![Page 22: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/22.jpg)
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
![Page 23: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/23.jpg)
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
![Page 24: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/24.jpg)
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
![Page 25: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/25.jpg)
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
![Page 26: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/26.jpg)
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
![Page 27: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/27.jpg)
Presentación: claridad visual Tema 4. Estrategias de Diseño
![Page 28: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/28.jpg)
Presentación: claridad visual Tema 4. Estrategias de Diseño
BOTONES: Agrupación Visual y cierta similitud
![Page 29: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/29.jpg)
Presentación: claridad visual Tema 4. Estrategias de Diseño
BOTONES: Agrupación Visual y
similitud
![Page 30: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/30.jpg)
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
![Page 31: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/31.jpg)
Presentación: formato pantalla Tema 4. Estrategias de Diseño
➫ Simetría ➫ Balanceado
➫ Regularidad y acentuación
➫ Agrupamiento y alineamiento
![Page 32: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/32.jpg)
Presentación: formato pantalla Tema 4. Estrategias de Diseño
Ubicación desestructurada
![Page 33: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/33.jpg)
Presentación: formato pantalla Tema 4. Estrategias de Diseño
Ubicación estructurada (alineación)
![Page 34: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/34.jpg)
Presentación: formato pantalla Tema 4. Estrategias de Diseño
Referencia: W. Galitz, The Essential Guide to User Interface Design, Wiley 2002"
![Page 35: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/35.jpg)
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
![Page 36: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/36.jpg)
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
![Page 37: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/37.jpg)
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:
![Page 38: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/38.jpg)
Presentación: formato pantalla Tema 4. Estrategias de Diseño
(+) Formato 1:1 (+) Agrupación (+) Simetría
Ejemplos:
![Page 39: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/39.jpg)
Presentación: formato pantalla Tema 4. Estrategias de Diseño
(+) Agrupación (+) Balanceado (+) Continuidad
Ejemplos:
![Page 40: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/40.jpg)
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)
![Page 41: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/41.jpg)
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
![Page 42: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/42.jpg)
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
$ % & ' ( ) *+
![Page 43: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/43.jpg)
Presentación: códigos visuales Tema 4. Estrategias de Diseño
El lenguaje icónico: Propiedades
- Reconocimiento- Recuerdo- Discriminación
Elementos:
- Acciones - Objetos
![Page 44: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/44.jpg)
Presentación: códigos visuales Tema 4. Estrategias de Diseño
Reconocimiento Discriminación
![Page 45: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/45.jpg)
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/"
![Page 46: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/46.jpg)
Presentación: diseño de Iconos Tema 4. Estrategias de Diseño
Diseño iconos. Principios
1. Usar la metáfora apropiada
![Page 47: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/47.jpg)
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
![Page 48: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/48.jpg)
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
![Page 49: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/49.jpg)
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)
![Page 50: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/50.jpg)
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
![Page 51: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/51.jpg)
Presentación: el color Tema 4. Estrategias de Diseño
El Color
Tono
Brillo
saturación
![Page 52: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/52.jpg)
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
____________
![Page 53: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/53.jpg)
Presentación: el color Tema 4. Estrategias de Diseño
El color. Principios
1 - Usar el color como técnica de codificación
![Page 54: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/54.jpg)
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
![Page 55: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/55.jpg)
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
![Page 56: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/56.jpg)
Presentación: el color Tema 4. Estrategias de Diseño
El color. Principios
4 - Códigos de color modificables por el usuario
![Page 57: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/57.jpg)
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
![Page 58: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/58.jpg)
Estilo Menú Tema 4. Estrategias de Diseño
Referencia: Psycology of menu selection. http://www.lap.umd.edu/poms/"
Menú con diferente apariencia
![Page 59: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/59.jpg)
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
![Page 60: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/60.jpg)
Estilo Menú Tema 4. Estrategias de Diseño
Componentes:
![Page 61: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/61.jpg)
Estilo Menú Tema 4. Estrategias de Diseño
Estandarización:
- Nombre de las opciones - Ubicación relativa
Favorece el aprendizaje y la retención
![Page 62: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/62.jpg)
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
![Page 63: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/63.jpg)
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
![Page 64: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/64.jpg)
Estilo Menú Tema 4. Estrategias de Diseño
Técnicas: Desactivar
Evitar errores
![Page 65: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/65.jpg)
Estilo Menú: ejemplos Tema 4. Estrategias de Diseño
Aplicar técnicas de agrupación y desactivar
![Page 66: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/66.jpg)
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
![Page 67: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/67.jpg)
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
![Page 68: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/68.jpg)
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
![Page 69: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/69.jpg)
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
![Page 70: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/70.jpg)
Estilo Manipulación Directa Tema 4. Estrategias de Diseño
Manipulación tangible
![Page 71: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/71.jpg)
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)
![Page 72: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/72.jpg)
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
![Page 73: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/73.jpg)
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:
![Page 74: Tema 4 estrategias de diseño](https://reader034.vdocuments.pub/reader034/viewer/2022051514/5494bff5b47959744d8b4bd2/html5/thumbnails/74.jpg)
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