Нажимание чуда

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть замечательный ролик The User is Drunk, там очень важные принципы объясняются в простой форме.

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

Так же точно сайты и приложения окружают людей ссылками, кнопками, иконками, фотографиями, заголовками, рекламой и всплывающими окнами.

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

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

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

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

Прямо сейчас, когда я пишу этот пост, в правом верхнем углу висят четыре кнопки, вот такие:

Как они работают? По-разному или одинаково? Открывают окна, уводят на другую страницу? Правильный ответ: меня это не беспокоит. Я знаю, что дизайнер подумал за меня, и, нажав на кнопку, я получу то, что она обещает сделать. При этом система, помня о законах робототехники, не сможет нанести мне вред.

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

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

Никаких формальных правил и критериев для определения наилучшего действия нет.

Каждый раз нужно отталкиваться от конкретной задачи и от контекста, потому что наилучшее действие основано не на жестких инструкциях, а на здравом смысле.

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

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