Hallo zusammen, erinnert ihr euch an die „Tipps für bessere User Experience“ Postings (Teil 1, Teil 2 und Teil 3) von Anfang des Jahres? Heute gibt es einen weiteren Eintrag zu diesem spannenden Thema 🙂

Benutzerfreundlichkeit in der Praxis
Wie im zweiten Teil dieser Serie erklärt ist es Heutzutage auf Webseiten und in Web-Applikationen üblich sämtliche Informationen per AJAX-Request(s) nachzuladen. Manchmal passiert das automatisch im Hintergrund und manchmal durch eine Aktion des Benutzers, z.B. das anklicken einer Schaltfläche.

Um dem Benutzer in dieser Situation zu signalisieren das etwas passiert können wir verschiedene Dinge tun:

  • Eine Meldung oder „Lade-Grafik“ einblenden
  • Schaltfläche ändern (z.B. dessen Text änderrn)
  • Bereiche der Seite optisch hervorheben

Das hier soll uns als rudimentäres Beispiel dienen: Wir haben einen Button #button und ein Feld #target – beim klick auf den Button werden Daten vom Server nachgeladen und in das Feld geschrieben. In Javascript könnte das folgendermaßen aussehen (Prototype Syntax)

// Standard AJAX request on button-click.
var $button = $('button'),
    $target = $('target');

// Add the observer.
$button.on('click', function () {
    new Ajax.Request('load-application-url', {
        onComplete: function (transport) {
            // Update the target with the loaded content.
            $target.update(transport.responseText);
        }
    });
});

Das Ergebnis im Browser könnte in etwa so aussehen:ux-example-1
Hier sieht der Benutzer nicht, das nach dem klick etwas passiert – es könnte mit einem Fehler verwechselt werden… Vielleicht wurde der Button nicht richtig geklickt? Oder vielleicht reagiert die GUI nicht?

Um die Benutzerfreundlichkeit zu erhöhen möchten wir dem Benutzer also klar machen, das seine Aktion derzeit verarbeitet wird. Das könnte so aussehen (entschuldigt die Qualität):ux-example-2
Um dieses Ergebnis zu erzielen müssten wir den Code um ein paar Zeilen erweitern. Dank „Method chaining“ könnte man das auch in jeweils eine Zeile zusammenfassen 🙂

// Standard AJAX request on button-click.
var $button = $('button'),
    $target = $('target');

// Add the observer.
$button.on('click', function () {
    $button.disable()
        .down('img').writeAttribute('src', 'loading.gif')
        .next('span').update('Lade...');

    new Ajax.Request('load-application-url', {
        onComplete: function (transport) {
            $button.enable()
                .down('img').writeAttribute('src', 'info.png')
                .next('span').update('Ausführen');

            // Update the target with the loaded content.
            $target.update(transport.responseText);
        }
    });
});

Ich habe in diesem Snippet nicht nur das Icon ausgetauscht sondern auch gleichzeitig den Butten während des ladens deaktiviert. Die Idee dahinter ist einfach: während der Request läuft, soll der Benutzer nicht erneut auf die Schaltfläche klicken können um einen zweiten (oder dritten …) AJAX Request zu starten. Ein ganz einfacher Trick, den man sich unbedingt merken sollte 🙂

Habt ihr noch Vorschläge oder andere gute Beispiele um die Benutzerfreundlichkeit zu erhöhen? Schreibt sie in die Kommentare!

Das war es auch schon wieder für diese Woche, bis zum nächste Eintrag wünsche ich euch Happy Coding!

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.