�ݺ�ߣ

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

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

Истоки стиля: пешеходные указатели

Истоки стиля: швейцарская школа
плаката и книжной графики

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

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

Краткий курс плоского дизайна
Как сделать,
чтобы
никто ничего
не прочитал
и не понял

Предельно низкий контраст текста и фона

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

Инверсная печать (выворотка)

«Интересные» шрифты

Как сделать,
чтобы
никто ничего
не нажал

normal
hover
pressed
disabled
Кнопка в традиционном дизайне

Древняя традиция: Xerox Star 8010 (1981 год)

Плоские кнопки

Деформация форм

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

Простой тест на сайте Become a hero
Посетителю предлагается нажать
одну из кнопок с одинаковыми
метками.
Одна кнопка плоская, другая слегка
выпуклая.
3328
4990
Плоская выпуклая
p < 0.001

Тестирование 4-х плоских сайтов с участием 100 веб-
экспертов (графдизайнеры, программисты, маркетологи)

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

Наш опыт плоского дизайна

Платёжный терминал wmpos
Используется для оплаты коммунальных услуг, электроэнергии
и телефонной связи, погашения банковских кредитов и т. п.
Пользователи – кассиры в магазинах.

Плоский интерфейс 2013

Эскизы 2014

Сайт WebMoney.lv
Традиционный дизайн до января 2014

Плоский дизайн в январе 2014

Варианты лечения в течение 2014

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

Спасибо за внимание!
ivan@interux.com

�ݺ�ߣ

Плоский дизайн: юзабилити-экспертиза

More Related Content

Плоский дизайн: юзабилити-экспертиза