Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » User Interface Design für Web-Anwendungen (3)

User Interface Design für Web-Anwendungen (3)

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 5 Minuten
  • von Dmitry Fadeyev
  • 28. April 2010

Inhaltsverzeichnis

In dieser Artikelserie dreht sich alles um die Anwenderfreundlichkeit von Benutzerschnittstellen für Web-Anwendungen. Teil 1 beleuchtet den theoretischen Hintergrund. In Teil 2 ging es um die farbliche Gestaltung, den Einsatz von Layern, zum Abdunkeln des Hintergrunds und Methoden, mit denen Sie die Aufmerksamkeit der Anwender lenken können.

Vorgestellte Techniken in diesem Beitrag:

Mehr Effizienz durch Blocklinks
Den Fokus automatisch in die Wiederholungsschleife setzen
Bedienschaltflächen per Hover-Effekt ein- und ausblenden
Eingabefelder automatisch ergänzen
Beschriftungen in Eingabefeldern
Kontextbezogene Schnittstellen-Elemente
Setzen Sie Symbole sparsam ein

Mehr Effizienz durch Blocklinks

Block-Links mit Padding sind aufgrund der größeren Fläche mit dem Mauszeiger wesentlich einfacher und bequemer zu „treffen“ als reine Textlinks. Web-Anwendungen vertrauen auf HTML-Blockelemente, was einen üppigen Gebrauch des Anker-Elements (besser bekannt als „Link“) bedeutet.

Das Anker-Element wird standardmäßig „inline“ dargestellt, was bedeutet, dass seine Breite und Höhe dem darin befindlichen Text entspricht. Das heißt wiederum, dass der klickbare Bereich des Links lediglich der Texthöhe und -breite entspricht. Indem wir dem Anker-Element „Padding“ zufügen, machen wir es größer.

Wenn Sie Hyperlinks, die in einer Sidebar untereinander aufgelistet sind, in „Block“ umwandeln, ist das noch besser. Sie können den Elementtyp über die CSS-Eigenschaft display bestimmen. Damit definieren Sie den Link als Blockelement, so dass seine Höhe und Breite nicht länger vom Text bestimmt wird, sondern sich über die gesamte Höhe und Breite des Containers erstreckt. Diese Standardeinstellung von Blockelementen ist ideal für vertikale Linklisten in einer Sidebar.

mobileme paddedlinks User Interface Design für Web-Anwendungen (3)

MobileMe nutzt Links mit Padding in der Sidebar-Navigation. Die großen Flächen lassen sich bequem anklicken.

Den Fokus automatisch in die Wiederholungsschleife setzen

Formularlastige Anwendungen können davon profitieren, dass das Haupteingabefeld beim Laden der Web-Seite automatisch aktiviert wird. Die Anwender können dann bereits beim Laden der Seite mit ihrer Eingabe beginnen.

Praxis-Beispiel: Suchmaschinen wie Google setzen den Fokus auf das zentrale Eingabefeld, da anzunehmen ist, dass die ankommenden Web-Wanderer eine Suchanfrage in dieses Feld eingeben möchten.  Vorteil: Die Nutzer können beim Laden der Seite sofort mit dem Tippen beginnen.

Dieses Prinzip können Sie auf andere Anwendungen, wie zum Beispiel auf Online-Shops, übertragen. Wenn ein Besucher einen Artikel in seinen Warenkorb befördert hat, möchte er möglicherweise noch einen weiteren dazu legen. Setzen Sie den Fokus daher erneut auf das entsprechendee Eingabefeld, um schnell aufeinanderfolgende Eingaben zu ermöglichen.

User Interface Design für Web-Anwendungen (3)

Tadalist ermöglicht es, Aufgaben zügig einzugeben. Wenn Sie eine neue Aufgabe anlegen und „Enter“ drücken, wird das Eingabefeld erneut eingeblendet.

Bedienschaltflächen per Hover-Effekt automatisch ein- und ausblenden

Viele Anwendungen haben kontextbezogene Schaltflächen wie „Weiterleiten“, „Antworten“ oder „Löschen“ zum Bearbeiten der vorhandenen Artikel, Dateien, E-Mails, Blogposts oder Twitter-Feets – nennen wir es kurz Inhalte. Damit es einfacher wird, die Funktionen auf die einzelnen Inhaltselemente anzuwenden, stehen die Befehlsschaltflächen meist direkt neben oder unter den Inhaltselementen. Bei umfangreichem Content sorgt das für unzählige „Löschen-„Schaltflächen.

Solche Dubletten vermeiden Sie per Hover. Sie können Ihre Schnittstellen erheblich entrümpeln und schlanker machen, wenn Sie kontextbezogene Funktionen für das jeweils aktive Inhaltselement über die CSS-Eigenschaft Hover ein- und ausblenden.

Beispiel Twitter: Wenn die Anwender mit dem Mauszeiger über ein Tweet fahren, werden die Funktionen „Antworten“ und „Zu Favoriten hinzufügen“ eingeblendet. Bei den nicht-aktiven Tweets sind diese Schaltflächen nicht zu sehen.

Einwurf: Stichwort „Auffindbarkeit“

Bevor Sie solche Hover-Bedienelemente ensetzen, sollten Sie kurz erwägen, ob Ihre Zielgruppe diese Elemente auch entdecken kann. Die Anwender Ihrer Apps können die Elemente schließlich nur dann nutzen, wenn sie sie auch finden. Sind die Elemente also prominent genug, so dass die Anwender unweigerlich darüber stolpern werden? Die meisten Menschen neigen ohnehin dazu, mit dem Mauszeiger suchend über den Bildschirm zu fahren, weil sie erwarten, irgendwelche Links oder Tool-Tipps zu finden. Das ist also kein Problem.

Nutzer mobiler Geräte, wie etwa Telefone, haben möglicherweise keinen Mauszeiger. Damit wären Ihre Hover-Bedienelemente für diese Nutzer-Gruppe unzugänglich.

User Interface Design für Web-Anwendungen (3)

Twitter zeigt die „Antworten“ – und „Zu Favoriten hinzufügen“-Schaltflächen beim Hovern rechts neben den Tweets.

Eingabefelder automatisch ergänzen

Sollte Ihr Formular oder Ihre Anwendung multiple Eingabefelder erfordern – entweder zum Einfügen mehrerer E-Mail-Anhänge oder zum Hochladen mehrerer Dateien, können Sie erweiterbare Formulare nutzen, um das elegant zu erledigen.

Da Anwender zu einem Zeitpunkt immer nur mit einem Feld arbeiten können, sollten Sie jeweils nur ein Feld sichtbar machen und das nächste erst dann einblenden, wenn die Eingabe ins erste Feld abgeschlossen ist. So halten Sie Ihre Formulare schlank und die Eingabemöglichkeiten dennoch komfortabel.

User Interface Design für Web-Anwendungen (3)

Die Projektmanagement-App „Basecamp“ erlaubt es, mehrere Dateien an eine Nachricht anzuhängen. Es wird jedoch immer nur ein einzelnes Eingabefeld angezeigt.

Beschriftungen in Eingabefeldern

Schnittstellen zu vereinfachen, ist gleichbedeutend mit der Beschränkung aufs Wesentliche. Dies erfordert sorgfältige Überlegung, was verzichtbar ist, um Platz für die wirklich wichtigen Bedienelemente zu schaffen.

Tipp: Setzen Sie Beschriftungen in die Eingabefelder statt links daneben oder darunter. So sparen Sie nicht nur Platz, sondern auch mehr Klarheit. Selbst der schusseligste Anwender versteht sofort, was wozu gehört.

User Interface Design für Web-Anwendungen (3)

MobileMe hat den Login-Bildschirm durch Beschriftungen in den Eingabefeldern sehr kompakt gestaltet.

Kontextbezogene Schnittstellen-Elemente

Gelegentlich ist es erforderlich, zusätzliche Optionen für die etwas fortgeschritteneren Benutzer einer Anwendung anzubieten. Dennoch möchten Sie Ihre Schnittstelle nicht überladen. Eine gute Möglichkeit für solche Zwecke sind kontextbezogene Schnittstellen-Elemente, die bei Bedarf aktiv werden.

Beispiel: Wenn Sie irgendwo in Ihrer Anwendung ein Suchfeld mit erweiterten Suchmöglichkeiten anbieten, können Sie standardmäßig nur die Suchleiste einblenden. Wenn der Cursor ins Eingabefeld gesetzt wird, können Sie auch die Schaltflächen für die erweiterten Optionen einblenden. So bleibt Ihre Schnittstelle schlank und übersichtlich – die zusätzlichen Funktionen sind jedoch immer nur einen Klick entfernt.

User Interface Design für Web-Anwendungen (3)

Vimeo blendet erweiterte Suchfunktionen ein, wenn Sie mit dem Mauszeiger über die Suchleiste fahren. So kommen erfahrene Anwender bei Bedarf an zusätzliche Funktionen.

Setzen Sie Symbole sorgfältig und sparsam ein

So schön Icons auch sind und egal, wie ansprechend Sie eine Schnittstelle damit optisch aufpeppen können, vor dem Einsatz von Icons sollten Sie zwei Punkte bedenken:

  • Icons sind fast immer weniger eindeutig als Worte.
  • Icons funktionieren dann am besten, wenn sie sparsam eingesetzt werden.
Eine Schaltfläche zu beschriften, ist relativ simpel: Sie schreiben einfach die jeweilige Funktion darauf. Wenn Sie selbst ein Icon entwerfen, müssen Sie sich erst einmal eine passende Metapher überlegen. Außerdem: Je nach Land gibt es andere Sinnbilder. Selbst Mülltonnen sehen rund um den Globus jeweils etwas anders aus.

Setzen Sie Icons sparsam ein und achten Sie darauf, dass sich die einzelnen Symbole gut voneinander unterscheiden. Wechselnde Farben und Formen helfen den Anwendern, das gewünschte Symbol schnell zu finden.

Geschickt eingesetzt, vereinfachen Symbole den Umgang mit Benutzerschnittstellen erheblich.

Das lesen Sie im nächsten und letzten Teil dieser Serie:

  • Informieren Sie die Anwender über Ladezeiten
  • Binden Sie Stati-Meldungen für Schaltflächen ein
  • Hilfreiche Meldungen nach der Installation
  • Hinweise auf Funktionen und Neuigkeiten
  • Die Rückschritt-Funktion sinnig einbinden
  • Wiederherstellen darf ebenfalls nicht fehlen
  • Effektive Bestätigungsmeldungen
(mm), ™
Dmitry Fadeyev

Dmitry Fadeyev

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo der Webdesign Agentur in Dresden mit Schriftzug DAZECON auf blauem Hintergrund.

DAZECON – Webdesign und Marketing

Dresden

dskom GmbH (SEO Profi Berlin)

Berlin

pictibe Media Consulting & Solution in Köln.

pictibe – Werbeagentur & Marketingagentur

Bergisch Gladbach

SEO Agentur Hamburg • Die Nr. 1 in Hamburg.

SEO Agentur Hamburg

Hamburg

SEO-Sicht Agentur Berlin Logo.

SEO-Sicht

Berlin

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

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.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

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

Aus unserem Magazin

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑