15 простых идей для сложного интерфейса

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

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

Идея 1: Управляйте вниманием пользователя

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

Идея 2: Старайтесь объединять схожие функции и не дробить интерфейс

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

 Идея 3: Используйте прямые манипуляции вместо меню без контекста

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

Идея 4: Сокращайте количество полей для ввода

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

Идея 5: Сразу показывайте поля ввода, а не прячьте их на отдельной странице

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

Идея 6: Используйте умные поля вместо лишней работы

Умные или предварительно заполненные поля формы, которые основываются на известных данных, уменьшают количество работы, которую необходимо сделать пользователю. Это распространённая техника помощи пользователю в продвижении по формам. Хуже не бывает, когда у пользователя спрашивают одни и те же данные раз за разом. Вместо пустых полей, которые надо заполнять повторно, лучше пусть будут уже заполненные поля, которые надо просто проверить. Чем меньше работы, тем лучше.

Идея 7: Проверяйте ввод пользователя автоматически

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

Идея 8: Демонстрируйте прогресс пользователя на каждом шагу

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

Идея 9: Используйте подтверждение по умолчанию

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

Идея 10: Попробуйте отмену действия вместо запросов на подтверждение

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

  Идея 11: Показывайте текущее состояние услуги

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

Идея 12: Учитесь узнавать, а не вспоминать

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

 Идея 13: Откажитесь от модальных окон в пользу ненавязчивых запросов

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

 Идея 14: Считайте всё сами, не заставляйте пользователя делать это

Интерфейс может произвести подсчёты и избавить пользователей от такой необходимости. Допустим, вместо показа баланса в системе можно подсчитать, сколько дней осталось до окончания действия подписки. Или в списках устаревающих пунктов лучше использовать надпись «3 минуты назад», чем «последний раз обновлялся в 15:47 2-го сентября». Не заставляйте пользователя считать.

Идея 15: Благодарите, а не просто констатируйте факт окончания сделки

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

 
Посмотреть все 58 идей продающего интерфейса можно здесь. Что ещё нужно учитывать при проектировании сложной системы, какими навыками необходимо обладать и как избежать грубых ошибок, расскажут UX-специалисты из Яндекс, Сбер, Тинькофф и других компаний на UX-Марафоне #26 «Проектирование сложных систем».