Wenn beim Öffnen einer Website auf den ersten Blick alles klar ist, sollte über meinem Kopf ein Feuerwerk von fröhlichen Gedankenblasen entstehen – ungefähr so: „Ah, hier gibt’s diese Produkte – und hier sind die anderen! Super, genau danach hab ich gesucht. Das ging ja flott!“
Wird dieses Prinzip nicht befolgt, muss ich mich erstmal anstrengen, um zu verstehen, wie die Seite eigentlich funktioniert – in Gedankenblasen übersetzt, würde es über meinem Kopf dann in etwa so ausschauen: „Hm, wo fange ich jetzt am besten an zu suchen? Kann man das anklicken – und was passiert dann wohl? Wie komme ich jetzt wieder auf diese eine Seite zurück?“ Meistens endet so ein Besuch – eher früher als später – mit einem genervten Gesichtsausdruck und dem Switch zu den aktuellsten Reels auf Instagram.

Wir alle neigen dazu, Websites eher zu überfliegen, als sie ausgiebig zu analysieren. Damit die User:innen aber dennoch so viel wie möglich von einer Website sehen, gilt es drei wichtige Aspekte zu beachten:

• Bereits existierende Konventionen befolgen: Als User:innen freuen wir uns darüber, wenn Menüpunkte etc. dort sind, wo wir sie aufgrund unserer Gewohnheiten vermuten würden. Und auch über die Verwendung von weitverbreiteten und etablierten Icons!
• Eine klare visuelle Hierarchie anwenden: Je wichtiger etwas ist, desto auffälliger sollte es sein – es wird also entweder größer formatiert, fett gedruckt, in einer anderen Farbe dargestellt oder von mehr Weißraum umgeben. Miteinander verknüpfte Themen oder Bereiche sollten auch visuell miteinander verknüpft sein, indem sie z.B. unter einer Überschrift gruppiert, im gleichen visuellen Stil präsentiert oder in einen klar definierten Bereich zusammengefügt werden.
• Visuelles Rauschen reduzieren: Hat eine Website kein einheitliches Raster, entsteht das sogenannte visuelle Rauschen. Die einzelnen Elemente (z.B. Kaufeinladungen, Animationen, Slideshows, viele Ausrufezeichen, verschiedene Schriften und Farben, Pop-ups) wirken willkürlich über die Seite verstreut und ringen miteinander um die Aufmerksamkeit der User:innen.

Zum Abschluss kommen wir noch zu einem etwas anderen, aber dennoch wichtigen Thema: das Mobile Design! Auch wenn die User:innen am Smartphone meist sogar noch schneller und oberflächlicher surfen als am Computer, gelten hier dieselben Grundprinzipien für eine klare und selbsterklärende Usability wie für die Desktop-Version. Dennoch gibt es ein paar signifikante Unterschiede:

• Weniger Platz für die Inhalte der Website. Immer häufiger wird heute „mobile first“ designed: Zuerst wird die Mobile-Version gestaltet wodurch gleichzeitig auch die wesentlichen Inhalte der Website erarbeitet werden können. Weitere Funktionen und Inhalte werden dann für die Desktop-Version hinzugefügt.
• Kein Cursor auf dem Smartphone. Hover-Effekte, die häufig verwendet werden, um zu verdeutlichen, dass etwas anklickbar ist, können in der Mobile-Version nicht dargestellt werden, weil sie erst erscheinen, wenn die User:innen ihre Maus über ein Objekt führen, ohne es anzuklicken.
• Hamburger-Menü. In der Desktop-Version befinden sich die einzelnen Navigationspunkte ganz oben und meist nebeneinander. Am Smartphone wird hierfür eine Konvention verwendet: ein Symbol, das aus drei waagerechten Strichen besteht – das „Hamburger-Menü“. 

Haben Sie Lust darauf bekommen, Ihre Website umzukrempeln oder ganz neu zu entwerfen? Wir helfen Ihnen dabei! Rufen Sie uns an oder schreiben Sie uns: +39 0471 538569 oder info@clicktext.it. Wir freuen uns!

Quelle:
Krug, Steve: Don’t make me think! Web & Mobile Usability: Das intuitive Web., Mitp Verlags GmbH & Co. KG, 2014