Bachelor Thesis. Grundlagen des Designs touchbasierter Benutzerschnittstellen für Android und Implementierung mit Adobe Flex 4.5

Transkript

1 Bachelor Thesis Grundlagen des Designs touchbasierter Benutzerschnittstellen für Android und Implementierung mit Adobe Flex 4.5 Studiengang Medieninformatik der Fachhochschule Stuttgart - Hochschule der Medien vorgelegt von Niko Rukavina Erstprüfer: Zweitprüferin: Dr. Ansgar Gerlicher Sabiha Ghellal, M.Sc. Stuttgart, 28. Februar 2011

2 Kurzfassung Die vorliegende Arbeit behandelt visuelles Design, Konzeption und Entwicklung von Benutzerschnittstellen im mobilen Kontext. Die Geräteklasse der Smartphones stellt ein neues Medium dar. Ihre Benutzung mit Hilfe berührungsempfindlicher Bildschirme unterscheidet sich grundlegend von klassischen Interaktionsformen des Desktop-Computers. In einem komplexen sogenannten mobilen Ökosystem, leiten sich aus Wirkungen des Marktes, einer heterogenen Landschaft mobiler Endgeräte und dem mobilen Medienkontext veränderte Anforderungen an Benutzerschnittstellen ab. Diesen muss im Zuge des Designprozesses mit einem ganzheitlichen Qualitätsanspruch begegnet werden, wobei eine positive Nutzererfahrung das Ziel aller Bestrebungen ist. Die vorliegende Arbeit zeigt die wichtigsten Einflüsse auf den Gestaltungsprozess moderner Benutzerschnittstellen auf und bietet dem Leser einen ganzheitlichen Überblick als Basis für Design und Entwicklung eigener Lösungsansätze im mobilen Kontext an. Kernfragen: Was ist das mobile Ökosystem und welche Auswirkungen haben wirtschaftliche Zusammenhänge auf die Entwicklung von mobilen Applikationen und Benutzerschnittstellen? Welche Auswirkungen haben Beschränkungen der Bildschirmgröße, gestenbasierter Eingabe und der mobile Kontext auf die Gestaltung von UIs für mobile Endgeräte? Welche Bedeutung haben Entwurfsmuster und Design Richtlinien im mobilen Kontext? Wie reflektieren sie traditionelle und gewandelte Anforderungen? Welche Möglichkeiten zur Implementierung von Benutzerschnittstellen für Android bietet das Flash-Framework Flex 4.5 von Adobe? Eingeordnet und motiviert wird das Thema mit einem Überblick über die tragenden Elemente des sogenannten mobilen Ökosystems, einer Analyse des Marktes für mobile Systeme im Frühjahr 2011 und der gestiegenen Bedeutung der Benutzerschnittstelle und dem Begriff der User Experience Nutzererfahrung als Erfolgsfaktor. Es werden die Eigenheiten des mobilen Kontexts beleuchtet und konkrete Auswirkungen auf den Designprozess vorgestellt. Den Abschluss des Theorieteils bildet eine Vorstellung der Google Guideline für Android Benutzerschnittstellen. Im praktischen Teil wird das zugehörige Thesis-Projekt Semsix Touch vorgestellt, welches mit dem Adobe Flex 4.5 Framework realisiert wurde. Schlüsselwörter: Android, Smartphone, Benutzerschnittstelle, Nutzererfahrung, mobiler Kontext, UI Guideline, Flex 4.5

3 Abstract In light of rapid evolution within the mobile ecosystem, new patterns, guidelines and heuristics have emerged that account for an increased demand for positive "user experience" (UX). By essentially forging a new medium, Touch interactive mobile devices and their increased sophistication have had a drastic impact on the requirements of corresponding User Interfaces. To counter the challenges surrounding this change of context, the classical understanding of user experience design needs to be refined. The final aim of the presented Thesis is to give readers an understanding of the mobile ecosystem, the challenges in designing interfaces for mobile devices, and how patterns and guidelines help creating State of the Art User Interfaces, that promote a positive user experience. The work begins with an overview and market analysis of the mobile ecosystem in 2011, using most recent data. It shows hardware issues and their consequences for mobile UI Design. Subsequent chapters give a quick introduction to user experience design, a closer look on how common design principles play out in the mobile context and finally, how recent design patterns embody the previously discussed observations, by discussing the UI Guidelines for Android, using a recent example application. The Thesis concludes with the presentation of an accompanying Software project, demonstrating a pre-release version of the Adobe Flex 4.5 framework as a platform for Android Application Development. Keywords: mobile Ecosystem, User Experience Design, UI Guideline, Android, UI Design Patterns, Flex 4.5

4 Inhaltsverzeichnis Kurzfassung... 2 Abstract... 3 Inhaltsverzeichnis... 4 Abbildungsverzeichnis... 6 Tabellenverzeichnis... 7 Abkürzungsverzeichnis... 8 Glossar Einleitung Android und das "mobile Ökosystem" Überblick Beschreibung Die globale Bedeutung mobiler Systeme Plattformen Betriebssysteme Benutzerschnittstellen des Android Betriebssystems Marktanalyse im 1. Quartal Marktanteile Marktentwicklungen Apps User Experience Design im mobilen Kontext Grundlagen Der Begriff User Experience Nutzerbedürfnisse als Designansatz User Interface Design nach Shneiderman Mobiler Kontext Besonderheiten der mobilen Anwendungsentwicklung Zielauflösungen für mobile Endgeräte Interaktion mit Touchscreens Design mobiler Applikationen... 40

5 Inhaltsverzeichnis Marktstrategie für eine erfolgreiche mobile Anwendung Informationsarchitektur für mobile Systeme Screendesign für mobile Anwendungen Entwurfsmuster für Android UIs Grundlagen Design Patterns Definition Nutzen von Design Patterns im Designprozess UI Patterns nach Gestaltungsrichtlinien für Android-Systeme Richtlinien Überblick Entwurfsmuster einer Android-App Navigationsstruktur Design Pattern GUI Design Patterns Entwicklung einer Touch Applikation für Android mit Flex Thesis-Projekt Semsix Touch Eckdaten Beschreibung und Ausgangslage Projektziele im Rückblick Projektergebnisse Konzept Design Prototyp Evaluation Herausforderungen und Lösungsansätze Migration Exemplarisches Problem Projektfazit Zusammenfassung Quellenverzeichnis Danksagung Erklärung... 75

6 Abbildungsverzeichnis Abbildung 1: Visualization of interfirm relations in a converging mobile ecosystem (Basole 2009) 14 Abbildung 2: Schichtenmodell des mobilen Ökosystems (Fling 2009, S. 14) Abbildung 3: Wachstumsprognose des mobilen Webzugriffs (Fling 2009, S.33) Abbildung 4: Verteilung der aktiven Versionen von Android auf Endgeräten (Android Developers 2011) Abbildung 5: Globale Marktanteile Smartphone Plattformen im Vergleich 4.Quartal 2009 und 2010 (Canalys 2011) Abbildung 6: Genutzte Entwicklungsplattformen im Frühjahr 2010 (Visionmobile 2011) Abbildung 7: Disparität zwischen Plattformreichweite und verfügbaren Apps im 2.Quartal 2010 (Visionmobile 2011) Abbildung 8: Google Trends Statistik: Suchvolumen für User Experience Design (Google, Inc. 2011) Abbildung 9: Google Trends Statistik: Suchvolumen für Usability (Google, Inc. 2011) Abbildung 10: UX Pyramide: Anforderungen an ein interaktives System, orientiert an hierarchisch strukturierten Nutzerbedürfnissen - Quelle: (Traynor 2008) nach (Anderson 2007) Abbildung 11: LG W2443T PC-Monitor Abbildung 12: HTC desire HD Abbildung 13: Relation von Bildschirmauflösungen Smartphone und PC-Bildschirm Abbildung 14: Verteilung von Bildschirmauflösung in der Breite von mobilen Endgeräten nach Häufigkeit und aufsteigend nach Größe sortiert Abbildung 15: Schichten der klassischen Mensch-Maschine Interaktion (Stapelkamp 2010, S. 152) Abbildung 16: Screenshot von Angry Birds, Rovio mobile, Abbildung 17: Navigationspfade einer Applikation als Clickstream (Fling 2009, S. 99) Abbildung 18: Screenshot des Android Market Abbildung 19: Vorstellung des digitalen Wireframing-Werkzeugs Balsamiq (Quelle: 46 Abbildung 20: Varianten der Textdarstellung auf Bildschirmen Abbildung 21: PSA: Pattern Supported Approach für User Interface Design (Bildquelle: Granlund et al 2001, S. 2) Abbildung 22: Muster einer Informationsarchitektur für eine Android-Applikation (Nesladek et al 2010, S. 25) Abbildung 23: Dashboard Pattern (Nesladek et al 2010, S. 10) Abbildung 24:VVS App, von Fluidtime Abbildung 25: Action Bar Pattern (Nesladek et al 2010, S. 13) Abbildung 26: Twitter App von Twitter, Inc Abbildung 27: Quick Actions Pattern (Nesladek et al 2010, S. 16) Abbildung 28: Beispielapplikation Blitzdroid Abbildung 29: Screenshot Adobe Flex 3.2 Applikation Abbildung 30: Konzeptzeichnung des Zieldesigns für den Semsix Touch Prototyp Abbildung 31: Mockup des Zieldesigns mit Adobe Photoshop CS Abbildung 32: Fotografie des auf der MediaNight im Februar 2011 präsentierten Prototyps auf dem Endgerät Abbildung 33: Beispiel für mobil-optimierte Liste in Flex 4.5 (Bildquelle: blogs.adobe.com) Abbildung 34: Veranschaulichung der Zusammenhänge ItemRenderer, Container, DataProvider 65 Abbildung 35: Prototypische Umsetzung eines kontextuellen Buttons... 66

7 Tabellenverzeichnis 7 Tabellenverzeichnis Tabelle 1: Prognose des Marktanteils mobiler OS für 2014 (IDC 2010) Tabelle 2: Die wichtigsten Daten des Semsix Touch Projekts... 57

8 Abkürzungsverzeichnis UX, UXD UI UID ID HCI MMS OS API IDE OEM PPI IA GUI User Experience, User Experience Design User Interface User Interface Design Interaction Design Human Computer Interaction Mensch-Maschine Schnittstelle Operating System Application Programming Interface Integrated Development Environment Original Equipment Manufacturer Pixels per Inch Informationsarchitektur Graphical User Interface

9 Glossar Analog zu einigen Quellen wird in dieser Arbeit mit dem der Begriff Design sowohl die Konzeption als auch grafische Ausgestaltung einer Applikation verstanden. Entwicklung bezieht sich lediglich auf programmatische Realisierung von Benutzerschnittstellen und Anwendungen mittels Software. Der Designprozess hingegen umfasst das ganze Projekt, sowohl Konzeption, visuelles Design, als auch Programmierung und Evaluation Englische Fachbegriffe und deren deutsche Entsprechungen und Abkürzungen werden synonym verwendet, e.g. die Begriffe User Experience, UX, Nutzererfahrung werden gleichbedeutend behandelt. Selbiges gilt für die Termini Design Patterns und Entwurfsmuster, sowie User Interface, UI und Benutzerschnittstelle. Content Im weitesten Sinne der nutzbare Inhalt eines Systems wie etwa Bild, Text, Video oder Ton, welcher dem System einen Wert verleiht. Immersion Der Grad an Aufmerksamkeit, welche ein Nutzer einem System oder dessen Content bei der Benutzung bzw. dem Konsum entgegenbringt. holistisch Die ganzheitliche Betrachtung eines Komplexes als Einheit reduktionistisch) (Gegensatzwort zu Heuristik Hier: eine auf Erfahrungswerten gegründete Erkenntnis oder Vorgehensweise im Designprozess. UX, User Experience, Nutzererfahrung Gesamtheit der positiven bzw. negativen Empfindungen die der Anwender bei der Benutzung eines interaktiven Systems empfindet. User Experience Design Jüngerer Sammelbegriff von Teildisziplinen wie Usability Engineering, User Interface Design, Interactiondesign, Screendesign und deren Methoden, welche das Ziel haben interaktive Systeme so zu gestalten, dass sie eine positive Nutzererfahrung auslösen.

10 Glossar 10 App Hier: Anwendung für mobile Endgeräte - typischerweise Smartphones und Tablet-PCs. Mobile Application Store Zentrale Distributionsplattform für Zusatzprogramme (Beispiele: itunes App Store, Android Market). Paid Content Ein jüngeres Geschäftsmodell: Bezahlpflichtige Inhalte, die i.d.r. per Download zur Verfügung gestellt werden, hier: Content der aus einer Applikation heraus erworben werden kann. Screen Real Estate Die verfügbare Bildschirmfläche eines mobilen Endgeräts, welche für die Platzierung von Content und Kontrollelementen zur Verfügung steht. Usability Engineering Die ingenieurswissenschaftliche Teildisziplin der Mensch-Computer-Interaktion, welche systematische Methoden zu Entwicklung benutzerfreundlicher, interaktiver Systeme anwendet. Web 2.0 Eine Bezeichnung für den Anspruch moderner Webdesigns auf Interaktivität und Kommunikation (Beispiel: Facebook). Smartphone, Featurephone Eine lose definierte Klassifikation für Mobiltelefone. Ein Smartphone wird je nach Lesart bezüglich der Exemplare seiner vorangegangenen Generation, den Featurephones, anhand folgender Merkmale abgegrenzt (oder einer Kombination dieser): des Vorhandenseins eines mobilen Betriebssystems, gesteigerter Rechenkapazität verbesserter Konnektivität (mobiles Breitband-Internet) hochauflösendem, berührungsempfindlichen Bildschirmen oder der Anbindung an Mobile Application Stores, zur Nutzung von Zusatzprogrammen.

11 Glossar 11 Applikationsframework Softwarebibliotheken, welche das Programmieren von Anwendungen beschleunigen können, indem beispielsweise vorgefertigte Module genutzt werden können

12 1 Einleitung In den letzten Jahren haben der Markt für Smartphones mit berührungsempfindlichen Displays und die Bedeutung des Betriebssystems Android des Unternehmens Google, Inc. deutlich zugenommen. Im Wettbewerb um die Marktstellung in diesem gewaltig wachsenden Segment kommt der einfachen Benutzung und der sogenannten positiven Nutzererfahrung von Endgeräten eine entscheidende Bedeutung zu. Während dem Thema Usability einigermaßen systematisch und quantitativ beizukommen ist, entzieht sich die Erfahrung eines Benutzers dagegen einer wissenschaftlichen Vorhersagbarkeit, eben da sie per Definition subjektiv ist. Genauso treffen Designer und Entwickler während des Gestaltungsprozess Entscheidungen und präsentieren Entwürfe häufig auf Grund ihrer subjektiven Vorlieben und Heuristiken. Um dem Ziel der positiven Nutzererfahrung dennoch auf kontrollierte, systematische Art näherzukommen, ist daher eine holistische, d.h. ganzheitliche Perspektive notwendig. Dies geschieht indem den Bedürfnissen eines Anwenders auf allen Ebenen eines interaktiven Systems begegnet wird. Im mobilen Kontext kommen zusätzliche Variablen konzeptioneller und technischer Art hinzu, welche noch vor Beginn eines Projektes zu berücksichtigen sind und deren Missachtung die Wahrscheinlichkeit des Erreichens dieses Zieles einschränkt. Es ist daher für alle Beteiligten eines mobilen Projektes wichtig, sich dieser Herausforderungen und deren Lösungsansätze bewusst zu sein. Brian Fling, Autor des Fachbuches Mobile Design and Development, kommentiert in der Einleitung seines Werks (Fling 2009, S.1): If there is one basic principle about mobile, it is that everything is the way it is for a reason. It might not be a good reason, but a reason exists nonetheless. Betrachtet man die vielfältige Landschaft der UI-Elemente wie sie sich zur Zeit darbietet und begreift man weiterhin Entwurfsmuster und Richtlinien als Destillat aller genannten Einflussfaktoren, die des Marktes, der Hardware, dem Anspruch auf Nutzerfreundlichkeit, dem Zeitgeist des Mediums also als Verdichtung aller dieser umgebenden Faktoren, so bieten sie eine effektive Ausgangsbasis für das Verständnis aktueller und das Design zukünftiger innovativer und erfolgreicher Applikationen im mobilen Kontext.

13 2 Android und das "mobile Ökosystem" 2.1 Überblick Beschreibung Sowohl der Aspekt der User Experience als auch das Betriebssystem Android sind lediglich Elemente eines Spannungsfeldes von Interessen, in dem sich mobile Systeme bewegen. In der Fachsprache der Bereiche Marketing und Informationstechnologie hat sich als Bezeichnung für dieses komplexe Gebilde der Begriff des mobilen Ökosystems verbreitet. Definition Der Begriff Ökosystem entstammt den ökologischen Wissenschaften. Kennzeichnend für ein solches System sind allerdings Eigenschaften, welche sich ohne weiteres auf die Wechselwirkungen im mobilen Kontext übertragen lassen (Wikipedia 2011): Ein Ökosystem ist demnach offen : Es ist nicht von äußeren Einflüssen abgegrenzt und benötigt Wechselwirkungen innerhalb seiner Elemente um zu existieren dynamisch : Es herrschen Selbstorganisations- und Anpassungsprozesse, welche das umschließende Gesamtsystem laufend weiterentwickeln. Das System hat keinen fixen Zustand solange es existiert. komplex : Elemente und Strukturen stehen in wechselseitiger Beziehung Auch im mobilen Ökosystem sind alle Entwicklungsschritte das Ergebnis der unterschiedlich motivierten Wirkungen der Akteure untereinander. Dazu gehören im mobilen Kontext unter anderem: Die Konsumenten Die Netzbetreiber Die Hersteller von mobilen Softwareplattformen

14 2 Android und das "mobile Ökosystem" 14 Die Anwendungsentwickler Aggregatoren von Medieninhalten (Content Provider) Produzenten von Medieninhalten Hersteller von Endgeräten (OEMs) Es gibt eine Reihe von Veranschaulichungen der Teilnehmer und Wirkungszusammenhänge dieses Systems, sie unterscheiden sich jedoch wesentlich in Ihrer Perspektive, je nach Disziplin und Zweck der Betrachtung. Rahul Basole beispielsweise kommt in seinem Beitrag für das Journal of Information Technology vom Juni 2009 zu einem Ergebnis, welches in Abbildung 1 zu sehen ist: Abbildung 1: Visualization of interfirm relations in a converging mobile ecosystem (Basole 2009) Wie auch im Selbstverständnis des User Experience Design, steht der Anwender (in dieser Sichtweise der Konsument, welcher Dienstleistungen und Produkte entgegennimmt) im Mittelpunkt allen Bestrebens. Über das Ziel, die Bedürfnisse des Nutzers mit Diensten und Inhalten zu befriedigen, sind Unternehmen miteinander in Kooperation bzw. stehen im Wettbewerb. Entwickler und Fachbuchautor Brian Fling empfiehlt zum Verständnis von Design und Entwicklung mobiler Applikationen eine alternative Interpretation dieser Zusammenhänge nach folgendem Schichtenmodell (Fling 2009, S. 14):

15 2 Android und das "mobile Ökosystem" 15 Abbildung 2: Schichtenmodell des mobilen Ökosystems (Fling 2009, S. 14) Bereits bei der Wahl der Zielplattform ergeben sich eine Reihe von Beschränkungen und Auswirkungen auf das Zieldesign einer Applikation (mehr zu Plattformen vgl. Kapitel 2.1.3). Eine Plattform hat Auswirkungen auf die verfügbaren Anwendungsframeworks, diese wiederum ziehen den Rahmen der Gestaltungsmöglichkeiten der Benutzerschnittstelle für jede Applikation (Fling 2009). Dies ist ein erster Hinweis darauf, wie stark die Entwicklung von User Interfaces mit den Erwägungen darunterliegender Schichten nach diesem Modell verknüpft ist. Fling plädiert im Laufe des Werkes für eine ganzheitliche Betrachtung der Zusammenhänge im mobilen Ökosystem. Dies könne zur Entwicklung von erfolgreichen mobilen Anwendungen den entscheidenden Beitrag leisten Die globale Bedeutung mobiler Systeme Der Verbreitungsgrad mobiler Systeme zum Umgang mit digitalen Informationen ist immens hoch. Dies wird besonders deutlich wenn man einige Zahlen zur Nutzung des Internets auf globaler Ebene betrachtet. Einer weltweiten Anzahl von 1.1 Milliarden verkauften internetfähigen Desktop Computern stehen bereits 1.6 Milliarden mobile Endgeräte gegenüber (von insgesamt 3.6 Milliarden Geräten), welche für den Zugriff auf Ressourcen im Internet genutzt werden können. Dies entspricht grob einem Viertel der Erdbevölkerung. Der Anteil der Webnutzung durch mobile Geräte wird nach Schätzungen in Zukunft weiterhin drastisch zunehmen. Fling führt hierzu die in Abbildung 3 dargestellte Grafik an (Fling 2009, S. 30).

16 2 Android und das "mobile Ökosystem" 16 Abbildung 3: Wachstumsprognose des mobilen Webzugriffs (Fling 2009, S.33) Die abgebildeten Kurvenpunkte bezeichnen jeweils das Wachstum der Zugriffe über das jeweilige Medium relativ zum Vorjahr. Aktuelle Verkaufszahlen unterstützen diese Prognose. In einer Februar 2011 herausgegebenen Mitteilung bestätigt das amerikanische Marktforschungsunternehmen Gartner, den weltweiten Verkauf von mobilen Geräten an Endkunden mit 1,6 Milliarden Einheiten einen Zuwachs von 32% an bis dato verkauften Geräten im Vergleich zum Geschäftsjahr Der Anteil der als Smartphone klassifizierten Geräte an dieser Zahl liegt bei 19%, ein Zuwachs von 72% im Vergleich zum Vorjahr (Gartner 2011) Plattformen Begriffsklärung: Um Applikationen für mobile Endgeräte entwickeln zu können bedienen sich Entwickler der Funktionen, welche das Endgerät über die Schnittstelle seiner Betriebssystem- Plattform oder einer anderen unterstützten Plattform anbietet. Eine Plattform im mobilen Kontext ist also eine Softwareumgebung, dessen Schnittstelle das Programmieren und Ausführen von Anwendungen ermöglicht. In manchen Fällen kann der Name der Softwareplattform identisch mit dem seines Betriebssystems sein (Fling 2009, S. 20). So ist eine native Android App beispielsweise eine Applikation für die Android Plattform, welche die Programmierschnittstelle (API) des Betriebssystems für seine Ausführung nutzt. Android unterstützt ab der Version 2.2 allerdings auch die Flash

17 2 Android und das "mobile Ökosystem" 17 Plattform im Rahmen der Adobe Runtime Environment (AIR), welches kein Betriebssystem, sondern eine Laufzeitumgebung für eigenständige Applikationen ist. Sie agiert als Zwischenschicht zwischen Betriebssystem und Programmcode (Adobe 2011). Ein als AIR-Applikation kompiliertes Programm wäre demnach eine Anwendung für die Flashplattform, welche in diesem Fall Android Geräte ab Version 2.2 erreicht. Plattformen gliedern sich im Allgemeinen in 3 Arten. Im Folgenden eine Vorstellung der aktuell bedeutendsten Plattformen (Fling 2009, S ): Lizenzierte Plattformen: Der Nutzen dieser Umgebungen ist es, den Entwicklern eine geräteübergreifende Möglichkeit zur Anwendungsentwicklung zur Verfügung zu stellen. Dazu gehören: Java Micro Edition (basiert auf einer Untermenge der Java API) BREW (Binary Runtime Environment for Wireless) Adobe AIR (ermöglicht Zugriff auf native Funktionen von Android seit der Version 2.5) Proprietäre Plattformen: Diese Plattformen werden von Unternehmen für deren Geräte eingesetzt. Entwickler können diese nutzen um Anwendungen für die Zielgeräte zu entwickeln, sie stehen anderen Unternehmen, die ihrerseits mobile Endgeräte produzieren jedoch nicht zur Verfügung. Beispiele hierfür sind: ios (eine Variante von Mac OS X, die von Apple genutzt wird) BlackBerry Plattform (basiert auf Java) WebOS (wird momentan von Palm für die Palm pre Gerätereihe eingesetzt) Open Source: Diese Art Plattformen sind frei verfügbar und können beliebig verändert werden. Ein prominentes Beispiel im mobilen Kontext ist das Android Betriebssystem.

18 2 Android und das "mobile Ökosystem" Betriebssysteme Überblick: Betriebssysteme mobiler Geräte erledigen unter anderem die Verwaltung von Hardwareressourcen und Benutzereingaben. Sie sind im Allgemeinen simpler aufgebaut als ihre Desktoppendants. Sie bilden zudem eine Basis für die Anwendungsentwicklung, indem sie Dienste und Funktionen zur Verfügung stellen und sorgen zunehmend für eine bessere Integration von Anwendungen in das Bedienkonzept des Geräts und regeln die Kommunikation zwischen Applikationen und deren Zugriffsrechte auf Daten. Mitunter gilt die Definition, ein Smartphone sei ein solches Gerät, welches über ein mobiles Betriebssystem verfügt dies hat sich jedoch relativiert, da sich der Einsatz mobiler Betriebssysteme sehr diversifiziert hat. (Fling 2009, S. 22) Nach der Veröffentlichung des iphones 2007 sind mobile Betriebssysteme für Smartphones verstärkt in den Mittelpunkt des Interesses von Konsumenten und Fachpublikum gerückt. Im Folgenden eine Übersicht verbreiteter mobiler Betriebssysteme 1 2 (Wikipedia 2011): Symbian Plattform (Symbian Foundation): Das am weitesten verbreitete Betriebssystem der aktuellen Gerätebasis, jedoch marktanteilig auf dem Rückzug. Im Einsatz befindlich auf Geräten von Nokia, Samsung und vielen anderen Herstellern Android (Google, Inc.): OpenSource-Plattform basierend auf dem Betriebssystem Linux, veröffentlicht 2007 und unterstützt von Google. Bedeutung stark wachsend. ios (Apple): Proprietäres Betriebssystem von Apple, wird eingesetzt für das iphone, ipod Touch und mit der 4. Generation für das ipad BlackBerry OS (Research in Motion): Konzipiert für ein hohes Maß an Usability für eine geschäftsorientierte Zielgruppe Windows Phone 7 (Microsoft): Löst das wenig erfolgreiche Windows Mobile als lizenzierte Plattform ab. Sehr geringer Marktanteil im Februar 2011 webos (HP): Basiert auf Linux und wurde von Palm für dessen Geräte entwickelt. Palm wurde von HP übernommen. 1 Die Betriebssysteme überschneiden sich wie im Kapitel zuvor erläutert mit den Plattformen der Anwendungsentwicklung 2 Zur Verbreitung der jeweiligen Plattformen vgl. Kapitel Marktanteile der vorliegenden Arbeit

19 2 Android und das "mobile Ökosystem" 19 Bada (Samsung): Proprietäres Betriebssystem des südkoreanischen Großkonzerns Benutzerschnittstellen des Android Betriebssystems Versionen von Android Im Frühjahr 2011 sind fünf verschiedene Androidversionen im Einsatz. Die neu angekündigte Version 3.0 Codename Honeycomb ist eine für Tablet-PC optimierte Version sein, die mit dem Motorola Xoom-Tablet voraussichtlich im Ersten Quartal 2011 ausgeliefert wird (Spiegel Online 2011). Eine Übersicht über die Verteilung der Versionen auf Endgeräten in Benutzung bietet die Entwickler-Website von Android mit folgender Grafik: Abbildung 4: Verteilung der aktiven Versionen von Android auf Endgeräten (Android Developers 2011) Probleme im Zusammenhang mit Versionsfragmentierung Die Android-Entwickler bringen in der Regel alle 3 Monate größere Updates für das Betriebssystem heraus um dessen Funktionen zu erweitern. Anders als Apple steuert Google nicht die Ausgestaltung der Endgeräte, dies erledigen Gerätehersteller wie Sony Ericsson oder Motorola, mit denen Google im Rahmen der sogenannten Open Handset Alliance kooperiert. Das Problem: Die Gerätehersteller müssen Anpassungen für ihre älteren Geräte veröffentlichen um dort die neue Version des Betriebssystems für Endanwender nutzbar zu machen. Hinderlich ist dabei unter anderem die Tatsache, dass die Hersteller Eigenentwicklungen von Benutzerschnittstellen für Android im Einsatz haben, welche Skins genannt werden. Beispiele hierfür sind HTC Sense, Samsung Touchwiz und Motorola Motoblur (Hookway 2010).

20 2 Android und das "mobile Ökosystem" 20 Diese Freiheit der Hersteller führt zu einer zusätzlichen Aufspaltung der Plattform mit empfindlichen Verzögerungen zwischen der Verfügbarkeit einer neuen Android-Version und ihre Verbreitung auf Endgeräten. In manchen Fällen werden technisch mögliche Updates des Betriebssystems ganz versäumt. Technik-Kolumnist Viktor Petterson äußert in diesem Zusammenhang folgenden Verdacht in einem seiner Blog-Artikel (Petterson 2010): I think another reason [for the delay] is that these companies are used to operating with a release and forget kind of workflow. Once the phone is out, forget about it and move on to the next one. That used to work fine when they developed their own proprietary operating system, but that all changed now, and these companies haven t really realized that they need to change their operations. Die Motivation der Hersteller, dieses Problem in Kauf zu nehmen ist Folgende: Da viele Hersteller mehrere Plattformen für ihr Geräte-Portfolio im Einsatz haben, wollen sie dem Nutzer durch ihr eigenes Skin eine einheitliche Nutzererfahrung über Plattformgrenzen hinweg bieten. Dies dient zur Markenbindung der Anwender und zur Abgrenzung von der Konkurrenz, mit der Konsequenz dass es de facto keine einheitliche Android Benutzerschnittstelle gibt (Theiss 2010, S. 37). Bedeutung der Benutzerschnittstelle für den Wettbewerb Die Benutzerschnittstelle nimmt im Wettbewerb um die Marktführung eine wichtige Rolle ein. Apple hat mit der Veröffentlichung des iphones 2007 Maßstäbe in der Gestaltung von Benutzerschnittstellen gesetzt und damit große Erfolge erzielt. Seitdem hat das Engagement der Gerätehersteller, mit einem eigenen User Interface als Alleinstellungsmerkmal nachzuziehen, stark zugenommen. Auch Telekommunikations- Provider versuchen wieder verstärkt Einfluss auf die Benutzerschnittstelle im Sinne Branding zu gewinnen, um dort die Kommunikation ihrer Corporate Identity zu fördern 3. All dies läuft dem Interesse Googles zuwider, Android seinerseits als Plattform mit einer einheitlichen Nutzerschnittstelle gegen das iphone weiter in Stellung zu halten. 3 Corporate Branding und dezidierte UI-Entwickler Teams waren laut (Hookway 2010) vor der iphone-veröffentlichung aus der Mode gekommen, da die Unternehmen keinen merklichen ökonomischen Nutzen feststellen konnten

21 2 Android und das "mobile Ökosystem" 21 Ab Android 2.2 versucht das Unternehmen daher mittels höheren Auflagen der Anpassungsmöglichkeiten dieses Fragmentierungsproblem der Nutzerschnittstelle in den Griff zu bekommen. Analysten gehen auf Grund des von Google in der aktuellen Form etablierten, kooperativen Geschäftsmodells jedoch nicht davon aus, dass es einen vergleichbaren Grad an Kontrolle über das Erscheinungsbild seines Betriebssystems gewinnen kann wie Apple ihn innehat. Das Konkurrenzunternehmen überschaut alle Aspekte seiner Gerätereihe: von der Hardwareproduktion, über die Software bis zum Marketing. Damit hat es auch die vollständige Kontrolle über seine Innovationszyklen, welche sie wirksam im Wettbewerb einsetzt (Hookway 2010).

22 2 Android und das "mobile Ökosystem" Marktanalyse im 1. Quartal Marktanteile In der Beobachtung des mobilen Marktes wird der Grad der Komplexität des mobilen Ökosystems sichtbar - jene Dynamik, mit der Netzbetreiber, OEMs, Softwareunternehmen, Entwickler und Plattformen aufeinander einwirken. Marktanteile nach Betriebssystem Das Marktanalyse-Unternehmen Canalys veröffentlichte Ende Januar 2011 die in Abbildung 5 dargestellten Zahlen. Demnach hat Google den Marktanteil für Android in nur einem Jahr um 600% vergrößern können und liegt mit 33% an der Spitze 4 : Abbildung 5: Globale Marktanteile Smartphone Plattformen im Vergleich 4.Quartal 2009 und 2010 (Canalys 2011) 4 Gartner zeigt hierzu ergänzende Zahlen in denen nach Betriebssystemen gestaffelt, der Marktanteil von Symbian immer noch an der Spitze mit 37% liegt, jedoch schwindet dieser Anteil, insbesondere im für die Branche wichtigen Kernmarkt USA. Er liegt 9 Prozentpunkte unter dem Vorjahresergebnis (Gartner 2011).

23 2 Android und das "mobile Ökosystem" 23 Der Markt für Smartphones konzentriert sich vor allem auf die USA und Westeuropa, 52% der Umsätze werden dort generiert. Die Gründe dafür sind ein höheres Einkommen der Konsumenten sowie eine bessere mobile Infrastruktur, welche die Funktionen der Smartphones hinsichtlich mobiler Breitbandkonnektivität besser bedienen kann (Canalys 2011). Laut einer Studie von IDC wurden Millionen Smartphones verkauft, eine Zunahme von 50% gegenüber dem Vorjahr (IDC 2010) Marktentwicklungen Die IDC-Mitteilung bewertet den mobilen Markt für 2010 als äußerst dynamisch, geprägt durch Androids wachsenden Marktanteil und dessen steigender Gefolgschaft bei Anwendern, Netzbetreibern und Entwicklern. Für 2011 wird ein Wachstum des Marktes um 24% erwartet. Weiterhin wagt der Bericht eine Prognose für 2014 (IDC 2010): Betriebssystem Marktanteil 2010 Marktanteil 2014 Änderung 2010/14 Symbian 40.1% 32.9% -18.0% BlackBerry OS 17.9% 17.3% -3.5% Android 16.3% 24.6% 51.2% ios 14.7% 10.9% -25.8% Windows Mobile 6.8% 9.8% 43.3% Others 4.2% 4.5% 8.3% Total 100.0% 100.0% Tabelle 1: Prognose des Marktanteils mobiler OS für 2014 (IDC 2010) Der US-amerikanische Technikblogger Anders Rosenquist wertet die Zahlen der Veröffentlichung als Hinweis, das Smartphones mit modernen Betriebssystemen auf Grund des medialen Interesses eine starke Nachfrage erhalten haben und die Featurephones der vorangegangenen Gerätegeneration ablösen (Rosenquist 2010).

24 2 Android und das "mobile Ökosystem" 24 Strategieanalyse Die aktuellen Marktturbulenzen haben Auswirkungen auf die Marktstrategien aller beteiligten Unternehmen. Hierzu legt Visionmobile eine ausführliche Einschätzung vor (Visionmobile 2010): BlackBerry-Hersteller Research in Motion verändert seine Zielgruppe und konzentriert sich auf das Niedrigpreissegment. 80% des Wachstums für Blackberrys begründet nun nicht mehr der Businesscharakter seiner Gerätereihe, sondern der Zulauf von Jugendlichen und Studenten, dank seiner gut vermarkteten Kurznachrichten-Dienste. Das Symbian Betriebssystem kann trotz seiner Wandlung zum OpenSource Projekt mit der 3. Generation 2010 nicht mit Android und ios konkurrieren und verliert stetig an Marktanteil. Sowohl Samsung als auch Sony Ericsson haben angekündigt keine Geräte mehr auf Symbian Basis auf den Markt zu bringen, womit Nokia im Plattformwettbewerb isoliert sein würde. Industrieexperte Michael Vakulenko schätzt in einem weiteren Visionmobile-Artikel die Chancen von Microsofts aktueller Plattform Windows Phone 7 als gut ein. Er begründet dies mit: Microsofts bekanntem Image als Hersteller von Mainstream Software der Möglichkeit Fragmentierungsproblemen (vgl. Google) im Vornherein besser zu begegnen einer großen Nutzerbasis im Rahmen von Xbox Live und Mail-Diensten einer großen Gefolgschaft von Anwendungsentwicklern, welche der Konzern seit langem mit qualitativ hochwertigen Entwicklungswerkzeugen versorgt 5 Als strategische Motivation von Microsoft, sein Engagement im mobilen Sektor zu forcieren vermutet Vakulenko die Absicherung seines Kerngeschäfts (Visionmobile 2010): The real motivation [instead of licensing fees] is the need to protect Microsoft core businesses of Windows and Office product lines. Mobile and smartphones became pervasive. Microsoft must have a convincing mobile 5 wie etwa das XNA Framework für die Entwicklung von Xbox und PC-Spielen.

25 2 Android und das "mobile Ökosystem" 25 story to prevent increasing numbers of users churning to Apple and Google product ecosystems. Auch dies ist ein Hinweis auf die zentrale, strategische Bedeutung der mobilen Plattform für die Zukunft der IT-Landschaft. Im Lichte dieser Entwicklungen ist es wenig verwunderlich, dass Nokia im Februar 2011 eine Kooperation mit Microsoft angekündigt hat und nun auf Windows Phone 7 setzen will. Eine Schlüsselstellung im Plattformwettbewerb kommt dabei der Anwendungsentwicklung zu (Spiegel Online 2011) Apps Definition Das Wort App ist ursprünglich eine Kurzform des Begriffs Application Anwendung im Kontext von Computersoftware. Seit der zunehmend starken Beliebtheit von zentralen Distributionskanälen für mobile Plattformen, den Mobile Application Stores, wird die Bezeichnung App im allgemeinen Sprachgebrauch synonym mit herunterladbaren Softwareprogrammen für Smartphones und Tablet-PCs verwendet. Dies geschah insbesondere seit 2008 der itunes App Store von Apple veröffentlicht wurde (The Computer Language Company Inc. 2011). Distributionspolitik Das Erweitern von Mobiltelefonen mit Zusatzsoftware ist kein Novum der Smartphone- Ära, jedoch schossen die Zahlen für veröffentlichte und heruntergeladene Programme erst mit dem itunes App Store in die Höhe. Apple verfolgt eine strikte Politik und stellt hohe Anforderungen an Inhalte, welche in diesem Kanal exklusiv für seine mobilen Geräte veröffentlicht werden sollen. Einen anderen Weg Zusatzprogramme für iphone und ipad zu erhalten gibt es nicht, außer man bedient sich einer inoffiziellen Modifikation des Geräts, dem sogenannten Jailbreaking. Googles Pendant zum App Store lautet Android Market, das Unternehmen überprüft dort veröffentlichte Programme nicht (Theiss 2010). Weitere Distributionsplattformen sind der Nokia Ovi Store und die Blackberry Appworld und der Microsoft Market, welche schleppend an Bedeutung gewinnen (Gartner 2011).

26 2 Android und das "mobile Ökosystem" 26 Bedeutung der Mobile Application Stores für den Markt Symbians schwindende Rolle ist nicht zuletzt im verpassten Anschluss der Plattform an die App-Welle begründet, stellt der Autor eines Spiegel Online Artikels vom fest (Spiegel Online 2011): Nokia baute unverändert solide Telefone, verpasste es aber, Software- Entwickler für seine Plattform Symbian zu begeistern. Ohne populäre Apps blieben die Nutzer weg. [ ] Bei den Diskussionen um Nokias Kehrtwende geht es auf dem Mobile World Congress in Barcelona dementsprechend meist nur um eine Frage: Schaffen die beiden [Nokia und Microsoft] es, genug Entwickler für den neuen Hoffnungsträger Windows Phone 7 zu gewinnen oder nicht? In einem Pro/Contra Artikel des Wirtschaftsmagazins Bloomberg Business Week wird die Bedeutung von Apps für den mobilen Markt diskutiert. Shahar Kamitz, Geschäftsführer der New Yorker Firma WorkLight stellt fest, das Interesse für das iphone sei weiterhin ungebrochen obwohl es technisch gesehen der Konkurrenz unterlegen ist. Als Grund nennt er die Verfügbarkeit von Apps, zusammen mit einem hervorragend gestalteten App Store. Er benennt die Unterstützung eines enabled eco-system of developers, also eines leistungsfähigen Netzwerkes von Entwicklern als Schlüssel zum Erfolg einer mobilen Plattform (Bloomberg BusinessWeek 2010). Usability-Koryphäe Jakob Nielsen hingegen relativiert den App-Boom und dessen mutmaßliche Schlüsselstellung. Laut seinen Nutzerstudien wird ein Großteil der heruntergeladenen Programme gar nicht genutzt. Er führt weiterhin aus, entscheidend sei die total user experience, die ganzheitliche Erfahrung des Anwenders welche sowohl auf Hardware, Software und dessen nahtlose, integrierte Bedienbarkeit fußt. Eine Anwendung kann nur Erfolg haben, fasst Nielsen zusammen, wenn sie nutzbringend in den Kontext ihrer Plattform gebettet ist und der einzige Weg dies zu fördern sind effektive Richtlinien der Gestaltung von Benutzerschnittstellen und deren Einhaltung 6 (Bloomberg BusinessWeek 2010). 6 Kapitel 4 der vorliegenden Arbeit beschäftigt näher sich mit diesem Thema

27 2 Android und das "mobile Ökosystem" 27 Zahlen und Trends Im Folgenden einige Ergebnisse des im Januar 2011 vorgelegten Marktrückblickes Developer Economics 2010: Abbildung 6: Genutzte Entwicklungsplattformen im Frühjahr 2010 (Visionmobile 2011) Es bestätigt sich das große Interesse der Entwicklergemeinde an ios und Android, jeweils 60% bzw. 50% aller Entwicklerteams produzieren unter anderem für diese Plattform. Als Gründe dafür nennt die Veröffentlichung, dass mittels Apples Applikationsframework für ios, ansehnliche Benutzerschnittstellen in kurzer Zeit gestaltet werden können und der App Store den besten Verteilungspunkt für den Verkauf von Applikationen darstellt (Visionmobile 2011). Noch auffälliger wird die Konzentration der Entwicklergemeinde auf ios und Android an Hand von Abbildung 7. Die Grafik betrachtet alle verkauften mobilen Geräte bis zum 3. Quartal 2010.

28 2 Android und das "mobile Ökosystem" 28 Abbildung 7: Disparität zwischen Plattformreichweite und verfügbaren Apps im 2.Quartal 2010 (Visionmobile 2011) Die bis dato am weitesten verbreitete Plattform, Java ME hat proportional gesehen einen verschwindend geringen Anteil an den verfügbaren Apps zum Messzeitpunkt dieser Übersicht, dem 2.Quartal Der Löwenanteil der Programme zielt auf die Plattformen Android und ios welche vergleichsweise eine geringe Marktdurchdringung in der Gesamtbasis mobiler Geräte aufweisen (Visionmobile 2011). Weitere Zahlen des Marktforschungsunternehmens Gartner schätzen den Umsatz von Mobile Application Stores auf 5,2 Milliarden US-Dollar, inklusive App-interner Werbeeinnahmen. Weiterhin wird ein starker Anstieg des Umsatzes prognostiziert, 15 Milliarden US Dollar im Jahr 2011 mit 17.7 Milliarden Downloads sollen umgesetzt werden und der Gesamtzuwachs der Umsätze im Vergleich von 2010 und 2014 soll über 1000% betragen. Der Anteil der Umsätze durch Werbeeinnahmen und Paid Content werde dabei stark zunehmen (Gartner 2011).

29 3 User Experience Design im mobilen Kontext 3.1 Grundlagen Der Begriff User Experience Definition User Experience (UX) Nutzererfahrung beschreibt die positiven bzw. negativen Gefühle, welche die Anwender mit einem interaktiven System während dessen Benutzung assoziieren. Von Bedeutung sind in dieser breit gefächerten Betrachtungsweise Aspekte wie Benutzerfreundlichkeit, Nutzwert, Einfachheit und Effizienz eines Systems. Geprägt wurde der Begriff von Donald Norman (Gube 2010) 7. Verbreitung Die Verwendung der Begriffe User Experience und User Experience Design impliziert in der Fachwelt einen gehobenen Anspruch an Benutzerfreundlichkeit und den Fokus auf Nutzerbedürfnisse, insbesondere in der jüngeren Web- und mobilen Anwendungsentwicklung. Es kann vermutet werden, dass die Verbreitung des relativ neuen Begriffes User Experience Design einer gewissen Trendwirkung zu Grunde liegt. Sichtbar wird dies ansatzweise durch eine ad-hoc Analyse mittels des Statistik Tools Google Trends zu den Stichwörtern Usability und User Experience Design (siehe Abbildung 8 bzw. Abbildung 9). 7 Die Methoden dieser Disziplin werden in der vorliegenden Arbeit im Zusammenhang mit dem mobilen Kontext näher erläutert (vgl. Kapitel 3.2: Mobiler Kontext )

30 3 User Experience Design im mobilen Kontext 30 Abbildung 8: Google Trends Statistik: Suchvolumen für User Experience Design (Google, Inc. 2011). Abbildung 9: Google Trends Statistik: Suchvolumen für Usability (Google, Inc. 2011). Folgendes ist zu beobachten: Das Nutzersuchvolumen nach UXD steigt 2009 sprunghaft an. Davor war der Begriff offenbar gänzlich unbekannt Das Interesse an Ressourcen zum Stichwort Usability nimmt stetig ab, zu Gunsten von User Experience Design

31 3 User Experience Design im mobilen Kontext 31 Die untere Hälfte des Ergebnisfensters approximiert jeweils das Volumen an Erwähnungen aus Nachrichtenquellen zum jeweiligen Stichwort. Interessanterweise nimmt die Häufigkeit beider Begriffe hier zeitgleich zu. Ein Hinweis auf ein verstärktes Medieninteresse bezüglich der Themen. Abgrenzung Usability / UX Die Disziplinen UXD und Usability Engineering sind nicht synonym zu verwenden, obwohl dies häufig stattfindet. Der wesentliche Unterschied liegt in der möglichen Quantifizierbarkeit der Methoden von Usability Engineering. Sinnvoll scheint aber die Verwendung des Begriffes UXD als Sammelbegriff verschiedener Teildisziplinen und der Schichten von Nutzererfahrung (vgl. UX Bedürfnispyramide im Folgeabschnitt) Nutzerbedürfnisse als Designansatz Ein verstärkter Fokus auf Nutzerbedürfnisse als wesentlicher Bestandteil des Designprozesses schlägt sich in zahlreichen Veröffentlichungen nieder. Zur Veranschaulichung wird häufig die Form einer Bedürfnis-Hierarchie gewählt, oft dargestellt in der Form einer Pyramide 8. In seinem Vortrag Creating Pleasurable Interfaces kommt Stephen Anderson zu folgender Darstellung in Abbildung 10. Laut dem Unternehmer fand eine merkliche Verbreitung einer ganzheitlichen Perspektive bereits seit 1996 statt, zum Beispiel durch die Forschungen Jakob Nielsens. Zur praktischen Anwendung kam sie dann verstärkt im Zuge des Web 2.0 (Anderson 2007, S. 15). 8 Diese Form der Darstellung erinnert stark an die 5-stufige Maslowsche Bedürfnispyramide, vgl. A.H. Maslow, A Theory of Human Motivation, Psychological Review 50, 1943

32 3 User Experience Design im mobilen Kontext 32 Abbildung 10: UX Pyramide: Anforderungen an ein interaktives System, orientiert an hierarchisch strukturierten Nutzerbedürfnissen - Quelle: (Traynor 2008) nach (Anderson 2007) In dieser Anordnung sind aufeinander aufbauende Erwartungsebenen dargestellt, welche Benutzer an ein interaktives Systeme richten. Demnach ist Bedienbarkeit (Usability) eine Grundvoraussetzung für Erwartungskonformität, die sich bereits an der Grenze zum Subjektiven bewegt. Ist sie nicht gegeben, kann keine positive Nutzererfahrung erzielt werden. Mit zunehmender Abstraktion, verstärkt sich die subjektive, quantitativ unzureichend fassbare Dimension des Nutzererlebens und somit auch die des vorangegangenen Entwicklungsprozesses.

33 3 User Experience Design im mobilen Kontext 33 Ein ganzheitlicher Entwicklungs- und Designansatz im Sinne des User Experience Design, versucht den Bedürfnissen des Nutzers auf allen Ebenen entgegenzukommen User Interface Design nach Shneiderman UXD integriert als Begriff alle Teildisziplinen und Erkenntnisse welche die Interaktion von Menschen mit interaktiven Systemen zum Gegenstand haben. Eines dieser Bereiche, die HCI-Forschung hat folgenden viel zitierten Satz an Prinzipien zur Gestaltung benutzerfreundlicher Schnittstellen hervorgebracht. Diese Konzeptionsregeln 9 tauchen in ähnlicher Form in vielerlei anderen Richtlinien, Workshops und Empfehlungen auf (Shneiderman 1997). Konsistenz: Handlungsabfolgen sollen in vergleichbaren Situationen wiederverwendet werden können. Durchgängige Terminologie und Beschriftung in allen Dialogen Abkürzungen für erfahrene Benutzer: Beschleunigung häufiger Aktivitäten durch Funktionstasten und Makros Hilfreiches Feedback: Reaktion des Systems, das eine Eingabe oder Befehl entgegengenommen wurde. Damit bereit für nächste Aktion. Abgeschlossenheit von DiaIogen: Gruppieren von Aktionsabfolgen zu einer abgeschlossenen Einheit mit einem eindeutigen Anfang und Ende der Operation. Abgeschlossene Teilaufgaben rufen eine positives Gefühl hervor, was den Arbeitsfluss unterstützt Fehlerbehandlung: Im Idealfall schwerwiegende Fehler durch Nutzer konzeptionell von vorneherein ausschließen oder nachvollziehbare Behandlungsmechanismen anbieten Rückgängig machen von Aktionen ermöglichen: Schafft Vertrauen in die Benutzung der Anwendung und fördert das Erlernen neuer Funktionen Gefühl von Kontrolle: Der Anwender ist Initiator von Vorgängen innerhalb des Systems 9 Vgl. hierzu Entwurfsmuster in Abschnitt 4.1: Design Patterns in der vorliegenden Arbeit.

34 3 User Experience Design im mobilen Kontext 34 Entlastung des Kurzeitgedächtnisses: Gruppieren von Informationen und Interaktionen zu übersichtlichen Gruppen 3.2 Mobiler Kontext Besonderheiten der mobilen Anwendungsentwicklung Der Kontext spielt für das Medium in dem mobile Applikationen und Dienstleistungen genutzt werden eine entscheidende Rolle. Damit ist gemeint dass sich Interaktion im Rahmen der Möglichkeiten des mobilen Endgeräts wesentlich anders gestaltet als beispielsweise an einem Desktopcomputer. Es bedeutet auch, dass die Möglichkeiten einer Anwendung, dem Anwender einen Nutzwert zu bieten, sich völlig neu gestalten. Es genügt daher nicht, erfolgreiche Konzepte der Desktopwelt auf Smartphone-Auflösung zu verkleinern, sondern es muss sich der Kontext zu Nutze gemacht werden. Ein veränderter Kontext ist im Hinblick auf mobile Systeme gleich auf mehrere Weisen auszumachen und zu berücksichtigen (Fling 2009, S. 52ff): Örtlicher Kontext: Die physische Umgebung in der sich der Nutzer befindet hat Auswirkung auf Möglichkeiten der Nutzung und Nutzungsangebote zum Beispiel durch Location Based Services via GPS und Internetverbindung Kontext des Mediums: Mobile Anwendungen können einen Nutzwert bieten, der auf andere Art nicht verfügbar ist. Zum Beispiel ortsunabhängige Anbindung an soziale Netzwerke. Produktivsoftware hingegen, wie Textverarbeitungsprogramme, ist auf Grund von Eingabemöglichkeiten und Bildschirmgröße schwer nutzbringend anzubieten. Modaler Kontext: Mit welcher Aufmerksamkeit und geistigen Verfassung begegnet der Nutzer der mobilen Applikation? Welche Erwartungen hat er im Vergleich zu einem anderen Typ von Anwendung? Es können für die Konzeption von mobilen Anwendungen folgende Fragen von Bedeutung sein (Fling 2009, S. 116): Wer ist die Zielgruppe, welche Annahmen können über ihre Erwartungen und Verhaltensweisen getroffen werden?

35 3 User Experience Design im mobilen Kontext 35 An welchem Ort befindet sich der Nutzer wenn er interagieren will. Hat er nur eine geringe Zeitspanne zur Verfügung, zum Beispiel 5 min während er auf einen Zug wartet oder nimmt er sich Zeit? Welches sind weitere Umgebungsfaktoren? Wird das System bei zu viel Umgebungslicht eingesetzt? Was passiert bei unterbrechender Internetverbindung? Wird das Gerät im Portrait, Querformat oder in der Hosentasche verwendet? Diese und ähnliche Fragen können einen großen Einfluss auf das optimale Zieldesign haben Zielauflösungen für mobile Endgeräte Eine große Herausforderung des Webdesign ist die Heterogenität an Bildschirmauflösungen von Anwendern, welche berücksichtigt werden muss. In der mobilen Anwendungsentwicklung ist dieses Problem noch bedeutender. Im Allgemeinen ist die verfügbare Bildschirmfläche deutlich kleiner als bei Desktop Systemen. Im Folgenden eine Grafik welche die Auflösung zweier moderner Geräte aus beiden Welten in Relation zeigt. Als Beispielexemplare zum Vergleich dienen ein HTC Desire HD Smartphone (Abbildung ) und ein typischer LG W2443T Widescreen Monitor für PC ( Abbildung ): Abbildung 11: LG W2443T PC-Monitor 1900 x 1080 (Full HD) Abbildung 12: HTC desire HD 480 x (HTC 2011) 11 (amazon 2011)

36 3 User Experience Design im mobilen Kontext 36 Abbildung 13: Relation von Bildschirmauflösungen Smartphone und PC-Bildschirm Auflösung und Pixeldichte Die gezeigte Relation entspricht nicht dem Verhältnis der physikalischen Dimensionen der Geräte. Dies ist mit einer unterschiedlichen pixel density Pixeldichte begründet, die mit ppi (pixels per inch) angegeben wird. Diese ergibt sich aus der Anzahl aufeinanderfolgender Pixel entlang einer Dimension, dividiert durch die räumliche Ausdehnung des Bildschirms in Zoll. Im diesem Beispiel liegt sie beim HTC Smartphone mit 217 ppi 12 über dem des LG Bildschirms. Dadurch kann die Pixelausdehnung auf kleineren physikalischen Raum untergebracht werden, was ein schärferes Bild ermöglicht. Auch diese Größe ist bei mobilen Endgeräten nicht einheitlich (mobiforge 2009). Typische Auflösungen Die Gerätedatenbank Device Atlas bietet umfangreiche Statistiken als Dienstleistung an wurde die Grafik auf Abbildung 14 auf der zugehörigen Entwicklercommunity mobiforge veröffentlicht. Es sind zwei Schaubilder zu sehen, welche Bandbreite und Häufigkeit gängiger Auflösungen in der Breite zeigt (mobiforge 2009). 12 (Areamobile 2011)

37 3 User Experience Design im mobilen Kontext 37 Abbildung 14: Verteilung von Bildschirmauflösung in der Breite von mobilen Endgeräten nach Häufigkeit und aufsteigend nach Größe sortiert Die Auswirkungen dieser Heterogenität auf das User Interface Design sind Gegenstand von Kapitel Abschnitt: Screendesign für mobile Anwendungen Interaktion mit Touchscreens Grundlagen Berührungsempfindliche Displays ermöglichen eine direkte Handhabe von Inhalten auf dem Bildschirm ohne indirekte Werkzeuge wie Maus oder Tastatur. Ein wesentlicher Vorteil ist ein dynamisches User Interface. Im Vergleich zu Hardwaretasten und Steuerkreuzen, können sie auf den jeweiligen Kontext der Applikation zugeschnittene Interaktionsmöglichkeiten anbieten um die konkrete Aufgabe zu unterstützen (Theiss 2010, S. 36). Hinsichtlich Technologie und Eigenschaften unterscheidet man für Smartphones zwei gängige Typen von Touchscreens (Nokia 2010): Resistiv: Kann mit dem Finger oder einem Stiftwerkzeug bedient werden. Robuster als andere Touchscreen-Technologien Kapazitiv: Können nur durch direkten Fingerkontakt angesprochen werden. Hohe Bildschärfe.

38 3 User Experience Design im mobilen Kontext 38 Eigenschaften direkter Kontrolle Die Interaktion mit Touchscreens ermöglicht eine wesentlich direktere und natürlichere Kontrolle des Systems. Hierzu im Vergleich das klassische Mensch-Maschine- Schnittstellenmodell in folgender Grafik (Abbildung 15) nach Stapelkamp: Abbildung 15: Schichten der klassischen Mensch-Maschine Interaktion (Stapelkamp 2010, S. 152). Bei der touchbasierten Interaktion, entfällt je nach Interaktionsdesign ein Großteil der Schichten zwischen Eingabe der Hände und Inhalte bzw. Funktionen. Dies ermöglicht UI Designs die deutlich intuitiver und immersiver sind (Nokia 2010). Einschränkungen Touchinteraktion hat allerdings auch eine Reihe von Einschränkungen welche beim Interaktionsdesign berücksichtigt werden müssen (Nokia 2010: Touch-enabled vs. touchoptimised; Stapelkamp, S. 254):

39 3 User Experience Design im mobilen Kontext 39 Das Eingeben von großen Datenmengen ist sehr ineffizient. Der Grund: On- Screen-Keyboards gelten Hardwaretastaturen hinsichtlich Ergonomie und Effizienz als deutlich unterlegen 13 Physikalische Faktoren wie das Tragen von Handschuhen oder lange Fingernägel können die Bedienbarkeit stark einschränken Die Auswahl mit dem Finger ist wesentlich unpräziser als mit einer Computermaus, daher müssen die Ziele sehr viel größer sein, was das Problem des Platzmangels auf mobilen UIs weiter verschärft Das Sichtbarmachen kontextueller Menüs ist problematisch, es gibt weder ein mouse-over noch einen Rechtsklick. Während der Eingabe auf dem Touchscreen werden Teile des Bildschirms verdeckt, welche für die aktuelle Aufgabe relevant sein könnten. Diese Einschränkungen ergeben eine ganze Reihe konkreter Anforderungen für touchbasierte Interaktionsdesigns. Auf diese wird in den folgenden Kapiteln näher eingegangen. 13 In einem Interview der Zeitschrift Connect 2010/11 zum Thema Smartphone Usability äußert Prof. Dr. Jan Borchers (Theiss 2010, S. 41): Für das reine Schreiben ist der Touchscreen die dümmste Idee über überhaupt. Vor dem Drücken einer Taste möchte der Finger diese fühlen. Dieses Pre-Feedback ist sehr wichtig, und das bietet kein Touchscreen.

40 3 User Experience Design im mobilen Kontext Design mobiler Applikationen Marktstrategie für eine erfolgreiche mobile Anwendung Abbildung 16: Screenshot von Angry Birds, Rovio mobile, 2009 Mit dem großen Erfolg von Mobile Application Stores, es wird laut Gartner 17 Milliarden Downloads und 15,9 Milliarden Dollar Umsatz erwartet, ist auch der Konkurrenzdruck auf diesem Markt überaus hoch. Rovio Mobile aus Finnland, Entwickler des beliebten Gelegenheitsspiels Angry Birds (vgl. Abbildung ) benötigte für seinen Erfolg 15 Spiegel Online 50 gescheiterte Anläufe. laut Auf Grund des großen Wettbewerbs sind ein Großteil der Applikationen kostenlos und Hersteller müssen hoffen, mit Premiumversionen, Werbeeinnahmen und Paid Content Umsatz zu generieren (Spiegel Online 2011). Um sich von der Konkurrenz abzusetzen und wirtschaftlich erfolgreich zu sein, sind für den mobilen Kontext optimierte Strategien erforderlich (Fling 2009). Das bedeutet: eine hohe Qualität der Anwendung im Sinne positiver Nutzererfahrung, zugeschnitten auf den mobilen Kontext ein kostengünstiges Produktionsverfahren das Abwägen verschiedener Monetarisierungsmodelle Fling appelliert in diesem Zusammenhang für [ ] den Aufbau eines nachhaltigen Geschäftsmodells, welcher die unbefriedigten Bedürfnisse von Benutzern als Kern hat. Er fasst zusammen, man habe die beste Chance am Markt erfolgreich zu sein, indem man den Markt selbst prägt - mit einer perfekt umgesetzten Innovation. Die Anforderungen und Chancen des mobilen Kontextes müssen hinreichend berücksichtigt 14 (Rovio Mobile 2009) Millionen Downloads der kostenpflichtigen Version bis Oktober 2010

41 3 User Experience Design im mobilen Kontext 41 werden, um dem Nutzer einen bis dahin nicht gekannten Wert zu bieten. Die Bedürfnisse des Anwenders 16 seien das Fundament einer Marktstrategie für mobile Applikationen (Fling 2009) Informationsarchitektur für mobile Systeme Eine tragende Säule jedes interaktiven Systems ist seine Informationsarchitektur (IA), die Systematik nach der Daten und Interaktionsmöglichkeiten organisiert sind. Sie umfasst (Fling 2009, S. 89ff) 17 : Die Struktur eines Informationsangebots Die Gesamtheit von Organisationseinheiten, Benennungen, Such- und Navigationsmöglichkeiten Die Gestalt der Informationen hinsichtlich Usability und Auffindbarkeit Einfachheit Anwendungen im mobilen Kontext zeichnen sich durch ihre Einfachheit aus. Es sollte alles, was nicht den Kernzielen der Befriedigung von Nutzerbedürfnissen dienlich ist, weggelassen werden. Jedes Informationsangebot muss während der Konzeption darauf geprüft werden, ob es im erwarteten Kontext der Benutzung (örtlich, Geräteeigenschaften, modal) immer noch relevant und nutzbar ist. Zur Einfachheit gehören auch prägnante, aussagekräftige und konsistente Benennungen. Fling führt weitere detaillierte Empfehlungen an, welche häufig als Ausprägungen Shneidermans UI-Prinzipien erkennbar sind (Vgl. Einheitlichkeit; Entlastung des Kurzzeitgedächtnisses nach Shneiderman in Kapitel 3.1.3). Fling empfiehlt zur Konzeption einer Informationsarchitektur ein visuelles Layout nach der Clickstream Methode, wie auf Abbildung 17 gezeigt: 16 Vgl. Kapitel Zitiert nach Morville et al, Information Architecture for the World Wide Web, O'Reilly Media,

42 3 User Experience Design im mobilen Kontext 42 Abbildung 17: Navigationspfade einer Applikation als Clickstream (Fling 2009, S. 99) In dieser Darstellung ist das Angebot einer Informationsarchitektur aus der Sicht des Benutzers dargestellt. Es hält die aktuelle Iteration des Konzeptionsprozesses auf übersichtliche Weise fest. 18 Fling betont: Im Unterschied zu klassischen Interaktions- und Zustandsdiagrammen sei in dieser Perspektive die Gestaltung der Nutzererfahrung auf konzeptioneller Ebene das Ziel, nicht eine Spezifikation des Systemablaufes und seiner Randbedingungen (vgl. Fling 2009, S. 100). 18 Artefakte des Designprozesses wie diese (oder auch Dokumentationen, Styleguides, Wireframes etc.) werden im angelsächsischen Raum auch Deliverables lieferbare Teilergebnisse genannt.

43 3 User Experience Design im mobilen Kontext Screendesign für mobile Anwendungen Grundlagen Als Screen Design bezeichnet man die visuelle Ausgestaltung der gesamten Applikation, inklusive Kontrollelemente und sichtbarer Inhalte. Hierfür werden in der Regel digitale Grafikwerkzeuge wie Adobe Photoshop benutzt. Laut (Fling 2009, S. 109) stellt das visuelle Design die dritte tragende Säule einer positiven Nutzererfahrung. Dabei zeigt sich die Notwendigkeit einer flexiblen, mehrgleisigen Konzeption. Eine größere Bandbreite an möglichem Nutzungskontext, neue Formen der Interaktion und alternative Marktstrategien bringen zusätzliche Variablen ins Spiel. Fling empfiehlt daher an mehreren Stellen seines Werkes, einen zu hohen Anspruch an Präzision in Konzept und Ausgestaltung zurückzufahren und stattdessen eine best possible [user] experience for the device, also die bestmögliche Nutzererfahrung anzustreben welche im Kontext des jeweiligen Gerätes möglich ist. Bedeutung des Screendesigns Ein Grund für die fantastisch anmutende Zahl von Downloads von Mobile Application Stores ist der große Anteil kostenloser Angebote, mit teilweise sehr geringem Nutzwert. Daher haben die Nutzer mobiler Anwendungen die Tendenz, eine große Zahl ihrer heruntergeladenen Apps gar nicht erst zu benutzen oder nur ein einziges Mal auszuprobieren 19. Bevor Nutzer aber überhaupt erst zur Anwendung kommen, haben die Anbieter in erster Linie nur einen Namen und ein Icon zur Verfügung um das Interesse der Nutzer zu wecken (siehe Abbildung 18). Im Folgenden können Screenshots und Beschreibungstexte angeboten werden 20. Das Screendesign stellt (neben dem Titel) den ersten Kontakt zum Anwender her und dient als Entscheidungsgrundlage ob dieser es überhaupt auf einen Download ankommen lässt 21. Ein qualitativ hochwertiges Screendesign ist demnach ein gutes Mittel sich im Wettbewerb durchzusetzen. Es erzeugt 19 Vgl. (Bloomberg BusinessWeek 2010) 20 Seit 2011 besitzt der Android Market ein eigenes Web Frontend was das Durchsuchen komfortabler gestaltet, als der Zugriff über das Endgerät und mehr Möglichkeiten zum Marketing der eigenen App bietet.mit einem Kauf steht die Software anschließend dem Gerät zum Download zur Verfügung. 21 Dies gilt insbesondere wenn der Nutzer nicht gezielt mittels Stichworten nach einer App sucht sondern den Katalog durchstöbert. Weitere Kriterien können Empfehlungen, Testberichte, Bewertungen oder der Preis sein.

44 3 User Experience Design im mobilen Kontext 44 beim Interessenten die Erwartungshaltung, dass sich hinter einem wertig anmutenden System auch ein ebenso hoher Nutzwert 22 verbirgt. Dabei ist der erste Eindruck entscheidend (Fling 2009, S. 109). Abbildung 18: Screenshot des Android Market 23 Basierend auf (Fling 2009, S. S ) werden in diesem Abschnitt die wichtigsten Aspekte visuellen Designs vorgestellt und wie sich der mobilen Kontext auf sie auswirkt. 22 Damit ist ebenso Unterhaltungswert gemeint, zum Beispiel bezüglich eines Spiels 23 Android Market Place, Stand: 26. Februar, Erhältlich im Internet unter:

45 3 User Experience Design im mobilen Kontext 45 Message Unter der Message Botschaft versteht man die unmittelbare Gesamtheit der Wirkungen aller visuellen Elemente auf den Nutzer. Das Ziel ist das Schaffen einer positiven Einstellung des Anwenders, hinsichtlich des Nutzwertes der Applikation, welche diese Botschaft ausstrahlt. Eine Botschaft in diesem Sinne transportiert sich dabei einerseits über ästhetisches Empfinden. Weiterhin zielt sie auf ein ungestilltes Bedürfnis welches beim Nutzer eine Kaufentscheidung auslösen kann 24. Beispiel: Hat eine Applikation einen dedizierten Nutzwert, e.g. eine Navigationsanwendung, dann muss sie auch als solche wirken, um Ihren Nutzwert sichtbar zu machen. Beispielsweise könnte sie durch das prominente Präsentieren von Kartenmaterial signalisieren: Hier geht es um Navigation und damit auf ein Bedürfnis des Nutzers treffen welches lauten könnte: Mit dieser App komme ich schneller und sicherer an mein Reiseziel. Gelingt es, dieses Bedürfnis bezüglich der Erwartungshaltung auch zu erfüllen, ist die Erfahrung bei der Benutzung folglich positiv. Die Botschaft einer Applikation ist demnach ein Nebenprodukt, welches sich als Resultat des Entwicklungsprozesses herausstellt und im Einzelfall höchst subjektiv sein kann. Allerdings ist die Kenntnis dieser Wirkung von Vorteil für ein optimiertes Ergebnis. Look and Feel Das Look and Feel ist eben jener Teil der Benutzerschnittstelle auf den Gerätehersteller mit ihren Eigenentwicklungen, den Skins 25, abzielen. Während der Begriff Botschaft ein allgemeines Konzept ist, versteht man unter Look and feel vielmehr eine Untermenge dieser Gesamtwirkung, nämlich den Einsatz und die konkrete Ausgestaltung von Kontrollelementen und Inhalten. Konsistenz und das Ansprechen ästhetischen Empfindens tragen zu einer positiven Nutzererfahrung bei und erzeugen Vertrauen. Hierzu ein Beispiel: Apple bietet mit seinem Applikationsframework auch den Zugriff auf UI Elemente des Betriebssystems, welche nahtlos in die eigene Applikation integriert werden können. Das Ergebnis wird auch als Shared Look bezeichnet. Die Vorteile für 24 Bedürfnisse stellen den Kern einer mobilen Marktstrategie nach Fling dar, vgl. Kapitel 3.3.1: Marktstrategie für eine erfolgreiche mobile Anwendung in dieser Arbeit 25 Vgl. Kapitel 2.1.6

46 3 User Experience Design im mobilen Kontext 46 Entwickler sind geringere Entwicklungskosten für ansprechende Ergebnisse 26, zudem profitieren diese durch das Platzieren vertrauter Elemente vom vorhandenen Empfindungspotential welche die Nutzer bereits mit der Betriebssystem-Schnittstelle verbinden 27. Diese erleben im Gegenzug eine konsistente Erfahrung innerhalb des Apple-Universums. Layout Die Anordnung von funktionalen und inhaltlichen Elementen steuert, wie der dargebotene Inhalt visuell vom Nutzer verarbeitet wird. Es handelt sich beim Layout also um die konkrete Übersetzung der Informationsarchitektur in ein grobes Konzept. In diesem Stadium des Designprozesses ist zu beachten, dass sich Diskussionen ausschließlich auf Fragen des Layouts beziehen sollten und nicht etwa Vorlieben zu Farben oder Typografie thematisiert werden. Aus diesem Grund hat sich eine Technik zur Konzeptionierung verbreitet, die Wireframing, oder auch Low-Fidelity Prototyping genannt wird. Dabei werden Layout Konzepte aus einem Pool bewusst grob gestalteter Elemente zusammengefügt. Abbildung 19: Vorstellung des digitalen Wireframing-Werkzeugs Balsamiq (Quelle: 26 Wie in der Marktanalyse gezeigt hat sich dies als ein Erfolgsfaktor für den itunes Appstore herausgestellt. Vgl. Kapitel Unter der Annahme das diese Erfahrung positiv ist

47 3 User Experience Design im mobilen Kontext 47 Bei dieser Art Visualisierung ist auch klar dass sich Text und Grafiken in einem nicht finalen Stadium befinden. Damit soll ein zielgerichtetes, objektiveres Feedback erleichtert werden. Typografie Die Auswahl an Schriftarten die auf Endgeräten zur Verfügung steht, ist vergleichsweise immer noch sehr gering, zudem gibt es keinen kleinsten gemeinsamen Nenner an Schriftarten von denen man ausgehen kann, dass sie bei der Ausführung einer Applikation zur Verfügung stehen werden. Damit ist ein konsistentes und vorhersehbares Endergebnis auf allen Geräten praktisch unmöglich. Der wichtigste Aspekt ist hier vor allem das Sicherstellen einer guten Lesbarkeit. (Fling 2009, S. 133) stellt folgende Empfehlungen zur Lesbarkeit im mobilen Kontext zusammen: Hoher Kontrast: Wirkt potenziell starkem Umgebungslicht entgegen Zeilenabstand: Mobile Endgeräte werden auf eine gewisse Entfernung zum Betrachter gehalten, während Schriften auf Grund des eingeschränkten Screen Real Estates zu kleinen Größen tendieren. Mit einem erhöhten Zeilenabstand wird das Ansteuern der nächsten Zeile unterstützt Whitespace: Die verfügbare Fläche dehnt sich oft bis zum Rand des Gerätes aus. Auf der linken Seite wird daher zu Gunsten der Lesbarkeit ein Mindestabstand von 3-4 Zeichen empfohlen Unterschiedliche Schriftfamilien: Es wird eine serifenlose Schrift für Bezeichnungen auf Interaktionselementen und Serifenschriftarten für lange und kompakte Textblöcke empfohlen Die steigenden Rechenkapazitäten und Auflösungen von Smartphones haben den Gestaltungsspielraum für Schrift deutlich verbessert. Ein Beispiel hierfür ist der Einsatz von Antialiasing. Bei einer Variante dieser Technik, dem Subpixel-Antialiasing, werden physikalischen Teilkomponenten umgebender Bildschirmpunkte (Rot, Grün, Blau) für das Antialiasing mitgenutzt. Dadurch kann für die Gesamtwirkung der gerenderten Schrift eine höhere Schärfe erzielt werden. Siehe hierzu die Darstellung auf Abbildung 20.

48 3 User Experience Design im mobilen Kontext 48 Abbildung 20: Varianten der Textdarstellung auf Bildschirmen Flexibles Design für verschiedene Auflösungen In der Webentwicklung ist das Thema Multiscreen development längst ein Thema. Layouts müssen auf einer großen Bandbreite verschiedenster Auflösungen korrekt aussehen, zumindest aber das Benutzen der Seite ermöglichen. Erreicht wird dies beispielsweise durch fließende Layouts die mittels prozentualer Angaben einzelner Elemente eine dynamische Ausdehnung ermöglichen. Im mobilen Kontext ist dieser Anspruch noch deutlich höher. Es gibt eine größere Anzahl diverser Geräteklassen, hinzu kommt die Möglichkeit auf vielen Geräten, spontan vom Portraitmodus ins Querformat zu wechseln, auch dies muss schon während des Entwurfes der Informationsarchitektur berücksichtigt werden.

49 4 Entwurfsmuster für Android UIs 4.1 Grundlagen Design Patterns Definition Das Konzept der Design Patterns Entwurfsmuster entstammt der Gebäudearchitektur und ist auch in der Softwareentwicklung bekannt. Es geht dabei um die generische Lösung wiederkehrender, komplexer Gestaltungs- bzw. Entwicklungsprobleme. Ein Design Pattern ist nach einem einheitlichen Schema dokumentiert, zum Beispiel: Name Problem Beschreibung Empfehlungen Beispiel Auch im User Interface Design wird an der formalen Spezifikation von konzeptionellen Entwurfsmustern geforscht, Granlund et al weisen in ihrer Forschungsarbeit auf wesentliche Unterschiede zu Software Designpatterns hin und legen einen durch Muster gestützten Entwurfsprozess nahe, wie in Abbildung 21 veranschaulicht (Granlund et al 2001). Abbildung 21: PSA: Pattern Supported Approach für User Interface Design (Bildquelle: Granlund et al 2001, S. 2)

50 4 Entwurfsmuster für Android UIs Nutzen von Design Patterns im Designprozess Muster werden von Gestaltern unbewusst und laufend angewandt. Vorteilhaft für einen produktiven Designprozess kann eine formalisierte Handhabe sein, da sie Gestaltungswissen auf eine einheitliche Form komprimiert und nutzbar macht (Granlund et al 2001, S.3). Das Argumentieren an Hand von Mustern ist nützlich für die Kommunikation mehrerer, am Entscheidungsprozess beteiligter Personen. Granlund et al führen an, dass Designpatterns nur ein Bestandteil des Lösungsweges für ein optimales Zieldesign sind, nicht aber die Lösung selbst. Die Abgrenzung zu Design Guidelines 28 Gestaltungsrichtlinien besteht darin, dass diese Art Richtlinien größtenteils den Fokus auf konkrete Ausgestaltung von GUI Elementen richten, einen statische Charakter haben und die konzeptionelle, generische Ebene vermissen lassen. 4.2 UI Patterns nach Gestaltungsrichtlinien für Android- Systeme Richtlinien Überblick In vorangegangenen Kapiteln wurde gezeigt dass eine Konsistenz als Qualitätsmerkmal von Benutzerschnittstelle von großer Bedeutung für den Erfolg einer Plattform ist. Entwickler von mobilen Plattformen wie Apple, Microsoft und Google veröffentlichen daher Richtlinienkataloge für Entwickler um diese Konsistenz innerhalb ihres Plattform-Universums zu fördern. Anders Rosenquist stellt folgende Auswahl von Richtlinien als besonders ergiebig vor (Rosenquist 2011):.mobi dev guidelines mobile websites 29 Apple HI guidelines 30 Android UI guidelines Vermutlich beziehen sich die Forscher auf eine Art von Richtlinie, welche auch unter dem Begriff Styleguide geläufig ist. Es gibt keine einheitliche Definition in den verfügbaren Quellen 29 Erhältlich im Internet unter: 30 Erhältlich im Internet unter:

51 4 Entwurfsmuster für Android UIs 51 WebOS HI guidelines 32 Windows Phone 7 guidelines Entwurfsmuster einer Android-App Auf der Google i/o-konferenz stellen Nesladek et al des Android Developer Teams Richtlinien in Form einer Sammlung von Design Patterns für Android Applikationen vor 34. Es wird unter anderem ein generisches bespringt, eine Blaupause für Eigenentwicklungen gezeigt. Nach Grandlund et als Terminologie (aus Abbildung 29 auf S.58) wäre dies ein Beispiel für ein Structural & Navigational Design Pattern. Weiter folgen konkrete GUI Design Patterns und Empfehlungen zu deren Einsatz (Nesladek et al 2010): 31 Erhältlich im Internet unter: 32 Erhältlich im Internet unter: 33 Erhältlich im Internet unter: 34 Die Inhalte liegen sowohl als Videoaufzeichnung (Google i/o 2010) als auch als Foliensatz (Nesladek et al 2010) vor.

52 4 Entwurfsmuster für Android UIs Navigationsstruktur Design Pattern Abbildung 22: Muster einer Informationsarchitektur für eine Android-Applikation (Nesladek et al 2010, S. 25) In diesem strukturellen Entwurfsmuster wird eine flache Navigationshierarchie im Sinne der Einfachheit konzeptionell nahegelegt, wie in Kapitel Informationsarchitektur für mobile Systeme empfohlen. Eine Applikation wird demnach in aufgabenbezogene Activities zerlegt. Eine kurze Erläuterung der enthaltenen Komponenten nach der offiziellen Dokumentation für Android UI Guidelines (Android Developers 2011): Ein Widget ist eine komprimierte Form der Applikation, welche dessen Status oder wichtigste Funktion aufweist. Nutzer können sich Widgets auf dem Homescreen ihrer Android OS-Benutzerschnittstelle nach ihren Wünschen zusammenstellen. Das Dashboard (zu dt. Armaturenbrett) bietet eine Einstiegsübersicht in die Anwendung mit den wichtigsten Funktionen

53 4 Entwurfsmuster für Android UIs 53 Als Activity bezeichnet man eine logische, interaktive Einheit, welche i.d.r auf die Erfüllung einer bestimmten Aufgabe bezogen ist 35. Ein Beispiel hierfür wäre ein Neue Schreiben -Dialog. Activities werden bei Applikationsübergreifender Navigation auf den sogenannten Activity-Stack gelegt. Die Action Bar befindet sich am oberen Rand eines Bildschirms und beherbergt häufige, Activity-übergreifende Aktionen (Beispiel: Suche) 35 Eine solche Einheit wird außerhalb des Android-Jargons auch als Screen bezeichnet

54 4 Entwurfsmuster für Android UIs GUI Design Patterns Im Folgenden eine Vorstellung der Design Patterns nach (Nesladek et al 2010) mit Hilfe der in Abschnitt beschriebenen Schema. Eine aktuelle mobile Applikation dient als Beispiel der Umsetzung der Patterns: Dashboard Pattern Name: Dashboard Problem: Oft ist nicht erkennbar welche Features eine App hat. Wie kann man den Startscreen einer Applikation sinnvoll nutzen? Wo präsentiert man aktuelle Informationen (zum Beispiel App-Updates)? Abbildung 23: Dashboard Pattern (Nesladek et al 2010, S. 10) Beschreibung: Der Startscreen einer Applikation bietet eine übersichtliche Auswahl der wichtigsten Funktionen mittels großen, beschrifteten Symbolen, die an einem Gitterraster ausgerichtet sind (Abbildung 23). Zudem werden aktuelle Informationen aus dieser App angeboten. Empfehlungen: Nur die wichtigsten Features (zwischen 3 und 6 Symbole) anbieten. Gutes Screendesign erzeugt an dieser Stelle einen prägenden ersten Eindruck. 36 Beispiel: In der Stuttgarter Nahverkehrsanwendung VVS App für Android von Fluidtime wird das Dashboard- Pattern als Einstieg in die Applikation getreu der Empfehlung eingesetzt (Foto der App auf einem Xperia mini pro, Abbildung 24). Denkbar wäre eine Ergänzung mit aktuellen Informationen zu favorisierten Strecken an dieser Stelle. Abbildung 24:VVS App, von Fluidtime Diese Empfehlung fußt auf den Erläuterungen aus Kapitel 3.3.3

55 4 Entwurfsmuster für Android UIs 55 Action Bar Pattern Name: Action Bar Problem: Wie können häufige, globale Aktionen an prominenter Stelle präsentiert werden? Beschreibung: Fixe Leiste am oberen Rand enthält häufig verwendete Aktionen Abbildung 25: Action Bar Pattern (Nesladek et al 2010, S. 13) Empfehlungen: Nicht für Kontextmenüs einzelner Elemente der Activity nutzen (hierfür sind die Quick Actions vorgesehen). Aktionen in der Actionbar sollen entweder den gesamten Screen betreffen (Bsp.: Refresh) oder Navigations-möglichkeiten zu anderen typischen Activities einer App bieten, so auch zurück zum Dashboard, bzw. Homescreen führen. 37 Beispiel: Die Twitter-App von Twitter, Inc. (Abbildung ) setzt das Action Bar-Prinzip entsprechend den Empfehlungen um: Die Actionbar bietet eine Suchfunktion und den Weg zu einer separaten Activity, für das Erstellen einer neuen Nachricht. Abbildung 26: Twitter App von Twitter, Inc Vgl. Kapitel Regel 1 der Gestaltung von Benutzerschnittstellen nach Schneidermann: Handlungsabfolgen sollen in vergleichbaren Situationen wiederverwendet werden können 38 Bildquelle:

56 4 Entwurfsmuster für Android UIs 56 Quick Actions Pattern Name: Quick Actions Problem: Wie können kontextuelle Optionen auf einem Touchscreen angeboten werden? Beschreibung: mit einem Gedrückt halten der Auswahl (long-tap) erscheint ein Kontextmenü mit Optionen, welche die Auswahl betreffen Abbildung 27: Quick Actions Pattern (Nesladek et al 2010, S. 16) Empfehlungen: Die intuitivste Option für den Elementtyp soll im Kontextmenü an erster Stelle stehen, der long-tap sollte nicht die einzige Möglichkeit sein zur gewünschten Operation zu gelangen Beispiel: Integration des Quick Action-Prinzips in der Beispielapplikation Blitzdroid (Abbildung ) Abbildung 28: Beispielapplikation Blitzdroid 39 Bildquelle: Lorenz s Blog

57 5 Entwicklung einer Touch Applikation für Android mit Flex Thesis-Projekt Semsix Touch Eckdaten Steckbrief: Name Bearbeitungszeit Vorgängerprojekt Projektmanager Plattform Entwicklungsumgebung Zusätzliche Software SDK Semsix Touch Ca. 240 Stunden Semsix, Martin Jakobus und Ingo Schock Ingo Schock (Computer Science and Media) Adobe AIR (2.5) for Android Flash Builder 4 (Burrito) / Eclipse Balsamiq Wireframing Tool, Adobe Photoshop CS3 Adobe Flex 4.5 (Hero) pre-release Event-Mapping Mate Flex Framework (Version 0.9) Endgerät Betriebssystem Samsung Galaxy Tab Android 2.2 (Froyo) Tabelle 2: Die wichtigsten Daten des Semsix Touch Projekts

58 5 Entwicklung einer Touch Applikation für Android mit Flex Beschreibung und Ausgangslage Ausgangspunkt der Arbeit war eine MI Projektarbeit aus dem Wintersemester 2009, namens Semsix. Sie wurde durchgeführt von Ingo Schock und Martin Jakobus. Es handelt sich um Musiksuchmaschine, welche nach frei verfügbarer Musik auf gängigen Onlineportalen wie YouTube sucht. Die Ergebnisse werden mittels eines aufwändigen Bewertungsverfahrens, welche durch Schlüsselwörter eine quasi semantische Suche nach zuverlässigen Treffern, gefiltert und die Bezeichnungen wie Titel und Album mit einer Musikdatenbank verglichen. Dies dient zudem der korrekten Benennung von Namen und Alben nach einem einheitlichen Schema innerhalb der Applikation. Weitere Features sind online Playlistenverwaltung, Lyrics Suche und ähnliche-titel Suche. Die Anwendung läuft innerhalb des Adobe Flash Players als Webapplikation im Browser: Abbildung 29: Screenshot Adobe Flex 3.2 Applikation

59 5 Entwicklung einer Touch Applikation für Android mit Flex Projektziele im Rückblick Rückblickend werden in diesem Abschnitt die Ergebnisse gegen die, Mitte Oktober 2010 in einem Steckbrief definierten Ziele geprüft. Allgemeines Projektziel Der Schwerpunkt der Arbeit liegt in einem kompletten Redesign der Benutzeroberfläche, im Rahmen eines user zentrierten Designprozesses. Ergebnis: Im Laufe des Projekts hat sich der Fokus wesentlich auf die Auseinandersetzung mit technischen Herausforderungen und die Konzeptionierung der Oberfläche mittels Wireframes verschoben. Eine Neugestaltung ist dabei erzielt worden. Ziele der Phase 1 Evaluation von Semsix nach Kriterien der Benutzerfreundlichkeit: Evaluation zweier weiterer gängiger Mediaplayer, Grooveshark und Windows Media Player. Die Analyse des State of the Art gestengesteuerter Benutzerinteraktion Ergebnis: Da sich die technischen Faktoren als wesentlich kritischer für das spätere Ziel eines lauffähigen Prototypen für die MediaNight zeigten, folgte früh eine Zurücknahme des Anspruchs auf Nutzerzentriertem Designprozess. Die Evaluation von vergleichbaren Anwendungen erfolgte daher eher explorativ, statt wie geplant, innerhalb eines formalen Verfahrens. Die Analyse des State of the Art andererseits bildet den Kern der Thesis- Ausarbeitung.

60 5 Entwicklung einer Touch Applikation für Android mit Flex Ziele der Phase 2 Redesign Wireframing und Early Evaluation eines neuen, touchoptimierten Interfaces für Semsix Grafischer Mockup des Zieldesigns mit Adobe Photoshop Ergebnis: Eine große Zahl Konzeptzeichnungen (Scribbles) zu User Interface Layouts und einzelnen Elementen ist entstanden. Diese Arbeit war insbesondere für die Sensibilisierung und Zielfindung der Bachelor Thesis hilfreich. Nach mehreren Generationen von Wireframes ist ein finaler Prototyp-Mockup entstanden, welcher mit Ausnahme einiger weniger Elemente funktionsfähig auf dem Endgerät umgesetzt werden konnte (siehe nächste Seite). Eine frühe Evaluation dieser Ergebnisse konnte im Rahmen von ad-hoc Feedback mit Kommilitonen stattfinden. Das Design der Applikation auf konzeptioneller Ebene (Layout, Controls, Features) stellte die Nutzer auf der MediaNight kaum vor Schwierigkeiten und stieß auf positive Resonanz. Ein echter Nutzertest des Prototyps nach Usability-Kriterien gestaltete sich schwierig. Der Grund war eine hohe Latenz zwischen Nutzereingabe und Reaktion des Systems.

61 5 Entwicklung einer Touch Applikation für Android mit Flex Ziele der Phase 3 Einarbeitung in den vorhandenen Quellcode von Semsix Einarbeitung in die Flex-Technologie Anpassung der vorhandenen Codebase zur Implementierung auf dem Zielsystem mit Hilfe des Adobe Flash Builders 4. Bewertung: Diese Hauptziele konnten erfüllt werden, mit Ausnahme einer Eigenentwicklung von Komponentenframeworks. Nach der konkreten Anpassung erwies sich der Schritt vom Emulator auf das Endgerät als relativ unkompliziert und nahtlos. Zur Überprüfung der Codeanpassungen wurde hauptsächlich der Emulator verwendet, auf Grund der niedrigeren turn-around Zeit, der Zeit zwischen Kompilieren, Testen und Beginn der nächsten Änderung. Ein eigenes Komponentenframework war weit außerhalb der Reichweite des Projekts und zum gegenwärtigen pre-release Stadiums des Flex SDK 4.5 wenig sinnvoll. Dafür führte die intensive Auseinandersetzung mit der Funktionsweise der vorhandenen Komponentenarchitektur (notwendig für Implementierung des Add-Buttons) zu einem tieferen Verständnis dieses Aspektes der Flex-Architektur.

62 5 Entwicklung einer Touch Applikation für Android mit Flex Projektergebnisse Konzept Abbildung 30: Konzeptzeichnung des Zieldesigns für den Semsix Touch Prototyp Design Abbildung 31: Mockup des Zieldesigns mit Adobe Photoshop CS3

63 5 Entwicklung einer Touch Applikation für Android mit Flex Prototyp Abbildung 32: Fotografie des auf der MediaNight im Februar 2011 präsentierten Prototyps auf dem Endgerät Evaluation Unzulänglichkeiten des aktuellen Stands zum Zeitpunkt der MediaNight waren unter anderem damit begründet, dass nicht alle Fehler im Bild rechtzeitig behoben werden konnten und zudem eine Menge unnötiger Operationen im Hintergrund liefen, welche das Gerät deutlich in die Knie zwangen. Den Löwenanteil der Einschränkung machte die Generierung der Suchergebnisse aus, welche zeitweise zum Einfrieren, manchmal auch Abstürzen der Anwendung führte. Dieser Vorgang müsste für eine Release-fähige Version deutlich entschlackt und optimiert werden. Diese technischen Probleme zu lösen hätte geschätzt noch weitere 2 Monate Entwicklungszeit mit häufiger Rücksprache mit den Entwicklern des Vorgängerprojekts bedurft. Ein enger Bezug zwischen Thesis Arbeit und dem System muss verworfen werden, da die Iterationszyklen zwischen Entwurf, Implementierung und Test zu viel Zeit beanspruchen würden.

64 5.3 Herausforderungen und Lösungsansätze Die größten technischen Herausforderungen ergaben sich aus: dem Aufsetzen einer produktiven Entwicklungsumgebung (Eclipse, Treiber für Galaxy Pad, Verbindung der IDE ans Endgerät zum Deployment via USB) den Migrationsproblemen auf Grund der erheblichen Unterschiede zwischen Flex 3.2 und Flex 4.5 Neue Sicherheits-Restriktionen der AIR Laufzeitumgebung im Vergleich zum Flashplayer Die Feature-Unvollständigkeit des Flex SDK 4.5 im Vorveröffentlichungsstadium Eine hohe Komplexität der zugrundeliegenden Implementierung Migration Diese Projektphase beinhaltete folgende wesentlichen Abschnitte: Anpassung aller Flex-Klassen, da sich die Vergabe von Namespaces zwischen Flex 3 und 4.5 wesentlich unterschied Umschreiben bestimmter deklarativer Konstrukte (beispielsweise müssen alle nicht-sichtbaren Komponenten ab Flex 4 in einem <declerations> Tag untergebracht werden.) Zusätzliches Integrieren des ursprünglichen SDK 3.2, um das Nutzen von in 4.5 nicht mehr vorhandenen Komponenten zu ermöglichen, insbesondere den Akkordeon-Container und Tabellen. Aktualisieren des Mate Frameworks Neues Applikationslayout Anpassen der Konfigurationsdateien, die eine lauffähige Version auf dem Endgerät ermöglichen. Neubau der Player Kontrollen auf Basis von Bildern

65 5 Entwicklung einer Touch Applikation für Android mit Flex Exemplarisches Problem Eine technische Herausforderung war das Anbringen eines kontextabhängigen Buttons auf den Items der Suchergebnisse. Für das pre-release SDK 4.5 ist nur eine mobil-optimierte Liste implementiert (siehe Bild links). Sie enthält ein optionales Bild und und ein Icon (rechts), sowie Textüberschrift und Untertitel für das Item. In der Flex- Architektur werden Elemente wie Listen oder Tabellen Controls genannt, welche mit einem sogenannten Data-Provider, verknüpft werden. Dieser wiederum könnte eine statische XML-Struktur als Quelle haben, eine Anbindung zu einem Webservice einkapseln oder eine Vielzahl anderer Datenstrukturen beherbergen. Um die so verknüpften Datensätze nun in der Liste Abbildung 33: Beispiel für mobil-optimierte Liste in Flex 4.5 (Bildquelle: blogs.adobe.com) darzustellen, hält dieser einen sogenannten contract mit einem ItemRenderer, welcher die Darstellung der Datensätze (Items) steuert. Problematisch ist, dass man gewöhnlich keine Referenz auf diesen, dem Item zugeordneten ItemRenderer bekommt und es so keine Möglichkeit gibt auf die enthaltenen Elemente Abbildung 34: Veranschaulichung der Zusammenhänge ItemRenderer, Container, DataProvider

66 5 Entwicklung einer Touch Applikation für Android mit Flex zuzugreifen um beispielsweise auf ein Item-gedrückt Event zu hören und in diesem Fall einen Button erscheinen zu lassen. Weiterhin kommt das Problem hinzu, dass die ItemRenderer für das Containerelement aus Performancegründen wiederverwendet werden. Das bedeutet dass ein Renderer für mehrere Items zuständig ist. Selbst wenn das gedrückte Listenelement in der Lage ist, eine Anweisung an seinen zugehörigen Renderer weiterzuleiten, so wirkt sich die Änderung auf alle zugewiesenen Items aus. Im gegenwärtigen SDK ist zudem kein sichtbarer Mechanismus vorgesehen, nach dem Rendering noch etwas an den Items zu ändern, was für die Implementierung dynamischer Kontrollelemente nötig ist. Abbildung 35: Prototypische Umsetzung eines kontextuellen Buttons Lösungsansatz Gewünscht war für das Zieldesign ein kontextueller Button ähnlich dem nach der Android UI Guideline empfohlenen Quick Action Entwurfsmuster 40. Gelöst wurde das Problem eines indem zunächst die dem MobileIconItemrenderer zu Grunde liegende Klasse MobileItemRenderer, an Hand eines analogen Beispiels im Internet abgeleitet wurde. Statt dem vorgesehenen Icon wurde ein zustandsbehafteter Container mit Buttons eingefügt, der sich bei Aufruf der entsprechenden Methode erweitert. Um nun die fehlende Referenzierung zu umgehen kann man sich nach einem vorhandenen ListChange Event (die Auswahl der Liste hat sich verändert), eine Referenz auf das gewählte Item besorgen und anschließend den Pfad zur Instanz des ItemRenderers rekonstruieren. Auch diese Notlösung wurde nach langer Recherche einem Forenbeitrag nachempfunden. Ist der ItemRenderer ermittelt, wird die dort eingetragene Methode zur Sichtbarmmachung des Buttons aufgerufen. Zusätzlich musste das Caching der ItemRenderer deaktiviert werden, da sonst der Button allen zugewiesenen Items hinzugefügt wurde. 40 Vgl. Kapitel 4.2.4