Материален дизайн и загадъчен проблем с навигацията на месото

През март 2016 г. Google актуализира Material Design, за да добави долни ленти за навигация към своята UI библиотека. Тази нова лента е позиционирана в долната част на приложението и съдържа 3 до 5 икони, които позволяват на потребителите да се придвижват между изгледи от най-високо ниво в приложение.

Звучи познато? Това е така, защото долните навигационни ленти от години са част от потребителската библиотека на iOS (в iOS те се наричат ​​ленти с раздели).

Долните навигационни ленти са по-добра алтернатива на менюто за хамбургери, така че добавянето им в Material Design трябва да е добра новина. Но версията на Google на долните навигационни ленти има сериозен проблем: мистериозна навигация на месо .

Независимо дали сте потребител на Android, дизайнер или разработчик, това би трябвало да ви безпокои.

Каква е загадъчната навигация на месо и защо е толкова зле?

Тайнствената навигация на месо е термин, създаден през 1998 г. от Винсент Фландърс от известния уебсайт Web Pages That Suck. Отнася се за бутони или връзки, които не ви обясняват какво правят. Вместо това трябва да кликнете върху тях, за да разберете.

(Терминът „мистериозно месо“ произхожда от месото, сервирано в американските обществени училищни кафетерии, които са били толкова обработени, че видът животно, от което произхождат, вече не се различава.)

Тайнствената навигация на месо е отличителен белег на дизайните, които дават приоритет на формата пред функцията. Това е лош UX дизайн, защото подчертава естетиката с цената на потребителското изживяване. Той добавя когнитивно натоварване към навигационните задачи, тъй като потребителите трябва да познаят какво прави бутонът. И ако вашите потребители трябва да познаят, вие го правите погрешно.

Не бихте искали да ядете тайно месо - по подобен начин потребителите не биха искали да кликват върху бутоните за мистерия.

Strike 1: Навигационната лента на Android Lollipop

Първият основен загадъчен проблем с навигацията на месо в дизайна на месо се случи през 2014 г. с Android Lollipop.

Android Lollipop беше представен на същата конференция, която дебютира Material Design, и предлага преработен потребителски интерфейс, който да съответства на новия език на дизайна на Google.

Един от елементите на потребителския интерфейс, които бяха преработени, беше лентата за навигация, постоянната лента в долната част на Android OS, която осигурява контрол на навигацията за телефони без хардуерни бутони за Назад, Начало и Меню.

В Android Lollipop лентата за навигация е преработена така:

Виждате ли проблема?

Докато предишният дизайн е по-малко естетически привлекателен, той е повече или по-малко ясен. Иконите „Назад“ и „Начало“ могат да бъдат разбрани, без да са необходими текстови етикети. Третата икона е малко загадъчно месо, но като цяло UX на старата навигационна лента не беше твърде лошо.

Новата лента, от друга страна, е изключително красива. Равностранният триъгълник, кръг и квадрат са символи на геометрично съвършенство. Но също така е изключително неприятен за потребителя. Абстрактно е - и навигационните контроли никога не трябва да са абстрактни. Това е пълноценна тайнствена навигация на месо.

Иконата на триъгълника може да наподобява стрелка „Назад“, но какво означават кръг и квадрат по отношение на контрола за навигация?

Strike 2: Плаващи бутони за действие

Плаващите бутони за действие са специални бутони, които се показват над други елементи на потребителския интерфейс в приложение. В идеалния случай те се използват за популяризиране на основното действие на приложението.

Плаващите бутони за действие също страдат от мистериозния проблем с навигацията на месото. По дизайн, плаващият бутон за действие е кръг, съдържащ икона. Това е бутон с чиста икона, без място за текстови етикети.

Истината е, че иконите са невероятно трудни за разбиране, защото са толкова отворени за интерпретация. Нашата култура и миналият опит информират как интерпретираме иконите. За съжаление дизайнерите (особено, изглежда, дизайнери на материали) трудно се изправят пред тази истина.

Нуждаете се от доказателство, че бутоните само с икони са лоша идея? Да играем игра на отгатване.

По-долу е даден списък на това - според указанията на Material Design - приемливите икони за плаващи бутони за действие. Можете ли да познаете какво прави всеки бутон?

Добре, това е просто, за да ви загрее. Той представлява „Упътвания“.

Какво за това? Ако сте потребител на iOS или Mac, може да кажете „Safari“. Всъщност представлява „Проучване“.

Сега нещата стават забавни (или разочароващи)! Може ли това да е „Отворено в контакти“? „Помощ, има някой, който ме следва“? Може би това е бутон за вашата спасителна линия „Телефон на приятел“.

Изчакайте, това е бутонът за „Отваряне в контакти“. Нали? Или това е „клюки за приятел“, тъй като човекът е вътре в балон с реч?

Готови ли сте за финалния кръг? Ето най-лошата (и най-използваната) икона:

Може би си мислите, че бутонът „+“ е доста лесен за разбиране - очевидно е бутон за действие „Добавяне“. Но добавете какво ?

Добавете какво: това е проблемът точно там. Ако потребителят трябва да зададе този въпрос, вашият бутон е официално тайно месо. За съжаление разработчиците и дизайнерите на приложения за материален дизайн изглежда са влюбени в плаващия бутон за действие „+“.

Тъй като бутонът „+“ изглежда толкова лесен за разбиране, той в крайна сметка е най-злоупотребяващата икона за плаващи бутони за действие. Помислете как собственото приложение на Google Входящи показва допълнителни бутони, когато докоснете плаващия бутон „+“, което не е това, което потребителят би очаквал:

Това, което влошава нещата, е как едни и същи икони имат различно значение в различните приложения. Google използва иконата на молив за представяне на „Създаване“ във Inbox и Gmail, но го използва за представяне на „Редактиране“ в приложението си за снимки Snapseed.

Плаващият бутон за действие е предназначен да бъде чудесен начин за достъп на потребителите до основно действие. Само дето не е, защото бутоните само с икони са склонни да бъдат тайно месо.

Повече за плаващите бутони за действие:

Материален дизайн:

Защо плаващият бутон за действие е лош UX дизайн

Material Design е език за дизайн, въведен от Google преди година и представлява смелият опит на компанията да… medium.com

Strike 3: Новата долна лента за навигация

Това ни води до долната лента за навигация, въведена през март 2016 г.

За долните навигационни ленти с 3 изгледа насоките на Google посочват, че трябва да се показват както икони, така и текстови етикети. Засега е добре: тук няма тайнствено месо.

Но за долните навигационни ленти с 4 или 5 изгледа Google посочва неактивните изгледи да се показват само като икони .

Спомнете си колко трудно беше да се досетите какво означават иконите с плаващ бутон за действие? Сега опитайте да познаете ред икони, използвани за навигация в приложение.

Това е просто лош UX дизайн. В действителност, Nielsen Norman Group твърди, че иконите се нуждаят от текстов етикет, особено икони за навигация (акцентът им е):

„За да се преодолее двусмислието, с което се сблъскват почти всички икони, текстов етикет трябва да присъства редом с икона, за да се изясни нейното значение в този конкретен контекст ... За иконите за навигация етикетите са особено важни.“

Най-новият потребителски интерфейс на Material Design оправдава мистериозната навигация на месото е не само разочароващо, но и странно. Защо текстовите етикети трябва да се показват, когато има 3 изгледа, но да бъдат скрити, когато има 4-5 изгледа?

Очевиден отговор би бил ограничението в пространството.

Освен че лентите с раздели в iOS успяват да съдържат 5 икони и все пак показват иконата и текстовия етикет за всяка от тях. Така че ограничеността на пространството не е основателна причина.

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

Материален дизайн и форма над функцията

Когато през 2014 г. стартира Material Design, това беше много шумно. Той е смел и се движи върху (и еднократни) тенденцията на плоския дизайн. Сдвояването на живи цветове и анимации го прави красив за гледане.

Но може би е малко прекалено красиво. Може би, докато работеха върху Material Design, дизайнерите се увлякоха малко.

Отново и отново, насоките на Google за важни бутони и ленти изглежда дават приоритет на формата пред функцията. Геометричната прецизност беше избрана пред разпознаваемостта в лентата за навигация на Android. Естетичната простота беше отстоявана в плаващите бутони за действие, превръщайки ги в загадки в процеса. И накрая, визуалната изрядност беше счетена за по-важна от смислените етикети в долните навигационни ленти.

Това не означава, че мистериозната навигация на месо е проблем само с Google. Разбира се, можете да намерите тайнствено месо и в приложенията за iOS. Но те обикновено не се появяват в критични навигационни контроли и повишени бутони. Те също не са изписани специално в указанията за дизайн, за да бъдат загадъчно месо.

Ако дизайнерите на Google могат да отделят време и усилия за създаване на графики за скорост за анимации, може би биха могли да отделят малко време, за да се уверят, че техните проекти не са загадъчно месо.

В края на краищата, анимираният тайнствен бутон все още е по-малко възхитителен от статичния, но ясно обозначен бутон.