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!

Sven

Sven

Berater f√ľr digitale Sichtbarkeit. Jahrgang ¬ī71 "Onliner der ersten Stunde"
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

Mobile Marketing Hannnover

Mobile Marketing Hannnover

Mobile Marketing Hannover : Die Zukunft des Marketings Mobile Geräte sind heutzutage allgegenwärtig. Laut einer Studie des Pew Research Centers nutzen etwa 97% der Amerikaner ein Mobiltelefon. Täglich verbringen wir durchschnittlich mehrere Stunden damit, auf unseren...

Seo Strategie

Seo Strategie

Seo Strategie: In der heutigen digitalen Welt ist es f√ľr Unternehmen unerl√§sslich, eine effektive SEO-Strategie zu haben. Suchmaschinenoptimierung (SEO) ist ein komplexer Prozess, der darauf abzielt, die Sichtbarkeit einer Website in Suchmaschinenergebnissen zu...

Performance Marketing Hannover

Performance Marketing Hannover

Performance Marketing Hannover : Eine Einf√ľhrung In der heutigen Zeit, in der das Internet und die sozialen Medien eine wichtige Rolle im Leben vieler Menschen spielen, ist das Performance Marketing zu einem wichtigen Instrument f√ľr Unternehmen geworden, um ihre...

Affiliate Marketing Hannover

Affiliate Marketing Hannover

Affiliate Marketing Hannover - Wie man als Affiliate-Partner Geld verdienen kann Affiliate Marketing ist ein Modell des Online-Marketings, bei dem eine Person oder ein Unternehmen Produkte oder Dienstleistungen eines anderen Unternehmens bewirbt und daf√ľr eine...