Kleine Innovationen, großer Nutzen – der Weg zur perfekten Usability

Neben protzigen Grafiken gibt es auch noch die Usability. Dieser Beitrag zeigt Webseiten, die durch kleine Innovationen benutzerfreundlicher werden.

  • von Lennart Prange

Webdesign entwickelt sich ständig weiter – an der einen Ecke sehe ich immer wieder unglaublich detaillierte und interessante Webdesigns, an der anderen entwickeln sich durch CSS 3 und HTML 5 ganz neue Möglichkeiten. Eins bleibt meistens aber auf der Strecke: Der Nutzer.

Zwar haben viele Webseiten mittlerweile eine anständige Usability, aber die etablierten Grundsätze und Methoden bleiben Verbesserungswürdig. Immer. Momentan scheinen sich viele Webdesigner aber nicht damit zu beschäftigen, wie sie das Erlebnis für die Nutzer durch Innovationen bei Navigationsstruktur und Informationsstruktur verbessern können. Stattdessen gibt es Logos aus CSS und immer aufwändigere grafische Effekte.

In diesem Artikel geht es um Webseiten, die weiterdenken und mit kleinen Innovationen glänzen.

Die Aufgabe eines Webdesigners

Ein guter Webdesigner macht Webseiten, die sich verkaufen und Nutzer anziehen. Aber er ist auch dafür zuständig, das Web weiterzuentwickeln und seinen Kunden immer neue Lösungen zu bieten, mit denen er sich von seiner Konkurrenz abhebt. Ich habe viele Webdesigner gesehen, die außergewöhnliche Fähigkeiten mit Photoshop haben und einen eigenen Stil entwickelt haben, der einen hohen Wiedererkennungswert besitzt. Letztendlich ist das aber meistens nichts, was Webdesign an sich wirklich weiterbringt.

In diesem Beitrag werdet ihr Seite sehen, die nicht mit Lichteffekten oder außergewöhnlichen Texturen protzen müssen. Stattdessen stellen sie Informationen ins Zentrum und arbeiten mit kleinen Innovationen um ihren Nutzern den Zugang zu ihnen möglichst einfach und angenehm zu machen.

Es geht hier um Ideen, die vielleicht nicht abseits des Mainstreams sind oder das Rad neu erfinden. Ganz im Gegenteil: Sie entwickeln Vorhandenes weiter, verbessern es. Alles funktioniert so intuitiv, dass kein Nutzer Probleme mit der Benutzung haben sollte. Der Besuch wird aber spürbar angenehmer.

Techi

http://www.techi.com/

Den Anfang macht techi.com. Auf den ersten Blick ist das eine schöne, solide Seite. Das Kastendesign mit ordentlich White Space finde ich persönlich sehr angenehm, aber natürlich nicht unbedingt sehr neu.

Es fällt aber sofort auf, das Techi darauf achtet, seinen Besuchern eine funktionierende und angenehme Oberfläche zu bieten. Einzelne Artikel sind mit Farben gekennzeichnet und können sehr leicht sortiert werden, die Artikel sind dank Zwischenüberschriften und annehmbarer Typographie gut lesbar, es werden viele Bilder benutzt usw.

Wenn man ein wenig mehr auf der Seite surft, findet man aber sehr schöne kleine Details.

1. Die Navigation

techi-navi

Techi verzichtet auf die Standard-Navigation am Anfang der Seite. Stattdessen werden die Kategorien in der Sidebar präsentiert. Das sieht mit den Icons nicht nur sehr gut aus, sondern ist auch schön gelöst. Klickt man nämlich auf eine Kategorie, lädt die Seite nicht komplett neu. Stattdessen werden in der Box die letzten Beiträge aus der Kategorie angezeigt. Sofort. Erst wenn man auf See all klickt muss man die Seite neu laden.

Das ist extrem nützlich und sehr angenehm. Wir kennen Ähnliches vielleicht von Tabs, in diesem Fall wurde das Ganze nur etwas weitergedacht.

2. Die Tags

techi-tags

Wenn man mit extrem vielen Tags arbeitet, kann es schon mal unübersichtlich werden. Um das Problem zu lösen, sortiert Techi seine Tags nach dem Alphabet. So fällt es mir als Nutzer wesentlich leichter die Tags zu finden, nach denen ich suche.

Fazit

Die Navigation und die Darstellung der Tags habe ich so noch nicht gesehen, trotzdem sind sie selbsterklärend und daher ohne Probleme zu benutzen. Außerdem ist es nicht nur einfach anders, sondern auch besser. Ein zentraler Punkt. Ich würde mich freuen, ähnliches häufiger zu sehen.

BuySellAds

http://buysellads.com/

Auf BuySellAds.com bieten viele renommierte Blogs ihre Werbeplätze an. Die Plattform ist extrem bekannt und kann sich deshalb auch ein exzellentes Design leisten.

1. Die Eingrenzungsmöglichkeit

buysellads-eingrenzung

Wer als Werbetreibender hier nach passenden Partnern sucht, hat mehrere tausend Seiten zur Auswahl. Naheliegend ist deshalb, dass eine Sortierfunktion geschaffen wurde, mit der man die potenziellen Partner stark eingrenzen kann. Es handelt sich dabei allerdings nicht um Drop-Down Menüs, die mir die Möglichkeit bieten, aus verschiedenen vorgegebenen Eingrenzungen zu wählen. Ich kann mit einem Scrollbalken selber sehr effektiv und einfach eingrenzen. Das ist hervorragend gelöst, zwar nicht mehr ganz neu aber trotzdem selten gesehen.

2. Die Liste

buysellads-liste

Klickt man oben auf Buy Ads bekommt man erst mal eine Liste, die alle möglichen Partner auflistet und nach Impressions sortiert ist. Nun kann ich nicht nur diese Sortierung ändern und zum Beispiel nach Preis sortieren. Diese Liste bietet mehr.

Klickt man auf einen Namen wird man nämlich nicht zu einer Unterseite weitergeleitet. Es klappt einfach ein “Fenster auf”, das mir die wichtigsten Infos anzeigt. Das verkürzt die Wartezeiten enorm und macht die Plattform sehr effektiv.

Reuters

http://www.reuters.com/

Reuters.com ist ein recht beeindruckendes News-Portal mit einem sehr frischen und innovativen Design. Das habe ich auch bereits hier besprochen. Aber Reuters glänzt nicht nur mit einem sehr übersichtlichen und aufgeräumten Design.

1. Markets, Sector immer im Blick

Reuters hat offensichtlich viele Besucher, die irgendetwas mit dem Finanzsektor zu tun haben. Und für diese Zielgruppe hält die Webseite deswegen auch ein sehr nützliches Feature bereit, das ich so noch nirgendwo gesehen habe.

Schon auf der Startseite hat man auf der rechten Seite die Möglichkeit, auf Markets zu klicken und so den Finanzbereich mit verschiedenen Charts und wichtigen Informationen zu öffnen. Das ganze funktioniert wieder ohne einen kompletten Reload der Seite. Man kann auch schnell zwischen News und dem Modul hin und her wechseln.

Wer nun noch etwas weiter surft, wird feststellen, dass sich dieses Modul auch anpasst. Wenn ich mich also im Energiesektor bewege, bekomme ich nicht mehr die allgemeinen Charts von Dax & Co. sondern Informationen zu diesem Sektor.

Weiterdenken

Drei Beispiele sind für meine Verhältnisse zwar ungewöhnlich wenig, aber ich da sie ausführlich besprochen wurden, sollte das reichen. Und es zeigt euch definitiv, worauf ich in diesem Beitrag hinauswill.

Eine außergewöhnliche Webseite zeichnet sich nicht nur durch extrem gutes Design und exzellente Programmierung aus. Usability ist ein enorm wichtiger Faktor bei der Bewertung von Internetseiten und die Spitze ist einfach nie erreicht. Deshalb muss man etablierte Standards immer wieder überdenken, sie weiterentwickeln. Nur so kann man sich weiterentwickeln und bessere Webseiten erstellen.

Die obigen Beispiele zeigen nicht nur ein ansehnliches, schlichtes Design, sondern eben auch kleine Innovationen, die sie einzigartig machen und meiner Meinung nach auch benutzerfreundlicher.

Techi.com zeigt, wie man die richtigen Ideen bekommt: Versetzt euch in die Besucher hinein. Warum klickt man wohl auf eine Kategorie? Natürlich um mehr Beiträge aus dieser Kategorie zu sehen. Ist es dafür nötig, die komplette Webseite neu zu laden? Nein.

Die Navigation von ANidea zeigt einen ähnlichen Ansatz und ist genauso eine Weiterentwicklung. Das Rad wurde nicht neu erfunden, aber runder gemacht.

Weitere Beispiele?

Ich würde mich über weitere Beispiele von eurer Seite sehr freuen. Vielleicht wollt ihr ja auch eure Meinung zu meinen Ausführungen los werden. Das interessiert mich wie immer brennend. Ich freue mich auf Kommentare, Retweets und natürlich über jeden Besucher. Vielen Dank fürs Lesen 🙂

9 Kommentare

  1. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.