UI-trends die 2019 vormen

Sta me toe je iets te vragen dat een beetje op sciencefiction lijkt. Is het ooit bij je opgekomen dat planeet Aarde misschien een beetje sneller is gegaan - maar we moeten het nog merken? Het lijkt erop dat we pas gisteren hebben bekeken wat we verwachtten toen we 2018 binnengingen. Maar vreemd genoeg is het al bijna 2019!

Nu ik erover nadenk, is 2018 een jaar in de maak geweest voor UI-ontwerp. De zaken zijn nu veel eenvoudiger in vergelijking met voorgaande jaren, dankzij de exponentiële groeiontwerptools die de afgelopen tijd zijn ervaren. Je hoeft niet eens een codeergoeroe te zijn om binnen enkele minuten een professioneel uitziende site met geweldige gebruikersinterface te maken.

En dat bedekt amper de basis. Wijzigingen in gebruikersvoorkeuren hebben ook een grote invloed gehad op de manier waarop we interfaces ontwerpen in 2018.

Om het in perspectief te plaatsen, 94% van de internetgebruikers stopte met het vertrouwen van sites met een slecht ontwerp, dus er is simpelweg geen ruimte meer voor compromissen.

Omdat scrollen nu algemeen wordt geaccepteerd, geven sites niet langer de voorkeur aan het plaatsen van de beste dingen bovenaan. Je kunt ze proportioneel verspreiden binnen de interface. Maar nogmaals, we hebben geleerd om uiterst voorzichtig te zijn met dat nadenken 40% van de bezoekers zal vertrekken als de algehele lay-out te shabby blijkt te zijn.

En dat is niet alles wat ze haten. Gebruikers zijn ook moe geworden van content sliders-only 1% klikt op hen. Interessant is dat het verminderen van dit effect door het verwijderen van inhoud ook een verkeerde zet is 86% sitebezoekers wil kritieke product- en service-informatie zien zodra het land op de startpagina staat.

Fascinerend, toch?

Dus laten we eerlijk zijn - UI-ontwerp is nog nooit zo opwindend geweest. Gebruikers zijn aan het veranderen, apparaattechnologie ontwikkelt zich astronomisch, internetsnelheid is nu op Formula 1-niveau en we worden ondersteund door een breed scala aan ontwerptools op het web. Combineer dat alles met de moderne gebruikersvaardigheden van de gebruikersinterface, en u zult zeker beamen dat 2019 nog meer impact zal hebben.

Dus, naar welke trends kijken we uit?

Mobiel eerst

Mobiele optimalisatie is een buzzwoord dat schijnbaar niet snel weer met pensioen gaat. De trend bestaat nu al een paar jaar, om het zachtjes uit te drukken. En je zou gelijk hebben om te voorspellen dat we meer gebruik zullen maken van op mobiele telefoons gebaseerde UI-ontwerpen in 2019.

Je zou ook kunnen aannemen dat er, afgezien van de corresponderende technologie, niets nieuws is in deze ruimte, tenminste niet voor de komende 12 maanden of zo. Eerlijk genoeg, maar haal dit ...

U ziet dat we al geruime tijd dezelfde oude aanpak gebruiken - eerst ontwerpen voor de pc, voordat hij naar mobiel overschakelt. Retrospectief was de gebruikersinterface op het bureaublad de belangrijkste focus omdat het grootste deel van het verkeer afkomstig was van pc-gebruikers.

Toen gebeurde er iets interessants in het late 2016 - mobiel verkeer overtrof uiteindelijk pc-verkeer. Tegen het einde van dat jaar waren mobiele telefoons geraakt 50.31% van het marktaandeel, terwijl tablets zijn opgeteld tot 4.9%.

mobiel marktaandeel

Desalniettemin hebben we nog steeds prioriteit gegeven aan de desktopinterface, omdat pc-gebruikers het voortouw namen in de cumulatieve hoeveelheid online doorgebrachte tijd. In Noord-Amerika liep het surfen op mobiele telefoons bijvoorbeeld nog steeds achter op 2017 33% van de surftijd.

surftijd

Welnu, ik denk dat we allemaal wisten dat het alleen nog maar tijd was voordat mobiel uiteindelijk ook de pc's inhaalde. En bij 2018 waren de tafels volledig omgedraaid, met mobiel opnemen 52.2% van alle wereldwijde webpagina's.

verkeer delen

Wat betekent dit voor gebruikersinterface?

Om te beginnen verwachten we een verandering in de UI-ontwerpbenadering. Ontwikkelaars zullen hun prioriteiten gaan veranderen door zich eerst te concentreren op mobiele gebruikersinterface voordat ze voor pc ontwerpen. Mobiele gebruikers hebben voorrang op pc-gebruikers.

Gebruik van schaduwen en diepte

Het valt niet te ontkennen dat platte UI-ontwerpen hun voordelen hebben. Maar laten we eerlijk zijn. Ze zijn nu te eentonig geworden en, naar verluidt, behoorlijk saai.

Helaas was het gebruik van 3D-ontwerpen een uitdaging vanwege de resulterende logge grafische afbeeldingen. Het laden van een webpagina met een 3D-interface duurde bijvoorbeeld meestal langer dan een met een plat ontwerp.

Totdat webbrowsers substantieel verbeterden. En ontwerpers, aan de andere kant, ontwikkelden een uitzonderlijke techniek om te profiteren van schaduwen om de illusie van diepte te introduceren.

schaduwen en diepte

Daarom verwachten we in 2019 een progressief gebruik van schaduwvariaties om verschillende 3D-interface-outlooks te bereiken.

Ontwerpers die de aandacht op specifieke elementen willen vestigen, kunnen bijvoorbeeld valse schaduwen maken met verschillende niveaus van zachtheid en intensiteit. Het eindresultaat is een element dat in 3D over de rest lijkt te zweven.

Een andere populaire techniek is het plaatsen van schaduwen in patronen om verschillende niveaus van texturen te creëren en vervolgens de interface-elementen tot leven te brengen.

Raad eens wat? Recente verbeteringen in UI-ontwerphulpmiddelen hebben de dynamiek die bij deze ontwerpbenaderingen hoort verder uitgebreid. U kunt schaduwen nu eenvoudig combineren met rasters en parallaxlay-outs om de overeenkomstige diepte systematisch uit te breiden en zo realistischere 3D-illusies te bereiken.

Met andere woorden, een geavanceerd gebruik van schaduwen blijft een verfijndere diepte bereiken op het display van de 2D. En elimineer daarmee de behoefte aan speciale 3D-schermen.

Minimalisme

In het jaar 2000 is de gemiddelde aandacht van de mens, althans volgens een onderzoek van Microsoft, was 12 seconden. Raad eens wat? Bij 2015 was het verrassend korter geworden tot 8 seconden - vermakelijk korter dan een standaard goudvis.

Nou, net toen we dachten dat het onmogelijk slechter kon worden, maakte internet mensen ongeduldiger ... 47% van de bezoekers van uw site verwacht nu dat uw pagina's in minder dan 2 seconden worden geladen. Ze kunnen eenvoudigweg niet langer wachten. In feite zal 40% ervan verdwijnen als het langer duurt dan 3 seconden.

Verrassend genoeg hebben veel webontwerpers dit niet serieus genomen. De huidige de gemiddelde laadsnelheid van de pagina is 8.66 seconden- ondanks de aanbeveling van Google van minder dan 3 seconden voor 2018.

laadtijden van pagina's

En dat is niet alles. Het blijkt dat de situatie aanzienlijk slechter is voor mobiele sites omdat ze een gemiddelde van 22 seconden Laden. Helaas blijft 53% van de bezoekers van mobiele pagina's niet langer dan drie seconden hangen.

Maar, hoe verhoudt dit zich tot UI?

Hoewel het laden van pagina's meestal wordt bepaald door verschillende factoren, is het algemene ontwerp van de gebruikersinterface bijzonder uiterst kritisch. Dat is waar de kettingreactie begint.

Wat betekent dit voor 2019?

Nou, Snelheidsupdate van Google in juli was 2018 het begin van het einde van complexe, grafisch zware gebruikersinterfaces die de laadsnelheden aanzienlijk aantasten. We verschuiven nu steeds meer naar goed gestroomlijnde magere, minimalistische gebruikersinterfaces die veel sneller laden.

In essentie brengt minimalisme het bereiken van een ideale balans tussen eenvoud, gemak en functionaliteit met zich mee. Hierdoor zijn niet alleen de algehele snelheden en de positie in de zoekmachine verbeterd, maar is ook het bijbehorende bouncepercentage voor verkeer gedaald.

Overlappende effecten

Het moderne tijdperk van grafisch ontwerp introduceerde overlappende effecten om meerdere lagen te combineren, een gevoel van ruimte te creëren en, belangrijker nog, om interfaces boeiender te maken.

Maar wacht even. Wat is een overlappend effect in de eerste plaats?

Over het algemeen betekent dit dat elementen zoals afbeeldingen, tekst en kleuren elkaar stijlvol overlappen. Ik wed dat je nu al overlappende graphics tegenkomt op verschillende websites.

overlappende effecten

Weliswaar is de designtrend in de afgelopen jaren aanzienlijk verbeterd. Maar met moderne apparaten die nu een veel betere weergave van de kleurovergangen krijgen, wordt verwacht dat 2019 uitgebreide toepassing van overlappende effecten op zowel pc als mobiele UI's zal activeren.

Samsung Mobile schakelde bijvoorbeeld van LCD-schermen naar de veel geavanceerde OLED-technologie toen ze de Galaxy S7 twee jaar geleden uitbrachten. Toen sloot Apple zich aan bij de muziekwagon met de iPhone X, die nu een groter schermcontrast heeft dan zijn voorgangers. Het bedrijf heeft zelfs plannen om dit te handhaven op alle iPhone-modellen gepland voor 2019.

En wie heeft er het meest baat bij?

Zoals verwacht, profiteert de grafische ontwerpwereld hier buitengewoon van om overlappingen te creëren met scherpere, krokantere gradaties die er natuurlijker uitzien. We houden ervan hoe OLED-schermen het grootste probleem met overlappende elementen aanzienlijk hebben verzacht: gebruikers worden afgeleid door de onderliggende secundaire elementen door een slecht contrast.

Deze trend zal ook leiden tot de ontwikkeling van transparantie in UI-ontwerpen. We zien een toenemend gebruik van "glasachtige" texturen op UI's omdat ontwerpers profiteren van transparantie om zowel primaire als secundaire grafische afbeeldingen tegelijk naar voren te brengen, zonder noodzakelijkerwijs de beoogde nadruk te verstoren.

Frameloze ontwerpen

En nog steeds op moderne apparaten, je hebt zeker het meest opvallende opgemerkt over hun algehele uiterlijk ontwerp tegenwoordig. Nee, ik heb het niet over hoe ze nu op vrijwel elk oppervlak glas overgieten.

Ok, ik geef toe dat het daar misschien iets mee te maken heeft. Om een ​​vreemde reden heeft iedereen nu een hekel aan display-frames. Grote makers van smartphones en televisieschermen verkleinen geleidelijk de ruimte tussen de weergaveomtrek en de bijbehorende apparaatranden. Om het uiterlijk te voltooien, kiezen ze ervoor om dat te combineren met afgeronde apparaatranden.

Samsung is zelfs doorgegaan om randframes helemaal te elimineren door enkele van hun smartphoneschermen langs de randen uit te breiden. Apple heeft daarentegen besloten om het hele iPhone-gezicht te bedekken met het scherm, zodat er alleen ruimte is voor het oorstukje.

frameloze rand

Nu ik erover nadenk, denk ik dat het alles te maken heeft met de oneindige illusie - de noodzaak om het scherm een ​​deel van de natuurlijke omgeving te laten lijken. En om eerlijk te zijn, werkt het best goed voor gebruikers, die naar verluidt de schermen meer meeslepend vinden.

Misschien niet verrassend, deze trend is overgeslagen naar de app-industrie. De UI's verschuiven geleidelijk van omlijnde contouren naar vloeiende lijnen in combinatie met afgeronde hoeken. Dit heeft er mede toe geleid dat interfaces naadloos kunnen worden geïntegreerd met de schermen van het apparaat en vervolgens een volledig schermloze kijk op het scherm kunnen creëren.

Naarmate apparaatfabrikanten deze trend voortzetten in 2019, verwachten we dat UI's geleidelijk de scherpe randen van de oude generatie zullen laten vervallen voor vloeiende, afgeronde, frameloze ontwerpen.

Micro-animaties

Ze zijn subtiel en lijken soms onbeduidend. Maar de simpele waarheid is dat micro-animaties in UI's zeer krachtig zijn gebleken in het inschakelen en helpen van gebruikers tijdens het navigeren.

Heb je die knoppen gezien die van kleur veranderen als je er overheen scrollt of erop klikt? U bent zeker ook menu-indelingen tegengekomen die poppen om extra opties weer te geven zodra de muisaanwijzer erop komt. Nou, het zijn allemaal voorbeelden van micro-animaties die kleine visuele effecten creëren om de gebruikerservaring te verrijken.

micro-animaties

Omdat bewegende elementen vooral effectief zijn in het vangen van aandacht, gebruiken veel ontwerpers ze al om gebruikers naar verschillende conversiepunten te brengen. Deze trend is ondertussen zo groot dat ik bereid zou zijn om een ​​fortuin te wedden dat je niet meer dan vijf sites kunt vinden die nog geen enkele vorm van micro-animaties hebben geïmplementeerd.

Haal dit dan. Alle dominante webbrowsers ondersteunen micro-animaties op dit moment op zowel pc als mobiel. Dus ik zou zeggen dat de trend hier is om te blijven als we 2019 naderen - verwachten dat UI's komen met systematisch gestructureerde visuele hiërarchieën.

Conclusie

Al met al hebben we slechts enkele van de meest opvallende trends besproken. In de loop van de tijd zullen we meer spannende dingen te zien krijgen en we kunnen niet wachten tot 2019 het goede voorbeeld geeft.

Dat gezegd hebbende, wat zou volgens u de meest invloedrijke UI-ontwerptrend kunnen blijken te zijn? En welke andere opvallende trends zou u aan deze lijst toevoegen?

header afbeelding met dank aan Walid Beno

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.