Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dr. Web Team 28. Juli 2009

10 nützliche Techniken für Web-Applikationen

Dieser Artikel ist eine Übertragung des eng­lisch­spra­chi­gen Beitrages 10 Useful Web Application Interface Techniques von Dmitry Fadeyev. Die Übersetzung wur­de von Rene Schmidt ange­fer­tigt.

Immer mehr Anwendungen wer­den ins Web ver­la­gert. Dort ent­fal­len die sonst übli­chen Plattform-Beschränkungen oder Installationsprobleme. Das lässt das Software-as-a-Service-Vertriebsmodell attrak­tiv erschei­nen. Design für Web-Anwendungen ist im Kern Web-Design der Fokus liegt aller­dings stär­ker auf der Funktion. Um mit Desktop-Anwendungen kon­kur­rie­ren zu kön­nen, müs­sen Web-Anwendungen ein­fa­che, intui­ti­ve und schnell reagie­ren­de Benutzeroberflächen haben, damit sie mit ihnen effi­zi­en­ter arbei­ten kön­nen.

In der Vergangenheit haben wir Web-Anwendungen nicht den Platz ein­ge­räumt, den sie ver­die­nen. Daher wer­den wir uns nun eini­ge nütz­li­che Techniken und Designansätze anse­hen, die Web-Anwendungen benut­zer­freund­li­cher und schö­ner machen. Dieser Beitrag ist das ers­te Ergebnis unse­rer Untersuchung zu Design-Elementen und Benutzerfreundlichkeit von Web-Anwendungen.

1. Interface-Elemente auf Kommando

Ein wich­ti­ges Ziel beim Interface-Design ist Einfachheit. Je mehr Bedienelemente auf dem Bildschirm gleich­zei­tig erschei­nen, des­to mehr Zeit müs­sen Nutzer damit ver­brin­gen, die Bedienung zu ver­ste­hen. Wenn weni­ger Auswahl an Bedienelementen besteht, tre­ten die der­zeit ver­füg­ba­ren Funktionen bes­ser her­vor und sind für Nutzer leich­ter zu erfas­sen. “Einfachheit” ist aller­dings nicht ein­fach zu errei­chen, ins­be­son­de­re wenn Sie kei­ne Funktionen weg­las­sen möch­ten.

Kontain-Suche
Wenn Sie bei Kontain auf den Such-Knopf kli­cken, erscheint ein Drop-Down-Menü. Der Nutzer kann mit den zusätz­li­chen Optionen sei­ne Suche ein­engen. Die Suchfunktion wirkt ein­fa­cher, wenn die­se Optionen zunächst nicht sicht­bar sind.

Ein Weg zu mehr Einfachheit ist, fort­ge­schrit­te­ne Funktionen zu ver­ber­gen oder zu kaschie­ren. Finden Sie zunächst her­aus, wel­che Funktionen Ihrer Benutzeroberfläche am häu­figs­ten ver­wen­det wer­den und ver­ber­gen Sie die ande­ren, bei­spiels­wei­se mit Drop-Down-Menüs.

CollabFinder search
Wenn Sie bei CollabFinder auf den Such-Link kli­cken, gelan­gen Sie nicht zu einer neu­en Seite. Stattdessen erscheint die Eingabemaske für die Suche.

2. Spezielle Bedienelemente

Es ist wich­tig, dass Sie pas­sen­de Bedienelemente wäh­len. Technisch gese­hen sind Sie recht frei, was die Auswahl angeht – trotz­dem sind bestimm­te Bedienelemente je nach Aufgabe bes­ser als ande­re geeig­net.

Backpack calendar picker
Backpack ver­wen­det ein kom­pak­tes Kalender-Control, mit dem Nutzer Erinnerungsdaten ein­ge­ben kön­nen.

Man könn­te auch ein Datum aus einer Drop-Down-Liste für Tag, Monat und Jahr aus­wäh­len. Das ist aller­dings recht umständ­lich. Besser dafür geeig­net sind Kalender-Controls, bei dem man ein Datum wie bei einem Kalender direkt und schnell aus­wäh­len kann.

MyBankTracker APY Calculator
Der “APY cal­cu­la­tor” von MyBankTracker nutzt ein­fach zu bedie­nen­de Schiebe-Regler, mit denen Nutzer ver­schie­de­ne Szenarien aus­pro­bie­ren kön­nen.

Ein wei­te­res gutes Beispiel sind Schieberegler. Man könn­te natür­lich Zahlwerte auch manu­ell ein­ge­ben. In bestimm­ten Situationen sind Schieberegler eine weit bes­se­re Wahl. Sind sind nicht nur ein­fach zu nut­zen, man muss nur kli­cken und zie­hen, son­dern sieht sofort, inner­halb wel­cher Grenzen man sich bewe­gen kann.

3. Gedrückte Knöpfe deaktivieren

Eines der Probleme von Web-Anwendungen liegt in der Übertragung von Formularinhalten. Einfache Formulare sen­den Inhalte so oft, wie man auf den Absenden-Knopf drückt. Das ist in der Regel nicht gewünscht, weil es zu red­un­dan­ten Inhalten führt. Diese zu ver­mei­den, ist wich­tig und nicht beson­ders schwer.

Es gibt zwei Stufen, dop­pel­tes Absenden von Formularen zu ver­mei­den. Es gibt Mechanismen dazu auf Client- und auf Server-Seite. Die Serverseite behan­deln wir hier nicht. Es geht hier pri­mär um Benutzeroberflächen.

Yammer disabled button
Yammer deak­ti­viert den “Update”-Knopf, wäh­rend die Nachricht über­mit­telt wird.

Auf der Client-Seite ist es viel ein­fa­cher. Nachdem in einem Formular der Absenden-Knopf gedrückt wur­de, wird er deak­ti­viert. Mit JavaScript ist es sehr ein­fach, das zu tun:

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

Natürlich ist es trotz­dem sinn­voll, auch ser­ver­sei­tig Maßnahmen gegen Doubletten zu tref­fen – bei­spiels­wei­se für den Fall, dass ein Nutzer das Formular ohne JavaScript sen­det.

4. Schatten für modale Fenster

Schlagschatten um Popup-Menüs und -Fenster sind nicht nur rei­ne Dekoration. Sie heben es vom Hintergrund ab und ver­stär­ken des­sen Wirkung, indem unwich­ti­ge Informationen in den “Schatten” gestellt wer­den.

Diese Technik hat sei­ne Wurzeln bei tra­di­tio­nel­len Desktop-Anwendungen und hilft Nutzern, ihre Aufmerksamkeit auf das neue Fenster zu rich­ten. Durch den Schlagschatten unter­schei­den sich moda­le Fenster klar von nor­ma­len Dialogfenstern, weil sie schein­bar drei­di­men­sio­nal über dem Inhalt eine Website schwe­ben und so näher am Nutzer sind.

Digg login window
Das Login-Fenster von Digg hat einen brei­ten Schatten und hält die Informationsrauschen der Website dar­un­ter in Schach.

Um das zu errei­chen, geben Designer dem Container ein trans­pa­ren­tes PNG-Bild als Hintergrund. Der Inhalt hat nach oben, unten, rechts und links über­all den glei­chen Abstand zum Rahmen. Eine ande­re Möglichkeit ist, ein Hintergrundbild mit einem trans­pa­ren­ten Rahmen zu ver­wen­den und den Inhalt abso­lut inner­halb des Rahmens zu plat­zie­ren. Genau so macht es Digg und die­ses Bild ver­wen­den 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-basier­te Lightbox oder CSS3-Schatten zu ver­wen­den, wobei letz­te­re vom Internet Explorer nicht unter­stützt wer­den.

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

5. Anfangszustände

Wenn Sie eine Web-Anwendung ent­wi­ckeln, ist es nicht nur wich­tig, sie aus­gie­big zu tes­ten, son­dern auch den Anfangszustand benutz­bar zu gestal­ten, wenn der Nutzer noch nichts gemacht hat.

Wenn der Nutzer noch neu ist und bis­her nichts gemacht hat, fül­len Sie Leerraum mit aus­sa­ge­kräf­ti­gen Hilfen, mit denen der Nutzer den Einstieg fin­det. Beispielsweise könn­te eine Projektmanagement-Anwendung direkt nach dem Login eine Liste sei­ner Projekte anzei­gen. Falls noch kei­ne Projekte exis­tie­ren, könn­te ein Link ange­zeigt wer­den, mit dem der Nutzer ein neu­es Projekt direkt neu anle­gen kann. Selbst wenn es schon eine Möglichkeit dafür geben soll­te, scha­det es sicher nicht, den Nutzer mit der Nase drauf zu sto­ßen.

Campaign Monitor empty state
Campaign Monitor lenkt Nutzer in die rich­ti­ge Richtung, wenn sie eine neue E-Mail-Kampagne begin­nen.

Auf die­se Weise ermu­ti­gen Sie die Besucher, einen Dienst tat­säch­lich aus­zu­pro­bie­ren und nach der Registrierung zu nut­zen. Ein Rundgang durch die Applikation hilft, dem Nutzer des­sen Vorteile nahe zu brin­gen. Auch ist es wich­tig, dem Nutzer aus­schließ­lich die wich­tigs­ten Funktionen zu prä­sen­tie­ren. Es ergibt kei­nen Sinn, ihn mit allen mög­li­chen ver­füg­ba­ren Einstellmöglichkeiten zu über­for­dern. Bedenken Sie, dass Nutzer in der Regel erst­mal nur wis­sen möch­ten, ob ein Dienst über­haupt für sie inter­es­sant ist — Details inter­es­sie­ren in dem Moment nicht und stö­ren nur.

Sorgfältig vor­be­rei­te­te Anfangszustände kön­nen Nutzer moti­vie­ren und Anbietern von Web-Applikationen hel­fen, mehr poten­zi­el­le Nutzer in tat­säch­li­che Nutzer zu kon­ver­tie­ren.

Wufoo empty state
Wufoos Formular-Seite lädt den Nutzer mit einer freund­li­chen Meldung ein, ein neu­es Formular zu erstel­len.

6. Gedrückte Knöpfe

Viele Web-Applikationen ver­wen­den selbst gestal­te­te Knöpfe. Standard-Knöpfe sind oft nicht geeig­net und Text-Links sind leicht zu über­se­hen. Links, die Sie wie Knöpfe aus­se­hen las­sen wol­len, soll­ten sich wie Knöpfe ver­hal­ten. Das ist eine Herausforderung. Wenn Nutzer auf sie kli­cken, soll­ten sie “ein­ge­drückt” aus­se­hen.

Eingedrückte Knöpfe sind nicht nur etwas fürs Auge. Dem Nutzer eine Rückmeldung auf sei­ne Aktion zu geben, ver­mit­telt ihm das Gefühl, die Applikation unter Kontrolle zu haben und ähnelt dem gewohn­ten Verhalten von Desktop-Benutzeroberflächen.

Man kann einem Knopf den gedrück­ten Zustand mit der CSS-Pseudoklasse active geben. Wenn ein Link bei­spiels­wei­se die CSS-Class add_task_button hat, kann man für die­sen Link mit­tels add_task_button:active den gedrück­ten Zustand defi­nie­ren.

Highrise button pushed
Knöpfe bei Highrise wer­den ein­ge­drückt, wenn man auf sie klickt. Das gibt dem Nutzer eine Rückmeldung zu sei­ner Handlung.

7. Verlinken Sie die Registrierungsseite auf der Login-Seite

Nicht regis­trier­te Nutzer wer­den unwei­ger­lich irgend­wann auf Ihrer Login-Seite lan­den. Sie wol­len wahr­schein­lich die Anwendung oder eine Funktion aus­pro­bie­ren, die regis­trier­ten Nutzern vor­be­hal­ten ist, fin­den 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 fin­den.

Goplan sign in
Goplan hat einen net­ten bun­ten Knopf auf der Login-Seite, der zum Registrierungsformular führt.

Machen Sie es Nutzern ein­fach, in dem Sie Links zum Registrierungsformular auf der Login-Seite anbie­ten. Wenn Nutzer noch kein Benutzerkonto haben, müs­sen sie auf die­se Weise nicht lan­ge danach suchen. Untersuchungen bestä­ti­gen: 18% der betrach­te­ten Websites haben einen Registrierungs-Link auf der Login-Seite (zum Beispiel YouTube, Reddit, Digg, Lulu, Metacafe).

8. Kontext-abhängige Navigation

Es ist wich­tig zu wis­sen, was Nutzer in bestimm­ten Situationen machen möch­ten. Man braucht ihnen aber nicht über­all die­sel­be Navigation bie­ten, weil sie nicht zu jeder Situation in einer Anwendung passt.

Eines der bes­ten Beispiele für kon­text­ab­hän­gi­ge Navigationsoptionen ist die neue Benutzeroberfläche von Microsoft Office 2007. Sie zeigt anstatt der nor­ma­len Symbolleiste so genann­te Ribbon Controls. Jeder Tab eines sol­chen Ribbons ent­hält Bedienelemente, die zu einer bestimm­ten Tätigkeit pas­sen, bei­spiels­wei­se “Text schrei­ben”, “Diagramme bear­bei­ten”, oder “Korrekturlesen”. Auch Web-Anwendungen könn­ten von einer sol­chen kon­text­ab­hän­gi­gen Navigation pro­fi­tie­ren, weil sie Benutzeroberflächen nicht über­frach­tet. Es wer­den nur die Navigationsoptionen gezeigt, die der­zeit wirk­lich benö­tigt wer­den..

Lighthouse sub-navigation
Lighthouse hat eine gewöhn­te Navigation mit Tabs. Allerdings gibt es noch eine zwei­te Navigationsebene rechts unter den Tabs. Diese Ebene ist kon­text­ab­hän­gig.

9. Fokus auf Schlüsselfunktionen

Nicht alle Bedienelemente sind gleich wich­tig. Ein Beispiel: In einem Dialog zum Erstellen eines neu­en Objekts gibt es zwei Knöpfe. Einmal “Erstellen” und ein­mal “Abbrechen”. “Erstellen” ist wich­ti­ger als der ande­re, weil das der Knopf ist, den ein Nutzer wahr­schein­lich ankli­cken wird. Abbrechen wer­den dage­gen nur die wenigs­ten wol­len. Beide Knöpfe soll­ten daher nicht gleich­be­rech­tigt neben­ein­an­der ste­hen.

Lighthouse create or cancel
Der “Neues Ticket”-Knopf auf Lighthouseapp. Der “Abbrechen”-Link ist direkt dane­ben, aber als Text-Link. Der Knopf sieht nicht nur wich­ti­ger aus, er ist auch leich­ter anklick­bar und zieht auf­grund sei­ner Gestaltung mehr Aufmerksamkeit auf sich.

Um die Aufmerksamkeit auf den “Erstellen”-Link zu len­ken, kann man ver­schie­de­ne Bedienelemente oder Stile für Bedienelemente ver­wen­den. Einige Anwendungen neh­men 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, son­dern 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 ver­mit­teln. Videos kön­nen aber eine noch bes­se­re Alternative sein, wenn Sie die Ressourcen haben, sie zu pro­du­zie­ren. Seit eini­gen Jahren schon wer­den Videos im Web immer belieb­ter. Funktionen und Eigenschaften von Web-Applikationen wer­den häu­fig in Screencasts vor­ge­stellt. Allerdings ist das nicht der ein­zi­ge Einsatzzweck von Videos im Web.

GoodBarry video
GoodBarry zeigt einen Video-Screencast auf ihrer Startseite, um das Produkt zu prä­sen­tie­ren. Auch für Anleitungen wer­den dort Screencasts ver­wen­det.

Mailchimp video
MailChimp stellt Tutorial-Videos direkt in der Admin-Konsole bereit, um unge­üb­ten Nutzern zu hel­fen.

Einige Web-Applikationen nut­zen Video als Hilfe für Nutzer. Ein Video ver­mit­telt die Funktion einer Anwendung schnel­ler als es eine Seite mit Text könn­te. Nutzer sehen sofort, was zu tun ist. (tm)

Schreibe einen Kommentar

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