• Facebook
  • Google+
  • Twitter
  • XING
08.05.2011

Nutzen Sie den verwertbaren Platz auf dem Bildschirm aus

Websites und Mobile Apps quetschen oft Optionen in zu kleinen Bildschirmbereichen zusammen, wodurch die Dinge schwerer zu verstehen sind.

 

by Jakob Nielsen (deutsche Übersetzung) - 09.05.2011

 

Die kostbaren Pixel eines Computerbildschirms sind die wertvollste Immobilie der Welt. Der Amazon-Button "In den Einkaufswagen" ist 160 × 27 Pixel gross; das sind bei einer normalen Bildschirmauflösung von 100 dpi 0,0003 m². Auf der Grundfläche einer durchschnittlichen amerikanischen Wohnung zum Preis von derzeit 160.000 $ könnte man fast 800.000 Kaufen-Buttons unterbringen. Selbst ein einziger Kaufen-Button bringt oft mehr ein - ganz zu schweigen vom Ertrag von 800.000 Buttons.

Normalerweise versucht man etwas zu behalten, wenn es extrem wertvoll ist. Platz auf dem Bildschirm dagegen sollte man nicht horten, sondern nutzen. Viel zu häufig sehe ich Bildschirmdesigns, die hochwertige Inhalte oder Aktionsfelder auf winzigem Raum zusammenquetschen, während sie an anderer Stelle grosse Bildschirmflächen verschwenden.

Vor acht Jahren habe ich analysiert, wie 50 verschiedene Startseiten von Websites ihren Platz ausgenutzt haben. Dabei kam heraus, dass nur 40 Prozent des Platzes auf dem Bildschirm für die Navigation oder für, aus Sicht der Nutzer, interessante Inhalte genutzt wurden. Das war in der Zeit der 800 × 600-Bildschirme der Fall, als der Platz noch besonders kostbar war. Heutzutage sind viele Websites etwas besser, und die grösseren Monitore bieten Ihnen natürlich auch mehr Gestaltungsspielraum.

Doch immer noch öffnen viele Websites wichtige Funktionen in kleinen Pop-up-Fenstern, was zwei Richtlinien verletzt:

  • Müllen Sie den Bildschirm des Nutzers nicht mit Popups zu.
  • Präsentieren Sie den Stoff so, dass die Nutzer ohne zu scrollen alles sehen können, was sie brauchen. Befolgen Sie zum Beispiel die Richtlinie für Produktseiten in Online-Shops, Fotos wirklich gross anzuzeigen, wenn die Nutzer den Button Vergrössern anklicken.

Platzverschwendung auf mobilen Geräten

Selbst auf grossen Arbeitsplatz-Bildschirmen ist Platz ein Privileg, welches man ausnutzen sollte. Die Bildschirme von mobilen Geräten sind so klein, dass Platzverschwendung eine Sünde ist.

Sehen Sie hier einen iPad-Bildschirm aus einer kürzlich durchgeführten Studie:

iPad-App von ABC News
Die iPad-app von ABC News: Startseite

Die Nutzeroberfläche für die neuesten Nachrichten ist kugelförmig dargestellt und kann mithilfe von Gesten gedreht werden. Es ist eine nette Grafik-Idee und die erste Interaktion damit ist faszinierend: Im ersten Eindruck fanden die Nutzer das "ziemlich cool", "wirklich cool", "super"; sie sagten: "springt ins Auge" oder "macht Spass".

Trotz dieser positiven ersten Reaktionen mochten die Nutzer den Bildschirm nicht und suchten gleich nach der Entdeckung nach einer alternativen Ansicht. Regelmässige Nutzer der ABC-News-App sagten uns, sie zögen beim Nutzen der App die herkömmliche Auflistung der News vor.

herkömmliche Auflistung ABC News-App
iPad-App von ABC News: die alternative Startseite mit mehr News. Das ist die Version, die die Leute wirklich benutzen.

Warum favorisieren die Nutzer für den Alltagsgebrauch das normale, eher langweilige, Design? Weil es mehr News auf einen Blick anzeigt.

Höhere Informationsdichte bedeutet, dass man weniger hin und her klicken muss und mit grösserer Wahrscheinlichkeit gleich sieht, was man haben will.

Die Kugel zeigt nur eine einzige Geschichte klar und deutlich an. Bei den anderen Themen sind die Bilder und Bildunterschriften verzerrt und sind schwer oder gar nicht zu lesen. Was für eine Platzverschwendung auf dem Bildschirm!

Ein weiteres Beispiel in unserer jüngsten Studie stammt aus dem Hause NASA:

Drop-down-Menü auf der NASA-iPad-App
iPad-App der NASA: Startseite mit ausgeklapptem Drop-down-Menü

Die Startseite der iPad-app der NASA ist eine Visualisierung des Sonnensystems. Sie nutzt den Platz nicht besonders effizient aus, was in diesem Fall okay ist, da es ein aussagekräftiges Bild ist, welches eine grosse Auswahl von Themen repräsentiert und dabei klar kommuniziert, worum es in der App geht.

Bei den Nutzertests lag das Hauptproblem dieser Startseite in dem Risiko, den falschen Himmelskörper zu berühren: Der Abstand zwischen Erde und Mond beträgt nur 60 Prozent des Mindestabstands von Objekten laut Usability-Richtlinie.

Ein weiteres Usabilityproblem, das mit der Ausnutzung des Raumes (des Bildschirmraums, nicht des Weltraums) zu tun hat, ist das Drop-down-Menü für die Satellitenmissionen. Es war aus zwei Gründen schwer zu benutzen. Erstens sieht das Icon auf dem Button eher wie ein Fischskelett als wie ein Satellit aus, was aber nicht das Hauptproblem war.

Das grössere Problem: Es war physisch schwer, sich durch die lange Liste der Missionen zu bewegen - wer das wollte, hatte das Gefühl, endlos weit scrollen zu müssen. Auch sind die Satelliten bloss anhand des Bildes und der Abkürzung schwer zu erkennen. Die meisten Satelliten sehen ziemlich ähnlich aus, zumindest wenn man nicht gerade der absolute Weltraumfreak ist.

Die Designer haben hier versucht, ein Mega-Menü zu gestalten, haben es aber aus verschiedenen Gründen nicht geschafft, dessen Vorteile zur Geltung zu bringen:

  • Es gibt keine Kategorien für die Menü-Themen - ein gutes Mega-Menu hätte die Missionen in Gruppen eingeteilt und jeder Gruppe eine Überschrift gegeben. Damit wäre es viel leichter, bestimmte Typen von Satelliten zu finden, wie zum Beispiel interplanetare Forschungssatelliten.
  • Die Bezeichnungen werden nicht erklärt - hier wäre es zum Beispiel hilfreich zu erfahren, dass ACE hoch energetische Partikel misst, während AIM das Eis in der Mesosphäre erforscht.
  • Die Illustrationen sind bedeutungslos. Hübsche Schnörkel, aber dennoch Schnörkel.

Anstelle eines endlosen scroll-Menüs wäre es besser, die Nutzer zu einer separaten Bildschirm-füllenden Überblick zu führen, der alle Missionen auf der gleichen Seite präsentiert, wodurch es viel leichter würde, sie miteinander zu vergleichen. Es ist o.k., mehr Bildschirmplatz zu investieren, solange Sie den Nutzern einen einfachen Rückweg zur Startseite anbieten.

An der Auslieferung kleiner, schwer zu benutzender Interaktionsfelder in iPad-apps ist teilweise Apple schuld, wegen eines Design-Fehlers in der Standard-E-Mail-Anwendung. Der Posteingang wird als schmales Menü unten an der Seite angezeigt. Im Querformat ist das grossartig, weil die Nutzer dann schnell zwischen Posteingang und einzelnen Nachrichten hin- und herwechseln, also schnell Ihre E-Mails durchgehen können.

Im Hochformat allerdings überdeckt das Menü teilweise den Inhalt der Nachricht, wodurch es unmöglich wird, die beiden Ausschnitte gleichzeitig zu benutzen. Warum zeigt man zwei Ausschnitte, wenn man nicht beide benutzen kann? Da wäre es besser, den Posteingang auf dem kompletten Tablet-Bildschirm zu zeigen, damit man entweder mehr E-Mails oder grössere Voransichten von jeder Nachricht sehen kann.

Grösser ist besser

Mobile Geräte und Tablet-PCs sind naturgemäss klein; Sie müssen also die Verwendung des Platzes auf dem Bildschirm optimieren und die Dinge so gross wie möglich anzeigen. Arbeitsplatz-Bildschirme sind grösser, so dass Sie oft ein besseres Nutzererlebnis erreichen, wenn Sie die Dinge noch stärker vergrössern.

Es gibt nur sehr wenige Ausnahmen zu der Regel, dass grösser bei Nutzeroberflächen immer besser ist. Ein Beispiel sind Websites, die das Öffnen eines neuen Fensters erzwingen und dieses maximal vergrössern - selbst auf den grössten Monitoren. Nutzer, die einen 30-Zoll-Monitor haben, wollen keine maximal vergrösserten Browserfenster haben. Es ist ärgerlich, wenn, sagen wir, ein Wörterbucheintrag sich auf 2560 × 1600 Pixel vergrössert und so alle anderen Fenster verdeckt, mit denen man gerade arbeitet.

Doch generell sollten wir damit aufhören, Informationen in kleine Schlüssellöcher hineinzustopfen. Die Optimierung der Nutzeroberfläche für den zur Verfügung stehenden Platz auf dem Bildschirm ist eine Schlüsselstrategie zur Verbesserung der Usability (und erhöht folglich Ihre Konversionsraten).

 

© Deutsche Version von Jakob Nielsens Alertbox. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen