Interface Design

von Feb 4, 20220 Kommentare

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.

Du hast Fragen?

Ich stehe Dir gern zur VerfĂŒgung.

Kreative Kommunikation Interface Design image00002 scaled

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

interface design


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!

Philipp Barkmann

Philipp Barkmann

Veröffentlicht: Feb 4, 2022
Postkategorie: Digitale Sichtbarkeit
w

Du hast Fragen?

Ich freue mich darauf, Dich unterstĂŒtzen zu dĂŒrfen. Schreibe mir einfach oder rufe mich direkt an:

Bis gleich?
Ich bin gern fĂŒr Dich da!

Einfach ausfĂŒllen und "zack" gibtÂŽs eine Antwort.

DatenschutzerklÀrung

Kontakt:

Andreas-Haselbacher-Straße 19
30900 Wedemark
Tel.: 05130 / 97 45 07 - 0
Mobil: 0172 / 754 83 90

Weitere Infos zu mir

Diese Website ist durch reCAPTCHA geschĂŒtzt und es gelten die Datenschutzbestimmungen und 
Nutzungsbedingungen von Google.

Weitere Artikel

Seo Techniken

Seo Techniken

Das Schwierigste an der Suchmaschinenoptimierung ist ihre UnbestÀndigkeit. Google aktualisiert seinen Algorithmus 500-600 Mal pro Jahr. Das bedeutet, dass es an jedem einzelnen Tag des Jahres mindestens eine Aktualisierung gibt. Selbst SEO-Spezialisten, die sich ihr...

Webdesign Fehler

Webdesign Fehler

7 hĂ€ufige Fehler beim Website-Design (und wie man sie Kunden erklĂ€rt) Manchmal sprechen Designer und Kunden nicht ganz dieselbe Sprache. - Webdesign Fehler Diese Barriere kann ein echtes Problem sein, wenn ein Kunde ein Problem Ă€ußert und Sie nicht in der Lage sind,...

Smart Bidding

Smart Bidding

3 Wege zur Verbesserung der Leistung von Smart Bidding bei Google Ads InhaltMöglichkeit 1: Offline-Konvertierungsimport (OCI)Option 2: Umrechnungswert-AnpassungenOption 3: Umrechnungswertregeln (beta)Fazit Gebotsautomatisierung ist eine der grĂ¶ĂŸten potenziellen...

Online Marketing Fehler

Online Marketing Fehler

Wir leben im Zeitalter des Internets, und das bedeutet, dass sich auch Ihr Unternehmen darauf einstellen muss. Die Werbung fĂŒr Ihr Unternehmen, Ihre Marke und Ihr Produkt oder Ihre Dienstleistung kann vom digitalen Marketing profitieren. Es gibt ein Publikum, das Sie...