Лекция впервые прочитана на интенсиве по UX&UI в Британской Высшей Школе Дизайна, в модуле "Основы юзабилити". http://britishdesign.ru/programs/p/uxdesign/

1. Психофизиология
графических
пользовательских
интерфейсов

2. Группы

3. Магическое число 7±2

4. Магическое число 7±2
«Магическое число семь плюс-минус два» («кошелёк Миллера») —
закономерность, обнаруженная американским учёным-психологом
Джорджем Миллером, согласно которой кратковременная человеческая
память, как правило, не может запомнить и повторить более 7 ± 2
элементов.
ru.wikipedia.org/wiki/Магическое_число_семь_плюс-минус_два

5. Магическое число 7±2

6. Магическое число 7±2

7. Магическое число 7±2

8. Несоблюдение правила 7±2
mbm.ru

9. «Соблюдение» правила 7±2
http://www.onextrapixel.com/2009/07/20/the-art-of-applying-rule-of-five-plus-or-minus-two-foran-effective-wireframe/

10. Геометрическая память

11. Геометрическая память

12. Геометрическая память

13. Геометрическая память

14. Группировка объектов

15. Группировка объектов

16. Группировка объектов

17. Слабая группировка

18. Группировка объектов
mushroom
flower
star
mushroom
gumbas
brick
chick-chick
star
mario
mario
flower
brick
coin
gumbas
chick-chick
beatle
coin
beatle

19. Группировка объектов

20. Контраст

21. Контраст формы
(сложное/простое)

22. Контраст формы

23. Контраст формы

24. Контраст формы

25. Контраст формы

26. Обратный контраст формы

27. Контраст формы

28. Баннерная слепота

29. Контраст формы

30. Лицо и взгляд

31. Лицо и взгляд

32. Контраст цвета

33. Контраст цвета

34. Контраст цвета

35. Контраст цвета

36. Контраст цвета

37. Контраст цвета

38. Контраст цвета

39. Контраст цвета

40. Контраст размера

41. Контраст размера

42. Контраст размера
no thanks
BUY

43. Контраст размера
No thanks
BUY

44. Контраст размера

45. Контраст размера
http://lamb.cc/typograph/

46. Контраст движения

47. Контраст движения

48. Контраст движения
http://www.youtube.com/playlist?list=PLZasorDYOb4Do19rhoxd2Zc5ExyRnKEo0

49. Контраст движения

50. Контраст движения

51. Чтение

52. Положительная
динамика

53. Положительная динамика
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore.

54. Положительная динамика
Вперед
Назад

55. Положительная динамика

56. Положительная динамика

57. Изображение и текст

58. Изображение и текст
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor.
Duis aute irure dolor in
reprehenderit in voluptate velit
esse cillum dolore.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut.

59. Изображение и текст
Иероглифическое письмо
Слоговое письмо
фонетическое письмо

60. Изображение и текст

61. Изображение и текст
http://www.forbes.com/special-report/2014/30-under-30/finance.html

62. Изображение и текст

63. Читаемость

64. Контраст фона
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis
ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore.
voluptate velit esse cillum dolore.

65. Контраст фона
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis
ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore.
voluptate velit esse cillum dolore.

66. Засечки
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
nostrud exercitation ullamco laboris nisi ut
ut aliquip ex ea commodo consequat. Duis
aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore.
voluptate velit esse cillum dolore.

67. Длина строки
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor
sit amet,
adipisicing elit, sed do eiusmod tempor
consectetur
incididunt ut labore et dolore magna
adipisicing elit, sed
do eiusmod tempor
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
incididunt ut labore
et dolore magna
aliqua. Ut enim ad
ut aliquip ex ea commodo consequat. Duis
minim veniam, quis
aute irure dolor in reprehenderit in
nostrud exercitation
voluptate velit esse cillum dolore.
ut aliquip ex ea
ullamco laboris nisi
commodo

68. Интерлиньяж
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore.

69. Оформление текста
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
laboris nisi ut aliquip ex ea commodo consequat.
dolor in reprehenderit in voluptate velit esse cillum dolore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
cillum dolore.
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
●
Lorem ipsum dolor sit amet, consectetur adipisicing
dolor in reprehenderit in voluptate velit esse cillum dolore.
elit, sed do eiusmod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
●
Tempor incididunt ut labore et dolore magna aliqua.
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
●
Ut enim ad minim veniam, quis nostrud exercitation
enim ad minim veniam, quis nostrud exercitation ullamco
ullamco laboris nisi ut aliquip ex ea commodo
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
consequat. Duis aute irure dolor
dolor in reprehenderit in voluptate velit esse cillum dolore.
●
In reprehenderit in voluptate velit esse cillum dolore.

70. Оформление текста

71. Обратная пирамида текста

72. Конец
yaroslav@shuvaev.com
fb.com/shuvaev