Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
El Cine Y La Historia
El Cine Y La Historia
Cargando en…3
×

Eche un vistazo a continuación

1 de 71 Anuncio

Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"

Descargar para leer sin conexión

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

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

Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (19)

Más reciente (20)

Anuncio

Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"

  1. 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,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. 3. #1 Mobiles Internet ist überall
  4. 4. Beim Kaffee trinken http://www.flickr.com/photos/alexandremainguenaud/5400861326/
  5. 5. Auf dem Weg zur Party http://www.flickr.com/photos/chrisjl/5664339020/
  6. 6. Beim Kamelrennen http://www.flickr.com/photos/39708943@N07/4526333882/
  7. 7. Während dem Schlafen http://www.flickr.com/photos/29071099@N05/3084995941/
  8. 8. #2 Das Nutzungsverhalten ist anders
  9. 9. Viel Informationen auf engem Raum http://www.flickr.com/photos/recompose/2303691635/
  10. 10. Eingeschränkte Bedienung http://www.flickr.com/photos/alachia/4916667666/
  11. 11. Die User sind fokussierter http://www.flickr.com/photos/39708943@N07/4526333882/
  12. 12. Was bedeutet das für uns?
  13. 13. Das Projekt: Die Mobile App
  14. 14. Wir starteten sofort mit unseren Tools: Flow-Charts Sitemaps Wireframes
  15. 15. Wireframes
  16. 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. 17. Flow-Chart integrieren
  18. 18. Sitemap und Flow-Chart verschmelzen zu einem Wire-Flow
  19. 19. Der Use-Case: Ein Kunde bricht den Prozess „Aufladen“ ab.
  20. 20. Darstellung im Wire-Flow
  21. 21. Der Use-Case mit herkömmlichen Prototypen ohne Animation
  22. 22. zt h es jet H abe ic ochen abgebr ne Müsste h ier nicht ei n Rückmel dung stehe
  23. 23. Der gleiche Use-Case dieses Mal mit Animation
  24. 24. Das App Feeling Slide Back
  25. 25. Das „App-Feeling“ ist entscheidend für die User Experience.
  26. 26. „The medium is the message.“ Marshall McLuhan
  27. 27. Aber wie kann man das App-Feeling darstellen
  28. 28. Omnigraffle
  29. 29. Omnigraffle + Viele Schablonen die einfach zu integrieren sind
  30. 30. Omnigraffle + Viele Schablonen die einfach zu integrieren sind - Keine Animationen und interaktive Module
  31. 31. Omnigraffle + Viele Schablonen die einfach zu integrieren sind - Keine Animationen und interaktive Module - Nur als Desktopvariante vorhanden
  32. 32. balsamiq
  33. 33. balsamiq + Beteiligung des Teams über die Clipboard-Funktion
  34. 34. balsamiq + Beteiligung des Teams über die Clipboard-Funktion - Zusatz Software für einen Prototyp benötigt
  35. 35. justinmind
  36. 36. justinmind + Einfach zu erstellender Klickdummy
  37. 37. justinmind + Einfach zu erstellender Klickdummy - Austausch nur über Export möglich
  38. 38. justinmind + Einfach zu erstellender Klickdummy - Austausch nur über Export möglich - Nur als Desktopvariante vorhanden
  39. 39. mockability
  40. 40. mockability + Gute Animationen und echtes App-Feeling
  41. 41. mockability + Gute Animationen und echtes App-Feeling + Gut in den internen Wireframe-Prozess integrierbar
  42. 42. mockability + Gute Animationen und echtes App-Feeling + Gut in den internen Wireframe-Prozess integrierbar - Nur auf dem iPhone verwendbar
  43. 43. Ein Tool für alle Fälle
  44. 44. Ein Tool für alle Fälle Es muss jederzeit von allen Teammitgliedern erreichbar sein
  45. 45. Ein Tool für alle Fälle Es muss jederzeit von allen Teammitgliedern erreichbar sein Es muss ohne Programmierkenntnisse bedienbar sein
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. Illustration: Steffen Stäuber
  50. 50. mokk.me easily create mobile App mocks
  51. 51. mokk.me easily create mobile App mocks
  52. 52. Das ist mokk.me
  53. 53. Das ist mokk.me mokk.me ist eine reine Browser Applikation ohne Backend
  54. 54. Das ist mokk.me mokk.me ist eine reine Browser Applikation ohne Backend mokk.me basiert auf HTML5, CSS3, jQuery und einer CouchDB
  55. 55. 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.
  56. 56. 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
  57. 57. Einfache Erstellung der Screens
  58. 58. Verlinkungen und Übergänge
  59. 59. Speichern und Testen
  60. 60. Kunde User Experience Designer Techniker Speichern und Testen
  61. 61. Kunde mokk.me User Experience Designer Techniker Speichern und Testen
  62. 62. Prototyp WEB Kunde mokk.me User Experience Designer Techniker Prototyp Mobile Speichern und Testen
  63. 63. Unterschiedliche Looks
  64. 64. Das Ergebnis: Feinstes HTML5
  65. 65. Das Ergebnis: Feinstes HTML5
  66. 66. Und.... Action: http://www.mokk.me
  67. 67. Special Thanks to: Thomas „TheReincarnator“ Jacob
  68. 68. Vielen Dank Oliver Annen, User Experience oliver.annen@sinnerschrader.com Twitter: @arxoren SinnerSchrader Deutschland GmbH Völckersstraße 38 22765 Hamburg www.sinnerschrader.com

×