Один из современных модных трендов в дизайне интерфейсов – так называемый, «невидимый дизайн» (invisible design). Разбираемся вместе с экспертами FastCompany, как реализовать его на практике.

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

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

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

 

Упрощение последовательности действий

Как можно упростить последовательность действий для пользователя.

Сокращение действий

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

Предположим, так выглядит последовательность действий, когда пользователь логинится в системе:

1. Кликнуть на поле «имя пользователя»
2. Ввести имя пользователя
3. Кликнуть на поле «пароль»
4. Ввести пароль
5. Нажать на кнопку «Войти»

Вы можете сделать так, что при открытии этой страницы у пользователя уже курсор будет установлен в поле «имя пользователя», а само поле выделено каким-то цветом, чтобы подчеркнуть, что сейчас от пользователя ждут именно это. Таким образом вы сократите один ненужный шаг и поможете пользователю сделать правильное действие.

Упрощение действий

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

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

Давайте рассмотрим несколько практических примеров.

 

Пример 1: Uber

Вот так обычно выглядит процесс ввода данных карты для оплаты:

1. Ввод имени-фамилии владельца карты
2. Ввод номера карты
3. Ввод срока действия карты
4. Ввод специального кода с оборота карты

Компания Uber сократила этот процесс до «сделать фото карты». Согласитесь, это НАМНОГО проще!

 

 

Пример 2: страховая компания Oscar

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

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

 

 

Более того, другие поля не открываются для пользователя, пока он не заполнит несколько первых. Это в какой-то мере позволяет снять напряжение пользователя от того, что он сразу видит какую большую форму ему надо сейчас заполнить. А «повествовательный» характер заполнения делает отправку заявки едва ли не приятным занятием.

 

Четкость коммуникации

Каждый раз, когда пользователь чем-то озадачен на сайте, это добавляет ему «сопротивления». Четкая коммуникация, призванная снижать это сопротивление – главная цель невидимого дизайна.

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

Вот полезный чеклист, следование которому поможет вам добиться четкости в коммуникации:

• Символы повседневной жизни: всегда, где возможно, используйте установившиеся из повседневной жизни ментальные модели людей. Например, увеличение громкости в медиаплеерах изображается идущими вверх или растущими столбиками не просто так, а потому что это типичный пример из реальной жизни. Подобные символы нарисованы на панелях миллионов аудиосистем, и пользователю они интуитивно понятны. Точно также и слова «корзина» и символ продуктовой корзины или тележки давно является стандартом де-факто в интернет-магазинах.

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

• Постоянство оформления: держитесь в ранее определенных вами рамках в теме оформления сайта, это касается картинок, шрифтов, цветовых решений. Только тогда весь дизайн будет работать как единое целое, и не будет казаться набором каких-то отдельных элементов.

• Усилители: используйте легко распознаваемые элементы, о которых пользователь знает из своего предыдущего опыта в интернете. Например, кнопка проигрывания видео, помещенная поверх картинки, усиливает обозначение того, что это видео и его можно посмотреть, и посылает таким образом «универсальное сообщение», понятное абсолютному большинству людей.

• Микровзаимодействия: небольшие решения в плане дизайна помогают сделать восприятие интерфейса более цельным. Кнопка, меняющая цвет, когда на нее наведен курсор мыши. Кнопка отправки формы, которая становится активной, когда все поля в форме заполнены. Фото товара, «улетающее» в символ корзины при нажатии кнопки «положить корзину».

Рассмотрим, как эти принципы применяются на примерах ниже.

 

Пример 3 – Integrated Podiatry Clinic

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

 

 

Вы также можете наблюдать, как аккуратно подобраны цвета. Фоновая картинка явно сообщает, что это за клиника, но в тоже время слабоинтенсивный цвет фона как бы дает понять, что эта картинка здесь не главное, и взгляд за нее не «цепляется».

 

Пример 4: Future Water City

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

 

 

Поскольку «цифры в круге» не являются в достаточной степени усилителями, они еще периодически пульсируют цветом, чтобы пользователь их заметил.

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

 

 

 

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

 

«Прощайте» своих пользователей

Одной из характерных особенностей невидимого дизайна является «прощение» пользователям их ошибок. Если ошибка пользователя может быть легко или автоматически устранена, или сам дизайн не дает сделать ошибку, то пользователь чувствует уверенность.

Примите к сведению следующие советы:

• Отмена действия вместо подтверждения: когда пользователь совершает какое-то действие, требующее подтверждения, попробуйте не требовать от него подтверждения, а дать ему совершить это действие и предложить опцию его отмены, если он не согласен. Известный эксперт в области интерфейсов Аза Раскин говорит, что в наше время уже сложно полагаться на какие-то всплывающие предупреждения, потому что у пользователей уже выработалась привычка всегда нажимать «Ок», еще до того, как они поняли, что же они подтверждают. Бывают, конечно, исключения: такое действие, как стереть базу данных, достаточно сложно потом отменить, поэтому в таких случаях этот метод не применим.

 

 

• Автосохранение: сейчас хранение данных в облачных сервисах обходится настолько недорого, что нет никакого смысла заставлять пользователя периодически нажимать на кнопку «сохранить». Чтобы усилить эффект от этой функции, создайте небольшой индикатор сохранения, как это делает Gmail.

 

• «Прощающий» ввод данных и обработка ошибок ввода: в большинстве случаев вы можете заранее проверять то, что вводит пользователь, и сразу подсказать ему ошибки, не дожидаясь, чтобы он нажал кнопку желаемого действия. Это может касаться, например, адреса электронной почты или номера банковской карты. Дайте ему знать, если он ввел что-то не так. Однако и тут надо найти разумный баланс. Если человек только начал вводить свой емэйл, не надо подсказывать ему, что емэйл некорректный, как только он ввел несколько букв в начале. Надо дать ему закончить ввод, провести валидацию и после этого уже предупреждать о неправильном вводе. Обратите также внимание, как Google или Яндекс обрабатывают опечатки – они предлагают вам поиск по тому ключевому слову, которое «они думают» было правильным. И при этом дают опцию поиска все-таки по вашему слову, пусть даже написанному с ошибкой.

В заключение подчеркнем, что невидимый дизайн – не невидим в прямом смысле слова. Веб-страница или приложение без элементов дизайна будет очень сильно запутывать.

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

По материалам блога FastCompany