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.

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

2,936 views

Published on

Доклад на конференции «Эрго 2014» (3-5 июля 2014, Санкт-Петербург).

Текст статьи: http://www.interux.ru/publications/Burmistrov_Protchenko-Ergo14.pdf

Published in: Design
  • Be the first to comment

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

  1. 1. Плоский дизайн: юзабилити-экспертиза Иван Бурмистров Михаил Протченко «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
  2. 2. Плоская революция 2012-2014 «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 За последние три года произошла кардинальная смена визуального стиля пользовательских интерфейсов. Новый стиль получил название плоского дизайна (flat design). Дебютировав в операционной системе Windows Phone, плоский стиль затем реализовался в операционных системах Windows 8, Android, iOS 7. В июне с. г. пал последний бастион традиционных интерфейсов – операционная система Mac OS X.
  3. 3. Истоки стиля: пешеходные указатели «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
  4. 4. Истоки стиля: швейцарская школа плаката и книжной графики «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
  5. 5. Руководство ведущих софтверных компаний сделало ставку на «инновационный» графический дизайн «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Идея перенесения визуальной стилистики принципиально неинтерактивной среды плаката и транспортных указателей в принципиально интерактивную среду пользовательских интерфейсов не могла возникнуть у людей, знакомых с азами человеко- компьютерного взаимодействия.
  6. 6. Целевой результат: «сбросить с корабля современности» все достижения эргономики, науки о человеко- компьютерном взаимодействии и юзабилити-инженерии как помехи творческой самореализации графдизайнеров. Ключевой принцип плоского дизайна: никаких аналогий с реальным миром «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Прежде всего ликвидируются все признаки трёхмерности в пользовательском интерфейсе: всплывающие окна, тени, выпуклые кнопки, заглублённые поля ввода. Легендирование: современные пользователи освоились с компьютерами в достаточной мере и уже не нуждаются в «подпорках» в виде метафор из реального мира.
  7. 7. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Как сделать, чтобы никто ничего не прочитал и не понял
  8. 8. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Предельно низкий контраст текста и фона
  9. 9. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 ВСЕ ПРОПИСНЫЕ Ровно в 1914 г. была опубликована первая экспериментальная работа, в которой было показано, что тексты, набранные ALL CAPS, считываются медленнее, чем тексты в стиле Sentence case.
  10. 10. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Инверсная печать (выворотка)
  11. 11. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 «Интересные» шрифты
  12. 12. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Как сделать, чтобы никто ничего не нажал
  13. 13. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 normal hover pressed disabled Кнопка в традиционном дизайне
  14. 14. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Древняя традиция: Xerox Star 8010 (1981 год)
  15. 15. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Плоские кнопки
  16. 16. Краткий курс плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Деформация форм
  17. 17. Плоский дизайн Microsoft и Apple был мгновенно раскритикован ведущими юзабилити- специалистами. Гуру веб-юзабилити Якоб Нильсен поставил плоский дизайн на первое место в списке угроз пользователям. Реакция юзабилити-экспертов на вакханалию графдизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 “I really do hate it” Однако, эмпирическая база против плоского дизайна на удивление скромна...
  18. 18. Простой тест на сайте Become a hero «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Посетителю предлагается нажать одну из кнопок с одинаковыми метками. Одна кнопка плоская, другая слегка выпуклая. 3328 4990 Плоская выпуклая p < 0.001
  19. 19. Тестирование 4-х плоских сайтов с участием 100 веб- экспертов (графдизайнеры, программисты, маркетологи) «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
  20. 20. Участники тестирования должны были определить, какие элементы, по их мнению, кликабельны на этих четырёх вебсайтах, и кликнуть их. Фиксировалась карта кликов. Тестовое задание и результаты «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Процент ошибок типа «ложная тревога» (испытуемый ошибочно идентифицировал некликабельный объект как кликабельный) варьировал для разных сайтов от 16 до 38 (в среднем: 29%). 29% ошибок, которые допускали веб-профессионалы, означают крайне низкий уровень юзабилити плоского дизайна в том случае, если им пользуются обычные пользователи-непрофессионалы.
  21. 21. Наш опыт плоского дизайна «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014
  22. 22. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Платёжный терминал wmpos Используется для оплаты коммунальных услуг, электроэнергии и телефонной связи, погашения банковских кредитов и т. п. Пользователи – кассиры в магазинах.
  23. 23. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Платёжный терминал wmpos Плоский интерфейс 2013
  24. 24. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Платёжный терминал wmpos Эскизы 2014
  25. 25. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Сайт WebMoney.lv Традиционный дизайн до января 2014
  26. 26. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Сайт WebMoney.lv Плоский дизайн в январе 2014
  27. 27. «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Сайт WebMoney.lv Варианты лечения в течение 2014
  28. 28. Планируемые работы «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 Экспериментальное исследование в рамках первого этапа работ по гранту РФФИ № 14-06- 00371 «Интегральная оценка распределения функциональных ресурсов пользователя при решении поисковых задач в Интернет-среде»: сравнение объективных результатов работы пользователя, окуломоторики, физиологических реакций и эмоционального состояния при взаимодействии с сайтами, выполненными в традиционном и плоском дизайне.
  29. 29. Спасибо за внимание! «Психология труда, инженерная психология и эргономика», Санкт-Петербург 3-5 июля 2014 ivan@interux.com

×