Переклад статті Віталія Фрідмана
Гнівні тапи дратують і розчаровують. Ці чудові випадки в нашому інтерфейсі, коли нам потрібно натиснути двічі, а іноді й тричі, щоб продовжити нашу подорож. Звичайно, іноді це трапляється через те, що веб-сайт працює занадто повільно, але іноді винуватцем є цільовий розмір інтерактивних елементів.
Rage Taps, метрика розчарування користувачів, Колін Контрарі
Тож наскільки великими мають бути наші інтерактивні елементи сьогодні? Яким буде надійний розмір іконок, посилань і кнопок - у навігації та на мобільних пристроях? Як зробити так, щоб нашим користувачам було складніше помилятися? Давайте подивимось.
Ви також можете знайти цілу відео-главу про дизайн для дотику в Smart Interface Design Patterns - разом з 30 іншими розділами, присвяченими UX та патернам дизайну.
Підказка щодо цільових розмірів.
Одна з поширених рекомендацій щодо цільових розмірів для мобільних пристроїв - 44×44 пікселів. Це трохи вводить в оману, оскільки пікселі екрану або, принаймні, незалежні від пристрою пікселі (dips) масштабуються до кратності роздільної здатності дисплея. Отже, на різних екранах пікселі відрізняються, і коли ми говоримо про розміри, ми, ймовірно, повинні говорити про dips, а не про пікселі.
Шпаргалка "Розміри цілей", досліджена та розроблена Стівеном Хубером (Steven Hoober).
Залежно від того, де елемент з'являється на екрані, він потребує більшого чи меншого відступу. Загалом, ми дуже точно вводимо дані в центрі екрана, але найменш точно - по краях екрана (як зверху, так і знизу).
Згідно з дослідженнями Стівена Хубера в його книзі "Сенсорний дизайн для мобільних інтерфейсів", щоб мінімізувати кількість натискань, нам потрібно прагнути до 11 мм (або 31 піксель на дюйм / 42 пікселі) у верхній частині екрану і 12 мм (або 34 пікселі / 46 пікселів) в нижній частині екрану. У центрі ми можемо зменшити розмір до 7 мм (або 20 пікселів на дюйм / 27 пікселів). Це включає в себе як ширину, так і товщину інтерактивного елемента.
Як перевести точкові одиниці в пікселі CSS або одиниці Android/iOS?
На щастя, Стівен Хубер (Steven Hoober) надає корисну таблицю перерахунку, яка допоможе вам перевести точки в одиниці px і em, SP або DP для Android, точки для iOS і DIP або px для Windows.
Не всі пікселі однакові.
Як ми бачили вище, розміри мішеней змінюються залежно від того, де компоненти з'являються на екрані. Варто зазначити, що згідно з вимогами WCAG 2.1 AAA, всі цілі повинні мати розмір щонайменше 44 на 44 пікселі, за винятком випадків, коли ціль знаходиться у реченні або блоці тексту. Для таких винятків ми можемо використовувати 27 пікселів, але загалом, чим більше, тим краще.
Навігація в нижній панелі може працювати краще, якщо вам потрібно відобразити більше 5 елементів у нижній частині мобільного екрана.
Для липких меню у верхній або нижній частині екрана нам, ймовірно, слід прагнути до 44-46 пікселів, а краще навіть більше. Однак для посилань, які з'являються на екрані, коли користувач прокручує сторінку вниз, ми, ймовірно, зможемо уникнути більшості проблем за допомогою менших компонентів.
Веб-сайти музею Франса Галса та данського громадського транспорту з 5 пунктами в нижньому меню.
Ось чому ми, ймовірно, зможемо розмістити максимум п'ять елементів на нижніх вкладках мобільного телефону. Замість цього нам, можливо, доведеться використовувати нижній аркуш, який буде ковзати знизу вгору як накладка на верхню частину екрану.
Надання переваги кнопці "Дії" перед окремими піктограмами для таблиць даних.
Складні таблиці зазвичай мають дії при наведенні, які з'являються, коли користувач починає наводити курсор на певний рядок. Зазвичай вони включають в себе все: від виділення та експорту до переміщення та видалення.
Під час тестування відображення іконок при наведенні призводить до великої кількості помилок: користувачі не тільки випадково переходять до невірного рядка, коли вони переміщуються по горизонталі до іконок. Вони також роблять помилки, випадково натискаючи не на те місце і починаючи все спочатку.
Наведення на таблицю для системи дизайну Liferay.
Щоб уникнути гнівних кліків, варто було б перевірити, наскільки ефективно працюватимуть кнопки "Дії" або "Розділити". Дійсно, така кнопка могла б жити в кожному рядку, відкриватися при натисканні і не закриватися автоматично. Можливо, це не ідеальний варіант для всіх випадків використання, але він, безумовно, дає користувачам більше відчуття контролю, оскільки їм потрібно виконувати дії поспіль.
Ніяких значків наведення не видно; замість них в інтерфейсі використовується кнопка "Дії", яка показує опції у вигляді накладання.
Надати асистента для складних маніпуляцій.
Для складних маніпуляцій, таких як обертання зображення або виділення невеликої частини більшої області, ми часто покладаємося на кнопки масштабування або збільшення/зменшення. Ці опції, звісно, працюють, але для дуже точних маніпуляцій вони стають дещо втомливими, особливо якщо використовувати їх протягом тривалого часу.
Шаблон помічника дозволяє користувачам переміщатися по об'єкту за допомогою маленької ручки праворуч. Приклад: Тилко.
Замість цього ми можемо прикріпити невелику ручку, щоб користувачі могли швидше і точніше переміщати свій вибір в межах об'єкта. Таким чином Tylko дозволяє користувачам налаштовувати свої полиці на мобільних пристроях. Масштабування також підтримується, але не обов'язково вибирати одну з областей.
Коли кілька кроків краще, ніж один.
Менше гнівних клацань: Мікроінтеракція Grønland Color Picker, розроблена Ніколасом Пуоджунасом (Mykolas Puodžiūnas).
Завжди максимізуйте область кліків.
Коли це можливо, інкапсулюйте весь елемент разом із достатньою кількістю відступів, щоб забезпечити магічний розмір 42-46 пікселів, який назавжди запобігає натисканню на кнопки гніву. Зазвичай це означає додавання достатньої кількості відступів для іконок, а також надання переваги смугам повної ширини або повної висоти для акордеонів і навігації.
Панелі навігації в ідеалі повинні бути на всю ширину, тому немає необхідності зосереджуватися саме на області посилань. (Копирайт изображения: Ахмад Шадід)
Завжди додавайте достатньо відступів, щоб полегшити натискання на елемент. Знову ж таки, ми прагнемо до інтерактивної області радіусом щонайменше 44 пікселі для кожного інтерактивного елемента.
Ахмад Шадід (Ahmad Shadeed) наводить кілька корисних прикладів використання інтервалів для збільшення клікабельних областей і запобігання клікам гніву. Any Lupe надає ще більше рекомендацій у своїй статті про доступні розміри цілей.
Підбиваємо підсумки.
Падінги завжди корисні для будь-якого типу натискання: стилусом, курсором чи пальцем. З статті "Доступні розміри мішеней", Емі Лупе.
Особисто я б завжди збільшував розміри до 30×30px і 48×48px, щоб переконатися, що помилитися дуже складно. І, звичайно, завжди використовуйте повну ширину або повну висоту для областей, на які можна натиснути. Сподіваємось, це допоможе нам повністю усунути будь-які можливі "натискання гніву" з наших веб-сайтів - і багато ваших користувачів будуть щиро вдячні за це.
Ви можете знайти більше інформації про навігаційний UX у відеотеці про розумні патерни дизайну інтерфейсів 🍣 - з живим UX тренінгом, який відбудеться у вересні цього року.
Корисні ресурси
Є кілька чудових ресурсів про доступні цільові розміри, які можуть бути корисними, якщо ви хочете зануритися в цю тему глибше:
"Доступні розміри кнопок", Емі Лупе
"Сенсорні мішені на сенсорних екранах", Аврора Хейлі
"Розширення клікабельної зони", Ахмад Шадід
"WCAG 2.55 для кращих розмірів зони натискання", Тодд Ліббі
"Закон Фітта в епоху дотику", Стівен Хубер
"Сенсорний дизайн для мобільних інтерфейсів", Стівен Хубер
"Типи розміру для кожного пристрою", Стівен Хубер
Топ коментарі (0)