Sie sind hier:

Der Fluch der vielen Endgeräte – 7 häufige Usability-Probleme und ihre Lösung (1/2)

08 Jun
Bild: Custom Interactions



(08.06.2016) Dass Internetauftritte heutzutage auf vielen verschiedenen Endgeräten angezeigt werden, führt zu neuen Usability-Problemen. In unserer neuen Serie verrät uns deshalb Dr. Benjamin Franz, Geschäftsführer der Darmstädter Usability-Agentur Customer Interactions, welche typischen Probleme Sie vermeiden sollten – und wie es geht. Heute dreht sich dabei alles um Darstellung von Bildern und Texten. Im zweiten Teil kommende Woche am 15. Juni geht es mit Website-Navigation, Nutzerverhalten und Ladezeiten weiter. (an)

 

Wir von Custom Interactions haben durch unsere Tätigkeit als Usability & User Experience Experten / Tester jeden Tag mit den Usability & User Experience Problemen unserer Kunden zu tun. Hierbei können wir beobachten, dass bei der Gestaltung von Benutzeroberflächen immer wieder die gleichen Gestaltungsfehler gemacht werden – insbesondere auf Webseiten, denn sie sind in den letzten Jahren immer komplexer geworden. Mittlerweile kann man sie auf vielen verschiedenen Endgeräten anzeigen: Smartphones, Phablets, Tablets, Laptops oder dem klassischen Desktop-Computer. Eine 50-jährige Angestellte, die auf dem Weg von der Arbeit nach Hause noch etwas beim Bäcker einkaufen möchte, ruft die Webseite des Geschäfts auf der Suche nach den Öffnungszeiten von ihrem Arbeitscomputer aus ab. Wäre die gleiche Angestellte bereits auf dem Weg zu ihrem Auto, ist es ebenso denkbar, dass sie ihr Smartphone verwendet, um die gleiche Webseite zu besuchen. Möchte die Frau in einem dritten Beispielszenario nicht auf dem Rückweg, sondern auf dem Hinweg zur Arbeit beim Bäcker einkaufen, ist es auch denkbar, dass sie vor dem Verlassen der Wohnung noch schnell das Tablet im Wohnzimmer verwendet, um die Öffnungszeiten abzurufen. Die drei Szenarien zeigen: Eine auf den ersten Blick vermeintlich einfache Webseite muss in der heutigen Zeit auf allen Geräteklassen problemfrei angezeigt werden können. Dieser Blogbeitrag – und der zweite Teil kommende Woche – drehen sich daher um 7 häufige Usability-Probleme (und ihre Lösungen), die eins gemein haben – gleiche Webseite, aber viele unterschiedlich große Geräte.

 

 

Problem 1: Elementgrößen (z.B. Texte & Bedienflächen) ändern sich mit der Bildschirmgröße

Im Vergleich zum herkömmlichen Computerbildschirm sind die Bildschirme von Smartphones klein. Bei der Gestaltung der Webseite ist es allerdings keine Option, die einzelnen Elemente (z.B. Texte und Bedienflächen) auf Geräten mit kleinen Bildschirmen einfach zu verkleinern. Unter Umständen ist dann der Text so klein, dass er nicht mehr oder nur noch mit Mühe gelesen werden kann. Oft müssen daher die Schriftgrößen für kleine Bildschirme sogar vergrößert werden. Gleiches gilt für Bedienflächen: Während man am Computer sitzend mit einer Maus oder einem Touchpad ausgestattet ist, bedient man ein Smartphone in den meisten Fällen mit dem Finger. Dieses Eingabegerät ist weniger präzise, und Bedienflächen müssen entsprechend größer ausfallen. Das Smartphone als kleinstes Gerät stellt daher oftmals die höchsten Ansprüche an die Größe der Inhalte.

Lösung: Wählen Sie die Größe von Bedienflächen so, dass sie einfach mit dem Finger bedient werden können. Für eine erste Abschätzung der Größe können Sie sich an den Tastengrößen einer gängigen Tastatur orientieren. Dann werden die Bedienflächen auf jeden Fall groß genug.

Bei Texten sollten Sie die Schriftgröße so wählen, dass sie auch auf Smartphones noch problemfrei gelesen werden kann - mindestens so groß, dass im Hochformat maximal sechs Wörter in einer Zeile stehen können. Als weitere Orientierungsmöglichkeit können Sie auch die E-Mail-App auf Ihrem Smartphone verwenden; hier sind die Texte oftmals minimal klein dargestellt.


Problem 2: Der Textumfang ist zu lang

Wenn Sie die Lösungstipps aus dem vorherigen Problem umsetzen, werden Sie feststellen, dass auch schon kürzere Texte mit fünf Sätzen den kompletten Bildschirm von Smartphones füllen können. Hierdurch ergibt sich das zweite Problem: Oft ist der Textumfang auf Webseiten zu groß für Smartphones. Auch kurze Texte wirken auf Smartphones lang und werden ungern gelesen (Ausnahme: Webseiten, bei denen es um den Text geht, wie z. B. Nachrichtenseiten / Blogs). Viele Nutzer möchten Texte dann gerne überspringen und beginnen mit dem Scrollen. Ist der Textumfang zu hoch, kann das ungewollt lange dauern und Nutzer dazu verleiten, eine andere Webseite zu besuchen.

Lösung: Fassen Sie sich kurz. Machen Sie sich Gedanken über die Texte auf Ihrer Webseite und versuchen Sie Inhalte pro Abschnitt in ein bis zwei Sätzen zu vermitteln. Hierbei hilft es auch, wenn das Konzept Ihrer Webseite selbsterklärend ist und nicht durch Texthinweise angereichert werden muss (z.B. „Klicken Sie hier, um …“). Sollten Sie doch einmal längere Texte verwenden, versuchen Sie durch Abschnitte / Zwischenüberschriften kürzere Bereiche zu schaffen. Als Faustregel gilt: Die längsten Textabschnitte sollten maximal zwei Smartphonebildschirme im Hochformat füllen. Zur Auflockerung längerer Texte haben sich auch Bilder bewährt. Diese können jedoch zu einem weiteren Problem führen, das ich im nächsten Abschnitt beschreiben möchte.


Problem 3: Bilder (bzw. Bildausschnitte) sehen auf kleinen Bildschirmen anders aus

Negativbeispiel: Durch die Verkleinerung wird der Bildausschnitt nichtssagend. Bildquelle: (ursprüngliches Bild mit Backwaren & Cappuccino): Rainer Sturm / pixelio.de

Bei der Gestaltung einer Webseite werden die einzusetzenden Bilder oft in der vollen Auflösung eingebunden. Das ergibt allerdings nur Sinn, wenn man Bilder für große Bildschirme auswählen möchte. Werden diese Bilder anschließend auf einem Smartphone angezeigt, passiert zweierlei: Entweder wird das Bild sehr klein und ist nicht mehr richtig erkennbar oder der Bildausschnitt ändert sich. Letzteres kann dazu führen, dass sich die Wirkung des Bildes und damit die Wirkung der Webseite selbst komplett ändert. Ein Beispiel kann dem Bild links entnommen werden:

Lösung: Für dieses Problem gibt es verschiedene Lösungen, die sich im Aufwandsgrad unterscheiden. Die eleganteste und aufwändigste Lösung ist das Bereitstellen von unterschiedlichen Bildausschnitten bzw. Größen für verschiedene Bildschirme. Alternativ kann man auch versuchen, Bilder auszuwählen, die auch auf Smartphone-Größe verkleinert noch gut aussehen und bei denen die wichtigen Inhalte in der Mitte angeordnet sind – siehe Bild unten.

Positivbeispiel: Das Bild ist so gewählt, dass der Bildausschnitt auch nach der Verkleinerung auf dem Smartphone gut aussieht und zum Thema passt. Bildquelle (ursprüngliches Bild mit Backwaren): pixabay.de



Der Fluch der vielen Endgeräte: Teil 2 am kommenden Mittwoch, den 15. Juni


Da es noch sehr viel mehr Usability-Probleme gibt als diese, geht es in einer Woche weiter: Im zweiten Teil der Serie verrät Dr. Franz, was es zu den Themen Menünavigation, Nutzerverhalten und Ladezeiten zu sagen gibt.

Lesen Sie doch bis dahin unseren Usability-Leitfaden:

Usability und User Experience: Websites nutzerfreundlich gestalten

Weitere spannende Beiträge rund um das Thema Usability finden Sie hier auf dem Blog im Usability-Tag.



Gastautor

Dr. Benjamin Franz

Dr. Benjamin Franz ist Geschäftsführer der Usability, User Experience und User Interface Design Agentur Custom Interactions in Darmstadt. Gemeinsam mit seinem Team entwickelt er Benutzeroberflächen aller Art, die nicht nur perfekt funktionieren, sondern den Nutzer sogar begeistern.

http://www.custom-interactions.com

Archiv

Der BIEG Newsletter

Immer auf dem Laufenden bleiben Sie mit unserem monatlichen Newsletter. Wir informieren Sie über aktuelle Veranstaltungen und unsere neuesten Leitfäden!