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.

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