netz98 Blog

Der E-Commerce &
Magento Blog

E-Commerce

User Centered Frontend – Animationen animieren Nutzer

User Centered Design ist nichts Neues. Den Nutzer in den Fokus zu stellen, Bedienkonzepte nach intuitiven Erwartungen und Verhaltensweisen auszurichten, das gehört nicht nur zum guten Ton, sondern ist einfach ein Erfolgsrezept guter Produkte – und entsprechender Verkaufszahlen. Heute wirft Maria Kern einen Blick auf ein User Centered Frontend, auf Funktionen und Technologien.

zukunftsthemen2016-cover_neues-logo

 

 

Dieser Post basiert auf einem Artikel, der mit 10 weiteren spannende Fachbeiträgen rund um aktuelle E-Commerce Themen im kostenfreien Trend E-Book „Zukunftsthemen im E-Commerce 2016“ erschienen ist.

 

 

User Centered Frontend

User Centered Design (UCD) – ein Buzzword, das lange Zeit in aller Munde war und immer noch aktuell ist, beschreibt einen mehrstufigen Entwicklungsprozess in dem versucht wird, die individuellen Bedürfnisse der Benutzer zu analysieren, daraus Anforderungen abzuleiten und das Design entsprechend dieser Anforderungen zu entwickeln. Das Ziel ist ein Produkt, in unserem Kontext eine Anwendung, die sich idealerweise ganz nach den Erwartungen des Nutzers bedienen lässt und ihn zudem über den gesamten Bedienprozess unterstützt.

 

Aber geht hier noch mehr? Mit dem Blick auf die aktuellen Innovationen und neuen Möglichkeiten in der Entwicklung der Frontend-Technologien, möchte ich den UCD-Ansatz mit der Einführung des Begriffs User Centered Frontend um einige Aspekte erweitern, die speziell mit der Frontend-Umsetzung im Zusammenhang stehen.

 

Frontend-Technologien

Die fundamentalen Werkzeuge eines Frontend-Entwicklers umfassen HTML, CSS und Javascript. Vor allem seit dem Durchbruch von HTML5 und CSS3 in den gängigsten Browsern, ist die Begeisterung für Animationen sowie Effekte aller Art gestiegen und man findet sie überall. Die Möglichkeiten sind enorm. (Ein genereller Verzicht auf Javascript bzw. jQuery – was mittlerweile ja problemlos möglich ist-  aufgrund von Performanceerwägungen macht keinen Sinn. ier muss man die Animationen und Effekte im Einzelnen betrachten und abwägen. Eine kleine Hilfe hierfür gibt es unter: developers.google.com/web/fundamentals/design-and-ui/animations/css-vsjavascript)

 

Das Auge des Nutzers führen

Animationen und Transitions (dynamische Zustandswechsel von Elementen) vor allem nach oder während einer User-Interaktion, können dem User helfen, Prozesse besser zu verstehen. Wenn der Webseiten-Besucher durch einen Klick, ein Wischen, ein Mouse-Over oder dergleichen mit dem Frontend interagiert, gibt es mittlerweile viele Möglichkeiten, die Elemente, die in direktem Zusammenhang mit der User-Interaktion stehen, zu bewegen, zu verschieben oder sie animiert in andere Elemente umzuwandeln. Dadurch kann man die Aufmerksamkeit des Benutzers bewusst lenken. Das Auge lässt sich durch eine Animation so hin zu einem anderen Element der Webseite führen –> weil dort die nächste Aktion des Nutzers stattfinden muss, um zum Ziel zu kommen.

 

Aber nicht überfordern

Das Design und der Gesamtaufbau einer Webseite sind natürlich immer noch das A und O einer gelungenen User Experience, aber die sogenannten Microinteractions können diese noch verbessern und machen oft den kleinen aber feinen Unterschied. Am besten sind sie dann, wenn der Benutzer sie erst gar nicht als solche wahrnimmt, sondern sich einfach leiten lässt. Wird der Nutzer durch eine Bewegung überrascht, die er nicht versteht, kann er dadurch verunsichert werden und gar das Vertrauen in eine Anwendung verlieren. Bei der großen Auswahl an Möglichkeiten sollte man also vorsichtig sein und sich am besten bereits in der Konzeptphase genau überlegen, wo und wie man die kleinen Hilfsmittel einsetzt.

 

Microinteractions

Im Folgenden möchte ich einige sehr gelungene Beispiele vorstellen, bei denen klar wird, dass es sich bei den Microinteractions nicht nur um Spielereien handelt, sondern dass sie tatsächlich zur Funktion der Anwendung beitragen und die Usability erhöhen.

 

[tribulant_slideshow gallery_id=“18″]

 

Im FN Werkzeuge Online-Shop schiebt sich der Warenkorb, über den rechten Rand des Browsers hinein, während die bestehende Seite gleichzeitig nach links wegrutscht, sobald der Nutzer ein Produkt hinein legt oder im Header auf den Link zum Warenkorb klickt. Der Nutzer bleibt somit auf der aktuellen Seite und erhält trotzdem eine ausführliche Zusammenfassung seines Warenkorbes. Durch die Animation wird dem Benutzer deutlich, dass er diesen Layer jederzeit ein- und ausblenden kann, ohne dabei die aktuelle Seite verlassen zu müssen. Klickt er auf das Schließen-Symbol oder auf die dunkle Fläche, schiebt sich der Layer wieder hinaus.

 

Die Bestellplattform Lieferando.de ist eines der Beispiele, bei denen durch eine Animation visualisiert wird, wenn ein Produkt in den Warenkorb gelegt wird. Dabei wandert das Produkt von der Position des Mouse-Cursors – also dort, wo man das Produkt ausgewählt hat – über den Bildschirm in den Warenkorb.

 

Quelle: Screenshot Lieferando.de

Quelle: Screenshot Lieferando.de

 

Der User kann „sein Produkt“ somit direkt verfolgen und weiß, wo es ist. Dadurch erhält er automatisch die Sicherheit darüber, dass er es dort auch wieder entfernen kann.

 

In der mobilen Ansicht gibt es übrigens ein anderes visuelles Feedback. Der Warenkorb, der am unteren Bildrand immer zu sehen ist, leuchtet kurz in Orange auf. Auch hier wird das Auge des Nutzers dorthin geführt, wo er die Übersicht über seine Bestellung jederzeit aufrufen kann.

lieferando-mobile lieferando-mobile-effekt

Mehr zu gekonnten Umsetzung von Animationen und der Einbindung der Frontendentwicklung in einen User Centered Design Ansatz, eben User Centered Frontend gibt es wie gesagt im E-Book von netz98, den Zukunftsthemen im E-Commerce 2016.

Über den Autor / die Autorin

Kommentar hinterlassen

*Pflichtfeld

netz98 flyin

Verpassen Sie nicht mehr das Neueste rund um E-Commerce- und Magento-Themen!

Mit der Anmeldung zu unserem Newsletter erhalten Sie regelmäßig wissenswerte und spannende Informationen, die IHR Online-Business nach vorne bringen.

Vielen Dank für Ihre Anmeldung! Wir haben Ihnen soeben ein E-Mail gesendet. Bitte bestätigen Sie in der E-Mail Ihre Anmeldung.

X