Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » User Interface Design (Teil 4): Response-Elemente für Web-Anwendungen

User Interface Design (Teil 4): Response-Elemente für Web-Anwendungen

In dieser Artikelserie dreht sich alles um die Anwenderfreundlichkeit von Benutzerschnittstellen für Web-Anwendungen. Im vierten und letzten Teil dieser Serie geht es um Interaktivität, Rückmeldungen und essentielle Funktionen.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 6 Minuten
  • von Dmitry Fadeyev
  • 4. Mai 2010
Bookmarke mich
Share on pocket

In dieser Artikelserie dreht sich alles um die Anwenderfreundlichkeit von Benutzerschnittstellen für Web-Anwendungen. Teil 1 beleuchtet den theoretischen Hintergrund. In Teil 2 geht es um das Setzen von Schwerpunkten und das Lenken der Aufmerksamkeit, während Teil 3 Methoden für mehr Komfort im Besuchererlebnis thematisiert. Im vierten und letzten Teil dieser Serie geht es um Interaktivität, Rückmeldungen und essentielle Funktionen.

Vorgestellte Techniken in diesem Beitrag:

  • Laufzeitindikatoren – lassen Sie die Nutzer wissen, was passiert
  • So gestalten Sie Schaltflächen interaktiv
  • Nützliche Informationen für neue, noch leere Profile
  • Machen Sie die besonderen Funktionen publik
  • Absolut unerlässlich – Rückgangig machen
  • Nützliches Extra-Bonbon: Wiederherstellen
  • Bestätigungsmeldungen

Niemand liebt es, zu warten. Warten heißt, nichts zu tun. Dummerweise hat jede Anwendung Funktionen, deren Ausführung Zeit bedarf  – sei es zum Laden eines großen Dokuments oder sei es, um die Ergebnisse einer Suchanfrage zu recherchieren. Aber diese Wartezeit können Sie erheblich dadurch verkürzen, dass Sie einen Ladeindikator einblenden. Wann immer ein Ladevorgang stattfindet, blenden Sie einen Laufzeitbalken oder eine andere Animation ein.

Dropbox blendet einen Laufzeitbalken ein, um Anwender zu informieren, wie weit das Hochladen ihrer Dateien bereits fortgeschritten ist. Für Anwendungen dieser Art sind Laufzeitbalken unerlässlich, damit die Anwender abschätzen können, wie lange ein Vorgang noch dauern wird.

Wartezeit mit unterhaltsamen Zusatz-Infos verkürzen

Forschungsergebnisse zeigen, dass Anwender die Wartezeit kürzer empfinden, wenn beim Warten etwas auf dem Bildschirm passiert (Quelle). Laufzeitbalken sind prima für kurze Wartezeiten. Was tun Sie aber, wenn ein Ladevorgang eine Minute oder mehr in Anspruch nimmt? Während Sie die Ladezeit selbst nicht beeinflussen können – vorausgesetzt, dass Sie alles menschenmögliche getan haben, um den Vorgang entsprechend kurz zu halten – können Sie sehr wohl etwas an dem Warte-Erlebnis der Benutzer Ihrer Anwendung tun.

Viele Anwendungen blenden während langer Wartezeit wertvolle Tipps und Hinweise ein. Wenn die Anwender schon nicht produktiv sein können, so können sie wenigstens etwas Neues lernen.

Die Reaktions- bezieungsweise Interaktionsfähigkeit von Schaltlfächen hängt nicht allein von der Architektur des Backends ab. Die Art und Weise, wie Ihre Benutzerschnittstelle reagiert spielt eine ebenso große Rolle. Eines der meist genutzten Bedienelemente einer jeden grafischen Benutzeroberfläche sind Schaltflächen. In Desktop-Anwendungen haben Schaltflächen unterschiedliche Stati. Die Gebräuchlichste ist die Standardeinstellung, der Button in der Grundeinstellung sozusagen, und der aktive Status, wenn die Schaltfläche gedrückt ist.


Der Unterschied zwischen den Stati „aktiv“ und „Standard“ ist
bei den WordPress-Schaltflächen gut erkennbar.

Der „Search Button“ von WordPress sieht im aktiven Zustand exakt so aus, als sei er gedrückt worden. Das gibt den Anwendern eine direkte und gut erkennbare Rückmeldung darüber, ob ihr Klick erfolgreich war. Ebenso, wie bei Desktop-Anwendungen üblich, sollten Sie die Benutzeroberfläche und  Ihre Web-Anwendungen mit solchen zusätzlichen Informationen und Rückmeldungen für die Anwender versehen. Dazu gehören neben den verschiedenenen Stati auch Beschriftungen von Schaltflächen wie bei OtherInbox oder Tipps und Hilfe-Nachrichten wie bei Campaign Monitor.

Gut gelöst: Die Icons im Hauptmenü von OtherInbox sind zum besseren Verständnis beschriftet.

Wenn ein Anwender Ihre Web-App zum ersten Mal lädt, wird mit größter Wahrscheinlichkeit noch nicht viel auf dem Bildschirm erscheinen, da es noch keine Anwenderdaten gibt. Es gibt also nichts anzuzeigen. Nutzen Sie diesen leeren Zustand, um den Anwender die ersten Schritte mit Ihrer App zu erklären. Um das Ganze noch effizienter und benutzerfreundlicher zu machen, können Sie in diese Meldung einen Link oder eine Schaltfläche integrieren, die direkt zu einer bestimmten Aktion führt, wie das Beispiel von Campaign Monitor anhand der folgenden Abbildung zeigt.

Compaign Monitor bietet beim ersten Login eine umfassende Hilfenachricht und eine
prominent platzierte Schaltfläche zum Erstellen der ersten Kampagne.

Die Nutzer Ihrer Anwendungen werden die App nicht in- und auswendig kennen. Es wäre also hilfreich, bestimmte Funktionen oder Befehle innerhalb der Anwendung vorzustellen. Schon allein deshalb, weil Web-Apps wesentlich häufiger aktualisiert werden als Desktop-Programme, können die Benutzer nicht alle Tricks und Kniffe sowie die wichtigen Neuerungen kennen. Informieren Sie die Anwender über Änderungen und neue Funktionen durch Meldeboxen oder über Links zu Produkt-Tour und Hilfeseiten.

Tipp: Fügen Sie solche Links an prominenten Stellen ein, ohne dabei jedoch von anderen wichtigen Funktionen oder Bedienelementen abzulenken. Außerdem sollte man diese Nachricht nach dem Lesen schließen oder bei Bedarf deren Anzeige ganz abschalten können.

Yammer zeigt eine erläuternde Nachricht unter dem Haupteingabefeld an. Per Klick auf das
Kreuz, lässt sich diese Meldung nach dem Lesen ausblenden.

Eine Funktion, auf die Computernutzer sich inzwischen voll und ganz verlassen, ist die Möglichkeit, Aktionen per Tastenkürzel oder Symbol rückgängig zu machen. Sie haben versehentlich ein Diagramm verändert, an dem Sie gerade arbeiten? Kein Problem: Ein Klick auf Strg + Z beziehungsweise CMD + Z bringt das Diagramm beziehungsweise das gerade aktive Dokument wieder in den vorherigen Zustand.

Die Rückgängig-Funktion ist ein entscheidendes Werkzeug für „gutmütige“ Anwendungen. Sie sollten auch Ihre Web-Apps gutmütig gestalten. Nutzen Sie dazu entweder die universellen Tastaturkürzel oder blenden Sie eine entsprechende Nachricht ein, wie im folgenden Beispiel.


Sobald eine Nachricht gelöscht wird, blendet Gmail eine
Meldung ein, mit der Sie den Vorgang rückgängig machen können.

Löschaktionen können bei Writeboard bis zu zwei Monate nach dem Löschdatum rückgängig gemacht werden.

Menschen ändern manchmal ihre Meinung. Beim Löschen von kritischen Daten sollten Sie unbedingt zusätzliche Vorsichtsmaßnahmen einbauen, wenn es etwa um das Löschen von kompletten Projekt-Dateien in einer webbasierten Projektmanagement-Anwendung geht. Wenn Benutzer ein Projekt löschen, könnten Sie es, statt die Datei direkt auf ewig zu eliminieren, für einen bestimmten Zeitraum zwischenlagern.

Falls die Anwender später ihre Meinung ändern und das Projekt doch gerne zurück hätten, können Sie die Datei wiederherstellen. Die paar extra Megabytes zahlen sich auf jeden Fall aus, wenn Sie Ihren Kunden mit diesem zusätzlichen Komfort glücklich machen und ihm oder ihr jede Menge Ärger durch versehentlich oder vorschnell gelöschte Daten ersparen.

Wann immer Sie in Ihrer Anwendung „destruktive“ Vorgänge wie das Löschen von Dateien oder kompletten Ordnern erlauben, sollten Sie vor diesem Schritt warnen. Blenden Sie zu dem Zweck eine Bestätigungsmeldung ein, um die Anwender vor unbeabsichtigten Löschaktionen zu schützen und sicherzustellen, dass eine bestimmte Handlung wirklich beabsichtigt ist.

Das ist vor allem dann wichtig, wenn die Löschen-Schaltfläche sehr nah neben anderen häufig verwendeten Schaltflächen positioniert ist. Falls Grobmotoriker versehentlich auf die Löschen-Schaltfläche klicken, sollten sie die Gelegenheit haben, die Folgen dieses Missgeschick wirksam zu unterbinden. Gehen Sie aber sparsam mit solchen Bestätigungsmeldungen um, damit die Anwender nicht unnötig viel zu klicken und Ihre Anwendung dadurch unnötig langwierig und benutzerunfreundlich wird.

Fazit

Kennen Sie die japanische Philosophie beziehungsweise Management-Methode Kaizen? Ziel der Methode ist die kontinuierliche Verbesserung durch kleine, aufeinander aufbauende Schritte. Benutzerschnittstellen-Entwicklung für Web-Anwendungen muss nicht von Anfang an perfekt sein, denn Sie haben die Möglichkeit, die Anwendung kontinuierlich zu verbessern und zu aktualisieren. Entwickeln Sie Ihre Anwendungen nach der Methode des Kaizens oder einer Art App-Evolution. Erlauben Sie sich, Ihren Code graduell zu verbessern und im wahrsten Sinne des Wortes weiter zu entwickeln.

Die „alte“ Methode, Software auf CD-ROMs zu vertreiben, birgt einen gewaltigen Nachteil. Sobald die CDs gebrannt und an den Handel ausgeliefert waren, konnten Sie nichts mehr ändern – bis zum nächsten Update. Natürlich gibt es Patches zum Herunterladen und die ganze hinlänglich bekannte Palette der Bug Fixes. Aber den Ärger, den haben die Anwender, die das Patch oder Hotfix erst herunterladen und installieren müssen.

Bei Web-Anwendungen können Sie die Aktualisierung selbst vornehmen und die Benutzer Ihrer App kommen ohne eigenes Zutun in den Genuss einer verbesserten Anwendung. Der neue Ansatz der Software als Dienstleistung macht das möglich.

Noch einmal zum besseren Einprägen: Ihre Anwendung nicht sofort 100-prozentig sein. Falls etwas nicht so gut funktioniert, wie gedacht, können Sie es ändern. Das ist der Kaizen-Ansatz im Interface-Design: kontinuierliche, kleine, graduelle Verbesserungen. Versperren Sie sich Ihre Kreavitivät nicht durch die Angst, etwas perfekt machen zu müssen. Erlauben Sie sich aus Fehlern zu lernen und die Anwendererlebnisse für weitere Verbesserungen in Ihre Entwicklung einzubeziehen. Lebenslanges Lernen und kontinuierlicher Fortschritt sind die Devise.

(mm), ™

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dmitry Fadeyev

Dmitry Fadeyev

Agenturpartner

Haurand Webdesign

Aachen

Critch GmbH – Immobilienkanzlei FREITAG®

München

SEO-Sicht

Berlin

Wee Media | Webdesign Agentur

Dernbach

Homepage & Design Heroes GmbH

Balingen

Alle Agenturpartner

Jobs

Webtexter für SEO Agentur

Salzburg (Österreich)

SEO Manager – Vollzeit

Remote

Junior Webdesigner/ Mediengestalter

Innsbruck

Cloud Engineer Container & Kubernetes

Karlsruhe

Media Manager in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.