Technische Universität München Bearbeiter: Christian Brennstuhl Edwin Foris Fabian Franzelin...

Technische Universität München

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] http://www.mobiltelefon-guide.de/bilder/beitrag/iphone4-closeup.jpg [2] http://www.lisa-freundeskreis.de/files/redaktion/facebook-logo.jpg

[1]

[2]


4

Motivation

• Entwicklung eines sozialen Marktplatzes am Lehrstuhl

• „Bring Dich ein!“

Mobile Anwendung auf Basis von HTML 5 angepasst auf die Benutzung durch die

Generation 50+

[1] https://staging.bring-dich-ein.de/badtoelz/

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


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

[1]


8

UCAN ModellUbiquitous Computing Application Development and Evaluation Process Model

Technology Trigger Initial Idea Refined Idea

Low Fidelity

Prototype

Refined

Use Case

Initial

Working

Prototype

Refined

Prototype

Final

Product

Market

Product

Evaluierung

• Prototyp auf Papier

Evaluierung

• Klickbare Mockups

Evaluierung

• Funktionsfähiger Prototyp

Evaluierung

• Finale Anwendung

t

Nutzerintegration Nutzerakzeptanz

Vision/Motivation der Anwendung

Prototypisierung / Implementierung Marktakzeptanz

[1]

[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


Low Fidelity

Prototype

Refined

Use Case

Initial

Working

Prototype

Refined

Prototype

Final

Product

Market

Product


10

Ergebnisse der 1. Feldstudie

Stern-Navigation Tab-Navigation


11

Projektablauf – Initial Working Prototype


Low Fidelity

Prototype

Refined

Use Case

Initial

Working

Prototype

Refined

Prototype

Final

Product

Market

Product

• 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


13

Projektablauf – Refined Prototype


Low Fidelity

Prototype

Refined

Use Case

Initial

Working

Prototype

Refined

Prototype

Final

Product

Market

Product

• 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– 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


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/


Backup


21

UCAN Modell

Vision/Motivation der Anwendung Prototypisierung / Implementierung Marktakzeptanz

Techn

ol.

Auslö

ser

Am Markt eingeführ

te Anwendu

ng

Finale Anwendu

ng

Verfeinerter

Prototyp

Initialer, funktiere

n-der Prototyp

Verfeinerter Use-Case

Low-Fidelity Prototyp

Verfeinerte Idee

Initiale Idee

Evaluierung Evaluierung Evaluierung Evaluierung

Papier-Prototyp,Storyboard Klick-Dummy

Funktionsfähiger Prototyp

Finale Anwendung

Nutzerintegration Nutzerakzeptanz

t1 2 3 4

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

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

[1]

Technische Universität München Bearbeiter: Christian Brennstuhl Edwin Foris Fabian Franzelin...

Documents

Transcript of Technische Universität München Bearbeiter: Christian Brennstuhl Edwin Foris Fabian Franzelin...