Eurawest Logo
ui-websites

Wir sind alle auf Websites und Apps gestoßen, die uns zum Schreien bringen und unsere Geräte durch den Raum werfen. Zumindest glaube ich nicht, dass es nur mir so geht. Eine gute UI-Websites ermöglicht es den Benutzern auf ihrer einfachsten Ebene, die Aufgabe, für die sie auf die Website gekommen sind, mit Leichtigkeit und ohne Verwirrung auszuführen.

Großartige UI-Designer tun all dies und noch mehr. Benutzeroberflächen, die wirklich bemerkenswert sind, werden den Benutzer nicht nur erfreuen, indem sie die anstehende Arbeit erleichtern, sondern sie werden ihn auch visuell und erfahrungsgemäß begeistern.

Und es kann alles bedeuten, von einer eleganten, innovativen Animationsinteraktion, die die Aufmerksamkeit des Benutzers instinktiv auf eine bestimmte Funktion lenkt, bis hin zu einem übersichtlichen, sauberen Design und einer intelligenten Verwendung von Weißraum, die dem Benutzer ein Gefühl der Ruhe vermittelt, um nur einige Beispiele zu nennen.

Mit ein wenig Unterstützung durch die Nielsen Norman Group werde ich in diesem Beitrag das Thema angehen, was eine gute Benutzeroberfläche ausmacht, bevor ich mich mit acht Beispielen für außergewöhnliches Website-UI-Design und einer Begründung für meine Entscheidung befasse. Wählen Sie ein Beispiel aus dem Dropdown-Menü aus, um direkt darauf zuzugreifen, oder lesen Sie weiter.

Wie beurteilen Sie also, ob eine Benutzeroberfläche gut – oder sogar großartig – ist oder nicht? Sie können erkennen, ob eine Benutzeroberfläche ästhetisch schön ist, indem Sie sie betrachten, und Sie können sie auch verwenden, um zu sehen, ob es sich um eine intuitive, einfache Erfahrung handelt, indem Sie sie betrachten. Gibt es aber etwas Objektiveres? Wird es formalisierter?

Woran erkennt man, ob das Design der Benutzeroberfläche einer Website gut ist?

Ich persönlich greife immer wieder auf die Usability-Kriterien der Nielsen Norman Group zurück.

Erlernbarkeit, Effizienz, Einprägsamkeit, Fehler und Zufriedenheit sind die fünf Qualitäten, die Nielsen verwendet, um Usability zu charakterisieren.

Erlernbarkeit: Ist der Benutzer in der Lage, seine Aufgaben mit Leichtigkeit auszuführen?

Effizienz: Ist der Benutzer aufgrund der Schnittstelle in der Lage, Aufgaben zeitnah auszuführen?

Einprägsamkeit: Wie wahrscheinlich ist es, dass sich eine Person beim nächsten Besuch einer Website daran erinnert, wie sie diese nutzt?

Fehler: Welche Maßnahmen ergreift die Benutzeroberfläche, um die Wahrscheinlichkeit von Benutzerfehlern zu verringern, und wie ermöglicht sie Benutzern, ihre Fehler zu beheben?

Zufriedenheit: Ist der Benutzer damit zufrieden, wie das Design mit ihm interagiert?

Ein exzellentes User Interface sollte auch die Persönlichkeit der Marke repräsentieren, um sich von der Konkurrenz abzuheben und den Kunden ein angenehmes Erlebnis zu bieten. Werfen wir einen Blick auf einige Fälle, in denen Organisationen meiner Meinung nach das UI-Design ihrer Website perfektioniert haben.

1. Mittel

Medium, eine Lese- und Schreibplattform im Internet, ist ebenso schön wie nützlich. Diese Website macht mit ihrer begrenzten Verwendung von Farben, dem großzügigen Zeilenabstand und der gut ausgewählten Schriftart alles richtig.

Inhalt steht auf Medium an erster Stelle. Wenn sich ein Benutzer anmeldet, wird oben in der Artikelliste ein Kästchen mit der Aufschrift „Hier schreiben“ angezeigt, das es allen ermöglicht und ermutigt, sofort mit dem Schreiben zu beginnen. Benutzer erhalten eine fast leere weiße Seite, wenn sie auf den Link „Write a Story“ klicken, was Unordnung reduziert und nur einen klaren Ort bietet, an dem sie sich auf das Schreiben konzentrieren können.

Die Artikel sind in einem einspaltigen Stil angelegt, wodurch sie einfach zu lesen sind. Medium bietet den Lesern tatsächlich ein hervorragendes und nahtloses Veröffentlichungserlebnis, mit kleinen Details wie der voraussichtlichen Lesezeit und der Möglichkeit, bestimmte Artikel direkt hervorzuheben und zu kommentieren.

2. Jungfrau Amerika

Als es darum ging, Verbraucher bei der Flugbuchung zu unterstützen, war Virgin America einer der ersten – wenn nicht der erste – der die Bedürfnisse der Benutzer priorisierte. Die Buchung eines Fluges ist für die meisten Menschen eine Qual. Die Website von Virgin America hat ihre Benutzeroberfläche reduziert, um die Aufmerksamkeit auf die wichtigste Frage zu lenken: „Wohin möchten Sie gehen?“ Ähnlich wie eine Spülmaschine uns das Geschirrschrubben abnimmt, hat die Website von Virgin America ihre Benutzeroberfläche zurückgenommen, um die Aufmerksamkeit auf die wichtigste Frage zu lenken: „Wohin möchten Sie gehen?“ Der Benutzer kann den Buchungsprozess sofort beginnen, indem er das gesamte umgebende Material löscht.

Und obwohl die Website jetzt etwas alt erscheinen mag, verdient sie es, als Pionier im benutzerzentrierten Interface-Design in unsere Liste aufgenommen zu werden. Leider ist die Benutzeroberfläche nach der Kombination mit Alaska Airlines viel unübersichtlicher geworden.

Aber zurück zu dem, was die Website von Virgin America so großartig gemacht hat: Der Nutzer wurde während des gesamten Buchungsprozesses über eine Leiste am oberen Rand der Seite, die seine aktuellen Optionen anzeigte, an seine Entscheidung erinnert. Virgin hat es den Benutzern leicht gemacht, ihre Auswahl anzuzeigen und zu ändern, indem diese Informationen verfügbar bleiben, anstatt sich darauf zu verlassen, dass sie sich die Informationen selbst merken. Die Benutzeroberfläche sollte explizit dazu dienen, dass sich der Benutzer so schnell und effektiv wie möglich auf sein Ziel konzentrieren kann.

Virgin bemühte sich auch bewusst, sich ästhetisch von der Masse abzuheben. Helle Farben, Farbverläufe und unterhaltsame Bilder trugen dazu bei, eine unverwechselbare Markenidentität und -erfahrung zu etablieren, die sie von den Websites ihrer Konkurrenten unterscheidet.

3. Airbnb

Das UI-Design der Website von Airbnb zeichnet sich durch zwei Dinge aus: ein Zimmer zu reservieren und Vertrauen zwischen zwei völlig Fremden aufzubauen.

Ein wunderbares User Interface Design für eine Homepage findet man bei Airbnb.

Airbnb hat, wie Virgin America, großen Wert darauf gelegt, dass es einfach ist, einen Aufenthalt direkt vom Startbildschirm aus zu buchen. Ein Benutzer wird gleichzeitig und höflich begrüßt und angewiesen, seinen Aufenthalt zu arrangieren, dank der einzigartigen Verwendung von Konversationssprache, wie z. B. „Was können wir Ihnen bei der Suche helfen, Edward?“ unten und nützlichen Hinweistext.

Diese gesprächige Einladung, mit der Suche zu beginnen, ist eine schöne Methode, um die Stimme der Marke auszudrücken und gleichzeitig den Prozess der Suche nach einer Unterkunft zu vereinfachen. Bei dieser ersten Suche sind die einzigen Felder, die Sie ausfüllen müssen, das bevorzugte Reiseziel eines Benutzers sowie die Aufenthaltsdauer und die Anzahl der Gäste. Das Verfahren ist vereinfacht, angenehm und zugänglich, indem die zusätzlichen Filter auf die nächste Phase verschoben werden.

Eventuell anfallende Zusatzkosten sind auf den Angebotsseiten detailliert beschrieben. Für fast jeden Benutzer ist dies ein ziemlich einfaches und grundlegendes Verfahren. Die Schaltfläche „Buchung anfordern“ befindet sich direkt darunter und ist eine der hellsten Schaltflächen auf der Website. Sie fordert die Benutzer auf, darauf zu klicken, um ihre Reservierung abzuschließen.

Ein Benutzer wird zu einer neuen Checkout-Seite weitergeleitet, nachdem er die Buchung eines Veranstaltungsortes angefordert hat. Damit sich der Besucher nicht mehr an die Informationen der vorherigen Seite erinnern muss, befinden sich die Listen-, Preis- und Buchungsinformationen rechts auf der Seite.

Anstatt direkt zur Zahlung zu gehen, werden Sie auf der linken Seite aufgefordert, „Ihren Gastgeber zu begrüßen und ihm zu sagen, warum Sie ihn besuchen“. Indem diese Informationen vor den Zahlungsinformationen präsentiert werden, wird eine Diskussion initiiert und eine Beziehung zwischen dem Besucher und dem Gastgeber hergestellt sowie der Benutzer weiter in das Erlebnis eingebunden. Airbnb ist stolz darauf, Menschen zusammenzubringen und dem Dialog Vorrang vor Transaktionen zu geben – und die Benutzeroberfläche spiegelt dies wunderbar wider.

Der Text von Airbnb wurde sorgfältig ausgearbeitet, und überzeugende Fotos und Videos wurden verwendet, um sicherzustellen, dass die Benutzeroberfläche einen emotionalen Ton hat, der zur Vertrauensbildung zwischen Fremden beiträgt.

4. Bestboards

Nun, das ist ein Website-UI-Design mit Charakter. Benutzer werden mit einem aufregenden, unterhaltsamen und dynamischen Video des Produkts in Aktion begrüßt, sobald sie ankommen. Sie werden von einem einzigartigen Skateboard auf seiner eigenen Reise gefesselt, das sich dreht und wendet, multipliziert und sich dann in seine Bestandteile auflöst – es ist eine ziemliche Fahrt. Dann sehen Sie den Call-to-Action „Jetzt einkaufen“ in der Mitte Ihres Bildschirms und warten gespannt darauf, dass Sie ihn anklicken.

Sie sind erstaunt, neugierig und es ist an der Zeit herauszufinden, was hinter all diesem Selbstvertrauen steckt. Wenn Sie auf „Jetzt einkaufen“ klicken, werden alle Farben der Benutzeroberfläche entfernt, mit Ausnahme der leuchtend orangefarbenen Räder des Boards, und Sie sehen nur die wichtigsten Details: Bild, Höchstgeschwindigkeit, Reichweite, Preis, Lieferzeit und, natürlich „Jetzt kaufen“. Was hält dich zurück? Es gibt nicht viel.

Immer noch nicht überzeugt? Wenn Sie auf „Mehr erfahren“ klicken, erhalten Sie alle Informationen, die Sie benötigen, um von der Kontemplation zur Wahrnehmung zu gelangen: Bild-, Text- und visuelle Komponenten, die sich gegenseitig unterstützen, werden effektiv in wichtige Produktaspekte unterteilt. Positive Produktbewertungen und Finanzierungsoptionen verringern die Angst, indem sie das Gefühl der Gefahr verringern, wenn Sie nach unten scrollen. Insgesamt ist es ein hervorragendes Beispiel dafür, wie man verschiedene Bild- und Textteile zu einem zusammenhängenden Ganzen verschmelzen kann.

5. Dropbox

Dropbox ist mit Abstand eine der benutzerfreundlichsten Schnittstellen. Jeder, der schon einmal einen Computer benutzt hat, ist mit dem Ordner- und Dateiorganisationssystem vertraut. Es gibt nicht viel, was der normale Benutzer nicht sofort in Bezug auf die Erlernbarkeit erreichen kann. Weil es so üblich ist, werden die meisten Leute versuchen, Dateien per Drag & Drop von ihren Desktops auf die Website zu ziehen, ohne überhaupt zu verstehen, ob es machbar ist oder nicht.

Das einladende Auftreten von Dropbox, das durch amüsante Grafiken vermittelt wird, sorgt dafür, dass sich der Benutzer bei der Verwendung der Software wohl fühlt. Diese Verbesserung der Benutzeroberfläche lässt das Produkt wie einen alten Bekannten erscheinen, der darauf bedacht ist, Verbraucher bei ihren Anforderungen an die gemeinsame Nutzung von Dateien zu unterstützen.

Sie haben auch ein Blog-Design, das derzeit vielleicht das beste der Welt ist. Ich verstehe, dass eine Aussage wie diese eine gute Dosis Subjektivität enthält, aber ich habe selten eine so erfolgreiche Balance aus experimenteller Benutzeroberfläche, Benutzerfreundlichkeit und Multimedia-Inhalten an einem Ort gesehen.

Es schafft es, experimentell, innovativ und konsistent zu wirken, mit sequenzierten Farbpaletten und dynamischen Symbolen und exzellentem Artwork, das mit all den anderen wunderbaren Zeichnungen synchronisiert ist. Das ist schon eine Leistung! Schau mal!

Es gibt eine Vielzahl von Online-Farbpalettengeneratoren, die Sie ausprobieren können, wenn Sie Hilfe bei der Erstellung einer hervorragenden Farbpalette benötigen. Stellen Sie nur sicher, dass Sie einige der typischsten Farbpalettenfehler von UI-Designern vermeiden.

6. Tonhöhe

Pitch, ein mobiles und Online-Tool, mit dem Sie beeindruckende Präsentationen erstellen und verwalten können, ist ein designorientiertes Technologie-Startup. Sie wollen Sie davon überzeugen, dass sie für Präsentationen das tun können, was Slack für die Kommunikation erreicht hat. Darin sind sie auch wirklich gut.

Von dem Moment an, in dem Sie ihre Webseite besuchen, können Sie sehen, dass jeder einzelne Aspekt sorgfältig geprüft wurde. Schauen Sie sich den Slogan an. „All hands on deck“ ist ein vielseitiger Ausdruck, der sowohl an den Geist der Zusammenarbeit – ein wichtiger Aspekt von Pitch – als auch an das Technogeschwätz von „All Hands Meetings“ erinnert. Schließlich ist das Wort „Deck“ ein Wortspiel mit dem Wort „Präsentation“. Wer sich das ausgedacht hat, verdient einen goldenen Stern!

Die UI-Designer von Pitch leisten hervorragende Arbeit, indem sie den Benutzer durch ein Beispiel führen, wie seine Reise aussehen würde, wenn er die App wirklich verwenden würde. Sie haben eine fantastische Mischung aus sauber und gründlich erreicht, indem sie die Unordnung minimiert und gleichzeitig sichergestellt haben, dass die wichtigsten Produktelemente abgedeckt sind, sodass die Website wirklich verschwindet.

Mit ihrer umfangreichen Verwendung von Bildern lehnt sich ihre Website an moderne Designtrends an, vermeidet jedoch das flache, karikaturartige Charakterdesign, das Sie heutzutage auf so vielen Websites sehen. Die Pixar-ähnliche Verwendung von 3D-Charakterdesign ist auf diesem Markt selten und daher leicht erkennbar – zeigen Sie mir morgen eine Pitch-Hand, und ich wette, Sie werden sich an die Firma erinnern.

Die Vorteile des Benutzeroberflächendesigns ihrer Website enden hier nicht. Sie haben auch einige clevere, subtile dynamische Komponenten und Animationen eingebaut, die dem Benutzer helfen, von einer Bildlaufleiste zur nächsten zu gelangen. Sie lenken Ihre Aufmerksamkeit sanft von rechts nach links, und der verzögerte Start der Animationen lädt Sie ein, bei jeder Produktfunktion und jedem Vorteil innezuhalten. Sie werden ein Gefühl von leichter Vertrautheit, Spaß und Professionalität verspüren, und das Halten von Präsentationen wird keine lästige Pflicht mehr sein!

7. Frank und Eiche

Frank and Oak, ein Bekleidungsunternehmen mit starkem Schwerpunkt auf Medien und Lifestyle, setzt seine Benutzeroberfläche ein, um die Aufmerksamkeit und Stilpräferenzen seiner Verbraucher zu wecken. Während das Online-Kauferlebnis aus UX-Sicht eher einfach ist, kombiniert das Unternehmen starke Fotos und gestochen scharfen, serifenlosen Text, um die Persönlichkeit der Marke und ihre Zielgruppe zu vermitteln. Trotz einiger starker, verkaufsorientierter Marketingbotschaften – 20 Prozent Rabatt auf der gesamten Website – ist ihr Markenimage vom allerersten Berührungspunkt des Unternehmens an fest verankert. Es ist cool, es ist sauber und es ist ganz nah und persönlich.

Die Produktseite ist auf zwei Elemente zentriert, nachdem Sie auf ein Element geklickt haben: die Produktfotografie und der Call-to-Action-Button, da dies die einzigen farbigen Komponenten auf der Seite sind. Die Schaltfläche „In den Warenkorb“ funktioniert erst, wenn eine Größe ausgewählt wurde, was eine nette Geste ist. Wenn ein Benutzer zuerst versucht, die Taste zu drücken, verblasst die Farbe und der Text ändert sich in „Wählen Sie Ihre Größe“.

Das erstmalige Ausfüllen persönlicher Informationen während des Bestellvorgangs ist nie eine angenehme Erfahrung. Es ist zwangsläufig ein umständliches Verfahren – oder zumindest hat niemand herausgefunden, wie es Erstkäufern von Eigenheimen leichter gemacht werden kann. Frank und Oak hingegen leisten hervorragende Arbeit bei der Unterstützung der Benutzer, indem sie das Formular in kleinere Eingabefelder aufteilen und so die kognitive Belastung der Benutzer verringern. Ja, es ist ordentlich und übersichtlich.

Sie haben wahrscheinlich herausgefunden, dass dies einige meiner wichtigsten Anforderungen für ein erfolgreiches UI-Design sind.

Insgesamt ist ein Großteil der zugrunde liegenden Benutzeroberfläche – und definitiv die UX – von Frank und Oak auf vielen anderen Websites zu finden, aber es ist die Art und Weise, wie sie eine logische, einfache Benutzererfahrung mit einer starken, leistungsstarken und sauberen Benutzeroberfläche kombiniert haben ein straffes, ehrgeiziges Markenimage und eine Botschaft, die dies hervorhebt.

Das, nehme ich an, ist das Fazit der siebten Seite auf der Liste: Eine schöne Benutzeroberfläche kann nur großartig sein, wenn sie von einer starken UX und einer gut durchdachten, selbstbewussten Botschaft begleitet wird.

Oh, und habe ich ihren fantastischen Blog – oder ihr Magazin – erwähnt? Sie haben definitiv die Kunst gemeistert, den Medien- und Lifestyle-Bereich eines Unternehmens zu etablieren, und sind so weit gegangen, ein Magazin im Zeitungsstil zu schaffen, das den Formen von Kioskzeitungen huldigt und gleichzeitig zeitgenössische, mutige, ausgeschnittene und eingefügte Grafiken verwendet. Es ist fantastisch!

8. Semplice-Labors

Semplice Labs, ein WordPress-Portfolio des berühmten Designers Tobias Van Schneider, der für Spotify, BMW, Google und sogar die NASA entworfen hat, ist eine meiner persönlichen Lieblingsinstanzen einer schönen und nützlichen Benutzeroberfläche. Zumindest weiß er, was er tut.

Der Inhalt hier spricht die Leser wirklich an und ermutigt sie, mehr über Semplice in einer starken, selbstbewussten Sprache zu erfahren. Der Rest der Benutzeroberfläche der Website ist eine Veranschaulichung dessen, was Produktbenutzer mit ihren eigenen Websites tun können. Benutzer werden sich an diese Benutzeroberfläche erinnern und sie mögen, wegen der flüssigen Animationen und nahtlosen Übergänge zwischen den Seiten.

Fazit

Dies sind nur einige meiner bevorzugten UI-Designbeispiele für Websites. Eine funktionale, reibungslose Benutzeroberfläche zu erstellen, ist ein wichtiger Aspekt, um eine gute Beziehung zu einem Benutzer aufzubauen, ganz zu schweigen davon, sicherzustellen, dass sie für den Benutzer konzipiert ist. Um ein Produkt zu erstellen, das die bestmögliche Benutzererfahrung bietet, ist es am besten, sich beim Entwerfen oder Evaluieren einer Benutzeroberfläche auf die Usability-Richtlinien von Nielsen zu beziehen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert