Sprachen
Seiten
Rechtliche
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 [email protected] Twitter: @arxoren
SinnerSchrader Deutschland GmbHVölckersstraße 3822765 Hamburgwww.sinnerschrader.com
Top Related