Дизайн матеріалу та загадкова проблема навігації м’яса

У березні 2016 року Google оновив Material Design, щоб додати нижні навігаційні панелі до своєї бібліотеки інтерфейсу користувача. Ця нова панель розташована внизу програми та містить від 3 до 5 піктограм, що дозволяють користувачам переходити між поданнями верхнього рівня програми.

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

Нижні навігаційні панелі є кращою альтернативою меню гамбургерів, тому їх додавання до Material Design має бути гарною новиною. Але версія нижньої навігаційної панелі Google має серйозну проблему: таємнича навігація м’ясом .

Незалежно від того, користувач ви Android, дизайнер чи розробник, це може вас турбувати.

У чому таємниця навігації м’ясом, і чому це так погано?

Таємнича навігація м’ясом - термін, придуманий у 1998 році Вінсентом Фландрсом із відомого веб-сайту Web Pages That Suck. Це стосується кнопок або посилань, які не пояснюють вам, що вони роблять. Натомість вам потрібно натиснути на них, щоб дізнатись.

(Термін «таємниче м’ясо» походить від м’яса, що подається в їдальнях американських державних шкіл, оброблених настільки, що тип тварини, від якої вони походили, більше не розрізнюється).

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

Ви не хотіли б їсти таємниче м’ясо - так само користувачі не хотіли б натискати на таємничі кнопки.

Strike 1: панель навігації Android Lollipop

Перша велика таємнича проблема навігації м’ясом від Material Design сталася в 2014 році з Android Lollipop.

Android Lollipop був представлений на тій самій конференції, яка дебютувала з Material Design, і має перероблений інтерфейс, який відповідає новій мові дизайну Google.

Одним з елементів інтерфейсу, який було перероблено, стала панель навігації, стійка панель внизу ОС Android, яка забезпечує керування навігацією для телефонів без апаратних кнопок Назад, Домашня сторінка та Меню.

В Android Lollipop панель навігації перероблена так:

Бачите проблему?

Хоча попередній дизайн менш естетично привабливий, він більш-менш зрозумілий. Піктограми "Назад" та "Домашня сторінка" можна зрозуміти без необхідності текстових міток. Третя піктограма - трохи загадкове м’ясо, але в цілому UX старої навігаційної панелі був не надто поганим.

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

Піктограма трикутника може нагадувати стрілку "Назад", але що означає коло та квадрат стосовно керування навігацією?

Страйк 2: плаваючі кнопки дії

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

Плаваючі кнопки дій також страждають від таємничої проблеми навігації м’ясом. За задумом плаваюча кнопка дії - це коло, що містить піктограму. Це кнопка з чистою піктограмою, в якій немає місця для текстових міток.

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

Потрібен доказ того, що кнопки лише із піктограмами - погана ідея? Давайте пограємо в гру відгадування.

Нижче наведено перелік того, що згідно з рекомендаціями Material Design є прийнятними піктограмами для плаваючих кнопок дії. Чи можете ви здогадатися, що робить кожна кнопка?

Гаразд, це простий спосіб зігріти вас. Він являє собою "Напрямки".

Як що до цього? Якщо ви користувач iOS або Mac, ви можете сказати "Safari". Це насправді означає "Дослідити".

Речі зараз отримують задоволення (або розчарування)! Це може бути "Відкрити в контактах"? “Допоможіть, хтось стежить за мною”? Можливо, це кнопка для вашої життєвої лінії "Подзвони другові".

Зачекайте, це кнопка "Відкрити в контактах". Правда? Або це "Плітки про друга", оскільки людина знаходиться всередині мовної бульбашки?

Готові до фінального туру? Ось найгірший (і найбільш часто використовуваний) значок:

Можливо, ви думаєте, що кнопку «+» досить просто зрозуміти - це, очевидно, кнопка для дії «Додати». Але додати що ?

Додайте що: ось у чому проблема. Якщо користувачеві потрібно задати це питання, ваша кнопка - це офіційно таємниче м’ясо. На жаль, розробники та дизайнери додатків Material Design, здається, закохані в плаваючу кнопку дії "+".

Саме тому, що кнопка "+" здається настільки простою для сприйняття, вона в кінцевому підсумку є найбільш зловживаною піктограмою для плаваючих кнопок дії. Поміркуйте, як власний додаток Google Inbox відображає додаткові кнопки, коли ви натискаєте плаваючу кнопку “+”, а це не те, що очікував користувач:

Погіршує ситуацію те, як однакові значки мають різне значення в різних програмах. Google використовував піктограму олівця для подання "Створити" у Inbox та Gmail, але використовував його для відображення "Редагувати" у своєму фотододатку Snapseed.

Плаваюча кнопка дії повинна була стати чудовим способом для користувачів отримати доступ до основної дії. Хіба що це не так, адже кнопки, призначені лише для значків, як правило, є таємничим м’ясом.

Детальніше про плаваючі кнопки дій:

Дизайн матеріалу:

Чому плаваюча кнопка дії - це поганий дизайн UX

Material Design - це мова дизайну, яку Google представив рік тому і представляє сміливу спробу компанії на… medium.com

Страйк 3: Нова нижня панель навігації

Це підводить нас до нижньої панелі навігації, представленої в березні 2016 року.

Для нижньої навігаційної панелі з 3 поданнями вказівки Google визначають, що повинні відображатися як піктограми, так і текстові мітки. Поки що добре: жодного загадкового м’яса тут немає.

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

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

Це просто поганий дизайн UX. Насправді Норманська група Nielsen стверджує, що для піктограм потрібна текстова мітка, особливо для піктограм навігації (наголошуючи на них):

"Щоб допомогти подолати двозначність, з якою стикаються майже всі піктограми, поряд із піктограмою повинна бути текстова мітка, щоб уточнити її значення в цьому конкретному контексті. Для піктограм навігації мітки особливо важливі".

Цей найновіший компонент інтерфейсу Material Design висловлює таємничу навігацію м’ясом не лише неприємно, але й дивно. Чому текстові мітки слід показувати, коли є 3 подання, а приховувати, коли є 4-5 переглядів?

Очевидною відповіддю буде обмеження простору.

За винятком того, що панелі вкладок в iOS встигають містити 5 піктограм, і при цьому відображаються піктограми та текстові позначки для кожного з них. Отже, обмеження простору не є вагомою причиною.

Google або вирішив, що піктограми можуть достатньо відображати навігаційні дії (що погано), або вирішив, що естетична охайність важливіша за зручність використання (що ще гірше). У будь-якому випадку, їх рішення погіршило UX мільйонів користувачів Android.

Дизайн матеріалу та форма над функцією

Коли в 2014 році був запущений Material Design, це викликало неабиякі роздуми. Це сміливо, і їде на (і одноразових) тенденціях плоского дизайну. Сполучення яскравих кольорів та анімації робить його приємним.

Але, можливо, це занадто гарненько. Можливо, працюючи над Матеріальним дизайном, дизайнери трохи захопилися.

Знову і знову вказівки Google щодо важливих кнопок і панелей мають пріоритет перед функцією. Геометрична тонкість була обрана замість розпізнаваності на панелі навігації Android. Естетична простота відстоювалась у плаваючих кнопках дії, перетворюючи їх у процесі в загадки. Нарешті, візуальна акуратність вважалася важливішою, ніж значущі мітки на нижніх навігаційних панелях.

Це не означає, що таємнича навігація м’ясом - це проблема лише Google. Звичайно, таємниче м’ясо ви можете знайти і в додатках для iOS. Але вони зазвичай не відображаються у важливих навігаційних елементах управління та просунутих кнопках. Вони також не прописані спеціально в керівних принципах дизайну як таємниче м’ясо.

Якби дизайнери Google могли приділяти час і зусилля на створення графіків швидкості для анімації, можливо, вони могли б витратити трохи часу, щоб переконатися, що їх конструкції не є загадковим м’ясом.

Зрештою, анімована таємнича кнопка все ще менш приємна, ніж статична, але чітко позначена кнопка.