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.
Бурмистров И. В. ▪ Злоказова Т. А.
Измалкова А. И. ▪ Леонова А. Б.
Плоский и традиционный
дизайн интернет-сайтов:
сравните...
Доминирование плоского
дизайна в современных
пользовательских
интерфейсах
Плоский дизайн появился в
операционной системе (...
Принципы плоского дизайна
 Удаление из ПИ всех аспектов
реального трёхмерного мира:
теней, цветовых градиентов,
иллюзий в...
Реакция на плоский дизайн
 Плоский дизайн был с религиозным
энтузиазмом принят графическими
дизайнерами, которые заговори...
Экспертная критика
плоского дизайна
 Игнорирование принципиально
«трёхмерной» природы
человеческого восприятия
 Отсутств...
Деструкция
традиционного дизайна
Борьба с «избыточным
реализмом» в ПИ превратилась в
борьбу дизайнеров с
традиционными ПИ ...
Эксперимент
“Традиционная” серия “Плоская” серия
Экспериментальное задание 1:
Поиск ключевого слова в тексте 1/2
Шрифты для “традиционной” и “плоской” серий
“Традиционные”
шрифты
Helvetica
Neue
Normal
Arial
Normal
Tahoma
Normal
“Плоски...
Экспериментальное задание 2:
Поиск ключевой пиктограммы в матрице
“Традиционная” серия “Плоская” серия
Экспериментальное задание 3:
Прокликивание объектов на вебстранице
“Традиционная” серия “Плоская” серия
Фиксировались: вре...
Традиционная серия
9 подсерий из 3 заданий
Плоская серия
9 подсерий из 3 заданий
• половина испытуемых начинала с традицио...
Айтрекер EyeLink 1000 (частота
дискретизации 500 Гц) для измерения
индикаторов когнитивной нагрузки:
• длительность фиксац...
 20 студентов московских
вузов
 возраст 18-28 лет
(M = 21,2)
 пол: 19 Ж, 1 М
 опытные пользователи
компьютера и мобиль...
Результаты
 Нет различий по времени поиска
 Повышение когнитивной нагрузки в
случае плоского дизайна:
• увеличение продолжительност...
 Время поиска плоских пиктограмм
почти в два раза больше, чем время
поиска реалистичных пиктограмм
(p < 0,001)
 Повышени...
 Время выполнения задания в
пересчёте на одну экранную область
больше для плоских сайтов (p = 0,002)
 Больше ошибок в сл...
Выводы
Эксперимент показал, что плоский дизайн
означает более высокую когнитивную
нагрузку, увеличение времени работы и
большее ...
Ревизия принципов
В последнее время появились
неортодоксальные варианты
плоского дизайна: «почти плоский
дизайн», «материальный дизайн»
«Пло...
В материальном дизайне
разрешены приподнятые над
поверхностью кнопки и
всплывающие окна
Материальный дизайн
Спасибо
за внимание!
Контакт:
ivan@interux.com
Upcoming SlideShare
Loading in …5
×

of

Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 1 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 2 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 3 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 4 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 5 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 6 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 7 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 8 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 9 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 10 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 11 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 12 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 13 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 14 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 15 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 16 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 17 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 18 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 19 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 20 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 21 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 22 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 23 Плоский и традиционный дизайн интернет-сайтов: сравнительная оценка эффективности деятельности пользователя Slide 24
Upcoming SlideShare
Плоский дизайн: юзабилити-экспертиза
Next
Download to read offline and view in fullscreen.

15 Likes

Share

Download to read offline

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

Download to read offline

Доклад на конференции «Основные тенденции развития психологии труда и организационной психологии 2015» (Москва, 15-16 октября 2015 г.).

Статья: http://www.interux.ru/publications/Burmistrov_Zlokazova_Izmalkova_Leonova-Flat_vs_Traditional_Webdesign-2015.pdf

Related Books

Free with a 30 day trial from Scribd

See all

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

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

    Jan. 11, 2016
  • AndreArt1

    Nov. 23, 2015
  • ruslankryuchkov790

    Oct. 26, 2015
  • IrkComp

    Oct. 22, 2015
  • Mimojdouci

    Oct. 22, 2015
  • verasusol

    Oct. 22, 2015
  • Zdrok

    Oct. 21, 2015
  • DJSkillMe

    Oct. 21, 2015
  • d4ernov

    Oct. 21, 2015
  • adefimov

    Oct. 21, 2015
  • andreystrelnikov

    Oct. 20, 2015
  • kseniyakoltun

    Oct. 20, 2015
  • galushko

    Oct. 20, 2015
  • yaroslavperevalov39

    Oct. 20, 2015
  • artemvitalevich

    Oct. 20, 2015

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

Views

Total views

4,105

On Slideshare

0

From embeds

0

Number of embeds

946

Actions

Downloads

33

Shares

0

Comments

0

Likes

15

×