Lernfähigkeit für Webdesign verstehen: Tipps und bewährte Praktiken

WEBDESIGN, INTERNET / MÄRZ 2018 / 6 MINUTEN LESEN

Der Aufbau einer lernfähigen Website ist viel schwieriger, als es sich anhört. Das Ziel sollte eine klare Benutzererfahrung sein, die die Besucher schnell aufgreifen und verstehen können. Designer von mobilen Anwendungen können dies durch Onboarding lösen, das den Benutzern das Erlernen der Benutzeroberfläche erleichtert. Aber Websites können nicht immer langwierige Tutorials anbieten.

Werfen wir einen Blick auf die Lernfähigkeit und sehen wir, wie Sie diese Techniken auf Ihre Websites anwenden können. Die meisten Besucher wissen, wie man im Web surft, also geht es nicht wirklich darum, Schnittstellen zu erstellen, die man lernt, sondern es geht darum, einfach nur Konventionen zu befolgen, damit sie sich auf Ihrer Website wohlfühlen.

Warum Lernfähigkeit wichtig ist

Die Menschen beschäftigen sich mehr mit einer Schnittstelle, wenn sie wissen, wie man sie benutzt. Umgekehrt prallen die Menschen von Schnittstellen ab, die einfach nur schrecklich verworren aussehen.

Sie möchten ein Design für die Lernfähigkeit entwickeln, damit die Leute in der Nähe bleiben. Das Ziel ist es, ihnen dabei zu helfen, Ihre Schnittstelle schnell zu erlernen, damit sie sie weiterhin benutzen können. Auf diese Weise erhalten Sie mehr wiederholte Benutzer und die Website hat eine geringere Absprungrate.

Interaktionsdesign sollte lernbar sein oder zumindest nicht verlangen, dass der Designer den Leuten beibringt, wie man die Schnittstelle benutzt. Das funktioniert nicht für komplexe Software wie Photoshop, aber eine Website ist keine komplexe Software.

Zum Beispiel kennt jeder die Website von Amazon. Sie ist voll von Tausenden von Kategorien und Millionen von Produkten. Bei so viel Inhalt würde man erwarten, dass sie ein Chaos ist.

Doch das Surfen und Suchen bei Amazon ist wirklich nicht allzu schwer. Aber warum?

Weil sie sich auf relevante Komponenten konzentrieren, die den Menschen helfen, die Schnittstelle zu verstehen.

Bei komplexeren Seitenelementen muss man sich nicht immer auf den gesunden Menschenverstand verlassen. Twitter verwendet beispielsweise kleine Tooltip-Hinweise, wenn Sie mit dem Mauszeiger über einige Elemente in der Benutzeroberfläche fahren.

Ihr Ziel ist es, mehr Benutzerinteraktion zu fördern und den Menschen zu helfen, Twitter weiterhin zu nutzen. Es ist eine garantierte Möglichkeit, die Gesamtnutzerbasis zu vergrößern und eine höhere Retentionsrate zu fördern.

In diesem Sinne wollen wir ein paar Techniken für eine lernfähige Website ein wenig genauer betrachten.

Konsistenz schafft Vertrautheit

Wir haben bereits erwähnt, wieso eine konsistente Schnittstelle für ein gutes Design notwendig ist. Das bedeutet, dass Sie gemeinsame Seitenelemente verwenden wollen, die den Menschen vertraut sind, und sie langfristig ähnlich halten wollen.

Bestimmte Elemente sollten auf jeder Seite an der gleichen Stelle bleiben. Ihre Navigation, Ihr Logo und der Hauptinhaltsbereich sollten leicht zu finden sein.

Komplexere Anwendungen müssen jedoch über den reinen Informationsgehalt hinausgehen. Nehmen Sie zum Beispiel das Dropbox-Backend, das seit seinem Start im Wesentlichen gleich aussieht.

Sobald ein Benutzer die Dropbox-Oberfläche einmal gelernt hat, muss er sie nie wieder neu erlernen. Das ist das Ziel der Konsistenz.

Wenn jemand zum zweiten Mal zu Dropbox zurückkehrt, ist er bereits damit vertraut. Wenn man es eine Zeit lang benutzt hat, wird man mit der Benutzeroberfläche vertraut und erwartet, dass sie sich auf eine bestimmte Art und Weise verhält.

Sie können diese Technik auch auf Blogs und Inhaltsseiten finden, sie ist nur weniger ausgeprägt. Bluewin von Swisscom hat zum Beispiel ein neues Design eingeführt und alle ihre Hover-Events geändert, um einen bewegten Animationseffekt zu verwenden.

Wenn Sie eines der Bilder der Geschichte, die Schlagzeilen oder einen der Navigationslinks haben, werden Sie feststellen, dass eine kleine Animation diese Elemente nach rechts bewegt.

Diese bleibt auf der gesamten Website konsistent und sagt den Besuchern, was sie erwarten können.

Achten Sie auf Konsistenz in Ihrem Design und halten Sie diese Elemente so lange wie möglich konsistent.

UI Antwort & Feedback

In der mobilen Welt wird oft über Mikro-Interaktionen gesprochen und wie diese das Verhalten beeinflussen. Bei diesen Interaktionen handelt es sich in der Regel um Animationen oder Reaktionen der Benutzeroberfläche auf das Verhalten der Benutzer, und sie sind für eine lernfähige Schnittstelle von entscheidender Bedeutung.

Die Benutzer brauchen Beweise dafür, dass das, was sie getan haben (angeklickt, ein Formular abgeschickt, Inhalte eingegeben), sich tatsächlich auf die Seite ausgewirkt hat.

Sie können dies mit einfachen Animationseffekten oder durch die Erstellung von Seitenelementen, die auf die Benutzer reagieren, erreichen.

Ein gutes Beispiel ist das Anmeldeformular auf der Registrierungsseite von MailChimp.

Wenn Sie ein Passwort für Ihr Konto eingeben, streicht die MailChimp-Benutzeroberfläche automatisch bestimmte Anforderungen, wenn Sie sie treffen. Zum Beispiel sind Passwörter erforderlich, die mindestens 8 Zeichen lang sein müssen.

Sobald Sie also 8 Zeichen eingeben, wird der kleine Punkt durchgestrichen. Es zeigt, dass Ihre Tastenanschläge die Seite beeinflussen, und der Benutzer kann dann erfahren, wie das Passwortfeld funktioniert.

Ein weiteres gutes Beispiel ist das Layout der Photojojo eCommerce-Produktseite.

Immer wenn Sie auf „In den Warenkorb“ klicken, scrollt die Seite nach oben, wo Sie einen Tooltip mit einer Übersicht über Ihren Warenkorb sehen.

Diese Antwort der Schnittstelle lässt Sie wissen, dass Sie gerade etwas in Ihren Warenkorb gelegt haben. Das ist ein deutlicher Hinweis darauf, dass Ihr Mausklick etwas getan hat.

Standardkonventionen befolgen

Wir haben bereits über Standards im Webdesign gesprochen, bevor wir den Wert der Konsistenz für Web-Layouts behandelt haben.

Wenn Sie eine Website entwerfen, die für den durchschnittlichen Alltagsgebrauch gedacht ist, müssen Sie Konventionen beachten. Es ist nicht die Zeit, kreativ zu werden oder mit den üblichen Erwartungen zu spielen.

Besucher möchten die Navigationsmenüs ganz oben sehen. Die Links sollten mit dem Mauszeiger und dem Klick funktionieren, und wenn es ein Dropdown-Menü gibt, sollte es sofort erscheinen.

Wenn Sie auf Lernfähigkeit ausgelegt sind, sollten Sie nicht versuchen, das Rad neu zu erfinden. Schauen Sie sich stattdessen an, was alle anderen tun (zumindest die guten Sachen) und halten Sie sich daran.

Zum Beispiel enthält diese Checkout-Seite kleine Plus-/Minus-Symbole zum Ändern der Menge vor dem Auschecken.

Es ist ein sehr häufiges Merkmal in E-Commerce-Shops und die Benutzer wissen einfach von Natur aus, wie man es benutzt.

Je häufiger ein Interface-Feature ist, desto grösser ist die Wahrscheinlichkeit, dass die Leute es einfach intuitiv verstehen werden.

Dasselbe gilt für Blog-Layouts. Achten Sie auf eine starke Navigation oben mit Blog-Kategorien, deutlich sichtbare Überschriften, ein Bild am Anfang der Seite und dann den Hauptteil des Artikels.

Bleiben Sie bei dem, was funktioniert, und versuchen Sie, sich von anderen Websites inspirieren zu lassen.

Bei Blogs können Sie versuchen, sich andere, einfachere Blogs oder sogar Online-Magazine anzusehen, um zu sehen, welche Elemente sie alle gemeinsam haben. Wenn Sie etwas auf Dutzenden von Websites sehen, dann ist es ein Hinweis darauf, das selbst zu replizieren.

Und vielleicht müssen Sie sogar Standardkonventionen auf der Grundlage Ihres eigenen Designs in Betracht ziehen, sobald es lange genug existiert.

Die SERPS-Seite von Google zum Beispiel sieht seit Jahrzehnten im Grunde genommen gleich aus. Ja, sie hat sich ein wenig verändert, aber zum größten Teil nicht wirklich.

Bleiben Sie konsistent mit Ihren eigenen Konventionen. Gestalten Sie Ihre Website nicht eines Tages radikal um, ohne dass Sie die Möglichkeit haben, sich zu ändern – lernen Sie aus dem Misserfolg von anderen mit der wahnsinnigen Änderung der Benutzeroberfläche.

Sobald Ihr Design lange genug online ist, können Sie darauf wetten, dass viele Leute mit Ihren Konventionen vertraut geworden sind. Versuchen Sie, diese nicht zu sehr zu ändern.

Zugegeben, diese Tipps sind erst der Anfang der Erlernbarkeit, daher ist es wichtig, diese Ideen in die Praxis umzusetzen und zu sehen, wie sie funktionieren.