Diseño de Interfaces de usuario Asignatura de Grado de Ingeniería Informática http://utopolis.ugr.es/diu Seminarios Miguel Gea

1. !
SEMINARIOS
!!!!!!!!!!!!!!!!!!!!!!!
Miguel Gea (mgea@ugr.es)!
Dpt. Lenguajes y Sistemas Informáticos!
Grado en Ingeniería Informática!
Universidad de Granada!
http://utopolis.ugr.es/diu
Diseño de Objetos cotidianos
DISEÑO DE INTERFACES DE USUARIO
!
!!!!!!!!!
•Diseño de Objetos cotidiano
•Diseño centrado en el usuario
5 Oct, 2015 (1º versión: Oct 2013)!
http://www.slideshare.net/mgea/seminario-diseo-objetos-cotidianos

2. El personaje: Dr. Donald Norman
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 22
Dr. Donald Norman
(1936- )
“You don’t think about the process of
how a light switch works when you turn
it on. It just works. That’s is what need
to happen to computers in order for
people to get the most out of them”
http://www.jnd.org/
Autor de (entre otros):
!
- Design of everyday Things.
Explica los principios básicos que se deben tener en cuenta en el
diseño de un objeto para que realmente sea intuitivo y útil.
!
- The Invisible Computer” (Cambridge, MA: The MIT Press, 1998)
Propone y explora el cambio de paradigma en el pensamiento
centrado en sistemas al centrado en usuarios
!

3. Diseño Objetos Cotidianos
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 3
Preece, J., Rogers, Y., Sharp, H. (2002), Interaction Design: Beyond Human-Computer
Interaction, New York: Wiley, p.21
D. Norman: The Design of Everyday Things. Basicbooks, 1990
Principios de diseño de Donald A. Norman:
Visibilidad
Las funciones más visibles son las que los usuario mas se interesarán por conocer y
usar. Las que están fuera de la “vista”, serán más difícil de conocer, encontrar y
por tanto usar.
!
Realimentación (feedback)
Dar información acerca de las acción realizada y el efecto producido, permitiendo
al usuario conocer y continuar con la actividad. La realimentación puede ser visual,
auditiva, táctil, o combinación de varias.
!
Mapping (Relación)
Relación entre la acción sobre el elemento de control y el efecto obtenido en el
mundo.
!
Proyección (Afforfance)
Término para referirse a los atributos de un objeto que permiten conocer cómo
usarlo (características de diseño intuitivo). Son acciones obvias en el diseño que
nos sugiere cómo usarlo (pulsarlo, empujarlo, agarrarlo, moverlo, etc.)

4. Diseño Objetos Cotidianos
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
!
Proyección (Afforfance) a) subir/bajar, b) pulsar c) desplegar
c)
b)a)
4
Una objeto usable es aquel que permite al usuario centrarse en su tarea, no en la
interfaz Las interfaces se ponen en el medio. No quiero concentrar mis energías en
la interfaz, me quiero concentrar en mi trabajo (Donald Norman)

5. Diseño Objetos Cotidianos
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 5
BALAY 3WGX2539P
!
Potencia: 900 W.
Capacidad: 25 litros
Grill simultáneo de : 1200 W
Electrónico
Reloj electrónico programable de fin de cocción de 99 minutos
1 memorias programable
Programas automáticos de cocción y descongelación por peso
Selector de funciones: microondas (5 niveles), grill y microondas
Diferente complejidad de uso para misma tarea

6. Diseño Objetos Cotidianos
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
!
Mapping (Relación objeto control - resultado)
Mapping entre la información y el objeto
¿?
6
http://pages.cpsc.ucalgary.ca/~saul/hci_topics/pdf_files/psychology.pdf

7. Diseño Objetos Cotidianos
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
!
Mapping (Relación)
7
http://pages.cpsc.ucalgary.ca/~saul/hci_topics/pdf_files/psychology.pdf

8. Diseño Objetos Cotidianos: Visibilidad?
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 8
¿Cual es el estado
y la secuencia
acciones?
!
¿Cual es el efecto
producido?
!
¿Qué vende esta
máquina?
!

9. Diseño Objetos Cotidianos: Proyección?
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 9

10. Diseño Objetos Cotidianos: Intutitivo?
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 10
Visibilidad
vs
Mapping

11. Diseño Objetos Cotidianos: Intutitivo?
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 11
Mapping
vs
affordance

12. Diseño Objetos Cotidianos: ascensor
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 12
Fuera Dentro Cabina
Estado libre, ocupado parado, sube baja
Acciones Llamar Piso
Abrir, parar
Feedback Luz Display
boton seleccionado
!

13. Diseño Objetos Cotidianos: ascensor
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 13
Fuera Dentro Cabina
Estado libre, ocupado parado, sube baja
Acciones Llamar Piso
Abrir, parar
Feedback Luz Display
boton seleccionado
!

14. Diseño Objetos Cotidianos: ascensores
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
!
Elementos básicos para representar acciones
Mapping intuitivo
14

15. Diseño Objetos Cotidianos: ascensores
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
!
Uso de diferente codificación (H,E,P,B) de plantas
Es igual en todos los sitios el significado de esas letras?
Casos de “superstición” (china)
15
2
1
P
2H
E P
B

16. Diseño Objetos Cotidianos: ascensores
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 16
!
Orden no convencional

17. Diseño Objetos Cotidianos: ascensores
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 17
!
Relación de mapping no intuitiva
!
1 Recepción
0 Bodeguita..
-1 Parking

18. Diseño Objetos Cotidianos
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 18
Ubicación de pulsadores, “botón de emergencia” y etiquetas de
información

19. Diseño Objetos Cotidianos: ascensores
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 19
Pulsadores de llamada uno/múltiples ascensores y “llamada VIP”

20. Diseño Objetos Cotidianos: ascensores
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 20
Ubicación de pulsadores y elementos auxiliares de control
a) b) c)

21. Diseño Centrado en el Usuario
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 21
affordances:
– botones para pulsar, no está claro su función
!
mapping
– no se percibe la relación entre botones, posibles
acciones y resultado final
!
Diseño Objetos Cotidianos

22. Diseño Centrado en el Usuario
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 22
o Telefono útil (vodafone simply)
http://www.vodafonesites.com/simply/

23. Diseño Centrado en el Usuario
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 23

24. Diseño Centrado en el Usuario
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 24

25. Comportamiento con el ordenador
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 25
http://www.elmundo.es/navegante/2003/01/24/esociedad/1043401065.htm

26. Diseño adaptado al usuario
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 26
¿Como será el ordenador para el tercer mundo?
MIT mediaLab 100$ Laptop

27. Diseño adaptado al usuario
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
!
One Laptop per Child
http://olpc.com/
27

28. Diseño adaptado al usuario y a su entorno
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 28

29. Diseño adaptado al usuario y a su entorno
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 29

30. Diseñando los objetos del futuro
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 30
http://www.apple.com/es/watch/apple-watch-sport/
http://www.theguardian.com/technology/2013/mar/06/
google-glass-threat-to-our-privacy
http://www.xataka.com/wearables/un-smartwatch-para-ciegos-si-con-pantalla-braille
http://fingerson.strikingly.com
Smart Watch
Smart Watch Braille (dot)
Google glass
http://www.xataka.com/automovil/los-coches-autonomos-necesitaran-
mapas-con-mas-informacion-y-en-nokia-here-estan-en-ello
Mapas para coches autónomos

31. Referencias
Diseño de objetos cotidianos. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
! 31
D. Norman: The Design of Everyday Things. Basicbooks, 1990
!
D. Norman website: http://www.jnd.org/
http://twobenches.wordpress.com/2008/06/05/don-normans-design-principles/
!
http://www.slideshare.net/gelvan/design-principles
!
Interface Hall of shame. http://hallofshame.gp.co.at/
!
S. Greenberg: psychology of things. http://pages.cpsc.ucalgary.ca/~saul/hci_topics/pdf_files/psychology.pdf
!
M. Gea, album imágenes UX: http://www.pinterest.com/miguelgea14/ux/
!
Proyecto One Laptop per child: http://one.laptop.org
!
!
!