In diesem Vortrag erläutere ich was Mental Models sind, 7 Gründe warum man sie im qualitativen Research einsetzen sollte – und ich zeige wie Nutzerinterviews vorbereitet, durchgeführt und als Diagramm ausgewertet werden.

Ein Mental-Model-Diagramm zeigt alle Schritte, mit denen Menschen ein Ziel erreichen oder eine Aufgabe erledigen. Es zeigt dabei sowohl das große Ganze, als auch kleine Details. Durch die Methode erlangen wir Empathie für die Bedürfnisse unserer Kunden und sehen die Welt durch ihre Augen. An die Wand gehängt, regt das Diagramm zu Diskussionen und Ideen an. In Gesprächen mit Stakeholdern fällt es leichter, mit Erfahrungen der Nutzer zu argumentieren. Ein Mental Model kann zudem die Grundlage für Personas sein, es kann für eine Gap Analysis verwendet werden, und man kann damit Berührungspunkte in CRM-Projekten identifizieren. Außerdem haben die Ergebnisse sehr lange Bestand, unter Umständen sogar Jahrzehnte.

Downloads

• Folien des Vortrags (PDF)
• Folien des Vortrags, mit Notizen (PDF)
• Mitschnitt des Vortrags von der IA-Konferenz
• Diagramm und 2 Interview-Transkripte (Zip) [Einverständnis zur Veröffentlichung liegt von den Gesprächspartnern vor]

Links

• Das Buch von Indi Young
• Präsentation von Indi Young bei den Google TechTalks
• Artikel von Indi Young bei A List Apart

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. ↩

Kernaussage meiner Präsentation ist: Es gibt jede Menge Methoden, und es gibt nicht den einen Weg, um ein Problem zu lösen. Es hängt davon ab, an wen ich mich richte und welchen Zweck ich erreichen möchte. Daher müssen Umfang und Inhalt von Konzeptionsdokumenten an die Adressaten und den Zweck angepasst werden.

Mit einigen Beispielen habe ich veranschaulicht, wie Methoden das Verstehen, Kommunizieren, die Produktionsvorbereitung und -begleitung, sowie das Dokumentieren unterstützen können. Die Präsentation stelle ich hier zum Download zur Verfügung; einmal nur die Folien und die Folien mit Notizen. Die Links in den PDF-Dateien sind anklickbar. Zusätzlich gibt es einige der Deliverables zum Download.

Ich möchte mich ganz herzlich bei Anna Buß und Stephen Köver bedanken: Da mich meine Stimme wegen einer Kehlkopfentzündung verließ haben sie spontant angeboten, meinen Vortrag auf der IA-Konferenz (Anna) bzw. dem UXcamp (Stephen) auf Basis meiner Notizen zu halten. Vielen Dank! Mein Dank gilt auch Indi Young, Joshua Porter, Nick Iozzo und Nathan Curtis für die freundliche Genehmigung, ihre Deliverables zeigen zu dürfen. Thanks!

Downloads

• Folien des Vortrags (PDF)
• Folien des Vortrags, mit Notizen (PDF)
• Deliverables (Zip)

Links

• »Buying a House«-Mental-Model als PDF
• Mehr zum Usage Lifecycle von Joshua Porter
• Die Comics in der User Journey habe ich nicht selbst gezeichnet; dazu habe ich ein Visio- und ein OmniGraffle-Stencil verwendet
• Informationen zu OAD gibt es bei Nick Iozzo
• Das Unify-Poster von Nathan Curtis gibt es im Unify-Blog als PDF

Diese Anleitung erklärt in 15 einfachen Schritten, wie Sie eine DRM-geschützte PDF-Datei auf einem anderen Rechner öffnen als dem, auf dem Sie die Datei gekauft haben.

Schritt 1

Die PDF-Datei mit dem »Digital Editions«-E-Book habe ich seinerzeit aufgehoben. Ein Doppelklick auf die Datei im Finder öffnet Adobe Reader mit folgendem Fehlerdialog:

Für dieses Dokument sind die Funktionen der von Adobe Digital Editions unterstützten Digitalen Rechteverwaltung (DRM) erforderlich. Diese Software ist kostenlos und kann über eine Breitbandverbindung in nur wenigen Minuten heruntergeladen werden. Möchten Sie Adobe Digital Editions jetzt herunterladen?

[Nein] [Ja]

Eine Bemerkung am Rande: Button-Labels sollten nach Möglichkeit Verben enthalten statt nur Auswahlmöglichkeiten wie »Ja/Nein« oder »OK/Cancel«. Verben in den Labels ermöglichen es den Nutzern, eine Aktion und ihre Auswirkungen auf einen Blick zu erfassen.

Schritt 2

Ich lese mir die Fehlermeldung durch und klicke auf »Ja«. Anschließend werde ich auf die Website der Digital-Editions-Software weitergeleitet, die aktuell in Version 1.7.1 angeboten wird. Dort lädt ein großer »Starten«-Button zum Klicken ein:

Adobe Digital Editions Installateur

[Starten]

Nach dem Klick auf »Starten« und einer Sicherheitsabfrage des Flash-Players wird der Installer heruntergeladen. Anschließend wird Digital Editions automatisch gestartet:

Die First-Run-Experience lässt Raum für Verbesserungen: Kein Hinweis was der Leser als nächstes machen soll oder kann, kein Hinweis auf einen Shop, keine Hilfestellung für Besitzer von alten E-Book-Dateien, kein Hinweis darauf, wie Dateien zur Bibliothek hinzugefügt werden können.

Schritt 3

Nach einer kurzen Suche auf dem Interface finde ich heraus, dass sich unter dem kleinen Dreieck neben dem Wort »Bibliothek« ein Menü verbirgt, über das ich geschützte PDF-Dateien zur selbigen hinzufügen kann. Nach der Auswahl des E-Books im Datei öffnen-Dialog erscheint in Digital Editions eine Fehlermeldung:

Dieses Dokument kann auf diesem Computer nicht geöffnet werden. Laden Sie von der Website, von der es stammt, ein anderes Exemplar herunter.

Moment mal… Warum soll ich von der Website ein anderes Exemplar herunterladen? Ist nicht jede PDF-Datei gleich? Na gut, das muss wohl so sein.

Schritt 4

Ich erinnere mich, dass ich das Buch bei Peachpit gekauft habe und logge mich in den Kundenbereich ein. Dort finde ich auch das von mir gekaufte E-Book:

Ich sehe keine Möglichkeit, das E-Book erneut herunterzuladen, wie mir die Adobe-Software geheißen. Und sowohl der Link mit dem Buchtitel »Communicating Design« als auch der »Support«-Link führen auf die Produktseite.

Schritt 5

Auf der Produktseite habe ich die Möglichkeit, das Buch neu zu kaufen – und es gibt ein paar Hilfestellungen zum Thema DRM:

Before downloading this DRM-encrypted Adobe^TM Reader^TM file, be sure to:

• Install Adobe^TM Reader^TM 6.x, 7.x, or the free Adobe^TM Digital Editions software on your machine. Adobe Reader and Adobe Digital Editions software only works for Macintosh and Windows. The Linux and Unix versions of Adobe Reader do not have the plug-ins required to decyrpt the eBook. Mac OS X Leopard users, be sure to install the beta version of Digital Editions 1.5 on your machine.
• Activate the DRM through the Adobe Reader software or at Adobe’s DRM Activator site.
• Follow the procedures as specified by Adobe.
• Visit our eBook FAQ page for more information.

Digital Editions habe ich bereits installiert, also scheidet die erste Option aus. Vielleicht hilft mir der »Adobe DRM Activator« weiter? Weswegen kann das nicht das Digital-Editions-Programm für mich übernehmen?

Schritt 6

Ich folge also dem Link zum DRM-Activator, der folgende Website öffnet:

Melden Sie sich an mit Adobe-ID

Zum Anzeigen geschützter PDF-Dateien, z. B. digitale Ausgaben, müssen Sie zunächst Adobe^(R) Reader^(R) oder Acrobat^(R) aktivieren. Die Aktivierung ist ein einmaliger Vorgang, nach dem Sie digitale Ausgaben auf mehreren Computern oder mobilen Geräten anzeigen können.

Für die Aktivierung müssen Sie sich mit Ihrer Adobe-ID anmelden, die Sie beim Kauf im Adobe Store oder bei Inanspruchnahme von Adobe Online-Diensten erhalten haben.

Adobe-ID? Habe ich soetwas?

Schritt 7

Ich versuche es mal mit meiner Macromedia-ID die ich mir vor Jahren zugelegt habe, als Macromedia noch ein eigenständiges Unternehmen war. Man scheint sich an mich zu erinnern, sogar mein damals registrierter iMac taucht hier auf:

Schritt 8

Ich klicke auf »Aktivieren«, um mein MacBook Pro anzumelden. Der Gedankengang: Der DRM-Aktivator teilt Digital Editions mit, dass Stefan Freimark den Computer aktivieren möchte, auf dem Digital Editions installiert ist. Daraufhin würde Digital Editions prüfen ob die DRM-geschützte PDF-Datei von Stefan Freimark gekauft wurde, und sie mir dann anzeigen. Die folgende Seite erscheint:

Bitte warten. Die Aktivierung von Adobe Reader bzw. Acrobat auf Computer wird jetzt gestartet.

[...]

Wird die Aktivierung nicht innerhalb von zwei Minuten gestartet,Klicken Sie hier.

Schritt 9

Eine Datei SN15832233.edn landet in meinem Download-Ordner. Mit der Webseite passiert nichts weiter und auch Digital Editions kommt nicht in den Vordergrund. Die Dateiendung ist keinem Programm zugeordnet; man kann sie nicht doppelklicken. Ich versuche die Datei in Adobe Reader 9 zu öffnen und sehe die folgende Fehlermeldung:

»Adobe Reader konnte "SN15832233.edn" nicht öffnen, da der Dateityp nicht unterstützt wird oder die Datei beschädigt ist (z.B. wenn sie als E-Mail-Anhang geschickt und nicht korrekt dekodiert wurde).«

[OK]

Ich bin neugierig und öffne die edn-Datei mal in einem Texteditor. Ah, eine XML-Datei. Vielleicht kann Digital Editions ja damit etwas anfangen. Fehlanzeige: Das Dock-Icon von Digital Editions nimmt die Datei nicht an, ich kann sie nicht in das Programmfenster ziehen und auch im Datei-öffnen-Dialog lässt sich die Datei nicht auswählen.

Schritt 10

Der Datei-Download war erstmal eine Sackgasse. Ich wende mich wieder der Webseite zu, die noch in meinem Browser geöffnet ist:

Bitte warten. Die Aktivierung von Adobe Reader bzw. Acrobat auf Computer wird jetzt gestartet.

[...]

Wird die Aktivierung nicht innerhalb von zwei Minuten gestartet,Klicken Sie hier.

Ein Klick auf »Klicken Sie hier« lädt eine weitere edn-Datei auf den Rechner. Wieder eine Sackgasse.

Schritt 11

Ich erinnere mich daran, auf der Produktseite etwas von einer E-Book-FAQ gelesen zu haben und rufe sie auf:

How do I download an electronic product?
When you purchase an eBook or Short Cut from Peachpit.com, you will receive a link in your Order Confirmation e-mail to download the PDF, or access the non-DRM PDF via your Account page. Read our Non-DRM PDF FAQ.

If you got an .etd or .acsm file you may not have the required version of Adobe Reader, or your Adobe Reader application may require activation. To view DRM-encrypted eBooks and Short Cuts you’ll need:

• Adobe Reader 7.x or the free Adobe Digital Editions software.
• Adobe Reader DRM Activation (for eBooks). Usually Adobe Reader activates during the download process, but sometimes it helps to do it manually at Adobe’s Web site. Just go to https://aractivate.adobe.com/eden/EdenUI.asp.

If you encounter difficulties downloading or accessing your purchased electronic products please visit our download FAQ for tips on installing and using your digital product, or visit our eBook service provider’s eBook Help Center. If these resources cannot solve your problem, please contact customer service.

Als Software werden Adobe Reader 7.x oder Digital Editions empfohlen, sowie der Adobe DRM Activator – alle diese Punkte habe ich bereits erfüllt. Weitere Hilfestellungen der E-Book-FAQ: die Download-FAQ, das eBook Help Center und der Kundenservice.

Schritt 12

Ich folge dem Link zur Download-FAQ. Diese empfiehlt:

»Downloading your ebook is simple; click on the ‘download this ebook’ link from your smart receipt or email confirmation.«

Schritt 13

Ich suche in meinen archivierten Mails nach einer Mail des Peachpit-Verlags mit einem Download-Link, finde aber keine. Anhand des Kaufdatums das auf der Accountseite genannt war, kann ich die Suche eingrenzen und finde eine E-Mail von informit.com. Wie gut dass ich seit 2001 alle meine E-Mails aufhebe – jetzt weiß ich auch warum:

Schritt 14

Ein Klick auf den Link in der E-Mail lädt die Datei CommunicatingDesignDeveloping.acsm auf meinen Rechner.

Schritt 15

Mit einem Doppelklick führe ich die acsm-Datei aus. Digital Editions lädt ein Dokument herunter. Spannung…

Voila! Das E-Book erscheint in der Bibliothek und ich kann es auch öffnen. Wenn nur alles so einfach wäre!

+++

Zum Vergleich

Neulich habe ich alle meine Musik vom iMac auf das MacBook Pro kopiert, inklusive rund 400 gekaufter Titel, viele davon mit DRM (m4p-Dateien). Einfach den kompletten iTunes-Ordner rüberkopiert, iTunes gestartet, mit der Apple-ID innerhalb von iTunes angemeldet, lief…

Der Vollständigkeit wegen

Das eBook Help Center von ingram digital – offenbar der Zulieferer von Peachpit – weist auf mögliche Probleme mit Download-Links hin (z.B. Neuinstallation des Rechners) und empfiehlt als Ausweg, sich vom Händler einen neuen Download-Link geben zu lassen.

+++

Die E-Book-FAQ von Peachpit enthält auch einen Hinweis auf DRM-freie PDFs (siehe oben). Peachpit hat das scheinbar erst kürzlich eingeführt – zwei Bücher die dieses Frühjahr erschienen sind, sind jedenfalls nach wie vor nur DRM-geschützt erhältlich. Bleibt zu hoffen, dass Peachpit seine Katalogbestände mit der Zeit auf DRM-freie PDFs umstellt. Ich habe testweise ein solches E-Book gekauft: Das PDF hat tatsächlich keine Verschlüsselung und keine Einschränkungen, allerdings sind sie personalisiert: Auf jeder Seite steht unten der Name des Käufers.

+++

Scheinbar hat Adobe das Problem der Portierbarkeit mittlerweile adressiert: In einer FAQ zu Digital Editions heißt es:

Why do I need to authorize my computer with my Adobe ID?
Some digital publications that you purchase online or check out from a library may contain digital rights management (DRM) protection that restricts the items from being shared with others. In the past, this could limit the ability to read your items on additional computers owned by you. It could even prevent you from moving your items when you bought a new computer.

Digital Editions helps ensure that your eBooks and other digital publications are not "locked" on one computer – they are assigned to you through your Adobe ID.

Und weiter:

What is content portability?
Some users have eBooks and other digital publications on their computers that have been licensed with Acrobat, Reader, or earlier versions of Digital Editions using Easy Activation. These items cannot be moved to a new computer and are, for all intents and purposes, locked inside a particular computer. To solve this problem, Digital Editions allows you to convert items to a license associated with a named account. This allows digital content to be backed up, copied, and read on other computers.

Ich weiß nicht, ob das alte E-Book per »Easy Activation« geschützt war – entsprechende Hinweise habe ich in dem oben beschriebenen Ablauf nicht gesehen. Mir fehlt auch das Vertrauen, ein weiteres Digital-Editions-E-Book zu kaufen, zumindest nicht von Peachpit: Ich weiß nicht, ob deren Dienstleister nach wie vor die veraltete Methode verwendet…

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

In der Agenturbranche gibt es verschiedene Ansätze, Projekte in Kategorien einzuordnen. Um nur einige Beispiele zu nennen:

• nach Art der Ansprache: above the line, below the line
• nach Zielgruppe: Public Relations, Investor Relations, B2B, B2C
• nach Medium: Klassik, Dialog, Event, Online

Vor allem die Unterteilung in »Klassik« und »Online« hört man häufig, aber eigentlich sind das nur weitere Oberbegriffe. Online-Projekt A kann komplett unterschiedlich zu Online-Projekt B sein. »Online« lässt sich nach meiner Ansicht nochmals in 4 große Sparten aufteilen:

1. Kampagnen
2. Informationsangebote
3. Anwendungen
4. Geschäftsprozesse

Kampagnen

Hierunter fallen Newsletter und Banner, Suchmaschinenmarketing (SEM) wie Googles AdWords, aber auch aufwändige Microsites, mit denen konkrete Produkte und deren Vorteile auf kreative Weise beworben werden.

Es geht darum, das Publikum zu animieren: bestelle eine Broschüre, rufe den Berater an der Dich – als geschulter Verkäufer der er ist – zum Abschluss bringt, kaufe dieses Zubehör, klicke hier und informiere Dich dort (damit Du die Support-Hotline entlastest). Und bleib’ der Marke treu.

Der Konzepter entwickelt Ideen, um den Newsletter, den Banner oder die Microsite aus der Masse der anderen Angebote hervorstechen zu lassen. Außerdem muss die Ansprache und Inszenierung zielgruppengerecht sein. Hier fühlen sich Konzepter wohl, die gut querdenken können. Für Suchmaschinen-Marketing – das mit Suchmaschinen-Optimierung einher geht – legt der Konzepter Erfolgsfaktoren fest, testet verschiedene Keyword-Kombinationen und feilt an kurzen, knackigen Texten.

Informationsangebote

Intranets, Wikis, Nachrichtenseiten wie spiegel.de und die meisten Unternehmenspräsenzen sind hier zu Hause.

Der Nutzer soll schnell an die Informationen kommen die er braucht, möchte oder von denen er glaubt sie haben zu müssen: Über unser Unternehmen – wer wir sind und was wir tun. Aktuelles aus der Branche. Vergütungssätze gemäß dem Erneuerbare-Energien-Gesetz. Der Lebenslauf von Barack Obama. Die Telefonnummer von Herrn Schuhmann aus der Abteilung für Schadensregulierung, Buchstabe A bis F.

Konzepter wissen, auf welche verschiedenen Weisen Menschen nach Informationen suchen. Die Aufgabe besteht darin, ihnen dies so einfach – und angenehm – wie möglich zu machen. In der Konzeptionsphase spielen Navigationsstrukturen eine Rolle, vielleicht auch Thesauri für integrierte Suchmaschinen, oder mit welchen Mitteln der Nutzer eine Suchanfrage verfeinern kann (da verschwimmt dann die Grenze zur nächsten Sparte, den Anwendungen). In solchen Projekten arbeiten oft Konzepter, die analytisch sehr stark sind.

Anwendungen

Zu den Online-Anwendungen zählen Datenbanken wie die Internet Movie Database (IMDB), Social Networks wie Xing oder Twitter, Programme wie Google Text & Tabellen, sowie Applikationen innerhalb von Websites, beispielsweise eine Kreditberechung, Online-Banking, die Fahrplanauskunft der Bahn oder das Buchungssystem einer Fluglinie.

Zusammengefasst: Informationen die der Nutzer über eine selbst zusammengestellte Abfrage erhalten, manipulieren oder ändern kann, und Anwendungen mit denen neue Informationen in ein System eingespeist werden können.

Der Konzepter definiert typische Anwendungsfälle (Use Cases), die prinzipielle Funktionsweise (Flow) bzw. wie der Nutzer mit der Anwendung umgeht (Interaction Design), und wie der Nutzer die Anwendung wahrnimmt – also welche Elemente auf welchen Screens zu sehen sind (Interface Design). In späteren Konzeptphasen werden genauere Spezifikationen erstellt: Sie enthalten nicht-funktionale Anforderungen, alternative Abläufe, Fehlermöglichkeiten inklusive Fehlerhandling und Fehlermeldungen, oder auch eine Auflistung von Rollen und Rechten der Nutzer. Abstimmungen mit der Technik und weiteren Stakeholdern sind wichtig, beispielsweise bei der Implementierung eines CMS. Konzepter die – metaphorisch gesprochen – viele Bälle gleichzeitig in der Luft halten können und nicht den Überblick verlieren, sind in solchen Projekten richtig.

Geschäftsprozesse

Vor allem bei großen Websites stellt sich die Frage, wer wann was liefert. Datenversorgung ist wichtig: Welche Bildgrößen sind im bisherigen Bildanlieferungsprozess definiert, und kann für unseren Zweck eine neue Bildgröße definiert werden? Welche Abteilung arbeitet gerade an dem Thema, und bauen die vielleicht gerade ein neues System? Wenn sie ein neues System bauen, wurden dann unsere Anforderungen sowie die Bedürfnisse der Systeme A, B, C und die Bedürfnisse der Abteilungen X, Y und Z berücksichtigt? Funktioniert das auch für den bulgarischen Markt, wo sie noch mit System D arbeiten? Und wie viel könnte Bulgarien einsparen, wenn sie ihr System D aufgeben?

Das betrifft nicht nur große Content-Angebote, sondern auch komplexe Anwendungen: Beim Online-Banking ist es nicht mit dem Abschicken der Überweisung getan, und bei einer Online-Kreditberechnung wird der bonitätsabhängige Zinssatz für den Kunden aus vielen verschiedenen Faktoren berechnet.

Bevor viel Geld ausgegeben wird, sollten solche und andere Fragen beantwortet werden. Hier sind Business-Analysten und Unternehmensberater mit Online-Affinität heimisch. Diplomatisches Geschick ist noch mehr gefragt als in allen anderen Sparten.

+++

Natürlich gibt es auch Überschneidungen: E-Learning fällt sowohl in die Informationsangebote als auch die Anwendungen: Teilnehmer informieren sich über den Lehrstoff und lassen dann vom System ihr Wissen überprüfen. Ein anderes Beispiel sind Online-Shops: Mit Newsletter-Kampagnen werden Produkte beworben, über die sich Interessenten online informieren können. Und natürlich lässt der Shop seine Interessenten auch einkaufen – inklusive nachgelagertem Fulfillment.

»Online« ist inzwischen so weitläufig, dass der Begriff als Unterscheidungskriterium bei Projekten nicht mehr taugt – so wie »Klassik« mehr ist als nur Anzeigen für Magazine und Tageszeitungen.

Vielen Dank an meinen alten Mentor Günter Maierl.