U ožujku 2016. Google je ažurirao Materijalni dizajn kako bi svojoj biblioteci korisničkog sučelja dodao donje navigacijske trake. Ova se nova traka nalazi na dnu aplikacije i sadrži 3 do 5 ikona koje korisnicima omogućuju navigaciju između pogleda najviše razine u aplikaciji.
Zvuči poznato? To je zato što su donje navigacijske trake godinama dio iOS-ove biblioteke korisničkog sučelja (u iOS-u se nazivaju trake kartica).
Donje navigacijske trake bolja su alternativa izborniku hamburgera, pa bi njihovo dodavanje u Material Design trebalo biti dobra vijest. Ali Googleova verzija donjih navigacijskih traka ima ozbiljan problem: misteriozna navigacija mesom .
Bez obzira jeste li korisnik Androida, dizajner ili programer, ovo bi vas trebalo mučiti.
Što je misteriozna plovidba mesom i zašto je tako loša?
Tajanstvena navigacija mesom izraz je koji je 1998. godine stvorio Vincent Flanders sa poznatog web mjesta Web Pages That Suck. Odnosi se na gumbe ili poveznice koji vam ne objašnjavaju što rade. Umjesto toga, morate kliknuti na njih da biste to saznali.
(Izraz "misteriozno meso" potječe od mesa koje se posluživalo u američkim kafeterijama javnih škola koje je bilo toliko obrađeno da se vrsta životinje iz koje više potječe više ne raspoznaje.)
Tajanstvena plovidba mesom zaštitno je obilježje dizajna koji obliku daju prednost nad funkcijom. Loš je UX dizajn, jer naglašava estetiku po cijenu korisničkog iskustva. Navigacijskim zadacima dodaje kognitivno opterećenje, jer korisnici moraju pogoditi što tipka čini. A ako vaši korisnici trebaju pogoditi, radite to pogrešno.
Ne biste željeli jesti misteriozno meso - slično tome, korisnici ne bi htjeli kliknuti na misteriozne gumbe.
Opomena 1: Navigacijska traka Android Lollipopa
Prvi glavni misteriozni problem navigacije mesa od strane Material Design dogodio se 2014. godine s Androidom Lollipop.
Android Lollipop predstavljen je na istoj konferenciji koja je debitirala s Material Designom i redizajniranim korisničkim sučeljem u skladu s Googleovim novim dizajnerskim jezikom.
Jedan od elemenata korisničkog sučelja koji je redizajniran bila je navigacijska traka, postojana traka na dnu Android OS-a koja pruža kontrolu navigacije za telefone bez hardverskih gumba za Natrag, Početna i Izbornik.
U Androidu Lollipop navigacijska je traka preuređena na sljedeći način:
Vidiš problem?
Iako je prethodni dizajn manje estetski privlačan, više-manje je jednostavan. Ikone Natrag i Početna mogu se razumjeti bez potrebe za tekstualnim naljepnicama. Treća je ikona pomalo tajnovito meso, ali u cjelini UX stare navigacijske trake nije bio previše loš.
S druge strane, nova je traka izuzetno lijepa. Jednakostranični trokut, krug i kvadrat simboli su geometrijskog savršenstva. Ali to je i krajnje nenaklonjeno korisnicima. Apstraktno je - a navigacijske kontrole nikada ne bi trebale biti apstraktne. To je potpuno misteriozna plovidba mesom.
Ikona trokuta može nalikovati strelici "Natrag", ali što krug i kvadrat znače u odnosu na navigacijsku kontrolu?
Strike 2: Plutajući akcijski gumbi
Plutajući akcijski gumbi posebni su gumbi koji se pojavljuju iznad ostalih elemenata korisničkog sučelja u aplikaciji. U idealnom slučaju, koriste se za promicanje primarne akcije aplikacije.
Plutajući akcijski gumbi također pate od misterioznog problema navigacije mesom. Prema dizajnu, plutajući akcijski gumb je krug koji sadrži ikonu. To je gumb s čistom ikonom, bez mjesta za tekstualne naljepnice.
Istina je da je ikone nevjerojatno teško razumjeti jer su tako otvorene za interpretaciju. Naša kultura i prošla iskustva informiraju kako tumačimo ikone. Nažalost, dizajneri (posebno, čini se, dizajneri materijala) teško se suočavaju s ovom istinom.
Trebate dokaz da su gumbi samo s ikonama loša ideja? Igrajmo igru pogađanja.
Ispod je popis onoga što je - prema smjernicama Material Design-a - prihvatljive ikone za plutajuće akcijske gumbe. Možete li pogoditi što radi svaki gumb?
Ok, to je jednostavno za zagrijavanje. Predstavlja "Upute".
Što s ovim? Ako ste korisnik iOS-a ili Maca, možete reći "Safari". Zapravo predstavlja "Istražite".
Stvari sada postaju zabavne (ili frustrirajuće)! Može li ovo biti "Otvoreno u kontaktima"? "Upomoć, netko me prati"? Možda je ovo gumb za spas "Telefoniraj prijatelju".
Držite se, ovo je gumb za "Otvori u kontaktima". Pravo? Ili je ovo "Ogovaranje prijatelja" budući da je osoba unutar govornog balona?
Spremni za posljednju rundu? Evo najgore (i najčešće korištene) ikone:
Možda mislite da je gumb "+" prilično jednostavan za razumijevanje - očito je to gumb za akciju "Dodaj". Ali dodati što ?
Dodaj što: to je problem upravo tamo. Ako korisnik treba postaviti to pitanje, vaš je gumb službeno misteriozno meso. Nažalost, čini se da su programeri i dizajneri aplikacija Material Design zaljubljeni u plutajući akcijski gumb "+".
Upravo zato što se gumb "+" čini tako lako razumljivim, na kraju je ikona koja se najviše koristi za plutajuće akcijske gumbe. Razmotrite kako Googleova aplikacija Inbox prikazuje dodatne gumbe kada dodirnete plutajući gumb „+“, što nije ono što bi korisnik očekivao:
Ono što stvari pogoršava jest kako iste ikone imaju različita značenja u različitim aplikacijama. Google je koristio ikonu olovke za predstavljanje "Nova poruka" u Inboxu i Gmailu, ali za prikaz "Uredi" u svojoj foto-aplikaciji Snapseed.
Plutajući akcijski gumb trebao je biti izvrstan način za pristup korisnicima primarne radnje. Osim što nije, jer su gumbi samo s ikonama uglavnom misteriozno meso.
Više o plutajućim akcijskim gumbima:
Dizajn materijala:
Zašto je plutajući akcijski gumb loš UX dizajn
Material Design je jezik dizajna koji je Google predstavio prije godinu dana i predstavlja hrabri pokušaj tvrtke na… medium.com
Opomena 3: Nova donja navigacijska traka
To nas dovodi do donje navigacijske trake, uvedene u ožujku 2016.
Za donje navigacijske trake s 3 pogleda, Googleove smjernice određuju da moraju biti prikazane i ikone i tekstualne oznake. Zasad je dobro: ovdje nema misterioznog mesa.
Ali za donje navigacijske trake s 4 ili 5 prikaza, Google određuje da se neaktivni prikazi prikazuju samo kao ikone .
Sjećate se kako je bilo teško pogoditi što znače plutajuće ikone akcijskih gumba? Pokušajte sada pogoditi red ikona korištenih za navigaciju aplikacijom.
Ovo je samo loš UX dizajn. Zapravo, grupa Nielsen Norman tvrdi da ikonama treba tekstualna oznaka, posebno ikone navigacije (naglasak na njima):
"Da bi se prevladala dvosmislenost s kojom se suočavaju gotovo sve ikone, tekstna naljepnica mora biti prisutna uz ikonu kako bi se pojasnilo njezino značenje u tom određenom kontekstu. ... Za navigacijske ikone oznake su posebno ključne."Ta najnovija komponenta korisničkog sučelja Material Design odobrava misterioznu navigaciju mesom, ne samo da je frustrirajuća, već i čudna. Zašto bi se tekstne oznake trebale prikazivati kada postoje 3 prikaza, a sakriti kada postoje 4-5 prikaza?
Očiti odgovor bio bi prostorna ograničenost.
Osim što trake kartica u iOS-u uspijevaju sadržavati 5 ikona, a i dalje prikazuju ikonu i natpis teksta za svaku od njih. Dakle, ograničenost prostora nije valjan razlog.
Google je ili odlučio da ikone mogu u dovoljnoj mjeri predstavljati navigacijske radnje (što je loše) ili je zaključio da je estetska urednost važnija od upotrebljivosti (što je još gore). U svakom slučaju, njihova je odluka pogoršala UX milijuna korisnika Androida.
Dizajn i oblik materijala preko funkcije
Kada je Material Design pokrenut 2014. godine, bilo je to vrlo pomno. Hrabar je i vozi se na (i jednokratnom) trendu ravnog dizajna. Uparivanje živih boja i animacija čini ga lijepim za gledanje.
Ali možda je malo previše lijepo. Možda su se dok su radili na Dizajn materijala dizajneri malo zanijeli.
Izgleda da Googleove smjernice za važne gumbe i trake daju prednost obliku pred funkcijom. Geometrijska ljepota izabrana je umjesto prepoznatljivosti na Androidovoj navigacijskoj traci. Estetska jednostavnost zagovarana je plutajućim akcijskim gumbima, pretvarajući ih u zagonetke. Konačno, vizualna urednost smatrana je važnijom od smislenih naljepnica na donjim navigacijskim trakama.
To ne znači da je misteriozna navigacija mesom samo Googleov problem. Svakako, misteriozno meso možete pronaći i u iOS aplikacijama. Ali obično se ne pojavljuju u kritičnim navigacijskim kontrolama i promoviranim gumbima. Oni također nisu posebno navedeni u smjernicama za dizajn da bi bili misteriozno meso.
Ako bi Googleovi dizajneri mogli posvetiti vrijeme i napor u stvaranju grafikona brzine za animacije, možda bi mogli potrošiti malo vremena kako bi bili sigurni da njihovi dizajni nisu misteriozno meso.
Napokon, animirani misterijski gumb još uvijek je manje ugodan od statičnog, ali jasno označenog gumba.