Was ist modernes UI-Design? 10 Tipps und Beispiele

Möglicherweise können Sie die Ästhetik einer modernen Benutzeroberfläche nicht auflisten, aber Sie wissen genau, wann Sie auf einer Website landen, auf der keine verwendet wird. Es fühlt sich einfach veraltet an.

Modernes UI-Design hilft dabei, Glaubwürdigkeit für Ihre Website oder Marke zu schaffen, da es einen Stil hat, der zu den meisten Menschen passt, um eine aktuelle visuelle Ästhetik zu sein. Dies kann visuelle Trends, die Anpassung an Usability-Standards und -Muster sowie die Verwendung von Entwicklungstechniken umfassen, die für die heutigen Benutzer geeignet sind.

Hier werden wir uns Elemente ansehen, die Sie in modernen Benutzeroberflächen finden. Hoffentlich scheinen die meisten dieser Beispiele ziemlich vertraut zu sein, aber wenn nicht, ist es möglicherweise an der Zeit, eine kleine Webaktualisierung zu planen.

1. Konsistenz

Eine konsistente Benutzeroberfläche ist einfach zu bedienen und zu verstehen. Die Leute müssen nicht so lange darüber nachdenken, wie sie mit Ihrer Website umgehen sollen, damit sie mit größerer Wahrscheinlichkeit verwendet wird.

Sie möchten, dass Elemente innerhalb des Designs miteinander konsistent sind

Es ist möglicherweise am besten, auf zwei Arten über Konsistenz nachzudenken.

Zunächst soll die Benutzeroberfläche von einem Gerät zum anderen konsistent aussehen und sich konsistent verhalten. (Deshalb ist Responsive Design so wichtig.)

Zweitens möchten Sie, dass Elemente innerhalb des Designs miteinander konsistent sind - Schaltflächen, die dieselbe Farbe, Größe und beispielsweise gemeinsame Positionen haben - und allgemeinen Verwendungsmustern folgen. Diese Art der Designkonsistenz macht Ihre Benutzeroberfläche modern und benutzerfreundlich.

Die Interaction Design Foundation sagt, dass die Konsistenz der Benutzeroberfläche wichtig ist, weil:

• Dies kann die Lernzeit verkürzen: Konsistenz begrenzt die Anzahl der Darstellungen von Aktionen und Vorgängen und stellt sicher, dass Benutzer nicht für jede Aufgabe neue Darstellungen lernen müssen.
• Dies kann Verwirrung beseitigen: Benutzer wenden in der Regel Regeln an, die sie außerhalb Ihrer Website oder Ihres Produkts kennengelernt haben, und bringen eine Reihe ihrer eigenen Erwartungen ein. Wenn wir das wissen, sollten wir uns darüber im Klaren sein, ob wir Verwirrung und Entfremdung verursachen oder nicht, wenn wir von Designstandards und Konventionen abweichen.

2. Farbverläufe und Tiefe

Moderne Benutzeroberflächen verwenden Farben, um Tiefe zu erzeugen und den Menschen zu helfen, die Interaktion mit dem Design zu verstehen.

Farbverläufe und subtile Schlagschatten sind beliebte Techniken. Die Verwendung von Farbverläufen ist eher im Trend und bietet ein interessantes Bild, um die Aufmerksamkeit auf sich zu ziehen. Schlagschatten sind für das allgemeine Auge nicht so offensichtlich, heben jedoch scheinbar Elemente vom Hintergrund ab, um die Interaktion zu fördern.

3. Zweckmäßige Animation

Animation ist fast überall, wenn es um Website-Design geht, was es noch wichtiger macht, dass diese Technik nicht überbeansprucht wird.

Moderne Schnittstellen animieren Elemente nur dann, wenn es einen Grund dafür gibt. Eine gezielte Animation kann einem Benutzer helfen, auf eine Schaltfläche zu klicken, Navigationshinweise bereitzustellen, Anweisungen zu geben oder als einfache, entzückende Funktion zu dienen.

Denken Sie über das Ziel des animierten Elements und dessen Funktionsweise als Teil des Gesamtdesigns nach, um sicherzustellen, dass Ihre Website-Animationen einen Zweck haben und keine reine Dekoration sind.

4. Einfach zu lesende Schriftgrößen

Sie haben wahrscheinlich bemerkt, dass die Standardgrößen für Textkörper langsam gestiegen sind. Augen überall danken dir.

Winzige, fast unleserliche Schriftgrößen sind eines der ersten Dinge, die Ihre Benutzeroberfläche datieren. Die Menschen haben sich an größere, besser lesbare Schriften gewöhnt.

Dies kann ein Texttext mit 14 bis 16 Punkten auf Ihrer Website sein. Obwohl es sich zunächst groß anfühlt, ist diese Größe ansprechender, wird in einen mobilen Bildschirm mit lesbarer Größe umgewandelt und ist mittlerweile zum Standard geworden. (Vergessen Sie nur nicht, den Zeilenabstand ebenfalls auf ein geeignetes Maß einzustellen.)

5. Sprachschnittstellen

Verfügt Ihre Website über Informationen, die Benutzer leicht finden können, wenn sie mit Sprache kommunizieren? Interaktive Sprachschnittstellen sind möglicherweise eines der am schnellsten wachsenden Segmente des Benutzeroberflächendesigns.

Sie können Ihre Website so gestalten, dass Sprachschnittstellen und Personen leichter auf Ihre Inhalte zugreifen können. Stellen und beantworten Sie häufig gestellte Fragen, stellen Sie wertvolle Informationen in kleinen Blöcken bereit, verwenden Sie Beispiele, um eine Absicht zu erstellen, und verwenden Sie visuelles Feedback, wenn die Benutzeroberfläche zuhört.

Die Nachricht der Interaction Design Foundation lautet:

Um großartige Sprachbenutzeroberflächen zu entwerfen, müssen Sie eine elegante Möglichkeit finden, Benutzern fehlende Informationen darüber bereitzustellen, was sie tun können und wie sie es tun können, ohne sie zu überfordern.

6. Nahtlose Interaktion

Website-Interaktionen müssen auf einem einzelnen Gerät sowie von einem Gerät zum anderen nahtlos sein.

Benutzer möchten die gleiche Erfahrung, wenn sie von Seite zu Seite wechseln. Sie möchten auch, dass eine Website auf ihren Desktop-Computern und Telefonen gleich aussieht und funktioniert.

Alle modernen Benutzeroberflächen halten sich an diese Richtlinien. Wenn Ihre Website dies nicht tut, müssen Sie Ihr Website-Modell überdenken und sofort planen.

7. Intelligente Formulare / Eingaben

Vorbei sind die Zeiten massiver Online-Formulare, in denen zu viele Informationen angefordert werden. Moderne Schnittstellen verwenden Kurzformulare, in denen nur gefragt wird, was erforderlich ist, um die Zeit (und die kurze Aufmerksamkeitsspanne) jedes Benutzers zu respektieren und zu berücksichtigen.

Moderne Schnittstellen verwenden intelligente Formulare und Eingaben. Dies bedeutet, dass nur die Informationen angefordert werden, die Sie benötigen (verwenden Sie gegebenenfalls die Wenn-Dann-Logik für Formularfelder) und Daten validieren. Letzteres ist insbesondere bei kleineren Geräten so wichtig, weil es leicht ist, Fehler zu tippen und Fehler zu verursachen. Die Datenvalidierung teilt dem Benutzer sofort mit, dass etwas nicht stimmt, und verhindert später im Prozess Frustration.

8. Sicher und vertrauenswürdig

Dies ist fast selbstverständlich, aber Ihre Website muss sicher und vertrauenswürdig sein.

Benutzer suchen beim Einkaufen und Surfen häufig nach der sicheren Sperre, was SSL und HTTPS zu einem Muss macht. Alles andere ist so 2010.

9. Anpassbar und personalisiert

Mehr Schnittstellen bieten anpassbarere, personalisierte Dienste für Benutzer.

Die Verwendung von Tools, die den Standort des Benutzers für die Sprach- und Währungsunterstützung bestimmen, Cookies, die einige Tage lang Einkaufswagen halten, oder Anmeldungen, mit denen Benutzer eine persönlichere Erfahrung erstellen können, sind die Norm.

Anpassung und Personalisierung werden zu einem Differenzierungspunkt, der den Nutzern hilft, Ihre Website gegenüber anderen auszuwählen, wenn sie die Wahl haben. Diese kleinen Details können einen großen Unterschied machen.

10. Sich weiterentwickeln

Sie müssen ein Design haben, das sich im Laufe der Zeit weiterentwickeln und ändern kann.

Früher haben wir gesagt, dass Sie alle drei bis fünf Jahre ein neues Website-Design benötigen. Jetzt müssen Sie möglicherweise alle 6 Monate eine Website-Optimierung vornehmen, um frisch und relevant zu bleiben. (Die Technologie bewegt sich so schnell.)

Von kleinen Designänderungen bis hin zu Aktualisierungen der Benutzerfreundlichkeit ist es wichtig, auf das zu achten, was Sie auf anderen Websites sehen, und darüber nachzudenken, wie diese Änderungen und Fortschritte für Sie selbst von Vorteil sein können.

Fazit

Während es auf den ersten Blick so scheint, ist das Erstellen einer modernen Benutzeroberfläche kein Hexenwerk. Es ist eher eine Untersuchung des Benutzerverhaltens und der Muster und der Designentscheidungen, die sie beeinflussen.

Es gibt eine feine Linie zwischen Trend und modernem Interface-Design. Letzteres neigt dazu, länger zu bleiben und ist etwas mehr in Funktion und Benutzerfreundlichkeit verwurzelt, wobei Ersteres meist ästhetisch ist.

Beginnen Sie mit der Einstellung, dass sich das Webdesign ständig ändert. Denken Sie dann an positive und unvergessliche Web-Erlebnisse und berücksichtigen Sie diese Techniken bei zukünftigen Überarbeitungen Ihrer Benutzeroberflächen.