SlideShare a Scribd company logo
1 of 33
Download to read offline
2 Apps zum Preis von einer?
                       Unterschiede von iPhone und iPad Apps
                       Benno Bartels, IPDC11 - Köln
                       @inserteffect




                       web mobile specialists




Dienstag, 29. November 11
Um was geht‘s?




                        http://www.mobile-zeitgeist.com/2011/07/20/mobile-bullshit-bingo-2/

  © insertEFFECT GmbH                                                                         2
Dienstag, 29. November 11
Wer spricht?

                            Benno Bartels
                            [Mobile…]
                            * Konzepter
                            * Berater
                            * Usability Junkie
                            @bennofx
                            @inserteffect




  © insertEFFECT GmbH                            3
Dienstag, 29. November 11
Wer spricht?




   • Mobile Design & Konzeption
    • Mobile Consulting
    • Development…
       • MobileWeb
       • Apps für Tablets und Mobile                      om
                                       www.inserteffect.c
       • iOS, Android, WP7, ..         blog.insfx.com
                                                                ct
                                       faceb ook.com/inserteffe
    .. ein 14-köpfiges Team
                                       @inserteffect


  © insertEFFECT GmbH                                                4
Dienstag, 29. November 11
Warum dieser Talk?




                  © insertEFFECT
                                                        5
Dienstag, 29. November 11
Warum dieser Talk?



                     „Wir hätten gerne eine iPhone App.
                     Ach und ja, sie sollte auch auf dem
                                iPad laufen“




  © insertEFFECT GmbH                                      6
Dienstag, 29. November 11
Warum dieser Talk?



                            „Nein, nein, keine verschiedenen
                                        Konzepte.
                            Es wird ja letztendlich die selbe
                                        App sein.“




  © insertEFFECT GmbH                                           7
Dienstag, 29. November 11
Unterschiede zwischen iPhone und
                            iPad.




                  © insertEFFECT
                                                               8
Dienstag, 29. November 11
Nutzungsszenario bis 2009

                                       r
                            Stationä                    bh ä   ngig
                                           Stand ortuna




  © insertEFFECT GmbH                                                 9
Dienstag, 29. November 11
Nutzungsszenario seit 2010
                                         r
                              Stationä
                                                Begrenzt mobil
                                                                                 hän   gig
                                                                          rtunab
                                                                    Stando




                                                 Konsum von
                                             umfassenden Inhalten
                                                                                 Ausführen von
                                                                               schnellen, kurzen
                                                                                     Tasks

                            Produktion von
                               Inhalten




  © insertEFFECT GmbH                                                                              10
Dienstag, 29. November 11
Klein versus groß.




  © insertEFFECT GmbH       11
Dienstag, 29. November 11
Klein versus groß. Usability.

ze
   BIG screen
  (displays more data on a single
een at a
  screen; allows split-view,
  a-la 2 screens at a time)
ed;
ible and
ngle screen;
   •       more data displayed;
   •       more controls visible and
           available on a single screen;
   •       big buttons; Display ...
             Je größer das
   •       faster interaction.
              -> ... desto mehr Content und Controls sind gleichzeitig darstellbar
              -> ... desto weniger Clicks sind nötig
              -> ... desto schneller läuft die Bedienung
              -> ... desto größer die Gefahr, eine überladene Oberfläche zu
              bekommen

   © insertEFFECT GmbH                                                               12
 Dienstag, 29. November 11
Eine versus zwei Hände.




      Bedienung meistens mit einer    Sehr unterschiedlich bedienbar,
      Hand.                           was einen sehr großen Einfluss auf
                                      die UI hat.
      Nutzung überall und nebenher.
                                      Fokussierte Bedienung.

  © insertEFFECT GmbH                                                      13
Dienstag, 29. November 11
Gewohnt versus neu.

                                                 Bitte male mir
            Bitte male mir
                                                 eine iPad-App
           eine iPhone-App




       - seit 2007 gelernte UX       - keine einheitliche UI
       - Standards und Erwartungen   - viel Raum für Innovationen
  © insertEFFECT GmbH                                               14
Dienstag, 29. November 11
Allein versus zusammen.

            Auf das kleine Smartphone-
            Display können nur 2 Augen
            gleichzeitig schauen.




                                         Das iPad eignet sich für
                                         Präsentationen und zur
                                         Benutzung in kleinen Gruppen.


  © insertEFFECT GmbH                                                    15
Dienstag, 29. November 11
Pragmatismus versus Design.

           Beispiel:
         Kalender-App




  © insertEFFECT GmbH                16
Dienstag, 29. November 11
Pragmatismus versus Design.




  © insertEFFECT GmbH                17
Dienstag, 29. November 11
Liste versus Metapher                 Beispiel: Evernote




                            Listenansicht




                            Platz und Design für die
                             Schreibtisch - Blätter -   Für jede Funktion
        „Versteckte“          Notizbuch - Metapher        einen Button
         Funktionen


  © insertEFFECT GmbH                                                        18
Dienstag, 29. November 11
KISS versus Featuritis            Beispiel: hotel.de




                            Reduktion aufs
                             Wesentliche




          Kleine,
      nachvollziehbare               Suche,
          Schritte              Karte, Liste und
                                                    iPad +Features:
                                Optionen in einer
                                                     Reisetipps und
                                     Ansicht
                                                       Checkliste

  © insertEFFECT GmbH                                                    19
Dienstag, 29. November 11
Tab-Bar versus Menüleiste




  © insertEFFECT GmbH                         20
Dienstag, 29. November 11
Einzelzimmer versus Doppelzimmer :-)




  © insertEFFECT GmbH                                    21
Dienstag, 29. November 11
Pragmatismus versus Design.
         Beispiel:
      Einstellungen




    Design für „Nicht-Designer“             Ohne Designer geht es nicht

    Passable iPhone Apps dank UI kit, SDK   Standard-UI-Elemente mit SDK alleine
    und Guidelines                          reichen nicht.
                                            Ergebnis ist oft zu langweilig.
  © insertEFFECT GmbH                                                              22
Dienstag, 29. November 11
Beispiel: Keynote


       Verschiedene „No-Show“-Fragestellungen



                            „Die App verwendet
                              doch niemand!“




                            „Da bricht man sich ja
                                 die Finger“




                                -> Mobilen Usecase herausfinden
                                -> ... und darauf fokussieren



  © insertEFFECT GmbH                                                    23
Dienstag, 29. November 11
Beispiel: ifun


       Verschiedene „No-Show“-Fragestellungen
                                   „Da kann ich ja gleich
                                       die Webseite
                                       verwenden“




                            ?   Plattformvorteile nutzen

                                -> Touch-Usability
                                -> Push-Nachrichten
                                -> Offlineverfügbarkeit
                                -> Fokus auf Design
                                -> uvm...




  © insertEFFECT GmbH                                                        24
Dienstag, 29. November 11
4/5 versus 1/5.

                                             Für‘s iPad zu Entwickeln
                                             bedeutet für weniger
                                             potentielle Nutzer entwickeln
                            iPod touch


                iPhone                      Aber iPad Apps
                                         findet man besser im
                                                 Store
                                 iPad                                Marketing-
                                                                Effekt von iPad Apps
                                                                      ist hoch
                                          Man kann auch für
                                          beide Plattformen
                                             entwickeln

  © insertEFFECT GmbH                                                                  25
Dienstag, 29. November 11
Billig versus teuer.


                             iPad Apps lassen sich teuerer Verkaufen




                            Die Entwicklung ist
                             aber auch teurer
                                                             Die User haben einen
                                                               höheren Anspruch




  © insertEFFECT GmbH                                                               26
Dienstag, 29. November 11
oft gilt daher ...




                            Eine iPhone App ist die Basis,
                            die iPad App ist Luxus




  © insertEFFECT GmbH                                        27
Dienstag, 29. November 11
Eine iPhone App ist die Basis,
                  Kosten....   die iPad App ist Luxus




  © insertEFFECT GmbH                                           28
Dienstag, 29. November 11
Dienstag, 29. November 11
                            © insertEFFECT GmbH
                                                                                                                      I *ae€
                                                                                                          =           .lE-o9o(rló
                                                                                                                      i =5:-,
                                                                                                              a       7 óHs'á
                                                                                                                      á ;ex;
                                                                                                                      ! e=lp
                                                                                                                      -d. Á=a
                                                                                                                      { áiáB
                                                                                                                                      Kosten....



                                                                                                                      d. :á!í
                                                                                                                      l^    áir
                                                                                                                      o     -'a i
                                                                                                                      éi    -'o-
                                                                                                                            9' 6':.
                                                                                                                  3   -     Ear
                                                                                                     E
                                                                                                     !.
                                                                                                                      E ;id5
                                                                                                                      E =A:
                                                                                                                  3   ü ali
                                                                                                                      * :€€ a 11
                                                                                                                      É
                                                                                                                      A
                                                                                                                            =:i I
                                                                                                                            +a
                                                                                                                      -
                                                                                                                       :
                                                                                                                       r    .il
                                                                                                                            a!:.
                                                                                                                      rtt   a)
                                                                                                                            @ =E
                                                  http://www.ibusiness.de/aktuell/db/709614jg.html                          ró

                                                                                                                            =a>
                                                                                                                  -         3óc
                                                                                                                  3         +P-
                                                                                                                            _:ó5
                                                                                                                            =rÉ
                                                                                                                            Y_o
                            29
Entwicklung




Dienstag, 29. November 11
                            © insertEFFECT GmbH
                                                                      € 40.000,
                                                                                00
                                                                                               Design
                                                                                                                  Kosten...




                                                            Konzept
                                                                                                                              I *ae€
                                                                                                              =               .lE-o9o(rló
                                                                                                                              i =5:
                                                                                                                   a          7 óHs'
                                                                          Entwicklung




                                                                                                                              á ;ex;
                                                                                           €




                                                                                                                              ! e=lp
                                                                                                                              -d. Á=a
                                                                                                                              { áiá
                                                                                                                              d. :á!í
                                                                                                                              l^    áir
                                                                                                                              o     -'a i
                                                                                                                              éi    -'o-
                                                                                                                                    9' 6':
                                                                                                                       3      -     Ear
                                                  Konzept



                                                                                                         E
                                                                                             70.000,00




                                                                                                         !.
                                                                                                                              E ;id5
                                                                                                                              E
                                                                                                                       3        ali
                                                                                                                              ü =
                                                                                                                              * :€€ a 11
                                                                                                                              É
                                                                                                                              A
                                                                                                                                    =:i
                                                                        Design




                                                                                                                              -     +a
                                                                                                                               :
                                                                                                                               r    .il
                                                                                                                                    a!:.
                                                                                                                              rtt   a)
                                                                                                                                    @ =E
                                                                                                                                    ró

                                                                                                                                    =a
                                                                                                                       -            3óc
                                                                                                                       3            +P-
                                                                                                                                    _:ó5
                                                                                                                                    =rÉ
                                                                                                                                    Y_o
                            30
Dienstag, 29. November 11
                            © insertEFFECT GmbH
                                                                                                   Kosten...




                                                                            Entwicklung

                                                            Entwicklung
                                                    €
                                                  Konzept
                                                                          Design


                                                      90.000,00
                                                                           Design




                                                        Konzept
                                                                                                               I *ae€
                                                                                               =               .lE-o9o(rló
                                                                                                               i =5:
                                                                                                    a          7 óHs'
                                                                                                               á ;ex;
                                                                                                               ! e=lp
                                                                                                               -d. Á=a
                                                                                                               { áiá
                                                                                                               d. :á!í
                                                                                                               l^    áir
                                                                                                               o     -'a i
                                                                                                               éi    -'o-
                                                                                                                     9' 6':
                                                                                                        3      -     Ear
                                                                                          E
                                                                                          !.
                                                                                                               E ;id5
                                                                                                               E
                                                                                                        3        ali
                                                                                                               ü =
                                                                                                               * :€€ a 11
                                                                                                               É
                                                                                                               A
                                                                                                                     =:i
                                                                                                                     +a
                                                                                                               -
                                                                                                                :
                                                                                                                r    .il
                                                                                                                     a!:.
                                                                                                               rtt   a)
                                                                                                                     @ =E
                                                                                                                     ró

                                                                                                                     =a
                                                                                                        -            3óc
                                                                                                        3            +P-
                                                                                                                     _:ó5
                                                                                                                     =rÉ
                                                                                                                     Y_o
                            31
Fazit

                                      Das                                  Andere Nutzung
                             iPad ist kein großes                          erfordert andere
                                    iPhone                                     Konzepte




                                                    Stellt Designer ein!




                            Think Mobile First!


  © insertEFFECT GmbH                                                                         32
Dienstag, 29. November 11
Danke! - Fragen?


                  Wer mehr wissen will:
                 Unser E-Book zum Thema
                     „Mobile Design“
                      gibt‘s bei mir




                                                               om
                                          www.inserteffect.c
                                          blog.insfx.com
                                                            rteffect
                                          facebook.com/inse

                                          @inserteffect



  © insertEFFECT GmbH                                                  33
Dienstag, 29. November 11

More Related Content

More from insertEFFECT GmbH

Android tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartelsAndroid tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartels
insertEFFECT GmbH
 
Syntactically Awesome Stylesheets mit Sass
Syntactically Awesome Stylesheets mit SassSyntactically Awesome Stylesheets mit Sass
Syntactically Awesome Stylesheets mit Sass
insertEFFECT GmbH
 

More from insertEFFECT GmbH (6)

Go-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
Go-Mobile-Strategien für Early Birds und Late Risers - Benno BartelsGo-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
Go-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
 
Android tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartelsAndroid tablet webmontag_benno_bartels
Android tablet webmontag_benno_bartels
 
Syntactically Awesome Stylesheets mit Sass
Syntactically Awesome Stylesheets mit SassSyntactically Awesome Stylesheets mit Sass
Syntactically Awesome Stylesheets mit Sass
 
Usability Im Mobile Web
Usability Im Mobile WebUsability Im Mobile Web
Usability Im Mobile Web
 
Prozessorientierte Realisierung einer mobilen Webseite
Prozessorientierte Realisierung einer mobilen WebseiteProzessorientierte Realisierung einer mobilen Webseite
Prozessorientierte Realisierung einer mobilen Webseite
 
Usability test on mobile devices
Usability test on mobile devicesUsability test on mobile devices
Usability test on mobile devices
 

2 Apps zum Preis von einer? Unterschiede zwischen iPhone und iPad Apps

  • 1. 2 Apps zum Preis von einer? Unterschiede von iPhone und iPad Apps Benno Bartels, IPDC11 - Köln @inserteffect web mobile specialists Dienstag, 29. November 11
  • 2. Um was geht‘s? http://www.mobile-zeitgeist.com/2011/07/20/mobile-bullshit-bingo-2/ © insertEFFECT GmbH 2 Dienstag, 29. November 11
  • 3. Wer spricht? Benno Bartels [Mobile…] * Konzepter * Berater * Usability Junkie @bennofx @inserteffect © insertEFFECT GmbH 3 Dienstag, 29. November 11
  • 4. Wer spricht? • Mobile Design & Konzeption • Mobile Consulting • Development… • MobileWeb • Apps für Tablets und Mobile om www.inserteffect.c • iOS, Android, WP7, .. blog.insfx.com ct faceb ook.com/inserteffe .. ein 14-köpfiges Team @inserteffect © insertEFFECT GmbH 4 Dienstag, 29. November 11
  • 5. Warum dieser Talk? © insertEFFECT 5 Dienstag, 29. November 11
  • 6. Warum dieser Talk? „Wir hätten gerne eine iPhone App. Ach und ja, sie sollte auch auf dem iPad laufen“ © insertEFFECT GmbH 6 Dienstag, 29. November 11
  • 7. Warum dieser Talk? „Nein, nein, keine verschiedenen Konzepte. Es wird ja letztendlich die selbe App sein.“ © insertEFFECT GmbH 7 Dienstag, 29. November 11
  • 8. Unterschiede zwischen iPhone und iPad. © insertEFFECT 8 Dienstag, 29. November 11
  • 9. Nutzungsszenario bis 2009 r Stationä bh ä ngig Stand ortuna © insertEFFECT GmbH 9 Dienstag, 29. November 11
  • 10. Nutzungsszenario seit 2010 r Stationä Begrenzt mobil hän gig rtunab Stando Konsum von umfassenden Inhalten Ausführen von schnellen, kurzen Tasks Produktion von Inhalten © insertEFFECT GmbH 10 Dienstag, 29. November 11
  • 11. Klein versus groß. © insertEFFECT GmbH 11 Dienstag, 29. November 11
  • 12. Klein versus groß. Usability. ze BIG screen (displays more data on a single een at a screen; allows split-view, a-la 2 screens at a time) ed; ible and ngle screen; • more data displayed; • more controls visible and available on a single screen; • big buttons; Display ... Je größer das • faster interaction. -> ... desto mehr Content und Controls sind gleichzeitig darstellbar -> ... desto weniger Clicks sind nötig -> ... desto schneller läuft die Bedienung -> ... desto größer die Gefahr, eine überladene Oberfläche zu bekommen © insertEFFECT GmbH 12 Dienstag, 29. November 11
  • 13. Eine versus zwei Hände. Bedienung meistens mit einer Sehr unterschiedlich bedienbar, Hand. was einen sehr großen Einfluss auf die UI hat. Nutzung überall und nebenher. Fokussierte Bedienung. © insertEFFECT GmbH 13 Dienstag, 29. November 11
  • 14. Gewohnt versus neu. Bitte male mir Bitte male mir eine iPad-App eine iPhone-App - seit 2007 gelernte UX - keine einheitliche UI - Standards und Erwartungen - viel Raum für Innovationen © insertEFFECT GmbH 14 Dienstag, 29. November 11
  • 15. Allein versus zusammen. Auf das kleine Smartphone- Display können nur 2 Augen gleichzeitig schauen. Das iPad eignet sich für Präsentationen und zur Benutzung in kleinen Gruppen. © insertEFFECT GmbH 15 Dienstag, 29. November 11
  • 16. Pragmatismus versus Design. Beispiel: Kalender-App © insertEFFECT GmbH 16 Dienstag, 29. November 11
  • 17. Pragmatismus versus Design. © insertEFFECT GmbH 17 Dienstag, 29. November 11
  • 18. Liste versus Metapher Beispiel: Evernote Listenansicht Platz und Design für die Schreibtisch - Blätter - Für jede Funktion „Versteckte“ Notizbuch - Metapher einen Button Funktionen © insertEFFECT GmbH 18 Dienstag, 29. November 11
  • 19. KISS versus Featuritis Beispiel: hotel.de Reduktion aufs Wesentliche Kleine, nachvollziehbare Suche, Schritte Karte, Liste und iPad +Features: Optionen in einer Reisetipps und Ansicht Checkliste © insertEFFECT GmbH 19 Dienstag, 29. November 11
  • 20. Tab-Bar versus Menüleiste © insertEFFECT GmbH 20 Dienstag, 29. November 11
  • 21. Einzelzimmer versus Doppelzimmer :-) © insertEFFECT GmbH 21 Dienstag, 29. November 11
  • 22. Pragmatismus versus Design. Beispiel: Einstellungen Design für „Nicht-Designer“ Ohne Designer geht es nicht Passable iPhone Apps dank UI kit, SDK Standard-UI-Elemente mit SDK alleine und Guidelines reichen nicht. Ergebnis ist oft zu langweilig. © insertEFFECT GmbH 22 Dienstag, 29. November 11
  • 23. Beispiel: Keynote Verschiedene „No-Show“-Fragestellungen „Die App verwendet doch niemand!“ „Da bricht man sich ja die Finger“ -> Mobilen Usecase herausfinden -> ... und darauf fokussieren © insertEFFECT GmbH 23 Dienstag, 29. November 11
  • 24. Beispiel: ifun Verschiedene „No-Show“-Fragestellungen „Da kann ich ja gleich die Webseite verwenden“ ? Plattformvorteile nutzen -> Touch-Usability -> Push-Nachrichten -> Offlineverfügbarkeit -> Fokus auf Design -> uvm... © insertEFFECT GmbH 24 Dienstag, 29. November 11
  • 25. 4/5 versus 1/5. Für‘s iPad zu Entwickeln bedeutet für weniger potentielle Nutzer entwickeln iPod touch iPhone Aber iPad Apps findet man besser im Store iPad Marketing- Effekt von iPad Apps ist hoch Man kann auch für beide Plattformen entwickeln © insertEFFECT GmbH 25 Dienstag, 29. November 11
  • 26. Billig versus teuer. iPad Apps lassen sich teuerer Verkaufen Die Entwicklung ist aber auch teurer Die User haben einen höheren Anspruch © insertEFFECT GmbH 26 Dienstag, 29. November 11
  • 27. oft gilt daher ... Eine iPhone App ist die Basis, die iPad App ist Luxus © insertEFFECT GmbH 27 Dienstag, 29. November 11
  • 28. Eine iPhone App ist die Basis, Kosten.... die iPad App ist Luxus © insertEFFECT GmbH 28 Dienstag, 29. November 11
  • 29. Dienstag, 29. November 11 © insertEFFECT GmbH I *ae€ = .lE-o9o(rló i =5:-, a 7 óHs'á á ;ex; ! e=lp -d. Á=a { áiáB Kosten.... d. :á!í l^ áir o -'a i éi -'o- 9' 6':. 3 - Ear E !. E ;id5 E =A: 3 ü ali * :€€ a 11 É A =:i I +a - : r .il a!:. rtt a) @ =E http://www.ibusiness.de/aktuell/db/709614jg.html ró =a> - 3óc 3 +P- _:ó5 =rÉ Y_o 29
  • 30. Entwicklung Dienstag, 29. November 11 © insertEFFECT GmbH € 40.000, 00 Design Kosten... Konzept I *ae€ = .lE-o9o(rló i =5: a 7 óHs' Entwicklung á ;ex; € ! e=lp -d. Á=a { áiá d. :á!í l^ áir o -'a i éi -'o- 9' 6': 3 - Ear Konzept E 70.000,00 !. E ;id5 E 3 ali ü = * :€€ a 11 É A =:i Design - +a : r .il a!:. rtt a) @ =E ró =a - 3óc 3 +P- _:ó5 =rÉ Y_o 30
  • 31. Dienstag, 29. November 11 © insertEFFECT GmbH Kosten... Entwicklung Entwicklung € Konzept Design 90.000,00 Design Konzept I *ae€ = .lE-o9o(rló i =5: a 7 óHs' á ;ex; ! e=lp -d. Á=a { áiá d. :á!í l^ áir o -'a i éi -'o- 9' 6': 3 - Ear E !. E ;id5 E 3 ali ü = * :€€ a 11 É A =:i +a - : r .il a!:. rtt a) @ =E ró =a - 3óc 3 +P- _:ó5 =rÉ Y_o 31
  • 32. Fazit Das Andere Nutzung iPad ist kein großes erfordert andere iPhone Konzepte Stellt Designer ein! Think Mobile First! © insertEFFECT GmbH 32 Dienstag, 29. November 11
  • 33. Danke! - Fragen? Wer mehr wissen will: Unser E-Book zum Thema „Mobile Design“ gibt‘s bei mir om www.inserteffect.c blog.insfx.com rteffect facebook.com/inse @inserteffect © insertEFFECT GmbH 33 Dienstag, 29. November 11