Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"
•
6 likes•2,028 views
Die Entwicklung von mobilen Applikationen stellen Informationsarchitekten vor eine neue Herausforderung. Um diese zu meistern haben wir ein Tool entwickelt, dass die Grenzen zwischen Konzeption und Umsetzung verschmelzen lässt. Herausgekommen ist dabei mokk.me (http://www.mokk.me).
Recommended
More Related Content
Viewers also liked
Viewers also liked (19)
Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"
- 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
- 5. Auf dem Weg zur Party http://www.flickr.com/photos/chrisjl/5664339020/
- 8. #2 Das Nutzungsverhalten ist anders
- 9. Viel Informationen auf engem Raum http://www.flickr.com/photos/recompose/2303691635/
- 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
- 18. Sitemap und Flow-Chart verschmelzen zu einem Wire-Flow
- 19. Der Use-Case: Ein Kunde bricht den Prozess „Aufladen“ ab.
- 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
- 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
- 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
- 67. Das Ergebnis: Feinstes HTML5
- 68. Das Ergebnis: Feinstes HTML5
- 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