![Page 1: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/1.jpg)
Interacción
Diseño de la Información
![Page 2: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/2.jpg)
Valorar la importancia del diseño en la interfaz.Conocer los principios, métodos y herramientas del diseño.
![Page 3: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/3.jpg)
Contenido- Objetivos de un buen diseño de la interfaz- Elementos morfológicos de la imagen- Uso del color- Técnicas de diseño gráfico- Iconos- Ejemplos
![Page 4: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/4.jpg)
Objetivos del Diseño
- Crear una interfaz transparente- No obstruye el acceso- El usuario tiene una buena experiencia interaccionando con el sistema- La interfaz casi no es detectada
![Page 5: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/5.jpg)
Objetivos del Diseño
Cómo conseguirlos?- Considerar cada aspecto con un sentido del conjunto- Conjuntar el diseño funcional y el visual- Los controles deben tener un aspecto acorde a su función y funcionar de acuerdo con su aspecto.- Cuando el diseño visual clarifica sus funciones, la interfaz resulta intuitiva
![Page 6: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/6.jpg)
Elementos del Diseño
Cómo conseguirlos?- Para representar algo utilizamos unos elementos que constituyen un alfabeto gráfico. Estos elementos son:
- El punto- La línea- La forma- La luz- El color- El tiempo- El tamaño- El formato- La composición
![Page 7: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/7.jpg)
Elementos del Diseño
Vectores- Pose una gran fuerza atractiva como marca
![Page 8: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/8.jpg)
Elementos de la ImagenImagen- Papel del color en la imagen:
- Contribuye a la recreación del espacio- Ayuda a simular la profundidad (sombreado)- Sugiere distancia (difuminación progresiva del tono)- Ayuda a dinamizar la composición a través de la interacción de los colores- Los colores claros son excéntricos y los oscuros concéntricos- Los colores saturados producen un fuerte impacto y se relacionan con sensaciones dinámicas y alegres. Los colores no saturados transmiten sensaciones débiles y más sutiles
- El color transmite “sentimientos”- Hay colores cálidos y fríos, ligeros y pesados, tristes y alegres- La percepción del color es subjetiva y depende de factores culturales
![Page 9: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/9.jpg)
![Page 10: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/10.jpg)
![Page 11: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/11.jpg)
![Page 12: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/12.jpg)
![Page 13: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/13.jpg)
Elementos de la ImagenComposición
Es la forma de ordenar y organizar los elementos morfológicos de la imagen en el espacio estructural que ofrece el formatoPrincipios: unidad y claridadSe puede crear diversidad y contraste para añadir dinamismo, aunque complica la composiciónHay que delimitar claramente el centro de interés, el que atraerá la mirada del espectador, y que depende de la composición
![Page 14: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/14.jpg)
Elementos de la imagen
La composición
Es la forma de ordenar y organizar los elementos morfológicos de la imagen en el espacio estructural que ofrece el formato
Principios: unidad y claridad Se puede crear diversidad y contraste para añadir dinamismo,
aunque complica la composición
Hay que delimitar claramente el centro de interés, el que atraerá la mirada del espectador, y que depende de la composición
![Page 15: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/15.jpg)
Elementos de la ImagenAlgunas reglas de composición:
- La zona inferior suele ser más estática ysólida y la superior más dinámica y llamativa
- La zona izquierda es más estable y permite colocar pesos mayores sin desequilibrar
- A mayor tamaño, mayor peso compositivo
![Page 16: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/16.jpg)
Uso efectivo del colorClaridad:
La usabilidad mejora alusar colores para agrupar informaciones relacionadasUtilizar códigos de color en los mensajesrojo = alertar al usuario de un erroramarillo = mensaje de advertenciaverde = progreso positivo
![Page 17: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/17.jpg)
Uso efectivo del colorLenguaje del color:Existen reglas y sugerencias fáciles de seguir
- Utiliza el color azul para el fondo- Utiliza la secuencia de color espectral (rojo, anaranjado, amarillo, verde, azul, índigo y violeta)- Mantén pequeño el número de colores- Evita usar colores adyacentes que difieran solamente en la cantidad de azul- Utiliza colores brillantes para indicar peligro o para llamar la atención del usuarioSugerencia: diseña la interfaz primero en blanco y negro- La magnitud de un cambio detectable en el color varía a través del espectro- Es difícil enfocar hacia las orillas creadas solamente por el color- Evita utilizar el rojo y el verde en la periferia de presentaciones a gran escala- Los colores opuestos se ven bien juntos- Para los observadores con deficiencias del color (ciegos al color), evita hacer distinciones de un sólo color
![Page 18: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/18.jpg)
Uso efectivo del colorEjemplos:
Legibilidad
Mac OS X QT 4 / 5,6
Significado del color
Mac OS X
![Page 19: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/19.jpg)
Uso efectivo del colorEjemplos:
Easy CD Creator
Significado del color
(colores fijados en el código)
![Page 20: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/20.jpg)
Técnicas del Diseño de la información
DisposiciónCómo se colocan las cosas en la pantalla. Permite dar más importancia a ciertas cosas. El orden de lectura es importante y varía según la cultura
ÉnfasisLos elementos realzados se ven antes y se perciben como más importantes. Para enfatizar se usa la posición, el color y los atributos del textoSi todos los elementos tienen el mismo peso la composición es aburrida y la navegación difícil
![Page 21: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/21.jpg)
Técnicas del Diseño de la información
FocoEl punto focal es el centro de atención, el punto que normalmente se ve antes. Se puede utilizar para dirigir al usuario a la información deseada
AlineaciónAyuda a conseguir equilibrio, armonía, unidad y modularidad. Una alineación exacta y consistente es la manera más fácil de mejorar la estética de la interfaz
![Page 22: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/22.jpg)
Cómo diseñar íconos
Tras decidir el objeto a incluir en el icono hay que decidir cómo dibujarlo
- Más detallado o más simplificado.
- Regla: incluir sólo los detalles imprescindibles
![Page 23: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/23.jpg)
íconos Ejemplos:
bien
mal
Zoc
WinCim
Mac OS X Browser Chimera
Mac OS X Finder
![Page 24: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/24.jpg)
Ejemplos:Información sencilla reduce carga de memoria
![Page 25: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/25.jpg)
Ejemplos:Información dispuesta por temas
![Page 26: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/26.jpg)
Ejemplos:Sobre carga de información
![Page 27: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/27.jpg)
Ejemplos:Mantenimiento de la misma estructura de navegación
![Page 28: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/28.jpg)
Ejemplos:El fondo llamativo dificulta la atención
![Page 29: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/29.jpg)
Ejemplos:Uso del color para distribuir la información
![Page 30: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/30.jpg)
Ejemplos:Uso del color anima y estimula
![Page 31: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/31.jpg)
Ejemplos:Contraste erróneo rojo-azul, exige gran esfuerzo de acomodación visual.
![Page 32: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/32.jpg)
Ejemplos:Agrupación lógica de datos
![Page 33: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/33.jpg)
Ejemplos:Imagen Global
![Page 34: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/34.jpg)
Conclusiones:Facilitar la visibilidad - centrarse en el contenidoUtilizar diálogos simples y naturalesReducir la memorización haciendo visible toda la información – evitar desplazamientosReducir la complejidad de las acciones – predicción y realimentaciónMarcar las opciones de navegación con claridadAgrupar los datos lógicamente – jerarquizar la información – mostrar sólo la necesariaFlexibilizar la presentación - personalizaciónDiseñar siguiendo una “imagen global”
El diseño es importante para la usabilidad de la interfazUn buen diseño aúna la funcionalidad con la estéticaEl diseño no es sólo cuestión de ‘buen gusto’. Está basado en conocimientos fundados sobre la percepción humanaExisten reglas de fácil aplicación que pueden ayudar a realizar un buen diseño
![Page 35: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/35.jpg)
![Page 36: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/36.jpg)
![Page 37: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/37.jpg)
![Page 38: Interacción Diseño de la Información. Valorar la importancia del diseño en la interfaz. Conocer los principios, métodos y herramientas del diseño](https://reader035.vdocuments.co/reader035/viewer/2022070418/5665b4721a28abb57c91894d/html5/thumbnails/38.jpg)