UI-trender som kommer att formas 2020

Låt mig fråga dig något som kan låta lite som science-fiction. Har det någonsin hänt dig att kanske planeten Jorden har rört sig lite snabbare på sent - men vi får ännu inte märka det? Verkar som att det var först igår som vi granskade vad vi förväntade oss när vi flyttade in i 2018. Men konstigt nog är det nästan 2019 redan!

Kom att tänka på det, men 2018 har varit ett styck av ett år för UI-design. Det är nu mycket enklare jämfört med tidigare år - tack vare de exponentiella tillväxtdesignverktygen har upplevt på senare tid. Du behöver inte ens vara en kodande guru längre för att skapa en professionell webbplats med bra UI på bara några minuter.

Och det täcker knappt basen. Ändringar i användarpreferenser har också i stor utsträckning påverkat hur vi har designat gränssnitt under 2018.

För att sätta det i perspektiv, 94% av Internetanvändarna slutade lita på webbplatser med dålig design - så det finns helt enkelt inget utrymme för kompromisser längre.

Sedan rullning nu är allmänt accepterad prioriterar webbplatser inte längre att placera de bästa sakerna högst upp. Du kan sprida dem proportionellt inom gränssnittet. Men än en gång har vi lärt oss att vara oerhört försiktiga med att tänka på det 40% av besökarna kommer att lämna om den totala layouten visar sig vara illa.

Och det är inte allt de hatar. Användare har också blivit trötta på endast reglage för innehåll 1% klickar på dem. Det är intressant att mildra det genom att eliminera innehåll också skulle vara ett fel drag sedan 86% av besökarna vill se kritisk produkt- och serviceinformation så snart marken på hemsidan.

Fascinerande, eller hur?

Så låt oss vara ärliga - UI-design har aldrig varit så spännande. Användare förändras, enhetsteknologi utvecklas astronomiskt, internethastigheten är nu på formel 1-nivå, och vi stöds av ett brett utbud av designverktyg på webben. Kombinera allt detta med de moderna UI-designfärdigheterna, och du kommer säkert att hålla med om att 2019 säkert kommer att bli ännu mer påverkande.

Så, vilka trender ser vi fram emot?

mobil First

Mobiloptimering är ett sortsord som till synes inte går i pension någon gång snart. Trenden har pågått i ett par år nu, för att säga minst sagt. Och du skulle vara rätt att förutsäga att vi kommer att se ett ökat antagande av mobilbaserade UI-mönster under 2019.

Du kan också anta att förutom motsvarande teknik finns det inget nytt som kan komma att komma i detta utrymme - åtminstone under de kommande 12 månaderna eller så. Tillräckligt bra, men få det här ...

Du förstår att vi länge har använt samma gamla tillvägagångssätt för PC innan vi bytt till mobil. I efterhand var desktop UI huvudfokus eftersom huvuddelen av trafiken kom från PC-användare.

Då inträffade något intressant i slutet av 2016 - mobiltrafiken övergick i slutändan PC-trafiken. I slutet av det året hade mobiltelefoner träffat 50.31% av marknadsandelenmedan tabletter tillsattes upp till 4.9%.

mobil marknadsandel

Men trots det prioriterade vi fortfarande på skrivbordgränssnittet eftersom det så hände att PC-användare behöll ledningen i den samlade tiden online. I Nordamerika, till exempel, var surfing efter mobiltelefoner fortfarande efter 2017, vilket står för 33% av surftiden.

surfingstid

Tja, kom att tänka på det, vi visste alla att det bara var dags innan mobilen i slutändan fick upp datorer i detta också. Och 2018 hade borden vänt helt, med mobilupptagning 52.2% av alla globala webbsidor.

trafikandel

Vad betyder detta för UI?

Till att börja med förväntar vi oss en förändring av UI-designmetoden. Utvecklare kommer att börja ändra sina prioriteringar genom att fokusera på mobil UI först innan de designar för PC. Mobilanvändare har företräde framför datoranvändare.

Användning av skuggor och djup

Det är ingen som förnekar att platt UI-design har sina fördelar. Men låt oss inse det. De har nu blivit för monotona och visserligen ganska tråkiga.

Tyvärr var det utmanande att använda 3D-design på grund av den resulterande tunga grafiken. Att ladda en webbsida med ett 3D-gränssnitt, till exempel, tog normalt längre tid än en med en platt design.

Tja, tills webbläsare började förbättras avsevärt. Och designers, å andra sidan, utvecklade en exceptionell teknik för att dra nytta av skuggor för att introducera illusionen av djup.

skuggor och djup

Under 2019 räknar vi därför med att se en progressiv användning av skuggvarianter för att uppnå olika 3D-gränssnittsutsikter.

Exempelvis kan designers som vill uppmärksamma specifika element skapa falska skuggor med varierande mjukhet och intensitet. Slutresultatet är ett element som verkar sväva över resten i 3D.

En annan populär teknik är att placera skuggor i mönster för att skapa olika nivåer av texturer och därefter leva gränssnittselementen till liv.

Gissa då vad? De senaste framstegen i UI-designverktyg har ytterligare utökat dynamiken som följer med dessa designmetoder. Nu kan du enkelt kombinera skuggor med rutnät och parallaxlayouter för att systematiskt förlänga motsvarande djup och därmed uppnå mer realistiska 3D-illusioner.

Med andra ord fortsätter avancerad användning av skuggor att uppnå ett mer förfinat djup på 2D-skärm. Och på så sätt eliminera behovet av speciella 3D-skärmar.

Minimalism

År 2000 spänner den genomsnittliga mänskliga uppmärksamheten åtminstone enligt en studie av Microsoft, var 12 sekunder. Gissa då vad? År 2015 hade det förvånansvärt sjunkit till 8 sekunder - underhållande kortare än en vanlig guldfisk.

Tja, precis när vi trodde att det omöjligt kunde bli värre, gjorde internet människor mer otåliga- 47% av dina webbplatsbesökare förväntar dig nu att dina sidor laddas på mindre än 2 sekunder. De kan helt enkelt inte stå och vänta längre. Faktum är att 40% av dem kommer att lämna om det tar längre tid än 3 sekunder.

Överraskande nog har många webbdesigners inte tagit detta på allvar. Nuvarande genomsnittlig sidhastighet är 8.66 sekunder- trots Googles rekommendation om färre än 3 sekunder för 2018.

sidlastningstider

Och det är inte allt. Det visar sig att situationen är betydligt sämre för mobila webbplatser eftersom de tar en genomsnitt 22 sekunder att ladda. Ännu tyvärr hänger 53% av besökarna på mobilsidan inte i mer än tre sekunder.

Men hur förhåller det sig till UI?

Medan sidhastighetshastigheter vanligtvis bestäms av flera faktorer, är den övergripande utformningen av användargränssnittet särskilt extremt kritisk. Det är där kedjereaktionen börjar.

Så, vad betyder detta för 2019?

Väl, Googles hastighetsuppdatering i juli 2018 var början på slutet av komplexa, grafik-tunga UI: er som väsentligen komprometterar laddningshastigheterna. Vi går nu allt mer mot väl strömlinjeformade, minimalistiska användargränssnitt som laddar mycket snabbare.

I huvudsak innebär minimalism att uppnå en idealisk balans mellan enkelhet, bekvämlighet och funktionalitet. Detta lyckas inte bara förbättra de totala hastigheterna och rangordningen för sökmotorerna utan också minska motsvarande trafikstoppfrekvens.

Överlappande effekter

Den moderna eran med grafisk design introducerade överlappande effekter för att kombinera flera lager, skapa en känsla av rymd, och viktigast av allt, göra gränssnitt mer fängslande.

Men håll på. Vad är en överlappande effekt i första hand?

I allmänhet innebär detta att placera element som bilder, text och färger för att överlappa varandra på ett elegant sätt. Jag slår vad om att du redan har stött på överlappande grafik på flera webbplatser nu.

överlappande effekter

Tja, visserligen har designtrenden tagit kraftigt upp de senaste åren. Men med moderna enheter som nu kommer med mycket bättre färggradientreproduktion, förväntas det att 2019 kommer att utlösa omfattande antagande av överlappande effekter på både PC- och mobilgränssnitt.

Samsung Mobile bytte till exempel från LCD-skärmar till mycket avancerad OLED-teknik när de släppte Galaxy S7 för två år sedan. Sedan gick Apple med i bandvagnen med iPhone X, som nu har en större skärmkontrast än sina LCD-föregångare. Företaget har till och med planer på att upprätthålla detta på alla iPhone-modeller som är planerade till 2019.

Och vem kommer att gynna mest?

Som förväntat utnyttjar den grafiska designvärlden detta för att skapa överlappningar med skarpare, krispigare lutningar som ser mer naturliga ut. Vi älskar hur OLED-skärmar väsentligt har mildrat det största problemet med överlappande element - användare blir distraherade av de underliggande sekundära elementen på grund av dålig kontrast.

Denna trend kommer också att utlösa utvecklingen av öppenhet i UI-konstruktioner. Vi ser ökad användning av "glasliknande" strukturer på UI: er eftersom designers utnyttjar transparens för att få fram både primär och sekundär grafik samtidigt, utan att nödvändigtvis störa den avsedda betoningen.

Frameless design

Och fortfarande på moderna enheter har du säkert lagt märke till det mest enastående med deras övergripande yttre design idag. Nej, jag pratar inte om hur de nu använder över glas på nästan alla ytor.

Ok, jag medger att det kan ha något att göra med det. Av någon konstig anledning hatar alla till synes visningsramar. Större tillverkare av smarttelefoner och TV-skärmar minskar gradvis utrymmet mellan skärmens kontur och motsvarande enhetskanter. För att slutföra utseendet väljer de att kombinera det med rundade enhetskanter.

Samsung har till och med gått för att eliminera kantramar helt genom att utöka några av sina smarttelefonskärmar förbi kanterna. Apple, å andra sidan, har beslutat att täcka hela iPhone-ansiktet med skärmen, vilket lämnar utrymme för endast hörlurarna.

ramlös kant

Kom att tänka på det, jag antar att det har allt att göra med infinity-illusionen - behovet av att få skärmen att verka som en del av den naturliga miljön. Och för att vara ärlig fungerar det ganska bra för användare som enligt uppgift visar att skärmarna är mer uppslukande.

Kanske inte överraskande har denna trend övergått till appbranschen. UI: erna växlar successivt från inramade konturer till släta linjer i kombination med rundade kanter. Följaktligen har detta hjälpt gränssnitt att integreras sömlöst med enhetsskärmarna och därmed skapa en ramlös bildskärm på full skärm.

Då enhetstillverkarna fortsätter denna trend in i 2019, förväntar vi oss att användargränssnitt gradvis släpper den gamla generationens vassa kanter för smidiga, rundade, ramlösa konstruktioner.

Micro-animeringar

De är subtila och kan ibland verka obetydliga. Men den enkla sanningen är detta - mikro-animationer i användargränssnitt har visat sig vara extremt kraftfulla för att engagera och hjälpa användare när de navigerar.

Har du sett de knapparna som ändrar färg när du bläddrar över eller klickar på dem? Du har definitivt också stött på menylayouter som visas för att visa ytterligare alternativ så snart pekaren landar på dem. De är alla exempel på mikroanimationer som skapar små visuella effekter för att berika användarupplevelsen.

mikro animationer

Eftersom rörliga element är särskilt effektiva för att fånga uppmärksamhet, har många designers redan utnyttjat dem för att driva användare mot olika konverteringspunkter. Denna trend är så utbredd nu att jag skulle vara villig att satsa en förmögenhet att du inte kan hitta mer än fem webbplatser som ännu inte har implementerat någon form av mikro-animationer.

Skaffa det här. Alla dominerande webbläsare stöder för närvarande mikro-animationer tillfredsställande bra på både PC och mobil. Så jag skulle säga att trenden är här för att stanna när vi närmar oss 2019- förväntar sig att UI: er kommer med systematiskt strukturerade visuella hierarkier.

Slutsats

Sammantaget har vi bara täckt några av de mest anmärkningsvärda trenderna. Vi kommer säkert att se fler spännande saker som dyker upp när tiden går, och vi kan inte vänta till 2019 för att få bollen att rulla.

Som sagt, vad tror du exakt som kan visa sig vara den mest påverkande UI-designtrenden? Och vilka andra anmärkningsvärda trender skulle du lägga till i denna lista?

header image med tillstånd av Walid Beno

Bogdan Rancea

Bogdan är en av grundarna i Inspired Mag och har samlat nästan 6 års erfarenhet under denna period. På fritiden gillar han att studera klassisk musik och utforska bildkonst. Han är ganska besatt av fixies också. Han äger redan 5.