eparo – vom ipad zum cinema-display (vortrag wud 2012 – rolf schulte strathaus)
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
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
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
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
05.05.2010 Seite 4 © eparo GmbH, 2010
Name
Firma
Beruf
UX Erfahrungen
Erwartungen
Lieblingsfilm
05.05.2010 Seite 5 © eparo GmbH, 2010
eparo GmbHUser Centered Design & Usability Services
05.05.2010 Seite 6 © eparo GmbH, 2010
Wir erforschen Nutzer.
05.05.2010 Seite 7 © eparo GmbH, 2010
Wir konzipieren und bauen Prototypen.
Axure Kurse
in Hamburg
3, 4. und 5.
Dezember
05.05.2010 Seite 8 © eparo GmbH, 2010
Wir testen User Experience und Usability ...
05.05.2010 Seite 9 © eparo GmbH, 2010
05.05.2010 Seite 10 © eparo GmbH, 2010
Inhaltspunkt
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
05.05.2010 Seite 12 © eparo GmbH, 2010
Mobile ist überall
05.05.2010 Seite 13 © eparo GmbH, 2010
05.05.2010 Seite 14 © eparo GmbH, 2010
05.05.2010 Seite 15 © eparo GmbH, 2010
05.05.2010 Seite 16 © eparo GmbH, 2010
05.05.2010 Seite 17 © eparo GmbH, 2010
05.05.2010 Seite 18 © eparo GmbH, 2010
Patterns for Multiscreen StrategiesPrecious
Mobile firstLuke Wroblewski
Future friendlyBrad Frost
Rethinking the mobile webStephanie Rieger
05.05.2010 Seite 19 © eparo GmbH, 2010
Mobile firstLuke Wroblewski
http://www.lukew.com/resources/articles/MobileFirst_LukeW.pdf
05.05.2010 Seite 20 © eparo GmbH, 2010
Rethinking the mobile webStephanie Rieger
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
05.05.2010 Seite 21 © eparo GmbH, 2010
Patterns for Multiscreen StrategiesPrecious
http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies
05.05.2010 Seite 22 © eparo GmbH, 2010
Future friendlyBrad Frosthttp://bradfrostweb.com/blog/web/for-a-future-friendly-web/
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
05.05.2010 Seite 24 © eparo GmbH, 2010
Multiscreen
Sie sind nicht im App Store...
05.05.2010 Seite 25 © eparo GmbH, 2010
05.05.2010 Seite 26 © eparo GmbH, 2010
Faul ? Ja
Bequem? Ja
Leidensfähig? Ja
Mobil? Egal
1024 x 768? Definitely NOT.
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]
05.05.2010 Seite 28 © eparo GmbH, 2010
05.05.2010 Seite 29 © eparo GmbH, 2010
Wer klickt hier auf OK?
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
05.05.2010 Seite 31 © eparo GmbH, 2010
Wir helfen
Frontlineshop.de
05.05.2010 Seite 32 © eparo GmbH, 2010
Wer präsentiert zuerst?
Keine Sorge, jede Gruppe kommt dran...
Bitte in drei Gruppen aufteilen
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
05.05.2010 Seite 34 © eparo GmbH, 2010
Wie verkauft Frontlineshop
Mode so, dass es Björn auf allen Devices richtig
Spaß macht?
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
05.05.2010 Seite 36 © eparo GmbH, 2010
Wer präsentiert zuerst?
Keine Sorge, jede Gruppe kommt dran...
05.05.2010 Seite 37 © eparo GmbH, 2010
PAUSE15 Minuten
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
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
05.05.2010 Seite 40 © eparo GmbH, 2010
Wer will jetzt als Erster?
Nicht vordrängeln, jeder kommt dran...
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.
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