Thumbnails in Listen für mobile Geräte

by Aurora Bedford (deutsche Übersetzung) - 06. Dezember 2015

Eine Frage, die uns unsere Kunden und die Teilnehmer unserer Trainingskurse häufig stellen ist, ob eine Auflistung von Objekten in mobilen Designs Thumbnails enthalten sollte – und falls ja, ob diese Thumbnails links oder rechts des Haupttexts platziert werden sollten. Wie erwartet, gibt es dafür keine Einheitslösung. Es gibt allerdings Richtlinien, die Ihnen dabei helfen, die beste Vorgehensweise für verschiedene Situationen zu ermitteln.

Ist das Bild hilfreich?

Nehmen Sie nicht an, dass Sie Bilder unbedingt anzeigen müssen, nur weil Ihnen diese für einige oder sogar alle Objekte der Liste zur Verfügung stehen.

Überlegen Sie zuerst, ob das Bild Nutzer bei der Auswahl eines Objekts der Liste unterstützt: fragen Sie sich, ob ein Nutzer ausschliesslich basierend auf dem Bild entscheiden kann, wohin er/sie navigieren sollte. Falls das Bild allein definitiv nicht ausreicht (entweder weil es zu klein ist, um relevante Details erkennen zu können, oder da es sich um allgemeines Füllbild einer Bildagentur handelt), entfernen Sie es.

Die Tee-Thumbnails auf der mobile Website von Teavana (siehe unten), werden Nutzern wahrscheinlich nicht helfen, zu entscheiden, welcher Tee ihrem Geschmack entspricht, da die einzelnen Bilder zu klein sind, um den Anteil von Teeblättern und anderen Zutaten zu erkennen. Der Platz am Bildschirm, den die Thumbnails in Anspruch nehmen, wäre besser für Texte verwendet werden worden – zum Beispiel Verkostungsnotizen oder Koffeingehalt. Diese Inhalte helfen Nutzern dabei, informierte Navigationsentscheidungen zu treffen – sie sind derzeit aber in den einzelnen Detailseiten verborgen.

Die Tee-Thumbnails auf der mobilen Website von Teavana sind nicht aussagekräftig. Die Nutzer werden die visuellen Informationen eher nicht verwenden, um eine Teesorte auszuwählen, da sie im Prinzip alle gleich aussehen.

Falls Nutzer, denen nur Text zur Verfügung steht, allerdings Probleme haben, das richtige Objekt auszuwählen (was sie zum Pogo Sticking zwingt), sollte ein Thumbnail-Bild angezeigt werden. Das gilt meistens für den Einzelhandel und das Gastgewerbe, also Bereiche, in denen sich Nutzer stark auf Ästhetik verlassen: der Unterschied zwischen zwei Kleidern wird zum Beispiel häufig durch Bilder verdeutlicht, wofür sich sogar winzige Bilder eignen. Wenn der Listeninhalt hauptsächlich visuell ist (z.B. Videos oder Fotos), sollten Bilder definitiv eine hohe Priorität haben, um die Navigation zu unterstützen. In einer derartigen Situation könnten grössere Thumbnails oder ein Raster-Layout sinnvoll sein, was davon abhängt, wie viel zugehöriger Text angezeigt werden muss.

Platzierung: Links oder rechts?

Falls Sie sich für Thumbnails entschieden haben, stellt sich als nächstes die Frage nach der Platzierung. Um herauszufinden, ob die Bilder links oder rechts des zugehörigen Texts platziert werden sollten, vergleichen Sie die Bedeutung des Bildes mit jener des Texts des Listenobjekts. Ist die visuelle Darstellung die wichtigste Information für einen Nutzer, der durch die Liste scrollt? Oder ist das Bild nur ein Hilfsmittel?

Falls das Bild wichtig ist, um ein Objekt aus der Liste auszuwählen, platzieren Sie es auf der linken Seite (das gilt natürlich nur für Sprachen, die von links nach rechts geschrieben werden – für Sprachen, die von rechts nach links geschrieben werden, sollten Sie diesen Designtipp spiegeln). So können Nutzer die Liste der Thumbnails schnell überfliegen, ohne sich den Text durchlesen zu müssen. Falls das Bild dem Text untergeordnet ist, platzieren Sie es rechts von der Beschreibung.

Die Wichtigkeit des Bildes im Vergleich zum Text sollte auch berücksichtigt werden, um zu entscheiden, wie gross das Thumbnail sein sollte. Je weniger wichtig das Bild, desto kleiner kann es sein. Bedenken Sie allerdings, dass ein zu kleines Thumbnail weder erkennbar noch nützlich ist (um dieses Problem zu lösen, sollten Sie das Bild sowohl zuschneiden als auch verkleinern, um seine Grösse zu reduzieren, anstatt es einfach nur zu verkleinern). Ein zu grosses Thumbnail kann den Nutzer hingegen von relevanten Informationen ablenken oder Probleme mit dem zugehörigen Text zur Folge haben (da zum Beispiel die Schriftgrösse reduziert werden muss und dadurch unlesbar wird oder da die Beschreibung abgeschnitten werden muss – beide Massnahmen stellen eine Gefahr für das Nutzererlebnis dar). Bedenken Sie auch, dass das Laden grösserer Bilder länger dauert, was bei langsamen Ladegeschwindigkeiten sehr ärgerlich sein kann.

Bei der Auswahl eines Hotels sind Nutzer am Aussehen des Gebäudes und seiner Ausstattung interessiert, weshalb Hotel-Thumbnails nützlich sind. Sie sind allerdings weniger wichtig, als andere Textangaben, z.B. Preis und Hotelbewertung. Links: Die Thumbnails auf Hotel Tonight sind gross genug, um Details erkennen zu können, die Namen der Hotels sind allerdings abgeschnitten, anstatt einen Zeilenumbruch zu verwenden. Rechts: Hotels.com gibt dem Text mehr Platz, die Thumbnails sind aber zu klein, um nützliche Informationen zu liefern.

Ein weiterer Faktor, der Ihnen dabei hilft, die beste Platzierung der Thumbnails zu ermitteln, ist, ob Sie überhaupt über ein geeignetes Bild für alle Listenobjekte verfügen. Falls Sie nicht jedem Listenobjekt ein Bild hinzufügen können, sollten Sie die Thumbnails auf der rechten Seite platzieren, damit der Text gut überflogen werden kann. Das garantiert, dass der Text linksbündig ist und dass Nutzer ihre Augen am linken Rand nach unten bewegen können, um zu ermitteln, welche Dinge sie am meisten interessieren.

Links: Die untersten drei Thumbnails auf der mobilen Seite der LA Times sind zu klein, um für Leser erkennbar und interessant zu sein – aufgrund der linksbündigen Platzierung der Fotos muss dennoch jedem Artikel ein Bild zugeordnet werden. Rechts: Die rechtsbündige Platzierung der Thumbnails auf der mobilen Website der New York Times ermöglicht es, auf Thumbnails zu verzichten. In Fällen, in denen visuelle Informationen besonders wichtig sind, kann auch ein Bild über die gesamte Bildschirmbreite angezeigt werden.

Schlussfolgerung

Um die Wichtigkeit von Bildern zu ermitteln, führen Sie Nutzerforschung in Bezug auf die persönliche Einstellung der Nutzer durch, wie Umfragen oder Interviews, um Einblicke in die Präferenzen Ihrer Nutzer zu erhalten. Sobald die Priorität der Bilder ermittelt wurde, ist es relativ einfach, die ideale Platzierung der Thumbnails zu bestimmen.

Stellen Sie wie immer sicher, dass Sie Papier-Prototypen verwenden, um neue potenzielle Layouts zu testen und sicherzustellen, dass Sie am richtigen Weg sind, bevor Sie zu viel Zeit und Geld investieren.

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