- Метафори
- Кінетична фізика
- Жести свайпами
- Жести реагування
- Просторова узгодженість
- Морфінг рідини
- Частота та новизна
- Непосидючість
- Орієнтири прокрутки
- Видимість вмісту на дотик
- Неявне введення
- Закон Фіттса
- Прокрутка
- Заключні думки
У дизайні може здатися, що в ньому немає ніякої науки - лише відчуття та інтуїція. Навіть дослідники мають проблеми з науковим обґрунтуванням практик дизайну взаємодії, вважаючи їх загадковим чорним ящиком. Хоча з мого власного досвіду це частково вірно, я намагався деконструювати і відкопати "чому", що стоїть за чудовими проявами дизайну взаємодії.
Пошук в Інтернеті глибинних знань про дизайн взаємодії дає безліч переробленого контенту, який зациклений на персоналіях користувачів, розкадровках та діаграмах Венна, позначених словами "UI" та "UX". Окрім кількох виняткових доповідей, справжній зміст та інсайти відкриваються тим, хто готовий фанатично їх шукати. Або через вивчення незрозумілих, довготривалих дослідницьких робіт, або через маніакальне відтворення сотень сповільнених екранних записів.
Якщо сісти і просто добре подумати, то цінні відкриття також не з'являються за помахом чарівної палички. Суть слова "взаємодія" полягає у взаємовідносинах між людиною та навколишнім середовищем. З мого досвіду, великі одкровення з'являються після того, як ви щось робите - заповнюєте свій розум проблемою - а потім вирушаєте на синтезуючу прогулянку у мріях, щоб перемішати воду в ступі.
Цей есей - не підручник і не збірка інструкцій. Це радше спостереження над невидимими деталями кількох взаємодій, які я часто використовую, але рідко над ними задумуюсь. Окрім відтворення інтерфейсів, я знайшов цю вправу в роздумах ще одним чудовим способом розвинути дизайнерську інтуїцію та словниковий запас.
Метафори
Що таке дизайн взаємодії? Ось як я думаю про це через призму технологій. Дизайн взаємодії - це мистецтво створення досвіду, який плавно реагує на наміри людини. Коли свайп викликає дію? Чи зберігають жести імпульс? Що відбувається, якщо палець закриває контент? Як ми можемо передбачити намір на основі контексту? Добре пропрацювавши ці деталі, ми створюємо відчуття, що продукт є природним продовженням нас самих.
Але це не такий вид мистецтва, як живопис чи написання музики. У дизайні взаємодії є унікальна людська складова. Чому? Тому що в кінцевому підсумку люди намагаються зробити щось за допомогою продукту. Краси у формі та композиції недостатньо. Існує внутрішнє задоволення від досягнення цілісного балансу між формою та функцією. Чудовий дизайн взаємодії заохочує до навчання, повторно використовуючи метафори. Ви можете використовувати більшість сенсорних інтерфейсів лише двома жестами: дотиком і свайпом. Наприклад, в iOS єдиний жест, якому ви навчилися, - це свайп вгору, щоб відкрити:
Тепер ви навчилися робити свайпи, які розблоковують контроль над багатьма іншими частинами інтерфейсу. Ковзний рух також підказує, що інтерфейс складається зі складених шарів, як колода карт. Знаючи це, ви, можливо, захочете спробувати провести пальцем вниз по екрану, щоб відкрити більше елементів керування. Концептуально, інтерфейс також неявно навчає вас, що свайп "вниз" відкриває шари функціональності системи. Ці знання поглиблюються, коли ви заглиблюєтесь в екосистему Apple.
Ми можемо розтягнути метафори дизайну взаємодії ще далі. Чому свайп по горизонталі дозволяє переходити між сторінками? Тому що саме так ми інтуїтивно взаємодіяли з книгами протягом тисячоліть.
Чудові взаємодії змодельовані на основі властивостей реального світу, таких як переривчастість. Це звучить трохи безглуздо, адже, очевидно, що перегортання сторінки в книзі переривається. Але уявіть, якби це була анімація, на яку потрібно було б чекати!
Щипок - ще один жест, який ми інтуїтивно асоціюємо зі зміною масштабу. Простіше кажучи, масштабування - це акт точності - регулювання кількості видимих деталей.
Ми можемо думати про щипання як про рухи, що вимагають складних моторних навичок, як-от підбирання крихітних предметів або робота зі спеціями. Звісно, ми стискаємо пальці для більшої точності:
На сенсорному екрані інтерфейс повинен спочатку встановити опорну точку, з якої починається масштабування, і набагато простіше і точніше вибрати опорну точку, стиснувши пальці разом:
Технічно, опорну точку також потрібно розраховувати, коли пальці починають розводити в сторони. Але зазвичай це означає зменшення масштабу, і точна точність початку координат не настільки важлива. Для навмисної точності потрібно, щоб два пальці були близько один до одного, як при захопленні об'єкта.
З наукової чи інтуїтивної точки зору, існують сотні дизайнерських рішень, прийнятих кимось, хто одержимий найдрібнішими поправками, щоб, коли вони працюють, нікому не доводилося думати про них. І багато з них використовують нашу інстинктивну поведінку.
Кінетична фізика
Екран блокування, що зсувається вгору, показує, що, по суті, це лише накладка, яку можна прибрати, провівши пальцем вгору, і в цьому обрамленні знаходиться додаток. Це означає, що тепер ви також знаєте, як закривати програми. Давайте подивимося, як закриття програми перетворюється на динамічний острів. Зверніть увагу, як жест зберігає імпульс і кут, під яким він був кинутий. Він ніколи не буває ідеально відцентрованим або послідовним у часі.
Цей рух ґрунтується на нашому природному відчутті фізики реального світу, подібно до того, як ми відчуваємо рух гральної карти. Хоча рух гральної карти демонструє менше відскоку, оскільки вона концептуально легша і не перетворюється на щось магнітне.
Жести свайпу
Коли свайп запускає дію? Це здається тривіальним: ви натискаєте вниз, трохи рухаєтесь, а потім нарешті запускаєте дію після того, як відпускаєте палець. Після того, як я сам створив кілька сенсорних взаємодій за допомогою SwiftUI, я зрозумів, що це не завжди так. Іноді ми очікуємо, що дія буде виконана "під час" проведення пальцем.
Легкі дії, такі як відображення накладок, більш природно спрацьовувати під час свайпу через довільну відстань. Наприклад, одним жестом я можу одразу помацати поверхню накладання, зрозуміти, що вона дає мені пошуковий рядок, а потім закрити, якщо це не те, що я хочу. Очікування на завершення жесту тут було б схоже на затягування.
Ось приклад з прототипу MercuryOS SwiftUI, над яким я працював. Відчувається, що очікується запуск дії, коли елементи, що рухаються під час жесту, досягнуть свого логічного, кінцевого положення. Зверніть увагу, як екран розблоковується після того, як обидва заголовки займають своє положення, а потім блокується одним жестом без відпускання пальця. Знову ж таки, очікування завершення жесту перед розблокуванням призвело б до того, що інтерфейс виглядав би зламаним і був би менш зручним.
Тепер давайте розглянемо приклади, де запуск дії вимагає явного наміру. Перемикач додатків iOS ніколи не закриє програму до завершення жесту. Незалежно від відстані або того, що програма частково знаходиться за межами екрана:
Для мене це має сенс, тому що закриття програми є деструктивним, і було б неприємно, якби програма закрилася посеред свайпу. Що, якби я передумав на півдорозі і випадково досягнув порогу для закриття? Я можу втратити важливий прогрес у програмі! Щоб переконатися, що інтерфейс реагує на наміри, запуск по завершенню жесту, незалежно від відстані, відчувається саме тут.
Ось ще один приклад, де, незважаючи на те, що я провів пальцем на достатню відстань, щоб зображення було повністю видимим, воно не з'являється, поки жест не завершиться. Це дає змогу легко зазирнути на інший екран під час пошуку програми, не прив'язуючись до неї, і швидко перервати жест, змінивши напрямок.
Жваві жести
По-справжньому гнучкі жести миттєво реагують. Як згадувалося вище, жести можуть мати явний поріг спрацьовування, але це не означає, що достатньо просто виконати анімацію 0 → 1.
Наприклад, наївна реалізація стискання картки буде експоненціально збільшувати масштаб після певного порогу:
Якщо ви натиснете достатню кількість для анімації, то не відчуєте, що ви зламали інтерфейс. Але інтерфейс не дає можливості або впевненості в тому, що карту можна затиснути навіть з меншою швидкістю. Це також не приносить задоволення при виконанні.
Набагато краще відчувати, що дельта шкали застосовується негайно, а потім виконується анімація після перевищення заданого порогу:
Чомусь навігація у Налаштуваннях iOS не відчувається такою ж швидкою, як у Перемикачі програм. Шар з'являється праворуч, що підказує мені, що його можна зняти, провівши пальцем ліворуч. Але якщо ви помилилися, то негайний свайп назад не перериває анімацію. Вам доведеться дочекатися її завершення.
Просторова узгодженість
Динамічний острів має приємну взаємодію, коли при натисканні додаток виїжджає з-під острова, щоб закрити екран:
Але якщо острів "розгорнуто", що концептуально повідомляє інтерфейсу про мій намір отримати "більше деталей", програма не виїжджає з острівця. Натомість він запускається з іконки, якщо її видно. Крім того, додаток з'являється праворуч:
Я можу лише припустити, що, запускаючи Spotify з іконки, набагато зрозуміліше, звідки відтворюється аудіо. Скажімо, у вас три музичні програми в одному ряду. Рух допомагає встановити зв'язок між аудіоплеєром та його джерелом.
Аналогічно, якщо програма зсувається праворуч, вона повідомляє, де вона знаходиться в просторі - в перемикачі програм. Переміщення справа, а не зліва, також означає, що програма тепер є першою у стеку програм у перемикачі.
Однак, рідна програма Годинник ніколи не відкриється зі своєї піктограми. Він завжди вискакує з острівця, навіть коли його розгорнуто:
Здається, це підтверджує теорію, викладену вище. Оскільки модуль таймера Island є специфічним лише для однієї програми, і не може бути іншої програми з таким самим Island, немає потреби пояснювати, звідки він узятий.
Морфінг флюїдів
Ми всі знайомі з красивими плавними, переривчастими жестами iOS для швидкої навігації додатками. Свайп вгору перетворює повноекранну програму на її іконку:
Цікава деталь полягає в тому, що іконка навмисно розтягується знизу, щоб заповнити рамку, коли вона плавно змінює свою форму від вертикального прямокутника до рівномірного квадрата. Трохи більш очевидно, що відбувається, коли ви дивитеся на нестандартну іконку GitHub:
Ця методика передбачає, що іконки додатків дотримуються рекомендацій, викладених Apple. Іконка Bluesky ігнорує рекомендовану безпечну зону, і в результаті нижня ~10 пікселів іконки обрізається, дублюється і розтягується, що призводить до цього дивного ефекту повторюваного зображення:
На практиці це не відчувається повністю, але, безумовно, не так добре:
Частота та новизна
Як дизайнер, я люблю все оживляти. Постійність об'єкта, створення фокусної точки та задоволення - це вагомі причини для цього. Але це не так очевидно, коли "не треба" щось анімувати.
Іноді ми можемо не анімувати взаємодію миші або клавіатури, і це не буде здаватися нам незручним. Існує невідповідність між введенням з периферійних пристроїв і тим, що відбувається на екрані. Натискання клавіші відчувається менш вісцерально і більш механічно, ніж дотик до екрану.
Хорошим прикладом можуть бути командні меню. Є спокуса накласти на накладання непрозорість і вицвітання масштабу. Але якщо ми на мить замислимося над тим, що частота взаємодії складає сотні разів на день, це починає відчуватися більше як когнітивне навантаження після перегляду однієї і тієї ж анімації в сотий раз. 3
При такому частому виконанні, новизна взаємодії також зменшується. Зникає відчуття, що ви робите щось особливе, заслуговуюче на особливий розквіт.
Приклад: я працював над інструментом для створення закладок bmrks.com і інтуїтивно відчував, що анімація активного індикатора та елементів, які додаються і видаляються зі списку, є чудовим рішенням:
Через пару днів вони почали відчувати себе млявими. Незважаючи на те, що я зробив рух ще більш швидким, я відчував, що мені доводиться занадто довго чекати при взаємодії з клавіатурою. Я вилучив рух з основних взаємодій і раптом відчув, що рухаюся набагато швидше:
Контекстні меню (клацання правою кнопкою миші) в macOS також з'являються без руху. Використовується тисячі разів на день, з дуже низькою новизною і високою частотою. Незважаючи на те, що це взаємодія з мишею, здається правильним не анімувати появу меню:
Цікаво, що меню непомітно зникає. Якщо придивитися уважніше, обраний пункт на короткий час блимає акцентним кольором (рожевим), щоб засвідчити, що елемент було успішно обрано. Я можу лише припустити, що меню, яке зникає, виглядає більш витонченим і навмисним, ніж раптове зникнення після блимання:
Ще один гарний приклад - перемикач додатків у macOS, який дуже подобається користувачам, які багато користуються клавіатурою. Накладення ніколи не анімаційне, що робить перехід між програмами швидким:
Крім того, якщо проміжок часу між натисканням клавіш Command і Tab досить малий, попереднє активне вікно отримує фокус миттєво, без відображення меню:
Непосидючість
Чудова взаємодія не обов'язково має бути суто практичною. Ми всі бували на уроках математики, коли кусали губи або повторювали клацання олівцем, хрумтячи цифрами. Така поведінка вважається непосидючістю. Іншими словами, повторювані рухи, які, очевидно, допомагають зняти ситуативний стрес або навіть покращують концентрацію уваги. Хоча немає жодних наукових досліджень, які б підтверджували це твердження 4, все ж таки непосидючість відчувається як частина навмисного дизайну взаємодії.
Непосидючість також може бути запізнілою думкою або приємним побічним ефектом. Однак кейс AirPods надзвичайно приємний для гри. Вважати це випадковим збігом було б дуже великодушно.
Apple Pencil є більш очевидним кандидатом на те, щоб навмисно створювати непосидючий дизайн. Кінчик олівця відкручується, а це означає, що його можна замінити в будь-який момент. Як не дивно, крутіння кінчика та обертання корпусу олівця забезпечує приємне тертя, з яким можна невимушено гратися під час роздумів.
А ось ще одна божевільна фішка, на яку я б не поставив свої гроші, що вона зроблена навмисно. Хоча це дуже круто.
Орієнтири прокрутки
У macOS ви завжди можете знайти вказівник, потрясши мишкою. Ця взаємодія чудова, тому що вона використовує розчарування і природну реакцію, яку люди відчувають, коли втрачають вказівник.
Щось подібне досить часто трапляється зі мною на мобільному, коли я переглядаю довгий контент. Я прокрутив вниз на півдорозі, і під час читання мені хочеться швидко згадати щось зверху. Але потім мені незручно прокручувати назад, тому що я втрачаю дорогоцінну позицію прокрутки і прогрес у читанні.
Я зробив крихітний прототип, в якому подвійне натискання на смугу прокрутки встановлювало позначку поточної позиції прокрутки. Тепер я можу вільно переміщатися по сторінці і двічі натискати на мітку, щоб повернутися до того місця, де я був раніше.
Це здається звичним у використанні, оскільки смуга прокрутки вже інтерактивна на дотик. Якщо ви не знали, тривале натискання на смугу прокрутки робить її перетягуваною, що значно пришвидшує швидке прокручування.
Це нагадує мені старий прототип міні-карти, який я зробив. Натхненний іграми, де ви завжди маєте огляд навколишнього середовища з висоти пташиного польоту. Чому б не створити подібне відображення для навігації по сторінці?
Видимість сенсорного контенту
На сенсорних інтерфейсах іноді палець може затуманювати те, що відбувається на екрані, що ускладнює виконання жестів з точністю до пікселя. Зазвичай інтерфейс відображає тимчасове зображення того, що знаходиться під пальцем.
Наприклад, в iOS при натисканні і перетягуванні для переміщення текстового карету над точкою дотику з'являється лупа зі збільшенням. Однак, коли палець опускається вниз і більше не накриває маркер, лупа зникає.
Подібна деталь використовується і для клавіатури. При натисканні на клавішу з'являється збільшена клавіша, що дає вам впевненість у тому, що інтерфейс зрозумів, що ви мали на увазі.
Не завжди є сенс віддзеркалювати затемнену область. Наприклад, повзунки можуть бути крихітними і зникати під дотиком великого пальця. Це допомагає переконатися, що жест перетягування не скасовується, коли ви віддаляєтеся від повзунка і продовжуєте натискати вниз:
Хоча пошук відео - це здебільшого візуальна взаємодія, існує незрозумілий рівень дискомфорту, коли ви взаємодієте з елементом, який не можете побачити.
Ось більш наочний приклад, коли дуже важливо розуміти вміст меню:
Неявне введення
Протягом тривалого часу ми знімали шари між людиною та комп'ютером. Сенсорний ввід підвищив рівень цих відносин, запровадивши жести та тактильні відчуття. Незабаром додатки більше не будуть зв'язані обмеженнями фіксованого екрану.
Клавіатура, миша, дотик, голос - все це явні засоби введення. Вони відчуваються як природне продовження нас самих 2, коли доведені до досконалості. Але чи не є матір'ю всіх вхідних даних зовсім не вхідні дані? Коли інтерфейс використовує контекст як вхідні дані і може здогадатися, що ви намагаєтеся зробити, не запитуючи, це справді чарівно.
Наприклад, якщо подивитися на екран, Apple Maps покаже активну навігацію по маршруту без розблокування. Apple Wallet збільшить яскравість при піднесенні перепустки для сканування. Spotify налаштує інтерфейс, щоб бути більш доступним під час водіння.
Деякі кастомні додатки iOS будуть розмивати вміст програми при відкритті перемикача додатків. Спочатку я думав, що це просто оптимізація продуктивності. Але виявилося, що це навмисна спроба приховати потенційно конфіденційні дані, такі як медичні записи або банківська виписка.
Закон Фіттса
Закон Фіттса стверджує, що час натискання на щось залежить від відстані та розміру. 5 Чим більша ціль і чим ближче вона до місця, де знаходиться ваш вказівник, тим краще.
Операційні системи використовують "магічні кути" на краях екрану, оскільки цільова область нескінченно велика. 6 Наприклад, у macOS ви можете налаштувати, що станеться, коли вказівник переміститься до кута. Ви можете показати Launchpad з лівого верхнього кута:
Розмір цілі нескінченний, оскільки вказівник не може вискочити за межі кута, тому точність, необхідна для цієї взаємодії, дуже низька. Дотягнутися до будь-якого кута можна швидким клацанням миші. Саме тому операційні системи розміщують часто використовувані меню, як-от меню Apple, у кутах.
Радіальні меню є зразковим прикладом закону Фіттса. Вони з'являються навколо вказівника, роблячи розмір і відстань до будь-якої цілі однаковими для всіх дій. З часом м'язова пам'ять спрацьовує і навіть дає змогу вибирати дію, спираючись лише на відстань і напрямок.
Прокрутка
У більшості операційних систем ви можете прокручувати будь-яку прокручувану область, навіть якщо саме вікно не активне. Це чудово, за винятком випадків, коли інше вікно прокручується ненавмисно.
За допомогою Magic Mouse я можу прокручувати вікно, а потім перемістити вказівник на друге вікно, щоб клацнути або знайти щось, і події прокрутки не будуть реєструватися в другому вікні. Для мене це дуже зручно.
Однак, з будь-якою традиційною мишею, наприклад, Logitech MX Master 3, прокрутка першого вікна скасовується і перехоплюється другим вікном. І це дуже засмучує, коли це відбувається щодня:
У миші Magic Mouse прокрутка скасовується безпосередньо при фокусуванні на іншому вікні:
Вказівні пристрої, такі як Magic Trackpad і Magic Mouse, також розблоковують прямі маніпуляції для настільних комп'ютерів. Окрім очевидних можливостей, як-от перегортання між програмами, можна також безпосередньо керувати повзунками за допомогою прокрутки, і все це за допомогою однієї взаємодії:
Заключні думки
Для мене розуміння і формулювання того, чому щось здається правильним, не приходить так само інтуїтивно, як і "розробка" того, що здається правильним. Але це дві сторони однієї медалі. Повинна бути причина. Вона може бути простою, як певний вигин пружини, або чимось більш вродженим, як метафори. Аналіз і осмислення деталей дизайну, які виходять за рамки простого "це приємно", допомагає розвивати смак, підвищувати рівень виконання і розуміти, наскільки важким є прагнення до досконалості.
Переклад rauno.me
Топ коментарі (0)