UI-Trends, die 2020 prägen werden

Gestatten Sie mir, Sie etwas zu fragen, das nach Science-Fiction klingt. Ist Ihnen jemals der Gedanke gekommen, dass sich der Planet Erde in letzter Zeit vielleicht etwas schneller bewegt hat - aber wir müssen es noch bemerken? Anscheinend haben wir erst gestern überprüft, was wir erwartet haben, als wir zu 2018 wechselten. Seltsamerweise ist es schon fast 2019!

Aber wenn man bedenkt, 2018 war für das Design der Benutzeroberflächen ein ganzes Jahr. Im Vergleich zu den Vorjahren ist es jetzt viel einfacher - dank der in letzter Zeit erlebten exponentiellen Wachstumstools. Sie müssen nicht einmal mehr ein Programmier-Guru sein, um in nur wenigen Minuten eine professionell aussehende Website mit großartiger Benutzeroberfläche zu erstellen.

Und das bedeckt kaum die Basis. Änderungen in den Benutzereinstellungen haben sich auch stark auf die Gestaltung von Schnittstellen in 2018 ausgewirkt.

Um es in die richtige Perspektive zu bringen, 94% der Internetnutzer Ich habe aufgehört, Websites mit schlechtem Design zu vertrauen - es gibt also keinen Kompromissraum mehr.

Da das Scrollen nun weithin akzeptiert wird, legen die Websites nicht mehr die Priorität auf, die besten Inhalte an die Spitze zu setzen. Sie können sie innerhalb der Schnittstelle proportional verteilen. Andererseits haben wir gelernt, sehr vorsichtig zu sein 40% der Besucher wird verlassen, wenn das Gesamtlayout schäbig ausfällt.

Und das ist nicht alles, was sie hassen. Die Nutzer haben es satt, nur noch die Inhaltsregler zu verwenden 1% wird klicken auf sie. Interessanterweise wäre das Abmildern durch die Beseitigung von Inhalten auch ein falscher Schritt seit 86% der Website-Besucher Sie möchten kritische Produkt- und Serviceinfos sehen, sobald das Land auf der Homepage landet.

Faszinierend, oder?

Seien wir ehrlich: Das Design der Benutzeroberfläche war noch nie so aufregend. Die Nutzer verwandeln sich, die Gerätetechnologie entwickelt sich astronomisch, die Geschwindigkeit des Internets ist jetzt auf Formel-1-Niveau und wir werden von einer Vielzahl von Design-Tools im Web unterstützt. Kombinieren Sie all dies mit den modernen UI-Designer-Skillsets, und Sie stimmen mit Sicherheit zu, dass 2019 sicherlich noch wirkungsvoller sein wird.

Auf welche Trends freuen wir uns also?

Mobile First

Mobile Optimierung ist ein Schlagwort, das scheinbar nicht in Kürze in Rente geht. Der Trend gibt es schon seit einigen Jahren, um es gelinde auszudrücken. Und Sie können zu Recht voraussagen, dass die Verwendung von UI-Designs für mobile Benutzer in 2019 zunimmt.

Sie könnten auch davon ausgehen, dass es abgesehen von der entsprechenden Technologie nichts Neues in diesem Bereich gibt - zumindest für die nächsten 12-Monate. Gut genug, aber krieg das…

Sie sehen, wir verwenden bereits seit geraumer Zeit die gleiche alte Herangehensweise für den PC, bevor wir zu Mobile wechseln. Rückblickend war die Desktop-Benutzeroberfläche der Hauptschwerpunkt, da der Großteil des Datenverkehrs von PC-Benutzern stammte.

Dann passierte etwas Interessantes im späten mobilen 2016-Verkehr, der letztendlich den PC-Verkehr überstieg. Ende des Jahres hatten Mobiltelefone getroffen 50.31% des Marktanteils, während Tabletten zu 4.9% addiert wurden.

mobiler Marktanteil

Trotzdem haben wir bei der Desktop-Oberfläche nach wie vor Prioritäten gesetzt, da PC-Benutzer in der kumulierten Online-Zeit den Vorsprung behaupteten. In Nordamerika beispielsweise war das Surfen mit Mobiltelefonen in 2017 immer noch im Rückstand 33% der Surfzeit.

Surfzeit

Nun, wir müssen alle darüber nachdenken, wir alle wussten, dass es erst die Zeit war, bevor das mobile Endgerät auch in diesem Fall die PCs einholte. Und bei 2018 hatten sich die Tische komplett gewendet, und das Handy wurde mobiler 52.2% aller globalen Webseiten.

Verkehrsanteil

Was bedeutet das für die Benutzeroberfläche?

Für den Anfang erwarten wir eine Verschiebung des UI-Designansatzes. Die Entwickler beginnen, ihre Prioritäten zu ändern, indem sie sich zunächst auf die mobile Benutzeroberfläche konzentrieren, bevor sie für den PC entworfen werden. Mobile Benutzer haben Vorrang vor PC-Benutzern.

Verwendung von Schatten und Tiefe

Es ist nicht zu leugnen, dass flache UI-Designs ihre Vorteile haben. Aber seien wir ehrlich. Sie sind inzwischen zu eintönig und zugegebenermaßen langweilig.

Leider war die Verwendung von 3D-Designs aufgrund der resultierenden umständlichen Grafik schwierig. Das Laden einer Webseite mit einer 3D-Schnittstelle zum Beispiel dauerte normalerweise länger als eine mit einem flachen Design.

Nun, bis sich Web-Browser erheblich verbessert haben. Andererseits haben Designer eine außergewöhnliche Technik entwickelt, um Schatten zu nutzen, um die Illusion der Tiefe einzuführen.

Schatten und Tiefe

In 2019 erwarten wir daher eine fortschreitende Verwendung von Schattenvariationen, um unterschiedliche Aussichten für die 3D-Schnittstelle zu erreichen.

Beispielsweise können Designer, die auf bestimmte Elemente aufmerksam machen möchten, falsche Schatten mit unterschiedlichem Grad an Weichheit und Intensität erzeugen. Das Endergebnis ist ein Element, das in 3D über den Rest zu schweben scheint.

Eine andere beliebte Technik ist das Platzieren von Schatten in Mustern, um verschiedene Ebenen von Texturen zu erzeugen und anschließend die Oberflächenelemente zum Leben zu erwecken.

Dann raten Sie mal was? Durch die jüngsten Verbesserungen der UI-Design-Tools wurde die mit diesen Designansätzen einhergehende Dynamik weiter erhöht. Sie können Schatten auf einfache Weise mit Rastern und Parallaxen-Layouts kombinieren, um die entsprechende Tiefe systematisch zu vergrößern und somit realistischere 3D-Illusionen zu erzielen.

Mit anderen Worten, die fortgeschrittene Verwendung von Schatten wird auf der 2D-Anzeige immer feiner. Dadurch entfällt die Notwendigkeit spezieller 3D-Bildschirme.

Minimalismus

Im Jahr 2000 liegt die durchschnittliche menschliche Aufmerksamkeitsspanne zumindest nach einer Studie von Microsoftwar 12 Sekunden. Dann raten Sie mal was? Bei 2015 war es überraschend auf 8-Sekunden abgefallen - komisch kürzer als bei einem Standard-Goldfisch.

Gerade als wir dachten, es könnte unmöglich noch schlimmer werden, machte das Internet die Menschen ungeduldiger. 47% Ihrer Website-Besucher Erwarten Sie nun, dass Ihre Seiten in weniger als 2 Sekunden geladen werden. Sie können einfach nicht länger warten. Tatsächlich wird 40% von ihnen gehen, wenn es länger als 3 Sekunden dauert.

Überraschenderweise haben viele Webdesigner dies nicht ernst genommen. Die jetzige Die durchschnittliche Seitenladegeschwindigkeit beträgt 8.66 Sekunden- trotz der Empfehlung von Google von weniger als 3 Sekunden für 2018.

Seitenladezeiten

Und das ist nicht alles. Es stellt sich heraus, dass die Situation für mobile Sites erheblich schlechter ist, da sie eine Durchschnitt von 22 Sekunden Laden. Leider hängen 53% der Besucher mobiler Seiten nicht länger als drei Sekunden herum.

Aber wie hängt das mit der Benutzeroberfläche zusammen?

Während Seitenladegeschwindigkeiten normalerweise von mehreren Faktoren bestimmt werden, ist das Gesamtdesign der Benutzeroberfläche besonders kritisch. Dort beginnt die Kettenreaktion.

Was bedeutet das für 2019?

Nun, Googles Geschwindigkeitsupdate Im Juli war 2018 der Anfang vom Ende komplexer, grafiklastiger Benutzeroberflächen, die die Ladegeschwindigkeiten erheblich beeinträchtigen. Wir bewegen uns jetzt zunehmend in Richtung schlanker, schlanker, minimalistischer Benutzeroberflächen, die wesentlich schneller geladen werden.

Minimalismus beinhaltet im Wesentlichen das Erreichen eines idealen Gleichgewichts zwischen Einfachheit, Komfort und Funktionalität. Dies verbessert nicht nur die Gesamtgeschwindigkeit und das Suchmaschinenranking, sondern verringert auch die entsprechende Absprungrate.

Überlappende Effekte

Die moderne Ära des grafischen Designs führte überlappende Effekte ein, um mehrere Ebenen zu kombinieren, ein Raumgefühl zu erzeugen und vor allem Schnittstellen zu faszinieren.

Aber halt. Was ist überhaupt ein Überlagerungseffekt?

Im Allgemeinen müssen dazu Elemente wie Bilder, Text und Farben platziert werden, um sich stilvoll zu überlappen. Ich wette, dass Sie auf mehreren Websites bereits überlappende Grafiken gefunden haben.

überlappende Effekte

Zugegeben, der Design-Trend hat in den letzten Jahren deutlich zugenommen. Da moderne Geräte nun jedoch eine viel bessere Farbverlaufsreproduktion bieten, wird erwartet, dass 2019 eine weitreichende Übernahme von überlappenden Effekten auf PC- und mobile Benutzeroberflächen auslöst.

Samsung Mobile hat zum Beispiel von LCD-Displays auf das Internet umgestellt weit fortgeschrittene OLED-Technologie als sie vor zwei Jahren das Galaxy S7 veröffentlichten. Dann schloss sich Apple mit dem iPhone X an, das jetzt einen größeren Display-Kontrast aufweist als seine LCD-Vorgänger. Das Unternehmen hat sogar Pläne, dies beizubehalten auf allen iPhone-Modellen, die für 2019 geplant sind.

Und wer kann am meisten davon profitieren?

Wie erwartet, nutzt die grafische Designwelt dies außerordentlich aus, um Überlappungen mit schärferen, knackigeren Verläufen zu erzeugen, die natürlicher wirken. Wir lieben es, dass OLED-Displays das größte Problem mit überlappenden Elementen erheblich gemildert haben - Benutzer werden aufgrund des schlechten Kontrasts von den darunter liegenden Sekundärelementen abgelenkt.

Dieser Trend wird auch die Entwicklung von Transparenz bei UI-Designs auslösen. Wir werden eine zunehmende Verwendung von "glasartigen" Texturen auf Benutzeroberflächen sehen, da Designer auf Transparenz setzen, um sowohl primäre als auch sekundäre Grafiken gleichzeitig hervorzuheben, ohne die beabsichtigte Betonung zu beeinträchtigen.

Rahmenlose Designs

Und noch heute haben Sie auf modernen Geräten das Außergewöhnlichste an ihrem gesamten Außendesign bemerkt. Nein, ich spreche nicht davon, wie sie Glas auf fast jeder Oberfläche übertreiben.

Ok, ich gebe zu, es könnte etwas damit zu tun haben. Aus irgendeinem seltsamen Grund hasst jetzt jeder scheinbar Bildrahmen. Große Smartphone- und TV-Bildschirmhersteller verkleinern allmählich den Abstand zwischen der Displaykontur und den entsprechenden Gerätekanten. Um den Look zu vervollständigen, kombinieren sie das mit abgerundeten Gerätekanten.

Samsung hat sogar schon begonnen, Randbilder vollständig zu entfernen, indem einige ihrer Smartphone-Bildschirme über die Kanten hinaus verlängert werden. Auf der anderen Seite hat Apple beschlossen, das gesamte iPhone-Gesicht mit dem Bildschirm abzudecken und nur dem Ohrhörer Platz zu lassen.

rahmenlose Kante

Ich denke, es hat alles mit der Illusion der Unendlichkeit zu tun - die Notwendigkeit, den Bildschirm als Teil der natürlichen Umgebung erscheinen zu lassen. Und um ehrlich zu sein, es funktioniert ziemlich gut für Benutzer, die Berichten zufolge die Displays intensiver finden.

Kein Wunder, dass dieser Trend sich auf die App-Branche ausgewirkt hat. Die Benutzeroberflächen werden schrittweise von gerahmten Konturen zu glatten Linien mit abgerundeten Kanten verschoben. Infolgedessen hat dies dazu beigetragen, dass Schnittstellen nahtlos in die Gerätebildschirme integriert werden können und anschließend eine rahmenlose Vollbildansicht erzeugt werden.

Da die Gerätehersteller diesen Trend in 2019 fortsetzen, erwarten wir, dass die Benutzeroberflächen die scharfen Kanten der alten Generation für glatte, abgerundete, rahmenlose Designs schrittweise verringern.

Micro-Animationen

Sie sind subtil und wirken manchmal unbedeutend. Die einfache Wahrheit ist jedoch Folgendes: Mikroanimationen in Benutzeroberflächen haben sich als äußerst leistungsfähig erwiesen, um Benutzer beim Navigieren zu unterstützen und zu unterstützen.

Haben Sie diese Schaltflächen gesehen, die ihre Farbe ändern, wenn Sie darüber scrollen oder darauf klicken? Sie haben definitiv auch Menü-Layouts gefunden, die auftauchen und zusätzliche Optionen anzeigen, sobald der Mauszeiger darauf landet. Nun, dies sind alles Beispiele für Mikroanimationen, die kleine visuelle Effekte erzeugen, die das Benutzererlebnis bereichern.

Mikro-Animationen

Da sich bewegende Elemente besonders gut für das Erzielen von Aufmerksamkeit eignen, werden sie von vielen Designern bereits genutzt, um Benutzer zu verschiedenen Umwandlungspunkten zu bringen. Dieser Trend ist mittlerweile so weit verbreitet, dass ich bereit wäre, ein Vermögen zu wetten, dass Sie nicht mehr als fünf Websites finden können, die noch keine Form von Mikroanimationen implementiert haben.

Dann hol dir das. Alle dominanten Webbrowser unterstützen derzeit Mikroanimationen auf PC und auf Mobilgeräten zufriedenstellend. Ich würde also sagen, dass der Trend bestehen bleibt, wenn wir uns 2019 nähern. Es wird erwartet, dass Benutzeroberflächen systematisch strukturierte visuelle Hierarchien haben.

Fazit

Alles in allem haben wir nur einige der bemerkenswertesten Trends behandelt. Wir werden bestimmt mit der Zeit mehr aufregendes sehen und wir können es kaum erwarten, dass 2019 den Ball ins Rollen bringt.

Was genau, glauben Sie, könnte sich als der wirkungsvollste UI-Designtrend herausstellen? Und welche anderen bemerkenswerten Trends würden Sie dieser Liste hinzufügen?

Headerbild mit freundlicher Genehmigung von Walid Beno

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.