02 Design- und Strukturgrundlagen
Last updated
Was this helpful?
Last updated
Was this helpful?
Zum Einstieg ein kleines Video wieso User Experience und User Design wichtig sind:
«User experience» encompasses all aspects of the end-user's interaction with the company, its services, and its products.
Die User Experience bei Formularen ist wichtig, da zwischen dem Ziel des Benutzers (Kaufen, Beitreten, Bloggen) und dem Ziel des Unternehmen (Verkaufen, hohe Mitgliederzahl, mehr Content) oft ein Formular steht.
Gebrauch von Formularen, auf , gemäss .
Ein Formular macht somit eine Website nutzbar.
Ein Formular muss somit nützlich sein.
Jedes Webformular besteht grundsätzlich aus drei Komponenten. Um eine positive User Experience zu schaffen muss sich die positive Erfahrung bei der Interaktion mit dem Formular durch sämtliche drei Ebenen ziehen.
Beziehung - Formulare ermöglichen eine Beziehung zwischen Benutzer und Unternehmen.
Dialog - Formulare ermögilchen eine Konversation zwischen Benutzer und Unternehmen.
Aussehen - Erst mit dem richtigen Aussehen und einer logischen Struktur ermöglichen das Formular den Aufbau einer Beziehung und eines Dialogs.
Ein Formular kann die Beziehung zwischen Benutzer und Unternehmen aufbauen und verstärken. Dies bedeutet jedoch auch, dass ein schlechtes Formular eine Beziehung beenden oder schwächen kann.
Eine Beziehung basiert auf Vertrauen. Somit muss das Formular vertrauenswürdig sein. Dies kann durch das allgemeine Design, Logo, Fotos, Farben, Typographie oder Wording erreicht werden. Der Benutzer muss sofort wissen, dass das hinter dem Formular eine seriösen Firma steht.
Jede Beziehung hat ein Ziel. Ob in einer romatischen Beziehung oder bei Businesspartnern, jede Beziehung hat ein Ziel. Was hat dein Formular für ein Ziel?
Passt der Name des Formulars zum Inhalt? Die Frage ist hier ob der Inhalt (Formularfelder) mit den Erwartungen des Benutzers übereinstimmen. Die Erwartungen des Benutzers werden im Link, Titel, Email etc. aufgebaut, mit dem er auf das Formular gelangt ist.
Passt das Formular zu meiner Zielgruppe? Es ist wichtig zu wissen, wer das Formular ausfüllt und was für Besonderheiten sich daraus schliessen lassen.
Die Grenzen des Formulars kennen. Das Formular darf keine Fragen enthalten, welche über den Sinn des Formulars hinausgehen - ansonsten wird der Benutzer misstrauisch.
Menschen lieben Konstanz. Darum ist es wichtig keine plötzlichen Änderungen in der Struktur und im Aussehen des Formulars einzubauen. Der Benutzer darf nicht in seinem 'Flow' unterbrochen werden.
Ein Formular ist keine einseitige Kommunikation, sondern ein Gespräch zwischen mehreren Parteien - ein Dialog. Somit muss immer im Hinterkopf behalten werden, dass der Benutzer ein Formlar ausfüllt um ein Gespräch mit dem Unternehmen zu beginnen.
Ein Formular ist somit ein Gespräch und kein Verhör. Aggressives und herrscherisches Wording lösen beim Benutzer eine Abwehrhaltung aus.
Dem logischen Aufbau einer Konversation folgen. Ein Formular muss einen logischen Aufbau aufweisen. Du würdest doch auch nicht in den ersten 5 Sekunden des Kennenlernens gleich nach der Telefonnummer fragen? Als Grundsatz gilt: Das Formular geht von den allgemeine Fragen (low Involvement) langsam über zu spezifischen Fragen (high Involvement).
Formular nach Themen sortieren. Menschen denken in Cluster: Fragt ein Formular beispielsweise Informationen über das Auto des Benutzers ab, ruft dieser das Cluster «Auto» in seine Gedanken auf. Nun kann er sämtliche Informationen über sein Auto schnell abrufen und das Formular ausfüllen.
Pausen einbauen. Viele Benutzer fühlen sich vor allem von grossen Formularen überrumpelt. Dem kann entgegengewirkt werden, indem gezielt Abstände oder Seitenumbrüche in das Formular eingebaut werden.
Ablenkungen entfernen. Wie bei einem richtigen Dialog, stören Ablenkungen den Gesprächsfluss. Darum ist es wichtig den Fokus auf das Formular zu setzen und unnötige Ablenkungen zu eliminieren.
Das Aussehen eines Formulars ist entscheidend für dessen Benutzerfreundlichkeit. Es gibt verschiedene Grundsätze und Tipps um das Aussehen eines Formulars zu gestalten:
Wörter vs. Sätze. Sätze machen es dem Benutzer bei komplexeren Fragestellungen einfacher das Feld auszufüllen. Hingegen kann der Benutzer sich bei einfachen Wörtern besser orientieren. Damit gibt es hier keine Grundregel, das Label muss je nach Situation angepasst werden.
Nur eine Kolonne. Der Aufbau eines Formulars sollte sich nicht über mehrere Spalten ziehen, sondern klar dem Verlauf von oben nach unten folgen.
Feldtypen richtig einsetzen. Beim Erstellen eines Formularfeldes sollte man sich stets folgende Frage stellen: Welches Feld eignet sich am besten für die gewünschte Information?
Gestaltung der Formularfelder. HTML5 und CSS3 bieten eine Vielfalt von verschiedenen Varianten um ein Formularfeld zu gestalten. Diese sollten jedoch nur beschränkt eingesetzt werden. Es ist wichtiger dem Benutzer eine einfache und intuitive Oberfläche zu bieten als ein schön gestaltetes aber benutzerunfreundliches Formular zu designen (Beispiel Pflichtfeld mit *).
Primäre und Sekundäre Aktionen unterscheiden. Die primäre und die sekundäre Aktion eines Formulares müssen optisch klar unterschieden werden. So wird der Button für das Versenden des Formulars anders dargestellt als der Button für das Abbrechen.
Aktionen benennen. Aktionen wie «Submit» oder «Reset» sollten nach den eigentlichen Aktionen beschriftet werden. Beispielsweise «Registrieren», «Anfrage senden» etc.
Tausche den Platz mit deinem/r Nachbar/in und schau sein/ihr Formular im Browser an (nicht den Code). Vergleiche es mit den obigen Empfehlungen und schreibe ein paar Feedback-Punkte auf:
2-3 Aspekte, die du benutzerfreundlich findest, die mit den Empfehlungen (oben) übereinstimmen.
2-3 Empfehlungen, was noch verbessert werden kann.
Wenn du fertig bist, tauscht eure Feedbacks aus.
Zeit: 10 Minuten inkl. Austausch.
Anmeldeformular auf - die Bereiche für die unterschiedlichen Zielgruppen sind klar differenzierbar.
Formularstruktur auf - Die Informationsgruppen sind optisch und inhaltlich klar aufgeteilt.
Anmeldeformular für Unternehmen auf - Die gesamte Seite wirkt sehr reduziert. So ist es möglich den Fokus komplett auf das Kaufformular zu richten.
Anmeldeformular bei Amazon - Die Anmeldeseite von Amazon nutzt ganze Sätze, obwohl einzelne Wörter absolut ausreichend sind.
Position des Labels. Auch hier gibt es keine abschliessende Regel und die unterschiedlichen Positionen des Labels bieten verschiedene Vor- und Nachteile. Hier findest du eine kleine Übersicht über die verschiedenen Positionen des Labels:
Zweispaltiges Layout für Kontaktfomular
Ein zu kreatives Kontaktfomular - Kreativität nie vor Funktionalität.
Klare Unterscheidung der Aktionen . Die Aktionen auf den Buttons sind optisch nicht in eine primäre und eine sekundäre Aktion differenzierbar.
