Хороший дизайн интерфейсов. Часть 2

Это вторая часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре.

Идея 17
Отображайте состояния элементов, вместо статичной информации

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

Идея 18
Делайте кнопки полезными для пользователя, вместо обычных

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

Идея 19
Попробуйте прямое управление вместо бесконтекстных меню

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

Идея 20
Используйте открывающиеся формы вместо дополнительных страниц

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

Идея 21
Используйте анимацию, вместо показа результата сразу

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

Идея 22
Попробуйте постепенное вовлечение, вместо быстрой регистрации

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

Идея 23
Используйте меньше линий, они распыляют внимание

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

Идея 24
Продавайте преимущества, а не функции

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

Идея 25
Проектируйте пустые состояния, а не только заполненные

Бывают случаи, когда на странице отображаются 0, 1, 10, 100, или даже 10 000+ результатов, которые, зачастую, необходимо выводить различными способами. Скорее всего, человек начнёт пользоваться страницей, когда она будет пуста, однако, потом, она начнёт заполняться данными. Мы часто забываем создавать дизайн для этого пустого состояния, когда еще нечего отображать, и таким образом рискуем пренебречь пользователем. Мир без данных — это страшное место. Когда пользователь в первый раз смотрит на ваше приложение и все, что он видит, это чистый лист без всяких указаний, вы упускаете хорошую возможность. Пустые состояния страниц — идеальные кандидаты для того, чтобы заполучить пользователя, проведя его через обучение и показать ему, что делать дальше.

Идея 26
Используйте явный выбор, вместо чекбоксов

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

Идея 27
Последовательность интерфейса лучше переобучения

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

Это перевод советов проекта под названием “Good UI” от Jakub Linowski. Перевели в компании UXDepot с одобрением автора.

Это вторая часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂