de Teo Yu Siang

Proiectarea materialelor și problema de navigare a cărnii misterioase

Proiectarea materialelor si problema de navigare a carnii misterioase

În martie 2016, Google la curent Material Design pentru a adăuga bare de navigare de jos în biblioteca sa UI. Această nouă bară este poziționată în partea de jos a unei aplicații și conține 3 până la 5 pictograme care permit utilizatorilor să navigheze între vizualizările de nivel superior dintr-o aplicație.

Suna familiar? Asta pentru că barele de navigare de jos au făcut parte din Biblioteca UI a iOS de ani de zile (se numesc bare de tab-uri în iOS).

Proiectarea materialelor si problema de navigare a carnii misterioase
Stânga: bara de navigare inferioară Material Design | Dreapta: bara de file iOS

Barele de navigare de jos sunt o alternativă mai bună la meniul de hamburgeri, astfel încât adăugarea lor în Material Design ar trebui să fie o veste bună. Dar versiunea Google de bare de navigare inferioare are o problemă serioasă: navigare cu carne misterioasă.

Fie că sunteți utilizator Android, designer sau dezvoltator, acest lucru ar trebui să vă deranjeze.

Ce este navigarea cu carne misterioasă și de ce este atât de rău?

Navigarea cu carne misterioasă este un termen inventat în 1998 de Vincent Flanders al celebrului site web Pagini web care suge. Se referă la butoane sau linkuri care nu vă explică ce fac. În schimb, trebuie să faceți clic pe ele pentru a afla.

(Termenul „carne misterioasă” provine din carnea servită în cafenelele școlii publice americane care au fost atât de prelucrate încât tipul de animal din care provin nu mai este discernibil.)

1611168548 554 Proiectarea materialelor si problema de navigare a carnii misterioase
Un exemplu de navigare cu carne misterioasă | Sursă

Navigarea cu carne misterioasă este semnul distinctiv al desenelor care prioritizează forma decât funcția. Este un design UX prost, deoarece subliniază estetica în detrimentul experienței utilizatorului. Acesta adaugă sarcină cognitivă sarcinilor de navigație, deoarece utilizatorii trebuie să ghicească ce face butonul. Și dacă utilizatorii dvs. trebuie să ghicească, o faceți greșit.

Nu ați dori să mâncați carne de mister – în mod similar, utilizatorii nu ar dori să facă clic pe butoanele de mister.

Strike 1: Bara de navigare Android Lollipop

Prima problemă majoră de navigare a cărnii misterioase din Material Design s-a întâmplat în 2014 cu Android Lollipop.

Android Lollipop a fost introdus în aceeași conferință care a debutat Material Design și are o interfață UI reproiectată pentru a se potrivi cu noul limbaj de design Google.

1611168548 579 Proiectarea materialelor si problema de navigare a carnii misterioase
Bara de navigare în versiunile anterioare de Android

Unul dintre elementele UI care au fost reproiectate a fost bara de navigare, bara persistentă din partea de jos a sistemului de operare Android care oferă controlul navigării pentru telefoanele fără butoane hardware pentru Înapoi, Acasă și Meniu.

În Android Lollipop, bara de navigare a fost reproiectată astfel:

1611168548 18 Proiectarea materialelor si problema de navigare a carnii misterioase
Bara de navigare, Android Lollipop și versiuni ulterioare

Vezi problema?

În timp ce designul anterior este mai puțin atrăgător din punct de vedere estetic, este mai mult sau mai puțin simplu. Pictogramele Înapoi și Acasă pot fi înțelese fără a fi nevoie de etichete text. A treia pictogramă este un pic misterioasă, dar, pe ansamblu, UX-ul vechii bare de navigare nu era prea rău.

Noul bar, pe de altă parte, este extrem frumos. Triunghiul echilateral, cercul și pătratul sunt simboluri ale perfecțiunii geometrice. Dar este, de asemenea extrem neprietenos pentru utilizator. Este abstract – iar comenzile de navigare nu ar trebui să fie niciodată abstracte. Este o navigație completă a cărnii misterioase.

Pictograma triunghi ar putea semăna cu o săgeată „Înapoi”, dar ce înseamnă un cerc și un pătrat în raport cu controlul de navigație?

1611168549 363 Proiectarea materialelor si problema de navigare a carnii misterioase
Sensibilizarea pictogramelor barei de navigare

Strike 2: Butoane de acțiune plutitoare

Butoanele de acțiune plutitoare sunt butoane speciale care apar deasupra altor elemente de interfață într-o aplicație. În mod ideal, acestea sunt utilizate pentru a promova acțiunea principală a aplicației.

1611168549 969 Proiectarea materialelor si problema de navigare a carnii misterioase
Specificații pentru butonul de acțiune flotant | Sursă

Butoanele de acțiune plutitoare suferă, de asemenea, de problema misterioasă de navigare a cărnii. Prin design, butonul de acțiune flotant este un cerc care conține o pictogramă. Este un buton cu pictograme pure, fără spațiu pentru etichete text.

Adevărul este că icoanele sunt incredibil de greu de înțeles pentru că sunt atât de deschiși la interpretare. Cultura noastră și experiențele din trecut ne informează cum interpretăm icoanele. Din păcate, designerilor (în special, se pare, designerii de materiale) le este greu să se confrunte cu acest adevăr.

Aveți nevoie de dovezi că butoanele numai pentru pictograme sunt o idee proastă? Să jucăm un joc de ghicit.

Mai jos este o listă cu ceea ce – conform Material Design’s instrucțiuni—Sunt pictograme acceptabile pentru butoanele de acțiune plutitoare. Puteți ghici ce face fiecare buton?

1611168550 575 Proiectarea materialelor si problema de navigare a carnii misterioase
Butonul misterios 1

Ok, este unul simplu pentru a te încălzi. Reprezintă „Direcții”.

1611168550 285 Proiectarea materialelor si problema de navigare a carnii misterioase
Butonul Mystery 2

Ce zici de asta? Dacă sunteți utilizator iOS sau Mac, ați putea spune „Safari”. De fapt, reprezintă „Explorați”.

1611168550 624 Proiectarea materialelor si problema de navigare a carnii misterioase
Butonul Mister 3

Lucrurile devin distractive (sau frustrante) acum! Ar putea fi „Deschideți în contacte”? „Ajutor, cineva mă urmărește”? Poate că acesta este un buton pentru linia de salvare „Telefonați un prieten”.

1611168550 802 Proiectarea materialelor si problema de navigare a carnii misterioase
Butonul Mystery 4

Rezistă, acest este butonul pentru „Deschideți în contacte”. Dreapta? Sau este „Bârfa despre un prieten”, deoarece persoana se află într-un balon?

Sunteți gata pentru runda finală? Iată cea mai proastă (și cea mai folosită) pictogramă:

1611168551 368 Proiectarea materialelor si problema de navigare a carnii misterioase
Butonul Mystery 5

S-ar putea să credeți că butonul „+” este destul de simplu de înțeles – este evident un buton pentru acțiunea „Adăugați”. Dar adaugă ce?

Adăugați ce: asta e problema chiar acolo. Dacă un utilizator trebuie să pună această întrebare, butonul dvs. este în mod oficial carne misterioasă. Din păcate, dezvoltatorii și designerii de aplicații Material Design par a fi îndrăgostiți de butonul de acțiune plutitor „+”.

Tocmai pentru că butonul „+” pare atât de ușor de înțeles, ajunge să fie cea mai abuzată pictogramă pentru butoanele de acțiune plutitoare. Luați în considerare modul în care se afișează propria aplicație Mesaje primite Google adiţional atunci când atingeți butonul flotant „+”, ceea ce nu se așteaptă un utilizator:

1611168551 758 Proiectarea materialelor si problema de navigare a carnii misterioase
1611168552 943 Proiectarea materialelor si problema de navigare a carnii misterioase
Butonul „+” deschide un meniu de … mai multe butoane?

Ceea ce înrăutățește lucrurile este modul în care aceleași pictograme au semnificații diferite în aplicații diferite. Google a folosit pictograma creion pentru a reprezenta „Compune” în Inbox și Gmail, dar a folosit-o pentru a reprezenta „Editați” în aplicația foto Snapseed.

1611168552 251 Proiectarea materialelor si problema de navigare a carnii misterioase
1611168553 159 Proiectarea materialelor si problema de navigare a carnii misterioase
1611168553 317 Proiectarea materialelor si problema de navigare a carnii misterioase
Aceeași pictogramă, semnificații diferite: „Compuneți” în aplicațiile Gmail și Inbox, „Editați” în aplicația Snapseed

Butonul de acțiune plutitoare a fost destinat să fie o modalitate excelentă pentru utilizatori de a accesa o acțiune principală. Cu excepția cazului în care nu este, deoarece butoanele numai pentru pictograme tind să fie carne misterioasă.

Mai multe despre butoanele de acțiune plutitoare:

Design material:
De ce butonul de acțiune flotant are un design UX prost
Material Design este un limbaj de proiectare introdus de Google acum un an și reprezintă încercarea îndrăzneață a companiei de a …medium.com

Strike 3: Noua bară de navigare de jos

Aceasta ne duce la bara de navigare de jos, introdusă în martie 2016.

Pentru barele de navigare de jos cu 3 vizualizări, regulile Google specifică faptul că trebuie afișate atât pictogramele, cât și etichetele text. Până acum, atât de bine: nu există carne misterioasă aici.

1611168554 235 Proiectarea materialelor si problema de navigare a carnii misterioase
Bara de navigare din partea de jos cu 3 vizualizări: până acum, atât de bine

Dar pentru barele de navigare de jos cu 4 sau 5 vizualizări, Google specifică că vizualizările inactive vor fi afișate ca numai icoane.

1611168554 944 Proiectarea materialelor si problema de navigare a carnii misterioase
Bara de navigare din partea de jos cu 4 vizualizări: carne misterioasă

Vă amintiți cât de greu a fost să ghiciți ce înseamnă pictogramele butoanelor de acțiune plutitoare? Acum, încercați să ghiciți un rând de pictograme utilizate pentru a naviga într-o aplicație.

Acesta este doar un design UX rău. De fapt, Grupul Nielsen Norman argumentează că icoane nevoie o etichetă text, în special pictogramele de navigare (accentuarea lor):

„Pentru a ajuta la depășirea ambiguității cu care se confruntă aproape toate icoanele, a eticheta text trebuie să fie prezentă alături de o pictogramă pentru a-i clarifica semnificația în acel context particular … Pentru pictogramele de navigare, etichetele sunt deosebit de critice. ”

Cea mai nouă componentă UI a Material Design acceptă navigarea misterioasă a cărnii nu este doar frustrantă, ci și ciudată. De ce ar trebui afișate etichetele text atunci când există 3 vizualizări, dar să fie ascunse atunci când există 4-5 vizualizări?

Un răspuns evident ar fi constrângerile de spațiu.

Cu excepția faptului că barele de file din iOS reușesc să conțină 5 pictograme și încă afișează pictograma și eticheta text pentru fiecare dintre ele. Deci, constrângerea spațiului nu este un motiv valid.

1611168555 168 Proiectarea materialelor si problema de navigare a carnii misterioase
1611168555 464 Proiectarea materialelor si problema de navigare a carnii misterioase
1611168556 223 Proiectarea materialelor si problema de navigare a carnii misterioase
Bara de file iOS din aplicațiile App Store, Ceas și Muzică: 5 pictograme, toate cu etichete text

Google fie a decis că pictogramele pot reprezenta suficient acțiuni de navigație (ceea ce este rău), fie au decis că ordinea estetică este mai importantă decât utilizabilitatea (ceea ce este mai rău). Oricum, decizia lor a înrăutățit UX-ul a milioane de utilizatori Android.

Proiectarea materialului și formularul peste funcție

Când Material Design a fost lansat în 2014, a fost mult prea mult. Este îndrăzneț și se îndreaptă spre (și la unii) trenduri de design plat. Împerecherea de culori vibrante și animații îl face să arate frumos.

Proiectarea materialelor si problema de navigare a carnii misterioase
„Fă-o drăguță!” – Proiectant de design material | Sursă

Dar poate că este puțin de asemenea frumos. Poate că, în timp ce lucrau la proiectarea materialelor, designerii s-au lăsat puțin duciți.

De nenumărate ori, liniile directoare Google pentru butoane și bare importante par să acorde prioritate formei în locul funcției. Frumusețea geometrică a fost aleasă în locul recunoașterii în bara de navigare Android. Simplitatea estetică a fost promovată în butoanele de acțiune plutitoare, transformându-le în ghicitori în acest proces. În cele din urmă, îngrijirea vizuală a fost considerată mai importantă decât etichetele semnificative din barele de navigare de jos.

Asta nu înseamnă că navigarea misterioasă a cărnii este o problemă exclusiv Google. Sigur, puteți găsi carne misterioasă și în aplicațiile iOS. Dar ele nu apar de obicei în controalele de navigare critice și în butoanele promovate. De asemenea, ele nu sunt specificate în mod specific în ghidurile de proiectare pentru a fi carne misterioasă.

1611168557 100 Proiectarea materialelor si problema de navigare a carnii misterioase
Grafic de viteză care arată accelerarea corectă (albastră) pentru animații

Dacă designerii Google ar putea dedica timp și efort în crearea graficelor de viteză pentru animații, poate ar putea petrece puțin timp pentru a se asigura că desenele lor nu sunt carne misterioasă.

La urma urmei, un buton misterios animat este încă mai puțin încântător decât un buton static, dar clar etichetat.