Este documento hace parte de mi presentación de 60 minutos acerca de los 7 tips a tener en cuenta a la hora de diseñar pensando en usabilidad. Si eres diseñador, comunicador, publicista o programador debes tener en cuenta estas claves y entender a las personas antes de empezar a diseñar.

1. +
Diseñ
o & In
novac
TALLER
DE
USABIL
IDAD
Hegel
ión
E. Gon
zalez
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

2. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
50% recursos de procesamiento
las imagenes son percibidas e interpretadas
nuestro cerebro realmENte está observando?
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

3. +
!
10 segundos para decirnos qué ves?
Fig. 1
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
EJ E R CI CI O
Diseñ
Fig. 2
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

4. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
1
Diseñ
lo que tu ves no es lo
que tu cerebro te dice
Triangulo de Kanizsa
Gaetano Kanisza 1955 - Italia
40 MIllones de estimulos x segundo
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

5. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
1
Diseñ
lo que tu ves no es lo
que tu cerebro te dice
la mente crear atajos
exp. previa
ahorra ram
funciona/no funciona
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

6. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
1
Diseñ
lo que tu ves no es lo
que tu cerebro te dice
SE PUEDE INFLUENCIAR LO QUE
LAS PERSONAS VEN, PIENSAN O CREEN QUE VEN
STOP
WAR
PEACE NOW
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

7. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
1
Diseñ
lo que tu ves no es lo
que tu cerebro te dice
SE PUEDE INFLUENCIAR LO QUE
LAS PERSONAS VEN, PIENSAN O CREEN QUE VEN
STOP
WAR
PEACE NOW
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

8. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
ATENCIÓN
Aquí
por cambio de aceite
lleva descuento
del 50% sin
importar el
sexo
DEL CLIENTE, SE ENTREGA
LAVADO Y POLICHADO
gratis
.
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

9. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
1
Diseñ
lo que tu ves no es lo
que tu cerebro te dice
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

10. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
1
Diseñ
lo que tu ves no es lo
que tu cerebro te dice
ILUSIONES ópticas pueden llevarnos
a cometer errores
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

11. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
!
A PR E N D I Z AJ E
1
Diseñ
lo que tu ves no es lo
que tu cerebro te dice
Lo que tu piensas que las personas van a ver en tu web o app probablemente no es lo que vayan a ver, esto depende de la experiencia, conocimiento, cultura, familiaridad y expectativas.
Tu eres capáz de persuadir a las personas acerca de lo que ven en cierta
medida, dependiendo de cómo sea esto presentado.
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

12. +
!
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
E J E R CI CI O
Diseñ
10 segundos para observar los detalles
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

13. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
Qué detalles recuerdas?
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

14. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
Qué lugar era?
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

15. cómo ven las personas?
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l
+
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD

16. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
Visión central destaca detalles
Diseñ
Visión periférica contextualiza y alerta
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

17. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

18. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
2
Diseñ
la visión periférica es más usada
que la visión central
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

19. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
2
Diseñ
la visión periférica es más usada
que la visión central
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

20. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
!
A PR E N D I Z AJ E
2
Diseñ
la visión periférica es más usada
que la visión central
Si deseas que se concentren en tu contenido central debes procurar no
usar o distraer la visión periférica.
Si deseas despertar interés, alertar sobre algo en particular y distraer
entonces incluye elementos periféricos.*(marketing)
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

21. +
!
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
E J E R CI CI O
Diseñ
5 segundos para describir qué ves?
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

22. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
Tu mente desea ver patrones
geometric icons - Irving Biederman - 1985 - 24 Figuras
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

23. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
!
A PR E N D I Z AJ E
3
Diseñ
las personas identifican objetos
reconociendo patrones
Usa los patrones tanto como sea posible aprovecha los espacios en
blanco para ahorrar espacio y crear un gran diseño.
Si deseas que las personas reconoscan un objeto, por ejemplo un ícono,
procura que este sea digramado con geons, ya que lo hace más rápido,
sencillo y fácil de reconocer.
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

24. +
!
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
E J E R CI CI O
Diseñ
Qué ves?
Gobierno en Línea

25. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Gobierno en Línea

26. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Gobierno en Línea

27. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Gobierno en Línea

28. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Gobierno en Línea

29. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
3 km de largo por 1,5 km de ancho y se ubica en la zona de cidonia.
25 de julio de 1976 por la sonda espacial Viking 1
Gobierno en Línea

30. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Gobierno en Línea

31. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Reserarch:
Catherine Mondloch (1999)
Gobierno en Línea

32. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
los rostros son una poderoso
elemento de atención.
Gobierno en Línea

33. +
!
E J E R C IC IO
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
10 segundos para observar los detalles
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
Gobierno en Línea

34. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
La sonrisa refleja:
Felicidad
aprobación
tranquilidad
satisfacción
Gobierno en Línea

35. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Gobierno en Línea

36. +
!
E J E R C IC IO
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Caso de análisis
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
Gobierno en Línea

37. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

38. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
!
A PR E N D I Z AJ E
4
Diseñ
existe una parte especial en el cerebro
dedicada exclusivamente para reconocer rostros
Las personas reconocen las reacciones de los rostros en websites más
rápido que cualquier otro elemento de información.
Rostros sonriendo tienen un altisimo
impacto emocional que se replica al usuario.
Generalmente las personas miran al mismo lugar donde el
rostro está mirando, dirigiendo su atención hacia allá.
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

39. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
5
Diseñ
LAS PERSONAS ESCANEAN LAS PANTALLAS
BASADAS EN EXPERIENCIA Y EXPECTATIVAS
VIDEO (eye tracking)
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

40. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

41. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

42. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

43. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
!
A PR E N D I Z AJ E
5
Diseñ
LAS PERSONAS ESCANEAN LAS PANTALLAS
BASADAS EN EXPERIENCIA Y EXPECTATIVAS
Ubica la información más importante en los focos de atención
Evita ubicar información importante en las esquinas, ya que no será
tenida en cuenta.
Evita ubicar la información de manera que el usuario debe regresar,
saltar y voler a diferentes puntos para llevar el hilo.
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

44. +
Diseñ
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
VIDEO (push robber)
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

45. +
!
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
EJERCI CI O
Diseñ
Uno de los enigmas más grandes de la humanidad.
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

46. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
6
Diseñ
las personas ven pistas que les dicen
qué deben hacer con un objeto.
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

47. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
6
Diseñ
las personas ven pistas que les dicen
qué deben hacer con un objeto.
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

48. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
6
Diseñ
las personas ven pistas que les dicen
qué deben hacer con un objeto.
Un buen diseño habla por sí solo
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

49. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
6
Diseñ
las personas ven pistas que les dicen
qué deben hacer con un objeto.
ROJO
AZUL
AMARILLO
VERDE
Disonancia Cognitiva
1957 Leon Festinger “A theory of cognitive dissonance”
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

50. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
6
Diseñ
las personas ven pistas que les dicen
qué deben hacer con un objeto.
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

51. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
!
A PR E N D I Z AJ E
6
Diseñ
las personas ven pistas que les dicen
qué deben hacer con un objeto.
Procura no crear disonancias cognitivas en el diseño de productos/servicios web y móviles
Incluye pistas para los usuarios acerca de lo que pueden hacer o no.
Preparate para los errores involuntarios de las personas
Utiliza sombras para resaltar algunos botones
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

52. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
7
Diseñ
SE DEBE TENER EN CUENTA LA FORMA
DE TOMAR EL SMARTPHONE A LA HORA DE DISEÑAR
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

53. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
7
Diseñ
SE DEBE TENER EN CUENTA LA FORMA
DE TOMAR EL SMARTPHONE A LA HORA DE DISEÑAR
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

54. +
o&
n
TALLEInRovación
USABIL DE
IDAD
cómo ven las personas?
7
Diseñ
SE DEBE TENER EN CUENTA LA FORMA
DE TOMAR EL SMARTPHONE A LA HORA DE DISEÑAR
Diseña pensando en el alcance físico de las personas
Recuerda los dedos gordos
Ten en cuenta los momentos de uso
Gobierno en Línea
Hegel Eis en h o w e r G o n z á l e z - D o c u m e n t o i n t e r n o d e c a r a c t e r a c a d é m i c o si n u so co m e r ci a l

55. @HEGEL24HORAS
H E GE L .GO NZ AL EZ@GOB I ER N OEN LI N EA.GOV.CO
GRACIAS
Bibliografía:
Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) (Voices That Matter) by Krug, Steve (Dec 23, 2013)
100 Things Every Designer Needs to Know About People (Voices That Matter) by Susan Weinschenk (Apr 24, 2011
Usability Testing Essentials: Ready, Set...Test! by Carol M. Barnum (Nov 5, 2010)
Gobierno en Línea