Michal Gralak/Thorsten Stark Gralak/Stark - leseprobe.buch.de · schnelleinstieg 160 seiten...

SCHNELLEINSTIEG

160 SEITENPLATTFORMÜBERGREIFENDES DESIGN: ANDROID, APPLE IOS

UND WINDOWS PHONE

Michal Gralak/Thorsten Stark

APP USABILITY

35 CHECK-LISTENFÜR DIEPRAXIS


19,95 EUR [D] / 20,60 EUR [A]ISBN 978-3-645-60259-4

Kleinere Bildschirme, andere Auflösungen, neue Bedienkonzepte: Smartphones und Tablets sind anders als Desktoprechner. Längst haben sich diese Geräte als Standard durchgesetzt. Inzwi-schen buhlen Millionen von Apps um die Aufmerksamkeit der Benutzer. Um diese zu erlangen,sind pfiffige Apps mit guter Bedienung erforderlich. Was muss man beachten, um eine Oberflächemit Spaß bei der Bedienung zu entwerfen?

Was macht ein mobiles Gerät aus?Smartphones und Tablets unterscheiden sich vonDesktoprechnern, nicht nur, was die Dimensionen betrifft. Allein das Touch bietet komplett neue Möglich-keiten. Die verfügbare Hardware muss eingebundenwerden: Bluetooth, NFC oder auch Beschleunigungs-sensor. Statt simpler Mausklicks gibt es Gesten. In zwei Kapiteln lernen Sie, was ein mobiles Gerätwirklich ausmacht.

Native App oder plattformübergreifend?Alle Betriebssysteme müssen Sie nicht zwingend bedienen, drei davon schon: Android, Apple iOS undWindows Phone. Was sind die Eigenheiten der Betriebs-systeme in Bezug auf die Oberfläche? Detailliert lernenSie, worauf es bei diesen drei Plattformen ankommt.Ob es immer eine native App sein muss oder ob esnicht auch eine App für alle Plattformen sein kann,lesen Sie in einem extra Kapitel.

Zu guter Letzt widmet sich ein Kapitel dem Usability-Test.

Aus dem Inhalt:• Eingabemöglichkeiten bei Smartphones

• Größe und Auflösung des Bildschirms

• Bluetooth, NFC, Beschleunigungs-sensor und Akku

• Natürliche Benutzeroberflächemit dem OSIT-Modell entwerfen

• Gestaltungsrichtlinien für alle Plattformen

• Benutzeroberfläche von Android,Apple iOS und Windows Phone

•Web-Apps, PhoneGap, Cordova,Titanium Mobile und Xamarin

• Native Apps im Vergleich zuHTML5-Apps

• Layout und Design

Besuchen Sie unsere Website www.franzis.de

Oberflächeneffekte visuell erklärt

SCH

NEL

LEIN

STIE

GAPP USA

BILITY

Gralak/Stark

SCHNELLEINSTIEG

APP USABILITY

Konzepte direkt an Praxisbeispielen erklärt

60259-4 U1+U4 2 03.03.15 09:12 Seite 1

Michal Gralak/Thorsten StarkSchnelleinstieg App Usability

60259-4 Titelei 20.02.15 11:20 Seite 1

Michal Gralak entwickelt bereits seit seinem Medieninformatik-Studium an der Beuth Hochschule Berlin Apps für iOS-Systeme. Nachdem er in Berührung mit Hardware-Accessories für iPhones kam, flammte seine Begeisterung für Bluetooth-gestützte Apps auf. Als Software Engineer beiBURY Technologies entwickelte er einzigartige Apps für die hauseigeneFreisprecheinrichtung sowie innovative Apps für die VW-Tochter Bentley.Mittlerweile entwickelt er als Produktmanager bei BURY Technologies neueProdukte für den Automotive- und Aftermarketsektor und nutzt dafür seinlangjähriges Wissen um die Einbindung von mobilen Endgeräten in denBusiness- und Lifestyle-Bereich.

Thorsten Stark hat an der Beuth Hochschule für Technik in Berlin (damalsnoch TFH Berlin) seinen Abschluss als Diplominformatiker sowie den Masterof Science im Studiengang Medieninformatik gemacht. Derzeit arbeitet eran seiner Promotion, in der er sich mit der Usability von Tablets beschäftigt.

In fünf Jahren in Forschungsprojekten hat er viel praktische und theoretischeErfahrung in der Gestaltung von Nutzerschnittstellen gesammelt. Dabei lagdas Hauptaugenmerk immer im mobilen Bereich, aber auch andere Multi-Touch-Geräte kamen nicht zu kurz. Als iOS-Entwickler der ersten Stundekann er auf eine langjährige Erfahrung im mobilen Bereich zurückblickenund hat auch die Entwicklung vom ersten iPhone bis heute mitverfolgt.

60259-4 Titelei 20.02.15 11:20 Seite 2

Bibliografische Information der Deutschen Bibliothek

Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;

detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.

Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und

unter Einschaltung wirksamer Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschlie-

ßen. Der Verlag und der Autor sehen sich deshalb gezwungen, darauf hinzuweisen, dass sie weder eine Garantie

noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückge-

hen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internet-

adressen oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag

und Autor übernehmen keinerlei Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen

zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum Download angebotene Dateien und Informa-

tionen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur mit Zustim-

mung des Lizenzinhabers möglich.

© 2015 Franzis Verlag GmbH, 85540 Haar bei München

Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen

Medien. Das Erstellen und Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als

PDF, ist nur mit ausdrücklicher Genehmigung des Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt.

Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem

Werk genannt werden, sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet

werden. Der Verlag folgt bei den Produktbezeichnungen im Wesentlichen den Schreibweisen der Hersteller.

Programmleitung: Dr. Markus StäubleLektorat: Christian Immler

Satz: DTP-Satz A. Kugge, Münchenart & design: www.ideehoch2.deDruck: CPI-Books Printed in Germany

ISBN 978-3-645-60259-4

60259-4 Titelei 20.02.15 11:20 Seite 4

Viele Personen haben rund um das Buch an der Entstehung mitgewirkt und durch viel Einsatz sowie Feedback zum Endergebnis beigetragen. Diesen Personen würden wir gerne namentlich noch einmal Danke sagen.

� Michal Gralak dankt:

Onur Güngören, meinem Co-Founder und erkek kardeş. Danke für die Unter-stützung und deine unendliche Geduld in der gesamten Zeit.

Frau Prof. Ilse Schmiedecke, die mich während meines Studiums für Usability sensibilisiert hat und deren Vorlesungen sehr hilfreich für die Entstehung dieses Buches waren.

Markus Stäuble, der mich geduldig immer wieder angetrieben und im Schreiben bestärkt hat.

Jennifer Möller, die gerade in der Endphase des Buches sehr viel Geduld und Verständnis aufweisen musste.

Katharina Thies für ihre Geduld, die guten Tipps, Hinweise zum psychologischen Teil des Buches und vieles mehr.

Thorsten Stark, der sich bereit, erklärt hat, dieses Projekt mit mir gemeinsam zu stemmen – durch dich habe ich viel gelernt!

Meiner Mutter für ihre langjährige und hilfreiche Unterstützung, ihre Geduld und überhaupt für alles!

� Thorsten Stark dankt:

Herrn Prof. Dr. Manfred Thüring, meinem Doktorvater, für den tiefen Einblick in das Thema und die Unterstützung.

Frau Prof. Dr. Gudrun Görlitz dafür, dass sie mir die Möglichkeit gegeben hat, mich intensiver mit dem Thema zu beschäftigen, und die Unterstützung bei der Promotion.

Danksagung

6 Danksagung

Michal Gralak dafür, dass er mir überhaupt erst die Gelegenheit gegeben hat, an diesem Buch mitzuarbeiten – ich denke, wir haben beide viel voneinander gelernt, auch wenn (oder gerade weil) wir nicht immer derselben Meinung waren.

Janine Riethbaum für die liebe Unterstützung und Geduld in all der Zeit. Ich liebe dich.

Meinen Kollegen (Alex, Damian, Dominik, Hannes, Jessica und Mark), denen ich regelmäßig mit dem Thema Usability bei ihren Projekten auf die Nerven gehe.

Und natürlich meinen Eltern, die mich mein ganzes Leben begleitet und immerzu unterstützt haben und für mich da waren.

nhaltsverzeichnis

1 App-Usability – ein Einstieg..................................................................... 9 1.1 Was ist Usability, und um was geht es hier eigentlich? .................. 9 1.2 Die ersten Touch-Apps................................................................. 13 1.3 Informationen aufbereiten ........................................................... 14 1.4 Eingabemöglichkeiten nutzen – nicht portieren........................... 16 1.5 Der Benutzer soll nicht zu viel denken ......................................... 19 1.6 Wer nutzt die App?....................................................................... 22

2 Hardwarevoraussetzungen .................................................................... 23 2.1 Bildschirmgrößen und -auflösungen............................................ 23 2.2 Multithreading ............................................................................ 30 2.3 Netzwerk/Mobilfunk.................................................................... 31 2.4 Bluetooth .................................................................................... 32 2.5 NFC.............................................................................................. 33 2.6 Beschleunigungssensor .............................................................. 33 2.7 Akku............................................................................................ 34 2.8 Persönlich und emotional ............................................................ 35 2.9 Eingabe/Bedienung..................................................................... 35 2.10 Gesten statt Klicks....................................................................... 36

3 Design von mobilen Benutzeroberflächen .............................................. 39 3.1 Designgrundlagen ....................................................................... 40 3.2 Gestaltungsrichtlinien für alle Plattformen .................................. 48 3.3 Die Benutzeroberfläche von iOS .................................................. 53 3.4 Die Benutzeroberfläche von Android............................................ 77 3.5 Windows Phone 8 ...................................................................... 106

4 Plattformübergreifendes Design .......................................................... 119 4.1 Crossplattform-Entwicklung....................................................... 119 4.2 Die sechs Ws oder: Kontext – Benutzer – Aufgabe ..................... 129

I

8 Inhaltsverzeichnis

4.3 Nativ vs. HTML5 vs. Crossplattform............................................ 131 4.4 Layout und Design ..................................................................... 147

5 Usability-Tests..................................................................................... 151 5.1 Fragebogen ............................................................................... 151 5.2 Analytische Methoden............................................................... 152 5.3 Empirische Methoden................................................................ 153 5.4 Übersicht der Testverfahren ...................................................... 155

Stichwortverzeichnis ........................................................................... 157

App-Usability – ein Einstieg

Checkliste – Die wichtigsten Aufgaben zur App-Usability

� Achten Sie auf Ihren Anwender.

� Verstehen Sie seine Bedürfnisse.

� Unterstützen Sie seine Ziele.

1.1 Was ist Usability, und um was geht es hier eigentlich?

Den Begriff Usability haben Sie bestimmt schon einmal gehört, selbst verwendet oder gar mit erforscht.

Mit jeder neuen Version von Android, iOS oder Windows Phone erscheinen neue Apps mit einem Funktionsumfang und Lösungsansätzen, an die vorher niemand gedacht hätte. Entwickler kommen auf neue Ideen für innovative Eingabearten. Viele solcher Bedienmuster sind dann auch tatsächlich in die großen Updates der mobilen Betriebssysteme aufgenommen worden. Als Beispiel denke man an den Mailclient Mailbox mit seinen Swipe-Gesten zum Archivieren. Die Darstellung ist im bordeigenen Mailclient von iOS sehr ähnlich übernommen worden.

Wenn Sie aufzählen wollten, wie viele Apps Sie benutzt haben, seitdem Sie ein Smartphone nutzen, könnten Sie eine Zahl nennen? Oder sind es eher die App-Namen, die Ihnen in Erinnerung geblieben sind? Da war doch diese eine App, die keine Buttons hatte und bei der alles über Swipes gesteuert wurde. War farblich sehr ansprechend gestaltet, konnte man auch mit Themes anpassen. Wenn ich mich an den Namen erinnern könnte! Ich weiß nur noch, dass sie für schnelle Notizen gedacht war, um wichtige Dinge nicht zu vergessen …

So gesehen, machte die App alles richtig. Sie haben die App genutzt und Ihre ge-planten Vorhaben nicht vergessen – außer vielleicht den Namen der App. Gut, der war recht simpel, Sie kommen bestimmt darauf. Manchmal denkt man, man habe die beste Lösung bereits gefunden, und auch die Testpersonen bestätigen die einfache und selbsterklärende Bedienung der App – bis die ersten Bewertungen im

10 1 App-Usability – ein Einstieg

App Store eintreffen. Aber irgendwann wird es die Situation geben: Sie haben wochenlang Arbeit in das (Re-)Design einer App gesteckt, und keiner sagt etwas oder bemerkt, dass sich vieles verändert hat. Dann haben Sie es geschafft – die App wird benutzt, ohne dass der Benutzer nur darauf achtet, wie er sie nutzen soll.

Um was geht es? Kurz: Es geht darum, ein konkretes Ziel mit wenig Aufwand oder Belastung erfolg-reich zu erreichen. Die Definition von Belastung bei der Benutzung von Software ist aber oft schwammig formuliert.

Checkliste – »Belastungen« beim Bedienen von Apps

� Kognitiv – benötigter Lernaufwand, um alles zu verstehen.

� Motorisch – Durchführen der benötigten Gesten und Klicks.

� Psychisch – Wirkung auf den Benutzer im Allgemeinen über Daten-sicherheit bis hin zu den verwendeten Farben und ihrer Wirkung.

Usability und Werkzeuge Nutzerfreundlich, gebrauchstauglich, Benutzer, Ziel, effektiv – behalten Sie diese Begriffe im Hinterkopf. Es dreht sich alles zunächst um den Benutzer.

Um es in den Worten von Prof. Simon Nestler zusammenzufassen: »Die zentralen Erkenntnisse der Usability-Forschung sind auf jede Software anwendbar, insbesondere auch für Webanwendungen: Erstens: Achten Sie auf Ihren Anwender. Zweitens: Ver-stehen Sie seine Bedürfnisse. Drittens: Unterstützen Sie seine Ziele.«

Diese Aussage schließt nicht aus, dass Usability immer selbsterklärend sein soll. Sie unterstreicht sogar das Gegenteil, wenn der Bedarf danach besteht. Versuchen Sie in diesem Kontext, die Software oder App ganz schlicht als Werkzeug zu sehen.

Software als Werkzeug Werkzeuge nutzen der Mensch und seine Vorfahren schon seit Jahrtau-senden, und einiges hat sich im Laufe der Zeit so perfekt entwickelt, dass kaum mehr große Veränderungen nötig sind, etwa beim Hammer.

1.1 Was ist Usability, und um was geht es hier eigentlich? 11

Der Hammer ist ein Werkzeug, das sich aus einem einfachen Stein entwickelt hat. Anfangs noch unförmige, klobige Steine, wurden nach und nach rundliche Bachsteine eingesetzt – runde Handschmeichler, die weniger Verletzungen hervorriefen und beim Einsatz nicht so sehr ermüdeten. Allerdings hielten diese Bachsteine aufgrund ihrer Struktur nie lange und zerbrachen. Nach und nach hat sich aus unförmigen und dann rundlichen Steinen der altbekannte Hammer entwickelt, im Prinzip nichts weiter als ein Stein mit einem Stab, um die Beschleunigung besser auszunutzen und das Verletzungsrisiko zu minimieren. Mit Ausnahme von kleinen Anpassungen ist der Hammer perfekt, wie er ist. Denn: Er ist schlicht, erfüllt seinen Zweck, und vor allem weiß man sofort, wie man ihn benutzen muss.

Grenzen wir zunächst den Begriff Benutzer, sofern nicht ausdrücklich anders genannt, als technisch unbedarften Nutzer mit mittelmäßigen Kenntnissen ab. Zudem verwenden wir ihn als Sammelbegriff für weibliche und männliche Nutzer.

Wie geht das denn jetzt? Sobald sich der Benutzer diese Frage stellt, haben wir schon das erste Problem. Er kann das Programm nicht so verwenden, wie er sich das vorgestellt hat. Demnach wird er es entweder verlassen oder sich externe Hilfe zur Bedienung suchen. Im schlimmsten Fall beendet er das Programm und fasst es nie wieder an.

Usability hat in erster Linie nichts mit einem schönen Design zu tun. Dieser Schritt kommt zum Schluss der Entwicklung. Jedoch tragen ein abgestimmtes und ver-ständliches Layout und ein durchdachtes Design enorm zu einer guten Usability bei.

Der Benutzer will nur eins: dass das Programm sein Problem löst. Dass dieser Schritt nicht unnötig verzögert werden soll, versteht sich von selbst. Ebenso, dass Frustrationen vermieden werden sollen.

Menschen beobachten Sollten Sie einmal an einem belebten Bahnhof (U- oder S-Bahnhof geht auch) eine halbe Stunde Zeit totschlagen müssen, stellen Sie sich einfach in die Nähe eines Fahrkartenautomaten und beobachten unauffällig die Nutzer. Teilen Sie sie vorher in drei Gruppen ein: junge, technisch versierte Nutzer (Digital Natives), mittelalte, technisch bewanderte Nutzer sowie Senioren.


Achten Sie möglichst darauf, nicht entdeckt zu werden, da der Benutzer direkt in (Support-)Kommunikation treten wird. Solche Beobachtungen vermitteln einen guten Einstieg in die Usability von Touchscreens.

Wozu braucht man Usability? Die Digital Natives, also Benutzer, die mit Internet, Smartphone, Notebooks etc. aufgewachsen sind, haben in der Regel keine Angst im Umgang mit neuer Software.

Sie probieren auch gern aus, was funktionieren könnte, ohne sich Gedanken darü-ber zu machen, ob sie etwas löschen oder kaputt machen könnten. Diese Benutzer sind vertraut mit bekannten Mustern und setzen sie immer wieder ein.

Genau das ist der Knackpunkt: Immer wieder verwendete Muster oder Icons, die beliebig eingesetzt werden und nicht immer die gleiche Funktion beherbergen, können dazu führen, dass der Nutzer umdenken muss. Diese Muster sind schon so in Fleisch und Blut übergegangen, dass ein Umdenken in Stress ausarten kann.

Als Beispiel nehmen wir den Blinker im Auto. Möchte man nach rechts abbiegen, drückt man den Blinker nach oben, will man nach links, drückt man ihn nach unten. Das ist eine auch logisch nachvollziehbare Bedienart. Jetzt stellen Sie sich eine Autofahrt vor, bei der Sie zum Rechtsblinken den Hebel zu sich ziehen und zum Linksblinken den Hebel drücken müssten.

Das Beispiel ist weit hergeholt, aber das war gewollt. Beim Thema Autofahren wür-den nur die wenigsten mit Schulterzucken und einer Aussage wie »Na und? Man gewöhnt sich an alles.« antworten.

Ein näherliegendes Beispiel ist ein mit X beschrifteter Button. Wirklich festgelegt ist die Funktion dahinter nicht. So kann der Button für Abbruch oder auch für Löschen stehen, je nach Kontext. Nicht immer ist der Kontext sofort erkennbar, und man klickt schnell. Oder denken Sie an das Papierkorbsymbol. Hier denkt der eine sofort an Löschen, der andere denkt daran, den Inhalt des Papierkorbs, sprich alle gelöschten Dateien, die noch auf die endgültige Löschung warten, zu sichten.

Diese Beispiele zeigen, wo Digital Natives an Grenzen stoßen können und warum diese Gruppe mindestens genauso wichtig für durchdachte Apps ist wie die Digital Immigrants.

Letztere, also die »Zugezogenen« in die digitale Welt, Benutzer, die vergleichsweise spät in den Genuss von Internet, Smartphone und Social Media kamen, sind die zweite wichtige Gruppe. Ein Digital Immigrant definiert sich nicht durch das

1.2 Die ersten Touch-Apps 13

(hohe) Alter. Machen Sie nicht den Fehler, diese Gruppe als Benutzer >50 Jahre einzuordnen. Digital Immigrants können aus einer Überzeugung, wie der Verzicht auf Elektronik, oder durch kulturelle wie soziale Unterschiede erwachsen.

Je mehr sich Bedienmuster, Icons oder auch Farben verschiedener Anwendungen voneinander in der Funktion unterscheiden, desto schwieriger fällt der Einstieg.

Checkliste – Wofür braucht man Usability?

� Für den Benutzer: höhere Akzeptanz der App, weniger Wechsel zur Konkurrenz.

� Für den Entwickler: Minimierung von Supportanfragen.

Der Prozess von Usability-Optimierung und -Entwicklung entscheidet sehr oft über Erfolg oder Misserfolg eines Produkts. PCs wurden erst ein kommerzieller Erfolg, nachdem sie nutzbarer (und bezahlbarer) für den Privatanwender wurden. Gerade der Consumer-Bereich profitiert enorm von einfach zu bedienender Soft-ware.

Je mehr Nutzer man durch ein durchdacht gestaltetes und benutzbares Produkt direkt zu Beginn gewinnen kann, umso mehr bleiben einem erhalten. Der Auf-wand, der anfangs sehr hoch erscheint, erweist sich spätestens bei der Produktver-öffentlichung als elementar und kostensparend bei der Wartung.

Auch das Image des Unternehmens oder der Entwickler wird durch die Usability der App gefestigt und gestärkt. Selbiges gilt für eine Marke, die die App repräsentie-ren oder etablieren soll.

Vergessen Sie nie, dass die App von Menschen und nicht von Maschinen benutzt wird. Sie muss nicht einfach nur funktionieren. Im Rahmen einer gut benutzbaren App sollte ein steriles, aber ansprechendes Design entworfen werden, das sich außerdem hervorragend bedienen lässt.

1.2 Die ersten Touch-Apps

Seit mehreren Dekaden beschäftigen sich viele (auch namhafte) Designer und Ent-wickler damit, Software so ergonomisch wie möglich zu gestalten. Insbesondere die großen Hersteller der mobilen Betriebssysteme iOS, Android und Windows Phone stecken enorm viel Geld in Forschung und Entwicklung auf diesem Sektor.


Die ersten Touch-Apps waren nicht so unbeholfen, wie man zunächst denken mag. So hatten die Microsoft-Surface-Tische – heute als PixelSense bezeichnet – viele Funktionen, die äußerst sinnvoll waren, beispielsweise die Sortierfunktion für digitale Fotos über Multitouch-Gesten.

Bild 1.1: Microsoft-Surface-Multitouch-Tisch. (Quelle: Microsoft Surface Press Kit aus dem Jahr 2007)

1.3 Informationen aufbereiten

Die Bereitstellung von Informationen ist das Ziel einer jeden App. Um eine Information auf einem kleinen Bildschirm vernünftig darzustellen, sind Kürzungen auf das Nötigste die beste und eigentlich auch einzige Wahl. Hierbei ist die goldene Dreierregel eine gute Möglichkeit, sich zu orientieren.

Design von mobilen Benutzeroberflächen

Bevor wir uns die speziellen Designvorgaben und Steuerelemente der Smartphone-Plattformen ansehen, zunächst ein paar Gemeinsamkeiten, die heute als Standard für die Benutzerfreundlichkeit einer App gelten.

Checkliste – Grundlegende Bedienung einer App

� Alle Apps erscheinen im Vollbildmodus, es gibt keine Fenster.

� Alle Buttons wirken sofort, es ist keine Bestätigung und kein Doppelklick erforderlich.

� Bildschirminhalte sind üblicherweise nicht breiter als der Bildschirm. Man scrollt vertikal durch die Seite. Bei Bedarf kann horizontal zwi-schen Seiten geblättert werden.

� Schnelles Scrollen verursacht einen automatischen Nachlauf des Bild-schirms, sodass man durch »Anschubsen« schnell durch sehr lange Texte und Listen (z. B. Adressbuch) navigieren kann.

� Über Multitouch-Gesten mit zwei Fingern lassen sich Inhalte zoomen. Doppeltes Antippen zoomt auf die normale, an den Bildschirm ange-passte Darstellungsgröße zurück.

� Kontextmenüs, ähnlich dem Rechtsklick auf dem PC, lassen sich über längeres Antippen realisieren.

� Eine Taste oder ein einheitliches Bildschirmsymbol bringt den Benut-zer in einer App einen Schritt zurück.

� Eine weitere Taste, bei Android das Haus, bei Windows Phone die Windows-Taste und bei iOS die einzige Taste überhaupt, bringt den Benutzer auf den Startbildschirm zurück. Apps brauchen nicht explizit beendet zu werden.

3

40 3 Design von mobilen Benutzeroberflächen

3.1 Designgrundlagen

Durch den immer stärker werdenden Trend des Flat Design sinkt auch der Auf-wand, eine App zu gestalten und viele unterschiedliche Grafiken zu erstellen. Eine Portierung auf ein anderes System gestaltet sich durch den intelligenten Ansatz, Inhalte an erster Stelle zu sehen, immer einfacher.

Ein Beispiel bei iOS 7 ist der Blurry Background. Dieser verschwommen graue, halb transparente Hintergrund sieht nur auf den ersten Blick modern aus. Die verwen-dete Schrift ist mit ihrer dünnen Strichstärke und den hellen Farbe oft schlecht lesbar, wenn der verschwommen dargestellte Hintergrund eine hellgraue Färbung annimmt. Mittlerweile hat die Strichstärke mit jedem weiteren Systemupdate zugenommen, und die Lesbarkeit wurde verbessert. Auch der Blurry Background selbst wurde zunehmend dunkler und hebt die weiße Schrift mehr hervor. Durch den schon inflationären Einsatz dieses Stils, der fast als systemspezifisch bezeichnet werden kann, hat Apple eine Art Vorreiterstellung eingenommen und spricht indi-rekt eine Empfehlung an andere Entwickler aus, wie sie ihre Apps gestalten sollten.

Im Gegenzug verwendet Google einen grauen Hintergrund, der die ungenutzte Fläche füllt und somit für eine ruhige Szenerie sorgt. Das Google-typische Karten-design schafft weitere Übersicht. Zudem bringt es eine Unterstützung in der Inter-aktion, indem es alle klickbaren Flächen als Vierecke darstellt.

3.1 Designgrundlagen 41

Bild 3.1: Blurry Background- und Google Now-Beispiel.

Checkliste – Faktoren, die das Nutzererlebnis beeinflussen

� Optik.

� Interaktion.

� Reaktion.

Optik: Der Benutzer sieht ein Icon, ein Bildschirmformular oder einen Button. Der Reiz zur Interaktion entsteht nicht durch knallige Farben oder ausgefallene Textu-ren. Vielmehr wird der Nutzer animiert, Buttons, die er als solche erkennt, anzukli-cken und scrollbare Textfelder ebenfalls zu identifizieren und zu bedienen.

Interaktion: Der Benutzer »nutzt« den Button in einer bestimmten Erwartungs-haltung.

Reaktion: Die Reaktion ergibt sich unmittelbar aus der Interaktion mit einem Ele-ment. Sie bedeutet zum Beispiel, dass ein Button bei einem kurzen Klick (<0,25 Sekunden) anders reagiert als bei einem langen Klick (≥1 Sekunde). Reaktion wird aber auch über die Animationsgeschwindigkeit von Bedienelementen wahrge-nommen.


Nutzerszenarien Nutzerszenarien sind eine detaillierte Beschreibung von Einsatzumgebungen und -bedingungen. Hierbei sind weniger Personen im Fokus als vielmehr Einsatzort und -zweck. Aus diesen Informationen lassen sich (mögliche) Zielgruppen herleiten.

Checkliste – Nutzerszenarien

� Außeneinsatz/Inneneinsatz?

� Dauerhafte Stromversorgung vorhanden?

� Dunkle/helle Umgebung?

� Potenziell störende, direkte Lichtquellen?

� Wiederkehrende/wechselnde Nutzergruppe?

� Social-Media-Einbindung sinnvoll/notwendig?

� Serveranbindung sinnvoll/notwendig?

� Betriebssystemplattform (Android/iOS/Windows Phone)?

Lichtbedingungen Licht und Lichtbedingungen spielen eine große Rolle. Touchscreens sind mit einer glatten und spiegelnden Glasoberfläche versehen. Diese Eigenschaft, die gesamte Umgebung und alle Lichtquellen zu spiegeln, kann zu Problemen in der Darstel-lung, zu umständlicher Benutzung und zu Belastungen führen.

Dabei ist es von großer Bedeutung, ob die App innen, z. B. zu Hause, unterwegs unter freiem Himmel oder in stark ausgeleuchteten Hallen verwendet wird. Zu Hause kann generell von »gutem Licht« gesprochen werden. Gutes Licht heißt im besten Fall leicht gedimmtes, indirektes Licht, das die Umgebung ausleuchtet und dem Nutzer eine augenschonende Bildschirmhelligkeit ermöglicht.

Für die Gestaltung der App bedeutet es, dass dunklere Farben für das Layout ver-wendet werden können, ohne dass die Spiegelung eine starke physische Belastung für die Augen wird.

Bei schwacher Bildschirmhelligkeit und einem Einsatz unter freiem Himmel ist weiße Schrift auf schwarzem Grund sehr anstrengend. Auch wenn die Schrift sehr groß eingestellt ist, muss das Gerät immer etwas anders gehalten werden, um die Inhalte besser lesen zu können.


Bild 3.2: Beispiel: Twitterific im Tag- und Nachtmodus.

Checkliste – Wie werden Smartphones gehalten?

� Einhänder – mit einer Hand halten und mit dem Daumen der gleichen Hand bedienen.

� Zweihänder – mit beiden Händen halten und mit beiden Daumen bedienen.

� Zweihänder »cradled« – mit einer Hand oder in einer Halterung halten und mit der anderen Hand bedienen.

Es gibt Einhänder und es gibt Zweihänder – nicht nur bei Schwertern, sondern auch bei den Benutzern von mobilen Geräten.

Gerade Smartphone-Benutzer lassen sich in diese zwei Kategorien einteilen, wobei die Bedienung mit zwei Händen noch einmal unterteilt wird in »zweihändig« und »cradled«. Letzteres bedeutet lediglich, dass das Tablet oder Smartphone in einer Haltevorrichtung liegt, während es mit einer Hand bedient wird. Diese Halterung kann etwa die andere Hand sein oder auch eine mechanische Vorrichtung. Insbe-


sondere im Medizinsektor wird aus hygienischen Gründen oft auf eine Cradled-Lösung gesetzt, die Kioskständern für Tablets, die in Läden oder auf Messen zu Präsentationen verwendet werden, ähnelt.

Der Einhänder Diese Nutzer halten das Smartphone mit einer Hand und bedienen es mit dem Daumen. Ein normal großer Benutzer kann Bildschirme bis 3,5 Zoll problemlos mit einer Hand betätigen.

Bild 3.3: Einhänderbedienung.

Es gibt hier einen eingeschränkten Reichweitenradius, der mit dem Daumen bequem erreicht werden kann. Auf sehr großen Smartphones können einige Punkte bei der einhändigen Benutzung nur durch Verändern der Handlage erreicht werden. In diesem Fall entsteht dann eine kurzzeitige Unterbrechung der Benut-zung.

Funktionen, die nicht oft verwendet werden, sollten dort platziert werden, wo der Daumen seltener hinkommt, oben links bzw. oben rechts. Das gilt auch für destruktive Funktionen wie etwa das Löschen von Inhalten. Diese werden schwerer erreichbar platziert, um versehentliche Klicks zu minimieren.

Wichtige Funktionen wie die Navigationsleiste sollten hingegen schnell erreichbar sein. Oben links wird der Zurück-Button platziert, während oben rechts oft ein Toolbar-Button liegt, in Ausnahmefällen kann es auch ein Kontextmenü sein.


Bild 3.4: Typische Navigationsleiste einer Android-App: links der Zurück-Button (Pfeil), rechts der Menü-Button (drei Punkte).

Beide Funktionen werden im Vergleich zur restlichen Nutzungsdauer der App seltener verwendet. Bei vielen Apps, beispielsweise Fotoalben, steigt heutzutage der Konsum von Daten, die in einem Navigationsstack angezeigt werden. Um dem Erreichen eines Buttons entgegenzuwirken und auch das Nutzererlebnis zu ver-bessern, wird zwischen Fotos mit einfachen Swipe-Gesten navigiert. Die Swipe-Geste liegt genau in der Zone, die vom Daumen gut erreicht werden kann.

Bild 3.5: Besser und schlechter erreichbare Bildschirmbereiche.

Die beiden Zweihänder Von der Sorte Zweihänder gibt es zwei Typen. Zum einen ist da der typische Zwei-händer, der aus der BlackBerry-Welt zu kommen scheint und als Vieltipper beide Daumen zur Bedienung der Tastatur verwendet. Weitere Finger kommen nicht zum Einsatz, da die Hände dazu verwendet werden, das Gerät sicher zu halten.

Der zweihändige Tipper erreicht große Teile des Bildschirms, ohne sich zu ver-krampfen oder Schwierigkeiten zu bekommen. Durch den sicheren Griff kann er durch Veränderung der Platzierung der Hände schnell das obere Drittel des Bild-schirms erreichen.


Bild 3.6: Zweihänderbedienung.

Bild 3.7: Verschiebbare Bildschirmtastatur auf einem iPad im Querformat.

Mittlerweile unterstützt iOS das Aufteilen und Verschieben der Bildschirmtastatur, die zum Beispiel mittig platziert werden kann.


Bei Android muss in diesem Fall eine Drittanbieterlösung eingebunden werden, die diese Funktionen ermöglicht. Die Downloadzahlen zeigen deutlich, dass solche Funktionen durchaus erwünscht sind.

Die verschiebbare Tastatur bringt einerseits große Vorteile für den Benutzer. Sollten allerdings Erweiterungen für das hauseigene Keyboard implementiert wer-den, muss auch bedacht werden, dass das gesamte Konzept der übersichtlichen geteilten Tastatur damit zerstört wird. Diese Buttons, meist oberhalb der Tastatur platziert, skalieren nicht mit und bleiben in ihrer festen Größe, während das rest-liche Tastenlayout ein Viertel so groß ist. Das kann den Benutzer irritieren und ihm suggerieren, dass die oberen Tasten besonders zentrale Funktionen haben. Das Gesamtbild wird zerstört, da wichtiger Platz, der der Übersicht dienen soll, hier mit einem leicht transparenten grauen Standardhintergrund überlappt wird.

Bild 3.8: Keyboard der App iA Writer – geteilt.

Die zweite Art von Zweihänderbedienung, die sogenannte Cradled-Haltung, ist eine sichere Form, das Gerät zu halten und zu bedienen, da die zweite Hand die stützende Kraft ist. Es ist nicht nur sicher, das Gerät so zu halten, sondern auch dynamisch. Der zweite Arm, frei in der Luft schwebend, wird hier wie beim bequemen Einfingertippen schnell und zielsicher auf den interaktiven Elementen der App platziert.

tichwortverzeichnis

9 9-patch 141

A Action Bar 98 Activity-Indikator 57 Akku 34 Aktivitätsanzeige 30 Analytische Methode 152 Android 77

dp 24 Emulator 79 Gestaltungsrichtlinien 53 Icon Pack 101 Lollipop 89 Ressourcen 105 Schriftart 91 Tasten 79

Apache Cordova 124 App Bar 98, 99 Appcelerator Titanium Mobile 126 Auto Layout 27

B Bedienungsmuster 21 Benachrichtigungen 75, 85 Benachrichtigungsleiste 76 Benutzer 11, 130 Beschleunigungssensor 33 Bildschirmaufbau 52

Bildschirmgröße 23 BlackBerry-Tastatur 37 Bluetooth 32 Blurry Background 40 Bootstrap 120 Button 56

C Chunks 20 CollectionView 69 Core Icons 102 Create Data 102 Crossplattform-Entwicklung 119, 131 CSS 120 Custom-Launcher 77

D Dark Theme 73 Density-Independent-Pixel 24, 27, 106 Design 132, 139, 147 Designer 13, 137 Dialog 96, 113 Digital Immigrants 12 Digital Natives 12 Diskettensymbol 148

E Eingabemöglichkeiten 16 Emoji-Tastatur 73 Emotionale Bindung zum Gerät 35

S

158 Stichwortverzeichnis

Empirische Untersuchungen 153 Eye Candy 147

F Facebook 146

Timeline 95 Flat Design 40, 149 Fortschrittsbalken 57 Fragebogen 151

G Gestaltungsrichtlinien 48

Android 100 iOS 53 Windows Phone 115

Gesten 17, 37 Google Now 84 Gummibandeffekt 147

H Haptisches Feedback 37 hdpi 105 Helvetica 55 Hierarchische Navigation 63 HockeyApp 135 Holo Theme 88 HTML 120 HTML5 120, 121

I iBeacons 32 Icon 59

Action Bar 102 Android 101 Core 102 Größe 61

In-App-Käufe 123 Informationen bereitstellen 14

iOS Bildschirmgröße 26 Gestaltungsrichtlinien 53 Icons 62

K Kneifgeste 21 Kontext 129 Kontextmenü 39 Kurzzeitgedächtnis 20

L Launcher-Icons 104 Leserichtung 136 Light Theme 73 Listen 93 Live Tiles 108 Logo 144

M Material Design 89 mdpi 105 Mobile First 120 Mobile Webseiten 119 Mobilfunknetz 31 Modern UI 107 Multithreading 30 Multitouch 39

N Nachlauf 39 Navigation Drawer 98, 145 Navigationskonzept 140 Navigationsmuster 140 Netzwerkverbindung 31 NFC 33 Nokia 106

Stichwortverzeichnis 159

P Passworteingabe 75 Performance 133 Phablet 23, 29 PhoneGap 124 Picker 58 Pixeldichte 105 PixelSense 14 Pop-up 75, 96 Probanden 151 Progress Bar 57 Pull to refresh 147 Punctuation-Tastatur 73

Q Qualitätssicherung 134

R Räumliche Tiefe 149 Responsives Design 119 Retina-Display 24 Roboto-Font 91

S Schaltflächenanordnung 21 Schieberegler 57 Schrift 91 Schriftart 55, 137 Scrollen 39 Segoe UI 113 Seitenverhältnis 24 Sina Weibo 146 Skeuomorphismus 148 Slide to unlock 35 Slider 57 Snackbar 96 Social Media Logins 146 S-Pen 29

Sperrbildschirm 76 Sprache 136 Startbildschirm 39 Statuszeile 52 Stromverbrauch 34 Swipe-Geste 37 Switch 56

T Tab Bar 65 Tablet 23

Auflösung 27 Bildschirmgröße 27 haptisches Feedback 37

TableView 66 Tabs 98 Taschenmesser 19 Tastatur 69

Decimal NumPad 71 iPad 74 NumPad 71 PhonePad 71 Standardtastatur 70

TestFlight 135 Toast 95 Twitterific 148 Typografie 55

U UMTS 32 Usability 9 Usability-Test 151

V Vanilla Android 78 Vektorgrafik 141 Verbindungsabbruch 31 Vollbildmodus 39

160 Stichwortverzeichnis

W Wartung 134 Web-Apps 121 Websearch-Tastatur 72 Werkzeug 10 Widgets 82 Windows Mobile 106 Windows Phone 106

Application Bar 111 Bildschirmgrößen 110 Dialoge 113 Farben 114 Gestaltungsrichtlinien 53

Hintergrund 112 Icons 114 Kacheln 108 Schriftart 113 Softkeys 110

X Xamarin 128

Z Zielgruppe 22 Ziffernblock 71 Zurück-Button 21, 39

SCHNELLEINSTIEG

160 SEITENPLATTFORMÜBERGREIFENDES DESIGN: ANDROID, APPLE IOS

UNDWINDOWS PHONE

Michal Gralak/Thorsten Stark

APP USABILITY

35CHECK-LISTENFÜR DIEPRAXIS


Kleinere Bildschirme, andere Auflösungen, neue Bedienkonzepte: Smartphones und Tablets sind anders als Desktoprechner. Längst haben sich diese Geräte als Standard durchgesetzt. Inzwi-schen buhlen Millionen von Apps um die Aufmerksamkeit der Benutzer. Um diese zu erlangen,sind pfiffige Apps mit guter Bedienung erforderlich. Was muss man beachten, um eine Oberflächemit Spaß bei der Bedienung zu entwerfen?

Was macht ein mobiles Gerät aus?Smartphones und Tablets unterscheiden sich vonDesktoprechnern, nicht nur, was die Dimensionen betrifft. Allein das Touch bietet komplett neue Möglich-keiten. Die verfügbare Hardware muss eingebundenwerden: Bluetooth, NFC oder auch Beschleunigungs-sensor. Statt simpler Mausklicks gibt es Gesten. In zwei Kapiteln lernen Sie, was ein mobiles Gerätwirklich ausmacht.

Native App oder plattformübergreifend?Alle Betriebssysteme müssen Sie nicht zwingend bedienen, drei davon schon: Android, Apple iOS undWindows Phone. Was sind die Eigenheiten der Betriebs-systeme in Bezug auf die Oberfläche? Detailliert lernenSie, worauf es bei diesen drei Plattformen ankommt.Ob es immer eine native App sein muss oder ob esnicht auch eine App für alle Plattformen sein kann,lesen Sie in einem extra Kapitel.

Zu guter Letzt widmet sich ein Kapitel dem Usability-Test.

Aus dem Inhalt:• Eingabemöglichkeitenbei Smartphones

• Größe und Auflösungdes Bildschirms

• Bluetooth, NFC, Beschleunigungs-sensor und Akku

• Natürliche Benutzeroberflächemit dem OSIT-Modell entwerfen

• Gestaltungsrichtlinien füralle Plattformen

• Benutzeroberfläche von Android,Apple iOS und Windows Phone

•Web-Apps, PhoneGap, Cordova,Titanium Mobile und Xamarin

• Native Apps im Vergleich zuHTML5-Apps

• Layout und Design

Besuchen Sie unsere Website www.franzis.de

Oberflächeneffekte visuell erklärt

SCH

NEL

LEIN

STIE

GAPP

USA

BILITY

Gralak/Stark

SCHNELLEINSTIEG

APP USABILITY

Konzepte direkt an Praxisbeispielen erklärt

60259-4 U1+U4 2 03.03.15 09:12 Seite 1

Michal Gralak/Thorsten Stark Gralak/Stark - leseprobe.buch.de · schnelleinstieg 160 seiten...

Documents

Transcript of Michal Gralak/Thorsten Stark Gralak/Stark - leseprobe.buch.de · schnelleinstieg 160 seiten...