Bei der Konzeption von Websites und Applikationen war bislang die Maxime “Die Lösung muss auf dem Desktop-Rechner
laufen und wird mit Tastatur und Maus bedient” ausschlaggebend. Mit der immer grösser werdenden Verbreitung von Smartphones muss diese veraltete Denkweise in den Hintergrund treten. Neu gilt, dass vorrangig für Benutzer in unterschiedlichen Situationen, an unterschiedlichen Standorten und mit kleineren, touchfähigen Screens konzipiert wird. Wir zeigen die neue Herangehensweise nicht nur theoretisch, sondern anhand eines ausgewählten Projektbeispiels aus
der Praxis auf.

1. Mobile First. Design.
Nutzer. Potentiale.
Ein Daumen. Namics.
Michael Sandmaier. Consultant UX.
Björn Amherd. Senior Consultant UX.
28. März 2012.

2. 8 Apps.
80 Minuten.

3. Sleep Cycle
3 Fachtagung. Börse. Mobile. Namics.

4. Weightbot
4 Fachtagung. Börse. Mobile. Namics.

5. Tagi
5 Fachtagung. Börse. Mobile. Namics.

6. Trailer
6 Fachtagung. Börse. Mobile. Namics.

7. Twitter
7 Fachtagung. Börse. Mobile. Namics.

8. Instagram
8 Fachtagung. Börse. Mobile. Namics.

9. Steps
9 Fachtagung. Börse. Mobile. Namics.

10. Path
10 Fachtagung. Börse. Mobile. Namics.

11. Path
8 Apps Steps
80 Minuten Instagram
Twitter
u.v.a.m. Trailer
Tagi
Weightbot
Sleep Cycle
11 Fachtagung. Börse. Mobile. Namics.

12. Agenda.
Benutzer und Bedürfnisse.
Technologie und Potential.
Mobile First.
Gestaltungsprozess.
12 Fachtagung. Börse. Mobile. Namics.

13. Benutzer und
Bedürfnisse.

14. Kontext.
14 Fachtagung. Börse. Mobile. Namics.

15. When are we mobile?
Nutzungsspanne. Mobile 3G Traffic Patterns
Laptop
Tablet
Smartphone
9 12 15 18 21 24
Source: http://bit.ly/qL5NdX 52
15 Fachtagung. Börse. Mobile. Namics.

16. Interaktion.
16 Fachtagung. Börse. Mobile. Namics.

17. Zeitvertrieb.
17 Fachtagung. Börse. Mobile. Namics.

18. Nutzertypen.
18 Fachtagung. Börse. Mobile. Namics.

19. Benutzer und
Bedürfnisse.
Kontext.
Nutzungsspanne.
Interaktion.
Zeitvertrieb.
Nutzertypen.
19 Fachtagung. Börse. Mobile. Namics.

20. Mobile
Technologien.
Potential.

21. Mobile Technologien.
Hohes Potential für
effizienteren Service und
erweiterte Kommunikation.
21 Fachtagung. Börse. Mobile. Namics.

22. Touch. Gesten.
22 Fachtagung. Börse. Mobile. Namics.

23. Sprachsteuerung.
23 Fachtagung. Börse. Mobile. Namics.

24. Lokalisierung.
24 Fachtagung. Börse. Mobile. Namics.

25. Kamera.
25 Fachtagung. Börse. Mobile. Namics.

26. Telefon.
26 Fachtagung. Börse. Mobile. Namics.

27. Texting.
27 Fachtagung. Börse. Mobile. Namics.

28. Offlinefähigkeit.
28 Fachtagung. Börse. Mobile. Namics.

29. Cloud.
29 Fachtagung. Börse. Mobile. Namics.

30. Near Field
Communication.
30 Fachtagung. Börse. Mobile. Namics.

31. Technologie.
Touch. Gesten.
Sprachsteuerung.
Lokalisierung.
Kamera.
Telefon.
Texting.
Offlinefähigkeit.
Cloud.
Near Field Communication.
31 Fachtagung. Börse. Mobile. Namics.

32. Mobile First.

33. Luke's Idee
33 Fachtagung. Börse. Mobile. Namics.

34. Mobile First.
Zwei Bedeutungen.
Mobile ist wichtiger als Desktop.
Zuerst Mobile, dann Desktop.
34 Fachtagung. Börse. Mobile. Namics.

35. Essenz von
Füllstoffen trennen.
35 Fachtagung. Börse. Mobile. Namics.

36. Mobilisieren, nicht
verkleinern.
Relevant.
Schlank.
Schnell.
36 Fachtagung. Börse. Mobile. Namics.

37. Gestaltung
für den mobilen
Kanal.

38. Gestaltung.
Prozess.
Strategie
Ziele
Testen Analyse
Prototyp Business &
Nutzer
Design
Interaktion oder Grafik
38 Fachtagung. Börse. Mobile. Namics.

39. Gestaltung. Haltung.
Fachtagung. Börse. Mobile. Namics.

40. Kreativ.
Zuhören.
Beobachten.
Ausprobieren.
Loslassen.
Spielen.
40 Fachtagung. Börse. Mobile. Namics.

41. Interdisziplinär.
41 Fachtagung. Börse. Mobile. Namics.

42. Agil.
42 Fachtagung. Börse. Mobile. Namics.

43. Nutzerzentriert.
43 Fachtagung. Börse. Mobile. Namics.

44. Merci!
Michael Sandmaier. @roggeveen
Björn Amherd. @amherd

45. Quellen und Nachweise
§ http://mccricks.wordpress.com/2011/12/08/context-is-everything-for-this-card-set
§ http://www.haptimap.org/designtools/due.html
§ http://www.lukew.com/presos
§ http://www.travelandfoodnotes.com/2012/02/best-sign-ever-seen-in-brooklyn.html
§ http://www.designboom.com/weblog/cat/16/view/15557/tesco-virtual-supermarket-in-a-subway-station.html
§ http://bluestacks.com/mr-android-2011/
§ http://static.lukew.com/TouchGestureCards.pdf
§ http://www.mobiflip.de/was-bringt-mir-ein-nfc-chip-im-smartphone/
§ http://www.abookapart.com/products/mobile-first
§ http://farbror-sid.se/home/images/2010/11/elvis-at-uncle-milty.jpg
§ http://images.zeno.org/Meyers-1905/I/big/Wm04676a.jpg
Erwähnte Apps
§ http://www.sleepcycle.com
§ http://tapbots.com/software/weightbot
§ http://itunes.apple.com/ch/app/tages-anzeiger/id322823380?l=en&mt=8
§ http://itunes.apple.com/us/app/itunes-movie-trailers/id471966214
§ https://mobile.twitter.com
§ http://instagr.am
§ http://stepboard.net
§ https://path.com
§ http://acrossair.com/acrossair_app_augmented_reality_nearestsubway_newyork_for_iPhone_3GS.htm
45