Vorbei sind die Zeiten wo man für das Surfen noch auf einen Rechner mit Telefonleitung oder WLAN Verbindung angewiesen war. Gemäss einer Studie von Chitika (iOS passes Mac OS in Share of Web Traffic Propelled by Sales for Mobile and Tablet Devices) überstieg der Datenverkehr in den USA welches über iOS Geräte (also iPhone, iPad, etc.) erfolgte denjenigen von Mac OSX Systemen. Abgesehen davon, dass sich die Erhebung auf Zahlen stützt, die über das Chitika Ad Network erfasst wurden, lässt sich ein klarer Trend erkennen. Das Mobile Internet wird immer populärer und dementsprechend werden sich auch die darin angebotenen Inhalte verändern. Zwei weitere Zahlen unterstreichen diesen Trend: Seit Ende 2012 gibt es mehr Mobiltelefone als Menschen (More Mobiles Than People Worldwide by the End of 2012). Samsung rechnet für 2012 ebenfalls damit, dass 29% aller Mobiltelefone Smartphones sein werden, das sind über 500 Millionen! (Samsungs says smartphones will make up 29 percent of the market in 2012).
Anbieter von Internetseiten stehen also vor zwei grossen Herausforderungen:
- Sind meine Inhalte fit für mobiles Surfverhalten?
- Ist meine Website fit für mobile Endgeräte?
Fit für mobiles Surfverhalten
© by photocase.de
Wann hat das Angebot einer Website Relevanz für einen Besucher? Zunächst sollte man das Angebot – ähnlich einer Mobile-App – anhand der drei typischen Anwendungsfälle hin überprüfen:
- Ist es ein wiederkehrende Tätigkeit (Repetitive Now)
- Kann man sich damit die Zeit vertreiben (Bored Now)
- Kann man damit ein dringendes Problem lösen (Urgent Now)
Trifft das Angebot auf eine der drei Fälle zu, hat man bereits die wichtigste Funktion / Information ein Website herausgefiltert.
In der Realität ist dies für die Mehrheit der Websites eher unwahrscheinlich. Nichtsdestotrotz werden auch diese Seiten immer häufiger – wie bereits oben ausgeführt – über Smartphones und Tablets abgesurft. Eine inhaltliche und funktionale Neubewertung des Angebotes ist daher sicher angebracht. Folgende Methode hilft dabei die bestehenden Informationen und Funktionen zu priorisieren und für mobile Geräte attraktiver zu machen. Hierbei werden die Elemente einer bestehenden Site in vier Kategorien unterteilt:
- Essentiell (engl. Mandatory)
- Nützlich (engl. Useful)
- Unterstützend (engl. Supplemental)
- Belanglos (engl. Trivial)
Was ist essentiell?
Diese beantwortet sich am einfachsten, wenn man sich in die Rolle Benutzers versetzt und die Website nach primären Aspekten betrachtet. Weshalb nutze ich dieses Angebot? Was interessiert mich als erstes, wenn ich die Website besuche? Nach welchem Element suche ich zuerst? Mögliche Antworten wären z.B. die Fahrplanauskunft, aktuelle Störungsmeldungen, ein Eingabeformular, ein Login-Button, wenn ein Grossteil des Angebotes nur für registrierte Nutzer möglich ist.
Was ist nützlich?
Hier lassen sich alle Themen zusammenfassen, die als primäre Ziele und Bedürfnisse aus Sicht des Anbieters bezeichnet werden können. Was will ich dem Besucher “verkaufen”? Was soll er “mitnehmen”? Ein typisches Element ist der sogenannte Super-Conversion-Button mit dem der Besucher auf das primäre Angebot einer Website geführt werden soll. Aber auch die Hauptnavigation, ein Kampagnenelemente (Videos, Bilder), das Premiumangebote oder eine neue Funktion, die kommuniziert werden soll, gehören in diese Kategorie.
Was ist unterstützend?
Hierzu zählen vorwiegend Themen und Funktionen, die dem Nutzer zusätzlichen Mehrwert und Komfort bieten um weitere Inhalte zu erschliessen, sich zu orientieren oder Aktionen auszuführen, die als sekundär bezeichnet werden können. Dazu zählen zum einen die ganzen Social-Media-Dienste (Twitter, Facebook, Pinterest, etc.) aber auch ein Breadcrumb, der FatFooter, Sprachwahl oder die Suchfunktion. Bei komplexen Angebote, die nicht vom Besucher sofort erschlossen werden können, sind eine GuidedTour, Beschreibung das Angebotes, Claim, etc. eine unterstützende Massnahme und gehören daher in diese Kategorie.
Was ist belanglos?
Dazu gehören nun alle zweitrangigen Elemente, welche die Bedürfnisse und Sicht des Anbieters betreffen, bzw. von diesem kommuniziert werden müssen, welche nicht sein Kerngeschäft betreffen. Beispiel hierfür sind das Impressum, der Kontakt, Sitemap aber auch Teaser zu weiteren Themen oder Services.
Fit für mobile Endgeräte
Um eine Website fit für mobile Endgeräte zu machen gibt es zum einen technische Beschränkungen und Aspekte der Benutzerführung zu berücksichtigen. “Performance” heisst das Schlüsselwort für diese beiden Disziplinen. Ist die Performance auf der Seite hervorragend, wirkt sich dies auch positiv auf das Nutzererlebnis aus.
Entscheidend für eine gute Performance aus technischer Sicht ist zum einen die Datenübertragung. Um beispielsweise zu vermeiden, dass Bilder, die für die Darstellung auf einem Desktop oder Tablet optimiert sind, auch auf ein Smartphone mit kleiner Displaygrösse übertragen werden, verwendet man eine als Media Queries bezeichnete Methode, um je nach Gerätedisplay eine entsprechende grössenoptimierte Bilddatei zu übertragen. Dabei ist es nicht nur möglich, eine Bildateien zu übertragen, sondern auch eine entsprechende CSS-Datei. Dadurch ist es möglich Seitenlayout, Inhaltselemente und Schriftgrössen je nach Displaygrösse und Seitenverhältnis (Hoch- oder Querformat) entsprechend anzupassen. Beim Onlineauftritt vom “The Boston Globe” wird diese als “Responsive Web Design” bezeichnete Technik bereits erfolgreich und meiner Meinung nach auch überaus gelungen eingesetzt.
Für diese Methode gibt es bereits einige HTML/CSS-Frameworks, die sich in Layoutraster und unterstützte Bildschirmgrössen unterscheiden. Hier eine kleine unvollständige Auswahl:
- BluCSS – Layout in drei Abstufungen:
- 240 bis 469 Pixel dynamisches einspaltiges Raster
- ab 470 bis 719 Pixel dynamisches 10spaltiges Raster
- ab 720 bis 979 ein zentriertes fixes 705 Pixel Grid mit 10 Spalten
- ab 980 Pixel ein zentriertes fixes 960 Pixel Grid mit 10 Spalten.
- 1140CSSgrid – Layout in zwei Abstufungen
- bis 769 Pixel ein dynamisches einspaltiges Layout
- ab 770 Pixel bis 1140 Pixel dynamisches 12spaltiges Layout
- ab 1140 Pixel ein zentriertes fixes 12paltiges Layout
- 320andUp – Spaltenraster basierend auf Less Framework 4
- Abstufungen für Grössen ab 320, 480, 600, 768, 992 and 1382px
- HTML5 Boilerplate Integration
- GoldenGridSystem – hochflexibles dynamisches Layoutraster von 240 bis 2540px
- 240 bis 479 Pixel dynamisches 4spaltiges Raster
- 480 bis 1869 Pixel dynamisches 8spaltiges Raster
- ab 1870 Pixel dynamisches 16spaltiges Raster
- FramlessGrid – flexibles Layoutraster mit fixen Spaltenbreiten von 48 Pixel
- 320 bis 479 Pixel zentriertes fixes 4spaltiges Layout
- 480 bis 599 Pixel zentriertes fixes 6spaltiges Layout
- 600 bis 899 Pixel zentriertes fixes 8spaltiges Layout
- 900 bis 1899 Pixel zentriertes fixes 12spaltiges Layout
- ab 1900 Pixel zentriertes fixes 24spaltiges Layout
- LessFramework – recht einfaches aber starres Layoutraster mit 68 Pixel breiten Spalten
- Foundation – ein auf Rapid Prototyping ausgelegtes Framework für Responsive Design, das ebenfalls auf einen 12spaltigen Raster basiert
- 320 bis 479 Pixel zentriertes fixes 3spaltiges Layout
- 480 bis 767 Pixel zentriertes fixes 5spaltiges Layout
- 768 bis 991 Pixel zentriertes fixes 8spaltiges Layout
- ab 992 Pixel zentriertes fixes 12spaltiges Layout
Wo ist mein Cursor?
Ein weitere wichtiger Aspekt für die Gestaltung ergibt sich aus der Bedienung mobiler Geräte. Dieser werden anders als bei Notebook- oder Desktopgeräten nicht mittels Maus oder Trackpad gesteuert sondern über Berührung. Hierbei übernimmt der Finger die Funktion des Cursors, was folgende Implikationen auf das Interface-Design hat:
- Der “Cursor” ist nicht immer sichtbar, sondern nur dann, wenn der Finger das Display berührt womit die ansonsten beliebten Hovereffekte vom Desktop-Browsing nicht mehr funktionieren
- Der “Cursor” ist sehr „dick“ und unpräzise deshalb beträgt der optimale Klickbereich 6x9mm (ca. 30X44 Pixel/72dpi), was insbesondere bei Linklisten und Navigationspunkten zu berücksichtigen ist
- Der Finger sitzt an einer Hand, welche Inhalte unterhalb des Fingers verbergen. Daher sollten Inhalte, die bei Tap erscheinen nach Möglichkeit oberhalb des Tap-Punktes eingeblendet werden.
Hab’ ich bereits gedrückt?
Generell wird sehr häufig das Feedback von interaktiven Elementen vernachlässig. Bei der Mausbedienung ist das weniger bedeutsam, da man mechanische Klicken der Maus als Reaktion auf einen Klick erhält. Bei einem Touch-Interface fehlt diese Feedback jedoch und muss daher auf visuellem Wege erfolgen. Dies kann durch Verändern der Farbe erfolgen oder auch durch vertikales Versetzen des Elementes zum Beispiel um 2 Pixel nach unten.
Grundsätzlich führen diese Massnahmen auch zu einem besseren Nutzererlebnis beim Betrachten der Website auf einem Desktoprechner. Die Seiten sind übersichtlicher, attraktiver und funktionaler gestaltet. Die Informationen können besser aufgenommen und wiederverwendet werden, da die Integration von Social Media Elementen bereits berücksichtigt wurde. Schlussendlich wird auch die Konversion verbessert, da man bereits bei der Konzeption von wenig Raum (=Displaygrösse) ausgeht und man so gezwungen ist sich auf das Wesentlich zu konzentrieren.