• Facebook
  • Google+
  • Twitter
  • XING
27.03.2011

Optimierung eines Bildschirms für die mobile Nutzung

Ein einziger, mobiler Bildschirm fast ohne Funktionen hat dennoch zehn Design-Änderungen gebraucht, um den Usability-Richtlinien für mobile Websites zu entsprechen.

 

by Jakob Nielsen (deutsche Übersetzung) - 28.03.2011

 

Während unserer Asien-Pazifik-Tour haben wir die Gelegenheit genutzt, verschiedene Usability-Studien durchzuführen. Manchmal haben wir normale Websites getestet, um Seminare wie das zu den grundlegenden Richtlinien für Web-Usability zu aktualisieren. Doch mehr Zeit haben wir mit Themen verbracht, bei denen wir mit grösseren regionalen Unterschieden gerechnet haben; dazu gehören die mobile Usability und Nutzeroberflächen in sozialen Medien.Eine der mobilen Websites, die wir getestet haben, heisst AllkPop.com und beschäftigt sich mit einem Thema, das in vielen asiatischen Ländern offenbar grosse Faszination ausübt: koreanische Popstars.

Mobile Website von AllKpop.com
Die mobile Website von AllKpop.com, die wir in Hongkong getestet haben

AllKpop macht eine Menge Dinge richtig:

  • Was am wichtigsten ist, die Website unterstützt eine Thematik, die perfekt zur mobilen Nutzung passt: Klatsch über Promis. Schon seit unserer ersten Studie zur mobilen Usability im Jahr 2000 wissen wir, dass Zeit vertreiben eine Killer-App für Handys ist. Viele andere Aufgaben ergeben im mobilen Umfeld wenig Sinn; egal wie grossartig das Design sein mag, die mobilen Versionen werden kaum genutzt und es ist Zeitverschwendung, sie zu gestalten.
  • Fast genauso wichtig: Sie hat eine eigene mobile Version. Arbeitsplatzrechner und mobile Geräte sind so verschieden, dass es nur einen Weg gibt, ein grossartiges Nutzererlebnis anzubieten: den Bau von zwei völlig getrennten Designs - normalerweise mit weniger Funktionen in der mobilen Version.
  • Weil der Server selber merkt, ob die Nutzer ein mobiles Gerät oder einen Arbeitsplatzrechner verwenden, müssen die Nutzer ihre Version nicht manuell auswählen. Wie wir aus Tests wissen, sinkt die Usability dramatisch, wenn mobile und vollständige Website unterschiedliche Web-Adressen haben, weil die Nutzer dann oft bei der falschen Nutzeroberfläche landen.
  • Die Berührungs-Zielflächen für die Headlines sind relativ gross.
  • Am Anfang der Headlines stehen gewöhnlich Schlüsselwörter mit inhaltlicher Bedeutung. Bei dieser Website enthalten die Namen der Popstars die wichtigste Information für die Nutzer, und diese stehen normalerweise vorn.

Dennoch hat diese Website nicht alle Richtlinien für die mobile Usability befolgt, so dass wir uns entschlossen haben, ein alternatives Design zu kreieren, welches das tut:

Alternatives Design AllKpop-Website
Das von uns vorgeschlagene Redesign der mobilen Homepage von AllKpop.

Unser Redesign enthält hat zehn grössere Änderungen:

  1. Weniger Funktionen, was wir durch die Entfernung von drei Elementen erreicht haben:
    Die Verfasserzeilen, weil sie nicht gebraucht werden, um einen Artikel auszuwählen (was der einzige Grund ist, um Headlines auf der ersten Seite aufzulisten);
    Die klickbaren Kategorien und Tags, die ohnehin zu klein waren, um sie zuverlässig treffen zu können (auch erschienen uns Kategorien wie "Musik" auf einer Pop-Website als wertlos); sowie
    Die Dreieck-Buttons, die eine Zusammenfassung abrufen (stattdessen haben wir immer eine Zusammenfassung angezeigt).
  2. Grössere Berührungs-Zielflächen. Jetzt kann die ganze Kachel für die Story berührt werden und die Nutzer müssen sich nicht mehr anstrengen, genau die Headline zu treffen. (Im realen Design enthält jede Kachel mehrere winzige Berührungsflächen von geringer Usability und fragwürdigem Nutzen.)
  3. Komplette Headlines anstelle der abgeschnittenen. Dies ist wahrscheinlich die grösste Verbesserung im Redesign, weil die vollständige Headline eine wesentlich grösseres Informationsvolumen enthält als die wenigen Wörter, die auf der realen Website sichtbar sind.
    Bessere Überfliegbarkeit durch Hervorheben der Namen der Popstars in den Headlines.
  4. Ein noch grösseres Informationsvolumen wird durch das Anzeigen einer kurzen Zusammenfassung der Story (eines "Dek") unter jeder Überschrift erreicht.
  5. Fotos der Popstars anstelle von Kalenderblättern. Das fügt nicht nur visuelle Attraktivität hinzu, sondern erhöht auch die Überfliegbarkeit noch weiter und vergrössert das Informationsvolumen, da viele Nutzer die Gesichter ihrer Lieblingsstars schneller erkennen, als sie eine Headline lesen können.
  6. Platz für vier komplette Story-Kacheln ohne scrollen. Durch den etwas engeren Abstand können die Nutzer die gesamte vierte Story-Zusammenfassung beim ersten Überfliegen der Seite sehen. Wenn die Nutzer nach unten scrollen, können Sie mehr Kacheln auf kleinerem Raum sehen, was bedeutet, dass sie für jede neue Story etwas weniger arbeiten müssen und deshalb wahrscheinlich mehr davon sehen möchten. Da dieser zweite Nutzen relativ klein ist, haben wir erwogen, die Kacheln kleiner zu machen, um mehr Storys auf der ersten Seite zeigen zu können. Jedoch scheinen die zusätzlichen Informationen durch die Story-Zusammenfassungen und die Fotos der Popstars den Platz besser auszunutzen, obwohl sie mehr Platz brauchen. Eine Alternative zu testen würde sich aber sicher lohnen.
  7. Anzeige des Publikationsdatums nur als Trennung zwischen Storys, die an verschiedenen Daten veröffentlicht wurden. Weil jeden Tag so viele Storys erscheinen, betrachten die Nutzer normalerweise nur die Storys des laufenden Tages, an dem sie die Website aufrufen, es sei denn, sie scrollen bis zu den Nachrichten des Vortags hinunter. Deshalb verschwendet das Story-Datum in der realen Website wertvollen Platz. Generell sollte man bei mobilen Designs jedes Element in Frage stellen, das die gleiche Information mehrmals wiederholt; solche Redundanzen verschwenden wahrscheinlich den äusserst knapp bemessenen Platz.
  8. Mehr Zwischenraum zwischen den beiden Optionen in der Navigationsleiste, damit die Besucher weniger Gefahr laufen, die falsche zu erwischen.
  9. Bezeichnung des Drop-down-Menüs statt der blossen Anzeige durch ein Dreieck. (Es befindet sich im Originaldesign knapp über der Suche - eine unauffällige Präsentation, die die meisten Nutzer wohl übersehen.) Je nachdem, welche Befehle sich bereits im Menü befinden, dürfte ein anderer Name besser sein. Wir haben nicht das gesamte Navigationssystem neu gestaltet, aber wir nehmen an, dass ein neues Kategoriensystem der beste Weg wäre, die Website zu navigieren - nach dem Berühren von Headlines und der Suche.

Wie dieses Beispiel zeigt, bietet selbst ein kleiner mobiler Bildschirm Platz für zahlreiche Klippen in der Nutzeroberfläche. Obwohl diese Website nur sehr wenige Funktionen hat, konnten wir zehn Usability-Verbesserungen anbringen - darunter eine weitere Reduktion der Funktionen.

(In der Seitenleiste sehen Sie drei Design-Iterationen, die wir ausprobiert haben, ehe wir das hier besprochene Redesign gefunden haben.)

Je enger ein Design beschränkt ist, desto mehr müssen Sie die Nutzeroberfläche polieren, um optimale Usability zu erzielen. Und mobiles Design ist ein unglaublich eng beschränktes Designproblem.

 

© 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