Materielt design og mystisk kødnavigationsproblem

I marts 2016 opdaterede Google Material Design for at tilføje nederste navigationsbjælker til dets UI-bibliotek. Denne nye bjælke er placeret i bunden af ​​en app og indeholder 3 til 5 ikoner, der giver brugerne mulighed for at navigere mellem visninger på øverste niveau i en app.

Lyder du velkendt? Det skyldes, at nederste navigationsbjælker har været en del af iOS's UI-bibliotek i årevis (de kaldes fanebjælker i iOS).

Venstre: Materialedesigns nederste navigationslinje | Højre: iOS's fanebjælke

Nederste navigationsbjælker er et bedre alternativ til hamburgermenuen, så deres tilføjelse til materialedesign burde være gode nyheder. Men Googles version af nederste navigationsbjælker har et alvorligt problem: mystisk kødnavigation.

Uanset om du er en Android-bruger, designer eller udvikler, bør dette bekymre dig.

Hvad er mystisk kødnavigation, og hvorfor er det så dårligt?

Mystery kødnavigation er et udtryk myntet i 1998 af Vincent Flanders fra det berømte websted websider, der suger. Det henviser til knapper eller links, der ikke forklarer dig, hvad de gør. I stedet skal du klikke på dem for at finde ud af det.

(Udtrykket "mystisk kød" stammer fra kødet, der serveres i amerikanske cafeterier i den offentlige skole, der var så forarbejdet, at den type dyr, de kom fra, ikke længere kan ses.)

Et eksempel på mystik kødnavigation | Kilde

Mystery kødnavigation er kendetegnende for design, der prioriterer form frem for funktion. Det er dårligt UX-design, fordi det understreger æstetik til prisen for brugeroplevelsen. Det tilføjer kognitiv belastning til navigationsopgaver, da brugere skal gætte, hvad knappen gør. Og hvis dine brugere har brug for at gætte, gør du det forkert.

Du ønsker ikke at spise mysteriumskød - ligesom brugerne ikke ønsker at klikke på mysteriumknapper.

Strike 1: Android Lollipops navigationslinje

Material Designs første store mysterium kødnavigationsproblem skete i 2014 med Android Lollipop.

Android Lollipop blev introduceret på den samme konference, der debuterede Material Design, og sports et nyt designet brugergrænseflade til at matche Googles nye designsprog.

Navigationslinje i tidligere versioner af Android

Et af UI-elementerne, der blev redesignet, var navigationslinjen, den vedvarende bjælke i bunden af ​​Android OS, der giver navigationskontrol til telefoner uden hardwareknapper til Tilbage, Hjem og Menu.

I Android Lollipop blev navigationslinjen redesignet til dette:

Navigationslinje, Android Lollipop og nyere

Ser du problemet?

Mens det forrige design er mindre æstetisk tiltalende, er det mere eller mindre ligetil. Ikonerne Tilbage og Hjem kan forstås uden behov for tekstetiketter. Det tredje ikon er lidt af et mysteriumskød, men i det store og hele var UX'en for den gamle navigationslinje ikke så dårlig.

På den anden side er den nye bar ekstremt smuk. Den ligesidede trekant, cirkel og firkant er symboler på geometrisk perfektion. Men det er også ekstremt brugervenligt. Det er abstrakt - og navigationskontroller bør aldrig være abstrakte. Det er fuldt blæst mysteriumskødnavigation.

Trekantikonet ligner måske en “Tilbage” pil, men hvad betyder en cirkel og en firkant i forhold til navigationskontrol?

Giver mening om ikonerne for navigationslinjen

Strike 2: Flydende handlingsknapper

Flydende handlingsknapper er specielle knapper, der vises over andre UI-elementer i en app. Ideelt set er de brugt til at promovere appens primære handling.

Specifikationer for den flydende handlingsknap | Kilde

Flydende handlingsknapper lider også af mystisk kødnavigationsproblemet. Ved design er den flydende handlingsknap en cirkel, der indeholder et ikon. Det er en knap med rent ikon uden plads til tekstetiketter.

Sandheden er, at ikoner er utroligt svære at forstå, fordi de er så åbne for fortolkning. Vores kultur og tidligere erfaringer informerer om, hvordan vi fortolker ikoner. Desværre har designere (især det ser ud til at være Materialedesignere) svært ved at møde denne sandhed.

Brug for bevis for, at kun ikoner-knapper er en dårlig idé? Lad os spille et gætspil.

Nedenfor er en liste over, hvad der - i henhold til Materialedesigns retningslinjer - er acceptable ikoner til flydende handlingsknapper. Kan du gætte, hvad hver knap gør?

Mystery-knap 1

Ok, det er nemt at varme dig op. Det repræsenterer "retninger".

Mystery-knap 2

Hvad med det her? Hvis du er en iOS- eller Mac-bruger, kan du sige "Safari." Det repræsenterer faktisk "Udforsk."

Mystery-knap 3

Ting bliver sjovt (eller frustrerende) nu! Kunne dette være ”Åbn i kontakter”? ”Hjælp, der er nogen, der følger mig”? Måske er dette en knap til din "Telefon en ven" -linie.

Mystery-knap 4

Vent med, dette er knappen til "Åbn i kontakter." Ikke? Eller er dette "sladder om en ven", da personen er inde i en talebobler?

Klar til sidste runde? Her er det værste (og mest anvendte) ikon:

Mystery-knap 5

Du synes måske, at "+" -knappen er temmelig enkel at forstå - det er åbenlyst en knap til "Tilføj" -handlingen. Men tilføj hvad?

Tilføj hvad: det er problemet lige der. Hvis en bruger har brug for at stille dette spørgsmål, er din knap officielt mysteriumskød. Desværre ser udviklere og designere af Material Design-apps ud til at være forelsket i “+” flydende action-knappen.

Netop fordi “+” -knappen forekommer så let at forstå, ender den med at være det mest misbrugte ikon til flydende handlingsknapper. Overvej hvordan Googles egen indbakke-app viser yderligere knapper, når du trykker på den "+" flydende knap, hvilket ikke er, hvad en bruger ville forvente:

Knappen “+” åbner en menu med… flere knapper?

Hvad der gør tingene værre, er, hvordan de samme ikoner har forskellige betydninger i forskellige apps. Google brugte blyantikonet til at repræsentere “Komponere” i Indbakke og Gmail, men brugte det til at repræsentere “Rediger” i sin foto-app Snapseed.

Samme ikon, forskellige betydninger:

Den flydende handlingsknap var beregnet til at være en fantastisk måde for brugere at få adgang til en primær handling. Undtagen er det ikke, fordi knapper, der kun er ikonet, har tendens til at være mysteriumskød.

Mere om flydende handlingsknapper:

Strejke 3: Den nye bundnavigeringslinje

Dette bringer os til den nederste navigationslinje, der blev introduceret i marts 2016.

For nederste navigationsbjælker med 3 visninger specificerer Googles retningslinjer, at både ikoner og tekstetiketter skal vises. Indtil videre så godt: intet mysteriumskød her.

Nederste navigationslinje med 3 visninger: indtil videre, så god

Men for nederste navigationsbjælker med 4 eller 5 visninger specificerer Google, at inaktive visninger kun skal vises som ikoner.

Nederste navigationsbjælke med 4 visninger: mysteriumskød

Kan du huske, hvor svært det var at gætte, hvad de flydende handlingsknopikoner betyder? Prøv nu at gætte en række ikoner, der bruges til at navigere i en app.

Dette er bare dårligt UX-design. Faktisk hævder Nielsen Norman-gruppen, at ikoner har brug for en tekstmærke, især navigationsikoner (understreger deres):

"For at hjælpe med at overvinde den tvetydighed, som næsten alle ikoner står overfor, skal en tekstetiket være til stede ved siden af ​​et ikon for at tydeliggøre dens betydning i den bestemte kontekst.… For navigationsikoner er etiketter især kritiske."

At Material Designs nyeste UI-komponent kondonerer mystisk kødnavigation er ikke kun frustrerende, men også underlige. Hvorfor skal tekstetiketter vises, når der er 3 visninger, men skjules, når der er 4-5 visninger?

Et indlysende svar ville være pladsbegrænsninger.

Undtagen fanebjælker i iOS formår at indeholde 5 ikoner og viser stadig ikonet og tekstetiketten for hver af dem. Så pladsbegrænsning er ikke en gyldig grund.

iOS fanebjælke i App Store, Clock og Music apps: 5 ikoner, alle med tekstetiketter

Google besluttede enten, at ikoner i tilstrækkelig grad kan repræsentere navigationshandlinger (hvilket er dårligt), eller de besluttede, at æstetisk pænhed er vigtigere end brugervenlighed (hvilket er værre). Uanset hvad, forværrede deres beslutning UX for millioner af Android-brugere.

Materialedesign og form over funktion

Da Material Design blev lanceret i 2014, var det for stor fanfare. Det er fedt og kører på (og en-ups) den flade designtrend. Parringen af ​​livlige farver og animationer gør det smukt at se på.

“Make it pretty!” - Materialedesign designer | Kilde

Men måske er det lidt for smukt. Måske, mens de arbejdede med Material Design, blev designerne lidt båret væk.

Gang på gang synes Googles retningslinjer for vigtige knapper og søjler at prioritere form frem for funktion. Geometrisk smukhed blev valgt frem for genkendelighed i Android's navigationslinje. Æstetisk enkelhed blev forkæmpet i flydende handlingsknapper, hvilket gjorde dem til gåder i processen. Endelig blev den visuelle pænhed betragtet som vigtigere end meningsfulde etiketter i nederste navigationsbjælker.

Det betyder ikke, at mystisk kødnavigation er et eneste Google-problem. Sikker på, du kan også finde mysteriekød i iOS-apps. Men de vises normalt ikke i kritiske navigationskontroller og promoverede knapper. De er heller ikke specifikt beskrevet i designretningslinjer for at være mysteriumskød.

Hastighedsgrafik, der viser den korrekte (blå) acceleration til animationer

Hvis Google-designere kunne bruge tid og kræfter på at oprette hastighedsgrafer til animationer, kunne de måske bruge lidt tid på at sikre, at deres design ikke er mysteriumskød.

Når alt kommer til alt er en animeret mysterieknap stadig mindre dejlig end en statisk, men tydeligt mærket knap.