Почему при проектировании интерфейсов нужно забыть о визуальном оформлении

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

В рубрике «Интерфейсы» — перевод заметки.

#самизнаетекакиекнопки

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

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

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

Также разработчику необходимо понимать, за сколько шагов пользователь сможет завершить начатое: за один ход («Удалить заметку») или несколько — например, когда действие является только одним из ряда шагов для выполнения основной задачи («Переименовать файл»).

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

Начало, середина и конец

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

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

Вторая и более сложная задача заключается в определении действий, при наличии некоторого известного списка целей.

Простые интерфейсы

Примером такого интерфейса может служить автомат для оплаты парковки. Здесь возможна только одна последовательность выполнения и каждый, кто пользуется устройством выполняет одни и те же действия, чтобы выехать из гаража (парковки). Разработчик такого интерфейса преследовал единственную цель: провести пользователя из точки А в точку Б, затратив на это минимальное количество времени.

Фото с сайта «Студии Артемия Лебедева»

Сложные интерфейсы

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

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

Первостепенные и второстепенные цели

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

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

Часто веб-дизайнеры мало внимания уделяют проблемам навигации по ресурсу. Как результат, страница захламлена навигационной панелью, различными вкладками и ссылками. Однако, по мнению Сингера, правильная навигация — одна из основных составляющих в дизайне.

Реализация

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

Понимая, что на одном экране одновременно находятся несколько, конкурирующих между собой, целей, разработчики станут уделять больше времени на организацию иерархичности на странице. Четыре ссылки, расположенные рядом на одном экране, означают, что пользователь с 25% вероятностью выберет одну из них. Наличие только одной большой кнопки и ссылки рядом создает впечатление, что разработчик уже всё решил за пользователя.

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

Присылайте свои интерфейсные кейсы на interface@siliconrus.com