SlideShare ist ein Scribd-Unternehmen logo
1 von 41
Mobile Design
Nur wer den Trend versteht, kann zielgerichtet handeln!

Christian Becker, Senior Information Architect kuehlhaus AG
„   MOBILE
    WEB…
    IST DAS WIRKLICH
    EIN THEMA FÜR
    UNTERNEHMEN?!
INTERNET JA!
2,095,006,005
INTERNETNUTZER IN DER WELT

~ 30% DER WELTBEVÖLKERUNG




                            Quelle: http://internetworldstats.com/
MOBILE?!
5,981,000,000
GERÄTEANSCHLÜSSE
WELTWEIT
~ 85% DER WELTBEVÖLKERUNG



                            Quelle:http://www.itu.int/
MOBILE?!
940,000,000
NUTZUNG VON 3G SERVICES
~ 20% DER MOBILTELEFONE SIND WWW READY
~ CA. 50% DER INTERNETNUTZER




                                Quelle:http://www.itu.int/
Ist zu Hause und telefoniert mit seiner Mutter




   …Randerscheinungen & Exoten!




     Quelle: http://www.flickr.com/photos/philliecasablanca/2070476239/
Mobile ist DAS Thema 2012!




                                                                                     Überprüft die
                                                Spielt                               aktuellen
                                                Online-Games                         Aktienkurse

Hat gerade eine E-Mail von
Ihrem Arbeitgeber bekommen   Fotografiert und
                             veröffentlicht             Quelle: http://www.flickr.com/photos/udono/4391951806//
                             im Social Web
„   MOBILE
    WEB…
    IST EIN THEMA UND WIRD
    IN ZUKUNFT WEITER AN
    STELLENWERT
    GEWINNEN!
WAS ZEICHNET MOBILE AUS?!
Fokussierte Nutzer




                                                               Komfortable Umgebung




Viele Eingabemöglichkeiten

                        Mobil ≠ Desktop


              Unbegrenzt Strom und Internet   Quelle: http://www.flickr.com/photos/fuzzcat/22019163
Kontext: Laut, leise? Wo?




Unterschiedliche Eingabemöglichkeiten




   Nutzung extrem durch Zeit- und Gewohnheit getrieben:                      Kleine Displays
   1. Dringend (Brauche schnell etwas)
   2. Gelangweilt (Brauche Unterhaltung)
   3. Wiederholend (Suche soziale Interkation)
                                                    Diversität der Endgeräte

             Diffuse, partielle Aufmerksamkeit

                                                      Quelle: http://www.flickr.com/photos/trustypics/4585106322/
NUTZER HABEN
UNTERSCHIEDLICHE:
ZIELE/AUFGABEN,
ANFORDERUNGEN
&
KONTEXTE!
Ein gutes Beispiel, die Bahn…




 Quelle: http://www.flickr.com/photos/oberau-online/2527572966/
Quelle: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu




                   Mobile ≠ iPhone App!
NEUE NATÜRLICHE
INTERAKTIONS-
FORMEN
Natürliche Interaktion: nicht GUI sondern NUI

                                             Soziale Interaktion




           Sprache als Eingabemedium




             Bewegung als Eingabemedium



                                                                           Touch, Gesten,
                                                                           Direkt Manipulation




                                          Quelle: http://www.flickr.com/photos/emersunn/4620261477/
MEHR
MÖGLICHKEITEN
Location-based Services




   Quelle: http://www.flickr.com/photos/garyhayes/5240005611/
Foto, Video und Audio



                       Video Kamera

    Sprach Aufnahme                                      Video Ausgabe




                                                     Sound Ausgabe




                      Quelle: http://www.flickr.com/photos/mr-brown/10820866/
„Na das muss ich René mal schicken…“



Social Sharing: Freund und Kollegen immer dabei!



                           Quelle: http://www.flickr.com/photos/shekharsahu/4593021169/
Augmented Reality: Verschmelzung der digitalen und realen Welt




                                „Ah das meinen die damit!“




                                        Quelle: http://www.flickr.com/photos/violala/5086804386/
„Wenn Sie schon hier sind,
  haben sie schon daran gedacht?“




Von der passiven zur aktiven Kommunikation!
Vom Monolog zum Dialog!


                         Quelle: http://www.flickr.com/photos/epitti/2565572445/
WENIGER
MÖGLICHKEITEN
BANDBREITE,
NETZABDECKUNG,
FLASH, EFFEKTE, PLATZ…




           Quelle:Flickr, Shadows, TheArtificer
MOBILE = PARETO
80:20 REGEL




       Quelle:Flickr, Schwester,Schere , carhartl
MOBILE IST
PERSÖNLICH!
Persönliche Erweiterung: Unterschiedliche Geräte,
unterschiedliche Apps, Unterschiedliche Anwendungsfälle…




                             Quelle: http://www.flickr.com/photos/mytikkashop/5423256142/
UND IMMER BEDENKEN…
CONTEXT IS KING!
MOBILE DESIGN
BEDEUTET DESIGNING…
... die nicht!




                                               ...Services…
Checkt gerade mobil ein..



                                  Quelle: http://www.flickr.com/photos/buhsnarf/345826015/
…Entertainment…


Quelle: http://www.flickr.com/photos/didmyself/5451726072/
…soziale Interaktion!




         Seins!




Meins!




                  Quelle: http://www.flickr.com/photos/erwyn/1065039124/
WIE GEHEN MAN
ZIELGERICHTET AN
DIE SACHE?!
Vorgehensmodell in Projekten


  01                             02                         03                         04
  Strategie                      Struktur                   Aufbau                     Oberfläche


  Abstimmung mit                 Test und Optimierung mit   Test und Optimierung mit   Test und Optimierung mit
  Marketing, Vertrieb ,Technik   Endanwender, Anbieter      Endanwender, Anbieter      Endanwender, Anbieter
Kompetenz und Methodik


  01                             02                         03                          04
  Strategie                      Struktur                   Aufbau                      Oberfläche


  Abstimmung mit                 Test und Optimierung mit   Test und Optimierung mit    Test und Optimierung mit
  Marketing, Vertrieb ,Technik   Endanwender, Anbieter      Endanwender, Anbieter       Endanwender, Anbieter




        Workshops                     Workshops                  Konzeption             Interaction-Design

   Strategie-Beratung                  Interviews                Wireframing              Interface-Design

         Interviews                   Cardsorting                Prototyping           Interaction-Guidelines

        Feldstudien              Online-Cardsorting            Usability-Test                Text-Design

 Anforderungsanalyse             Experten-Gutachten         User Experience Test             Icon-Design

      Mental Models              Prozess-Modelling                 UX Index                  Eyetracking
Mobile User-Experience Test von kuehlhaus

  Darstellung des iPhone Screens   Probandenkamera 1 (Frontal)
  und der Touchpoints




                                                                 Probandenkamera 2
                                                                 (Umgebung)
MOBILE KANN SOGAR KOSTEN
SPAREN:

RESPONSIVE
DESIGN
Skalierung und Anpassung des Angebots



                 Beispiele:
                 http://designmodo.com/responsive-design-examples/
THINK MOBILE
(FIRST)!
kuehlhaus AG
N7 5-6
D-68161 Mannheim
Christian Becker
Senior Information Architect


Telefon +49.621.496083-0
E-Mail   info@kuehlhaus.com
Internet www.kuehlhaus.com

Die Inhalte dieser Präsentation sind das geistige Eigentum unseres
Unternehmens. Jede weitere Verwendung sowie Weitergabe an Dritte im
Original, als Kopie, in Auszügen, elektronischer Form oder durch
inhaltsähnliche Darstellung bedürfen der Zustimmung der kuehlhaus AG.

Weitere ähnliche Inhalte

Andere mochten auch

1 website konzeption
1 website konzeption1 website konzeption
1 website konzeption
idealogues
 
Website Konzeption
Website KonzeptionWebsite Konzeption
Website Konzeption
1560media
 

Andere mochten auch (20)

Empathy map
Empathy mapEmpathy map
Empathy map
 
Webinar: Online Security
Webinar: Online SecurityWebinar: Online Security
Webinar: Online Security
 
Personas Modell - Vorlage zum Download
Personas Modell - Vorlage zum Download Personas Modell - Vorlage zum Download
Personas Modell - Vorlage zum Download
 
Ditch the Persona. User Roles are better for design.
Ditch the Persona. User Roles are better for design.Ditch the Persona. User Roles are better for design.
Ditch the Persona. User Roles are better for design.
 
Personas - Die Arbeit mit archetypischen Nutzern in der Produktentwicklung
Personas - Die Arbeit mit archetypischen Nutzern in der ProduktentwicklungPersonas - Die Arbeit mit archetypischen Nutzern in der Produktentwicklung
Personas - Die Arbeit mit archetypischen Nutzern in der Produktentwicklung
 
eResult Case Study: Personas Für Deutschland
eResult Case Study: Personas Für DeutschlandeResult Case Study: Personas Für Deutschland
eResult Case Study: Personas Für Deutschland
 
Ablaufplan Website-Konzept-Workshop (businessmodelwebsites.com)
Ablaufplan Website-Konzept-Workshop (businessmodelwebsites.com) Ablaufplan Website-Konzept-Workshop (businessmodelwebsites.com)
Ablaufplan Website-Konzept-Workshop (businessmodelwebsites.com)
 
Rethinking leadership and management to drive innovation
Rethinking leadership and management to drive innovationRethinking leadership and management to drive innovation
Rethinking leadership and management to drive innovation
 
Fallstudie Websitekonzeption eResult GmbH
Fallstudie Websitekonzeption eResult GmbHFallstudie Websitekonzeption eResult GmbH
Fallstudie Websitekonzeption eResult GmbH
 
The Agile Stategy Planner by Stocker Partnership
The Agile Stategy Planner by Stocker PartnershipThe Agile Stategy Planner by Stocker Partnership
The Agile Stategy Planner by Stocker Partnership
 
Empathy Maps
Empathy MapsEmpathy Maps
Empathy Maps
 
Design Thinking Action Lab: Empathy Map and Problem Statement
Design Thinking Action Lab: Empathy Map and Problem StatementDesign Thinking Action Lab: Empathy Map and Problem Statement
Design Thinking Action Lab: Empathy Map and Problem Statement
 
Empathy Map Template v1
Empathy Map Template v1Empathy Map Template v1
Empathy Map Template v1
 
Template: Empathy Map and Problem Statement
Template: Empathy Map and Problem StatementTemplate: Empathy Map and Problem Statement
Template: Empathy Map and Problem Statement
 
Empathy Map Example
Empathy Map ExampleEmpathy Map Example
Empathy Map Example
 
1 website konzeption
1 website konzeption1 website konzeption
1 website konzeption
 
The many faces of IoT (Internet of Things) in Healthcare
The many faces of IoT (Internet of Things) in HealthcareThe many faces of IoT (Internet of Things) in Healthcare
The many faces of IoT (Internet of Things) in Healthcare
 
Empathy Map Poster
Empathy Map PosterEmpathy Map Poster
Empathy Map Poster
 
Website Konzeption
Website KonzeptionWebsite Konzeption
Website Konzeption
 
Workshop Übungen - Persona und Consumer Journey Entwicklung
Workshop Übungen - Persona und Consumer Journey EntwicklungWorkshop Übungen - Persona und Consumer Journey Entwicklung
Workshop Übungen - Persona und Consumer Journey Entwicklung
 

Ähnlich wie Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet handeln!

eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo GmbH
 

Ähnlich wie Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet handeln! (20)

Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
 
Solution 10 mobile experience_110411
Solution 10 mobile experience_110411Solution 10 mobile experience_110411
Solution 10 mobile experience_110411
 
solution10_mobile_Marketing
solution10_mobile_Marketingsolution10_mobile_Marketing
solution10_mobile_Marketing
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Was kommt nach Facebook? Nachhaltige Trends in digitalen Medien im Tourismus
Was kommt nach Facebook? Nachhaltige Trends in digitalen Medien im TourismusWas kommt nach Facebook? Nachhaltige Trends in digitalen Medien im Tourismus
Was kommt nach Facebook? Nachhaltige Trends in digitalen Medien im Tourismus
 
User Experience Engineering oder What’s Love Got To Do With It?
User Experience Engineering oder What’s Love Got To Do With It?User Experience Engineering oder What’s Love Got To Do With It?
User Experience Engineering oder What’s Love Got To Do With It?
 
Moderne Kundenansprache mit Mobile Experience!
Moderne Kundenansprache mit Mobile Experience!Moderne Kundenansprache mit Mobile Experience!
Moderne Kundenansprache mit Mobile Experience!
 
20191010 dianafrank blackbox re
20191010 dianafrank blackbox re 20191010 dianafrank blackbox re
20191010 dianafrank blackbox re
 
2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
 
portfolio
portfolioportfolio
portfolio
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
 
130605 webinale-nuisol
130605 webinale-nuisol130605 webinale-nuisol
130605 webinale-nuisol
 
USECON RoX2016: Opening Remarks
USECON RoX2016: Opening RemarksUSECON RoX2016: Opening Remarks
USECON RoX2016: Opening Remarks
 
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
eparo – Inhalte und Funktionen von Websites (Vortrag IICO Kongress 2009 – Rol...
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
Jump into the Outernet!
Jump into the Outernet!Jump into the Outernet!
Jump into the Outernet!
 
Mobile Apps mit Mehrwert
Mobile Apps mit MehrwertMobile Apps mit Mehrwert
Mobile Apps mit Mehrwert
 
Part II: IR Quo Vadis? – Die Folgen von Social Media & Co. für die Zukunft de...
Part II: IR Quo Vadis? – Die Folgen von Social Media & Co. für die Zukunft de...Part II: IR Quo Vadis? – Die Folgen von Social Media & Co. für die Zukunft de...
Part II: IR Quo Vadis? – Die Folgen von Social Media & Co. für die Zukunft de...
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
 

Mehr von kuehlhaus AG

Webinar: Mit dem User Experience Index die Qualität Ihrer Website erhalten un...
Webinar: Mit dem User Experience Index die Qualität Ihrer Website erhalten un...Webinar: Mit dem User Experience Index die Qualität Ihrer Website erhalten un...
Webinar: Mit dem User Experience Index die Qualität Ihrer Website erhalten un...
kuehlhaus AG
 

Mehr von kuehlhaus AG (6)

User Story Mapping-Hands-On // UX-DAY MASTERCLASS
User Story Mapping-Hands-On // UX-DAY MASTERCLASSUser Story Mapping-Hands-On // UX-DAY MASTERCLASS
User Story Mapping-Hands-On // UX-DAY MASTERCLASS
 
Webinar: SEO mit der kuehlhaus AG
Webinar: SEO mit der kuehlhaus AGWebinar: SEO mit der kuehlhaus AG
Webinar: SEO mit der kuehlhaus AG
 
Webinar: Content UX - Wie Inhalte ihren Internetauftritt beeinflussen
Webinar: Content UX - Wie Inhalte ihren Internetauftritt beeinflussenWebinar: Content UX - Wie Inhalte ihren Internetauftritt beeinflussen
Webinar: Content UX - Wie Inhalte ihren Internetauftritt beeinflussen
 
Webinar: Gamification - Lasset die Spiele beginnen
Webinar: Gamification - Lasset die Spiele beginnenWebinar: Gamification - Lasset die Spiele beginnen
Webinar: Gamification - Lasset die Spiele beginnen
 
Content kills your Concept?!
Content kills your Concept?!Content kills your Concept?!
Content kills your Concept?!
 
Webinar: Mit dem User Experience Index die Qualität Ihrer Website erhalten un...
Webinar: Mit dem User Experience Index die Qualität Ihrer Website erhalten un...Webinar: Mit dem User Experience Index die Qualität Ihrer Website erhalten un...
Webinar: Mit dem User Experience Index die Qualität Ihrer Website erhalten un...
 

Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet handeln!