Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< 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

  • Aktualisiert am 28. Oktober 2022
  • von Dmitry Fadeyev
  • Webdesign
  •  

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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

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.

wordpress buttons.jpg User Interface Design (Teil 4): Response-Elemente für Web-Anwendungen
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.

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

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.

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

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 advertise feature.png User Interface Design (Teil 4): Response-Elemente für Web-Anwendungen

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.

gmail undo.png User Interface Design (Teil 4): Response-Elemente für Web-Anwendungen
Sobald eine Nachricht gelöscht wird, blendet Gmail eine
Meldung ein, mit der Sie den Vorgang rückgängig machen können.

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

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), ™

Dmitry Fadeyev

Dmitry Fadeyev

Inhaltsverzeichnis

Agenturpartner in Freiburg im Breisgau

Edit Content

agenturwitt

Wir machen Kommunikation in Markenqualität: Stilsicher, authentisch und ganzheitlich – passend zum Markenkern. Die Pluspunkte für Sie: Sie bekommen von agenturwitt Kreation pur, aus einem Guss, aus einer Hand. Ohne Reibungsverluste, ohne Overheads, ohne Umwege.

Unsere Besonderheit: die breite Markenerfahrung. Von Bier über 3D-Düsen bis Kräne, von Bank über Parkettboden bis Schokogetränk. agenturwitt ist seit über 20 Jahren aktiv und kreativ: Nutzen Sie unser umfassendes Know-how für Ihren Erfolg.

— Rainer Witt,
Inhaber
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit<