Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Психофизиология
графических
пользовательских
интерфейсов
Группы
Магическое число 7±2
Магическое число 7±2
«Магическое число семь плюс-минус два» («кошелёк Миллера») —
закономерность, обнаруженная американски...
Магическое число 7±2
Магическое число 7±2
Магическое число 7±2
Несоблюдение правила 7±2

mbm.ru
«Соблюдение» правила 7±2

http://www.onextrapixel.com/2009/07/20/the-art-of-applying-rule-of-five-plus-or-minus-two-foran-...
Геометрическая память
Геометрическая память
Геометрическая память
Геометрическая память
Группировка объектов
Группировка объектов
Группировка объектов
Слабая группировка
Группировка объектов

mushroom

flower

star
mushroom

gumbas

brick

chick-chick

star

mario

mario

flower

brick

coin...
Группировка объектов
Контраст
Контраст формы
(сложное/простое)
Контраст формы
Контраст формы
Контраст формы
Контраст формы
Обратный контраст формы
Контраст формы
Баннерная слепота
Контраст формы
Лицо и взгляд
Лицо и взгляд
Контраст цвета
Контраст цвета
Контраст цвета
Контраст цвета
Контраст цвета
Контраст цвета
Контраст цвета
Контраст цвета
Контраст размера
Контраст размера
Контраст размера

no thanks

BUY
Контраст размера

No thanks

BUY
Контраст размера
Контраст размера

http://lamb.cc/typograph/
Контраст движения
Контраст движения
Контраст движения

http://www.youtube.com/playlist?list=PLZasorDYOb4Do19rhoxd2Zc5ExyRnKEo0
Контраст движения
Контраст движения
Чтение
Положительная
динамика
Положительная динамика

Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labo...
Положительная динамика

Вперед

Назад
Положительная динамика
Положительная динамика
Изображение и текст
Изображение и текст

Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor.

Duis aute irure dol...
Изображение и текст

Иероглифическое письмо

Слоговое письмо

фонетическое письмо
Изображение и текст
Изображение и текст

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

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do ...
Контраст фона

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do ...
Засечки

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do eiusmo...
Длина строки
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor...
Интерлиньяж

Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolor...
Оформление текста

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

Lorem ipsum dolor sit amet, consectet...
Оформление текста
Обратная пирамида текста
Конец

yaroslav@shuvaev.com
fb.com/shuvaev
Upcoming SlideShare
Loading in …5
×

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

4,967 views

Published on

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

Published in: Design
  • Be the first to comment

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

  1. 1. Психофизиология графических пользовательских интерфейсов
  2. 2. Группы
  3. 3. Магическое число 7±2
  4. 4. Магическое число 7±2 «Магическое число семь плюс-минус два» («кошелёк Миллера») — закономерность, обнаруженная американским учёным-психологом Джорджем Миллером, согласно которой кратковременная человеческая память, как правило, не может запомнить и повторить более 7 ± 2 элементов. ru.wikipedia.org/wiki/Магическое_число_семь_плюс-минус_два
  5. 5. Магическое число 7±2
  6. 6. Магическое число 7±2
  7. 7. Магическое число 7±2
  8. 8. Несоблюдение правила 7±2 mbm.ru
  9. 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. 10. Геометрическая память
  11. 11. Геометрическая память
  12. 12. Геометрическая память
  13. 13. Геометрическая память
  14. 14. Группировка объектов
  15. 15. Группировка объектов
  16. 16. Группировка объектов
  17. 17. Слабая группировка
  18. 18. Группировка объектов mushroom flower star mushroom gumbas brick chick-chick star mario mario flower brick coin gumbas chick-chick beatle coin beatle
  19. 19. Группировка объектов
  20. 20. Контраст
  21. 21. Контраст формы (сложное/простое)
  22. 22. Контраст формы
  23. 23. Контраст формы
  24. 24. Контраст формы
  25. 25. Контраст формы
  26. 26. Обратный контраст формы
  27. 27. Контраст формы
  28. 28. Баннерная слепота
  29. 29. Контраст формы
  30. 30. Лицо и взгляд
  31. 31. Лицо и взгляд
  32. 32. Контраст цвета
  33. 33. Контраст цвета
  34. 34. Контраст цвета
  35. 35. Контраст цвета
  36. 36. Контраст цвета
  37. 37. Контраст цвета
  38. 38. Контраст цвета
  39. 39. Контраст цвета
  40. 40. Контраст размера
  41. 41. Контраст размера
  42. 42. Контраст размера no thanks BUY
  43. 43. Контраст размера No thanks BUY
  44. 44. Контраст размера
  45. 45. Контраст размера http://lamb.cc/typograph/
  46. 46. Контраст движения
  47. 47. Контраст движения
  48. 48. Контраст движения http://www.youtube.com/playlist?list=PLZasorDYOb4Do19rhoxd2Zc5ExyRnKEo0
  49. 49. Контраст движения
  50. 50. Контраст движения
  51. 51. Чтение
  52. 52. Положительная динамика
  53. 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. 54. Положительная динамика Вперед Назад
  55. 55. Положительная динамика
  56. 56. Положительная динамика
  57. 57. Изображение и текст
  58. 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. 59. Изображение и текст Иероглифическое письмо Слоговое письмо фонетическое письмо
  60. 60. Изображение и текст
  61. 61. Изображение и текст http://www.forbes.com/special-report/2014/30-under-30/finance.html
  62. 62. Изображение и текст
  63. 63. Читаемость
  64. 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. 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. 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. 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. 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. 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. 70. Оформление текста
  71. 71. Обратная пирамида текста
  72. 72. Конец yaroslav@shuvaev.com fb.com/shuvaev

×