it-swarm.com.de

MOBILE ANSICHT: Zusätzliche Informationen in horizontaler Schriftrolle vs. Modal vs. Akkordeon

Ich arbeite an der mobilen Ansicht einer Website mit Profilen. In diesen Profilen befinden sich viele Kategorien/Gruppen, die mit Tags und anderen Informationen gefüllt sind. Um die Seite sauber und den Besucher fokussiert zu halten, sind die Details dieser Kategorien zunächst nicht alle sichtbar.

Während meiner Recherche habe ich drei Möglichkeiten gefunden, detaillierte Informationen anzuzeigen:

(enter image description here

Was sind die Vor- und Nachteile?

Anfangs möchte ich das erste Beispiel für die Anzeige grafischer Inhalte (Bilder, Symbole) verwenden, frage mich aber, ob mir wichtige UX- oder technische Probleme fehlen? Gibt es ein Problem mit dem horizontalen Bildlauf auf mobilen Websites? Und warum verwendet AirBnB beispielsweise die zweite Option in seiner App, aber die dritte Option auf seiner mobilen Website (Abschnitt mit Annehmlichkeiten)?

1
laEm

Einige Fragen, die Sie sich zu den Benutzern stellen sollten:

  1. Gibt es Vorteile, wenn mehr Bilder nebeneinander in einem Raster angezeigt werden?

  2. Drücken die Inhalte in den Miniaturansichten beispielsweise eine zusätzliche Informationsebene aus, wenn sie in einem Raster aufgelistet sind?

  3. Stellen Sie sich dieselbe Frage, wenn das Raster in Option 3 erweitert wird.

Einige weitere Überlegungen:

  1. Wie viele Bilder hat ein Profil? Wenn unbegrenzt, ist ein Rasterlayout in einem separaten Bildschirm einfacher zu durchsuchen als in eine Reihe zu beschränken.

  2. Das gleiche Problem tritt in Option 3 auf. Der Benutzer möchte möglicherweise alle Bilder sehen, während er auf andere Inhalte im Profil verweist. Es ist jedoch schwierig zu durchsuchen, wenn die Miniaturansichten den zusätzlichen Inhalt ganz nach unten drücken.

Zusammenfassend: Option 1 für wenige Bilder, Option 2 für viele Bilder, Option 3 für wenige Bilder, aber der Vorteil, ein Raster zu sehen.

Es gibt wahrscheinlich viele andere Anwendungsfälle für Ihre spezielle Website. Führen Sie nach Möglichkeit einige Benutzertests durch. Wenn nicht, füllen Sie das Drahtmodell mit dem tatsächlichen Inhalt und berücksichtigen Sie die Vor- und Nachteile für jedes Layout unter Berücksichtigung der Anforderungen Ihres Benutzers auf dieser bestimmten Seite.

Beispielsweise muss der Benutzer bei Airbnb möglicherweise ständig die Bilder überprüfen, um die Annehmlichkeiten und das Layout des Apartments beim Lesen der Beschreibung visuell zu bestätigen. Es ist möglicherweise einfacher für sie, das Bild einfach zu scrollen und zu öffnen, als das Raster in einem separaten Bildschirm öffnen und das richtige Bild auswählen zu müssen.

1
Nicolas Hung