realtime prototyping | "mokk.me - das tool für alle fälle"

IA-Konferenz

Realtime Prototyping„Ein Tool für alle Fälle“

München, 20. Mai 2011http://www.flickr.com/photos/polvero/3466964233/

2,2 Mrd. EUR Umsatz und 10 Mio. verkaufte Smartphones, 400.000

Android und 366.000 iPhone Aktivierungen pro Tag, >300.000 iPhone Apps, >200.000 Android

Apps, 4,5 Mrd. App Installationen, 10 Mrd. App Downloads im

iTunes-Store

#1 Mobiles Internet ist überall

http://www.flickr.com/photos/alexandremainguenaud/5400861326/

Beim Kaffee trinken

http://www.flickr.com/photos/chrisjl/5664339020/

Auf dem Weg zur Party

http://www.flickr.com/photos/39708943@N07/4526333882/

Beim Kamelrennen

http://www.flickr.com/photos/29071099@N05/3084995941/

Während dem Schlafen

#2 Das Nutzungsverhalten ist anders

http://www.flickr.com/photos/recompose/2303691635/

Viel Informationen auf engem Raum

http://www.flickr.com/photos/alachia/4916667666/

Eingeschränkte Bedienung

http://www.flickr.com/photos/39708943@N07/4526333882/

Die User sind fokussierter

Was bedeutet das für uns?

Das Projekt: Die Mobile App

Wir starteten sofort mit unseren Tools: Flow-Charts Sitemaps Wireframes

Wireframes

simyo 12:34 PM

Rufnummer

simyo

Passwort

Einloggen

simyo 12:34 PM

0174 |

Passwort

Einloggen

simyo

Q W E R T Z U I O P

A S D F G H J K L

Y X C V B N M

_123 ReturnLeerzeichen

X

simyo 12:34 PM

Loginvorgang läuft

simyo

simyo 12:34 PM

Button 4 Button 5 Button 6

Button 1 Button 2 Button 3

simyologout

Datenverbrauch

1 GB600 MB

9,95!

15.-

aufladen

Ihr Guthaben

simyo 12:34 PM

9,95!

Ihr Guthaben

simyohome

15,- Aufladen

30,- Aufladen

50,- Aufladen

simyo 12:34 PM

simyozurück

15,- Euro Aufladen

Abbrechen

Bestätigen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

simyo 12:34 PM

34,95!

Ihr Guthaben

simyohome

15,- Aufladen

30,- Aufladen

50,- Aufladen

simyo 12:34 PM

34,95!

Ihr Guthaben

simyozurück

15,- Aufladen

30,- Aufladen

50,- Aufladen

Danke

Aufladung erfolgreich

OK

Ihre Guthabenaufladung war erfolgreich. Sie können ab sofort mit Ihrem neuen Guthaben lostelefonieren.

simyo 12:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.

Kostenstoppmonat:

von 07.09. bis 06.10.2010

Ihr Tarif: simyo Tarif

simyohome

Flat simyo

Flat FestnetzBestellt

Flat SMS

Daten 1GBaktiv

simyo 12:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.

Kostenstoppmonat:

von 07.09. bis 06.10.2010

Ihr Tarif: simyo Tarif

simyozurück

Flat simyo

Flat FestnetzBestellt

Flat SMS

Daten 1GBaktiv

simyo 12:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.

Kostenstoppmonat:

von 07.09. bis 06.10.2010

Ihr Tarif: simyo Tarif

simyozurück

Flat simyo

Flat FestnetzBestellt

Flat SMSBestellt

Daten 1GBaktiv

Danke

OK

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

simyo 12:34 PM

simyohome

Oktober

Gesamtsumme: 23,98 !

Einzelgespräche00:45:45 Min

9,53 !

SMS-Verbindungen22 SMS

1,98 !

MMS-Verbindungen0 MMS

0,00 !

Daten50000 Kilobytes

12,47 !

Mobilzahlungen 0,00 !

simyo 12:34 PM

simyozurück

Oktober

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

Einzelgespräche

simyo 12:34 PM

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22

simyozurück

weitere x Einträge laden

simyo 12:34 PM

Name

simyo sendenzurück

E-Mail oder Rufnummer

Senden

Freunden empfehlen:

_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit

Ihre Vorteile

Rechtliche Hinweise

simyo 12:34 PM

moreverbindungaufladenhome

Max Muster |

simyo sendenzurück

E-Mail oder Rufnummer

Senden

Freunden empfehlen:

_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit

Ihre Vorteile

Rechtliche Hinweise

Q W E R T Z U I O P

A S D F G H J K L

Y X C V B N M

_123 ReturnLeerzeichen

X

simyo 12:34 PM

Name

simyo sendenzurück

E-Mail oder Rufnummer

Senden

Freunden empfehlen:

_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit

Ihre Vorteile

Rechtliche Hinweise

Danke

OK

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

simyo 12:34 PM

simyohome

News

simyo 12:34 PM

simyozurück

§1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

§2 Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

§2 Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum

Disclamer

simyo 12:34 PM

simyozurück

§1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum dolor sit amet

§2 Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

§3 Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

Rechtliche Hinweise

simyo 12:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.

_ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam._ Lorem ipsum dolor sit amet, consetetur _ Lorem ipsum dolor sit amet, consetetur sadipscing

Ihr Tarif: Basic Tarif

simyozurück

www.simyo.de

Login ProzessGuthaben aufladen

Verbindungen

Tarifoptionen

Tell a Friend

News

Impressum

PrepaidHome

simyo 12:34 PM

0174 |

Passwort

Einloggen

simyo

Q W E R T Z U I O P

A S D F G H J K L

Y X C V B N M

_123 ReturnLeerzeichen

X

Haben Sie sich vertippt?

Bitte überprüfen Sie, ob sie Ihre Rufnummer und Ihr Passwort richtig eingegeben haben.

OK

simyo 12:34 PM

Name

simyo sendenzurück

E-Mail oder Rufnummer

Senden

Freunden empfehlen:

_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit

Ihre Vorteile

Rechtliche Hinweise

Einladung fehlgeschlagen

OK

Bitte Überprüfen Sie ob sie alle Felder richtig ausgefüllt haben.

simyo 12:34 PM

simyozurück

Rechnungen

simyo 12:34 PM

simyozurück

FLAT SMS bestellen

Abbrechen

Bestätigen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

simyo 12:34 PM

simyohome

Rechnungen

Basic Tarif

impressum

01.10.2010GuthabengesteuerteAufladung

30,00 !

01.10.2010GuthabengesteuerteAufladung

30,00 !

Das kann sich sehen lassen: simyo bietet die günstigste Handy-Flatrate für Gespräche ins deutsche Festnetz. http://bit.ly/cWZrwZ

5:17 AM Oct 22nd Via TweetDeck

RT @germanstudent: Interessantes Angebot von simyo für iPhone/iPad Besitzer. Klasse Tarifoptionen und 39! Kostenstopp http://teile.es/k5

5:17 AM Oct 22nd Via TweetDeck

RT @germanstudent: Interessantes Angebot von simyo für iPhone/iPad Besitzer. Klasse Tarifoptionen und 39! Kostenstopp http://teile.es/k5

5:17 AM Oct 22nd Via TweetDeck

RT @germanstudent: Interessantes Angebot von simyo für iPhone/iPad Besitzer. Klasse Tarifoptionen und 39! Kostenstopp http://teile.es/k5

Das kann sich sehen lassen: simyo bietet die günstigste Handy-Flatrate für Gespräche ins deutsche Festnetz. http://bit.ly/cWZrwZ

5:17 AM Oct 22nd Via TweetDeck

Das kann sich sehen lassen: simyo bietet die günstigste Handy-Flatrate für Gespräche ins deutsche Festnetz. http://bit.ly/cWZrwZ

5:17 AM Oct 22nd Via TweetDeck

01.10.2010Aufladung Guthaben 30,00 !

01.10.2010Aufladung Guthaben 30,00 !

01.10.2010Aufladung Guthaben 30,00 !

01.10.2010Aufladung Guthaben 30,00 !

simyo 12:34 PM

34,95!

Ihr Guthaben

simyozurück

15,- Aufladen

30,- Aufladen

50,- Aufladen

Danke

Aufladung fehlgeschlagen

OK

Ihre Guthabenaufladung war leider nicht erfolgreich. Bitte versuchen Sie es erneut.

simyo 12:34 PM

9,95!

Ihr Guthaben

simyohome

um Ihr Guthaben mobile aufladen zu können, müssen Sie [blubb] als Zahlart wählen.

Bitte loggen Sie sich auf www.simyo.de ein und wechseln Sie Ihre Zahlart auf [blubb]

Aufladung leider nicht möglich

simyo 12:34 PM

simyozurück

FLAT SMS bestellen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Bestellung leider nicht möglich

um die FLAT SMS Tarifoption mobile bestellen zu können, müssen Sie [blubb] als Zahlart wählen.

Bitte loggen Sie sich auf www.simyo.de ein und wechseln Sie Ihre Zahlart auf [blubb]

Anzeige der Rechnungs PDF

Falsche Zahlungsmethode

Aufladung fehlgeschlagen

Einladung fehlgeschlagen

simyo 12:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.

Kostenstoppmonat:

von 07.09. bis 06.10.2010

Ihr Tarif: simyo Tarif

simyozurück

Flat simyo

Flat FestnetzBestellt

Flat SMS

Daten 1GBaktiv

Bestellung fehlgeschlagen

OK

Ihre Bestellung konnte leider nicht durchgeführt werden. Bitte versuchen Sie es erneut.

Falscher Login

simyo 12:34 PM

Button 4 Button 5 Button 6

Button 1 Button 2 Button 3

simyologout

Datenverbrauch

1 GB600 MB

9,95!

Letzte Monatsrechnung

PostpaidHome

simyo 12:34 PM

simyozurück

Oktober

Einzelgespräche

Bestellung fehlgeschlagen

Falsche Zahlungsmethode

simyo 12:34 PM

simyozurück

Sitemap

Flow-Chart integrieren

Sitemap und Flow-Chart verschmelzen zu einem Wire-Flow

Der Use-Case:Ein Kunde bricht den Prozess„Aufladen“ ab.

Darstellung im Wire-Flow

Der Use-Case mit herkömmlichen Prototypen ohne Animation

Habe ich es jetzt

abgebrochen

Müsste hier nicht eine

Rückmeldung stehen

Der gleiche Use-Case dieses Mal mit Animation

Das App Feeling

Slide Back

Das „App-Feeling“ ist entscheidend für die User Experience.

„The medium is the message.“Marshall McLuhan

Aber wie kann man das App-Feeling darstellen

Omnigraffle

Omnigraffle

Viele Schablonen die einfach zu integrieren sind+

Omnigraffle

Viele Schablonen die einfach zu integrieren sind+

Keine Animationen und interaktive Module-

Omnigraffle

Viele Schablonen die einfach zu integrieren sind+

Keine Animationen und interaktive Module-

Nur als Desktopvariante vorhanden-

balsamiq

balsamiq

Beteiligung des Teams über die Clipboard-Funktion+

balsamiq

Beteiligung des Teams über die Clipboard-Funktion+

Zusatz Software für einen Prototyp benötigt-

justinmind

justinmind

Einfach zu erstellender Klickdummy+

justinmind

Einfach zu erstellender Klickdummy+

Austausch nur über Export möglich-

justinmind

Einfach zu erstellender Klickdummy+

Austausch nur über Export möglich-

Nur als Desktopvariante vorhanden-

mockability

mockability

Gute Animationen und echtes App-Feeling+

mockability

Gute Animationen und echtes App-Feeling+

Gut in den internen Wireframe-Prozess integrierbar+

mockability

Gute Animationen und echtes App-Feeling+

Gut in den internen Wireframe-Prozess integrierbar+

Nur auf dem iPhone verwendbar-

Ein Tool für alle Fälle

Ein Tool für alle Fälle

Es muss jederzeit von allen Teammitgliedern erreichbar sein

Ein Tool für alle Fälle

Es muss jederzeit von allen Teammitgliedern erreichbar sein

Es muss ohne Programmierkenntnisse bedienbar sein

Ein Tool für alle Fälle

Es muss jederzeit von allen Teammitgliedern erreichbar sein

Es muss ohne Programmierkenntnisse bedienbar sein

Es muss ein echtes „App-Feeling“ erzeugt werden

Ein Tool für alle Fälle

Es muss jederzeit von allen Teammitgliedern erreichbar sein

Es muss ohne Programmierkenntnisse bedienbar sein

Es muss ein echtes „App-Feeling“ erzeugt werden

Der Klickdummy muss auf verschiedenen Devices laufen

Ein Tool für alle Fälle

Es muss jederzeit von allen Teammitgliedern erreichbar sein

Es muss ohne Programmierkenntnisse bedienbar sein

Es muss ein echtes „App-Feeling“ erzeugt werden

Der Klickdummy muss auf verschiedenen Devices laufen

Der Klickdummy soll als Sprungbrett für die Umsetzung dienen

Illustration: Steffen Stäuber

easily create mobile App mocks

mokk.me

easily create mobile App mocks

mokk.me

Das ist mokk.me

Das ist mokk.me

mokk.me ist eine reine Browser Applikation ohne Backend

Das ist mokk.me

mokk.me ist eine reine Browser Applikation ohne Backend

mokk.me basiert auf HTML5, CSS3, jQuery und einer CouchDB

Das ist mokk.me

mokk.me ist eine reine Browser Applikation ohne Backend

mokk.me basiert auf HTML5, CSS3, jQuery und einer CouchDB

Für den Look der Elemente und der Animationen wird kein Framework(zB. jQtouch oder sencha) verwendet.

Das ist mokk.me

mokk.me ist eine reine Browser Applikation ohne Backend

mokk.me basiert auf HTML5, CSS3, jQuery und einer CouchDB

Für den Look der Elemente und der Animationen wird kein Framework(zB. jQtouch oder sencha) verwendet.

Statt dessen wird eine Widget-Library eingesetzt, die es erlaubt unterschiedliche Looks zu generieren

Einfache Erstellung der Screens

Verlinkungen und Übergänge

Speichern und Testen

User Experience

DesignerTechniker

Kunde

Speichern und Testen

User Experience

DesignerTechniker

Kunde

Speichern und Testen

mokk.me

User Experience

DesignerTechniker

Kunde

Speichern und Testen

mokk.me

Prototyp WEB

Prototyp Mobile

Unterschiedliche Looks

Das Ergebnis: Feinstes HTML5

Das Ergebnis: Feinstes HTML5

Und.... Action: http://www.mokk.me

Special Thanks to:

Thomas „TheReincarnator“ Jacob

Vielen DankOliver Annen, User Experienceoliver.annen@sinnerschrader.com Twitter: @arxoren

SinnerSchrader Deutschland GmbHVölckersstraße 3822765 Hamburgwww.sinnerschrader.com