var _paq = _paq || [] _paq.push(['disableCookies']); _paq.push(['enableHeartBeatTimer', 5]); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); function embedTrackingCode() { var u="//matomo.ole-beekmann.de/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', 'X']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0] g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); } setTimeout(function () { embedTrackingCode(); }, 5)

5 simple UX-/UI-Grundsätze

Wer sich mit der Aufgabe konfrontiert sieht, erstmals und in Eigenregie eine Anwendung zu gestalten, greift gerne mal auf bereits vorgefertigte Templates und UI-Kits zurück. Bloß ein paar Elemente verschieben, die Farbe anpassen und fertig – oder nicht? Sicherlich eigenen sich Templates für das Festlegen einer groben Seitenarchitektur. Die Optimierung der User Experience sowie der Einbau der persönlichen Note sollten jedoch am besten in die eigene Hand genommen werden. Damit Nutzer*innen und Entwickler*innen also auf einen gemeinsamen Konsens kommen, können hin und wieder grobe UX-/UI-Grundsätze eine hilfreiche Stütze bilden. Mal ganz abgesehen von der mehr oder weniger basalen Unterscheidung zwischen UX- und UI-Design lassen sich so bereits mit einfachen Grundkenntnissen beeindruckende Effekte erzielen (und das vollkommen ohne Codieren).

Grundsatz 1: Minimalismus bitte!

Generell zahlt es sich immer aus, das Informationsspektrum eines Mediums auf ein Minimum zu reduzieren. Ein Geniestreich, der natürlich auch im UX-/ UI-Design greift. Fakten sollten so direkt auf dem Tisch liegen und sämtliches Chichi, eventuell eine Ursache für content-bezogene Verwirrung, vorerst eine Nebenrolle spielen.

Tendenziell neigen User zum Überfliegen der Website. Bei der allerersten Betrachtung des Interfaces werden so lediglich hervorspringende Blickpunkte lokalisiert, umfangreiche Texte hingegen eher selten genauer unter die Lupe genommen. Umso wichtiger ist es also an dieser Stelle, relevante Inhalte möglichst überschaubar und verständlich zu präsentieren. Eine durchdachte Architektur der Seiten vereinfacht dabei nicht nur die Nutzerführung, sondern stellt den User auch nicht vor die gefürchtete Aufgabe der unbegrenzten Auswahlmöglichkeiten.

Auch wenn es Entwickler*innen in diesem Kasus gut meinen und gerne mal die Sättigungsgrenze der Aufnahmefähigkeit austesten, ein Gros an Auswahloptionen beeinflusst die User Experience eher negativ. Je breiter das Spektrum, desto länger dauert die finale Entscheidung, sodass sich die Informationsflut zu einer wahren Last entwickelt. Im schlimmsten Fall scheitern Nutzer*innen sogar an dieser unüberbrückbaren Aufgabe und kehren der Website den Rücken zu; eine Enttäuschung beiderseits. Die Nummer 1 der UX-/UI-Grundsätze lautet also, die Architektur der Website möglichst simpel zu halten, um die User binnen kürzester Zeit an das erwünschte Ziel zu führen.

Simple Designs wirken beruhigend und lösen positive Emotionen aus

Grundsatz 2: Konsistenz wahren

Ein Teilbestandteil dieser Architektur ist selbstverständlich die Konsistenz. Einzelne Elemente sollten dabei klar voneinander unterscheidbar und hinsichtlich ihrer Funktionen klassifizierbar sein. Es liegt auf der Hand, dass sich dieses Ziel am besten durch den Einsatz von Farbe und Form erreichen lässt. Sobald sich verwandte Buttons also durch ein einheitliches Design kennzeichnen, ist auch das intuitive Verstehen der Anwendung gewährleistet. Im Optimalfall sollte eine solche User Experience Nutzern jeder Altersgruppe zugänglich sein und nicht nur eine bestimmte Klientel ansprechen.

Ebenso unverzichtbar ist das Arrangieren abgeschlossener Dialoge. Beispielsweise in Sachen Kaufprozess sollte einer getätigten Aktion seitens des Users immer ein Feedback in Form einer automatisierten Bestätigungsmail folgen. Gerne gesehen sind auch kleinere Animationen, wie beispielsweise auf WeTransfer. Diese triggern Emotionen und erhöhen zusätzlich die Joy of Use.

Grundsatz 3: Die Drittel-Regel befolgen

Neben den funktionalen Gestaltungsrichtlinien sollte natürlich auch das Design des User Interfaces nicht unberücksichtigt bleiben. Die Drittel-Regel für das perfekte Arrangement von Bildinhalten stammt zwar ursprünglich aus der Fotografie, lässt sich aber ohne Probleme auf die Anwendungsgestaltung übertragen. Im Rahmen dieser Regel werden Darstellungen in neun kongruente Einheiten unterteilt sowie vier Kreuzpunkte der Schnittlinien hervorgehoben. Diese Überschneidungen markieren quasi Fluchtpunkte, auf diese der Betrachter automatisch sein Auge lenkt. Die Nummer 3 der UX-/UI-Grundsätze empfiehlt also, relevante Elemente der Anwendung über die Aufteilung des Interfaces in Spalten und Reihen entlang dieser Kreuzpunkte zu arrangieren.

Ebenso wie in der Fotografie eignet sich die Drittel-Regel für das UX-/UI-Design

Grundsatz 4: Bildschirmgrößen anpassen

Vom Laptop über das Smartphone bis hin zum Tablet erfordert die Entwicklung einer Anwendung stets auch die Anpassung an verschiedene Bildschirmgrößen. Das adäquate Angleichen kann auf zwei Weisen vorgenommen werden beziehungsweise im Rahmen eines statischen Designs einfach unberücksichtigt bleiben. Eine fluide Vorgehensweise hat dabei den Vorteil, dass sich das Layout inklusive der einzelnen Elemente an sämtliche Bildschirmgrößen anpasst. Sind die Sprünge zwischen den Formaten allerdings zu groß, sollte über eine Re-Codierung der Elemente nachgedacht werden. Das klassische Responsive Design hingegen charakterisiert sich durch eine komplett neue Anordnung der Elemente, bei der einzelne Bausteine teilweise sogar ausgeblendet werden. 

Grundsatz 5: Die User fragen

Abschließend sollte natürlich einer der wichtigsten UX-/UI-Grundsätze erwähnt werden: die Interaktion mit den Nutzer*innen. Was bei der Ideenfindung beginnt, zieht sich über das Prototyping bis hin zum Einholen der User Feedbacks. Die Optimierung einer Anwendung sollte auf einem konsequenten Austausch mit dem Endverbraucher basieren. Auf diese Weise lassen sich Touchpoints lokalisieren und Pain Points eliminieren. Nicht nur für die User, sondern auch für die Entwickler*innen bieten Tools wie Chatbots oder Support-Formulare also hilfreiches Input.

Worauf es ankommt

Egal ob Template oder nicht, die Orientierung entlang grober UX-/UI-Grundsätze bildet stets eine hilfreiche Stütze, wenn es um User Experience und User Interface Design geht. Neben minimalistischer Ästhetik und einer konsistenten Gestaltung gilt es so vor allem, das Interface an die Bedürfnisse und Ansprüche der User anzupassen sowie in steter Interaktion mit ihnen zu stehen. Schließlich sind es immer noch die Nutzer*innen, denen die Anwendung gewidmet sein sollte.