1 / 25

Bearbeiter: Christian Brennstuhl Edwin Foris Fabian Franzelin

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

vern
Download Presentation

Bearbeiter: Christian Brennstuhl Edwin Foris Fabian Franzelin

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  5. Bring Dich ein!

  6. Problemstellung [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 • 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

  7. Vorgehensweise [1] [1] http://devblog.blackberry.com/wp-content/uploads/sencha_logo.png • 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

  8. UCAN ModellUbiquitous Computing Application Development and Evaluation Process Model Vision/Motivation der Anwendung Prototypisierung / Implementierung Marktakzeptanz Nutzerintegration Nutzerakzeptanz [1] t [1] Florian Resatsch, Ubiquitous Computing, S. 103, Gabler Verlag 2010

  9. Projektablauf – Low Fidelity Prototype • 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

  10. Ergebnisse der 1. Feldstudie

  11. Projektablauf – Initial Working Prototype • 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/ 1w) 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

  13. Projektablauf – Refined Prototype • Prototypverfeinerung • Zusatzfunktionen implementieren • Routenplanung • Letzte Ereignisse • Wünsche zu Benutzer anzeigen • Bugfixing • Evaluierung durch Nutzertests

  14. Ergebnisse Live Demo

  15. LessonsLearned • 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 • 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: AcceptanceTest → Final Product • Erweiterbarkeit • Caching (gesamte Anwendung im localstorage 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 Touchhttp://www.sencha.com/products/touch/ [3] W3C HTML 5 Spezifikation http://dev.w3.org/html5/spec/Overview.html [4] Google Maps APIhttp://code.google.com/intl/de-DE/apis/maps/documentation/javascript/ [5] Bring Dich ein!https://staging.bring-dich-ein.de/badtoelz/

  20. Backup

  21. UCAN Modell Prototypisierung / Implementierung Vision/Motivation der Anwendung Marktakzeptanz Technol. Auslöser Verfeinerte Idee Low-Fidelity Prototyp Verfeinerter Use-Case Initialer, funktieren-der Prototyp Verfeinerter Prototyp Finale Anwendung Initiale Idee Am Markt eingeführte Anwendung Nutzerintegration Nutzerakzeptanz Evaluierung Evaluierung Evaluierung Evaluierung Papier-Prototyp, Storyboard Finale Anwendung Klick-Dummy Funktionsfähiger Prototyp t 3 1 2 4 In Schritt 3 wird, ausgehend von verfeinerten Anforderungen ein erster, funktionsfähiger Prototyp in einer Feldstudie evaluiert 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 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] http://oauth.net/core/1.0/#auth_step1

  24. Google Maps • 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 [1] [1] http://devblog.blackberry.com/wp-content/uploads/sencha_logo.png • 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

More Related