Die Krux mit dem Design für mobile Geräte
Februar 26, 2014
Aus dem Unterricht des CAS Mobile Business berichtet Markus Peter:
Wissenschaftler sollen herausgefunden haben, dass ein Mensch, der mit seinem Handy in der Hand herumläuft, sich so verhält wie ein Artgenosse, der 1,4 Promille intus hat. Für Screendesigner ein Ansporn, um leichter bedienbare Screendesigns zu entwickeln.
Im Internet wimmelt es von Designexperten, und täglich kann man in Blogs die zehn besten Tipps für erfolgreiche Screendesigns nachlesen. Die Branche ist sich selbst uneinig, worauf man denn nun wirklich achten soll. Mobile ist nicht Mobile und das Nutzerverhalten ebenso unterschiedlich. Während Tabletgeräte oft daheim oder zumindest in sitzender Position genutzt werden, gibt es für Smartphones wohl keinen Ort und keine Stellung, in denen sie nicht durch die Nutzer betätigt werden. Entsprechend sind die Anforderungen an eine Anwendung vielfältig. Bevor man sich ans Designen einer Anwendung heranwagt, sollten unbedingt vorgängig einige Hausaufgaben gemacht werden. Unter anderem sind folgende Punkte zu klären:
Beschreibung des Nutzers
Hier empfiehlt es sich, eine möglichst genaue Beschreibung der Nutzer mittels detaillierter Personas zu erstellen. Auch Gedanken darüber, wie versiert der Nutzer im Umgang mit mobilen Geräten ist, können sich lohnen.
Wo und in welcher Situation befindet sich die Person, wenn sie die Anwendung benutzt
Es ist ein Unterschied, ob jemand daheim auf dem Sofa sitzt und eine Anwendung bedient, oder ob sich die Person in einer Notsituation befindet und möglichst schnell und in Aufregung den Notfallwagen bestellen muss.
Was erwarten wir von einem Nutzer, wenn er eine Anwendung bedient?
Soll die Person einfach auf einen Ja- oder Nein-Button klicken, oder erwarten wir, dass die Person bei einer Bestellung zwischen 500 verschiedenen Dübeln auswählen muss?
Welches sind die äusseren Umstände?
Wird die Anwendung in einem Raum oder draussen in der Kälte benutzt?
Art der Anwendung
Handelt es sich um einen mobilen Shop, über den Bestellungen erfolgen sollen, ist es eine Bankenanwendung, die hohe Sicherheitsstandards erfüllen muss, oder einfach eine App, mit der ich meinen Freunden eine mehr oder weniger belanglose Mitteilung zukommen lasse?
Was erwarten wir vom Nutzer unserer Anwendung
User-Stories sind zu einer «State of the Art»-Methode zur Formulierung von Anforderungen geworden. Aber: Wie schreibt man eigentlich eine User-Story? Erst einmal zur Beruhigung: User-Stories schreiben ist wie Fahrrad fahren. Am Anfang ist es ungewohnt und fühlt sich seltsam an. Nach ein paar Versuchen läuft es dann aber wie von alleine, und man verlernt es nie.
Formulierung aus Sicht des Nutzers
Ein wichtiger Grundsatz bei User-Stories ist, dass sie aus der Sicht eines Anwenders geschrieben werden. Daher werden sie auch frei von technischem Schnickschnack gehalten. Jeder, der am Projekt beteiligt ist, also auch jeder Anwender, sollte sie idealerweise verstehen können.
Bestandteile einer User-Story
Eine User-Story setzt sich mindestens aus den folgenden drei Elementen zusammen:
- Kurzen, prägnanten Namen
- Kurzen Beschreibung der Anforderung
- Akzeptanzkriterien, die die Details ausdrücken und dokumentieren
Tipp: Formulieren Sie die User-Stories wenn immer möglich mit «Ich als Nutzer will ………… und erwarte, dass die Anwendung Folgendes macht: …………».
…nach den User-Stories kommen die Mock-ups
In einem nächsten Schritt können die User-Stories durch Beschreibungen, Mock-ups, Wireframes, Scribbles, you name it, ergänzt werden. Das Wichtigste ist, dass diese das gemeinsame Verständnis zwischen Auftraggeber, Designer und Entwickler unterstützen. Sie sollten aber niemals die persönliche Kommunikation zwischen den Beteiligten ersetzen.
Quelle: www.ericlo.net/images/fc_wires.jpg
Von der Handzeichnung zum Design
Ist man sich einig, wie denn eine Anwendung funktionieren soll, wer sie benutzt und was für Ergebnisse wir erwarten, kann sich der Designer an das eigentliche Handwerk machen. Aber Vorsicht: Nicht jeder Grafiker, der schöne Broschüren und Flyer macht, eignet sich auch für die Gestaltung von Onlineanwendungen. Eine andere Denkweise ist hier gefragt, und es ist absolut nicht zielführend, wenn man nach der Designphase wunderschöne Papierentwürfe hat, der Entwickler diese aber nicht – oder nur mit grossem Aufwand – für eine Bildschirmanwendung umsetzen kann. Mit den Entwürfen sollten gleichzeitig auch die folgenden Grundprinzipien beachtet werden:
Einfache Sprache
Das System sollte die Sprache des Benutzers sprechen und Wörter bzw. Begriffe verwenden, die dem Nutzer vertraut sind.
Sichtbarkeit des Systemstatus
Das System sollte den Nutzer zeitnah und in angemessener Form darüber informieren, «was gerade passiert».
Benutzerkontrolle und -freiheit
Die Anwendung sollte immer einen einfachen «Notausgang» für den Benutzer bereithalten und Funktionen wie «Rückgängig» und «Wiederholen» unterstützen.
Konsistenz und Standards
Benutzer sollten sich nicht fragen müssen, ob abweichende Wörter bzw. unterschiedliche Situationen und Aktionen dasselbe meinen. Plattformkonventionen sollten beachtet werden.
Wiedererkennen statt sich erinnern
Anstatt auf das Gedächtnis des Nutzers lieber auf leicht auffindbare Informationen setzen.
Flexibilität und Effizienz
Das System sollte Abkürzungen für erfahrene Nutzer bereithalten, aber den unerfahrenen User damit nicht verwirren.
Ästhetisches und minimalistisches Design
Auf alle überflüssigen oder selten benötigten Informationen sollte verzichtet werden.
Fehler erkennen
Fehlermeldungen sollten einfach und verständlich sein und mögliche Probleme bzw. deren Behebung genau beschrieben werden.
Hilfe und Dokumentation
Entsprechende Informationen sollten leicht auffindbar, knapp, konkret sowie Schritt für Schritt nachvollziehbar sein.
Wiedererkennbarkeit
Die mobile Anwendung soll einen Widererkennungseffekt haben und die firmeneigene Corporate Identity bzw. das Corporate Design widerspiegeln.
Bei Mobile Design geht es nicht nur darum, eine Anwendung chic aussehen zu lassen, sie soll sich auch gut und richtig anfühlen.
«Mobilize, Don’t Miniaturize»
Design und Usability sind wesentliche Bestandteile bei der Entwicklung von mobilen Anwendungen. Oft sind sie ausschlaggebend für den Erfolg oder Misserfolg einer Anwendung. Bei «Mobile» handelt es sich um eine eigenständige Plattform und nicht um eine Verkleinerung des Internets. Gleichzeitig sollte immer berücksichtigt werden, dass Mobile nicht gleich Mobile ist.
Mobile Webnutzung ist kein Hype
Die mobilen Zugriffe und die Ansprüche der Nutzer steigen kontinuierlich. Deshalb sollten einige Grundsätze bedacht werden, bevor sich Unternehmen für eine Lösung entscheiden.
1. Im Gegensatz zur traditionellen Website unterscheidet man zwischen vier Arten der mobilen Anwendung: mobile Website, responsive Website, native und hybride App. Jede dieser Varianten hat ihre Vor- und Nachteile. Die Entscheidung sollte aufgrund der zu unterstützenden Nutzungsszenarien, der Unternehmensziele und weiteren Faktoren wie den Kosten für die Entwicklung und Pflege erfolgen.
2. Mobile bedeutet nicht nur, die Inhalte einer Website in ein kleineres Format zu bringen. Vielmehr geht es um eine Neukonzeption: Was ist der Kern des Angebots und was würden Nutzer mit der mobilen Applikation tun? Konzentrieren Sie sich auf das Wesentliche. Nur so erreichen Sie, dass User Ihre Inhalte finden und nutzen. Häufig zieht eine mobile Anwendung auch ein Redesign der Website nach sich – denn, dass weniger mehr ist, gilt universell.
3. Bei mobilen Anwendungen müssen die spezifischen Gerätemerkmale berücksichtigt werden: kleine Displays, erschwerte Tastatureingabe und zumeist die Bedienung per Finger oder Geste. Zum einen gibt es weniger Platz für Inhalte und Navigation, zum anderen müssen die Interaktionselemente grösser als beim Desktop sein.
4. Doch es sind nicht nur die mobilen Geräte, die sich vom PC beziehungsweise vom Laptop unterscheiden. Auch das Verhalten der Nutzer ist unterschiedlich. Vor dem PC ist der Nutzer auf den Bildschirm und die Aufgabe fokussiert, bei der mobilen Nutzung kann er sehr schnell durch die Umgebung abgelenkt werden.
5. Betrachten Sie die mobile Anwendung nicht separat, sondern sehen Sie diese als Teil eines Systems von Kontaktpunkten mit den Kunden. Dem Nutzer kommt das entgegen, denn er denkt schon lange nicht mehr in gerätespezifischen Kategorien. Er will über den für ihn relevanten Content jederzeit und überall verfügen.
Parlez-vous français?
Nebst der grafischen Gestaltung ist der Textinhalt beim Design nicht zu vernachlässigen. In unseren Breitengraden werden Texte in der Regel auf Deutsch geschrieben und dann in die Zielsprachen übersetzt. Der Einfachheit halber werden die zuerst vorliegenden deutschen Texte in das Basisdesign übernommen. Spätestens bei der französischen Version wird der Entwickler dann aber anrufen und fragen, ob er den Button auch dreizeilig machen könne. Er habe ganz einfach keinen Platz für den Text. Weshalb also nicht zuerst die Französischübersetzung anfertigen lassen und diese Texte ins Basisdesign einpflegen? Die Faustregel sagt: «Haben die französischen Texte Platz, dann reicht es in der Regel auch für Deutsch, Italienisch und Englisch».
Komplizierter wird es dann, wenn Sprachen benötigt werden, denen wir nicht mächtig sind, oder noch schlimmer, die eine andere Laufrichtung haben. So etwas muss bereits bei der Planung berücksichtigt werden, wird aber leider auch immer wieder vergessen. Mitunter wird es für Japanisch und Arabisch unumgänglich sein, das gesamte Design anzupassen. Dazu kommt die Problematik, dass das Lesen auf den kleinen Bildschirmen sehr ermüdend sein kann. Deshalb sollte dem Grundsatz «Reduce to the max» Rechnung getragen werden.
Testing, Testing, Testing
Sobald man sich für die Funktionsweise und das Design einer Anwendung entschieden hat, gilt es, entsprechende Testphasen zu bestimmen. Dabei geht es nicht nur um die funktionalen Tests, sondern auch ganz einfach darum, ob unbedarfte Nutzer der Zielgruppe damit umgehen können. Entsprechende Testiterationen sind einzuplanen. Diese werden aber leider immer wieder bei der Zeit- und Budgetplanung vergessen oder zu knapp angesetzt. Gleichzeitig werden entsprechende Geräte benötigt. Ein Mobiletesting am Bildschirm mag weniger anstrengend sein, ist aber in keinem Fall zielführend und vermittelt einen falschen Eindruck. Die benötigten Geräte liegen in all ihren Ausprägungen wie Grösse, Betriebssystem, Auflösung, Provider usw. oft nicht vor und müssen beschafft werden. Ein Umstand, der bei der Budgetierung nicht zu vernachlässigen ist und auch schon mal ins Geld gehen kann.
Quelle: http://cdn.sgstudios.com/wp-content/uploads/2013/11/IMG_95021.jpg
Lassen Sie Ihre Zielgruppe testen
Es ist verlorene Zeit, eine Anwendung, die sich an Senioren richtet, von 18-jährigen Bürolehrlingen testen zu lassen. Nicht zu vergessen ist das Situationstesting. Geben Sie eine Bestellapplikation für Monteure von Elektromasten auch dieser Zielgruppe auf der Baustelle zum Testen. Es ist nämlich ein Unterschied, ob eine Bestellung im warmen und geheizten Büro oder in 20 Metern Höhe, bei minus 10 Grad und mit klammen Fingern durchgeführt werden muss.
Mobile Website, responsive Design, Web-App und native App – vier Technologien für mobile Endgeräte
Die Zahl internetfähiger Endgeräte wird stetig grösser. Die dabei zur Verfügung stehenden Auflösungen werden in gleichem Masse vielfältiger. Die bedeutsamste Veränderung geht auf das Konto von Tablets und Smartphones. Während auf Tablet-PCs herkömmliche Webseiten (meistens) vernünftig dargestellt und bedient werden können, ist die Anzeige auf Smartphones nicht optimal und erfordert die Zoomfunktion. Problematisch ist hier die kleine Anzeigefläche. Es gibt mehrere Möglichkeiten, Inhalte an die mobilen Benutzer zu bringen. Alle haben Vor- und Nachteile.
Mobile Website
Eine mobile Website wird parallel zur «normalen» Desktopversion betrieben. Die mobile Website wird über den Browser aufgerufen und läuft meistens unter einer eigenen URL. Die zusätzliche Pflege einer mobilen Webseite verursacht einen erhöhten Aufwand, da die Inhalte von Mobilversion und Desktopversion in der Regel nicht deckungsgleich sind. Ein Vorteil einer mobilen Webseite ist, dass diese jederzeit parallel zur Desktopversion aufgebaut werden kann.
Responsive Webdesign
Responsive Websites werden mit dem Browser aufgerufen und passen sich an die jeweiligen Endgeräte an. Bilder werden entsprechend der Auflösung des Endgeräts skaliert, Bedienelemente vergrössert oder verkleinert, ein auf Desktopmonitoren dreispaltiges Layout erscheint auf dem Smartphone z. B. zweispaltig im Querformat und einspaltig, wenn das Gerät hochkant gehalten wird – das leidige Zoomen für eine vernünftige Schriftgrösse entfällt. Je nach Auflösung können Elemente entfernt oder anders angeordnet werden. Da alle Endgeräte, ob mobil oder stationär, den gleichen HTML-Code ausgeliefert bekommen, entsteht kein wesentlich erhöhter Pflegeaufwand.
Quelle: http://magazin.unic.com/wp-content/uploads/2012/11/Responsive_Swisscom.png
Web-Applikation
Eine Web-Applikation wird über den Browser aufgerufen und ist prinzipiell eine Website, die ausschaut und sich bedienen lässt wie eine native App. Dieser Ansatz wird gewählt, wenn Programmfunktionen im Vordergrund stehen. Der Zugriff auf Gerätefunktionen wie Lagesensor oder Kamera sind nur eingeschränkt möglich. Web-Apps sind nicht über die App-Stores zu beziehen, ihre Existenz muss auf andere Weise publik gemacht werden. Änderungen an den Web-App sind vergleichsweise einfach zu bewerkstelligen.
Native Applikation
Native Apps sind kleine Programme, die auf den Endgeräten installiert werden. Native Apps können auf Hardwarefunktionen des Endgeräts zugreifen. Beispielsweise können Daten des GPS-Moduls oder des Lagesensors verwendet werden. Dies ermöglicht eine Reihe von Anwendungen, die mit keinem der anderen Ansätze realisiert werden können. Die Entwicklung von nativen Apps findet für jedes Betriebssystem gesondert statt. Wer iPhone, Android und Win8 abdecken möchte, muss also drei verschiedene Apps bereitstellen. Dementsprechend aufwändig ist auch die Durchführung von Updates. Native Apps stehen in den App-Stores zum Download bereit.
Lassen Sie den Chef aus dem Spiel
Selbstverständlich können Sie mit Ihrem Chef darüber diskutieren, welche technische Umsetzung der Anwendung gewählt werden soll. In der Regel ist dies aber wenig sinnvoll, weil Ihre Vorgesetzten zu wenige Kenntnisse haben und sich vor technischen Entscheidungen fürchten. Besser und zielführender ist es, zwei Alternativen auszuarbeiten und die Pro und Contras aufzuzeigen.
Beim Design hingegen sind nicht nur die Kolleginnen und Kollegen Experten, da wissen auch die Chefs mitzureden. Ungeachtet, ob deren Ideen überhaupt umsetzbar sind, oder den Vorgaben zur firmeneigenen Corporate Identity bzw. zum Corporate Design und den Vorschriften von Apple und Co. entsprechen. Bei Designumfragen ist deshalb Vorsicht geboten. Meistens sind diese wenig hilfreich, verwirrend und führen zu grossen Enttäuschungen, wenn dann der eigene Vorschlag nicht 1:1 umgesetzt wird. Auch hier ist es besser, zwei Varianten vorzuschlagen und bei der Diskussion darauf hinzuweisen, dass zwischen A oder B ausgewählt werden kann, weil ein «Wunschkonzert» nicht möglich ist.
Fazit
Mobiles Design in all seinen Facetten und mit all seinen Disziplinen besteht nicht nur aus der grafischen Gestaltung der Bildschirmanzeige. Auftraggeber sind hier gefordert und sehr oft auch überfordert. Der Zugriffsanteil mobiler Endgeräte wird weiter steigen, weshalb das Angebot einer Mobilvariante ein entscheidender Wettbewerbsvorteil sein kann. Grund genug, sich jetzt mit der Thematik auseinanderzusetzen.