Dr. Web Team 28. Juli 2009

10 nützliche Techniken für Web-Applikationen

Dieser Artikel ist eine Übertragung des englischsprachigen Beitrages 10 Useful Web Application Interface Techniques von Dmitry Fadeyev. Die Übersetzung wurde von Rene Schmidt angefertigt.

Immer mehr Anwendungen werden ins Web verlagert. Dort entfallen die sonst üblichen Plattform-Beschränkungen oder Installationsprobleme. Das lässt das Software-as-a-Service-Vertriebsmodell attraktiv erscheinen. Design für Web-Anwendungen ist im Kern Web-Design der Fokus liegt allerdings stärker auf der Funktion. Um mit Desktop-Anwendungen konkurrieren zu können, müssen Web-Anwendungen einfache, intuitive und schnell reagierende Benutzeroberflächen haben, damit sie mit ihnen effizienter arbeiten können.

In der Vergangenheit haben wir Web-Anwendungen nicht den Platz eingeräumt, den sie verdienen. Daher werden wir uns nun einige nützliche Techniken und Designansätze ansehen, die Web-Anwendungen benutzerfreundlicher und schöner machen. Dieser Beitrag ist das erste Ergebnis unserer Untersuchung zu Design-Elementen und Benutzerfreundlichkeit von Web-Anwendungen.

1. Interface-Elemente auf Kommando

Ein wichtiges Ziel beim Interface-Design ist Einfachheit. Je mehr Bedienelemente auf dem Bildschirm gleichzeitig erscheinen, desto mehr Zeit müssen Nutzer damit verbringen, die Bedienung zu verstehen. Wenn weniger Auswahl an Bedienelementen besteht, treten die derzeit verfügbaren Funktionen besser hervor und sind für Nutzer leichter zu erfassen. „Einfachheit“ ist allerdings nicht einfach zu erreichen, insbesondere wenn Sie keine Funktionen weglassen möchten.

Kontain-Suche
Wenn Sie bei Kontain auf den Such-Knopf klicken, erscheint ein Drop-Down-Menü. Der Nutzer kann mit den zusätzlichen Optionen seine Suche einengen. Die Suchfunktion wirkt einfacher, wenn diese Optionen zunächst nicht sichtbar sind.

Ein Weg zu mehr Einfachheit ist, fortgeschrittene Funktionen zu verbergen oder zu kaschieren. Finden Sie zunächst heraus, welche Funktionen Ihrer Benutzeroberfläche am häufigsten verwendet werden und verbergen Sie die anderen, beispielsweise mit Drop-Down-Menüs.

CollabFinder search
Wenn Sie bei CollabFinder auf den Such-Link klicken, gelangen Sie nicht zu einer neuen Seite. Stattdessen erscheint die Eingabemaske für die Suche.

2. Spezielle Bedienelemente

Es ist wichtig, dass Sie passende Bedienelemente wählen. Technisch gesehen sind Sie recht frei, was die Auswahl angeht – trotzdem sind bestimmte Bedienelemente je nach Aufgabe besser als andere geeignet.

Backpack calendar picker
Backpack verwendet ein kompaktes Kalender-Control, mit dem Nutzer Erinnerungsdaten eingeben können.

Man könnte auch ein Datum aus einer Drop-Down-Liste für Tag, Monat und Jahr auswählen. Das ist allerdings recht umständlich. Besser dafür geeignet sind Kalender-Controls, bei dem man ein Datum wie bei einem Kalender direkt und schnell auswählen kann.

MyBankTracker APY Calculator
Der „APY calculator“ von MyBankTracker nutzt einfach zu bedienende Schiebe-Regler, mit denen Nutzer verschiedene Szenarien ausprobieren können.

Ein weiteres gutes Beispiel sind Schieberegler. Man könnte natürlich Zahlwerte auch manuell eingeben. In bestimmten Situationen sind Schieberegler eine weit bessere Wahl. Sind sind nicht nur einfach zu nutzen, man muss nur klicken und ziehen, sondern sieht sofort, innerhalb welcher Grenzen man sich bewegen kann.

3. Gedrückte Knöpfe deaktivieren

Eines der Probleme von Web-Anwendungen liegt in der Übertragung von Formularinhalten. Einfache Formulare senden Inhalte so oft, wie man auf den Absenden-Knopf drückt. Das ist in der Regel nicht gewünscht, weil es zu redundanten Inhalten führt. Diese zu vermeiden, ist wichtig und nicht besonders schwer.

Es gibt zwei Stufen, doppeltes Absenden von Formularen zu vermeiden. Es gibt Mechanismen dazu auf Client- und auf Server-Seite. Die Serverseite behandeln wir hier nicht. Es geht hier primär um Benutzeroberflächen.

Yammer disabled button
Yammer deaktiviert den “Update”-Knopf, während die Nachricht übermittelt wird.

Auf der Client-Seite ist es viel einfacher. Nachdem in einem Formular der Absenden-Knopf gedrückt wurde, wird er deaktiviert. Mit JavaScript ist es sehr einfach, das zu tun:

<input type="submit" value="Submit" onclick="this.disabled=true" />

Natürlich ist es trotzdem sinnvoll, auch serverseitig Maßnahmen gegen Doubletten zu treffen — beispielsweise für den Fall, dass ein Nutzer das Formular ohne JavaScript sendet.

4. Schatten für modale Fenster

Schlagschatten um Popup-Menüs und -Fenster sind nicht nur reine Dekoration. Sie heben es vom Hintergrund ab und verstärken dessen Wirkung, indem unwichtige Informationen in den „Schatten“ gestellt werden.

Diese Technik hat seine Wurzeln bei traditionellen Desktop-Anwendungen und hilft Nutzern, ihre Aufmerksamkeit auf das neue Fenster zu richten. Durch den Schlagschatten unterscheiden sich modale Fenster klar von normalen Dialogfenstern, weil sie scheinbar dreidimensional über dem Inhalt eine Website schweben und so näher am Nutzer sind.

Digg login window
Das Login-Fenster von Digg hat einen breiten Schatten und hält die Informationsrauschen der Website darunter in Schach.

Um das zu erreichen, geben Designer dem Container ein transparentes PNG-Bild als Hintergrund. Der Inhalt hat nach oben, unten, rechts und links überall den gleichen Abstand zum Rahmen. Eine andere Möglichkeit ist, ein Hintergrundbild mit einem transparenten Rahmen zu verwenden und den Inhalt absolut innerhalb des Rahmens zu platzieren. Genau so macht es Digg und dieses Bild verwenden sie dafür (dialog.png). So sieht das HTML aus:

(X)HTML:

	<div id="container">
		<div style="display: block; top: 236px; opacity: 1;" class="dialog">
			<div class="body">
        		<div class="content">
        			...
        		</div>

        	</div>
        </div>
      </div>

CSS:

.dialog {
    position: absolute;
    left: 50%;
    margin-left: -315px;
    width: 630px;
    z-index: 100001;

}
.dialog .body {
    background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
    padding: 40px 13px 10px 40px;
}

Weiterhin besteht die Möglichkeit, eine JavaScript-basierte Lightbox oder CSS3-Schatten zu verwenden, wobei letztere vom Internet Explorer nicht unterstützt werden.

Basecamp project switcher
Die Screenshot-Lightboxen Basecamps haben einen weichen Schlagschatten, der sie vom Rest der Website abhebt.

5. Anfangszustände

Wenn Sie eine Web-Anwendung entwickeln, ist es nicht nur wichtig, sie ausgiebig zu testen, sondern auch den Anfangszustand benutzbar zu gestalten, wenn der Nutzer noch nichts gemacht hat.

Wenn der Nutzer noch neu ist und bisher nichts gemacht hat, füllen Sie Leerraum mit aussagekräftigen Hilfen, mit denen der Nutzer den Einstieg findet. Beispielsweise könnte eine Projektmanagement-Anwendung direkt nach dem Login eine Liste seiner Projekte anzeigen. Falls noch keine Projekte existieren, könnte ein Link angezeigt werden, mit dem der Nutzer ein neues Projekt direkt neu anlegen kann. Selbst wenn es schon eine Möglichkeit dafür geben sollte, schadet es sicher nicht, den Nutzer mit der Nase drauf zu stoßen.

Campaign Monitor empty state
Campaign Monitor lenkt Nutzer in die richtige Richtung, wenn sie eine neue E-Mail-Kampagne beginnen.

Auf diese Weise ermutigen Sie die Besucher, einen Dienst tatsächlich auszuprobieren und nach der Registrierung zu nutzen. Ein Rundgang durch die Applikation hilft, dem Nutzer dessen Vorteile nahe zu bringen. Auch ist es wichtig, dem Nutzer ausschließlich die wichtigsten Funktionen zu präsentieren. Es ergibt keinen Sinn, ihn mit allen möglichen verfügbaren Einstellmöglichkeiten zu überfordern. Bedenken Sie, dass Nutzer in der Regel erstmal nur wissen möchten, ob ein Dienst überhaupt für sie interessant ist — Details interessieren in dem Moment nicht und stören nur.

Sorgfältig vorbereitete Anfangszustände können Nutzer motivieren und Anbietern von Web-Applikationen helfen, mehr potenzielle Nutzer in tatsächliche Nutzer zu konvertieren.

Wufoo empty state
Wufoos Formular-Seite lädt den Nutzer mit einer freundlichen Meldung ein, ein neues Formular zu erstellen.

6. Gedrückte Knöpfe

Viele Web-Applikationen verwenden selbst gestaltete Knöpfe. Standard-Knöpfe sind oft nicht geeignet und Text-Links sind leicht zu übersehen. Links, die Sie wie Knöpfe aussehen lassen wollen, sollten sich wie Knöpfe verhalten. Das ist eine Herausforderung. Wenn Nutzer auf sie klicken, sollten sie “eingedrückt” aussehen.

Eingedrückte Knöpfe sind nicht nur etwas fürs Auge. Dem Nutzer eine Rückmeldung auf seine Aktion zu geben, vermittelt ihm das Gefühl, die Applikation unter Kontrolle zu haben und ähnelt dem gewohnten Verhalten von Desktop-Benutzeroberflächen.

Man kann einem Knopf den gedrückten Zustand mit der CSS-Pseudoklasse active geben. Wenn ein Link beispielsweise die CSS-Class add_task_button hat, kann man für diesen Link mittels add_task_button:active den gedrückten Zustand definieren.

Highrise button pushed
Knöpfe bei Highrise werden eingedrückt, wenn man auf sie klickt. Das gibt dem Nutzer eine Rückmeldung zu seiner Handlung.

7. Verlinken Sie die Registrierungsseite auf der Login-Seite

Nicht registrierte Nutzer werden unweigerlich irgendwann auf Ihrer Login-Seite landen. Sie wollen wahrscheinlich die Anwendung oder eine Funktion ausprobieren, die registrierten Nutzern vorbehalten ist, finden aber oft in der Eile das Registrierungsformular nicht.

Delicious sign in
Wenn Sie kein Delicious-Benutzerkonto haben — kein Problem! Der Link zum Registrierungsformular ist auf der Login-Seite zu finden.

Goplan sign in
Goplan hat einen netten bunten Knopf auf der Login-Seite, der zum Registrierungsformular führt.

Machen Sie es Nutzern einfach, in dem Sie Links zum Registrierungsformular auf der Login-Seite anbieten. Wenn Nutzer noch kein Benutzerkonto haben, müssen sie auf diese Weise nicht lange danach suchen. Untersuchungen bestätigen: 18% der betrachteten Websites haben einen Registrierungs-Link auf der Login-Seite (zum Beispiel YouTube, Reddit, Digg, Lulu, Metacafe).

8. Kontext-abhängige Navigation

Es ist wichtig zu wissen, was Nutzer in bestimmten Situationen machen möchten. Man braucht ihnen aber nicht überall dieselbe Navigation bieten, weil sie nicht zu jeder Situation in einer Anwendung passt.

Eines der besten Beispiele für kontextabhängige Navigationsoptionen ist die neue Benutzeroberfläche von Microsoft Office 2007. Sie zeigt anstatt der normalen Symbolleiste so genannte Ribbon Controls. Jeder Tab eines solchen Ribbons enthält Bedienelemente, die zu einer bestimmten Tätigkeit passen, beispielsweise „Text schreiben“, „Diagramme bearbeiten“, oder „Korrekturlesen“. Auch Web-Anwendungen könnten von einer solchen kontextabhängigen Navigation profitieren, weil sie Benutzeroberflächen nicht überfrachtet. Es werden nur die Navigationsoptionen gezeigt, die derzeit wirklich benötigt werden..

Lighthouse sub-navigation
Lighthouse hat eine gewöhnte Navigation mit Tabs. Allerdings gibt es noch eine zweite Navigationsebene rechts unter den Tabs. Diese Ebene ist kontextabhängig.

9. Fokus auf Schlüsselfunktionen

Nicht alle Bedienelemente sind gleich wichtig. Ein Beispiel: In einem Dialog zum Erstellen eines neuen Objekts gibt es zwei Knöpfe. Einmal “Erstellen” und einmal “Abbrechen”. “Erstellen” ist wichtiger als der andere, weil das der Knopf ist, den ein Nutzer wahrscheinlich anklicken wird. Abbrechen werden dagegen nur die wenigsten wollen. Beide Knöpfe sollten daher nicht gleichberechtigt nebeneinander stehen.

Lighthouse create or cancel
Der “Neues Ticket”-Knopf auf Lighthouseapp. Der “Abbrechen”-Link ist direkt daneben, aber als Text-Link. Der Knopf sieht nicht nur wichtiger aus, er ist auch leichter anklickbar und zieht aufgrund seiner Gestaltung mehr Aufmerksamkeit auf sich.

Um die Aufmerksamkeit auf den “Erstellen”-Link zu lenken, kann man verschiedene Bedienelemente oder Stile für Bedienelemente verwenden. Einige Anwendungen nehmen einen Input-Knopf für die Aktion und einen Text-Link zum Abbrechen. Nicht nur ist die Klick-Fläche für die Aktion größer als die des Abbrechen-Links, sondern lenkt die Aufmerksamkeit der Nutzer auf die Aktion, nach der sie gesucht haben.

10. Eingebettetes Video

Bilder und Texte sind ein guter Weg, Produktinformationen zu vermitteln. Videos können aber eine noch bessere Alternative sein, wenn Sie die Ressourcen haben, sie zu produzieren. Seit einigen Jahren schon werden Videos im Web immer beliebter. Funktionen und Eigenschaften von Web-Applikationen werden häufig in Screencasts vorgestellt. Allerdings ist das nicht der einzige Einsatzzweck von Videos im Web.

GoodBarry video
GoodBarry zeigt einen Video-Screencast auf ihrer Startseite, um das Produkt zu präsentieren. Auch für Anleitungen werden dort Screencasts verwendet.

Mailchimp video
MailChimp stellt Tutorial-Videos direkt in der Admin-Konsole bereit, um ungeübten Nutzern zu helfen.

Einige Web-Applikationen nutzen Video als Hilfe für Nutzer. Ein Video vermittelt die Funktion einer Anwendung schneller als es eine Seite mit Text könnte. Nutzer sehen sofort, was zu tun ist. ™

Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.