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

Автор статьи — Брюс Тогнаццини, первый проектировщик «человеческого» интерфейса для Apple. Работал в Apple с 1978 по 1992 гг.

Эстетика

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

• Майк Монтейро. «Дизайн — это работа»
• Йозеф Мюллер-Брокманн. «Модульные системы в графическом дизайне»
• Джеф Раскин. «Интерфейс: новые направления в проектировании компьютерных систем»

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

 

Предвосхищение

Предвосхитить — заранее понять задачи и ожидания пользователя и их удовлетворить. Когда кнопка есть, но пользователь ее не видит — кнопки нет. Если пользователь устанет разбираться в логике сайта, он от вас уйдет.

Обеспечьте пользователя информацией там, где необходимо. Не отправляйте пользователя в поисковики: объясните ему, что такое CVV-код, газосиликатный блок или «digital».

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

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

 

Свобода действия

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

Пользователь свободно работает с сайтом, но свободу нужно контролировать. Не предоставляйте пользователя самому себе, осуществляйте разумный контроль: снабдите интерфейс обратной связью. Так пользователю будет комфортнее: он почувствует заботу и останется на сайте. Статусная информация должна появляться вовремя и быть точной.

В 2014 году при обновлении айфон мог показать 5 минут до конца процесса. Система обновлялась за пять минут, но еще требовалось перезалить на телефон всю информацию, а это занимало около часа. Пользователю формально сказали правду, но на деле обманули: он не знал, когда снова сможет воспользоваться телефоном. Ситуация, над которой потерян контроль, будет раздражать кого угодно.

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

 

Цвет

Цвет — один из немногих способов коммуникации. Используйте цвет вместе с дополнительными подсказками: так вы поможете дальтоникам. 10% мужчин и 1% женщин имеют ту или иную форму дальтонизма. Проверьте, как ваш сайт выглядит для дальтоников.

 

 

Последовательность

Опирайтесь на привычки пользователя. Хорошо, когда  сайт, блог и рассылка выполнены в одном стиле. Родственные программы должны быть похожи друг на друга (Microsoft Office).  Гайдлайны операционных систем помогают создать эффективный интерфейс, потому что учитывают привычки пользователей.

Размещение иконок, кнопок и скроллбаров не должно быть случайным, иначе пользователь будет половину времени разбираться в работе. В системе Windows окна закрываются в правом углу, а на Mac —  в левом. Если программа не учитывает это, пользователю будет неудобно ей пользоваться.

 

 

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

 

По умолчанию

Любое «по умолчанию» нужно контролировать, чтобы оно работало на пользователя.

Если в поле написано «Введите ваше имя», при клике эта надпись должна пропасть. Если поле заполнено, при клике оно должно очиститься. Пример неправильного поведения формы:

 

 

Ясность

Элементы управления должны быть видимыми. Объект находится внутри родственных объектов (документ внутри папки, разделы внутри меню). Элементы можно скрывать на мобильных браузерах, потому что они рассчитаны на маленькие экраны. В остальных случаях элементы управления скрывать нельзя.

Скроллбар нельзя прятать: он сопровождает пользователя по ходу сайта или документа. Пользователь узнает от него две вещи: местоположение на странице и на всем документе. Если скроллбар спрятать, пользователю придется уводить курсор вбок и отвлекаться.

Элементы управления иногда залезают в контентную зону. Это происходит из-за малых размеров экранов. В этом случае должно быть действие, которое скроет ненужное управление на время работы (например, нажатие в середине экрана). Но на ноутбуках и компьютерах не должно быть скрытых элементов в контентной зоне.

 

Эффективность

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

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

 

Доступный интерфейс

Не принуждайте пользователя двигаться одним путем к цели, предоставьте выбор. Это не обман, а помощь: пользователь сам выберет дорогу (моментальный заказ или заказ с регистрацией).

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

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

Сделайте интерфейс дружелюбным, но оставьте пользователю возможность уйти. Иногда посетителя намеренно лишают права на ошибку: он не может вытащить товар из корзины или отменить заказ. Если дать пользователю свободу (легко отказаться от товара в корзине), он не будет ею злоупотреблять и наоборот будет гораздо больше доверять сайту.

 

Закон Фиттса

Закон Фиттса — зависимость между расстоянием от объекта, его размером и временем прицеливания. Этот закон применим к интерфейсам, поскольку в интерфейсе участвуют объекты. Схематично закон выглядит так:

 

 

Есть два типа объектов: виртуальные (кнопки, меню на экране) и физические (клавиатура, мышь). Сокращайте число объектов на сайте: это сократит число ошибок со стороны посетителя. Необходимые объекты располагайте удобно. Удачные места расположения объектов: стороны и углы монитора. В эти места легко попасть, поскольку курсор упирается и дальше не идет.

 

 

Область курсора — самое удобное местоположения для пользователя, но на сайте его сложно использовать:

 

 

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

 

 

Пользовательский интерфейс

Пользовательский интерфейс снабжен объектами, которые необязательно связаны с объектами программ: папка, ярлык, кнопки, окна. Папка может быть пуста, ярлык может вести на несуществующий файл, размер и местоположение окна не меняют программные объекты.

Объекты можно почувствовать: увидеть, услышать, ощутить. Чаще мы сталкиваемся с визуальными объектами, а объекты вроде телефонного звонка редко относим к интерфейсу.

Объекты интерфейса должны быть предсказуемы в работе: кнопки нажиматься, ползунки прокручиваться. Если отправляем документ в корзину, документ не сгорает, а «лежит» в ней. Мы можем вернуть его обратно, но если очистим корзину — документ пропадет.

Интерфейс защищает работу и не нагружает пользователя. Обрыв соединения или выключенный свет — пример ситуаций, когда пользователь может потерять работу. Удобный интерфейс не заставляет вводить капчу и гадать, где человек допустил ошибку — в логине или пароле?

 

Сокращение задержек

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

 

 

Если задержка неизбежна, объясните ее:

 

 

Обучение и подсказки

Любая программа или сайт имеют кривую обучения. Если сайтом часто пользуются, сделайте его продуманнее: снабдите подсказками, обучающими роликами.

 

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

Иллюстрация к метафоре должна быть содержательна и не подрывать функционал. Раньше объекты старались рисовать реалистично, сейчас — максимально абстрактными:

 

Опыт взаимодействия пользователя

Чтобы улучшить работу сайта, отслеживайте действия посетителей. Что нужно проанализировать:

• Источник перехода на сайт
• Был ли посетитель ранее на сайте
• Какие страницы интересуют посетителя и почему
• С чем взаимодействовал посетитель
• Время сессии

Хороший пример — Amazon. Amazon предлагает товары на основе прошлых покупок и просмотров, а также покупок схожих с вами покупателей.

Как отслеживать действия на сайте:

Работа с офлайн-пользователями в Google Analytics
GTM: как работать с параметрами, которых нет в Google API

 

Навигация

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

 

 

 

---

 

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

Перевод статьи Брюса Тогнаццини:
First Principles of Interaction Design