Design und Konzeption müssen immer mehr Formate berücksichtigen. Das zentrale Stichwort heißt Responsive Design. Der Workshop beleuchtet die neuen Bedingungen im Web und die grundlegende Herangehensweise an modernes Web- und Interfacedesign.

1. 05.05.2010 Seite 1 © eparo GmbH, 2010
Vom iPad bis zum Cinema-Display:
Der Einstieg in das Multi-Screen-Design für verschiedene
Display-Größen und Devices.
Dr. Rolf Schulte Strathaus, Geschäftsführer eparo GmbH
World Usability Day 2012, Hamburg, 09.11.2012

2. 05.05.2010 Seite 2 © eparo GmbH, 2010
Das machen wir heute
Vorstellungsrunde & Einleitung
Mobile first, future friendly, Multiscreen..
Vom Scharlatan zum Fu-Master
Übung 1: Interface-Quartett
Übung 2: Ein Shop in 4 Größen
Fragen & Antworten

3. 05.05.2010 Seite 3 © eparo GmbH, 2010
Das machen wir heute
Vorstellungsrunde & Einleitung
Mobile first, future friendly, Multiscreen...
Vom Scharlatan zum Fu-Master
Übung 1: Interface-Quartett
Übung 2: Ein Shop in 4 Größen
Fragen & Antworten

4. 05.05.2010 Seite 4 © eparo GmbH, 2010
Name
Firma
Beruf
UX Erfahrungen
Erwartungen
Lieblingsfilm

5. 05.05.2010 Seite 5 © eparo GmbH, 2010
eparo GmbH
User Centered Design &
Usability Services

6. 05.05.2010 Seite 6 © eparo GmbH, 2010
Wir erforschen Nutzer.

7. 05.05.2010 Seite 7 © eparo GmbH, 2010
Wir konzipieren und bauen
Prototypen.
Axure Kurse
in Hamburg
3, 4. und 5.
Dezember

8. 05.05.2010 Seite 8 © eparo GmbH, 2010
Wir testen User Experience
und Usability ...

9. 05.05.2010 Seite 9 © eparo GmbH, 2010

10. 05.05.2010 Seite 10 © eparo GmbH, 2010
 Inhaltspunkt

11. 05.05.2010 Seite 11 © eparo GmbH, 2010
Das machen wir heute
Vorstellungsrunde & Einleitung
Mobile first, future friendly, Multiscreen...
Vom Scharlatan zum Fu-Master
Übung 1: Interface-Quartett
Übung 2: Ein Shop in 4 Größen
Fragen & Antworten

12. 05.05.2010 Seite 12 © eparo GmbH, 2010
Mobile ist überall

13. 05.05.2010 Seite 13 © eparo GmbH, 2010

14. 05.05.2010 Seite 14 © eparo GmbH, 2010

15. 05.05.2010 Seite 15 © eparo GmbH, 2010

16. 05.05.2010 Seite 16 © eparo GmbH, 2010

17. 05.05.2010 Seite 17 © eparo GmbH, 2010

18. 05.05.2010 Seite 18 © eparo GmbH, 2010
Patterns for Multiscreen
Strategies
Precious
Mobile first
Luke Wroblewski
Future friendly
Brad Frost
Rethinking the
mobile web
Stephanie Rieger

19. 05.05.2010 Seite 19 © eparo GmbH, 2010
Mobile first
Luke Wroblewski
http://www.lukew.com/resources/articles/MobileFirst_LukeW.pdf

20. 05.05.2010 Seite 20 © eparo GmbH, 2010
Rethinking the
mobile web
Stephanie Rieger
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

21. 05.05.2010 Seite 21 © eparo GmbH, 2010
Patterns for Multiscreen
Strategies
Precious
http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies

22. 05.05.2010 Seite 22 © eparo GmbH, 2010
Future friendly
Brad Frost
http://bradfrostweb.com/blog/web/for-a-future-friendly-web/

23. 05.05.2010 Seite 23 © eparo GmbH, 2010
Das machen wir heute
Vorstellungsrunde & Einleitung
Mobile first, future friendly, Multiscreen...
Vom Scharlatan zum Fu-Master
Übung 1: Interface-Quartett
Übung 2: Ein Shop in 4 Größen
Fragen & Antworten

24. 05.05.2010 Seite 24 © eparo GmbH, 2010
Multiscreen
Sie sind nicht im App Store...

25. 05.05.2010 Seite 25 © eparo GmbH, 2010

26. 05.05.2010 Seite 26 © eparo GmbH, 2010
Faul ? Ja
Bequem? Ja
Leidensfähig? Ja
Mobil? Egal
1024 x 768? Definitely NOT.

27. 05.05.2010 Seite 27 © eparo GmbH, 2010
Pierer’s Universal-Lexikon definierte 1857
Charlatan als jemanden, der
„es versteht, sich den Schein von
Gelehrsamkeit u. Weisheit zu geben u. durch
niedere Mittel die öffentliche Aufmerksamkeit
auf sich zu ziehen sucht, besonders wird
darunter ein Quacksalber verstanden, welcher
sich durch Marktschreierei ankündigt…“
– Pierer’s Universal-Lexikon[1]

28. 05.05.2010 Seite 28 © eparo GmbH, 2010

29. 05.05.2010 Seite 29 © eparo GmbH, 2010
Wer klickt
hier auf OK?

30. 05.05.2010 Seite 30 © eparo GmbH, 2010
Das machen wir heute
Vorstellungsrunde & Einleitung
Mobile first, future friendly, Multiscreen...
Vom Scharlatan zum Fu-Master
Übung 1: Interface-Quartett
Übung 2: Ein Shop in 4 Größen
Fragen & Antworten

31. 05.05.2010 Seite 31 © eparo GmbH, 2010
Wir helfen
Frontlineshop.de

32. 05.05.2010 Seite 32 © eparo GmbH, 2010
Wer präsentiert zuerst?
Keine Sorge, jede Gruppe kommt dran...
Bitte in drei Gruppen aufteilen

33. Das ist Björn
Name:
Björn Hitzel
Alter:
35
Stadt:
Hamburg
Beruf:
Event-Manager (selbstständig)
Lebenssituation:
Freundin
Einkommen/Jahr:
70.000 EUR
Internetnutzung/-erfahrung:
Sehr hohe Interneterfahrung, da er damit aufgewachsen
ist.
Nutzt viele Angebote im Internet, ist aber bei der Abgabe
personenbezogener Daten sehr kritisch, sofern der
Mehrwert und die Notwendigkeit sich nicht sofort
darstellen.
Hat seine Freundin über das Internet kennen gelernt.
Spielt häufig Online-Games im Netzwerk
Device-Nutzung
Ist sehr flexibel, wie er seine diversen Geräte verwendet.
Kennt sich mit den technischen Möglichkeiten gut aus.
Surft auch durchaus mit dem iPhone, wenn er nicht
gerade Formulare ausfüllen muss oder Zugangsdaten
braucht.
Telefon:
iPhone 4S
Computer:
MacBook Pro 15''
+ Cinema Display 27''
iPad 2

34. 05.05.2010 Seite 34 © eparo GmbH, 2010
Wie verkauft
Frontlineshop
Mode so, dass es Björn
auf allen Devices richtig
Spaß macht?

35. 05.05.2010 Seite 35 © eparo GmbH, 2010
Aufgabe 1 Multi-Device-Strategie
Wie sollte frontlineshop.com auf
verschiedenen Devices funktionieren?
 iPhone
 iPad
 Notebook
 Full HD Display 27''
Erstellt eine schlüssige Strategie für Content und
Funktionen.
Touchscreen und Device-Fähigkeiten nicht
vergessen.
Das Ganz soll dann natürlich präsentiert werden.
Full HD Display 27''
iPhone iPad Notebook

36. 05.05.2010 Seite 36 © eparo GmbH, 2010
Wer präsentiert zuerst?
Keine Sorge, jede Gruppe kommt dran...

37. 05.05.2010 Seite 37 © eparo GmbH, 2010
PAUSE
15 Minuten

38. 05.05.2010 Seite 38 © eparo GmbH, 2010
Das machen wir heute
Vorstellungsrunde & Einleitung
Mobile first, future friendly, Multiscreen...
Vom Scharlatan zum Fu-Master
Übung 1: Interface-Quartett
Übung 2: Ein Shop in 4 Größen
Fragen & Antworten

39. 05.05.2010 Seite 39 © eparo GmbH, 2010
Aufgabe 2 Produktdetailseite
Jetzt geht es um konkrete Ideen für die
Produktdetailseite?
 iPhone
 iPad
 Full HD Display 27''
Überlegt euch, wie die Produktdetailseite für
iPohne, iPad und Full HD Display funktioniert.
Full HD Display 27''
iPhone iPad

40. 05.05.2010 Seite 40 © eparo GmbH, 2010
Wer will jetzt als Erster?
Nicht vordrängeln, jeder kommt dran...

41. 05.05.2010 Seite 41 © eparo GmbH, 2010
Ende. Finito. Le Fin.
Vielleicht können wir das ja heute nachmittag in
der Session noch weiter diskutieren oder den
anderen vorstellen.

42. 05.05.2010 Seite 42 © eparo GmbH, 2010
Happy Multiscreening...
eparo GmbH
User Centered Design & Usability Tests
Stahltwiete 22
22761 Hamburg
www.eparo.de
© eparo GmbH
Kontakt
Dr. Rolf Schulte Strathaus
T +49-40-76 99 12 77
M +49 (0)162 10 24 384
rolf.schulte@eparo.de