SlideShare ist ein Scribd-Unternehmen logo
10 Do’s und Don’ts bei der Gestaltung mobiler
Anwendungen
ONE Konferenz, 10.05.2012, Marcel B.F. Uhr, Iris Müller, soultank AG
Wechseln wir nun den Blickwinkel zum Benutzer

Apps, mobile Webseiten etc. gibt es viele, viele, viele und es
werden immer mehr
   Der Erfolg der mobilen Lösung wird vom Nutzer
schlussendlich bestimmt.




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 2
Agenda
 Einleitung
 Die wichtigsten Do’s and Don’ts
 Mobiles Testen
 Fazit




    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 3
In welchem Kontext werden mobile Apps/Websites
benutzt?

  Nutzungssituationen
    Zu Hause: 84 %
    Verschiedene Pausen während Tag: 80 %
    Während Wartezeit in Schlangen und in Einrichtungen: 74 %
    Während «Shopping»: 69 %
    Während Arbeiten: 64 %
    Während TV Schauen: 62 %
    Während Pendeln: 47 %




                                                                          Quelle: Luke Wroblewski. Mobile First. (2011)


    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 4
Kenne Deinen Nutzer: Nutzungskontextanalyse

  Benutzer-, Aufgaben- und Kontextanalyse


                                                                                               Benutzer:
    Kontext:
                                                                                              Mann, Alter
 Business, Mobil
                                                                                              unbekannt




   Aufgabe:                                                                                     System:
 Dateneingabe                                                                               Stiftbedienung
                                                                                             Touchscreen

                                                                        Quelle: Modell abgeleitet von Michael Herczeg




      soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 5
Welcher Interaktionstyp bist Du?
  Vier wichtige Interaktionstypen
  1.    Lookup/Find
        «Ich benötige aktuell eine Antwort zu bestimmten Thema.»
  2.    Explore/Play
        «Ich will etwas Zeit überbrücken und mich ablenken.»
  3.    Check in/Status
        «Es ändert/aktualisiert sich etwas und ich möchte Bescheid wissen.»
  4.    Edit/Create
        «Ich muss jetzt etwas Dringendes tun, was nicht warten kann.»




                                                                             Quelle: Luke Wroblewski. Mobile First. (2011)


       soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 6
Nutzungskontextanalyse: Ergebnis

  Mobile Website vs. App
  Nutzerforschung* (2011) zeigt:
    Erfolgsrate bei mobilen Websites: 64 %
    Erfolgsrate bei Desktop-Websites auf mobilen Geräten: 58 %
    App noch besser: Erfolgsrate 76 %

  3 Möglichkeiten für mobile Inhalte
    Responsive Layout für Website
    Separate mobile Website
    Native Applikationen (Apps)




    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 7
Agenda
 Einleitung
 10 Do’s and Don'ts
 Mobiles Testen
 Fazit




    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 8
Wichtigstes Do

Ergonomischer Grundsatz
«less is more»
gilt bei Mobile umso mehr!




    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 9
Inhalt



soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 10
Inhalt: Darauf achten, dass …

  Inhaltlich stark auf Wesentliches beschränken
     Hauptinhalte integrieren, alle anderen Inhalte entfernen
     Keinen Werbetext einsetzen

  Starke Reduzierung von textlichem Inhalt
  Integration nur wichtigster Zusatzfunktionen (Features);
  Beschränkung sinnvoll (aber: Abbildung ganzer
  Funktionalität möglich)
  Wichtigste Links als Hauptinhalt einbinden (Startseite), die
  auf Unterseiten verweisen (in Unterseiten auslagern)


     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 11
Inhalt: Positives Beispiel

  Varianten: Corporate Website, Mobile Website




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 12
Inhalt: Negatives Beispiel

  Keine Variante: Corporate Web




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 13
Design



soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 14
Design: Darauf achten, dass …

  Geringere Bildschirmauflösungen bei mobilen Geräten
  Gängige Bildschirmauflösungen
     800 x 480 px (Android)
     960 x 640 px (iPhone)
     1024 X 768 px (iPad)

  Informationsangebot, Layout, Navigation müssen Grösse
  entsprechend angepasst werden
  Bildschirme und Verarbeitungsdauer können sich stark
  voneinander unterscheiden
  Je nach Anforderung unterschiedliche Versionen von
  mobilen Websites
    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 15
Design: Darauf achten, dass …

  Design von Schaltflächen. Stark abhängig vom
  Betriebssystem z.B. Android vs. iOS
  Grösse von Schaltflächen
  Feedback und Akzeptieren von Eingaben
  Einfaches GUI-Design
  Farbigkeit
  Wahlmöglichkeiten begrenzen
  Bewegte Bilder sparsam einsetzen
                                                                       Quelle: http://developer.android.com/design/patterns/pure-android.html



     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 16
Design: Darauf achten, dass …

  Wichtige «Call to actions» visuell in Vordergrund stellen




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 17
Design: Positives Beispiel




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 18
Design: Positives Beispiel

  Webseite und App




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 19
Design: Negatives Beispiel




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 20
Navigation



soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 21
Navigation: Darauf achten, dass …

  Informationsarchitektur: Reduktion auf das Nötigste
     Navigationsoptionen einschränken
     Flache Navigationsstruktur einbinden

  Benutzerführung ist A und O: Nicht auf Webseite
  umleiten, sondern angepasste Inhalte anzeigen.
  «Mobile First» nach Luke Wroblewski
  Auf Unterseiten Navigation im unteren Bildschirmbereich
  einbinden
  Zurück-Button nur auf Unterseiten anbieten


    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 22
Navigation: Positive Beispiele

  Flache Navigationsstruktur: 1 Klick
  Startseite auf Wichtigstes reduziert




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 23
Navigation: Negative Beispiele

  Startseiten nicht auf Wichtigstes reduziert
  Lenkt von
  Navigation ab
  Werbe-Teaser
  störend
  Corporate
  Website und
  App nicht
  ausreichend,
  mobile Website
  fehlt
     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 24
Funktion



soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 25
Funktion: Darauf achten, dass …

  Texteingaben minimieren
  Texteingabe auf mobil genutzten Geräten wesentlich
  schwieriger als auf Desktop-PC oder Laptop-Tastatur
  Reduzierungswege: Nutzung von hinterlegten Daten z. B.
  unter «My Account» ermöglichen, Fragen ob Nutzer lieber
  PIN statt Passwort eingeben wollen, Vorteile von
  integrierten Funktionalitäten nutzen




    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 26
Vorteile von integrierter Funktionalität nutzen!

  Telefonanrufe ermöglichen
  automatisches Anstossen eines Anrufs bei Klick auf
  Tel.-Nr.
  Adresse auf Karte anzeigen
  «Finde das nächste…» (GPS)
  Input-Eingabe auf innovativen Wegen
     QR Codes, Barcodes, Fotofunktion




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 27
Funktion: Positive Beispiele

  Hilfreiche Funktionen
  Unterstützung durch Hardware (z. B. GPS, Kamera)




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 28
Inhalt: Negative Beispiele

  Einbinden von integrierter Funktion wäre bei App möglich
  (z. B. Aktueller Standort, Route festlegen)
  Klickbereich in Navigation zu klein




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 29
Interaktion



soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 30
Interaktion: Beispiele – Input

  Wenig bekannte Gesten (Art Shortcut)
     Wischen erzeugt Submenü




     Zurück/weiter-Buttons bei
   Formulareingaben




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 31
Interaktion: Darauf achten, dass …

  «Für den dicken Finger designen»
     MIT: Fingerbeere Ø 10-14 mm breit
     Fingerspitze Ø 8-10 mm breit

     Detailangaben für verschiedene Plattformen: www.lukew.com,
     Touch Target Sizes




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 32
Interaktion: Darauf achten, dass …

  Für Rechts- und Linkshänder designen
  Websites: Navigationsleiste oft links                                     ungünstig für
  Rechtshänder
  Browsererkennung: für mobile
  Geräte alternative Navigation anbieten




                                                                             Quelle: www.delorean-power.com

     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 33
Interaktion: Stolpersteine

  Kein Maus-Zeiger vorhanden
     User wissen immer, wo ihr Finger ist

  Nicht möglich, verschiedene Maus-Stati anzuzeigen
  Status-Anzeige möglich durch Hervorhebung (Farbe, Rand,
  Animation o.ä.)
  Keine Analogie zu Maus-Button Interaktion
  (anzeigen und auslösen in 1 Schritt)




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 34
Interaktion: Stolpersteine

  Vermeiden:
     Javascript-Tooltips mit wichtigen Informationen
     Auslösende Elemente via Hover-Status (z. B. editieren, löschen)
     Grafiken oder Fotos, welche erst bei Hover-Status vollständig
     angezeigt werden
     Drop-down Menüs. Falls tap möglich, klaren Hinweis darauf
     geben.
     Zu stark auf Hover-abhängiges CSS3 fokussieren. Multi-touch User
     sehen die coolen Effekte nicht.




     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 35
User Experience & Usability



soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 36
User Experience & Usability – Darauf achten, dass …

  Mobile Anwendungen intuitiv gestalten
  Fokus: KISS-Prinzip «Keep it short and simple»
  «Joy of Use» in Vordergrund stellen
  Performanz im Hinterkopf behalten
     Bei träger Anwendung verliert Benutzer schnell Interesse
     Aufmerksamkeit durch schnelle Reaktion auf Berührung steigern

  Konzipiertes Produkt unbedingt mit Zielgruppe testen
     Test mit echtem Gerät durchführen, keine Simulationen
     Wenn Benutzer an bestimmter Stelle «zögert» oder «stolpert»,
     diese Stelle unbedingt optimieren

     soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 37
Agenda
 Einleitung
 10 Do’s and Don'ts
 Mobiles Testen
 Fazit




    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 38
Unser Vorgehensmodell:
Benutzerzentrierter Prozess ISO 9241 Teil 210



                                                                        Benutzerbefragung
                                                                        - Interview / Contextual Inquiry
                             Nutzungskontextanalyse
   Vorher-Nachher-Untersuchung                                          - Fragebogen
   (Online-Umfrage)                                         Personas    - Fokusgruppen
                                                           Card Storming
                                                                                      Card Sorting
                IST-Analyse
                                                                   Informationsarchitektur entwickeln
    Expert Review                                                    Interaktionskonzept
 Heuristic Evaluation                                                    Navigationskonzept
Konkurrenzanalyse                                                              Zugangskonzept
                                                                       Seitentypen definieren
    Usability-Testing
    - Walkthrough                                                 Styleguide / Guidelines entwickeln
    - Labortest
    - Feldtest                                                                 Interaction Patterns
                                                           LoFi Prototyping
                        Wireframes
                                                HiFi Prototyping
          soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 39
Worauf testen?



      http://samsung-blog.com/wp-content/uploads/2011/05/iphone4-vs-galaxys2-2.jpg
Womit testen?
10 do’s und dont’s der gestaltung mobiler anwendungen
Was wird getestet?
10 do’s und dont’s der gestaltung mobiler anwendungen
Wo?
Wie wird getestet?




 Usability Test




       soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 46
Wie wird getestet?




 Test-               Usability              Anpassungen                        Test-
 vorbereitung        Test                                                      vorbereitung

                     1. Woche                                                               2. Woche
      soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 47
Wie wird getestet?




 Test-               Usability              Anpassungen                        Test-
 vorbereitung        Test                                                      vorbereitung

                     1. Woche                                                               2. Woche
      soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 48
Wie wird getestet?




 Test-               Usability              Anpassungen                        Test-
 vorbereitung        Test                                                      vorbereitung

                     1. Woche                                                               2. Woche
      soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 49
Wie wird getestet?




 Test-               Usability              Anpassungen                        Test-
 vorbereitung        Test                                                      vorbereitung

                     1. Woche                                                               2. Woche
      soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 50
Wie wird getestet?




                                                                          Iteratives Vorgehen




 Test-               Usability              Anpassungen                        Test-
 vorbereitung        Test                                                      vorbereitung

                     1. Woche                                                               2. Woche
      soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 51
Agenda
 Einleitung
 10 Do’s and Don'ts
 Mobiles Testen
 Fazit




    soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 52
Fazit

  Den Nutzer kennen
  Limitationen und Chancen von mobilen Apps erkennen
  (weniger ist mehr)
  Iteratives Testing erhöht die Usability                                       Der Nutzer nutzt
  es dann auch




        soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 53
Herzlichen Dank für Ihre Aufmerksamkeit
Bei Fragen stehen wir gerne zur Verfügung

Weitere ähnliche Inhalte

Was ist angesagt?

"Texten fürs Web", Usability Coffee, Zug, 22.01.2015
"Texten fürs Web", Usability Coffee, Zug, 22.01.2015"Texten fürs Web", Usability Coffee, Zug, 22.01.2015
"Texten fürs Web", Usability Coffee, Zug, 22.01.2015
soultank AG
 
Visual thinking usability coffee st gallen 19 03 2015
Visual thinking usability coffee st gallen 19 03 2015Visual thinking usability coffee st gallen 19 03 2015
Visual thinking usability coffee st gallen 19 03 2015
soultank AG
 
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 21.08....
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 21.08....Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 21.08....
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 21.08....
soultank AG
 
Visual thinking, Usability Coffee, Zug, 14.04.2015
Visual thinking, Usability Coffee, Zug, 14.04.2015Visual thinking, Usability Coffee, Zug, 14.04.2015
Visual thinking, Usability Coffee, Zug, 14.04.2015
soultank AG
 
Entwicklung des neuen Swisscom Intranets mit User Centered Design
Entwicklung des neuen Swisscom Intranets mit User Centered DesignEntwicklung des neuen Swisscom Intranets mit User Centered Design
Entwicklung des neuen Swisscom Intranets mit User Centered Design
soultank AG
 
Mobile Protptyping, Usability Coffee, Zug, 19.02.105
Mobile Protptyping, Usability Coffee, Zug, 19.02.105Mobile Protptyping, Usability Coffee, Zug, 19.02.105
Mobile Protptyping, Usability Coffee, Zug, 19.02.105
soultank AG
 
Mensch & Computer 2010 - Tutorial Agile UX
Mensch & Computer 2010 - Tutorial Agile UXMensch & Computer 2010 - Tutorial Agile UX
Mensch & Computer 2010 - Tutorial Agile UX
Hartmut Obendorf
 
Uability und User Experience - Ein bisschen darüber geplaudert ...
Uability und User Experience - Ein bisschen darüber geplaudert ...Uability und User Experience - Ein bisschen darüber geplaudert ...
Uability und User Experience - Ein bisschen darüber geplaudert ...
Maria Rauschenberger
 
eparo – User Experience Design und Usability. Niemand sagt mehr "Konzeption" ...
eparo – User Experience Design und Usability. Niemand sagt mehr "Konzeption" ...eparo – User Experience Design und Usability. Niemand sagt mehr "Konzeption" ...
eparo – User Experience Design und Usability. Niemand sagt mehr "Konzeption" ...
eparo GmbH
 
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs? Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
kris_lohmann
 
Responsive goes Agile!
Responsive goes Agile!Responsive goes Agile!
Responsive goes Agile!
Dirk Pogrzeba
 
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten ProduktentwicklungAgile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Rainer Gibbert
 
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-LiveQ-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Unic
 
Weblogs, Wikis, Podcasts - opportunities for companies
Weblogs, Wikis, Podcasts - opportunities for companiesWeblogs, Wikis, Podcasts - opportunities for companies
Weblogs, Wikis, Podcasts - opportunities for companies
Prof. Dr. Manfred Leisenberg
 

Was ist angesagt? (14)

"Texten fürs Web", Usability Coffee, Zug, 22.01.2015
"Texten fürs Web", Usability Coffee, Zug, 22.01.2015"Texten fürs Web", Usability Coffee, Zug, 22.01.2015
"Texten fürs Web", Usability Coffee, Zug, 22.01.2015
 
Visual thinking usability coffee st gallen 19 03 2015
Visual thinking usability coffee st gallen 19 03 2015Visual thinking usability coffee st gallen 19 03 2015
Visual thinking usability coffee st gallen 19 03 2015
 
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 21.08....
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 21.08....Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 21.08....
Scrum und User Centered Design – wie geht das?, Usability Coffee, Zug, 21.08....
 
Visual thinking, Usability Coffee, Zug, 14.04.2015
Visual thinking, Usability Coffee, Zug, 14.04.2015Visual thinking, Usability Coffee, Zug, 14.04.2015
Visual thinking, Usability Coffee, Zug, 14.04.2015
 
Entwicklung des neuen Swisscom Intranets mit User Centered Design
Entwicklung des neuen Swisscom Intranets mit User Centered DesignEntwicklung des neuen Swisscom Intranets mit User Centered Design
Entwicklung des neuen Swisscom Intranets mit User Centered Design
 
Mobile Protptyping, Usability Coffee, Zug, 19.02.105
Mobile Protptyping, Usability Coffee, Zug, 19.02.105Mobile Protptyping, Usability Coffee, Zug, 19.02.105
Mobile Protptyping, Usability Coffee, Zug, 19.02.105
 
Mensch & Computer 2010 - Tutorial Agile UX
Mensch & Computer 2010 - Tutorial Agile UXMensch & Computer 2010 - Tutorial Agile UX
Mensch & Computer 2010 - Tutorial Agile UX
 
Uability und User Experience - Ein bisschen darüber geplaudert ...
Uability und User Experience - Ein bisschen darüber geplaudert ...Uability und User Experience - Ein bisschen darüber geplaudert ...
Uability und User Experience - Ein bisschen darüber geplaudert ...
 
eparo – User Experience Design und Usability. Niemand sagt mehr "Konzeption" ...
eparo – User Experience Design und Usability. Niemand sagt mehr "Konzeption" ...eparo – User Experience Design und Usability. Niemand sagt mehr "Konzeption" ...
eparo – User Experience Design und Usability. Niemand sagt mehr "Konzeption" ...
 
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs? Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
Die UX von Enterprise-Anwendungen: Ein Aschenputtel des Software-Designs?
 
Responsive goes Agile!
Responsive goes Agile!Responsive goes Agile!
Responsive goes Agile!
 
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten ProduktentwicklungAgile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
 
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-LiveQ-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
 
Weblogs, Wikis, Podcasts - opportunities for companies
Weblogs, Wikis, Podcasts - opportunities for companiesWeblogs, Wikis, Podcasts - opportunities for companies
Weblogs, Wikis, Podcasts - opportunities for companies
 

Ähnlich wie 10 do’s und dont’s der gestaltung mobiler anwendungen

Anforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-DesignAnforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-Design
soultank AG
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
Alexander Beck
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
Alexander Beck
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)
denkwerk GmbH
 
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von AppsMobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
Georg Eck
 
Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?
Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?
Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
Pidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile Geräte
Pidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile GerätePidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile Geräte
Pidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile Geräte
Pidoco
 
Mobile Applikationen: LeasePlan Mobil
Mobile Applikationen: LeasePlan MobilMobile Applikationen: LeasePlan Mobil
User xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch ZufallUser xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch Zufall
Daniel Muther
 
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
Digitale Zusammenarbeit - Anwendungsfälle und Erfolgsfaktoren
Digitale Zusammenarbeit - Anwendungsfälle und ErfolgsfaktorenDigitale Zusammenarbeit - Anwendungsfälle und Erfolgsfaktoren
Digitale Zusammenarbeit - Anwendungsfälle und Erfolgsfaktoren
Beck et al. GmbH
 
Responsive design
Responsive designResponsive design
Responsive design
Thomas Bähr
 
NUTZER:effekt #8 - Magazin für Bedienbarkeit und Digitales
NUTZER:effekt #8 - Magazin für Bedienbarkeit und DigitalesNUTZER:effekt #8 - Magazin für Bedienbarkeit und Digitales
NUTZER:effekt #8 - Magazin für Bedienbarkeit und Digitales
HANDSPIEL GmbH
 
eparo - Service Design Immonet iPad-App (Vortrag iico Konferenz 2013 - Rolf ...
eparo - Service Design Immonet iPad-App  (Vortrag iico Konferenz 2013 - Rolf ...eparo - Service Design Immonet iPad-App  (Vortrag iico Konferenz 2013 - Rolf ...
eparo - Service Design Immonet iPad-App (Vortrag iico Konferenz 2013 - Rolf ...
eparo GmbH
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
chrisign gmbh
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Bokowsky + Laymann GmbH
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
Peter Grosskopf
 
User centred business model design - Tutorial Tobias_Limbach
User centred business model design - Tutorial Tobias_LimbachUser centred business model design - Tutorial Tobias_Limbach
User centred business model design - Tutorial Tobias_Limbach
Tobias Limbach
 
Usability coffee-mobile protptyping
Usability coffee-mobile protptypingUsability coffee-mobile protptyping
Usability coffee-mobile protptyping
soultank AG
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
Leif Janzik
 

Ähnlich wie 10 do’s und dont’s der gestaltung mobiler anwendungen (20)

Anforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-DesignAnforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-Design
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)
 
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von AppsMobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
Mobile Dokumentation auf Tablet-PCs und Smartphones mithilfe von Apps
 
Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?
Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?
Mobile Applikationen: Es gibt für alles eine App! - Auch für Sie?
 
Pidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile Geräte
Pidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile GerätePidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile Geräte
Pidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile Geräte
 
Mobile Applikationen: LeasePlan Mobil
Mobile Applikationen: LeasePlan MobilMobile Applikationen: LeasePlan Mobil
Mobile Applikationen: LeasePlan Mobil
 
User xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch ZufallUser xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch Zufall
 
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
 
Digitale Zusammenarbeit - Anwendungsfälle und Erfolgsfaktoren
Digitale Zusammenarbeit - Anwendungsfälle und ErfolgsfaktorenDigitale Zusammenarbeit - Anwendungsfälle und Erfolgsfaktoren
Digitale Zusammenarbeit - Anwendungsfälle und Erfolgsfaktoren
 
Responsive design
Responsive designResponsive design
Responsive design
 
NUTZER:effekt #8 - Magazin für Bedienbarkeit und Digitales
NUTZER:effekt #8 - Magazin für Bedienbarkeit und DigitalesNUTZER:effekt #8 - Magazin für Bedienbarkeit und Digitales
NUTZER:effekt #8 - Magazin für Bedienbarkeit und Digitales
 
eparo - Service Design Immonet iPad-App (Vortrag iico Konferenz 2013 - Rolf ...
eparo - Service Design Immonet iPad-App  (Vortrag iico Konferenz 2013 - Rolf ...eparo - Service Design Immonet iPad-App  (Vortrag iico Konferenz 2013 - Rolf ...
eparo - Service Design Immonet iPad-App (Vortrag iico Konferenz 2013 - Rolf ...
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
User centred business model design - Tutorial Tobias_Limbach
User centred business model design - Tutorial Tobias_LimbachUser centred business model design - Tutorial Tobias_Limbach
User centred business model design - Tutorial Tobias_Limbach
 
Usability coffee-mobile protptyping
Usability coffee-mobile protptypingUsability coffee-mobile protptyping
Usability coffee-mobile protptyping
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
 

Mehr von ONE Schweiz

Stefan Zanetti__qipp_140508
Stefan Zanetti__qipp_140508Stefan Zanetti__qipp_140508
Stefan Zanetti__qipp_140508
ONE Schweiz
 
Sven Ruoss_watson
Sven Ruoss_watsonSven Ruoss_watson
Sven Ruoss_watson
ONE Schweiz
 
Sarah Safri, Head of Marketing,Tutti: User mit Expertentipps und Do-it-yourse...
Sarah Safri, Head of Marketing,Tutti: User mit Expertentipps und Do-it-yourse...Sarah Safri, Head of Marketing,Tutti: User mit Expertentipps und Do-it-yourse...
Sarah Safri, Head of Marketing,Tutti: User mit Expertentipps und Do-it-yourse...
ONE Schweiz
 
Magazin blog.homegate.ch, Homegate AG
Magazin blog.homegate.ch, Homegate AGMagazin blog.homegate.ch, Homegate AG
Magazin blog.homegate.ch, Homegate AG
ONE Schweiz
 
20140507 one keynote mc_donald's strachwitz
20140507 one  keynote mc_donald's strachwitz20140507 one  keynote mc_donald's strachwitz
20140507 one keynote mc_donald's strachwitz
ONE Schweiz
 
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten TippsBarrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
ONE Schweiz
 
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste WebgestaltungAlexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
ONE Schweiz
 
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machenGregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
ONE Schweiz
 
Jürg Bühler: Cross-Channel vertrieb bei Ex Libris
Jürg Bühler: Cross-Channel vertrieb bei Ex LibrisJürg Bühler: Cross-Channel vertrieb bei Ex Libris
Jürg Bühler: Cross-Channel vertrieb bei Ex Libris
ONE Schweiz
 
Heinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
Heinrich von Grüningen: eBalance-Blog – Abnehmen als ThemaHeinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
Heinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
ONE Schweiz
 
Ivan Schmid: Moderne Website und Online-Shop Lösungen
Ivan Schmid: Moderne Website und Online-Shop LösungenIvan Schmid: Moderne Website und Online-Shop Lösungen
Ivan Schmid: Moderne Website und Online-Shop Lösungen
ONE Schweiz
 
John Riordan: Mobile Business Alerts von local.ch
John Riordan: Mobile Business Alerts von local.chJohn Riordan: Mobile Business Alerts von local.ch
John Riordan: Mobile Business Alerts von local.ch
ONE Schweiz
 
Vera Brannen: Brand Experience Design ist Chefsache
Vera Brannen: Brand Experience Design ist ChefsacheVera Brannen: Brand Experience Design ist Chefsache
Vera Brannen: Brand Experience Design ist Chefsache
ONE Schweiz
 
Thorsten Büring: Kundenerlebniskette als Innovationstreiber
Thorsten Büring: Kundenerlebniskette als InnovationstreiberThorsten Büring: Kundenerlebniskette als Innovationstreiber
Thorsten Büring: Kundenerlebniskette als Innovationstreiber
ONE Schweiz
 
10 Tipps entlang der Wertschöpfungskette eines E-Sellers
10 Tipps entlang der Wertschöpfungskette eines E-Sellers10 Tipps entlang der Wertschöpfungskette eines E-Sellers
10 Tipps entlang der Wertschöpfungskette eines E-Sellers
ONE Schweiz
 
ONE2013 Experience 04 Michael Ammann, Boxalino
ONE2013 Experience 04 Michael Ammann, BoxalinoONE2013 Experience 04 Michael Ammann, Boxalino
ONE2013 Experience 04 Michael Ammann, Boxalino
ONE Schweiz
 
ONE2013 Experience 02 - Thomas Betz, Seitenbau GmbH
ONE2013 Experience 02 - Thomas Betz, Seitenbau GmbHONE2013 Experience 02 - Thomas Betz, Seitenbau GmbH
ONE2013 Experience 02 - Thomas Betz, Seitenbau GmbH
ONE Schweiz
 
ONE2013 Experience 01 - Yves Meyer, ITB
ONE2013 Experience 01 - Yves Meyer, ITBONE2013 Experience 01 - Yves Meyer, ITB
ONE2013 Experience 01 - Yves Meyer, ITB
ONE Schweiz
 
SimpleDB - Chancen einer Cloud Datenbank
SimpleDB - Chancen einer Cloud DatenbankSimpleDB - Chancen einer Cloud Datenbank
SimpleDB - Chancen einer Cloud Datenbank
ONE Schweiz
 
Unic searchmetrics konkurrenzanalyse_2012-05-10
Unic searchmetrics konkurrenzanalyse_2012-05-10Unic searchmetrics konkurrenzanalyse_2012-05-10
Unic searchmetrics konkurrenzanalyse_2012-05-10
ONE Schweiz
 

Mehr von ONE Schweiz (20)

Stefan Zanetti__qipp_140508
Stefan Zanetti__qipp_140508Stefan Zanetti__qipp_140508
Stefan Zanetti__qipp_140508
 
Sven Ruoss_watson
Sven Ruoss_watsonSven Ruoss_watson
Sven Ruoss_watson
 
Sarah Safri, Head of Marketing,Tutti: User mit Expertentipps und Do-it-yourse...
Sarah Safri, Head of Marketing,Tutti: User mit Expertentipps und Do-it-yourse...Sarah Safri, Head of Marketing,Tutti: User mit Expertentipps und Do-it-yourse...
Sarah Safri, Head of Marketing,Tutti: User mit Expertentipps und Do-it-yourse...
 
Magazin blog.homegate.ch, Homegate AG
Magazin blog.homegate.ch, Homegate AGMagazin blog.homegate.ch, Homegate AG
Magazin blog.homegate.ch, Homegate AG
 
20140507 one keynote mc_donald's strachwitz
20140507 one  keynote mc_donald's strachwitz20140507 one  keynote mc_donald's strachwitz
20140507 one keynote mc_donald's strachwitz
 
Barrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten TippsBarrierefreie Websites: Die 10 wichtigsten Tipps
Barrierefreie Websites: Die 10 wichtigsten Tipps
 
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste WebgestaltungAlexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
 
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machenGregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
Gregor Patorski: Mitarbeiter zu Ko-Autoren im Firmenblog machen
 
Jürg Bühler: Cross-Channel vertrieb bei Ex Libris
Jürg Bühler: Cross-Channel vertrieb bei Ex LibrisJürg Bühler: Cross-Channel vertrieb bei Ex Libris
Jürg Bühler: Cross-Channel vertrieb bei Ex Libris
 
Heinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
Heinrich von Grüningen: eBalance-Blog – Abnehmen als ThemaHeinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
Heinrich von Grüningen: eBalance-Blog – Abnehmen als Thema
 
Ivan Schmid: Moderne Website und Online-Shop Lösungen
Ivan Schmid: Moderne Website und Online-Shop LösungenIvan Schmid: Moderne Website und Online-Shop Lösungen
Ivan Schmid: Moderne Website und Online-Shop Lösungen
 
John Riordan: Mobile Business Alerts von local.ch
John Riordan: Mobile Business Alerts von local.chJohn Riordan: Mobile Business Alerts von local.ch
John Riordan: Mobile Business Alerts von local.ch
 
Vera Brannen: Brand Experience Design ist Chefsache
Vera Brannen: Brand Experience Design ist ChefsacheVera Brannen: Brand Experience Design ist Chefsache
Vera Brannen: Brand Experience Design ist Chefsache
 
Thorsten Büring: Kundenerlebniskette als Innovationstreiber
Thorsten Büring: Kundenerlebniskette als InnovationstreiberThorsten Büring: Kundenerlebniskette als Innovationstreiber
Thorsten Büring: Kundenerlebniskette als Innovationstreiber
 
10 Tipps entlang der Wertschöpfungskette eines E-Sellers
10 Tipps entlang der Wertschöpfungskette eines E-Sellers10 Tipps entlang der Wertschöpfungskette eines E-Sellers
10 Tipps entlang der Wertschöpfungskette eines E-Sellers
 
ONE2013 Experience 04 Michael Ammann, Boxalino
ONE2013 Experience 04 Michael Ammann, BoxalinoONE2013 Experience 04 Michael Ammann, Boxalino
ONE2013 Experience 04 Michael Ammann, Boxalino
 
ONE2013 Experience 02 - Thomas Betz, Seitenbau GmbH
ONE2013 Experience 02 - Thomas Betz, Seitenbau GmbHONE2013 Experience 02 - Thomas Betz, Seitenbau GmbH
ONE2013 Experience 02 - Thomas Betz, Seitenbau GmbH
 
ONE2013 Experience 01 - Yves Meyer, ITB
ONE2013 Experience 01 - Yves Meyer, ITBONE2013 Experience 01 - Yves Meyer, ITB
ONE2013 Experience 01 - Yves Meyer, ITB
 
SimpleDB - Chancen einer Cloud Datenbank
SimpleDB - Chancen einer Cloud DatenbankSimpleDB - Chancen einer Cloud Datenbank
SimpleDB - Chancen einer Cloud Datenbank
 
Unic searchmetrics konkurrenzanalyse_2012-05-10
Unic searchmetrics konkurrenzanalyse_2012-05-10Unic searchmetrics konkurrenzanalyse_2012-05-10
Unic searchmetrics konkurrenzanalyse_2012-05-10
 

10 do’s und dont’s der gestaltung mobiler anwendungen

  • 1. 10 Do’s und Don’ts bei der Gestaltung mobiler Anwendungen ONE Konferenz, 10.05.2012, Marcel B.F. Uhr, Iris Müller, soultank AG
  • 2. Wechseln wir nun den Blickwinkel zum Benutzer Apps, mobile Webseiten etc. gibt es viele, viele, viele und es werden immer mehr Der Erfolg der mobilen Lösung wird vom Nutzer schlussendlich bestimmt. soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 2
  • 3. Agenda Einleitung Die wichtigsten Do’s and Don’ts Mobiles Testen Fazit soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 3
  • 4. In welchem Kontext werden mobile Apps/Websites benutzt? Nutzungssituationen Zu Hause: 84 % Verschiedene Pausen während Tag: 80 % Während Wartezeit in Schlangen und in Einrichtungen: 74 % Während «Shopping»: 69 % Während Arbeiten: 64 % Während TV Schauen: 62 % Während Pendeln: 47 % Quelle: Luke Wroblewski. Mobile First. (2011) soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 4
  • 5. Kenne Deinen Nutzer: Nutzungskontextanalyse Benutzer-, Aufgaben- und Kontextanalyse Benutzer: Kontext: Mann, Alter Business, Mobil unbekannt Aufgabe: System: Dateneingabe Stiftbedienung Touchscreen Quelle: Modell abgeleitet von Michael Herczeg soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 5
  • 6. Welcher Interaktionstyp bist Du? Vier wichtige Interaktionstypen 1. Lookup/Find «Ich benötige aktuell eine Antwort zu bestimmten Thema.» 2. Explore/Play «Ich will etwas Zeit überbrücken und mich ablenken.» 3. Check in/Status «Es ändert/aktualisiert sich etwas und ich möchte Bescheid wissen.» 4. Edit/Create «Ich muss jetzt etwas Dringendes tun, was nicht warten kann.» Quelle: Luke Wroblewski. Mobile First. (2011) soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 6
  • 7. Nutzungskontextanalyse: Ergebnis Mobile Website vs. App Nutzerforschung* (2011) zeigt: Erfolgsrate bei mobilen Websites: 64 % Erfolgsrate bei Desktop-Websites auf mobilen Geräten: 58 % App noch besser: Erfolgsrate 76 % 3 Möglichkeiten für mobile Inhalte Responsive Layout für Website Separate mobile Website Native Applikationen (Apps) soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 7
  • 8. Agenda Einleitung 10 Do’s and Don'ts Mobiles Testen Fazit soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 8
  • 9. Wichtigstes Do Ergonomischer Grundsatz «less is more» gilt bei Mobile umso mehr! soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 9
  • 10. Inhalt soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 10
  • 11. Inhalt: Darauf achten, dass … Inhaltlich stark auf Wesentliches beschränken Hauptinhalte integrieren, alle anderen Inhalte entfernen Keinen Werbetext einsetzen Starke Reduzierung von textlichem Inhalt Integration nur wichtigster Zusatzfunktionen (Features); Beschränkung sinnvoll (aber: Abbildung ganzer Funktionalität möglich) Wichtigste Links als Hauptinhalt einbinden (Startseite), die auf Unterseiten verweisen (in Unterseiten auslagern) soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 11
  • 12. Inhalt: Positives Beispiel Varianten: Corporate Website, Mobile Website soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 12
  • 13. Inhalt: Negatives Beispiel Keine Variante: Corporate Web soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 13
  • 14. Design soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 14
  • 15. Design: Darauf achten, dass … Geringere Bildschirmauflösungen bei mobilen Geräten Gängige Bildschirmauflösungen 800 x 480 px (Android) 960 x 640 px (iPhone) 1024 X 768 px (iPad) Informationsangebot, Layout, Navigation müssen Grösse entsprechend angepasst werden Bildschirme und Verarbeitungsdauer können sich stark voneinander unterscheiden Je nach Anforderung unterschiedliche Versionen von mobilen Websites soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 15
  • 16. Design: Darauf achten, dass … Design von Schaltflächen. Stark abhängig vom Betriebssystem z.B. Android vs. iOS Grösse von Schaltflächen Feedback und Akzeptieren von Eingaben Einfaches GUI-Design Farbigkeit Wahlmöglichkeiten begrenzen Bewegte Bilder sparsam einsetzen Quelle: http://developer.android.com/design/patterns/pure-android.html soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 16
  • 17. Design: Darauf achten, dass … Wichtige «Call to actions» visuell in Vordergrund stellen soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 17
  • 18. Design: Positives Beispiel soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 18
  • 19. Design: Positives Beispiel Webseite und App soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 19
  • 20. Design: Negatives Beispiel soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 20
  • 21. Navigation soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 21
  • 22. Navigation: Darauf achten, dass … Informationsarchitektur: Reduktion auf das Nötigste Navigationsoptionen einschränken Flache Navigationsstruktur einbinden Benutzerführung ist A und O: Nicht auf Webseite umleiten, sondern angepasste Inhalte anzeigen. «Mobile First» nach Luke Wroblewski Auf Unterseiten Navigation im unteren Bildschirmbereich einbinden Zurück-Button nur auf Unterseiten anbieten soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 22
  • 23. Navigation: Positive Beispiele Flache Navigationsstruktur: 1 Klick Startseite auf Wichtigstes reduziert soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 23
  • 24. Navigation: Negative Beispiele Startseiten nicht auf Wichtigstes reduziert Lenkt von Navigation ab Werbe-Teaser störend Corporate Website und App nicht ausreichend, mobile Website fehlt soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 24
  • 25. Funktion soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 25
  • 26. Funktion: Darauf achten, dass … Texteingaben minimieren Texteingabe auf mobil genutzten Geräten wesentlich schwieriger als auf Desktop-PC oder Laptop-Tastatur Reduzierungswege: Nutzung von hinterlegten Daten z. B. unter «My Account» ermöglichen, Fragen ob Nutzer lieber PIN statt Passwort eingeben wollen, Vorteile von integrierten Funktionalitäten nutzen soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 26
  • 27. Vorteile von integrierter Funktionalität nutzen! Telefonanrufe ermöglichen automatisches Anstossen eines Anrufs bei Klick auf Tel.-Nr. Adresse auf Karte anzeigen «Finde das nächste…» (GPS) Input-Eingabe auf innovativen Wegen QR Codes, Barcodes, Fotofunktion soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 27
  • 28. Funktion: Positive Beispiele Hilfreiche Funktionen Unterstützung durch Hardware (z. B. GPS, Kamera) soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 28
  • 29. Inhalt: Negative Beispiele Einbinden von integrierter Funktion wäre bei App möglich (z. B. Aktueller Standort, Route festlegen) Klickbereich in Navigation zu klein soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 29
  • 30. Interaktion soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 30
  • 31. Interaktion: Beispiele – Input Wenig bekannte Gesten (Art Shortcut) Wischen erzeugt Submenü Zurück/weiter-Buttons bei Formulareingaben soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 31
  • 32. Interaktion: Darauf achten, dass … «Für den dicken Finger designen» MIT: Fingerbeere Ø 10-14 mm breit Fingerspitze Ø 8-10 mm breit Detailangaben für verschiedene Plattformen: www.lukew.com, Touch Target Sizes soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 32
  • 33. Interaktion: Darauf achten, dass … Für Rechts- und Linkshänder designen Websites: Navigationsleiste oft links ungünstig für Rechtshänder Browsererkennung: für mobile Geräte alternative Navigation anbieten Quelle: www.delorean-power.com soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 33
  • 34. Interaktion: Stolpersteine Kein Maus-Zeiger vorhanden User wissen immer, wo ihr Finger ist Nicht möglich, verschiedene Maus-Stati anzuzeigen Status-Anzeige möglich durch Hervorhebung (Farbe, Rand, Animation o.ä.) Keine Analogie zu Maus-Button Interaktion (anzeigen und auslösen in 1 Schritt) soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 34
  • 35. Interaktion: Stolpersteine Vermeiden: Javascript-Tooltips mit wichtigen Informationen Auslösende Elemente via Hover-Status (z. B. editieren, löschen) Grafiken oder Fotos, welche erst bei Hover-Status vollständig angezeigt werden Drop-down Menüs. Falls tap möglich, klaren Hinweis darauf geben. Zu stark auf Hover-abhängiges CSS3 fokussieren. Multi-touch User sehen die coolen Effekte nicht. soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 35
  • 36. User Experience & Usability soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 36
  • 37. User Experience & Usability – Darauf achten, dass … Mobile Anwendungen intuitiv gestalten Fokus: KISS-Prinzip «Keep it short and simple» «Joy of Use» in Vordergrund stellen Performanz im Hinterkopf behalten Bei träger Anwendung verliert Benutzer schnell Interesse Aufmerksamkeit durch schnelle Reaktion auf Berührung steigern Konzipiertes Produkt unbedingt mit Zielgruppe testen Test mit echtem Gerät durchführen, keine Simulationen Wenn Benutzer an bestimmter Stelle «zögert» oder «stolpert», diese Stelle unbedingt optimieren soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 37
  • 38. Agenda Einleitung 10 Do’s and Don'ts Mobiles Testen Fazit soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 38
  • 39. Unser Vorgehensmodell: Benutzerzentrierter Prozess ISO 9241 Teil 210 Benutzerbefragung - Interview / Contextual Inquiry Nutzungskontextanalyse Vorher-Nachher-Untersuchung - Fragebogen (Online-Umfrage) Personas - Fokusgruppen Card Storming Card Sorting IST-Analyse Informationsarchitektur entwickeln Expert Review Interaktionskonzept Heuristic Evaluation Navigationskonzept Konkurrenzanalyse Zugangskonzept Seitentypen definieren Usability-Testing - Walkthrough Styleguide / Guidelines entwickeln - Labortest - Feldtest Interaction Patterns LoFi Prototyping Wireframes HiFi Prototyping soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 39
  • 40. Worauf testen? http://samsung-blog.com/wp-content/uploads/2011/05/iphone4-vs-galaxys2-2.jpg
  • 45. Wo?
  • 46. Wie wird getestet? Usability Test soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 46
  • 47. Wie wird getestet? Test- Usability Anpassungen Test- vorbereitung Test vorbereitung 1. Woche 2. Woche soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 47
  • 48. Wie wird getestet? Test- Usability Anpassungen Test- vorbereitung Test vorbereitung 1. Woche 2. Woche soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 48
  • 49. Wie wird getestet? Test- Usability Anpassungen Test- vorbereitung Test vorbereitung 1. Woche 2. Woche soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 49
  • 50. Wie wird getestet? Test- Usability Anpassungen Test- vorbereitung Test vorbereitung 1. Woche 2. Woche soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 50
  • 51. Wie wird getestet? Iteratives Vorgehen Test- Usability Anpassungen Test- vorbereitung Test vorbereitung 1. Woche 2. Woche soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 51
  • 52. Agenda Einleitung 10 Do’s and Don'ts Mobiles Testen Fazit soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 52
  • 53. Fazit Den Nutzer kennen Limitationen und Chancen von mobilen Apps erkennen (weniger ist mehr) Iteratives Testing erhöht die Usability Der Nutzer nutzt es dann auch soultank AG | ONE Konferenz - 10 Do's and Don'ts der Gestaltung mobiler Anwendungen | 10. Mai 2012 | Folie 53
  • 54. Herzlichen Dank für Ihre Aufmerksamkeit Bei Fragen stehen wir gerne zur Verfügung