Gambio GX3 Usability-Tipp: Kundenlogin Eingabefeld automatisch fokussieren

Haben Sie die Zugangsdaten für das Kundenlogin in Ihrem Gambio-Shop im Browser gespeichert? Wenn Sie das Login-Formular dann noch mittels Mausklick statt der Enter-Taste absenden, fällt Ihnen gar nicht auf, wie lästig der überflüssige Klick zur Fokussierung des Eingabefeldes ist. Mit diesem kleinen Code-Snippet lösen Sie das Problem und steigern die Nutzerzufriedenheit.

Kleine Änderung für höhere Benutzerzufriedenheit: Eingabefeld beim Kundenlogin automatisch fokussieren

Problem: Lästiger, weil überflüssiger Klick

Wenn Ihnen das Problem bei Ihrem eigenen Gambio-Shop aufgrund eingespeicherter Zugangsdaten nicht auffällt, kennen Sie es vielleicht von anderen Seiten. Was möchte man wohl tun, wenn man auf „Anmelden“ oder „Login“ klickt? Sofern man sich nicht verklickt hat, möchte man sich bestimmt so unkompliziert wie möglich einloggen.

Dabei ist es äußerst hilfreich, wenn das erste Eingabefeld zur Angabe der Login Credentials automatisch fokussiert ist. Selbst wenn die Felder bereits mit den Zugangsdaten vorausgefüllt sind, genügt in diesem Fall meist ein Drücken der Enter-Taste, um das Login-Formular abzusenden.

Zugegeben: Es funktioniert alles und wir jammern auf hohem Niveau. Aber es sind die Kleinigkeiten, die zu einem positiven Benutzererlebnis beitragen und Kunden aufgrund zufriedenstellender Usability wiederkehren lassen.

Lösung: Eingabefeld automatisch fokussieren

Ich gebe Ihnen jetzt ganz einfach den Code an die Hand und Sie wissen bestimmt besser als ich, ob es irgendwo im Gambio-Backend oder mit einem StyleEdit eine Möglichkeit gibt, JavaScript-Code möglichst weit unten im Dokument zu platzieren.

Meine Vorgehensweise war diese:

  1. /templates/Honeygrid/module/footer.html kopieren als /templates/Honeygrid/module/footer-USERMOD.html
  2. den Code am Ende der Datei einfügen
  3. Datei ins selbe Verzeichnis wie die footer.html hochladen
  4. Cache für Modulinformationen leeren und ggf. auch den Cache für Seitenausgabe leeren

Auf diese Weise ist die heilige Update-Resistenz gegeben. Praktisch gesehen ist es aber mit Sicherheit einfacher, den Code nach einem Update wieder in die Gambio-Original-Datei einzufügen, statt umgekehrt Gambios Änderungen an der Original-Datei in die kopierte USERMOD-Datei zu übernehmen. Entscheiden Sie selbst… Hier ist jedenfalls der Code:

<script>(function() {
document.querySelector('a.dropdown-toggle[title="Anmeldung"],a.dropdown-toggle[title="Login"]').onclick=function(){
document.getElementById('login-username').focus();
}
})();
</script>

Warum funktioniert das nicht bei der Mobilversion?

Zumindest in den Versionen 3.6 bis 3.10 verstößt Gambio gegen die Spezifikation, wonach Elementen-IDs unikär sein müssen. Bei Auflösungen, in denen das Burger-Menü zum Einsatz kommt, ist beim Theme (Templateset) Honeygrid das Eingabefeld für die E-Mail-Adresse doppelt im Dokument und natürlich auch 2x mit der ID login-username.

Tut mir Leid. Ich helfe wirklich gerne weiter. Aber bei so einem Kraut-und-Rüben-Code muss erst einmal jemand anderes seine Hausaufgaben machen.

Benutzererfahrung verbessert

Ja, dieses kleine Mosaiksteinchen führt nicht zwangsläufig zu einem neuen Umsatzrekord. Aber wenn mit geringem Aufwand eine ganz offensichtliche Steigerung der Usability umsetzbar ist, sollte man das auch tun. Das Login-Eingabefeld zu fokussieren, um dem Nutzer einen Klick zu sparen, fällt zweifelsfrei in den Geltungsbereich dieser Aussage.

Und damit der Beitrag nicht zur Sackgasse wird: Weitaus mehr als nur ein Mosaiksteinchen auf dem Weg zur optimalen Benutzererfahrung ist die Website-Geschwindigkeit. Das gilt nicht nur für Mobilgeräte und ganz sicher nicht erst seit Googles Geschwindigkeits-Update von Juli 2018. Sofern Sie es also noch nicht tun, empfehle ich Ihnen ganz dringend, Ihre Gambio-Ladezeiten zu optimieren. Sowohl Ihre Kunden als auch Google werden es Ihnen danken!

»«

Schreiben Sie einen Kommentar