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

1,667
-1

Published on

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,667
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×