freimark.de

Kampagnen, Informationsangebote, Anwendungen und Geschäftsprozesse spielen nicht nur bei Websites eine Rolle, sondern auch unterwegs. Das iPhone ist ein Hit, aber es ist längst noch nicht so weit verbreitet, dass man andere mobile Plattformen oder ältere Geräte ignorieren könnte – und dabei gibt es ein paar Punkte zu beachten.

Andere Nutzerbedürfnisse

Der wichtigste Unterschied zum Web ist, dass Nutzer unterwegs andere Informationen und Werkzeuge benötigen als zu Hause oder im Büro. Auf Websites kann man sich von einer Markenpräsentation beeindrucken lassen, komplexe Abläufe wie Online-Banking erledigen oder umfangreiche Recherchen durchführen. Mobile Sites müssen den anderen Nutzungskontext berücksichtigen: Welche Filialen einer Buchhandlung sind in der Nähe, wie sind deren Öffnungszeiten und haben sie das fragliche Buch vorrätig? Wie kann ich bei einer Autopanne auf einer Landstraße von meiner Versicherung, meinem Hersteller oder dem Automobilclub Unterstützung erhalten? Hat meine Verabredung zu der ich gerade unterwegs bin zwischenzeitlich abgesagt? Wie kann ich als Außendienstler vor Ort beim Kunden Preis und Verfügbarkeit eines bestimmten Produkts erfahren? Dazu kommt, dass Nutzer unterwegs einer Anwendung oder Site nicht die gleiche Aufmerksamkeit schenken wie zu Hause oder im Büro: Sie stehen gerade an einer roten Ampfel, laufen durch ein Flughafen-Terminal oder halten etwas in der anderen Hand. Daher müssen sich mobile Anwendungen und Sites auf das Wesentliche konzentrieren: Es gilt diesen Kern zu finden, um dann die bestmögliche User Experience anzubieten.

Zusätzlich müssen Unterschiede zum Surfen an stationären Rechnern – die sich durch die mobilen Endgeräte selbst ergeben – bedacht werden: Zu Hause oder im Büro stehen mehr Bandbreite, größere Displays, vollwertige Tastaturen und eine Maus zur Verfügung. Dagegen ist selbst die Bedienung eines so fortschrittlichen Geräts wie das iPhone 3G eine Qual: UMTS steht nur in Ballungsgebieten zur Verfügung und erreicht auch dort noch keine volle DSL-Geschwindigkeit, das Display misst 3,5 Zoll, die Tastatur hat die Größe eines Mäuseklaviers und die Steuerung mit Gesten ist vollkommen anders als die Steuerung per Maus. Das Interface Design muss diese Einschränkungen berücksichtigen.

Interface Design für mobile Endgeräte

Die wichtigsten Regeln für Content und Interface Design bei mobiblen Geräten sind: einfache Strukturen verwenden, die Anzahl der Page-Reloads reduzieren, Prioritäten setzen.

Nutzer sind bei der Bedienung ihres Geräts womöglich abgelenkt und die geringen Displaygrößern erlauben keine x-fach verschachtelten L-Navigationen. Einfache Strukturen unterstützen den Nutzer und werden dem kleinen Display gerecht: wenige Kategorien, eine geringe Verschachtelungstiefe und wenige Links pro Seite. Bewährt hat sich zudem die Listen-Navigation des iPod, um in tiefere Strukturen zu navigieren: Bei der Auswahl aus einer Liste gelangt der Nutzer nach rechts tiefer in die Struktur, nach links geht es eine Ebene zurück. Dieses Schema verwendet Apple auch auf dem iPhone (zum Beispiel in den Einstellungsdialogen) und viele Drittanbieter haben sich für ihre Software ein Beispiel daran genommen.

Seiten mehrfach neu zu laden dauert auf Mobiltelefonen länger, als einmal eine größere Seite zu laden. Für Textinhalte ist vertikales Scrollen daher das kleinere Übel, verglichen mit dem Aufstückeln von Inhalten in mehrere Seiten. Für Anwendungen sollte kein JavaScript eingesetzt werden, sofern man eine breite Palette von Endgeräten bedienen möchte: Die Script-Unterstützung der meisten Mobiltelefone ist sehr schlecht, so dass AJAX nicht in Frage kommt – bei Anwendungen wird man daher kaum um Page-Reloads herumkommen.

Sowohl beim Aufbau der Seitentypen als auch bei Screens innerhalb von Anwendungen ist es wichtig, Prioritäten zu setzen. Während bei Websites mehrspaltige Layouts Standard sind, gibt es bei mobilen Sites nur eine Spalte – wodurch eine Seite zu einem langen Schlauch wird. Ein Beispiel für die Contentseite eines Nachrichtenangebots: Header, Navigation mit den im Nutzungskontext wichtigsten Links (zurück zur übergeordneten Seite, weiterleiten…), der eigentliche Content – gegebenenfalls unterbrochen durch Teaser –, weitere Navigation (verwandte Artikel, andere Rubriken…), Footer. Bei Anwendungen gilt eine einfache Maxime: eine Aktion pro Screen. Der Nutzer muss nicht alles auf einem Screen erledigen können. Ein gutes Beispiel ist die iPhone-Anwendung Pennies, das bei der Führung eines Haushaltsbuchs unterstützt: entweder werden Ausgaben angezeigt oder man kann eine neue Ausgabe erfassen – nicht beides zugleich.

Endgeräte-Vielfalt meistern

Es gibt hunderte von unterschiedlichen Mobiltelefonen, die vele verschiedene Display-Auflösungen bieten und mit mehr oder weniger leistungsfähigen Browsern ausgestattet sind. Mobiltelefone lassen sich jedoch grob kategorisieren, so dass nicht vielfach unterschiedlicher Code programmiert werden muss: am unteren Ende der Skala stehen »Feature Phones« wie die Series-40-Geräte von Nokia: Sie haben ein kleines Display mit geringer Farbtiefe oder ein monochromes Display im edlen Bernstein-Look, eine numerische Tastatur mit Mehrfachbelegung von Tasten und zur Steuerung einen 5-Wege-Button. »Smart Phones« wie die Series-60-, SymbianOS- und Windows-Mobile-Geräte haben ein größeres Display, eine kleine QWERTZ-Tastatur und eventuell Bedienung per Stylus. »Touch Phones« wie das iPhone oder der kommende Palm Pre haben ein hochauflösendes Display, Bedienung per Gesten und einen leistungsfähigen Browser.

Für das Webdesign spielt die vertikale Display-Auflösung nur eine untergeordnete Rolle (siehe oben: vertikales Scrollen ist in Ordnung). So müssen lediglich drei Display-Breiten unterstützt werden. Durch die Trennung von Struktur und Layout mit XHTML und CSS ist zudem eine flexible Anpassung des Inhalts an die zur Verfügung stehende Breite möglich.

Ein paar Worte zur Entwicklung

Durch die Browser-Vielfalt bei Mobiltelefonen ist es wichtig, auf Webstandards zu setzen: XHTML und CSS bzw. die mobilen Pendants mit geringerem Funktionsumfang, XHTML-MP und Wireless CSS. Im Code selbst sollte der DOCTYPE deklariert, Telefonnummern verlinkt (<a href="tel:+4930555123">+49 30 555-123</a>), und Bilder mit den Attributen width, height und alt ausgezeichnet werden. Bei der Konzeption muss berücksichtigt werden dass Tabellen tabu sind, und Formulare sehr kurz gehalten werden müssen. Accesskeys sind ein gutes Mittel, um Shortcuts anzubieten.

Bei URLs für mobile Sites hat sich noch kein Standard durchgesetzt – daher ist es ratsam, die mobile Site unter sämtlichen der folgenden URLs anzubieten:

• die drei Subdomains m.domain.TLD, mobile.domain.TLD und mobil.domain.TLD
• die Pfade domain.TLD/mobil und domain.TLD/mobile
• die Top-Level-Domain .mobi

Bei einer automatischen Weiterleitung eines Mobilbrowsers auf die Mobilversion einer Site sollte immer auch ein Link auf die normale Website angeboten werden und umgekehrt – womöglich ist die Weiterleitung fehlerhaft, und manche Surfer benötigen trotz Mobiltelefon den vollen Inhalts- und Funktionsumfang der normalen Website. Umgekehrt kann auf der normalen Website mit dem Hinweis auf die Mobilversion Werbung für dieselbe betrieben werden.

Beispiele

Die Mobilversion des Spiegel auf m.spiegel.de ist ein sehr gutes Beispiel für eine mobile Site. Zu den besseren mobilen Anwendungen gehört die Facebook-Applikation für das iPhone.

Lektüre

Wer sich eingehender mit dem Thema befassen möchte, sollte sich folgende Artikel zu Gemüte führen:

• dotMobi Mobile Web Developers Guide
• dotMobi Mobile App Design – Getting to the point (Teil 2)
• Effective Design for Multiple Screen Sizes
• dotMobi Designing Usable Pocket Rockets
• iPhone Human Interface Guidelines (PDF)
• Patterns in Mobile Design
• Device Atlas von dotMobi
• Jakob Nielsen: Mobile Web 2009 = Desktop Web 1998

 
Erschienen am Saturday, 07.02.2009 @ 23:11
Tags: mobile