eparo – vom ipad zum cinema-display (vortrag wud 2012 – rolf schulte strathaus)

42
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

Upload: eparo-gmbh

Post on 25-Jan-2015

422 views

Category:

Design


0 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 2: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 3: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 4: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 4 © eparo GmbH, 2010

Name

Firma

Beruf

UX Erfahrungen

Erwartungen

Lieblingsfilm

Page 5: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 5 © eparo GmbH, 2010

eparo GmbHUser Centered Design & Usability Services

Page 6: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 6 © eparo GmbH, 2010

Wir erforschen Nutzer.

Page 7: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 7 © eparo GmbH, 2010

Wir konzipieren und bauen Prototypen.

Axure Kurse

in Hamburg

3, 4. und 5.

Dezember

Page 8: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 8 © eparo GmbH, 2010

Wir testen User Experience und Usability ...

Page 9: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 9 © eparo GmbH, 2010

Page 10: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 10 © eparo GmbH, 2010

Inhaltspunkt

Page 11: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 12: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 12 © eparo GmbH, 2010

Mobile ist überall

Page 13: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 13 © eparo GmbH, 2010

Page 14: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 14 © eparo GmbH, 2010

Page 15: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 15 © eparo GmbH, 2010

Page 16: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 16 © eparo GmbH, 2010

Page 17: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 17 © eparo GmbH, 2010

Page 18: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 18 © eparo GmbH, 2010

Patterns for Multiscreen StrategiesPrecious

Mobile firstLuke Wroblewski

Future friendlyBrad Frost

Rethinking the mobile webStephanie Rieger

Page 19: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 19 © eparo GmbH, 2010

Mobile firstLuke Wroblewski

http://www.lukew.com/resources/articles/MobileFirst_LukeW.pdf

Page 20: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 20 © eparo GmbH, 2010

Rethinking the mobile webStephanie Rieger

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Page 21: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 21 © eparo GmbH, 2010

Patterns for Multiscreen StrategiesPrecious

http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies

Page 22: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 22 © eparo GmbH, 2010

Future friendlyBrad Frosthttp://bradfrostweb.com/blog/web/for-a-future-friendly-web/

Page 23: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 24: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 24 © eparo GmbH, 2010

Multiscreen

Sie sind nicht im App Store...

Page 25: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 25 © eparo GmbH, 2010

Page 26: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 26 © eparo GmbH, 2010

Faul ? Ja

Bequem? Ja

Leidensfähig? Ja

Mobil? Egal

1024 x 768? Definitely NOT.

Page 27: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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]

Page 28: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 28 © eparo GmbH, 2010

Page 29: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 29 © eparo GmbH, 2010

Wer klickt hier auf OK?

Page 30: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 31: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 31 © eparo GmbH, 2010

Wir helfen

Frontlineshop.de

Page 32: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 32 © eparo GmbH, 2010

Wer präsentiert zuerst?

Keine Sorge, jede Gruppe kommt dran...

Bitte in drei Gruppen aufteilen

Page 33: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 34: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 34 © eparo GmbH, 2010

Wie verkauft Frontlineshop

Mode so, dass es Björn auf allen Devices richtig

Spaß macht?

Page 35: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 36: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 36 © eparo GmbH, 2010

Wer präsentiert zuerst?

Keine Sorge, jede Gruppe kommt dran...

Page 37: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 37 © eparo GmbH, 2010

PAUSE15 Minuten

Page 38: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 39: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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

Page 40: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 40 © eparo GmbH, 2010

Wer will jetzt als Erster?

Nicht vordrängeln, jeder kommt dran...

Page 41: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

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.

Page 42: eparo – Vom iPad zum Cinema-Display (Vortrag WUD 2012 – Rolf Schulte Strathaus)

05.05.2010 Seite 42 © eparo GmbH, 2010

Happy Multiscreening...

eparo GmbH User Centered Design & Usability TestsStahltwiete 2222761 Hamburg

www.eparo.de

© eparo GmbH

KontaktDr. Rolf Schulte StrathausT +49-40-76 99 12 77M +49 (0)162 10 24 384

[email protected]