Grundsätze des Webdesigns

Facebook
Twitter
LinkedIn
Pinterest

Gestaltungsgrundsätze

Aus einem Artikel von Elementor (WordPress)

Die Designprinzipien basieren auf Beiträgen von Fachleuten aus so unterschiedlichen Bereichen wie Psychologie und Verhaltenswissenschaften, Physik, Ergonomie und anderen. Im Allgemeinen handelt es sich bei diesen Grundsätzen um flexible Gesetze, die den Designern bei der Herstellung effektiver Endprodukte helfen. Sie wirken sich darauf aus, welche Elemente ausgewählt oder verworfen werden und wie diese Merkmale organisiert werden.

PWD-No-time

Table of Contents

Designprinzipien machen es einfach, eine ästhetisch ansprechende und effiziente User Experience (UX) und User Interface (UI) zu schaffen. Ihre korrekte Umsetzung fördert die Konversionen. Pipedrive zum Beispiel steigerte die Zahl der Anmeldungen um 300 Prozent, nachdem es eine wichtige Best Practice implementiert hatte: Simplizität.

Die Einbeziehung von Designprinzipien in Ihre Projekte verbessert die Benutzerfreundlichkeit Ihrer Websites, beeinflusst deren Wahrnehmung und ermöglicht es dir letztendlich, die besten Entscheidungen sowohl für deine Benutzer als auch für dein Webdesign-Unternehmen zu treffen.

Grundsätze effektiver Website-Gestaltung

Es gibt viele Definitionen von Gestaltungsgrundsätzen im Internet, und verschiedene Designer und andere Fachleute interpretieren sie je nach ihren Bedürfnissen. Es gibt jedoch einige bewährte Verfahren, die unabhängig vom Kontext gelten.

Nachfolgend findest du einige der beliebtesten Grundsätze für die Gestaltung von Websites, die von Wissenschaftlern und Usability-Experten vorgeschlagen wurden.

Die 10 Gesetze der Benutzererfahrung (UX)

Die UX-Gesetze sind eine Sammlung von Designprinzipien von Jon Yablonski – Senior Product Designer bei General Motors – aus seinem Buch «Laws of UX: Using Psychology to Design Better Products & Services». Es handelt sich um solide Richtlinien, die jeder Designer berücksichtigen sollte. Hier sind einige der wichtigsten Prinzipien, die Yablonski auflistet:

1. Mach die wichtigsten Aktionsziele leicht zu erreichen (Fitts' Gesetz)

Das Fitts’sche Gesetz geht auf die Arbeit des Psychologen Paul Fitts zurück, der das menschliche motorische System untersucht hat. Dieses Gesetz besagt, dass sich die Entfernung und Größe eines Zielelements direkt auf die Zeit auswirkt, die ein Nutzer benötigt, um zu diesem zu navigieren und mit ihm zu interagieren. Das bedeutet, dass du deine wichtigsten Aktionsziele leicht erreichbar machen solltest.

Wenn du mehrere Ziele hast, sollte außerdem genügend Platz zwischen ihnen sein. Wenn du zum Beispiel eine Website für Mobiltelefone entwirfst, müssen anklickbare Symbole groß genug sein, um sie anzutippen,

Der zusätzliche Abstand zwischen den Schaltflächen stellt sicher, dass die Nutzer nicht versehentlich auf das falsche Symbol klicken. In der Regel sollte der klickbare Bereich für mobile Designs mindestens 40 x 40 Pixel groß sein.

2. Reduzierung der Auswahlmöglichkeiten der Benutzer auf ein Minimum (Hick's Law)

Wenn du jemals so überwältigt warst von der Anzahl der Möglichkeiten, die du vor dir hattest, dass du Schwierigkeiten hattest, dich zwischen ihnen zu entscheiden, wirst du verstehen, dass zu viele Optionen für die Benutzer paralysierend sein können. Das ist das Hick’sche Gesetz auf den Punkt gebracht. Je mehr Auswahlmöglichkeiten zur Verfügung stehen und je komplexer die einzelnen Optionen sind, desto mehr Zeit brauchen die Benutzer, um eine Entscheidung zu treffen.

Das Hick’sche Gesetz, auch Hick-Hyman-Gesetz, ist nach William Edmund Hick und Ray Hyman benannt, zwei Psychologen, die den Zusammenhang zwischen der Anzahl der einer Person dargebotenen Reize und ihrer Reaktionszeit untersucht haben.

Dieser Grundsatz bedeutet, dass du Unübersichtlichkeit vermeiden und deinen Nutzern nur die wichtigsten Optionen zeigen solltest, die sie benötigen. Die meisten Websites bieten beispielsweise eine klare Auswahl zwischen «Speichern» oder «Abbrechen» und «Ja» oder «Nein», wenn eine Aktion bestätigt wird.

Dieses Gesetz lässt sich auch auf die Straffung deines Navigationsmenüs, die Anzeige von Produkten oder Dienstleistungen und andere Elemente des Website-Designs anwenden.

3. Ortsbezogene Elemente in gemeinsamen Räumen ( Gesetz der gemeinsamen Region)

Das Gesetz der gemeinsamen Region, eines von mehreren Gesetzen aus der Schule der Gestaltpsychologie, besagt ganz einfach, dass Elemente auf einer Seite, die eng gruppiert sind, als miteinander verbunden wahrgenommen werden. 

Du kannst dies mit Rahmen, Hintergründen oder Abständen erreichen. So werden zum Beispiel Navigationslinks in der Regel zu einem Menü zusammengefügt:

Bei diesem Prinzip geht es vor allem um die Komposition und die Abstände, und du solltest es mit Bedacht einsetzen. Ein weiteres Beispiel: Auf der Startseite eines Blogs, auf der die Vorschauen chronologisch angezeigt werden, sollten der Titel, die Beschreibung und das Bild jedes Beitrags visuell gruppiert werden.

4. Vertraute Szenarien und Logik verwenden (Jakobs Gesetz)

Das von Jakob Nielsen, einem Mitbegründer der Nielsen Norman Group, geprägte Jakobsgesetz spricht sich für die Verwendung vertrauter Szenarien und Logiken bei der Entwicklung von Benutzeroberflächen aus. Ihre Nutzer werden im Allgemeinen erwarten – und bevorzugen -, dass deine Website auf die gleiche Weise funktioniert wie andere, mit denen sie bereits vertraut sind. 

Jeder von uns baut ein mentales Modell auf, das die Konventionen rund um Websites berücksichtigt. So können sich deine Benutzer auf das konzentrieren, was sie erreichen wollen, anstatt sich mit einer ungewohnten Benutzeroberfläche vertraut zu machen.

Das bedeutet, dass du dich an das halten solltest, was sie bereits kennen, und sie nicht mit ungewohnten Szenarien überforderst. Ein «Burger»-Symbol z. B. öffnet normalerweise eine Art von Menü:

Wenn du dieses Symbol in deinem Design verwendest, sollte es sich so verhalten, wie deine Benutzer es erwarten.

5. Einfache Strukturen verwenden und komplizierte Formen vermeiden (Gesetz der Prägnanz)

1910 beobachtete der Psychologe Max Wertheimer an einem Bahnübergang eine Reihe von Lichtern, die auf- und abblinkten. Obwohl es so aussah, als ob sich ein einzelnes Licht zwischen den Glühbirnen auf dem Bahnübergang bewegte, handelte es sich in Wirklichkeit um eine Reihe von Glühbirnen, die ein- und ausgeschaltet wurden.

Diese Beobachtung bildete die Grundlage für eine Reihe von Prinzipien, wie wir Objekte visuell wahrnehmen. Eines davon ist das Gesetz der Prägnanz, das empfiehlt, einfache Strukturen zu verwenden und komplexe Formen zu vermeiden.

Deine Benutzer werden dein Design mit dem geringstmöglichen kognitiven Aufwand interpretieren. Komplexe Bilder werden in ihrer einfachsten Form wahrgenommen. Die Verringerung der kognitiven Überlastung sollte ein wichtiger Bestandteil Ihrer Designziele sein.

Du kannst dieses Prinzip anwenden, indem du Elemente in relevanten Blöcken, Spalten und Abschnitten gruppierst und ausrichtest, anstatt sie über die ganze Seite zu verteilen: 

Einfache Strukturen und Elemente lassen sich leichter interpretieren.

6. Gruppierte Elemente nahe beieinander platzieren (Gesetz der Annäherung)

Das Gesetz der Annäherung, ein weiteres der Gestaltpsychologie zugeschriebenes Prinzip, besagt, dass Elemente, die sich nahe beieinander befinden, als eine Gruppe wahrgenommen werden. Dies verringert auch die kognitive Überlastung deiner Nutzer, da sie die Informationen leichter erfassen können.

Bei der Anwendung dieses Prinzips geht es vor allem darum, die Abstände klug zu nutzen. Die Elemente, die eine Gruppe bilden, sollten näher beieinander liegen als die Elemente verschiedener Gruppen.

In vielen Kopfzeilen von Websites sind die Menülinks gruppiert, während die Calls-to-Action (CTAs) an einer Seite ausgerichtet oder irgendwie von den Navigationselementen getrennt sind.

Dies ist eine perfekte Veranschaulichung des Gesetzes der Nähe. Da Menülinks und CTAs unterschiedliche Funktionen haben, werden sie visuell getrennt.

7. Ähnlichkeit verwenden, um Elemente in Gruppen zusammenzufassen (Ähnlichkeitsgesetz)

Ein weiteres Gestaltgesetz, das Gesetz der Ähnlichkeit, besagt, dass ähnliche Objekte als verwandt wahrgenommen werden, unabhängig davon, wie viel Abstand zwischen ihnen besteht. Dies ist die Grundlage für die Gestaltung von Funktionsgruppen mit ähnlichen Farbschemata, Symbolen und Texten.

Man sollte sich dieses Prinzip zunutze machen, um zusammenhängende Inhalte durch eine ähnliche und konsistente Gestaltung in Gruppen zusammenzufassen.

8. Verbinde Designelemente, um ihre Beziehung zueinander zu verdeutlichen (Gesetz der einheitlichen Verbundenheit)

Das ebenfalls aus der Gestaltpsychologie stammende Gesetz der gleichmäßigen Verbundenheit besagt, dass visuell verbundene Elemente als zusammengehöriger wahrgenommen werden als Elemente, die überhaupt nicht verbunden sind. Eine Anwendung dieses Gesetzes ist die Verwendung eines Fortschrittsanzeigers in deinem Onboarding- oder Checkout-Prozess.

Dies schafft eine visuelle Verbindung, die zeigt, dass alle Schritte Teil desselben Prozesses sind.

9. Inhalt in kleine Stücke aufteilen (Millersches Gesetz)

Das Millersche Gesetz ist nach dem Kognitionspsychologen George Miller benannt, der behauptete, dass ein durchschnittlicher Mensch nur fünf bis neun Informationen in seinem Kurzzeitgedächtnis behalten kann. Dieser Grundsatz empfiehlt, den Inhalt in kleine Einheiten zu unterteilen. So werden beispielsweise Kreditkartennummern in der Regel in Vierergruppen aufgeteilt, um den Menschen die Analyse zu erleichtern.

Dieses Gesetz unterstreicht die Bedeutung einer guten Designplanung. Je größer eine Anwendung wird und je mehr Funktionen sie erhält, desto schwieriger wird die Benutzung. Darum sollte man bei der Planung der Benutzeroberfläche darauf achten, dass sie neue Funktionen aufnehmen kann, aber dennoch einfach zu bedienen ist.

Eine weitere Möglichkeit, diese Regel anzuwenden, besteht darin, die Menge der Inhalte, die der Nutzer zu einem bestimmten Zeitpunkt wahrnehmen muss, zu begrenzen. Teile den Inhalt in einzelne Abschnitte auf, anstatt ihn in einem einzigen Block zu zeigen.

Orientiere dich bei der Gestaltung außerdem an den gängigsten Bildschirmgrößen und kontrolliere, wie viele Elemente die Nutzer auf einen Blick sehen.

Sei kritisch mit deinem Design. Wenn du denkst, dass ein Abschnitt zu viel Inhalt enthält, verschiebe ihn in einen anderen und trenne die Elemente logisch voneinander.

10. Betonung der ersten und letzten Position in einer Serie (Serienpositionseffekt)

Dieses Gesetz wurde von dem deutschen Psychologen Herman Ebbinghaus geprägt, der Pionierarbeit bei experimentellen Methoden zur Messung des Gedächtnisses geleistet hat. Es besagt, dass sich die Nutzer am besten an die ersten und letzten Elemente einer Reihe erinnern. Du kannst diese Tendenz nutzen, um die wichtigsten Bereiche deiner Webseiten hervorzuheben.

So sind beispielsweise wichtige Inhalte wie CTAs, Formulare oder Kaufoptionen am besten am oberen oder unteren Rand der Seite zu finden.

Die 10 " Gebotsregeln " der Benutzerfreundlichkeit von Jakob Nielsen

Jakob Nielsen – der Mitbegründer der Nielsen Norman Group, die wir bereits kurz erwähnt haben – hat mehrere Usability-Methoden erfunden, darunter die zehn heuristischen Evaluierungsprinzipien, die wir gleich besprechen werden. Die Nielsen Norman Group ist ein renommiertes UX-Forschungs- und Beratungsunternehmen, das den Bereich des Web- und Softwaredesigns maßgeblich beeinflusst hat.

Nielsen entwickelte diese Usability-Prinzipien ursprünglich im Jahr 1990, überarbeitete sie jedoch auf der Grundlage der Analyse von 249 Usability-Problemen, um maximale Klarheit zu schaffen. Bitte beachtet, dass es sich nicht um Gesetze oder spezifische Richtlinien handelt, sondern eher um allgemeine Faustregeln. Aus diesem Grund werden sie auch als «Heuristiken» bezeichnet.

1. Haltet deine Nutzer mit angemessenem Feedback auf dem Laufenden

Die Nutzer müssen deiner Marke vertrauen und sich bei der Nutzung deiner Anwendung sicher fühlen. Das bedeutet, dass deine Website kontinuierlich kommunizieren muss, was passiert und sie wissen lassen muss, ob ihre Interaktionen erfolgreich waren.

In einem E-Commerce-Shop werden die Nutzer beispielsweise darüber informiert, dass sie einen Artikel in den Warenkorb gelegt oder zur späteren Betrachtung gespeichert haben. Das Feedback kann Farbänderungen, Fortschrittsindikatoren, Benachrichtigungen und Warnungen verwenden, um den Benutzer visuell zu informieren.

2. Die Informationen sollten in einer logischen Reihenfolge angezeigt werden und vertraute Begriffe und Konzepte verwenden.

Die Benutzer sollten kein Wörterbuch zu Rate ziehen müssen, um die Begriffe auf deiner Website zu verstehen. Du solltest dich an die Konventionen halten. Benutze in deinem Oberflächentext Wörter, mit denen die Benutzer bereits vertraut sind.

Beispielsweise haben die Begriffe «Rückgängig» und «Wiederholen» in Anwendungsoberflächen eine ziemlich universelle Bedeutung. Wenn du sie durch unbekannte Begriffe wie » Reverse» und «Reprise» ersetzt, ist das für die Benutzer verwirrend. 

3. Ermögliche Kontrolle und Freiheit in der Art und Weise, wie Benutzer mit deiner Website interagieren

Benutzer machen oft Fehler und brauchen eine Möglichkeit, Aktionen rückgängig zu machen oder zu wiederholen, z. B. mit Hilfe von Schaltflächen, wie wir bereits erwähnt haben. In ähnlicher Art und Weise könnte man auch eine Bearbeitungsoption anbieten, wo dies relevant ist. Diese Funktion ist z. B. oft nützlich, um Änderungen an Kommentaren und Nachrichten in Social-Media-Apps vorzunehmen.

Wenn solche Funktionen zur Verfügung stehen, haben die Nutzer das Gefühl, die Kontrolle zu haben, und sind weniger angespannt, wenn Unfälle passieren.

4. Einhaltung von Konventionen und Normen

Die Einhaltung von Standards scheint dem zweiten Prinzip ähnlich zu sein und kann als eine Erweiterung desselben angesehen werden. Verwende Navigationsstrukturen, mit denen die Benutzer vertraut sind. Es sollte ihnen leicht fallen, Ihre Schnittstelle zu verstehen und auf alle Elemente zuzugreifen, die sie zur Interaktion mit Ihrer Seite benötigen.

Ein Bericht über die Benutzerfreundlichkeit der Einkaufswagen-Terminologie veranschaulicht dies. Das Design verwendete den Begriff «Shopping Sled», um sich abzuheben. Allerdings verstanden 50 Prozent der Nutzer nicht, was damit gemeint war. Die andere Hälfte konnte die Bedeutung nur ableiten, weil er sich an der Stelle befand, an der sich normalerweise ein Einkaufswagen auf einer Website befindet.

5. Vermeidung von Fehlern, wenn du kannst, und Warnung der Benutzer, bevor diese irreversible Handlungen vornehmen

Es ist klug, aussagekräftige Fehlermeldungen anzuzeigen, damit klar ist, wie Probleme behoben werden können und was sie verursacht hat. Noch effektiver ist es jedoch, fehleranfällige Situationen zu beseitigen oder die Benutzer ausdrücklich über die bekannten Folgen der Aktionen zu informieren, die sie gerade durchführen.

Das Löschen eines Benutzerkontos zum Beispiel ist oft irreversibel. Die meisten Anwendungen heben diese Einstellung in roter Farbe hervor, um sie zu verdeutlichen. Wenn der Benutzer auf die Schaltfläche «Löschen» klickt, wird in der Regel eine Meldung mit der Frage angezeigt: «Sind Sie sicher, dass Sie dies tun möchten?»

6. Wichtige Informationen sichtbar halten

Die Benutzer sollten sich nicht von einem Schritt eines Prozesses – z. B. einer Kaufabwicklung oder einer technischen Einrichtung – zum nächsten an Informationen erinnern müssen. Deine Benutzer sollen Informationen eher erkennen als abrufen.

Ein E-Commerce-Shop kann diese Heuristik anwenden, indem er eine Liste der zuletzt angesehenen Artikel bereitstellt, so dass sich die Benutzer nicht an die Namen der Produkte erinnern müssen, die sie noch nicht gekauft haben.

7. Systeme aufbauen, die sowohl für Anfänger als auch für Experten bequem sind

Du willst deine Website für neue Besucher einfach gestalten, aber auch für diejenigen, die mit dem System vertraut sind und möglicherweise Beschleuniger für häufige Aktionen benötigen. Ein Beispiel dafür sind Tastenkombinationen, die du zur Verfügung stellen oder den Nutzern die Möglichkeit geben kannst, sie zu erstellen und zu bearbeiten.

8. Entwürfe sowohl ästhetisch ansprechend als auch einfach gestalten

Du solltest deine Interface übersichtlich halten, anstatt deine Benutzer mit zu vielen Optionen zu überwältigen. Unnötige Elemente konkurrieren um Platz und beeinträchtigen die Sichtbarkeit wichtigerer Funktionen.

9. Leicht verständliche Fehlermeldungen bereitstellen

Klare, verständliche Fehlermeldungen machen es einfach, die Ursachen von Problemen zu ermitteln und schnell mögliche Lösungen zu finden. Die Meldungen sollten direkt, höflich (ohne den Benutzer zu beschuldigen) und konstruktiv sein und Ratschläge zur Behebung des Problems enthalten.

10. Durchsuchbare Hilfedokumente anbieten

Manchmal kann es erforderlich sein, dass die Benutzer zusätzliche Hilfeinformationen nachschlagen. Deine Dokumentation sollte leicht zu durchsuchen sein, damit sie schnell die für ihre Situation relevanten Inhalte finden und ihre Probleme lösen können.

Wie du die Prinzipien des Website-Designs in deinen Projekten anwendest

Sich mit so vielen Grundsätzen und Leitlinien vertraut zu machen, kann überwältigend sein. Hier sind einige Tipps für die Anwendung der Grundsätze:

1. Bleiben Sie mit den besten Methoden vertraut

Du solltest dich ständig weiterbilden und über bewährte UX-Designverfahren informieren. Lernen in Bezug auf das Web von bestehenden Lösungen. Beginne deine Projekte mit einer Forschungs- oder Inspirationsphase, in der du mehr über die Bedürfnisse deiner Nutzer erfährst und hochwertige Referenzen sammelst, von denen du lernen kannst.

2. Wähle mit Umsicht, welche Prinzipien du verwendest

Jedes Projekt ist ein Einzelfall und profitiert von unterschiedlichen Gestaltungsprinzipien. Du musst für jede Website, die du erstellst, Prioritäten setzen, welche davon dir am meisten helfen können. Denk dabei an die Hauptfunktionalität der Website, ihre primären Benutzerströme und die entsprechenden Geschäftsziele.

3. Regelmäßiges Testen und Verbessern Ihrer Designs

Du musst deine Website so oft wie möglich mit echten Zielnutzern testen. Wenn du dazu nicht in der Lage bist, kannst du Mitarbeiter, Kunden und sogar deine Co-Designer um Hilfe bitten und mit ihnen testen, um relevanten Input über die Benutzerfreundlichkeit deiner Website zu erhalten.

In dieser Phase geht es dir nicht um Perfektion. Nichts ist von Anfang an perfekt, also fürchte dich nicht davor, dein Design entsprechend dem Feedback aus den Nutzungsdaten zu polieren und zu verbessern.

4. Übung

Wenn du sie übst, wirst du anfangen, die Designprinzipien fast unbewusst anzuwenden. Je mehr du bei der Gestaltung die Grundsätze der Benutzerfreundlichkeit berücksichtigst, desto leichter wird es dir fallen, schnell effektive Lösungen zu finden und Probleme zu vermeiden.

5. Bilde deinen einzigartigen Stil - aber erst, nachdem du die Grundlagen verstanden hast

Regeln sollen Prozesse erleichtern, aber nicht blind befolgt werden. Doch häufig kann man nur dann erfolgreich mit den Regeln brechen, wenn man ihren Zweck genau versteht.

Diese Gestaltungsprinzipien bilden ein zentrales Instrumentarium und Grundwissen, mit dem du experimentieren und deinen eigenen Stil entwickeln kannst. Sobald du sie beherrschst, kannst du außerordentlich erfolgreiche Designlösungen schaffen, indem du sie gezielt übertrittst.

6. Benutze den Elementor Editor

Unser Elementor Editor basiert auf Designprinzipien und Logik. Mit unserer Designfunktion und einer breiten Sammlung von Widgets kannst du die Inhaltsstruktur deiner Website besser organisieren und sicherstellen, dass du ein benutzerfreundliches digitales Produkt erstellst.

Die Abschnitte und Spalten von Elementor helfen dir zum Beispiel, Inhalte logisch zu gruppieren. Widgets bieten eine einfache Möglichkeit, Inhalte zu gliedern und dabei die Prinzipien der Ähnlichkeit und der visuellen Verbindungen zu nutzen, um die Wahrnehmung Ihrer Nutzer zu erleichtern.

Mit Elementor müssen viele Inhalte nicht mehr von Grund auf neu organisiert werden. Mit unseren Widgets und unserer Vorlagenbibliothek stehen dir zahlreiche Lösungen zur Verfügung, um Designprinzipien bestmöglich umzusetzen.

Zusammenfassung

Um professionelle, benutzerfreundliche Websites zu erstellen, muss man mit den Grundsätzen des Stapeldesigns vertraut sein und sie bei seiner Arbeit sinnvoll einsetzen. So lassen sich deine Designs verbessern, indem sie ansprechender, benutzerfreundlicher und vor allem profitabler werden.

Wir haben in diesem Beitrag viel behandelt, darunter zehn UX-Gesetze, die von Jon Yablonski zusammengestellt wurden, und zehn Usability-Prinzipien, die von Jakob Nielsen entwickelt wurden. Außerdem haben wir verschiedene Möglichkeiten aufgezeigt, wie du diese Best Practices bei deiner Arbeit umsetzen kannst, z. B. mit unserem Elementor Editor.

Hast du Fragen zur Anwendung von Designprinzipien bei deiner Arbeit? Lass es uns im Kommentarbereich unten erfahren! 

Soziale Medien / SEO

Bester Rank Math Tutorial (+ Installation und Einrichtung)

Erster Schritt die Einrichtung des Plugins. Rank Math stellt dir hier einen Setup Wizard zur Verfügung. Dieser leitet dich Schritt für Schritt durch die wichtigsten allgemeinen Einstellungen.

Facebook
Twitter
LinkedIn
Pinterest

Schreiben Sie einen Kommentar

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

TubeBuddy Black Friday by PWD Swiss Media