Das Problem

Leider konzentrieren sich viele Designer darauf, trendige Benutzeroberflächen zu entwerfen, ohne an die Zielgruppe und die Ziele zu denken. Das Ergebnis sind komplexe, manchmal unrealistische und unpassende Benutzeroberflächen.
In diesem Artikel wird versucht, dieses Problem zu lösen, indem 7 Regeln für Designer und alle, die sich für die Gestaltung von Benutzeroberflächen interessieren, beschrieben werden, um funktionale und optisch ansprechende Webseiten zu erstellen. – Interface design

Fangen wir an!

Regel Nr. 1: Definieren Sie die Ziele der Seite

Auf einer Website sollte jede Seite ein Ziel erreichen, ein Problem lösen und dem Benutzer dienen. Um Ihr Design auf den richtigen Weg zu bringen, stellen Sie sich die folgenden Fragen:
Warum gestalte ich diese Seite? Diese Frage hilft Ihnen, das Problem zu verstehen, das der Entwurf lösen soll.
Was sind die Ziele der Seite? Wenn Sie die Ziele der Seite definieren, können Sie den Zweck der Seite besser verstehen. Das Geschäftsziel einer Seite kann zum Beispiel sein:
Ein Produkt oder eine Dienstleistung zu verkaufen;
Benutzer zur Anmeldung zu ermutigen;
Werbung für bestimmte Vorteile für die Benutzer.
Eine Seite kann aber auch mehrere Ziele haben. Achten Sie auf diesen wichtigen Aspekt.

Regel Nr. 2: Kennen Sie Ihr Publikum

Um eine geeignete Schnittstelle zu entwerfen, müssen Sie Ihre Zielgruppe kennen und diese während des gesamten Entwurfsprozesses im Auge behalten; dies wird Ihnen helfen, relevante Designentscheidungen zu treffen.
Um Ihre idealen Benutzer zu visualisieren, empfehle ich Ihnen, Empathiekarten zu erstellen, da sie eine Momentaufnahme der Benutzer sind, die sich auf das konzentrieren, was sie erreichen wollen. Im Allgemeinen können Sie sie anhand der Daten erstellen, die Sie während der Forschungsphase Ihres Projekts gesammelt haben.

Empathie-Map-Vorlage von Paul Boag (User Experience Revolution)
Stellen Sie bei der Gestaltung einer bestimmten Schnittstelle den Benutzer in den Mittelpunkt Ihrer Arbeit, indem Sie die folgenden Fragen beantworten:
Wer ist das Zielpublikum?
Was ist für den Benutzer auf dieser Seite wichtig?
Warum sollte der Benutzer diese Seite besuchen?
Welche Aufgaben will der Benutzer erfüllen?
Welche Fragen wird der Nutzer beim Besuch der Seite im Kopf haben?
Wie sollte ich diese mit meinem Design ansprechen?

Regel #3: Wählen Sie Ihre Calls-to-Actions

Um die Nutzer zu ihren Aufgaben zu leiten und sie zum Handeln zu bewegen, sollten Sie immer über die Aktionen nachdenken, die sie ausführen sollen.
Wenn Sie sich die folgende Frage stellen, haben Sie eine Vorstellung davon, welche Call-to-Actions Sie für Ihre Schnittstelle in Betracht ziehen sollten:
Was möchte ich wirklich, dass der Benutzer auf der Seite tut?
Im Allgemeinen verwende ich zwei Arten von Call-to-Actions, wenn ich eine Seite entwerfe. Der primäre Call-to-Action beispielsweise ist in der Regel der auffälligste und dient dazu, das wichtigste Ziel hervorzuheben. Das kann etwas sein wie “Anmelden”, “Registrieren”, “Kaufen” oder “Kontakt aufnehmen”.
Der sekundäre Call-to-Action ist dagegen weniger wichtig und wird verwendet, um eine weniger auffällige Aktion hervorzuheben. Um den Nutzer nicht zu verwirren, sollte jede Art von Call-to-Action einen eigenen visuellen Stil haben.

Startseite der Zeroheight-Website.
Auf der Zeroheight-Website beispielsweise besteht das Hauptziel des Unternehmens darin, den Nutzer dazu zu bewegen, sich anzumelden, damit er eine kostenlose Testversion des Tools nutzen kann. Diese Aktion wird dem Nutzer mit dem primären Call-to-Action “Try for free” angezeigt. Wenn der Nutzer jedoch noch nicht bereit ist, diese Aktion abzuschließen, hat er die Möglichkeit, auf die sekundäre Call-to-Action “Beispiele ansehen” zu klicken, um mehr über den Dienst zu erfahren. Wie Sie sehen können, haben beide Call-to-Actions einen unterschiedlichen visuellen Stil.

Regel Nr. 4: Inhalt zuerst

Arbeiten Sie von Anfang an mit dem echten Inhalt, um die Geschichte zu verstehen und zu wissen, wie Sie Ihre Seite strukturieren müssen. Wenn Ihnen der Inhalt nicht zur Verfügung steht, tun Sie Ihr Bestes, um ihn zu schreiben, damit Sie zumindest einen ersten Entwurf haben. Legen Sie immer zuerst den Inhalt fest und bauen Sie dann das Design um diesen herum auf.
Im Folgenden finden Sie eine Liste von Tipps, die Ihnen beim Verfassen überzeugender Inhalte helfen:
An wen richten Sie sich? Denken Sie an Ihre Zielgruppe, um die Inhalte entsprechend den Bedürfnissen der Nutzer zu verfassen.
Vermeiden Sie Ablenkungen: Schreiben Sie in einer Low-Fidelity-Umgebung, z. B. in einem Texteditor, um Ablenkungen durch visuelle Elemente oder Textformatierungen zu vermeiden;
Seien Sie menschlich: Verwenden Sie die zweite Person (Sie), wenn Sie sich auf den Nutzer beziehen, um Ihre Inhalte ansprechend und interessant zu gestalten.
Beantworten Sie die Fragen des Nutzers: Wenn der Nutzer eine Website besucht, hat er bestimmte Fragen im Kopf. Ihr Text sollte Antworten auf diese Fragen geben.
Seien Sie nicht langatmig: Seien Sie so prägnant und klar wie möglich.
Machen Sie Ihren Inhalt überschaubar: Gliedern Sie Ihren Inhalt durch Überschriften, Zwischenüberschriften, Absätze, ausziehbare Zitate und Listen. Denken Sie daran: Nutzer lesen Seiten nicht, sondern scannen sie.
Schreiben Sie in einfacher Sprache: Vermeiden Sie Akronyme, Jargon und komplexe Wörter, die den Nutzer zum Nachdenken anregen.
Vermeiden Sie Worthülsen: Gliedern Sie Ihren Text in kleine Abschnitte, damit er leichter zu verarbeiten und zu lesen ist. Große Textblöcke sind schwer zu verarbeiten.
Stimme und Tonfall: Überlegen Sie, welche Art von Emotionen Sie mit Ihrer Botschaft hervorrufen wollen. Zum Beispiel Freundlich? Ungezwungen? Förmlich? Ich werde diesen Punkt in Regel Nr. 6 weiter unten erläutern;
Vermeiden Sie Lorem Ipsum: Die Verwendung von Lorem-Ipsum-Text verleitet dazu, sich auf ein nichtssagendes Design zu konzentrieren, das später, wenn der eigentliche Inhalt vorhanden ist, wahrscheinlich entstellt wird.
Dennoch sollte der Inhalt immer an erster Stelle stehen. Wie Jeffrey Zeldman einmal sagte:

Regel Nr. 5: Erstellen Sie ein Wireframe für Ihre Schnittstelle

Um zu bestimmen, wie der Inhalt auf der Seite angeordnet werden soll, beginnen Sie damit, verschiedene Ansätze für das Layout auf dem Papier zu entwerfen, basierend auf den Zielen. So können Sie sich auf das Seitenlayout, die Inhaltsstruktur und die Interaktionen konzentrieren, ohne sich von Farben, Schriftarten oder grafischen Elementen ablenken zu lassen. Wann immer es möglich ist, arbeiten Sie mit dem Kunden, dem Stakeholder oder einem Mitglied Ihres Teams zusammen, um die Ideen zu teilen.

Um Ihr Design zu gestalten, sollten Sie sich zunächst die folgenden Fragen stellen:
Wie soll sich der Nutzer fühlen, wenn er mit der Website interagiert?
Was möchte ich, dass sie sagen?
Schreiben Sie außerdem eine kurze Liste von Wörtern, die den Eindruck vermitteln, den die Nutzer beim Anblick Ihrer Website haben sollen. Diese Attribute bestimmen die Persönlichkeit Ihres Designs und geben Ihnen Hinweise darauf, welche Schriftarten, Fotos, Farben und welches Layout Sie verwenden sollten.
Schließlich sollte der Text Ihrer Seite (z. B. Textkörper, Beschriftungen und Fehlermeldungen) um diese Attribute herum erstellt werden, um die richtige Stimme und den richtigen Ton wiederzugeben. Die Websites von Mailchimp und Smashing Magazine haben zum Beispiel eine visuelle Sprache und Texte, die ihre Persönlichkeit effizient vermitteln.

Die Persönlichkeit von Smashing Magazine wird durch die folgenden Attribute definiert: Verspielt, schrullig, formell, respektvoll und freundlich.

Die Persönlichkeit von MailChimp definiert sich über die Attribute: Verspielt, Nett und Freundlich.
Um mehr darüber zu erfahren, wie ich meine Designs gestalte, lesen Sie meinen Artikel “Wie Art Direction Ihnen hilft, meisterhafte Webschnittstellen zu erstellen”.

mehr zum Thema Wireframes

Regel #7: Mach es schön

Sobald Sie die Designrichtung der Website festgelegt haben, besteht Ihr nächster Schritt darin, die Seiten visuell attraktiv zu gestalten und ihre Funktionalität zu verbessern. Ein gelungenes visuelles Design wird den Benutzer positiv auf die gesamte Erfahrung mit der Website einstimmen und ihn davon überzeugen, dass die Website vertrauenswürdig und einfach zu bedienen ist.
Nachfolgend finden Sie wichtige Designprinzipien, die Sie berücksichtigen sollten, wenn Sie eine benutzerfreundliche und angenehm anzusehende Schnittstelle auf dem Bildschirm schaffen wollen.
Ausgewogenheit: Ein visuelles Gleichgewicht sorgt dafür, dass sich Ihre Schnittstelle richtig anfühlt und der Benutzer sich gerne damit beschäftigt. Symmetrie, Asymmetrie und radiale Ausgewogenheit sind drei Möglichkeiten, um Elemente in einem Design auszubalancieren.
Ausrichten: Die Ausrichtung hilft dabei, Ordnung zu schaffen, Ihre Elemente anzuordnen und visuelle Verbindungen herzustellen. Die Verwendung von Rastern kann Ihnen beispielsweise dabei helfen, eine gute Ausrichtung zu gewährleisten und die Lesbarkeit Ihres Schnittstellendesigns zu verbessern.
Kontrast: Der Kontrast trägt dazu bei, Abwechslung und visuelles Interesse in Ihrem Design zu schaffen, wenn er erfolgreich eingesetzt wird. Damit er wirksam ist, muss sich ein Element wie Form, Farbe, Größe, Gewicht oder Textur von einem anderen unterscheiden.
Konsistenz: UI-Elemente, die dieselbe Funktion und denselben Zweck haben, sollten auf dieselbe Weise gestaltet werden. Dadurch wird Ihre Benutzeroberfläche einfach zu bedienen sein.
Negativer Raum oder (Weißraum): Negativer Raum lenkt die Aufmerksamkeit auf den Inhalt, verbessert die Lesbarkeit und schafft eine visuelle Hierarchie. Außerdem kann er dem Benutzer helfen, den Inhalt der Seite leichter zu verarbeiten.
Farben: Verwenden Sie eine kleine Anzahl von Farben in Ihrer Palette, um einen “Regenbogeneffekt” zu vermeiden. Die von Ihnen gewählten Farben sollten die Persönlichkeit der Marke Ihrer Website widerspiegeln.
Schriftarten: Achten Sie darauf, dass Sie für Ihr Design eine gut lesbare Schriftart wählen. Wenn Sie mehr darüber erfahren möchten, wie Sie geeignete Schriftarten für Ihr Projekt auswählen, lesen Sie meinen Artikel “Großartige Benutzeroberflächen sind aus guter Typografie gemacht”.

Um dieses Thema zu vertiefen, empfehle ich Ihnen das Buch “Designing Visual Interfaces” von Kevin Mullet und Darell Sano. Auch das Verständnis der Gestaltprinzipien wird Ihnen helfen, visuell funktionierende Schnittstellen zu entwerfen.

Schlussfolgerung

Wie wir in diesem Artikel gesehen haben, erfordert ein erfolgreiches User Interface Design, dass Sie über den visuellen Aspekt hinaus denken. Ich hoffe, dass die Richtlinien, die ich in diesem Artikel dargelegt habe, Ihnen bei der Erstellung sinnvoller und einfach zu bedienender Webschnittstellen helfen werden.

Hast Du jetzt noch weitere Fragen? Schreib mir gerne eine Nachricht und ich helfe Dir!