Чому текстові кнопки на мобільних пристроях – не кращий вибір дизайнера

Сьогодні DesignTalk.club пропонує вам дуже цікавий матеріал – це переклад статті від UX Movement про юзабіліті для кнопок на мобільних. 

Напевно, ви знаєте про різницю між юзабіліті додатків на десктопних пристроях та смартфонах. З огляду на невеликий розмір екрану, кнопки на мобільних пристроях повинні легко знаходитесь, зчитуватися і розпізнаватися. І легко натискатися пальцем (а не мишкою).

Так от, текстові кнопки рідко відповідають цим стандартам. Ось що ви повинні знати, перш ніж використовувати їх в своєму додатку.

Текстові кнопки важче натискати

Палець за розміром більше, ніж курсор миші. Користувачам незручно натискати на те, що менше кінчика пальця.

Палець повністю закриває текстову кнопку, залишаючи користувачів без візуальної підказки.

Якщо текстова кнопка досить довга, у користувачів є невелика візуальна підказка, але цього недостатньо, щоб переконатися, що мета досягнута.

Невеликий розмір текстових кнопок змушує користувачів точно рухати пальцем, щоб потрапити на ціль. Точність вимагає більше зусиль. Щоб переконатися в потраплянні на кнопку, користувач повинен стежити за пальцем і своєю ціллю.

Відсутність чітко виділених країв розмиває кордони кнопки і ускладнює натискання. 

Текстові кнопки написані капсом складніше читати

Щоб вирішити проблему з натисканням текстових кнопок, деякі дизайнери оформляють свої текстові кнопки як заголовні. Система Google Material Design підтримує цей стиль кнопок, але він має свої недоліки.

Заголовні літери виділяють більш чіткі краї для текстової кнопки, але роблять ціль ненабагато більшою. Крім того, такий стиль тексту знижує зчитуваність.

Всі великі літери тексту читати складніше, особливо для користувачів з дислексією. Користувачі покладаються на форму літер, щоб розпізнати слова.

Заголовні літери не мають контрастних ліній які йдуть вгору і вниз, ускладнюючи читання слів з першого погляду.

Текстові кнопки складніше розпізнати

Різниця між текстовими кнопками і текстом полягає лише в кольорі. Це ускладнює розпізнавання текстових кнопок, особливо для дальтоніків. Без чіткої форми текстових кнопок користувачі з більшою ймовірністю можуть пропустити їх і заклик до дії.

Що використовувати замість текстових кнопок

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

  • контурна кнопка

Один із способів – намалювати контур навколо текстової мітки, щоб зробити контурну кнопку. Це робить границі  кнопки видимими і дає користувачам велику і чітку мету. Тепер, щоб зробити свою дію, потрібно натиснути пальцем в будь-якому місці всередині контуру.

Відсутність фону кнопки не дозволяє конкурувати з основними закликом до дії. Легкий, але видимий контур ідеально підходить, щоб не відволікати від основної дії.

  • світла кнопка

Іншою альтернативою текстовим кнопкам є нанесення текстової мітки на світлі кнопки. Світла кнопка виділяє границі кнопки і фон, який конкурує з основним закликом до дії. Відтінок повинен майже зливатися з фоном, але при цьому зберігати достатній контраст для видимості.

Кнопка з візуальною вагою

Як контурна кнопка, так і світла кнопка добре працюють на другорядні дії. Але світла кнопка має трохи більше візуальної ваги, ніж контурна, і на неї зручніше натискати.

Коли потрібні текстові кнопки

Є випадки, коли текстові кнопки мають сенс. Замість того щоб використовувати їх для вторинних процесів, використовуйте їх для дій, які важливі ще менше. Третинні дії не вимагають великої уваги, їм не потрібно надавати багато візуального ваги.

Також текстові кнопки потрібно використовувати тоді, коли користувачам потрібна допомога у прийнятті рішення.

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

Не зловживайте текстовими кнопками

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

Не лінуйтеся і не зловживайте текстовими кнопками. Ваш заклик до дії може бути у вигляді тексту, але він завжди повинен виглядати як кнопка.

Залишити відповідь