Mobile First-Wenn die Konzeption für Smartphones zur Hauptsache wird

Post on 09-May-2015

2.380 views 2 download

description

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.

Transcript of Mobile First-Wenn die Konzeption für Smartphones zur Hauptsache wird

Mobile First. Design. Nutzer. Potentiale. Ein Daumen. Namics.

Michael Sandmaier. Consultant UX. Björn Amherd. Senior Consultant UX. 28. März 2012.

8 Apps. 80 Minuten.

3

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

4

Weightbot

Fachtagung. Börse. Mobile. Namics.

5

Tagi

Fachtagung. Börse. Mobile. Namics.

6

Trailer

Fachtagung. Börse. Mobile. Namics.

7

Twitter

Fachtagung. Börse. Mobile. Namics.

8

Instagram

Fachtagung. Börse. Mobile. Namics.

9

Steps

Fachtagung. Börse. Mobile. Namics.

10

Path

Fachtagung. Börse. Mobile. Namics.

11

8 Apps 80 Minuten

Path

Steps

Instagram

Twitter

Sleep Cycle

Weightbot

Tagi

Trailer

Fachtagung. Börse. Mobile. Namics.

u.v.a.m.

12

Agenda. Benutzer und Bedürfnisse. Technologie und Potential. Mobile First. Gestaltungsprozess.

Fachtagung. Börse. Mobile. Namics.

Benutzer und Bedürfnisse.

14

Kontext.

Fachtagung. Börse. Mobile. Namics.

15

Nutzungsspanne.

52

When are we mobile?

Mobile 3G Traffic Patterns

Source: http://bit.ly/qL5NdX

9 12 15 18 21 24

Laptop

Tablet

Smartphone

Fachtagung. Börse. Mobile. Namics.

16

Interaktion.

Fachtagung. Börse. Mobile. Namics.

17

Zeitvertrieb.

Fachtagung. Börse. Mobile. Namics.

18

Nutzertypen.

Fachtagung. Börse. Mobile. Namics.

19

Benutzer und Bedürfnisse. Kontext. Nutzungsspanne. Interaktion. Zeitvertrieb. Nutzertypen.

Fachtagung. Börse. Mobile. Namics.

Mobile Technologien. Potential.

21

Mobile Technologien. Hohes Potential für effizienteren Service und erweiterte Kommunikation.

Fachtagung. Börse. Mobile. Namics.

22

Touch. Gesten.

Fachtagung. Börse. Mobile. Namics.

23

Sprachsteuerung.

Fachtagung. Börse. Mobile. Namics.

24

Lokalisierung.

Fachtagung. Börse. Mobile. Namics.

25

Kamera.

Fachtagung. Börse. Mobile. Namics.

26

Telefon.

Fachtagung. Börse. Mobile. Namics.

27

Texting.

Fachtagung. Börse. Mobile. Namics.

28

Offlinefähigkeit.

Fachtagung. Börse. Mobile. Namics.

29

Cloud.

Fachtagung. Börse. Mobile. Namics.

30

Near Field Communication.

Fachtagung. Börse. Mobile. Namics.

31

Technologie. Touch. Gesten. Sprachsteuerung. Lokalisierung. Kamera. Telefon. Texting. Offlinefähigkeit. Cloud. Near Field Communication.

Fachtagung. Börse. Mobile. Namics.

Mobile First.

33

Luke's Idee

Fachtagung. Börse. Mobile. Namics.

34

Mobile First. Zwei Bedeutungen. Mobile ist wichtiger als Desktop. Zuerst Mobile, dann Desktop.

Fachtagung. Börse. Mobile. Namics.

35

Essenz von Füllstoffen trennen.

Fachtagung. Börse. Mobile. Namics.

36

Mobilisieren, nicht verkleinern. Relevant. Schlank. Schnell.

Fachtagung. Börse. Mobile. Namics.

Gestaltung für den mobilen Kanal.

38

Gestaltung. Prozess.

Design Interaktion oder Grafik

Analyse Business &

Nutzer

Testen Prototyp

Strategie Ziele

Fachtagung. Börse. Mobile. Namics.

Gestaltung. Haltung.

Fachtagung. Börse. Mobile. Namics.

40

Kreativ. Zuhören. Beobachten. Ausprobieren. Loslassen. Spielen.

Fachtagung. Börse. Mobile. Namics.

41

Interdisziplinär.

Fachtagung. Börse. Mobile. Namics.

42

Agil.

Fachtagung. Börse. Mobile. Namics.

43

Nutzerzentriert.

Fachtagung. Börse. Mobile. Namics.

Michael Sandmaier. @roggeveen Björn Amherd. @amherd

Merci!

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