Flat 2.0 og hvordan det løser flatdesigns bruksproblemer

Flat design har eksistert siden så tidlig som 1950-tallet da International Typographic Style ble utviklet. I nyere tid har den fått stor popularitet siden lanseringen av Microsofts nye geometri-og typografi-fokusert Metro design språk, først i den nye Windows Phone i 2010, deretter i Windows 8 i 2012.

Flat design er preget av mangel på tredimensjonale effekter og glatte visuelle elementer for å oppnå renhet, minimalisme, og klarhet. Det går imot den tidligere overordnede designstilen, skeuomorphism som gjør bruk av skinnende knapper og illustrasjoner som etterligner virkelige 3D-objekter.

Flatdesign har som mål å strømlinjeforme nettsteder, øke fokus på innhold, tilby mer intuitive samhandlinger, og gi en raskere og mer funksjonell brukeropplevelse. Det er også enkelt å bruke sine enkle, bokslignende elementer og gridbaserte oppsett for responsiv design.

Usability Problemer med flat design

Mens flat design gir oss enorm hjelp og et flott verktøy for å gi brukerne våre raske og rotte nettsteder, kan det føre til visse brukervennlighetsproblemer, spesielt når det er overutnyttet.

Ingen visuelle signifikanter for Clickability

Hvis vi bruker tredimensjonale effekter, gir det naturlig en illusjon av dybde til våre design. Dette hjelper brukerne raskt finn interaktive elementer, de som enten kan klikkes på (som knapper og ikoner), eller fylt ut (som skjemafelt). En av de største bekymringene om flat design er at det gjør det vanskelig for brukerne å gjenkjenne klikkbare elementer.

Innen den flate tiden viste webdesignere vanligvis klikkbarheten ved å bruke visuelle løsninger som gradienter, teksturer, hevede kanter eller slipp skygger å lage knapper og andre klikkbare objekter ser ut som de kan trykkes på.

Flat design mangler disse visuelle signifikanter, og må løse den samme oppgaven med et mye mindre verktøysett: farger, former, nærhet, og kontekstuelle elementer.

Hvorfor er dette et problem? La oss prøve et eksperiment.

Se på dette skjermbildet nedenfor. Prøv å gjette hvilke elementer som kan klikkes basert på dette skjermbildet. Det er ikke de som du først skulle tenke på. Vi kan finne mange andre lignende bruksproblemer over hele nettet.

Redusert oppdagbarhet på grunn av ingen Z-akse

Mennesker i det virkelige liv finner objekter og beveger seg i tre dimensjoner: x-, y- og z-aksen. Når de går inn i et minimalistisk utformet, flatt nettsted uten 3D-effekter, får de en opplevelse som er forskjellig fra hva de er vant til, det de er primært familar med.

Dette betyr at de trenger å Bruk mer innsats for å oppdage relasjoner mellom objekter, og forstå det visuelle hierarkiet av nettstedet. For eksempel må vi bruke mer tid på hjemmesiden til Microsofts utviklingsnettverk for å visuelt dekode informasjonen, og formålet med de forskjellige elementene på nettstedet.

Tommelfingerregelen i UX-design er å alltid forsøke å minimere kognitiv belastning på brukeren for å maksimere brukervennligheten. Som vi kan se det i mange tilfeller, skjer dette ikke alltid med flat design.

Lav informasjonstetthet

Flat design har også blitt kritisert for å risikere lav informasjonstetthet av UX-ekspert Nielsen-Norman Group.

I deres kritikk på brukervennligheten til Windows 8 brukte de eksempler på Windows Store-apper, og nettstedet til Los Angeles Times for å vise problemene som lav informasjonstetthet (å ha noen historier på startskjermbildet, overskrifter uten oppsummeringer, knapt gjenkjennelig gruppering, etc.) kan forårsake brukervennlighet.

Fra et annet aspekt kan mindre informasjon også sees som fjernelse av distraksjoner, slik at brukerne kun kan fokusere på viktige ting, men hvis minimalisme er overdrevet, kan det enkelt ofre det primære målet for et nettsted, dvs. omforme informasjon til seerne.

Risen av Flat 2.0

Etter hvert som flere og flere designere gjenkjenner bruksfeilene i flatt design, har en ny, mer moden versjon av det spratt opp, kalt “Flat 2,0” eller “Nesten Flat” design. Mens forandringen fra skeuomorphism til flat var radikal, er utviklingen av flat design mye mer unnvikende.

Den nye stilen er fortsatt flat, men den legger til en liten tre dimensjonalitet tilbake til designene i form av subtile skygger, høydepunkter, og lagene. Flat 2.0 - hvis den brukes godt - kan fikse de nevnte bruksproblemene ved å bringe litt realisme (skeuomorphism) tilbake, og legge til litt dybde og detaljer, samtidig som fordelene med minimalisme, som strømlinjeformede nettsteder, klarhet og raskere sidelastningstid.

Material Design

Googles nye design språk, kalt Material Design, er trolig det mest bemerkelsesverdige eksempelet på Flat 2.0-stilen. Google utgitt Material Design med Android L i 2014. Mens Material Design beholder de viktigste egenskapene ved flat design, bruker den visse metaforer fra fysikk for å hjelpe brukerne raskt å finne analogier mellom den virkelige verden og den digitale verden.

Material Design bruker z-aksen, gir subtil dybde til designet, og bruker smart lag av skille dem med dråpe skygger og animasjoner. Google har en superkool beskrivelse av hvordan det fungerer, og det er virkelig verdt å lese gjennom det for å forstå hovedprinsippene og reglene.

Konklusjon

Som gode designere tar sikte på å forbedre opplevelsen til brukerne, er webdesignindustrien stadig i endring. Flat design har erstattet skeuomorphism raskt, noe som resulterer i nettbaserte, minimalistiske layouter og enkle elementer som i det siste har overskredet nettet (dette har generert litt snakk om at webdesign blir kjedelig eller til og med døende, men det kan ikke være lenger fra sannheten).

Flat 2.0 gir svar på de oppfattede problemene med flat design. Det er et smart kompromiss mellom funksjonalitet, estetikk og brukervennlighet. Selvfølgelig trenger vi ikke å bruke Material UI-kittene overalt, men å forstå filosofien bak den kan gi oss en solid bakgrunn om hvordan å utvikle vår egen stil i samsvar med de siste funnene i brukeropplevelsesdesign.