Bearbeiter: Christian Brennstuhl Edwin Foris Fabian Franzelin

Präsentation zum Thema: "Bearbeiter: Christian Brennstuhl Edwin Foris Fabian Franzelin"—  Präsentation transkript:

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

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

3 Motivation „Smartphone als Enabler“ Trend zu mobilen Applikationen
Boom von sozialen Netzwerken Mehrwert durch Location-Based-Services [1] [2] [1] [2]

4 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]

5 Bring Dich ein!

6 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] [3] [2]

7 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]

8 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

9 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

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

11 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

12 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

13 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

14 Ergebnisse Live Demo

15 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

16 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?

17 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

18 Danke für Ihre Aufmerksamkeit!

19 Referenzen [1] Florian Resatsch, Ubiquitous Computing, S. 103, Gabler Verlag 2010 [2] Sencha Touch [3] W3C HTML 5 Spezifikation [4] Google Maps API [5] Bring Dich ein!

20 Backup

21 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

22 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)

23 [1] [1]

24 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

25 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]