Экспресс-гайд по трендам в дизайне интерфейсов

Текущая статья предназначена для ознакомления с современными реалиями интерфейсов, для тех кто в них не заинтересован. Чтобы дизайнеры и «не дизайнеры», которые совместно ведут работу над созданием интерфейсов могли общаться на одном языке. Для сотрудников, которые привыкли работать в громоздких подсистемах созданных в 2000-х.

Две роли пользователей

Начнем с того, что интерфейсы можно поделить на два типа:

  • для специалистов, которые используют этот интерфейс по причине своих прямых обязанностей
  • для простых пользователей, которые могут использовать интерфейс для достижения своих разовых нужд

Интерфейс не обязательно должен быть простым, например, интерфейс Photoshop перегружен количеством кнопочек на квадратный сантиметр, но данный продукт разработан для человека, который обучался работе в нем — это часть его профессии. Интерфейс направлен на максимально быстрый доступ к основным функциям.

Интерфейс Photoshop
Интерфейс BeFunky Photo Editor

Доступный интерфейс разрабатывается для быстрого вхождения пользователя, чтобы открыв первый раз, пользователь мог в нем работать.

Разрабатывая интерфейс нужно иметь представление, кто будет этим пользоваться.


Дизайн не панацея

Дизайном не могут решаться все проблемы. Если система выдает слишком много информации для простого пользователя раскрашивание разделов — решение не с того конца. Дизайнеры и аналитики работают совместно над одной целью и решения должны достигаться рычагами с обеих сторон. Нужно работать с контентом, не жалеть убирать второстепенное ибо много информации — не значит «проделано много работы».

… много информации — не значит «проделано много работы».

«Нужно добавить пункт меню длинной в 10 слов, придумайте визуальное решение для этого» — не верно.

«Пункт меню вышел в 10 слов, можем выдернуть суть до 2-х слов, дальше дадим расшифровку» — верно.


Дополнительная графика не всегда «улучшает» интерфейс

Большое количество графики — визуальный шум, от которого можно избавиться, без потери смысла.

Панель Facebook перегружена графикой от чего читается плохо. Многие компоненты Facebook уже давно не обновлялись и до сих пор несут проблемы архаичных интерфейсов
Меню Format favtory с иконками, которые не добавляют ни читаемости ни эстетики и меню Google Chrome
« …когда мы интуитивно ищем какой-либо пункт меню, мы ориентируемся на текстовые обозначения, а иконки не играют для нас практически никакой роли.»
(Wiedenbeck S 1999. The use of icons and labels in an end user application program: an empirical study of learning and retention, Behaviour & Information Technology, 18(2), p68–82)

Ничто так не отражает значения слова «управление», как само слово. Другим словами, в борьбе за понятность между иконками и подписями, всегда побеждают подписи.


Воздух в интерфейсе или боязнь пустых пространств

К белому или «негативному» пространству — то есть пустому пространству между элементами дизайна или вокруг них — зачастую относятся с пренебрежением.

И хотя многие считают белое пространство бесполезной растратой ценного экранного пространства, оно все же является неотъемлемым элементом дизайна и «следует рассматривать его в качестве активного элемента, а не пассивного фона» Jan Tschichold 1930.

Пустое пространство отвечает за читаемость, приоритетность контента, и также играет важную роль в визуальной компоновке.

Редизайн Яндекс.Деньги

Исследование проведенное Уичитским государственным университетом США, показало, что белое пространство действительно способствует лучшему пониманию и усвоению контента, хотя при этом может снижать скорость чтения.

Современные интерфейсы всецело посвящены простору и снижению плотности информации, позволяя элементам «дышать» и располагаться на строго определенном расстоянии друг от друга

Демонстрация, как приложение Youtube видоизменялось с течением времени. Поздние версии вмешают на экран лишь полтора–два видео, тогда как ранние версии вмещали от шести роликов.
Интерфейс Яндекс.Метрика

Богатый функционал

Считается, что предлагать много вариантов на выбор — это хорошо. Мы привыкли к выбору: мы ценим возможность все держать под контролем. Однако, чем больше опций предлагает сайт или приложение — там сложнее понять интерфейс. Исследования показывают, что наличие большого количества вариантов выбора приводит к «параличу анализа» и расстройству. Обычно, люди ценят широкий выбор функций до начала пользования продуктом. « …но в ходе использования люди начинали гораздо выше ценить простоту и удобство. В результате более простой продукт приносил гораздо больше удовлетворения пользователям, а версия с большим набором функций была отвергнута большинством участников исследования» Исследование Feature Fatigue: When Product Capabilities Become Too Much of a Good Thing (pdf)

Люди не знают какой функционал им нужен

Многие полагаются на мнение пользователей относительно того, каким они хотят видят сайт/сервис и какие изменения стоит внести. Задавая подобные вопросы, вы должны понимать, что люди делают уверенные, но ложные предположения о своем будущем поведении, особенно в отношении нового и незнакомого дизайна. Представлять, как что-то используешь, и использовать на самом деле — это разные вещи.

Это не значит, что вы должны перестать прислушиваться к своим клиентам. Но убедитесь, что знаете, какие вопросы задавать и как правильно интерпретировать ответы.

«Люди обладают на удивление низкой способностью осознавать факторы, влияющие на их поведение»

В статье об иллюзии самоанализа на Википедии приведено несколько исследований о том, насколько плохо удается людям объяснять своей поведение или предсказывать свои будущие предпочтения.

Нейропсихолог Сьюзан Вайншенк предлагает «избегать соблазна включить в продукт большое количество опций и функций. Помните, что пользователи говорят, что им хочется побольше вариантов выбора, на основании чего вы полагаете, что большой выбор вариантов — это хорошо (вам тоже нравится, когда вариантов много). На самом деле, если в продукте слишком много опций, его не купят вообще». — You Want More Choices and Information Than You Can Actually Process


Люди скролят

Скролинг — вполне естественный процесс. Когда речь идет о большом объеме информации скролинг обеспечивает более приятный опыт взаимодействия чем попытки втиснуть все важное в первый экран (выше линии фолда). Чтобы убедиться, что пользователь прокрутит страницу ниже, нужно просто соблюдать некоторые принципы дизайна.

Юзабилити тесты показывают, что, хотя люди не любят скролить, они готовы это делать. Более того, исследование показало, что более длинные, прокручиваемые страницы удобнее для пользователей.


Количество кликов

Вопреки расхожему мнению, люди не уходят со страницы, не найдя какой-то информации за три клика. На самом деле, количество требуемых кликов не влияет ни на удовлетворение посетителей, ни на успешность их действий. Меньше кликов не делает людей более счастливыми и не создает ощущения быстрого достижения цели:

На что действительно надо обращать внимание — на простоту навигации. Только она помогает человеку во время путешествия по страницам. Если не заставлять людей думать о сделанных кликах, то они не будут против еще нескольких.


Продолжение следует…