У рубриці «Інтерфейси» - переклад статті Паскаля Д'Сільва, співзасновника і креативного директора музичного додатка Keezy. У своєму блозі на Medium він пояснив, як використовувати особливості людського мислення для створення інтуїтивно зрозумілих інтерфейсів, і привів вдалі і невдалі приклади.
Звісно так! Щоб розуміти весь складний світ навколо нас, в своїй уяві ми представляємо багатовимірні моделі предметів. Крім того, ми можемо задіяти цей спосіб мислення навіть для того, щоб обробляти абстрактні поняття.
Я вважаю, що краще програмне забезпечення є продовженням діяльності людського мозку. Воно повинно дозволяти нам мислити природним чином, підлаштовуватися під наше мислення, а зовсім не навпаки. Інтерпретація інформації повинна бути роботою виключно комп'ютера, а не нашої. Ми саме для цього створюємо цифрових рабів.
моделює простір
Щоб розробити просторовий інтерфейс, вам потрібно думати як в межах екрану, так і за його межами. Ви повинні пам'ятати про фізичні властивості предметів у вашому інтерфейсі. Звідки предмет з'явився? Куди він піде? Як він буде вести себе при кінетичному впливі? Переймають одні об'єкти фізичні властивості інших? Де ви перебуваєте щодо всього іншого?
На ці питання складно відповісти словами. І, хай це очевидно, але я все-таки вважаю, що ефективніше вирішувати візуальні питання за допомогою зображень.
малюємо карту
Коли ви розробляєте простір, дуже корисно уявити його собі як фізичну модель, якої можна маніпулювати, по якій можна пройтися. Замість того щоб розміщувати поруч один з одним окремі макети в одному вимірі, спробуйте мислити на рівень вище - просторово.
Нижче наведено аналіз парадигми контекстуального збільшення, яка стала ключовою при створенні Keezy Drummer.
Проста карта, що описує відносини між просторами в інтерфейсах в Keezy Drummer. На ній не відображені межі екрану. Стрілки являють собою часовий вимір
Можна візуалізувати відносини між вимірами як додавання вимірювань нижчого рівня. Кожне нове вимір створює значно складнішу модель для візуалізації.
Як бачите, уявлення чотирьох вимірювань в двовимірної формі досить швидко ускладнюється. «W» в цій фігурі представляє час
Перехідний інтерфейс, який демонструє контекстуальное збільшення в Keezy Drummer Ми можемо розробляти інтерфейс з урахуванням часу, беручи до уваги кінетику і перехідні інтерфейси. І тимчасові, і просторові індикатори мають характеристики фізичних предметів.
Рух має на увазі простір. Рух посилює фізичні характеристики простору на екрані і поза ним. Об'єкти, обмежені розумними фізичними законами, допомагають створити чітку модель.
Ми всі бачили цю класичну модель видалення рядків зі списку. Свайпом посуньте осередок - і за нею з'явиться кнопка. Тапніте по іконці - і вся осередок зникне.
А що станеться, якщо змінити те, як осередок йде з екрану?
Якщо ми пом'якшимо або полегшимо рух осередки, що йде з екрану, ми можемо припустити, де вона повинна зупинитися. У нашому випадку осередок зупиниться недалеко за межами екрану. Це можна зробити, якщо ми маємо на увазі, що є якась зона тимчасового зберігання, з якої вилучені осередки можна повернути в список. Наприклад, ми могли б дати користувачеві можливість свайпом відкрити з правого боку екрану графічне вікно, в якому відбилися б вилучені раніше пункти списку.
Інструкції по Material Design від Google, здається, припускають, що ви повинні тільки збільшувати швидкість предметів, які покидають екран. Дозволю собі не погодитися
Якщо швидкість предмета збільшується, де він повинен врешті-решт опинитися? Поза нашого доступу? Ми що, відправляємо цей предмет в вакуум космічного простору?
Якщо ж осередок зі списку вільно обертається і переміщується по осях x і y, припиняється чи її рух поза системою? Може, там є гравітація. Може, вона падає в купу таких же віддалених осередків.
Переміщення по осі Z має на увазі глибину Осередок зі списку може провалюватися. Вона може згорнутися вглиб, як гармошка акордеона. Вона може навіть заскріпеть. Колір фону міг би навіть витекти з осередку, як рідина. Я можу нескінченно довго продовжувати з візуальними прикладами, але, думаю, ви вже зрозуміли, про що йдеться; за допомогою руху і простору можна закодувати дуже багато значень.
Інтерфейси з правильним просторовим дизайном
Scorekeeper досить концептуальний, але він відмінно справляється з фокусуванням. Він відокремлює режими, а не надає користувачеві роздутий набір опцій, через які йому доведеться ще прорватися. Складність ховається за другорядними і третьорядними субінтерфейсамі. Кожен субінтерфейс при цьому так само простий, як і батьківський.
Tinder відомий тим, що задіює в своєму інтерфейсі парадигму карт. Користувачеві видається нескінченна колода карт, яка щосили використовує глибину по осі z. Відкиньте карту з колоди направо, якщо вам цікава дівчина, і наліво, якщо немає. Крім того, якщо ви натиснете кнопку «серце» або «х», карта автоматично відкине на відповідну сторону екрану, посиливши таким чином функцію простору.
А це фізична, кінетична модель, яка дуже схожа на описану вище.
Другорядні екрани зазвичай розміщуються на горизонтальному відрізку, що відбивається в русі навігації: спадний каскад до розташованого нижче контенту. Відмінний приклад руху, використовуваного для відображення мається на увазі простору.
Я не впевнений, що це було зроблено навмисно, але інтерфейс листування з тими, хто вам сподобався, знаходиться з правого боку, з тієї ж, куди ви відкидали карти з сподобалися вам людьми.
Модель Tumblr дуже проста. Існує кілька просторів, з'єднаних між собою панеллю вкладок (tab bar). Це легко візуалізувати, якщо ви уявите собі інтерфейс з точки зору камери. Постійна панель інструментів слід за нами, ніби прив'язана до камери, через яку ми дивимося. І, хоча ви не бачите детального руху по осі x в міру зміни просторів (як це зроблено в Tinder), мається на увазі відчуття простору з обох сторін колонок.
Погляд зверху відкриває нам інтерфейс, в якому складно загубитися. Кілька високих колонок з можливістю прокрутки і кілька просторових накладних елементів. Цей механізм панелі вкладок можна зустріти всюди, в тому числі в таких сервісах, як Instagram, Twitter, Foursquare, і так далі Але жоден з цих інтерфейсів не є принципово новим. Тут цікаво використання складовою моделі, яка запускається дотиком до іконки з блакитним олівцем. Не має значення, де ви її торкнетеся, ви не пересилає в нову частину інтерфейсу, швидше за вам видається якесь тимчасове пропозицію в сфальцьованому вигляді.
Модель Facebook «Свайпні, щоб закрити»
Класичний ефект «світловий короб», але не тільки він. Натисніть на фотографію, і вона вийде на перший план. Новини на тлі відступають і затемняются. Змахніть фотографію назад, і вона повернеться в початкове положення, а оригінальний вид компоновщика знову буде у фокусі. Він стабільний.
Інтерфейси з недбалим просторовим дизайном
Якщо розібрати цих дорогих Франкенштейнов, можна багато чому навчитися.
Spotify, ну що ж ти робиш?
Це одне з найбільш заплутаних в просторовому сенсі, однак досить популярне серед користувачів програмне забезпечення. Описати, як Spotify використовує простір в своєму інтерфейсі, - все одно що описати грудку з проводів. Кидаю виклик: чи зможете ви ефективно накидати ескіз цього грудки на папері?
Я навіть близько не підійшов до того, щоб передати цей інтерфейс з боку, і взагалі заплутався Користувач Spotify стикається з незрозумілою каруселлю інтерфейсів, захованої всередині режимів, які заповнюють собою списки, які, в свою чергу, забиті в секції, які містяться в списках, що розкриваються , які ховаються за жестами. Кожен пункт зі списку в меню «гамбургер» змушує користувача іти за сім верст сьорбати киселю тільки для того, щоб виконати найпростіше дію. Виникає відчуття, що для того, щоб взагалі щось зробити, доводиться грати в «Вибери собі пригода».
І хоча збиває з пантелику, як взагалі команда талановитих інженерів і дизайнерів могла створити таке жахливе споруда, якщо ви поглянете на ціннісні орієнтири Spotify при розробці ПЗ, то вже навряд чи станете чогось дивуватися. Цілісний підхід до створення програмного забезпечення просто викинули у вікно заради нічим не обгрунтованих мемів, які в ходу всередині компанії.
Справедливості заради треба сказати, що інші компанії в музичній сфері роблять те ж саме. Інтерфейси Apple Music і Rdio однаково нестерпні. Простору тут приділяється дуже мало уваги або навіть не приділяється зовсім.
Додаток Paper від Facebook
Ця програма розхвалювали за використання пружних фізичних властивостей і екстравагантну анімацію, але все чудово тільки на перший погляд. Команда Paper створила деякі кльові технології і навіть відкрила вихідний код програми. Його забавно запустити пару раз, і на цьому все. Paper - це інтерактивна іграшка для iPad, яка згодом була трохи змінена і втиснута в крихітний iPhone. Ну, це Push Pop Press, який впихнули в Facebook.
Прокрутка може тривати не один день. Пружина за пружиною, пружина за пружиною. Картки, які розгортаються як новенькі газети. Найзаплутаніше меню «гамбургер» в усьому світі. Все тут симулюється і рухається заради стилю. Але це зовсім необов'язковий важкий кінетичний працю. Дуже втомлює пройти через ту кількість фізичного простору, яке описано в інтерфейсі, я вже не кажу про те, що треба постійно тримати в голові модель інтерфейсу, щоб пам'ятати, де ви знаходитесь.
Це хороший приклад того, що програма зайшла занадто далеко.
Розвага на борту авіакомпанії Turkish Airlines
Як можна уникнути клубка проводів? Треба віддалитися, подивитися ширше, буквально. Як я вже раніше говорив, дуже сильно допомагає в такому випадку схематичне мислення. Просте зазначення напрямків на карті в результаті призводить до менш хаотичного подорожі через простір.
Декілька порад:- Будьте обережні, поєднуючи в своєму проекті каруселі, області прокрутки, збільшення і меню «гамбургер». Кожен з цих прийомів є просторовою складність.
Тут мається на увазі горизонтальний простір, але воно вимагає від обох інтерфейсів переміщення на величезну відстань