UI-trender som vil forme 2020

Tillat meg å spørre deg om noe som kan høres litt ut som science-fiction. Har det noen gang skjedd for deg at kanskje Jorden har beveget seg litt raskere for sent - men vi har ennå ikke lagt merke til det? Virker som det var først i går at vi gjennomgikk hva vi forventet da vi flyttet inn i 2018. Likevel underlig nok er det nesten 2019 allerede!

Kom til å tenke på det, men 2018 har vært et pokker for et år for UI-design. Ting er nå mye enklere sammenlignet med tidligere år - takket være de eksponentielle vekstdesignverktøyene har opplevd i nyere tid. Du trenger ikke en gang å være en kodingsguru lenger for å lage et profesjonelt nettsted med flott brukergrensesnitt på bare noen få minutter.

Og det dekker knapt basen. Endringer i brukerpreferanser har også i stor grad påvirket hvordan vi har designet grensesnitt i 2018.

For å sette det i perspektiv, 94% av Internett-brukere sluttet å stole på nettsteder med dårlig design - så det er rett og slett ikke rom for kompromisser lenger.

Siden bla nå er allment akseptert, prioriterer ikke nettsteder lenger å plassere de beste tingene øverst. Du kan spre dem proporsjonalt i grensesnittet. Men igjen har vi lært å være ekstremt forsiktig med det å vurdere 40% av de besøkende vil forlate hvis den generelle utformingen viser seg å være loslitt.

Og det er ikke alt de hater. Brukere har også blitt lei av kun innholdsglidebrytere 1% vil klikke på dem. Interessant er det å redusere at ved å eliminere innhold også ville være et galt trekk siden 86% av besøkende ønsker å se kritisk produkt- og serviceinfo så snart landet på hjemmesiden.

Fascinerende, ikke sant?

Så la oss være ærlige - UI-design har aldri vært så spennende. Brukere forandrer seg, enhetsteknologi utvikler seg astronomisk, internetthastigheten er nå på Formel 1-nivå, og vi støttes av et bredt spekter av designverktøy på nettet. Kombiner alt det med de moderne UI-designerkunnskapene, og du vil absolutt være enig i at 2019 vil være enda mer effektive.

Så, hvilke trender gleder vi oss til?

mobile Først

Mobiloptimalisering er et buzzword som tilsynelatende ikke trekker seg tilbake snart. Trenden har eksistert i et par år nå, for å si det mildt. Og du vil være riktig å spå at vi vil se økt bruk av mobilbaserte brukergrensesnitt-design i 2019.

Du kan også anta at bortsett fra tilsvarende teknikk, er det ikke noe nytt som kan komme på dette området - i det minste i løpet av de neste 12 månedene. Grei nok, men få dette ...

Du skjønner at vi i ganske lang tid har brukt den samme gamle tilnærmingsdesignen for PC før vi gikk over til mobil. I ettertid var desktop UI hovedfokus fordi hoveddelen av trafikken kom fra PC-brukere.

Da skjedde noe interessant i slutten av 2016 - mobiltrafikken overgikk til slutt PC-trafikken. Ved slutten av det året hadde mobiltelefoner truffet 50.31% av markedsandelen, mens tabletter tilsatte opptil 4.9%.

mobil markedsandel

Men til tross for dette prioriterte vi fortsatt på skrivebordgrensesnittet fordi det skjedde slik at PC-brukere opprettholdt ledelsen i den kumulerte tiden brukt online. I Nord-Amerika, for eksempel, surfing av mobiltelefoner var fortsatt hengende etter i 2017, står for 33% av surfetiden.

surfetid

Vel, tenk på det, vi visste alle at det bare var på tide før mobil til slutt tok tak i PC-er i dette også. Og innen 2018 hadde bordene slått helt til, med mobilopptak 52.2% av alle globale websider.

trafikkandel

Hva betyr dette for brukergrensesnittet?

For det første forventer vi et skifte i UI-designtilnærmingen. Utviklere vil begynne å endre sine prioriteringer ved å fokusere på mobil UI før de designer for PC. Mobilbrukere vil ha forrang for PC-brukere.

Bruk av skygger og dybde

Det er ingen som benekter at flate UI-design har fordelene. Men la oss innse det. De har nå blitt for ensformige og riktignok ganske kjedelige.

Dessverre var bruk av 3D-design utfordrende på grunn av den resulterende tungvint grafikken. Å laste en webside med et 3D-grensesnitt, for eksempel, tok vanligvis lenger tid enn en med en flat design.

Vel, helt til nettleserne begynte å forbedre seg betydelig. Og designere, derimot, utviklet en eksepsjonell teknikk for å dra nytte av skygger for å introdusere illusjonen om dybde.

skygger og dybde

I 2019 forventer vi derfor å se en progressiv bruk av skyggevariasjoner for å oppnå forskjellige 3D-grensesnittutsikter.

For eksempel kan designere som søker å trekke oppmerksomhet til spesifikke elementer skape falske skygger med ulik grad av mykhet og intensitet. Sluttresultatet er et element som kan se ut til å sveve over resten i 3D.

En annen populær teknikk er å plassere skygger i mønstre for å skape forskjellige nivåer av teksturer, og deretter bringe grensesnittelementene til live.

Så gjett hva? Nyere fremskritt i UI-designverktøy har ytterligere utvidet dynamikken som følger med disse designtilnærmingene. Du kan nå enkelt kombinere skygger med rutenett og parallaksoppsett for å systematisk utvide den tilsvarende dybden, og følgelig oppnå mer realistiske 3D-illusjoner.

Med andre ord, avansert bruk av skygger vil fortsette å oppnå mer raffinert dybde på 2D-skjerm. Og på denne måten eliminere behovet for spesielle 3D-skjermer.

Minimalisme

I år 2000 spenner gjennomsnittlig menneskelig oppmerksomhet, i det minste i følge en studie av Microsoft, var 12 sekunder. Så gjett hva? I 2015 hadde den overraskende falt til 8 sekunder - underholdende kortere enn en standard gullfisk.

Vel, akkurat da vi trodde det umulig kunne bli verre, gjorde internett folk mer utålmodige- 47% av besøkende nå forvent at sidene dine skal lastes inn på under 2 sekunder. De tåler rett og slett ikke å vente lenger. Faktisk vil 40% av dem forlate hvis det tar lengre tid enn 3 sekunder.

Overraskende nok har mange nettdesignere ikke tatt dette på alvor. Den nåværende gjennomsnittlig sidehastighet er 8.66 sekunder- til tross for Googles anbefaling på færre enn 3 sekunder for 2018.

side lasting ganger

Og det er ikke alt. Det viser seg at situasjonen er betydelig dårligere for mobilnettsteder siden de tar en gjennomsnitt på 22 sekunder å laste. Likevel, dessverre, henger ikke 53% av besøkende på mobilsiden på mer enn tre sekunder.

Men, hvordan har dette å gjøre med UI?

Mens sidehastigheter vanligvis bestemmes av flere faktorer, er den generelle utformingen av brukergrensesnittet spesielt ekstremt kritisk. Det er der kjedereaksjonen begynner.

Så, hva betyr dette for 2019?

Vel, Googles hastighetsoppdatering i juli 2018 var begynnelsen på slutten av komplekse, grafikktunge brukergrensesnitt som i vesentlig grad kompromitterer lastehastighetene. Vi skifter nå stadig mer mot strømlinjeformede, minimalistiske brukergrensesnitt som lastes mye raskere.

I det vesentlige innebærer minimalisme å oppnå en ideell balanse mellom enkelhet, bekvemmelighet og funksjonalitet. Dette klarer ikke bare å forbedre generelle hastigheter og rangering av søkemotorer, men også redusere den tilsvarende trafikkhastigheten.

Overlappende effekter

Den moderne epoken med grafisk design introduserte overlappende effekter for å kombinere flere lag, skape romfølelse, og viktigst av alt, gjør grensesnitt mer fengslende.

Men hold på. Hva er en overlappende effekt i utgangspunktet?

Generelt innebærer dette å plassere elementer som bilder, tekst og farger for å overlappe hverandre stilig. Jeg vedder på at du allerede har kommet over overlappende grafikk på flere nettsteder nå.

overlappende effekter

Riktignok har designtrenden tatt seg opp betydelig de siste par årene. Men med moderne enheter som nå kommer med mye bedre fargegradientegengivelse, forventes det at 2019 vil utløse omfattende adopsjon av overlappende effekter på både PC og mobil UI-er.

Samsung Mobile byttet for eksempel fra LCD-skjermer til mye avansert OLED-teknologi da de ga ut Galaxy S7 for to år siden. Så ble Apple med på bandwagon med iPhone X, som nå har en større skjermkontrast enn LCD-forgjengerne. Selskapet har til og med planer om å opprettholde dette på alle iPhone-modeller planlagt i 2019.

Og hvem vil dra mest nytte av?

Som forventet drar den grafiske designverdenen drøyt fordel av dette for å skape overlapp med skarpere, sprøere graderinger som ser mer naturlige ut. Vi elsker hvordan OLED-skjermer betydelig har dempet det største problemet med overlappende elementer - brukere blir distrahert av de underliggende sekundære elementene på grunn av dårlig kontrast.

Denne trenden vil også utløse utviklingen av åpenhet i UI-design. Vi vil se økt bruk av “glasslignende” teksturer på brukergrensesnitt når designere utnytter transparens for å få frem både primær og sekundær grafikk samtidig, uten nødvendigvis å forstyrre den tiltenkte vektleggingen.

Rammeløse design

Og fremdeles på moderne enheter har du helt sikkert lagt merke til det mest fremragende ved deres generelle utvendige design i dag. Nei, jeg snakker ikke om hvordan de nå bruker mye glass på stort sett alle overflater.

Ok, jeg innrømmer at det kan ha noe med det å gjøre. Av en eller annen merkelig grunn hater alle nå tilsynelatende visningsrammer. Store produsenter av smarttelefoner og TV-skjermer reduserer gradvis mellomrommet mellom skjermkonturen og tilhørende enhetskanter. For å fullføre utseendet, velger de å kombinere det med avrundede enhetskanter.

Samsung har til og med gått for å eliminere kantrammer helt ved å utvide noen av smarttelefonskjermene sine forbi kantene. Apple har derimot bestemt seg for å dekke hele iPhone-ansiktet med skjermbildet, slik at det bare er plass til ørestykket.

rammeløs kant

Kom og tenk på det, jeg antar at det har alt å gjøre med uendelig illusjon - behovet for å få skjermen til å virke som en del av det naturlige miljøet. Og for å være ærlig, fungerer det ganske bra for brukere som etter sigende synes skjermene er mer oppslukende.

Kanskje overraskende har denne trenden smittet over til appbransjen. UI-ene flyttes gradvis fra innrammede konturer til glatte linjer kombinert med avrundede kanter. Følgelig har dette hjulpet grensesnitt til å integreres sømløst med enhetsskjermene, og deretter skape et rammeløst perspektiv på fullskjerm.

Ettersom enhetsprodusenter fortsetter denne trenden inn i 2019, forventer vi at brukergrensesnitt gradvis slipper den gamle generasjons skarpe kanter for jevne, avrundede, rammeløse design.

Micro-animasjoner

De er subtile og kan til tider virke ubetydelige. Men den enkle sannheten er dette - mikro-animasjoner i brukergrensesnitt har vist seg å være ekstremt kraftige til å engasjere og hjelpe brukere når de navigerer.

Har du sett de knappene som endrer farge når du blar over eller klikker på dem? Du har definitivt også kommet over menyoppsett som vises for å vise flere alternativer så snart pekeren lander på dem. Vel, de er alle eksempler på mikroanimasjoner som skaper små visuelle effekter for å berike brukeropplevelsen.

mikro animasjoner

Siden bevegelige elementer er spesielt effektive når det gjelder å fange oppmerksomhet, er det mange designere som allerede utnytter dem til å drive brukere mot forskjellige konverteringspunkter. Denne trenden er så utbredt nå at jeg vil være villig til å satse en formue at du ikke kan finne mer enn fem nettsteder som ennå ikke har implementert noen form for mikro-animasjoner.

Så får du dette. Alle de dominerende nettleserne støtter for øyeblikket mikroanimasjoner tilfredsstillende på både PC og mobil. Så jeg vil si at trenden er her for å holde seg når vi nærmer oss 2019 - forventer at brukergrensesnitt kommer med systematisk strukturerte visuelle hierarkier.

konklusjonen

Alt i alt har vi bare dekket noen av de mest kjente trender. Vi kommer garantert til å se flere spennende ting som kommer opp etter hvert som tiden går, og vi kan ikke vente til 2019 med å få ballen til å rulle.

Når det er sagt, hva tror du kan vise seg å være den mest effektive UI-designtrenden? Og hvilke andre viktige trender vil du legge til denne listen?

header image med tillatelse fra Walid Beno

Bogdan Rancea

Bogdan er et grunnleggende medlem av Inspired Mag, etter å ha opparbeidet seg nesten 6 års erfaring i løpet av denne perioden. På fritiden liker han å studere klassisk musikk og utforske billedkunst. Han er ganske besatt av fixies også. Han eier 5 allerede.