Startseite / Blog / Usability-Leitfaden für Popups

Usability-Leitfaden für Popups

Morin Ostkamp 8. Mai 2018

Dennis Payk schildert in seinem Artikel vom 7. März 2018, dass Benutzer in beinahe allen map.apps-Anwendungen auf detaillierte Informationen zu einzelnen Geo-Objekten zugreifen können bzw. müssen. Die Popups der Linie 4 von map.apps stellen für solche Detailinformationen eine moderne Lösung bereit, deren Gestaltungsmöglichkeiten im Artikel von Dennis Payk vorgestellt werden. Aber wie sollten die Informationen in Popups hinsichtlich des User-Centered Designs (UCD) gestaltet sein? Yevgeniya Litvinova beschäftigte sich mit dieser Frage im Rahmen ihrer Masterarbeit, die con terra in Kooperation mit dem Institut für Geoinformatik (ifgi) der Universität Münster ausgeschrieben hatte. Das Ergebnis dieser Arbeit, ein Usability-Leitfaden für Popups mit Schwerpunkt auf mobilen Anwendungen, stellt dieser Artikel im Folgenden vor.

Popups – Status Quo

Die Methode zur Darstellung von detaillierten Informationen für Geo-Objekte hat viele Namen: „Popups“, „Pop-Up Balloon“, „Feature Info“ oder „Info Window“ sind nur einige Beispiele. Um eine Übersicht zu bekommen, trägt die Masterarbeit deshalb zu Beginn die verschiedenen existierenden Ansätze für Popups zusammen (siehe Abbildung 1). Auffällig ist die ähnliche Darstellungsform, die sich seit den ersten Web-GIS um das Jahr 2000 herum nicht verändert zu haben scheint (vgl. Abbildung 1 mit den Bildschirmfotos auf dieser Internetseite): Alle Ansätze verwenden die Metapher einer Sprechblase, wie sie aus Comics bekannt sind. Jakob Nielsen empfiehlt eine solche einheitliche Darstellung, die sich an den üblichen Standards orientiert, um den Benutzern den Einstieg in bzw. Umstieg auf eine Software zu erleichtern [1]. Die Spitze der Sprechblase zeigt dabei stets auf das Geo-Objekt in der Karte, während im Inneren der Sprechblase verschiedene Informationen dargestellt werden. Je nach Anwendungsfall können neben den eigentlichen Informationen auch Aktionen zur Verfügung stehen, siehe etwa Abbildung 1 (d). Das visuelle Erscheinungsbild der Popups lässt sich in der Regel anpassen, z.B. durch individuelle Schriften oder Farben.

(a)

 

(b)

 

(c)

 

(d)

 

(e)

(f)

Abbildung 1: Bildschirmfotos aktuell existierender Popups in verschiedenen GIS und Web-GIS: (a) Google Maps, (b) ArcGIS Online, (c) Leaflet, (d) CARTO, (e) Mapbox, (f) OpenLayers.
 

Laut der Masterarbeit sind die Gestaltungsmöglichkeiten für Popups auf Desktop-Systemen ausführlich dokumentiert. Für den Einsatz in mobilen Anwendungen gibt es allerdings deutlich weniger Anleitungen und konkrete Entwurfsempfehlungen – eine Ausnahme ist beispielsweise das Buch von Ian Muehlenhaus [2]. Der unten vorgestellte Usability-Leitfaden leistet somit einen interessanten wissenschaftlichen Beitrag, der aber auch praxisnah angewandt werden kann.

Herleitung eines Usability-Leitfadens

Die Masterarbeit analysiert die existierenden Ansätze für Popups mit zwei etablierten Methoden: eine heuristische Evaluation sowie Benutzer- und Experten-Interviews [1]. Zum einen lieferte die heuristische Evaluation neben Erkenntnissen über typische Größen und Positionen von Popups auch Aufschlüsse über die häufigsten Usability-Probleme. Beispielsweise gab es bei mehreren der getesteten Ansätze Probleme, wenn versehentlich durchgeführte Aktionen rückgängig gemacht werden sollten. Zum anderen deuteten die Ergebnisse der Interviews an, dass die Inhalte der Popups exakt an die Bedürfnisse und Erwartungen der Zielgruppe angepasst werden sollten – idealerweise können Benutzer die Inhalte selbst anpassen. Die interviewten Experten von Esri, Mapbox, Carto, Here, TripAdvisor und Trivago wiesen insbesondere darauf hin, dass Popups unbedingt mit Hilfe des User-Centered Designs entworfen werden und die visuelle Darstellung an jeden Anwendungsfall angepasst werden sollte.

Basierend auf dieser Analyse der existierenden Ansätze wurden Empfehlungen zur Umsetzung von Popups abgeleitet. Daraus ergab sich ein Usability-Leitfaden, der insgesamt neun Punkte umfasst:

  1. Geben Sie den Kontext an. So können Benutzer einen Zusammenhang zwischen den gezeigten Informationen und anderen Geo-Objekten auf der Karte herstellen. Dazu zählen u.a. Maßeinheiten für Zahlenwerte oder der Rang des Geo-Objekts innerhalb einer nach Attributen sortierten Ordnung.
  2. Passen Sie das Layout an die Zielgruppe an. Die Benutzer müssen entscheiden, welche Inhalte in welcher Reihenfolge angezeigt werden.
  3. Vermeiden Sie Scrollbars. Passen Sie stattdessen die Größe des Popups an, verwenden Sie falls nötig eine Vollbildanzeige oder reduzieren Sie die Menge an Informationen. Ansonsten sollte die Form und Größe der Popups so gewählt werden, dass die Karte und die darauf gezeigten räumlichen Zusammenhänge nicht in den Hintergrund geraten.
  4. Kennzeichnen Sie den Ausweg. Es sollte eine klar erkennbare Möglichkeit geben, um zur reinen Kartenansicht zurückzukehren. Jakob Nielsen empfiehlt ähnliche Maßnahmen [1].
  5. Nutzen Sie ein Vollbild-Popup bei Interaktionen. Ansonsten könnten insbesondere Gesten Probleme mit der Steuerung der Hintergrundkarte verursachen, z.B. Wischen oder Zoomen.
  6. Clustern Sie zusammenliegende Geo-Objekte. Gerade wenn viele Geo-Objekte auf der Karte angezeigt werden ist ein intelligentes Clustering bzw. Spiderfying wichtig. So öffnen Benutzer nicht unbeabsichtigt Popups. Die Granularität für die einzelnen Zoom-Stufen muss für jeden Anwendungsfall individuell angepasst werden. Für Polygon- oder Linien-Objekte sollte nur die Beschriftung des jeweiligen Objektes die Anzeige des zugehörigen Popups steuern.
  7. Sorgen Sie für eine natürliche, ergonomische Interaktion. Popups sollten in der Regel am unteren Bildschirmrand des mobilen Gerätes platziert werden, damit Benutzer die Popups bzw. deren Inhalte bequem mit dem rechten und linken Daumen steuern können.
  8. Zeigen Sie deutlich, um welches Geo-Objekt es geht. Heben Sie das Geo-Objekt, für das detaillierte Informationen im Popup angezeigt werden, deutlich hervor. Nutzen Sie dazu beispielsweise Farben, Formen, Größen oder das Bundle „Featureinfo Highlight“.
  9. Erklären Sie den Benutzern die Popups. Nicht alle Anwender sind mit dem Konzept der Popups vertraut und wissen daher nicht, dass sie durch das Auswählen eines Geo-Objektes auf der Karte auf Detailinformationen zugreifen können. Das Usability-Urgestein Donald Norman fasst dieses Konzept unter dem Begriff „Discoverability“ zusammen [3].

Evaluation der Ergebnisse

Die Empfehlungen dieses Usability-Leitfadens für Popups wurden anschließend in einer Benutzerstudie evaluiert. Es würde den Rahmen dieses Blogartikels sprengen, auf den Aufbau, die Durchführung und die Ergebnisse der Studie im Detail einzugehen. Insgesamt zeigt die Benutzerstudie aber, dass die Usability von Popups durch die oben genannten Empfehlungen deutlich gesteigert werden konnte. Abbildung 2 visualisiert auszugsweise die Unterschiede zwischen einer mobilen Anwendung mit und ohne Berücksichtigung der vierten Empfehlung („Kennzeichnen Sie den Ausweg“). Bei der praktischen Anwendung für mobile Web-GIS ist deshalb von einer spürbaren Steigerung der Usability auszugehen. Auch wenn der Fokus der vorgestellten Masterarbeit auf mobilen Anwendungen lag ist anzunehmen, dass der vorgestellte Usability-Leitfaden auch einen positiven Einfluss auf die Usability von Desktop-Anwendungen hat.

Abbildung 2: Ergebnisse der Benutzerstudie für die vierte Empfehlung des Usability-Leitfadens (Anwendung ohne Empfehlung als „Before“, Anwendung mit Empfehlung als „After“). Die Bearbeitungszeit (Task Completion Time) sinkt um ca. 8 Sekunden, die Erfolgsrate (Task Completion Rate) steigt um ca. 45 % und die wahrgenommene Usability (SUS score) steigt um ca. 22 Punkte.

 

Eine zukünftige Abschlussarbeit könnte deshalb die Übertragbarkeit des Usability-Leitfadens auf andere Systeme genauer untersuchen. Ebenso können sich andere Arbeiten mit weiteren Beobachtungen befassen, die im Rahmen dieser und vorangegangener Masterarbeit gemacht wurden. So betrachtet Lukas Blickensdorf vom Institut für Organisations- und Wirtschaftspsychologie der Universität Münster zurzeit in seiner Bachelorarbeit, wie der Zusammenhang zwischen Einträgen im Ergebniscenter und der Karte besser dargestellt werden kann. Eine erste Benutzerstudie dazu wurde bereits während der map.apps days mit zahlreichen Teilnehmern durchgeführt. Außerdem hat con terra eine weitere Abschlussarbeit ausgeschrieben, die sich mit der Beobachtung beschäftigt, dass mobile Web-GIS oft unbeabsichtigt beendet werden, weil Benutzer aus Versehen den Zurück-Knopf des Browsers verwenden.

Machen Sie Ihren ersten UX-Schritt

Hat dieser Artikel Ihr Interesse am Leistungsbereich Spatial UX von con terra geweckt? Weitere Informationen und Kundenmeinungen finden Sie in den Referenzen bzw. Case Studies unter der Rubrik „Spatial UX“. Gerne senden wir Ihnen auch unverbindlich unser White Paper zu oder beraten Sie zu unseren UX-Angeboten.

Sind Sie auf der Suche nach einem Praktikum oder einer Abschlussarbeit im Bereich Usability, User Experience oder User-Centered Design? Dann freue ich mich über Ihre Bewerbung per E-Mail an m.ostkamp@conterra.de.

Literatur

[1] Jakob Nielsen. Usability Engineering. Elsevier, 1994. ISBN: 978-0125184069
[2] Ian Muehlenaus. Web Cartography: Map Design for Interactive and Mobile Devices. CRC Press, 2013. ISBN: 9781439876220
[3] Donald Norman. The Design of Everyday Things. Basic Books, 2013. ISBN: 0465050654