Просто погляньте на свої повсякденні заняття — і ви побачите, що використовуєте низку фізичних тумблерів, як-от вимикачі світла й чайники. Як UI- та UX-дизайнер може реалізувати ці перемикачі у своєму дизайні? Прочитаймо далі й з’ясуймо.
Коли використовувати тумблер?
Тумблери найкраще використовувати для зміни стану системних функцій і параметрів. Якщо ви хочете дати користувачам змогу змінювати або оновлювати параметри й налаштування, у вашому дизайні має бути тумблер. Однак дизайн перемикачів може трохи збивати з пантелику, адже їхнє призначення дуже специфічне й нагадує використання прапорців або перемикачів.
Розмірковуючи про те, коли використовувати тумблер у своєму дизайні, просто пам’ятайте про два правила: тумблер потрібен там, де необхідна негайна реакція без перевірки чи підтвердження; а також тоді, коли налаштування передбачає ввімкнення/вимкнення або показ/приховування функції.
Але як спроєктувати тумблер, що підійде саме для вашого випадку? Ознайомтеся з наведеними далі рекомендаціями.
Рекомендації з проєктування тумблерів
1. Тумблер має спрацьовувати негайно
Як ми вже казали, дизайн тумблера бере свій початок із реального життя. Візьміть для прикладу вимикач світла й подумайте, як він працює. Ви натискаєте кнопку, щоб увімкнути світло, і натискаєте ще раз, щоб вимкнути його.
У дизайні UI/UX тумблер просто імітує реальний перемикач, тож користувачам легше зрозуміти його й користуватися ним. Іншими словами, взаємодіючи з перемикачами, користувачам не потрібно натискати «Зберегти» чи «Підтвердити», щоб застосувати новий стан. Натомість, коли користувач натискає перемикач, вибрана опція негайно набуває чинності та змінює стан системних функцій і налаштувань. Якщо через затримки системи результат неможливо отримати миттєво, можна додати анімацію циклу обробки стану, щоб користувач бачив, що його перемикач застосовується. Але пам’ятайте: операція не має тривати довше кількох секунд.
2. Не забувайте створювати вдалі мітки
Коли ми бачимо тумблер із вдалими мітками, нам простіше зрозуміти, яким параметром він керує і в якому стані перебуває зараз. Створюючи мітки, переконайтеся, що вони короткі й чіткі. Вони мають складатися не більш як із двох слів, але водночас чітко описувати функціональність перемикачів. Крім того, краще використовувати вбудовану мітку, вирівняну за лівим краєм, адже такі мітки найкраще працюють із тим, як користувачі переглядають макет. Просто пам’ятайте: перемикачі або ВИМКНЕНІ, або УВІМКНЕНІ, і не слід додавати зайві текстові мітки, які захаращують інтерфейс.
3. Зберігайте послідовність у вигляді вашого дизайну
Загальновідомо, що вигляд елемента інтерфейсу допомагає користувачам передбачити, що станеться під час взаємодії з ним. Якщо ваш дизайн не відповідає тому, що користувачам уже знайоме, їм доведеться зупинитися й подумати, як взаємодіяти з інтерфейсом. Створюючи дизайн, переконайтеся, що обрана вами візуальна мова перемикачів використовується послідовно, а всі перемикачі у вашому застосунку оформлені в цьому стилі.
Крім того, не забувайте дотримуватися стандартного візуального дизайну платформи. Якщо стиль ваших перемикачів відповідає стандартам дизайну платформи, люди, знайомі з нею, зможуть легко розібратися в інтерфейсі.
4. Виберіть правильний інструмент для створення тумблера
Спроєктувати тумблери простіше, ніж ви думаєте, адже багато інструментів для дизайну пропонують їх серед основних компонентів. Але більшості з них бракує дещо важливого: вбудованої взаємодії. Саме тому Mockplus заповнює цю прогалину й пропонує дизайнерам тумблери, які повністю функціональні від самого початку. Дизайнерам не потрібно завантажувати зображення, а потім додавати взаємодію — достатньо просто перетягнути перемикач на монтажну область, і все! Спершу це може здатися дрібницею, але вона суттєво впливає на час і зусилля, потрібні для створення прототипу продукту загалом, особливо великих продуктів, у дизайні інтерфейсу яких є багато дрібних компонентів.
5. Зробіть свій тумблер зручним для мобільних пристроїв
Якщо ви UI/UX-дизайнер, переконайтеся, що вашими мобільними перемикачами зручно користуватися.
Для цього потрібно переконатися, що макет загалом відповідає двом вимогам: користувачі можуть без проблем торкатися перемикача, а між компонентами залишається достатньо вільного простору, щоб інтерфейс «дихав». Якщо ви користуєтеся таким інструментом для дизайну, як Mockplus, то можете вибрати перемикачі для Android та iOS відповідно до своїх потреб у дизайні — це дуже допоможе покращити користувацький досвід у вашому мобільному дизайні.
6. Перевірте дизайн свого перемикача
І останнє, але не менш важливе: перед публікацією дизайну потрібно провести тестування за участю користувачів, щоб переконатися, що система не дасть збій. Просто не забудьте перевірити стандарти зручності використання як для загального дизайну інтерфейсу, так і для конкретних компонентів-перемикачів. Найпрактичніший та найефективніший спосіб перевірити дизайн перемикача — старий добрий A/B-тест. Коли йдеться про дизайн перемикача, потрібно перевірити візуальну ієрархію всієї сторінки, а також конкретного компонента. Крім того, не бійтеся змінювати мітки, доки не знайдете таку, яку користувачі зможуть зрозуміти одразу.
