Diseño de Interfaces de Usuario

edición 2013

Miguel Gea (mgea@ugr.es)
Dpt. Lenguajes y Sistemas Informáticoss
Grado en I...
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 ...
Tema 4. Estrategias de Diseño

Paradigmas de interacción
Diseño orientado a objetos
Metáforas
Capa de presentación
Diseño ...
Paradigmas de interacción
Tema 4. Estrategias de Diseño

Modelos de los que se deriva el sistema de interacción y
establec...
Paradigmas de interacción
Tema 4. Estrategias de Diseño

realidad!
virtual!

realidad!
aumentada!

Referencias: [Lores01]
Interacción: Modelo conceptual
Tema 4. Estrategias de Diseño

• La

interacción es una actividad cognitiva El usuario debe...
Diseño Orientado a Objetos
Tema 4. Estrategias de Diseño

Modelo basado en: Objetos y Acciones Objetos
intrínsecos y de Co...
Diseño Orientado a Objetos
Tema 4. Estrategias de Diseño

Acciones: Lenguaje de órdenes Acciones de grupo
(insertar, orden...
Diseño de Metáforas
Tema 4. Estrategias de Diseño

Propósito: Descripción del modelo conceptual Establecer
similitud entre...
Diseño de Metáforas
Tema 4. Estrategias de Diseño

Diseño Identificación tareas usuario Generación de la
metáfora Evaluaci...
Diseño de Metáforas
Tema 4. Estrategias de Diseño

Selección de metáforas para tipo de aplicaciones
Aplicación
Procesador ...
Diseño de Metáforas: ejemplos
Tema 4. Estrategias de Diseño

Escritorio:

Ventana (contenedor)
Carpetas (almacén)

Discos
...
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):
Cortar

Borrar

Metáf...
Diseño de Metáforas: ejemplos
Tema 4. Estrategias de Diseño

Botones y Acciones:

Concepto
(acción):
Adelante/
Atrás

Comp...
Diseño de Metáforas: ejemplos
Tema 4. Estrategias de Diseño

Botones y Acciones:

Concepto
(acción):
Ampliar
Reducir

Busc...
Diseño de Metáforas: ejemplos
Tema 4. Estrategias de Diseño

Concepto
(objeto):
Elementos
borrados

Dispositivo
almacenami...
Metáforas y affordances
Tema 4. Estrategias de Diseño

Diálogo con pestañas:
- Intuitivo (y fácil de usar)
Version 1!

Ver...
Metáforas y affordances
Tema 4. Estrategias de Diseño

Diálogo con pestañas:
- Con sobrecarga de opciones pierde su eficac...
Metáforas y affordances
Tema 4. Estrategias de Diseño

Diálogo con pestañas:
- Ambito de las acciones (confusion)

Referen...
Metáforas y affordances
Tema 4. Estrategias de Diseño

Vista en álbum (cover flow):
álbum que contiene “música”
Version 1!...
Presentación 
Tema 4. Estrategias de Diseño

Objetivo:
- Organizar la información de E/S y su apariencia

Importancia:
- P...
Presentación
Tema 4. Estrategias de Diseño

Composición:
"   Diseño del formato de pantalla!
"   Representación

de la inf...
Presentación: claridad visual
Tema 4. Estrategias de Diseño

Aspectos de diseño:
Claridad Visual
# Enfatizar

la organizac...
Presentación: claridad visual
Tema 4. Estrategias de Diseño

Principios de Gestalt!
Análisis de cómo organiza el observado...
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 ...
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

Conocido desde la antigüedad como una propiedad de los objet...
Presentación: formato pantalla
Tema 4. Estrategias de Diseño

➫  Balanceado

➫  Regularidad
y acentuación

➫  Simetría

➫ ...
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...
Presentación: formato pantalla
Tema 4. Estrategias de Diseño

Uso de controladores geométricos (layout manager)

Métrica D...
Presentación: formato pantalla
Tema 4. Estrategias de Diseño

Proporción
Relación entre elementos

1:1!

1:2!

La sección ...
Presentación: formato pantalla
Tema 4. Estrategias de Diseño

Ejemplos:

(-) Alineación
(-) Claridad visual: agrupar para ...
Presentación: formato pantalla
Tema 4. Estrategias de Diseño

Ejemplos:
(+) Formato 1:1
(+) Agrupación
(+) Simetría
Presentación: formato pantalla
Tema 4. Estrategias de Diseño

Ejemplos:

(+) Agrupación
(+) Balanceado
(+) Continuidad
Presentación: formato pantalla
Tema 4. Estrategias de Diseño

Ejemplos: Tamaños de despliegue

2!
(-) Tamaño submenú
frent...
Presentación: códigos visuales
Tema 4. Estrategias de Diseño

Diseño de la Información:
Preparación de la información para...
Presentación: códigos visuales
Tema 4. Estrategias de Diseño

El lenguaje icónico
Representación gráfica de un concepto

$...
Presentación: códigos visuales
Tema 4. Estrategias de Diseño

El lenguaje icónico: Propiedades
- Reconocimiento- Recuerdo-...
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. 
2. 
3. 
4. 

Usar la metáfora ...
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 inter...
Presentación: diseño de Iconos
Tema 4. Estrategias de Diseño

Diseño iconos. Principios
3. Representación abstracta simból...
Presentación: diseño de Iconos
Tema 4. Estrategias de Diseño

Diseño iconos. Principios
3. Representación abstracta simból...
Presentación: diseño de Iconos
Tema 4. Estrategias de Diseño

Diseño iconos. Principios
4. Consistencia visual en familia ...
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

Centra la
atención
____________
Refuerza la
organización lógica
____...
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...
Presentación: el color
Tema 4. Estrategias de Diseño

El color. Principios
3 - Prestar atención a la combinación de colore...
Presentación: el color
Tema 4. Estrategias de Diseño

El color. Principios
4 - Códigos de color modificables por el usuari...
Diseño mediante Estilos
Tema 4. Estrategias de Diseño

Estilos de interacción
- Diseño Menús
- Navegación
- Formularios
- ...
Estilo Menú
Menú con diferente apariencia

Referencia: Psycology of menu selection. http://www.lap.umd.edu/poms/"

Tema 4....
Estilo Menú
Tema 4. Estrategias de Diseño

Organización:
Simple

Secuencial

Criterio
- Número de opciones
- Organización ...
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 apr...
Estilo Menú
Tema 4. Estrategias de Diseño

Interacción guiada por acciones
Archivo Mantenimiento Movimientos Informes Ayud...
Estilo Menú
Tema 4. Estrategias de Diseño

Elementos
Botones (simples, radio, check) objetos
Menús (barra principal, pulld...
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
9 ítem

Tema 4. Estrategias de Diseño

15 ítem /
5 bloques /
2 anidados

Sobrecarga de items: aplica...
Estilo Formularios
Tema 4. Estrategias de Diseño

Uso
Introducción masiva de datos relativos a un concepto del dominio de ...
Estilo Manipulación Directa
Tema 4. Estrategias de Diseño

Fundamentos:
1 Virtualidad
Representación de la realidad manipu...
Estilo Manipulación Directa
Principios:
1 Virtualidad
Representación de la realidad manipulable
Representación familiar de...
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
•  Favorec...
Diseño Interacción: Patrones 
http://www.welie.com/patterns

Objetivo:

h
ttp://designingwebinterfaces.com/designing-web-i...
Documentación
Documentación

Usuario
Comprar
Aprender
Usar

Herramientas:

Medio
Papel

On-line

Características

Versión ...
Referencias
Tema 4. Estrategias de Diseño
‣ 

W. Galitz, The Essential Guide to User Interface Design, Wiley 2002

‣ 

[Lo...
Upcoming SlideShare
Loading in...5
×

Tema 4 estrategias de diseño

1,066

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,066
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Tema 4 estrategias de diseño"

  1. 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. 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. 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. 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. 5. Paradigmas de interacción Tema 4. Estrategias de Diseño realidad! virtual! realidad! aumentada! Referencias: [Lores01]
  6. 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. 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. 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. 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. 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. 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. 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. 13. Diseño de Metáforas: ejemplos Tema 4. Estrategias de Diseño Botones y Acciones:
  14. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. Presentación: claridad visual Tema 4. Estrategias de Diseño
  28. 28. Presentación: claridad visual Tema 4. Estrategias de Diseño BOTONES: Agrupación Visual y cierta similitud
  29. 29. Presentación: claridad visual Tema 4. Estrategias de Diseño BOTONES: Agrupación Visual y similitud
  30. 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. 31. Presentación: formato pantalla Tema 4. Estrategias de Diseño ➫  Balanceado ➫  Regularidad y acentuación ➫  Simetría ➫  Agrupamiento y alineamiento
  32. 32. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ubicación desestructurada
  33. 33. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ubicación estructurada (alineación)
  34. 34. Presentación: formato pantalla Tema 4. Estrategias de Diseño Referencia: W. Galitz, The Essential Guide to User Interface Design, Wiley 2002"
  35. 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. 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. 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. 38. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ejemplos: (+) Formato 1:1 (+) Agrupación (+) Simetría
  39. 39. Presentación: formato pantalla Tema 4. Estrategias de Diseño Ejemplos: (+) Agrupación (+) Balanceado (+) Continuidad
  40. 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. 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. 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. 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. 44. Presentación: códigos visuales Tema 4. Estrategias de Diseño Reconocimiento Discriminación
  45. 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. 46. Presentación: diseño de Iconos Tema 4. Estrategias de Diseño Diseño iconos. Principios 1. Usar la metáfora apropiada
  47. 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. 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. 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. 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. 51. Presentación: el color Tema 4. Estrategias de Diseño El Color Tono Brillo saturación
  52. 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. 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. 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. 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. 56. Presentación: el color Tema 4. Estrategias de Diseño El color. Principios 4 - Códigos de color modificables por el usuario
  57. 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. 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. 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. 60. Estilo Menú Tema 4. Estrategias de Diseño Componentes:
  61. 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. 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. 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. 64. Estilo Menú Tema 4. Estrategias de Diseño Técnicas: Desactivar Evitar errores
  65. 65. Estilo Menú: ejemplos Tema 4. Estrategias de Diseño Aplicar técnicas de agrupación y desactivar
  66. 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. 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. 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. 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. 70. Estilo Manipulación Directa Tema 4. Estrategias de Diseño Manipulación tangible
  71. 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. 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. 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. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×