1. IA-Konferenz
Realtime Prototyping
„Ein Tool für alle Fälle“
München, 20. Mai 2011
http://www.flickr.com/photos/polvero/3466964233/

2. 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

3. #1 Mobiles Internet ist überall

4. Beim Kaffee trinken
http://www.flickr.com/photos/alexandremainguenaud/5400861326/

5. Auf dem Weg zur Party
http://www.flickr.com/photos/chrisjl/5664339020/

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

7. Während dem Schlafen
http://www.flickr.com/photos/29071099@N05/3084995941/

8. #2 Das Nutzungsverhalten ist anders

9. Viel Informationen auf engem Raum
http://www.flickr.com/photos/recompose/2303691635/

10. Eingeschränkte Bedienung
http://www.flickr.com/photos/alachia/4916667666/

11. Die User sind fokussierter
http://www.flickr.com/photos/39708943@N07/4526333882/

12. Was bedeutet das für uns?

13. Das Projekt: Die Mobile App

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

15. Wireframes

16. Login Prozess
simyo 12:34 PM
Guthaben aufladen
Aufladung fehlgeschlagen Falsche Zahlungsmethode
simyo simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM
home simyo zurück simyo zurück simyo home simyo zurück simyo home simyo
Rufnummer Ihr Guthaben 15,- Euro Aufladen Ihr Guthaben Ihr Guthaben Ihr Guthaben Ihr Guthaben
9,95! 34,95!
Lorem ipsum dolor sit amet, consetetur
Passwort
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat. Danke
34,95! 34,95! 9,95!
Danke
Einloggen Aufladung erfolgreich Aufladung fehlgeschlagen
Ihre Guthabenaufladung war
Bestätigen Ihre Guthabenaufladung war leider
15,- Aufladen 15,- Aufladenkönnen ab sofort
erfolgreich. Sie
mit Ihrem neuen Guthaben 15,- Aufladen 15,- Aufladen Bitte versuchen
nicht erfolgreich. Aufladung leider nicht möglich
Sie es erneut.
lostelefonieren. um Ihr Guthaben mobile aufladen zu
Das kann sich sehen lassen: simyo bietet die können, müssen Sie [blubb] als
günstigste Handy-Flatrate für Gespräche ins 30,- Aufladen Abbrechen 30,- Aufladen 30,- Aufladen 30,- Aufladen Zahlart wählen.
deutsche Festnetz. http://bit.ly/cWZrwZ OK OK
5:17 AM Oct 22nd Via TweetDeck Bitte loggen Sie sich auf
50,- Aufladen 50,- Aufladen 50,- Aufladen 50,- Aufladen www.simyo.de ein und wechseln Sie
Ihre Zahlart auf [blubb]
simyo 12:34 PM
Verbindungen
simyo
simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM
home simyo zurück simyo zurück simyo zurück simyo
01.10.2010 | 14:47 Uhr
0174 | 0176 / 4567894
00:00:22 0,53 !
Oktober Oktober Oktober
01.10.2010 | 14:47 Uhr
Passwort 0176 / 4567894 00:00:22 0,53 !
Gesamtsumme: 23,98 ! Einzelgespräche Einzelgespräche
01.10.2010 | 14:47 Uhr
Einloggen 0176 / 4567894
00:00:22 0,53 !
01.10.2010 | 14:47 Uhr
Einzelgespräche 0176 / 4567894 00:00:22 0,53 !
9,53 ! 01.10.2010 | 14:47 Uhr
00:45:45 Min 0176 / 4567894 00:00:22 0,53 !
Q W E R T Z U I O P 01.10.2010 | 14:47 Uhr
0176 / 4567894 00:00:22 0,53 !
01.10.2010 | 14:47 Uhr
SMS-Verbindungen 1,98 ! 00:00:22 0,53 !
0176 / 4567894
A S D F G H J K L 22 SMS 01.10.2010 | 14:47 Uhr
0176 / 4567894 00:00:22 0,53 !
01.10.2010 | 14:47 Uhr
00:00:22 0,53 !
Y X C V B N M X MMS-Verbindungen 0,00 ! 01.10.2010 | 14:47 Uhr
0176 / 4567894
0 MMS 0176 / 4567894
00:00:22 0,53 !
_123 Leerzeichen Return 01.10.2010 | 14:47 Uhr
Daten 12,47 ! 00:00:22 0,53 !
0176 / 4567894 weitere x Einträge laden
50000 Kilobytes
01.10.2010 | 14:47 Uhr
Mobilzahlungen 0176 / 4567894 00:00:22 0,53 !
0,00 !
simyo 12:34 PM
Tarifoptionen Basic Tarif Falsche Zahlungsmethode Bes
simyo simyo 12:34 PM
simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM sim
home simyo zurück simyo zurück simyo zurück simyo zurück simyo zur
zurück simyo
Loginvorgang läuft
Ihr Tarif: simyo Tarif Ihr Tarif: simyo Tarif Ihr Tarif: Basic Tarif Ihr Ta
FLAT SMS bestellen Ihr Tarif: simyo Tarif FLAT SMS bestellen
Lorem ipsum dolor sit amet, consetetur sadipscing Lorem ipsum dolor sit amet, consetetur sadipscing Lorem ipsum dolor sit amet, consetetur sadipscing Lorem
Lorem ipsum dolor sit amet, consetetur Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. Lorem ipsum dolor sit amet, consetetur
elitr, sed diam. elitr, sed diam. elitr, sed diam. elitr, s
sadipscing elitr, sed diam nonumy eirmod sadipscing elitr, sed diam nonumy eirmod
Kostenstoppmonat: tempor invidunt ut labore et dolore magna Kostenstoppmonat: Kostenstoppmonat: tempor invidunt ut labore et dolore magna Koste
von 07.09. bis 06.10.2010 aliquyam erat. von 07.09. bis 06.10.2010 von 07.09. bis 06.10.2010 _ Lorem ipsum dolor sit amet, consetetur aliquyam erat. von 07
sadipscing elitr, sed diam.
Danke _ Lorem ipsum dolor sit amet, consetetur
Flat simyo Flat simyo _ Lorem ipsum dolor sit amet, consetetur Bestellung leider nicht möglich Fl
Bestätigen Lorem ipsum dolor sit amet,
Flat simyo sadipscing
consetetur sadipscing elitr, sed um die FLAT SMS Tarifoption mobile
Flat Festnetz Flatdiam nonumy eirmod tempor
Festnetz bestellen zu können, müssen Sie [blubb] Fl
Das kann sich sehen lassen: simyo bietet die invidunt ut labore et dolore magna Flat Festnetz als Zahlart wählen.
Bestellt Abbrechen Bestellt Bestellt Be
günstigste Handy-Flatrate für Gespräche ins aliquyam erat. www.simyo.de
deutsche Festnetz. http://bit.ly/cWZrwZ Bitte loggen Sie sich auf www.simyo.de ein
5:17 AM Oct 22nd Via TweetDeck Flat SMS Flat SMS Flat SMS und wechseln Sie Ihre Zahlart auf [blubb] Fl
OK Bestellt
Daten 1GB Daten 1GB Daten 1GB Da
aktiv aktiv aktiv akt
Prepaid
Home
simyo 12:34 PM Tell a Friend
logout simyo Einladung fehlgeschlagen
simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM simyo 12:34 PM
Ihr Guthaben
15.- zurück simyo senden zurück simyo senden zurück simyo senden zurück simyo zurück simyo senden
9,95!
Sitemap
aufla Freunden empfehlen: Freunden empfehlen: Freunden empfehlen: Freunden empfehlen:
den Rechtliche Hinweise
§1 Lorem ipsum dolor sit
Name Max Muster | Name amet, consetetur sadipscing elitr, sed diam
Name
Datenverbrauch
nonumy eirmod tempor invidunt ut labore et
E-Mail oder Rufnummer Lorem ipsum dolor sit amet E-Mail oder Rufnummer
600 MB 1 GB
E-Mail oder Rufnummer E-Mail oder Rufnummer
Danke Einladung fehlgeschlagen
§2 Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consetetur
Senden Senden Senden dolor sit amet,
Lorem ipsum
sadipscing elitr, sed diam nonumy eirmod Senden
consetetur sadipscing elitr, sed Bitte Überprüfen Sie ob sie alle
diam nonumy eirmod tempor Felder richtig ausgefüllt haben.
Button 1 Button 2 Button 3 Ihre Vorteile invidunt ut labore et dolore magna Ihre Vorteile
Ihre Vorteile Ihre Vorteile erat.
aliquyam §3 Lorem ipsum dolor sit
_ Lorem ipsum dolor sit amit Lorem ipsum dolor sit amet, consetetur _ Lorem ipsum dolor sit amit
_ Lorem ipsum dolor sit amit Q Lorem ipsum dolor sit amit
_ W E R T Z U I O P _ Lorem ipsum dolor sit amit
_ Lorem ipsum dolor sit amit
_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit sadipscing elitr, sed diam nonumy eirmod
_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sitOK
amit _ Lorem ipsum dolor sitOK
amit
Button 4 Button 5 Button 6 _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit
A S D F G H J K L
impressum Rechtliche Hinweise Rechtliche Hinweise
Rechtliche Hinweise B
Y X C V N M X Rechtliche Hinweise
_123 Leerzeichen Return
home aufladen verbindung more
Postpaid

17. Flow-Chart integrieren

18. Sitemap und Flow-Chart
verschmelzen zu einem Wire-Flow

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

20. Darstellung im Wire-Flow

21. Der Use-Case mit herkömmlichen
Prototypen ohne Animation

25. zt
h es jet
H abe ic
ochen
abgebr
ne
Müsste h ier nicht ei
n
Rückmel dung stehe

26. Der gleiche Use-Case dieses Mal
mit Animation

27. Das App Feeling
Slide Back

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

29. „The medium is the message.“
Marshall McLuhan

30. Aber wie kann man das
App-Feeling darstellen

31. Omnigraffle

32. Omnigraffle
+ Viele Schablonen die einfach zu integrieren sind

33. Omnigraffle
+ Viele Schablonen die einfach zu integrieren sind
- Keine Animationen und interaktive Module

34. Omnigraffle
+ Viele Schablonen die einfach zu integrieren sind
- Keine Animationen und interaktive Module
- Nur als Desktopvariante vorhanden

35. balsamiq

36. balsamiq
+ Beteiligung des Teams über die Clipboard-Funktion

37. balsamiq
+ Beteiligung des Teams über die Clipboard-Funktion
- Zusatz Software für einen Prototyp benötigt

38. justinmind

39. justinmind
+ Einfach zu erstellender Klickdummy

40. justinmind
+ Einfach zu erstellender Klickdummy
- Austausch nur über Export möglich

41. justinmind
+ Einfach zu erstellender Klickdummy
- Austausch nur über Export möglich
- Nur als Desktopvariante vorhanden

42. mockability

43. mockability
+ Gute Animationen und echtes App-Feeling

44. mockability
+ Gute Animationen und echtes App-Feeling
+ Gut in den internen Wireframe-Prozess integrierbar

45. mockability
+ Gute Animationen und echtes App-Feeling
+ Gut in den internen Wireframe-Prozess integrierbar
- Nur auf dem iPhone verwendbar

46. Ein Tool für alle Fälle

47. Ein Tool für alle Fälle
Es muss jederzeit von allen Teammitgliedern erreichbar sein

48. Ein Tool für alle Fälle
Es muss jederzeit von allen Teammitgliedern erreichbar sein
Es muss ohne Programmierkenntnisse bedienbar sein

49. 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

50. 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

51. 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

52. Illustration: Steffen Stäuber

53. mokk.me
easily create mobile App mocks

54. mokk.me
easily create mobile App mocks

55. Das ist mokk.me

56. Das ist mokk.me
mokk.me ist eine reine Browser Applikation ohne Backend

57. Das ist mokk.me
mokk.me ist eine reine Browser Applikation ohne Backend
mokk.me basiert auf HTML5, CSS3, jQuery und einer CouchDB

58. 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.

59. 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

60. Einfache Erstellung der Screens

61. Verlinkungen und Übergänge

62. Speichern und Testen

63. Kunde
User
Experience
Designer
Techniker
Speichern und Testen

64. Kunde
mokk.me
User
Experience
Designer
Techniker
Speichern und Testen

65. Prototyp WEB
Kunde
mokk.me
User
Experience
Designer
Techniker
Prototyp Mobile
Speichern und Testen

66. Unterschiedliche Looks

67. Das Ergebnis: Feinstes HTML5

68. Das Ergebnis: Feinstes HTML5

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

70. Special Thanks to:
Thomas „TheReincarnator“ Jacob

71. Vielen Dank
Oliver Annen, User Experience
oliver.annen@sinnerschrader.com
Twitter: @arxoren
SinnerSchrader Deutschland GmbH
Völckersstraße 38
22765 Hamburg
www.sinnerschrader.com