Интерфейс это проводник в мир продукта

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

01У проводника два разных гостя

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

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

02Как вести новичка

• Понятный первый шаг. На каждом экране должно быть ясно, что здесь главное действие. Если главных действий пять, главного нет
• Разумные умолчания. Человек, который ничего не настраивал, должен получить хороший результат. Настройки нужны тем, кто уже понял, чего хочет
• Подсказки в момент действия. Не инструкция на входе, которую никто не читает, а короткая подсказка рядом с тем, что человек делает прямо сейчас
• Безопасные ошибки. Отмена действия, предупреждение перед удалением, черновик, который не пропадёт. Новичок смелее пробует, когда знает, что ничего не сломает
• Слова человека, а не системы. «Купить билет», а не «Перейти к оформлению заказа». О том, как текст и типографика влияют на понимание, я писал в статье про типографику на сайте

03Как не мешать профессионалу

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

04Слои, а не два интерфейса

Самая частая ошибка: сделать «простой режим» и «продвинутый режим». Так человек вынужден заранее решить, кто он, и потом переключаться между двумя разными продуктами. Гораздо лучше работают слои. Основное лежит на поверхности, подробности раскрываются по запросу, а короткие пути появляются тогда, когда человек до них дорос. Интерфейс один, просто каждый видит в нём столько, сколько ему нужно сейчас

05Как я делаю это в своём редакторе

В Edgework Studio, моём векторном редакторе, я проектировал интерфейс именно так. Новичка встречает короткий тур, который можно пропустить. При выборе инструмента в строке над холстом появляется подсказка, что можно сделать с клавишами Shift и Alt, и в ней только то, что действительно работает. Профессионал открывает палитру команд, и она собрана из того же меню, поэтому в ней всегда все действия и никаких расхождений. Горячие клавиши можно переназначить, а плотность и масштаб интерфейса настроить под себя

06Проводник не должен быть заметен

Лучший комплимент интерфейсу: «я даже не задумывался, как это работает». Хороший проводник не рассказывает о себе, он просто приводит туда, куда нужно. И новичку, и профессионалу

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