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
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

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

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      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

      Karlsruhe von oben

      Karlsruhe

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

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

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

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      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
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

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

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      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

      Karlsruhe von oben

      Karlsruhe

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

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

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

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Design » User Interface Design für Web-Anwendungen (3)

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

Inhaltslastige Anwendungen wie Apps zum Verwalten von Filmen und Musik oder Twitter- und RSS-Feed können Anwendungen durch die vielen doppelten Befehlsschaltflächen langsam und unübersichtlich machen. Wie Sie das durch Hover-Effekte eleganter lösen und wie Sie Ihre Benutzerschnittstellen sonst noch aufpeppen können, erfahren Sie in diesem Teil des Beitrags zum User Interface Design.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 5 Minuten
  • von Dmitry Fadeyev
  • 28. April 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 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 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.

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.

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.

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.

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.

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dmitry Fadeyev

Dmitry Fadeyev

Agenturpartner

Berlin Translate

Berlin

Rocket Backlinks

Aalen

design andrea becker

Frankfurt am Main

DAZECON – Webdesign und Marketing

Dresden

ARIT Services GmbH

Laatzen

Alle Agenturpartner

Jobs

Online Marketing Manager

Innsbruck

SEO Junior für Suchmaschinen­optimierung

Salzburg

Elektroinstallateur – Rechenzentrum

Karlsruhe

Projektmanager – Vollzeit

Remote

WordPress Developer – Vollzeit

Remote

Zum richtigen Job

Newsletter

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

Lust auf mehr? Wir empfehlen folgende Artikel:

Vollkommen geschmacklos: So stellst du fest, ob ein Design gut oder schlecht ist

Dein eigener Geschmack ist ein schlechter Ratgeber in der Frage der Beurteilung, ob ein Design nun gut oder schlecht ist. Lass uns da mal objektiver

 →   

Design: Was für Sprach-Interfaces der Zukunft wichtig ist

Seit fast zwei Jahren besitze ich einen Amazon Echo. Das Gerät zeigt mir seitdem eindrucksvoll, wie limitiert heutzutage Sprach-Interfaces sind. Da muss sich was tun.

 →   

Mal was anderes: Mondrianismus im Webdesign

Kennst du Mondrian? Nein, wirst du vermutlich sagen. Das ist unwahrscheinlich. Zumindest sein Kunststil wird dir bekannt vorkommen. Schau selbst. Wie hilfreich war dieser Beitrag?

 →   

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.