ݺߣ

ݺߣShare a Scribd company logo

Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя

•
•
Ivan Burmistrov
Ivan Burmistrov

Доклад на конференции «Основные тенденции развития психологии труда и организационной психологии 2015» (Москва, 15-16 октября 2015 г.). Статья: http://www.interux.ru/publications/Burmistrov_Zlokazova_Izmalkova_Leonova-Flat_vs_Traditional_Webdesign-2015.pdf

Convert to study materialsBETA

Transform any presentation into ready-made study material—select from outputs like summaries, definitions, and practice questions.

1 of 24
Downloaded 33 times
Бурмистров И. В. ▪ Злоказова Т. А. Измалкова А. И. ▪ Леонова А. Б. Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Лаборатория психологии труда МГУ
Доминирование плоского дизайна в современных пользовательских интерфейсах Плоский дизайн появился в операционной системе (ОС) Windows Phone в 2010 г. и привлёк к себе внимание с выходом ОС Windows 8 в 2012 г. Сегодня плоский дизайн является доминирующим стилем пользовательского интерфейса (ПИ) во всех цифровых продуктах: приложениях для настольных компьютеров, мобильных приложениях и вебсайтах
Принципы плоского дизайна  Удаление из ПИ всех аспектов реального трёхмерного мира: теней, цветовых градиентов, иллюзий выпуклости объектов  Минимализм, упрощение ПИ  Повышенное внимание к типографике: необычные шрифты, тонкие и ультратонкие шрифты, узкие шрифты, ЗАГЛАВНЫЕ БУКВЫ, шрифты очень крупного размера, низкий контраст текст/фон  Яркие, чистые цвета ПИ  Низкая экранная плотность информации
Реакция на плоский дизайн  Плоский дизайн был с религиозным энтузиазмом принят графическими дизайнерами, которые заговорили о «плоской революции» и «эре плоского дизайна»  Мнения пользователей разделились: кому-то понравилось, кому-то нет  Реакция профессионалов в области человеко-компьютерного взаимодействия и юзабилити- инженерии оказалась преимущественно негативной
Экспертная критика плоского дизайна  Игнорирование принципиально «трёхмерной» природы человеческого восприятия  Отсутствие признаков возможности манипуляций интерактивными объектами интерфейса (affordances)  «Графический дизайн, выполненный графическими дизайнерами для графических дизайнеров» (Роджер Белвил)  Плоский дизайн скучен, и теперь все вебсайты выглядят одинаково
Деструкция традиционного дизайна Борьба с «избыточным реализмом» в ПИ превратилась в борьбу дизайнеров с традиционными ПИ как таковыми
Эксперимент
“Традиционная” серия “Плоская” серия Экспериментальное задание 1: Поиск ключевого слова в тексте 1/2
Шрифты для “традиционной” и “плоской” серий “Традиционные” шрифты Helvetica Neue Normal Arial Normal Tahoma Normal “Плоские” шрифты Helvetica Neue Condensed Normal Helvetica Neue Light Helvetica Neue UltraLight Экспериментальное задание 1: Поиск ключевого слова в тексте 2/2
Экспериментальное задание 2: Поиск ключевой пиктограммы в матрице “Традиционная” серия “Плоская” серия
Экспериментальное задание 3: Прокликивание объектов на вебстранице “Традиционная” серия “Плоская” серия Фиксировались: время выполнения, ошибки типов «пропуск» и «ложная тревога», окуломоторные показатели
Традиционная серия 9 подсерий из 3 заданий Плоская серия 9 подсерий из 3 заданий • половина испытуемых начинала с традиционной серии, другая половина с плоской • каждый испытуемый выполнял в общей сложности 54 задания (27 + 27) Схема эксперимента Сайт Пикт. Текст Сайт Пикт. Текст Сайт Пикт. Текст • • • Сайт Пикт. Текст Сайт Пикт. Текст Сайт Пикт. Текст • • •
Айтрекер EyeLink 1000 (частота дискретизации 500 Гц) для измерения индикаторов когнитивной нагрузки: • длительность фиксаций • амплитуда саккад • пиковая скорость саккад Программа Morae для записи изображения с дисплея, включая движения мыши Оборудование и регистрируемые данные
 20 студентов московских вузов  возраст 18-28 лет (M = 21,2)  пол: 19 Ж, 1 М  опытные пользователи компьютера и мобильных устройств  эксперимент проводился в ноябре 2014 г., так что плоский дизайн был уже хорошо знаком испытуемым Испытуемые
Результаты
 Нет различий по времени поиска  Повышение когнитивной нагрузки в случае плоского дизайна: • увеличение продолжительности фиксаций (p < 0,001) • уменьшение амплитуды саккад (p < 0,001) • уменьшение пиковой скорости саккад (p < 0,001) Поиск слов в тексте vs
 Время поиска плоских пиктограмм почти в два раза больше, чем время поиска реалистичных пиктограмм (p < 0,001)  Повышение когнитивной нагрузки в случае плоского дизайна Поиск пиктограмм 0 5 10 15 20 Плоские Реалист. vs
 Время выполнения задания в пересчёте на одну экранную область больше для плоских сайтов (p = 0,002)  Больше ошибок в случае плоского дизайна (p < 0,001): Поиск кликабельных объектов на вебсайтах Пропуски Ложные тревоги Традиционные Плоские 26% 36% 17% 28% vs
Выводы
Эксперимент показал, что плоский дизайн означает более высокую когнитивную нагрузку, увеличение времени работы и большее количество ошибок Результаты эксперимента свидетельствуют в пользу возврата от плоского дизайна к принципам построения ПИ, выработанным в течение десятилетий исследований и разработок в области человеко- компьютерного взаимодействия и юзабилити-инженерии Выводы
Ревизия принципов
В последнее время появились неортодоксальные варианты плоского дизайна: «почти плоский дизайн», «материальный дизайн» «Плоский дизайн 2.0»
В материальном дизайне разрешены приподнятые над поверхностью кнопки и всплывающие окна Материальный дизайн
Спасибо за внимание! Контакт: ivan@interux.com

More Related Content

Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя

  • 1. Бурмистров И. В. ▪ Злоказова Т. А. Измалкова А. И. ▪ Леонова А. Б. Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Лаборатория психологии труда МГУ
  • 2. Доминирование плоского дизайна в современных пользовательских интерфейсах Плоский дизайн появился в операционной системе (ОС) Windows Phone в 2010 г. и привлёк к себе внимание с выходом ОС Windows 8 в 2012 г. Сегодня плоский дизайн является доминирующим стилем пользовательского интерфейса (ПИ) во всех цифровых продуктах: приложениях для настольных компьютеров, мобильных приложениях и вебсайтах
  • 3. Принципы плоского дизайна  Удаление из ПИ всех аспектов реального трёхмерного мира: теней, цветовых градиентов, иллюзий выпуклости объектов  Минимализм, упрощение ПИ  Повышенное внимание к типографике: необычные шрифты, тонкие и ультратонкие шрифты, узкие шрифты, ЗАГЛАВНЫЕ БУКВЫ, шрифты очень крупного размера, низкий контраст текст/фон  Яркие, чистые цвета ПИ  Низкая экранная плотность информации
  • 4. Реакция на плоский дизайн  Плоский дизайн был с религиозным энтузиазмом принят графическими дизайнерами, которые заговорили о «плоской революции» и «эре плоского дизайна»  Мнения пользователей разделились: кому-то понравилось, кому-то нет  Реакция профессионалов в области человеко-компьютерного взаимодействия и юзабилити- инженерии оказалась преимущественно негативной
  • 5. Экспертная критика плоского дизайна  Игнорирование принципиально «трёхмерной» природы человеческого восприятия  Отсутствие признаков возможности манипуляций интерактивными объектами интерфейса (affordances)  «Графический дизайн, выполненный графическими дизайнерами для графических дизайнеров» (Роджер Белвил)  Плоский дизайн скучен, и теперь все вебсайты выглядят одинаково
  • 6. Деструкция традиционного дизайна Борьба с «избыточным реализмом» в ПИ превратилась в борьбу дизайнеров с традиционными ПИ как таковыми
  • 8. “Традиционная” серия “Плоская” серия Экспериментальное задание 1: Поиск ключевого слова в тексте 1/2
  • 9. Шрифты для “традиционной” и “плоской” серий “Традиционные” шрифты Helvetica Neue Normal Arial Normal Tahoma Normal “Плоские” шрифты Helvetica Neue Condensed Normal Helvetica Neue Light Helvetica Neue UltraLight Экспериментальное задание 1: Поиск ключевого слова в тексте 2/2
  • 10. Экспериментальное задание 2: Поиск ключевой пиктограммы в матрице “Традиционная” серия “Плоская” серия
  • 11. Экспериментальное задание 3: Прокликивание объектов на вебстранице “Традиционная” серия “Плоская” серия Фиксировались: время выполнения, ошибки типов «пропуск» и «ложная тревога», окуломоторные показатели
  • 12. Традиционная серия 9 подсерий из 3 заданий Плоская серия 9 подсерий из 3 заданий • половина испытуемых начинала с традиционной серии, другая половина с плоской • каждый испытуемый выполнял в общей сложности 54 задания (27 + 27) Схема эксперимента Сайт Пикт. Текст Сайт Пикт. Текст Сайт Пикт. Текст • • • Сайт Пикт. Текст Сайт Пикт. Текст Сайт Пикт. Текст • • •
  • 13. Айтрекер EyeLink 1000 (частота дискретизации 500 Гц) для измерения индикаторов когнитивной нагрузки: • длительность фиксаций • амплитуда саккад • пиковая скорость саккад Программа Morae для записи изображения с дисплея, включая движения мыши Оборудование и регистрируемые данные
  • 14.  20 студентов московских вузов  возраст 18-28 лет (M = 21,2)  пол: 19 Ж, 1 М  опытные пользователи компьютера и мобильных устройств  эксперимент проводился в ноябре 2014 г., так что плоский дизайн был уже хорошо знаком испытуемым Испытуемые
  • 16.  Нет различий по времени поиска  Повышение когнитивной нагрузки в случае плоского дизайна: • увеличение продолжительности фиксаций (p < 0,001) • уменьшение амплитуды саккад (p < 0,001) • уменьшение пиковой скорости саккад (p < 0,001) Поиск слов в тексте vs
  • 17.  Время поиска плоских пиктограмм почти в два раза больше, чем время поиска реалистичных пиктограмм (p < 0,001)  Повышение когнитивной нагрузки в случае плоского дизайна Поиск пиктограмм 0 5 10 15 20 Плоские Реалист. vs
  • 18.  Время выполнения задания в пересчёте на одну экранную область больше для плоских сайтов (p = 0,002)  Больше ошибок в случае плоского дизайна (p < 0,001): Поиск кликабельных объектов на вебсайтах Пропуски Ложные тревоги Традиционные Плоские 26% 36% 17% 28% vs
  • 20. Эксперимент показал, что плоский дизайн означает более высокую когнитивную нагрузку, увеличение времени работы и большее количество ошибок Результаты эксперимента свидетельствуют в пользу возврата от плоского дизайна к принципам построения ПИ, выработанным в течение десятилетий исследований и разработок в области человеко- компьютерного взаимодействия и юзабилити-инженерии Выводы
  • 22. В последнее время появились неортодоксальные варианты плоского дизайна: «почти плоский дизайн», «материальный дизайн» «Плоский дизайн 2.0»
  • 23. В материальном дизайне разрешены приподнятые над поверхностью кнопки и всплывающие окна Материальный дизайн