Bearbeiter: Christian Brennstuhl Edwin Foris Fabian Franzelin Betreuer: Sebastian Esch Philip Koene Felix Köbler

Agenda Einführung Motivation Problemstellung Vorgehensweise Projektablauf und Ergebnisse UCAN Modell Low Fidelity Prototype Initial Working Prototype Refined Prototype Live Demo Zusammenfassung und Ausblick

Motivation „Smartphone als Enabler“ Trend zu mobilen Applikationen Boom von sozialen Netzwerken Mehrwert durch Location-Based-Services [1] [2] [1] http://www.mobiltelefon-guide.de/bilder/beitrag/iphone4-closeup.jpg [2] http://www.lisa-freundeskreis.de/files/redaktion/facebook-logo.jpg

Motivation Entwicklung eines sozialen Marktplatzes am Lehrstuhl „Bring Dich ein!“ [1] Mobile Anwendung auf Basis von HTML 5 angepasst auf die Benutzung durch die Generation 50+ [1] https://staging.bring-dich-ein.de/badtoelz/

Bring Dich ein!

Problemstellung Priorität auf Kernfunktionalität der Plattform Wünsche Angebote Nachbarschaft Location-Based-Services Kartenfunktionalität Umgebungssuche nach Wünschen User-Oriented-Design Trade-off zwischen älteren und jüngeren Usern Plattformunabhängigkeit [1] [2] [3] [1] http://www.lesen.net/wp-content/gallery/apr10/android.jpg [3] http://www.techweblog.de/wp-content/uploads/2011/03/apple-logo.jpg [2] http://www.designjournal.org/images/html5-logo_00.gif

Vorgehensweise Ermittlung der funktionalen und nicht-funktionalen Anforderungen Literaturrecherche Technische Möglichkeiten Vergleichbare mobile Anwendungen Auswahl eines HTML 5 Frameworks Ergebnis „Sencha Touch“ Projektplan nach dem UCAN-Modell [1] Vergleichbare Anwendungen: Facebook, AroundMe [1] http://devblog.blackberry.com/wp-content/uploads/sencha_logo.png

UCAN Modell Ubiquitous Computing Application Development and Evaluation Process Model Vision/Motivation der Anwendung Prototypisierung / Implementierung Marktakzeptanz Technology Trigger Initial Idea Refined Idea Low Fidelity Prototype Refined Use Case Initial Working Final Product Market Evaluierung Prototyp auf Papier Klickbare Mockups Funktionsfähiger Prototyp Nutzerintegration Nutzerakzeptanz Evaluierung Finale Anwendung Benutzerorientierter iterativer Ansatz an dem wir uns orientiert haben Oberer Teil vom Bild Iterative Prototypentwicklung mit Evaluierung auf verschiedenen Ebenen Wichtigsten Punkte werden im Folgenden herausgearbeitet mit dem Fokus auf die Evaluierungsergebnissen [1] t [1] Florian Resatsch, Ubiquitous Computing, S. 103, Gabler Verlag 2010

Projektablauf – Low Fidelity Prototype Technology Trigger Initial Idea Refined Idea Low Fidelity Prototype Refined Use Case Initial Working Final Product Market Entwicklung Priorität auf Design und Navigation Klickbare Mockups für das iPhone Technische Möglichkeiten von Sencha Touch testen Evaluierung durch 1. Feldstudie 9 Teilnehmer (6 m/ 3 w) zwischen 61 und 76 Jahren Nutzungsszenarien, Fragebogen und Gruppendiskussion Die ersten Punkte wurde in der Problemstellung abgehandelt Benutzerszenarien und Fragebogen einzeln Anschließend gemeinsame Gruppendiskussion

Ergebnisse der 1. Feldstudie Stern-Navigation Tab-Navigation Navigationslayout, Symbole und Bezeichnungen

Projektablauf – Initial Working Prototype Technology Trigger Initial Idea Refined Idea Low Fidelity Prototype Refined Use Case Initial Working Final Product Market Entwicklung mit HTML 5 Priorität auf Kernfunktionen Sichere Authentifizierung mit oAuth Wünsche, Angebote, Nachbarschaft Umgebungssuche nach Wünschen Evaluierung durch 2. Feldstudie 5 Teilnehmer (4 m/ 1 w) zwischen 66 und 72 Jahren Nutzungsszenarien, Fragebogen und Gruppendiskussion

Ergebnisse der 2. Feldstudie Textgröße ausreichend anpassbar Scrollbarkeit einzelner Elemente nicht immer ersichtlich Unternavigation unklar Insgesamt flüssige und intuitive Bedienung mit dem Touchscreen Design und Funktionalität

Projektablauf – Refined Prototype Technology Trigger Initial Idea Refined Idea Low Fidelity Prototype Refined Use Case Initial Working Final Product Market Prototypverfeinerung Zusatzfunktionen implementieren Routenplanung Letzte Ereignisse Wünsche zu Benutzer anzeigen Bugfixing Evaluierung durch Nutzertests

Ergebnisse Live Demo

Lessons Learned HTML 5 Noch in Entwicklung Unterschiedliche Interpretation auf unterschiedlichen Browsern und Betriebssystemen (!) Sencha Touch Framework Noch nicht ausgereift: Final Release im Dezember 2010 Wichtige Funktionen werden kontinuierlich nachgereicht Feldstudien Organisation, Aufbau und Ablauf Umgang älterer Menschen mit neuer Technologie Gruppendiskussionen

Zusammenfassung Forschungsfrage 1 Forschungsfrage 2 Forschungsfrage 3 Was sind funktionale und nicht-funktionale Anforderungen an die mobile Anwendung? Welche zusätzlichen Funktionen sind in der mobilen Anwendung wünschenswert? Forschungsfrage 2 Wie lassen sich das Design und die Bedienung der mobilen Anwendung optimal an ältere Menschen anpassen? Forschungsfrage 3 Ist der sich noch in der Entwicklung befindende HTML5-Standard für die mobile Webentwicklung geeignet? Lassen sich die ortsbezogenen Funktionen und das Interaktionsdesign mit Hilfe von HTML5 sinnvoll umsetzen?

Ausblick UCAN: Acceptance Test → Final Product Erweiterbarkeit Caching (gesamte Anwendung im local storage speichern) Unterstützung kommerzieller Dienstleister Beschleunigungssensor verwenden: Durch schütteln des Smartphones wählt man einen Wunsch zufällig aus

Danke für Ihre Aufmerksamkeit!

Referenzen [1] Florian Resatsch, Ubiquitous Computing, S. 103, Gabler Verlag 2010 [2] Sencha Touch http://www.sencha.com/products/touch/ [3] W3C HTML 5 Spezifikation http://dev.w3.org/html5/spec/Overview.html [4] Google Maps API http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/ [5] Bring Dich ein! https://staging.bring-dich-ein.de/badtoelz/

Backup

UCAN Modell Nutzerintegration Nutzerakzeptanz Vision/Motivation der Anwendung Prototypisierung / Implementierung Marktakzeptanz Technol. Auslöser Initiale Idee Verfeinerte Idee Low-Fidelity Prototyp Verfeinerter Use-Case Initialer, funktieren-der Prototyp Verfeinerter Prototyp Finale Anwendung Am Markt eingeführte Anwendung Nutzerintegration Nutzerakzeptanz Evaluierung Evaluierung Evaluierung Evaluierung Papier-Prototyp, Storyboard Klick-Dummy Funktionsfähiger Prototyp Finale Anwendung 1 2 3 4 t In Schritt 1 werden, ausgehend von einer Vision initiale Ideen evaluiert In Schritt 2 werden, ausgehend von einer verfeinerten Idee erste Prototypen ohne Funktionalität evaluiert In Schritt 3 wird, ausgehend von verfeinerten Anforderungen ein erster, funktionsfähiger Prototyp in einer Feldstudie evaluiert Im letzten Schritt wird das finale Endprodukt, ausgehend von finalen Anforderungen auf Marktakzeptanz evaluiert

HTML5 HTML5-Standard (in der Entwicklung): Neue HTML-Tags (Video und Audio) Erweiterte JavaScript Funktionalität (Geolocation und neue Events) Erweitere Designmöglichkeiten (CSS3) Forschungsaspekt Plattformunabhängigkeit Verwendete HTML5 Elemente Zugriff auf Geodaten des Mobiltelefons Local Storage Zusätzliche Events (onOrientationChange)

[1] [1] http://oauth.net/core/1.0/#auth_step1

Google Maps Marker für eigenen Standort Google Maps v3 API seit 2010 Angebotene Funktionen Karte Marker anzeigen Information Window Dynamisches Laden der API ermöglicht Routenberechnung Geographische Position in Längen- und Breitengrade Fehlende Funktionen Marker Management: löschen, clustern, ein- und ausblenden Marker für eigenen Standort Saubere Integration in Sencha Touch

Sencha Touch Integrationsframework für CSS 3 HTML JavaScript Bietet visuelle Anzeigeelemente im iPhone-App-Stil Integriert HTML 5 Zusatzfunktionalität ins Framework Ereignisse (onTab, onOrientationChange, etc.) Local Storage Entwicklung rein in JavaScript Styling mit CSS 3 Unterstützt offiziell iPhone, Android und Blackberry [1] [1] http://devblog.blackberry.com/wp-content/uploads/sencha_logo.png