The one thing you can say for certain about Twitter is that it makes a terrible first impression. You hear about this new service that lets you send 140-character updates to your followers, and you think, Why does the world need this, exactly? It’s not as if we were all sitting around four years ago scratching our heads and saying, »If only there were a technology that would allow me to send a message to my 50 friends, alerting them in real time about my choice of breakfast cereal.«

So beginnt die Titelstory des TIME-Magzine von dieser Woche ¹ – und wenn ich Freunden von Twitter erzähle, ernte ich oft ungläubige Blicke: »Warum sollte mich interessieren, wenn bei jemandem ein Sack Reis umfällt? Warum sollte ich schreiben, dass mir ein Sack Reis umgefallen ist?« Der zitierte TIME-Artikel und ein etwas älterer Artikel der New York Times fassen es treffend zusammen: Ambient Awareness.

Ambient Awareness

Ich folge Freunden und Kollegen auf Twitter: Ich bekomme mit wenn sie sich verlieben, Überstunden machen, Bauchschmerzen haben, sich über das schmutzige Geschirr in der Büroküche ärgern, sich auf das Wochenende freuen oder wenn der Fiat 500 den Geist aufgibt. Es ist nicht irgendein Sack Reis der umfällt, es ist Dein Sack Reis. Die kleinen Dinge die man auch voneinander mitbekäme, würde man sich im Büro gegenüber sitzen – nur das Twitter über die Distanz funktioniert.

Alle paar Stunden rufe ich die Website von Twitter auf und überfliege die Statusnachrichten (Tweets). Ein einzelner Tweet aus 140 Zeichen erzählt nicht viel, aber über die Zeit entsteht ein Roman. Und oft ergeben sich kleine Gespräche:

Häufig liest man einen Tweet und beim nächsten persönlichen Gespräch oder in einem Telefonat nimmt man die Unterhaltung bei dem Punkt wieder auf, bei dem sie in Twitter aufgehört hat.

Informationsaustausch

Twitter wird auf verschiedene Weisen genutzt – so wie ein Blog ein persönliches Tagebuch sein kann, während ein anderes Blog einen fachlichen Bezug hat. Manche verwenden Twitter auch, um Links zu posten: Artikel die sie selbst lesenswert finden oder von denen sie denken, dass sie für ihre Follower interessant sein könnten. Ich folge einigen Kollegen die häufig solche Links posten, und manches Mal waren gute Sachen dabei: Studien, ein Artikel zu genau der Sache über die ich schon seit Tagen grüble, Kunst im Netz.

Twitter eignet sich auch, um eine Frage in den Raum zu werfen: 5 Minuten später hat man 3 Antworten an der Hand. Ist ein halb eingerissener Geldschein noch was wert? Welches sind die beliebtesten Handys mit Flash-Unterstützung?

Auf Konferenzen läuft inzwischen ein Teil der Unterhaltung über Twitter ab. Die Teilnehmer einigen sich auf ein Kürzel (Hashtag), so dass Tweets zu dem Thema leicht als solche zu erkennen – und per Suchfunktion aufzufinden – sind: Wo die interessantesten Vorträge laufen, wo etwas liegen geblieben ist, wo noch Unterstützung gebraucht wird, wo man sich abends trifft.

Ausdrucksform

Die 140 Zeichen zwingen dazu, sich kurz zu fassen: Manche Tweets machen in ihrer Kürze den japanischen Haikus Konkurrenz, und selbst in 3 Worten und einem Hashtag lässt sich noch ein Gag transportieren:

Twitter und Unternehmen

Unternehmen können Web-2.0-Mechanismen auf zwei Arten nutzen: zur Recherche und zum Mitmachen. Um zu erfahren was die »Bloggosphere« oder »Twittersphere« denkt, genügt eine Suche nach einem Marken- oder Produktnamen. Diese Guerilla-Marktforschung ist natürlich nicht repräsentativ, aber sie gibt einen ersten Eindruck, zeigt Trends auf und liefert vor allem schnelle Meinungsbilder zu aktuellen Entwicklungen.

Wie können Unternehmen nicht nur lesen, sondern auch mitmachen? Indem sie in den Dialog mit ihren Kunden eintreten. Lufthansa ist seit kurzem bei Twitter – hier die Einträge von drei Tagen:

»Nicht suchen, buchen. Top-Aktion nur bis Di. Ab 99 € hinfliegen. USA ab 349 €.« – mit einem Wort: Werbung. Die Lufthansa wird damit viele Follower bekommen, aber ich wage die Voraussage, dass der Anteil der Schnäppchenjäger in der Gefolgschaft groß sein wird. Eine langfristige Kundenbindung lässt sich so nicht etablieren.

Schlimmer noch: Lufthansa ignoriert die Besonderheiten des Kommunikationskanals. Twitter eignet sich hervorragend, um mit anderen ins Gespräch zu kommen. Ein Monolog statt eines Dialogs könnte dem Image bei den Twitter-Nutzern womöglich eher schaden als nutzen.

Das Medium verstehen

Dass es anders geht, zeigt die Fluglinie JetBlue:

»Please call us for your options; there’s an earlier flight. Weather in the NE may cause delays or cancellations. @chrisnooney your knees are important to us; we’ve got no plans on cutting legroom.« JetBlue tritt mit Fluggästen und Interessenten in einen Dialog ein. Dies wird bereits in den Kurzbeschreibungen der beiden Fluglinien deutlich:

Während die Lufthansa unnahbar klingt (»Der offizielle Lufthansa Deutschland Twitter-Kanal«), klingt JetBlue einladend: »Have a question? Follow us and let us help!« Ab und zu fließen auch kleine Tipps ein und geben der Unterhaltung in bester Cluetrain-Manier einen privaten Ton:

@rashidanyc Hope you got a chance to snag one of the Moroso lounge seats by gate 15 at T5. I love watching the planes there ^MJ

@JustinRZB showing up early at the airport means you can relax before your flight, showing up late means you can relax until the next one :/

Wenn sich Unternehmen in Medien engagieren, sollten sie sich sehr genau ansehen, wie das Medium funktioniert. Als 1996 die ersten Websites aufkamen, wurden einfach nur die Texte und Bilder der vorhandenen Fyler online gestellt. 2007 galt bei Second Life das olympische Motto »Dabei sein ist alles«, und ein Jahr später verschwanden die sinnlosen Company Islands wieder so schnell wie sie aufgetaucht waren. Das bisherige Kommunikationsmodell one-to-many funktioniert nicht mehr – markets are conversations.

Mein Twitter-Handle ist freimark – alles rund um Konzeption, UX und den Job. Mit einem zweiten (privaten) Account halte ich Freunde und Familie auf dem Laufenden.

1. Das Cover ist auch bemerkenswert. ↩

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.

Listen-Navigation des iPod, hier angewandt in den Einstellungsdialogen des iPhone: Nach rechts navigieren um tiefer in die Struktur zu gelangen (»Info, Benutzung, Netzwerk...«), nach links navigieren um eine Ebene zurückzugehen (»Einstellungen«).

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