Desktop vs Mobile<br />1<br />Mobile. Design. Create. Namics.<br />C. Medvesek 10-2010<br />
Wieso Mobil?<br />Mobile. Szenarien. Nutzer.<br />2<br />Mobile. Create. Basics.<br />10-2010<br />
Mobile User Szenarien<br />UrgedNow<br />BoredNow<br />RepetitiveNow<br />Mouse vs Gestures<br />3<br />Mobile. Create. Ba...
Mousevs Touch<br />Interaction. Desktop. Touch.<br />4<br />Mobile. Create. Basics.<br />10-2010<br />
Multi. Touch. Gestures. <br />5<br />Mouse vs Touch<br />Mobile. Create. Basics.<br />10-2010<br />
Standards. Touch. Gestures.<br />Mouse vs Touch<br />6<br />Pressed (Tap’n’hold)<br />Tap<br />Pinch<br />Swipe<br />Sprea...
Standards. Touch. Mouse.<br />Mouse vs Touch<br />7<br />Mobile. Create. Basics. <br />10-2010<br />
Standard. Touch. Actions.<br />Mouse vs Touch<br />8<br />Mobile. Create. Basics. <br />10-2010<br />
Kein Mouse-Over oder Hover<br />Gestalte und teste zunächst für ein Touch Interface und füge anschliessend als Zugabe Hove...
Kein Focus oder auswählen von Objekten<br />Ein Tap öffnet immer ein Objekt, daher kann man keinen Focus / Highlight darau...
Kein Focus oder auswählen von Objekten<br />Mouse vs Touch<br />11<br />Mobile. Create. Basics. <br />10-2010<br />
Alternativ: Checkbox oder Objektmenü<br />Mouse vs Touch<br />12<br />Mobile. Create. Basics. <br />10-2010<br />
Keine Bedienelemente wenn eine direkte Manipulation möglich ist.<br />Insbesondere bei Karten oder Bilddarstellungen kann ...
Direkte Manipulation nutzen<br />Mouse vs Touch<br />14<br />Mobile. Create. Basics. <br />10-2010<br />
Grössere Bedienelemente<br />Um ungewollte Aktionen zu vermeiden benötigen Touch-Geräte auf Grund der Fingereingabe grösse...
Optimale Touch-Bereiche<br />GemässiPhone HI Guidelines gilt:<br />Breite 29 Pixel (58 Pixel Retina Display)<br />Höhe 44 ...
iPadvsiPhone<br />Interaction. Desktop. Touch.<br />17<br />Mobile. Create. Basics.<br />10-2010<br />
Sozial. Privat. Offen.<br />iPhone und iPad unterscheiden sich im Gebrauch und den Situationen in denen sie eingesetzt wer...
Persönliche Einschätzung<br />Mouse vs Touch<br />19<br />iPhone<br />iPad<br />Privat<br />Öffentlich<br />Mobile. Create...
Bedienung. Rechts. Links. <br />iPhone und iPad unterscheiden sich in der Bedienung und Handhabung. Das iPhone kann mit nu...
Bedienbare Zonen mit einer Hand<br />Mouse vs Touch<br />21<br />Linke Hand<br />Rechte Hand<br />hoch<br />quer<br />Mobi...
Bedienbare Zonen mit beiden Händen<br />Mouse vs Touch<br />22<br />quer<br />Mobile. Create. Basics. <br />10-2010<br />
Fazit<br />Touch. Interface. Basics. <br />23<br />Mobile. Create. Basics.<br />10-2010<br />
Meldung. Status. Sichtbarkeit.<br />Wichtige Infos und Meldungen gehören nach oben, wo sie nicht von der Hand bedeckt werd...
Berühren. Finger. Aktionen.<br />Zeige deutlich die bedienbaren Elemente und wo sie zu berühren sind<br />Fazit<br />25<br...
Vergrössern. Bewegen. Ändern.<br />Berücksichtige physikalischen Gesetze bei direkten Manipulationen<br />Fazit<br />26<br...
Ort. Anzeigen. Optionen.<br />Zeige zusätzliche Infos oder Optionen in der Nähe des Fingers<br />Fazit<br />27<br />Mobile...
Informationen. Flach. <br />Vermeide Pop-Up-Fenster für zusätzliche Informationen<br />Fazit<br />28<br />Mobile. Create. ...
Scrollen. Wischen. Blättern.<br />Nutze vertikales und horizontales Scrollen<br />Fazit<br />10-2010<br />Mobile. Create. ...
claus.medvesek@namics.com<br />© Namics<br />30<br />Mobile. Create. Basics.<br />10-2010<br />
Upcoming SlideShare
Loading in...5
×

Desktop-vs-Mobile

839

Published on

Gegenüberstellung von Desktop, iPhone und iPad unter dem Aspekt der Benutzerführung und Interface.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
839
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desktop-vs-Mobile

  1. 1. Desktop vs Mobile<br />1<br />Mobile. Design. Create. Namics.<br />C. Medvesek 10-2010<br />
  2. 2. Wieso Mobil?<br />Mobile. Szenarien. Nutzer.<br />2<br />Mobile. Create. Basics.<br />10-2010<br />
  3. 3. Mobile User Szenarien<br />UrgedNow<br />BoredNow<br />RepetitiveNow<br />Mouse vs Gestures<br />3<br />Mobile. Create. Basics. <br />10-2010<br />
  4. 4. Mousevs Touch<br />Interaction. Desktop. Touch.<br />4<br />Mobile. Create. Basics.<br />10-2010<br />
  5. 5. Multi. Touch. Gestures. <br />5<br />Mouse vs Touch<br />Mobile. Create. Basics.<br />10-2010<br />
  6. 6. Standards. Touch. Gestures.<br />Mouse vs Touch<br />6<br />Pressed (Tap’n’hold)<br />Tap<br />Pinch<br />Swipe<br />Spread<br />Double-Tap<br />Rotate<br />Mobile. Create. Basics. <br />10-2010<br />
  7. 7. Standards. Touch. Mouse.<br />Mouse vs Touch<br />7<br />Mobile. Create. Basics. <br />10-2010<br />
  8. 8. Standard. Touch. Actions.<br />Mouse vs Touch<br />8<br />Mobile. Create. Basics. <br />10-2010<br />
  9. 9. Kein Mouse-Over oder Hover<br />Gestalte und teste zunächst für ein Touch Interface und füge anschliessend als Zugabe Hover- oder Tooltip-Effekte hinzu.<br />9<br />Mobile. Create. Basics.<br />10-2010<br />
  10. 10. Kein Focus oder auswählen von Objekten<br />Ein Tap öffnet immer ein Objekt, daher kann man keinen Focus / Highlight darauf legen, um anschliessend dieses Objekt mit einer Aktion zu verändern.<br />10<br />Mobile. Create. Basics.<br />10-2010<br />
  11. 11. Kein Focus oder auswählen von Objekten<br />Mouse vs Touch<br />11<br />Mobile. Create. Basics. <br />10-2010<br />
  12. 12. Alternativ: Checkbox oder Objektmenü<br />Mouse vs Touch<br />12<br />Mobile. Create. Basics. <br />10-2010<br />
  13. 13. Keine Bedienelemente wenn eine direkte Manipulation möglich ist.<br />Insbesondere bei Karten oder Bilddarstellungen kann auf Bedienelemente wie Zoom oder Bewegen verzichtet werden, das dies direkt über Touch-Gestures möglich ist.<br />13<br />Mobile. Create. Basics.<br />10-2010<br />
  14. 14. Direkte Manipulation nutzen<br />Mouse vs Touch<br />14<br />Mobile. Create. Basics. <br />10-2010<br />
  15. 15. Grössere Bedienelemente<br />Um ungewollte Aktionen zu vermeiden benötigen Touch-Geräte auf Grund der Fingereingabe grössere Berührflächen. <br />15<br />Mobile. Create. Basics.<br />10-2010<br />
  16. 16. Optimale Touch-Bereiche<br />GemässiPhone HI Guidelines gilt:<br />Breite 29 Pixel (58 Pixel Retina Display)<br />Höhe 44 Pixel (88 Pixel Retina Display)<br />Entspricht ca. 9mm<br />Mouse vs Touch<br />16<br />Mobile. Create. Basics. <br />10-2010<br />
  17. 17. iPadvsiPhone<br />Interaction. Desktop. Touch.<br />17<br />Mobile. Create. Basics.<br />10-2010<br />
  18. 18. Sozial. Privat. Offen.<br />iPhone und iPad unterscheiden sich im Gebrauch und den Situationen in denen sie eingesetzt werden.<br />18<br />Mobile. Create. Basics.<br />10-2010<br />
  19. 19. Persönliche Einschätzung<br />Mouse vs Touch<br />19<br />iPhone<br />iPad<br />Privat<br />Öffentlich<br />Mobile. Create. Basics. <br />10-2010<br />
  20. 20. Bedienung. Rechts. Links. <br />iPhone und iPad unterscheiden sich in der Bedienung und Handhabung. Das iPhone kann mit nur einer Hand bedient und gehalten werden. Das iPad muss dazu abgestellt oder mit der zweiten Hand gehalten werden.<br />20<br />Mobile. Create. Basics.<br />10-2010<br />
  21. 21. Bedienbare Zonen mit einer Hand<br />Mouse vs Touch<br />21<br />Linke Hand<br />Rechte Hand<br />hoch<br />quer<br />Mobile. Create. Basics. <br />10-2010<br />
  22. 22. Bedienbare Zonen mit beiden Händen<br />Mouse vs Touch<br />22<br />quer<br />Mobile. Create. Basics. <br />10-2010<br />
  23. 23. Fazit<br />Touch. Interface. Basics. <br />23<br />Mobile. Create. Basics.<br />10-2010<br />
  24. 24. Meldung. Status. Sichtbarkeit.<br />Wichtige Infos und Meldungen gehören nach oben, wo sie nicht von der Hand bedeckt werden.<br />Fazit<br />24<br />Mobile. Create. Basics. <br />10-2010<br />
  25. 25. Berühren. Finger. Aktionen.<br />Zeige deutlich die bedienbaren Elemente und wo sie zu berühren sind<br />Fazit<br />25<br />Mobile. Create. Basics. <br />10-2010<br />
  26. 26. Vergrössern. Bewegen. Ändern.<br />Berücksichtige physikalischen Gesetze bei direkten Manipulationen<br />Fazit<br />26<br />Mobile. Create. Basics. <br />10-2010<br />
  27. 27. Ort. Anzeigen. Optionen.<br />Zeige zusätzliche Infos oder Optionen in der Nähe des Fingers<br />Fazit<br />27<br />Mobile. Create. Basics. <br />10-2010<br />
  28. 28. Informationen. Flach. <br />Vermeide Pop-Up-Fenster für zusätzliche Informationen<br />Fazit<br />28<br />Mobile. Create. Basics. <br />10-2010<br />
  29. 29. Scrollen. Wischen. Blättern.<br />Nutze vertikales und horizontales Scrollen<br />Fazit<br />10-2010<br />Mobile. Create. Basics. <br />29<br />GleicherInhalt<br />ÄhnlicherInhalt<br />
  30. 30. claus.medvesek@namics.com<br />© Namics<br />30<br />Mobile. Create. Basics.<br />10-2010<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×