Документ обсуждает внедрение плоского дизайна пользовательских интерфейсов с 2012 по 2014 годы, отмечая его популярность и кардинальные изменения в визуальном стиле. Несмотря на критику со стороны юзабилити-экспертов, плоский дизайн стремится избавиться от трёхмерных элементов для улучшения интерактивности. Исследование показывает, что уровень юзабилити плоского дизайна остается низким, что вызывает опасения о его применимости для пользователей.

1. Плоский дизайн:
юзабилити-экспертиза
Иван
Бурмистров
Михаил
Протченко
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014

2. Плоская революция 2012-2014
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
За последние три года произошла кардинальная смена
визуального стиля пользовательских интерфейсов. Новый стиль
получил название плоского дизайна (flat design).
Дебютировав в операционной системе Windows Phone, плоский
стиль затем реализовался в операционных системах Windows 8,
Android, iOS 7. В июне с. г. пал последний бастион традиционных
интерфейсов – операционная система Mac OS X.

3. Истоки стиля: пешеходные указатели
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014

4. Истоки стиля: швейцарская школа
плаката и книжной графики
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014

5. Руководство ведущих софтверных компаний сделало
ставку на «инновационный» графический дизайн
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Идея перенесения
визуальной стилистики
принципиально
неинтерактивной среды
плаката и транспортных
указателей в принципиально
интерактивную среду
пользовательских
интерфейсов не могла
возникнуть у людей,
знакомых с азами человеко-
компьютерного
взаимодействия.

6. Целевой результат: «сбросить с корабля современности»
все достижения эргономики, науки о человеко-
компьютерном взаимодействии и юзабилити-инженерии
как помехи творческой самореализации графдизайнеров.
Ключевой принцип плоского дизайна:
никаких аналогий с реальным миром
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Прежде всего ликвидируются все признаки трёхмерности в
пользовательском интерфейсе: всплывающие окна, тени,
выпуклые кнопки, заглублённые поля ввода.
Легендирование: современные пользователи освоились с
компьютерами в достаточной мере и уже не нуждаются в
«подпорках» в виде метафор из реального мира.

7. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Как сделать,
чтобы
никто ничего
не прочитал
и не понял

8. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Предельно низкий контраст текста и фона

9. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
ВСЕ ПРОПИСНЫЕ
Ровно в 1914 г. была
опубликована первая
экспериментальная работа, в
которой было показано, что
тексты, набранные ALL CAPS,
считываются медленнее, чем
тексты в стиле Sentence case.

10. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Инверсная печать (выворотка)

11. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
«Интересные» шрифты

12. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Как сделать,
чтобы
никто ничего
не нажал

13. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
normal
hover
pressed
disabled
Кнопка в традиционном дизайне

14. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Древняя традиция: Xerox Star 8010 (1981 год)

15. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Плоские кнопки

16. Краткий курс плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Деформация форм

17. Плоский дизайн Microsoft и Apple
был мгновенно раскритикован
ведущими юзабилити-
специалистами.
Гуру веб-юзабилити Якоб
Нильсен поставил плоский
дизайн на первое место в списке
угроз пользователям.
Реакция юзабилити-экспертов на вакханалию графдизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
“I really do hate it”
Однако, эмпирическая база
против плоского дизайна на
удивление скромна...

18. Простой тест на сайте Become a hero
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Посетителю предлагается нажать
одну из кнопок с одинаковыми
метками.
Одна кнопка плоская, другая слегка
выпуклая.
3328
4990
Плоская выпуклая
p < 0.001

19. Тестирование 4-х плоских сайтов с участием 100 веб-
экспертов (графдизайнеры, программисты, маркетологи)
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014

20. Участники тестирования должны были определить, какие
элементы, по их мнению, кликабельны на этих четырёх
вебсайтах, и кликнуть их. Фиксировалась карта кликов.
Тестовое задание и результаты
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Процент ошибок типа «ложная тревога» (испытуемый
ошибочно идентифицировал некликабельный объект как
кликабельный) варьировал для разных сайтов от 16 до 38 (в
среднем: 29%).
29% ошибок, которые допускали веб-профессионалы,
означают крайне низкий уровень юзабилити плоского
дизайна в том случае, если им пользуются обычные
пользователи-непрофессионалы.

21. Наш опыт плоского дизайна
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014

22. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Платёжный терминал wmpos
Используется для оплаты коммунальных услуг, электроэнергии
и телефонной связи, погашения банковских кредитов и т. п.
Пользователи – кассиры в магазинах.

23. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Платёжный терминал wmpos
Плоский интерфейс 2013

24. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Платёжный терминал wmpos
Эскизы 2014

25. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Сайт WebMoney.lv
Традиционный дизайн до января 2014

26. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Сайт WebMoney.lv
Плоский дизайн в январе 2014

27. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Сайт WebMoney.lv
Варианты лечения в течение 2014

28. Планируемые работы
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
Экспериментальное исследование в рамках
первого этапа работ по гранту РФФИ № 14-06-
00371 «Интегральная оценка распределения
функциональных ресурсов пользователя при
решении поисковых задач в Интернет-среде»:
сравнение объективных результатов работы
пользователя, окуломоторики, физиологических
реакций и эмоционального состояния при
взаимодействии с сайтами, выполненными в
традиционном и плоском дизайне.

29. Спасибо за внимание!
«Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
ivan@interux.com