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

Post on 25-Jan-2015

422 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

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

rolf.schulte@eparo.de

top related