El documento describe el diseño de interfaces y la evolución de las interfaces gráficas de usuario. Explica conceptos como interfaz, interacción y principios de diseño de interfaces como la necesidad del usuario, la ergonomía y la consistencia. También describe los tipos de interfaces como las físicas y las gráficas, y presenta ejemplos históricos del desarrollo de las interfaces gráficas desde la interfaz de comandos hasta interfaces más modernas basadas en gestos.

1. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
diseño de interfaces
[ taller de egreso ]

2. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[del ingl. interface, superficie de contacto]
1. conexión física y funcional entre dos aparatos o
sistemas independientes.
2. zona de comunicación o acción de un sistema
sobre otro.
3. dispositivo que conecta dos aparatos o circuitos.

3. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
1. conexión física y funcional entre dos aparatos o sistemas
independientes.
2. zona de comunicación o acción de un sistema sobre otro.

4. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
3. dispositivo que conecta dos aparatos o circuitos

5. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[evolución de una interfaz]

6. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[evolución de una interfaz]

7. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[evolución de una interfaz]

8. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
sistema informático
hardware
software
usuariointeracción
interfaz

9. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interacción
1. acción que se ejerce recíprocamente entre
dos o más objetos, agentes, fuerzas,
funciones, etc.
2. relación proactiva entre personas y
computadores, estableciendo flujos de
comunicación bidireccional.

10. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz
[principios que rigen el diseño]
. necesidad. [consideración de las necesidades del usuario]
. transparencia. [permitir acciones o aprendizajes del usuario]
. ergonomía. [confort y limitaciones de los usuarios]
. consistencia. [coherencia estética]
. libertad. [movimiento a través de capas de información]
. reversibilidad. [acciones de los usuarios]

11. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz de usuario
[tipos de interfaces]
interfaz física: un ratón y un teclado que sirven
para introducir y manipular datos en nuestro
ordenador.
interfaz gráfica de usuario (GUI) permite,
mediante iconos (cursor + objetos gráficos
metafóricos), interactuar con los elementos
gráficos convirtiendo al ser humano en usuario
de la aplicación.

12. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz gráfica de usuario
[evolución]

13. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Interfaz de comando

14. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Xerox Star (1981)

15. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS 1.0 (1984)

16. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows 1.0 (1985)

17. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows 3.0 (1990)

18. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS 7 (1991)

19. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows 95 (1995)

20. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS X - Aqua (2001)

21. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows XP - Luna (2001)

22. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS X Leopard (2007)

23. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows Vista - Aero (2007)

24. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Mac OS X Mountain Lion (2012)

25. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
Windows 8 - Metro (2012)

26. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
interfaz gráfica de usuario
[evolución]
Las GUI funcionan basadas en el paradigma WIMP
(windows, icon, menu, pointer) en donde la
interacción se ve mediada por un dispositivo de
entrada (teclado, mouse, touchpad, lápiz óptico, etc.)
Las interfaces post-WIMP, también llamadas NUI (natural
user interface) se manipulan mediante movimientos
gestuales de la mano, del cuerpo, o el uso de la voz.

27. Taller de Egreso | Diseño Gráfico Multimedia | Instituto Profesional Arcos
diseño de interfaces
[ taller de egreso ]