Awwwards – Gut fürs Auge, gut für den User?

9. Juni 2016, 17:05 Uhr Geschrieben von Leave your thoughts

Auf der Suche nach frischen Ideen und Inspiration ist für viele Webdesigner Awwwards eine willkommene Anlaufstelle.

Hier werden neue Designtrends vorgestellt, weitergeführt und von bekannten Designern auch entsprechend gewürdigt. Sich immer nach neuen Einflüssen umzusehen ist natürlich unerlässlich, denn ständige Innovation ist für diese Branche wohl so wichtig, wie für kaum eine andere. Doch bei allen Designtrends, sei es Hamburger-Menu, Long-Scroll, groß angelegte Animationen, oder Mikrointeraktionen, das Wichtigste darf nie vernachlässigt werden: Der User

Versetzen wir uns einmal in eine wohl nicht allzu unbekannte Situation für den Otto-Normal-User, nennen wir ihn in diesem Fall einfach Klaus. Klaus versucht sich durch eine auf den ersten Blick ansehnliche und aufwendig gestaltete Website zu navigieren, kapituliert jedoch schnell vor den benutzerunfreundlichen Designentscheidungen. Laut ruft er: „Ich will doch nur >hier beliebigen Nutzungsgrund angeben<.“

Warum?

Klaus hat nicht direkt verstanden, dass er, nachdem er sich ein dreiminütiges Promo-Video, das automatisch startet und die gesamte Breite des Screens einnimmt, anschauen musste, die gesuchte Navigationsleiste nur durch ein 4-sekündiges Hovern über einem kryptisch anmutenden Button am rechten unteren Bildrand erreichen kann, der, da er sich farblich kaum vom sich ständig verändernden Background abhebt, kaum als solcher zu erkennen ist. (Sorry für den Schachtelsatz.)

Das mag natürlich ein übertriebenes Beispiel sein. Für viele Menschen reicht jedoch schon deutlich weniger aus, um einer Website den Rücken zu kehren. Falls das reibungslose Zusammenspiel zwischen Mensch und Maschine einfach nicht recht gelingen will, ist dies eher in seltenen Fällen der Unfähigkeit des Nutzers geschuldet, sondern viel mehr auf eine Vernachlässigung wichtiger Usabilityfaktoren von Seiten des Designers zurückzuführen.

Wie nice, fancy, oder awesome deine Website auch aussehen mag, es darf niemals außer Acht gelassen werden welche Faktoren wirklich dafür sorgen, dass sie gut beim User ankommt.

Deshalb bekommst Du hier

 

5  Prinzipien, die du beim Webdesign nie vernachlässigen solltest

 

1. Zweckmäßiges/Funktionales Design

Gutes Webdesign muss sich immer nach den Bedürfnissen des Users richten. Es darf nicht nur dem Auge zusagen, sondern muss sich besonders durch seine Klarheit auszeichnen. Jede Seite muss einen eindeutigen Zweck erfüllen und den spezifischen Anliegen der Nutzer entgegenkommen. Und das möglichst so effektiv wie möglich. Man sollte sich immer zuerst die Frage stellen:

„Was erwartet der User von meiner Website und welche Informationen will er am einfachsten und schnellsten erreichen?“

Für die Website eines Fotografen sollte man zum Beispiel nicht den gleichen Ansatz wählen, wie für die Website eines Inkassounternehmens.

Für einen kommerziellen Zweck eignet sich folgendes Beispiel:

Reebok

2. Einfache und schnelle Kommunikation

Der Informationsflow muss vor allem eines sein: schnell. Darüber kann man sich, egal mit welchen Absichten eine Website besucht wird, im Klaren sein. Die Informationen müssen gut sichtbar und strukturiert gebündelt sein. Besonders wichtig ist hierbei das Nutzen von Überschriften und Unter-Überschriften. Lange Sätze sollten unbedingt vermieden werden und durch knackige und griffige Formulierungen ersetzt werden. Auch der Gebrauch von Images oder Videomaterial sollte aufgrund von hoher Ladezeiten ein gesundes Maß nicht übersteigen.

Gutes Beispiel:

CodeAcedemy

 

3. Logische Navigation

In deiner Navigation muss eine klare Hierarchie zu erkennen sein. Das Design kann noch so innovativ sein, wenn es dem Zweck der einfachen und schnellen Informationsbeschaffung nicht zuträglich ist, dann ist es für den User von keinem Nutzen. Es muss auf einen Blick erkennbar sein, wie die Website aufgebaut ist und funktioniert. Ebenfalls sollte umrissen werden, welcher Umfang geboten wird. Studien zeigten, dass ein „Hidden Menu“, wie der schon fast klassische „Burger“, zwar als ästhetisch empfunden wird, jedoch deutlich weniger Klicks bei den Menüpunkten aufweist, als eine klassische Menüführung.

Als Faustregel zur Usability einer Website kann man sich hinter die Ohren schreiben: Je weniger Klicks nötig sind um zum Ziel zu kommen, desto besser.  Das wird auch durch die 3-Klick-Regel verdeutlich, die besagt, dass es für den User möglich sein muss, die gewünschten Informationen in maximal drei Klicks zu erreichen.

Gutes Beispiel:

Navigating

Hier handelt es sich um eine Scroll-Website, die auf sehr ästhetische, aber zugleich logische Weise Images und Informationen zusammenführt. Obwohl es sich bei der Navigationsleiste um ein Hidden-Menu handelt, ist es für den Nutzer nicht verwirrend, da das Scrolling intuitiv ist und im Mittelpunkt steht.

 

4. Ansprechendes Layout

Du darfst auf keinen Fall den Fehler machen, den Inhalt willkürlich zu platzieren. Es wird sonst eine Planlosigkeit vermittelt, die den Nutzer im Normalfall nicht auf der Website hält. Du solltest immer mit einem Grid arbeiten und den Inhalt in Abschnitte, Spalten und Boxen gliedern, was eine optische Balance erzeugt.

Eye-Tracking Studien haben belegt, dass Nutzer eine Website nach einem „F-Schema“ scannen. Es fällt also direkt ins Auge, was sich oben und links befindet, wohingegen der rechten Seite des Screens wenig Aufmerksamkeit gewidmet wird (es wird, wie gewohnt, von links nach rechts „gelesen“).

Auch was Farben angeht darf die Website nicht zu überladen sein. Am besten beschränkt man sich auf wenige Komplementärfarben, die eine Balance und Harmonie erzeugen. Kontrastfarben sind besonders für Text und Background sinnvoll.  Nicht zu empfehlen ist es, große Images auch hinter Fließtext anzulegen, da dies für den Leser meist zu anstrengend ist. Die Ideale Fontgröße für Texte liegt bei 16px. Mehr als drei verschiedene Schriftarten solltest du auf keinen Fall benutzen.

Gutes Beispiel:

Layout

 

 

5. Mobile-Freundlich

Dein Webdesign mag auf dem Desktop vielleicht ganz Schick aussehen, ein viel wichtigerer Punkt ist aber, ob dieses auch für die Benutzung auf unterschiedlichen Geräten mit unterschiedlichen Screen-Größen ausgerichtet ist. Hier mag so manch Designer aufschreien: „Aber diese ganzen Responsive-Designs sehen doch alles gleich aus!“ Klar, manche Responsive-Websites mögen Ähnlichkeiten aufweisen, doch dass deine Seite mobile-ready ist, ist heutzutage einfach unerlässlich.

Die Aufrufe von mobilen Endgeräten wie Smartphones und Tablets zeigen immer weiter ansteigende Tendenzen.

Mobile

Wohl jeder kennt die Situation, auf seinem Smartphone eine Website aufrufen zu wollen und sich in einem Wust aus ungeordneten Textflächen und nicht reagierenden Buttons wiederzufinden. Deine Website in Sachen Responsive-Design fit zu machen ist also ein ganz entscheidender Erfolgsfaktor.

Gutes Beispiel:

Responsive

 

Ansicht auf dem Smartphone:

Responsive.PhoneJPG

 

Für jeden Zweck gibt es das passende Design. Wichtig ist nur den User nicht aus dem Fokus zu verlieren. Wenn du diese 5 Prinzipien bei deinem nächsten Projekt mit einfließen lässt, sollte dem Erfolg deiner Website nichts mehr im Weg stehen.

 

„Design isn’t just how it looks, it’s how it works“

 Steve Jobs

(Visited 85 times, 1 visits today)

Ein Beitrag von alphanaut

Schreibe einen Kommentar

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