Каким должен быть тумблер на сайте?

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

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

Когда использовать тумблер?

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

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

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

Рекомендации по проектированию тумблеров

1. Тумблер должен действовать немедленно

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

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

2. Не забывайте писать хорошие лейблы

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

3. Сохраняйте внешний вид вашего дизайна последовательным

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

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

4. Выберите правильный инструмент для разработки тумблера

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

5. Сделайте свой тумблер удобным для мобильных устройств

Если вы UI/UX-дизайнер, убедитесь, что ваши мобильные переключатели удобны в использовании.
Для этого вам нужно убедиться, что макет в целом допускает эти две вещи: разрешить пользователям без проблем касаться переключателя и оставить достаточно свободного пространства между компонентами, чтобы интерфейс «дышал». Если вы используете такой инструмент дизайна, как Mockplus, вы можете выбрать переключатели для Android и iOS в соответствии с вашими потребностями в дизайне, что очень поможет улучшить пользовательский опыт вашего мобильного дизайна.

6. Проверьте свой дизайн переключателя

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