Als SoftwareentwicklerIn möchte man seinen Kunden Produkte liefern, die sowohl die gewünschten Funktionen beinhalten, als auch die bestmögliche User-Experience bieten. Dazu gibt es einiges zu beachten. 

Bei der Erstellung von individueller Software, sollten einige Regeln eingehalten werden, um die Bedienung für den Nutzer zu erleichtern. Zum Beispiel sollten Views, also gewisse Abschnitte in einer Anwendung (zum Beispiel ein Login-Formular), nicht überladen werden. Das führt nicht nur zu verkürzten Ladezeiten, sondern auch zu verkürzten Such- beziehungsweise „Nachdenkzeiten“ beim Verwenden der Anwendung. Somit wird die Zeit, in der Anwendung minimiert und das spart Zeit und Geld im Arbeitsalltag.

Dann gibt es auch noch wichtige Erkenntnisse der Gestaltungspsychologie, mit denen man sich vertraut machen sollte, wenn man sich mit dem Designen von individuellen Webentwicklungen, individuellen Appentwicklungen oder Webseiten beschäftigt. 

Wir stellen in diesem Beitrag die 6 Gestaltungsgesetze der Wahrnehmung vor und geben Einblicke, wie wir diese bei Objectbay anwenden.

Das Gesetz der Prägnanz

Um eine Anwendung intuitiv zu gestalten, muss man sich nicht nur Gedanken machen, wie man dem Nutzer vermitteln kann, wo er etwas hineinschreiben oder hinklicken soll, sondern man muss dem User auch vermitteln, dass eine Interaktion mit der Anwendung überhaupt möglich ist.

Gleichzeitig stellt sich die Frage, wie wir durch gezielte Design-Entscheidungen die Aufmerksamkeit des Nutzers steuern können, dabei hilft uns unter anderem das Gesetz der Prägnanz.

Wir arbeiten dabei bevorzugt mit Form und Farbe. Buttons in einem System haben dabei immer dieselbe Form, die Farbe variiert nur in Ausnahmefällen, wie zum Beispiel dann, wenn es sich um einen Löschen-Button für wichtige Daten handelt. So wird der Nutzer „alarmiert“ und wird darauf aufmerksam gemacht, dass sein Klick schwerwiegende Auswirkungen haben kann. Je mehr Funktionen eine einzelne Ansicht bietet, desto schwieriger ist es, dem Nutzer eine Anwendung zu bieten, die sich so intuitiv wie möglich bedienen lässt.

‍
Hier sehen wir, wie uns Gmail mit Form und Farbe beim Senden einer E-Mail unterstützt. Wir sehen unten zwar eine Vielzahl an Optionen, die wir klicken könnten, wahrscheinlich wollen wir die E-Mail aber einfach nur absenden und deshalb wird uns diese Option auch auf dem Präsentierteller serviert.

Das Gesetz der Ähnlichkeit

Wie bereits oben angesprochen, haben Buttons und andere Komponenten in unseren Anwendungen, sowohl dieselbe Farbe, als auch dieselbe Form. 

Das Gesetz der Ähnlichkeit besagt, je mehr Gemeinsamkeiten verschiedene Elemente haben, desto eher werden sie als eine zusammenhängende Einheit wahrgenommen. Daher ist es auch wichtig, auf die Position und die Größe zu achten.‍‍

Natürlich hängt die Breite des Buttons auch vom beinhalteten Text ab. Es wäre komisch, wenn sich die allgemeine Buttonbreite stets am breitesten Button der ganzen Anwendung orientieren würde, oder nicht?

Man kann also auch beim Gesetz der Ähnlichkeit overengineeren.

Das Gesetz der Nähe

Wenn man Elemente gruppiert und Abstände bewusst wählt, bedient man sich am Gesetz der Nähe. Elemente, die sich nahe zueinander befinden, werden als zusammengehörig wahrgenommen. Egal, ob es sich um den horizontalen oder vertikalen Abstand handelt.

In dieser Grafik erkennt man alleine durch den Abstand der Zeilen, dass es auf der linken Seite eine Überschrift gibt, während sich auf der rechten Seite vier Zeilen von gleichwertigem Content befinden.

Hier haben wir die Struktur einer rudimentären Website. Durch die Abstände sind die einzelnen angedeuteten Sektionen, wie Header, Content und Footer leicht zu erkennen.

Auch wenn es bei dieser Grafik zwei verschiedene Formen gibt, würde man durch den horizontalen Abstand nicht nach Form gruppieren. Das Gesetz der Nähe zeigt also seine Wirkung. 

‍

Monatlich spannende Insights rund um das Thema Softwareentwicklung erhalten?

Einfach unseren Newsletter abonnieren und immer auf dem Laufenden bleiben.

‍

Das Gesetz der Geschlossenheit

Bei diesem Gesetz geht es darum, dass wir darauf trainiert sind, Zusammenhänge zu sehen, unabhängig davon, ob diese wirklich existieren. Das Gesetz der Geschlossenheit und das oben behandelte Gesetz der Nähe treten in den meisten Fällen gemeinsam auf.

Sehen wir uns das Gesetz der Geschlossenheit zuerst einmal isoliert an. Bei diesem Gesetz geht es darum, dass wir Menschen darauf ausgerichtet sind, in allem, was wir sehen, Zusammenhänge zu entdecken. Aufgrund unserer Erfahrung vervollständigen wir einzelne zu geschlossenen Elementen, weil diese greifbarer sind.

Beim linken Bild sehen wir Quadrate und beim rechten ein „E“.

Auch bei Apps und Webseiten finden sich gewohnte Zusammenhänge oder eben Geschlossenheiten, an die wir uns schon längst gewohnt haben. Auf Webseiten, die diese Geschlossenheiten einhalten, finden wir uns besonders schnell zurecht.

Hier ein Beispiel von Amazon. Links: Darstellung des Produktes, zentral: Eigenschaften und Information des Produktes, rechts: Informationen zum Kauf

Bei diesen 3 Abschnitten ist bereits beim ersten Hinsehen klar, was einen erwartet.

Auffällig Unauffällig

Die Werbung zwischen Header und dem eigentlichen Produkt wird von unserem Unterbewusstsein regelrecht ausgeblendet. Das liegt an der dauerhaften Konfrontation mit Werbung an allen möglichen Stellen, sei es vor einem YouTube-Video, in der Zeitung oder auf Webseiten. Oft denkt man sich: „Die Werbung interessiert mich jetzt nicht, ich will meinen Beitrag lesen oder möglichst schnell und einfach finden, was ich auf einer Website suche.“ Die Kombination aus „Will ich nicht sehen“ und der Geschlossenheit der Form von Werbungen helfen unserem Gehirn, diese Werbungen auszublenden und uns auf das für uns Wesentliche zu konzentrieren.

Das Gesetz der Kontinuität

Bekannte und vor allem gewohnte Formen und Muster vereinfachen es uns, Informationen zu erfassen. Wenn wir uns an das Gesetz der Kontinuität halten, erreichen wir, dass die Nutzer unserer Webseiten oder Apps diese einfach benutzen können.

‍

Ein einfaches Beispiel, wie man es dem Nutzer schwer machen kann, Text zu konsumieren, ist

den Text

 zentriert anzuzeigen

und

dabei auch mit den Zeilenlängen zu variieren.

Das Auge muss sich viel mehr anstrengen, um zentrierte Zeilen lesen zu können. Grund dafür ist, dass wir beim Lesen darauf trainiert sind, von einem Zeilenende zum nächsten Zeilenanfang zu springen, sobald wir eine Zeile gelesen haben. Problem bei zentriertem Text: Es gibt kein regelmäßiges Ende und, viel wichtiger noch, keinen regelmäßigen Anfang.

Antizipieren – Information bewusst darstellen

Vor allem bei der Darstellung von Daten kommt dieses Gesetz zum Einsatz.

Das Ziel der Datenaufbereitung ist, den Nutzern Informationen verständlich und einfach zur Verfügung zu stellen. 

Wenn es vom Kunden keine speziellen Vorgaben gibt, sollten wir uns vor der Darstellung der Daten damit beschäftigen, für welche Zielgruppe wir die Daten aufbereiten. Was wollen die Nutzer des Produkts wissen? Wie zeigen wir die Daten initial an und bieten wir mehrere Sortierungsoptionen an?

Wenn wir diese Gedanken zur Umsetzung mit dem Kunden teilen, liefern wir möglicherweise wichtigen Input, der dem Kunden und schließlich uns hilft, das ideale Produkt für ihn zu schaffen.

Es ist wohl Ansichtssache, welche Darstellung den besseren Informationsgehalt liefert. Wenn sich an der Stelle, an der wir die Ansicht bereitstellen, mit hoher Wahrscheinlichkeit die Frage stellen wird, wer die Top 5 Verdiener sind, so macht es bestimmt mehr Sinn, die untere Variante zu wählen.

Das Gesetz des gemeinsamen Schicksals

Hinter diesem dramatischen Namen verbirgt sich, dass Elemente, die sich gemeinsam über den Bildschirm bewegen und jene, die erst sichtbar werden, sobald man mit bestimmten Elementen interagiert, von uns als zusammengehörig wahrgenommen werden.

An diesen Erkenntnissen bedienen wir uns und setzen deshalb Webelemente wie Accordions oder Tooltips ein. So kann Information dann angezeigt werden, wenn sie wirklich gebraucht wird.

Hier noch einmal das Produktbild von Amazon. Konzentrieren wir uns auf den zentralen Abschnitt, bei dem wir auf „Mehr lesen“ klicken können.

Man sieht, dass hier das Wort „Statt“ vom nächsten Satz noch angezeigt wird. Der unvollständige Satz fällt aber nicht auf, wenn man die ersten Blicke auf diesen Screenshot wirft. Erst, wenn man Detailinformationen zu diesem Produkt lesen möchte, fällt einem diese Option auf. Auf den ersten Blick ist die Seitenanzahl und vor allem die Sprache für potenzielle Käufer bestimmt wichtiger und man wird, ganz nebenbei, nicht von zu viel Text erschlagen.

Sehen wir uns einen Screenshot mit ausgeklappten Detailinformationen an. Keine Spur mehr von Seitenanzahl und Sprache, dafür aber viel Text für diejenigen, die sich näher informieren wollen und das auf Abruf.

‍

‍

Sie wollen erfahren, wie Sie einen Softwareentwicklungs-Partner finden, für den UX Design eine Selbstverständlichkeit ist?

Hier geht's zum Leitfaden „10 Dinge, die Sie bei der Auswahl Ihres Softwareentwicklungs-Partners unbedingt beachten müssen.“