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

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

1) непрозрачное ценообразование

2) неясная ценность подписки против разовой покупки

Пример выше показывает как меняется цена в зависимости от выбранного объема товара, но никак не помогает понять в чем преимущество подписки и сколько на самом деле можно сэкономить. Конечно, можно взять в руки лупу и прочитать весь мелкий текст, взять в руки калькулятор, вычесть 17%, вычесть доставку, прикинуть экономию на горизонте 12 месяцев в 3% в месяц и… уйти заниматься своими делами, а не покупать что-то

Когда пользователь не может наглядно сравнить что-либо и сделать для себя логический вывод об экономии при использовании подписки, у него нет абсолютно никакой мотивации оформлять эту подписку. Основная задача подобного интерфейса, который предлагает оформить подписку, – дать четкое понимание и ответы на все вопросы пользователя, особенно на вопрос “А нафига мне подписка? Мне же только спросить”.

Улучшаем форму подписки

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

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

Конечно, это не все улучшения! Стоит добавить и несколько преимуществ подписки, чтобы увеличить стимул пользователей оформить ее. Вместо добавления 5 строчек мелким текстом, сделайте чек-список с галочками и кратким описанием преимуществ. Таким образом пользователям не придется рыскать по странице в поиске этой информации.

Вполне может оказаться, что у вашей подписки преимуществ не 2 или 3, а целых 30. Чтож, этот список сделает карточку подписки чуууууть чуть больше, поэтому не стоит указывать их все, а выбрать все же 3-4 наиболее весомых для пользователя, а остальные спрятать под кнопкой-ссылкой “Дополнительные преимущества”.

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

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

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

Динамическое обновление цен

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

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

Расставляем акценты

Важно учесть, что выбранные в данный момент опции – покупка с подпиской и 1 товар – должны быть четко выражены: карточка имеет четкий контур и легкую серую заливку, в отличии от неактивной карточки со светло-серым контуром и белой заливкой, тем самым неактивные карточки не будут отвлекать пользователя.

И еще один визуальный трюк в копилку акцентов: делайте ту карточку, вариант который должен быть выбран (в нашем примере – подписка) визуально крупнее, чем альтернативу. Всегда проще попасть мышкой в более крупный объект

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

А вы бы в таком интерфейсе оформили подписку?

Перевод статьи How to Design a Better Subscription Box that Sells из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

Ещё один плохой вариант — делать индикатор слишком похожим на кнопку. Это происходит тогда, когда индикатор имеет сплошную цветовую заливку, а текстовое название и иконка окрашены в белый цвет.

Пользователи могут легко принять индикатор за кнопку из-за похожего внешнего вида. В результате они могут нажать на индикатор и не получить ожидаемого результата.

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

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

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

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

Индикаторы оповещения

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

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

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

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

Перевод статьи The Optimal Design for Sidebar Indicators из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

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

Сделайте названия понятными

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

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

• Название «Наивысшая оценка» можно заменить на более понятное «По рейтингу».
• Название «По дате изменения» можно заменить на более понятное «Сначала новые».
• Название «По дате создания» можно заменить на более понятное «Сначала старые».
• Название «По возрастанию» можно заменить на более понятное «От А до Я».
• Название «По убыванию» можно заменить на более понятное «От Я до А».
• Название «Цена: от высокой до низкой» корректнее заменить на «Сначала дорогие».
• Название «Цена: от низкой до высокой» корректнее заменить на «Сначала дешёвые».

Используйте переключатель

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

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

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

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

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

Проблемы с пространством экрана

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

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

Детализируйте критерии сортировки

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

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

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

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

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

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

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

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

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

Как правило, большинство дизайнеров обозначают необязательное поле с помощью надписи — «(необязательное)». Но спросите себя, зачем людям заполнять необязательное поле — какую выгоду они получат от того, что предоставят ненужную информацию?

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

Например, не просто показывайте надпись «Номер мобильного телефона (необязательно)». Напишите над полем следующее — «Для получения СМС с новостями и предложениями». Так пользователи будут знать, что вы будете использовать их номер телефона для рассылки.

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

Как скрыть поле с помощью чекбокса

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

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

Как скрыть поле с помощью ссылки

Ещё один способ скрыть необязательное поле — использовать ссылку. Она будет находиться под пояснительным текстом и предлагать пользователям ввести нужные данные.

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

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

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

Подписи «(необязательно)» недостаточно

Поместить текст «(необязательно)» в название поля недостаточно. Если вы хотите, чтобы пользователи заполняли необязательные поля, предоставьте им поясняющий текст и скрывайте их с помощью условного чекбокса или ссылки.

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

Перевод статьи Why You Should Hide Your Optional Form Fields из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

Отслеживание прогресса

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

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

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

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

Сохранение прогресса

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

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

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

Разбивайте длинные шаги на страницы

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

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

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

Скрывайте группы полей, подчинённых условиям

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

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

Еще один пример скрытия групп полей, подчинённых условиям, — страница «Автомобили» в разделе «Обязательства». Вместо того, чтобы отображать несколько групп полей для автомобилей, пользователи могут нажать на кнопку «Добавить ещё один автомобиль», если им нужно его добавить. Это значительно уменьшит длину формы.

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

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

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

Содержание в виде меню

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

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

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

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

Сводная страница

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

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

Огромные формы

Огромная форма с более чем 100 полями требует применения большего количества UX-приёмов, чем просто большая форма. Вам придётся приложить дополнительные усилия, чтобы пользователи могли эффективно отслеживать и навигировать по страницам и подстраницам.

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

Перевод статьи How to Simplify a Massive Form With Over 100 Fields из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

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

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

Лучше ограничить уровень навигации до одного. Второй уровень следует переместить в верхнюю часть страницы, а третий уровень убрать совсем.

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

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

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

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

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

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

Перевод статьи A Better Approach to Multi-Level Sidebar Navigation из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

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

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

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

Если пользователи захотят посмотреть все товары из категории, в нижней части каждой группы товаров они смогут нажать на кнопку со стрелкой, направленной вниз под названием «Посмотреть больше». Для удобства восприятия каждая категория разделена линией. После раскрытия категории на кнопке раскрытия со стрелкой вверх должно быть написано «Свернуть».

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

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

Перевод статьи How to Handle Large-Scale Item Groups in a Sidebar из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

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

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

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

Иконки

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

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

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

Проведите красную линию сквозь иконки. Это поможет определить, совпадают ли их центры. Если да, значит, иконки правильно выровнены и симметричны.

Стрелка сворачивания

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

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

Всплывающие подсказки

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

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

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

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

Перевод статьи How to Design a Sidebar That Saves Screen Space из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

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

Например, список элементов на примере выше можно разделить на три группы. У вас есть «Рабочее пространство» (“Workspace”) с основными элементами для выполнения рабочих задач. Внутри группы «Сообщества» (“Social”) находятся элементы, связанные со взаимодействием с другими людьми. И наконец, группа «Аналитика» (“Analytics”) включает элементы, которые содержат количественные данные.

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

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

Эффект последовательного расположения

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

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

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

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

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

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

Перевод статьи How to Group Your Sidebar Items for Better Findability из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!