Daniel EstermannMobile Interaction DesignTücken bei der Abbildung von PC-Anwendungen
Ausgangslage    Web-Based Traning (WBT)!   E-Learning Modul zum    Thema Körperlehre!   Flash-basiert für PC!   WBT enthäl...
Problemstellung          Frage:                             2 VariantenWie kann die Hotspot-Seite    !   Lernen:auf einem ...
Initialer Vorschlag des Kunden                       Beschreibung des Antippen mit Finger     Bildbereichs
Initialer Vorschlag des Kunden Zuordnungsaufgabe   Drag & Drop
Herausforderung            Infoseite                     Zuordnungs-Aufgabe!     Wo sind die antippbaren         !   Drag ...
Alternative Idee...
...aus dem Cockpit
•  In der oberen Screenhälfte wird                                           das bild und bis zu 8 Hotspots1              ...
•  Nach Antippen einer Nummer                                              wird unterhalb des Bilds die1                  ...
Fragetyp
•  Zu Beginn werden wiederum                                     alle Punkte angezeigt1                           5       ...
•  Drücken wir also mal auf eine                                   Zahl...1                         5                     ...
•  während dem Tippen wird die                                   Zeile markiert...1                         52            ...
•  Nach dem Loslassen bleibt die                                   Zeile mit der gleichen Zahl1                         5 ...
•  Diesmal wird zuerst eine                                       Textzeile gewählt...1                             52    ...
•  und dann die zugehörige Zahl.1 tap                    52                        63                        74           ...
•  Und so weiter...1                        52                        63                        74                        ...
•  War das richtig bisher???1                        52                        63                        74               ...
•  Die Bewertung jeder erfolgten                                  Zuordnung gibt Aufschluss.1                        52   ...
Umsetzung: 1 Bild pro Hotspot                     Zutaten:bild0.png                     •  1 Übersichtsbild (bild0.png)   ...
Alternative            !   Aufteilung in separate Seiten            !   Sequentielle Erklärung aller HotspotsHerzgefässe: ...
Nächste SlideShare
Wird geladen in …5
×

Mobile Interaction Design: Die Tücken

0 Aufrufe

Veröffentlicht am

Gerade bei der Abbildung von bestehendem PC-Anwendungen wird oft mit allen Mitteln versucht, das Ausgangsmaterial wiederzuverwenden zu wollen. Damit werden Anwendungsmuster vom PC auf das Smartphone übertragen, die dort nicht funktionieren. Ein Beispiel aus dem Bereich E-Learning zeigt, dass man sich zuerst von bestehenden Vorstellungen lösen sollte...

Veröffentlicht in: Technologie, Kunst & Fotos
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
0
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
0
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mobile Interaction Design: Die Tücken

  1. 1. Daniel EstermannMobile Interaction DesignTücken bei der Abbildung von PC-Anwendungen
  2. 2. Ausgangslage Web-Based Traning (WBT)!   E-Learning Modul zum Thema Körperlehre!   Flash-basiert für PC!   WBT enthält viele beschriftete Bilder!   Bildteile (Hotspots) können für weitere Infos mit der Maus angeklickt werden
  3. 3. Problemstellung Frage: 2 VariantenWie kann die Hotspot-Seite !   Lernen:auf einem kleinen Display mit Anzeige einerFingerbedienung abgebildet Beschreibung zu jederwerden? Bildstelle !   Testaufgabe zum Üben: Zuordnung von Beschriftungen zu Bildstellen Linke Herzkammer Aus der linken Kammer wird sauerstoffreiches Blut in den Körperkreislauf gepumpt.
  4. 4. Initialer Vorschlag des Kunden Beschreibung des Antippen mit Finger Bildbereichs
  5. 5. Initialer Vorschlag des Kunden Zuordnungsaufgabe Drag & Drop
  6. 6. Herausforderung Infoseite Zuordnungs-Aufgabe!   Wo sind die antippbaren !   Drag & Drop auf dem Bildbereiche (Hotspots)? Kein Mouse-Hover möglich! kleinen Touch-Screen ziemlich umständlich!   Beschreibung gleichzeitig mit Bild anzeigen => Bild muss noch kleiner sein!   Hotspots sehr nah beieinander. Fehlende Präzision des Fingers!!   Zoomen? Umständlich.
  7. 7. Alternative Idee...
  8. 8. ...aus dem Cockpit
  9. 9. •  In der oberen Screenhälfte wird das bild und bis zu 8 Hotspots1 5 tap angezeigt.2 6 •  Statt auf das Bild tippt man auf die Nummern am Rand.3 7 •  Vorteil: Die Hotspots können4 8 klein sein und eng beieinander liegen. Das Herz Tippen Sie auf eine Zahl! für weitere Details.
  10. 10. •  Nach Antippen einer Nummer wird unterhalb des Bilds die1 5 zughörige Beschreibung eingeblendet.2 6 •  Zudem wird der Hotspot im Bild hervorgehoben.3 74 8 Einschränkung: •  Aus Platzgründen können5. Aorta maximal 6-8 Bildstellen ausgewählt werden.Die Aorta, auch Hauptschlagader (Genaue Zahl muss noch durchgenannt, ist ein großes Blutgefäß, dasdirekt aus der linken Seite des Tests verifiziert werden)Herzens entspringt. Sie leitet das Blutaus der linken Herzkammer … •  Falls mehr Hotspots benötigt werden, können Sie auf weitere Fragen verteilt werden.
  11. 11. Fragetyp
  12. 12. •  Zu Beginn werden wiederum alle Punkte angezeigt1 5 tap •  In der unteren Hälfte2 6 erscheinen alle möglichen Beschriftungen3 7 (in zufälliger Reihenfolge, scrollbar)4 8 •  Der Benutzer kann wahlweise zuerst eine Textzeile oder einen Rechte Herzkammer Zahlenknopf antippen Linke Herzkammer Aorta Lungenvene
  13. 13. •  Drücken wir also mal auf eine Zahl...1 5 •  Im Bild wird der gewählte2 6 Hotspot entsprechend hervorgehoben (in diesem3 7 Beispiel werden alle anderen Linien und Bereiche4 8 ausgeblendet). •  Als nächstes wählt man den Rechte Herzkammer zugehörigen Text... Linke Herzkammer Aorta tap Lungenvene
  14. 14. •  während dem Tippen wird die Zeile markiert...1 52 63 74 8 Rechte Herzkammer Linke Herzkammer 5 Aorta tap Lungenvene
  15. 15. •  Nach dem Loslassen bleibt die Zeile mit der gleichen Zahl1 5 gekennzeichnet.2 6 •  Beide Zahlsymbole werden nun farblich abgedunkelt, um3 7 anzuzeigen, dass bereits eine Zuordnung besteht.4 8 •  Nun kann die nächste Zuordnung erfolgen. Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene
  16. 16. •  Diesmal wird zuerst eine Textzeile gewählt...1 52 63 74 8 Rechte Herzkammer tap Linke Herzkammer 5 Aorta Lungenvene
  17. 17. •  und dann die zugehörige Zahl.1 tap 52 63 74 8 1 Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene
  18. 18. •  Und so weiter...1 52 63 74 8 1 Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene
  19. 19. •  War das richtig bisher???1 52 63 74 8 1 Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene tap
  20. 20. •  Die Bewertung jeder erfolgten Zuordnung gibt Aufschluss.1 52 63 74 8 1 Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene
  21. 21. Umsetzung: 1 Bild pro Hotspot Zutaten:bild0.png •  1 Übersichtsbild (bild0.png) •  X Detailbilder pro Hotspot (bild1.png bis bildX.png) •  XML-Struktur mit: •  Prefix des Bildnamens ("bild"...) •  Titel und Beschreibung jedesbild1.png Hotspotsbild2.pngbild3.png Vorteile:bild4.pngbild5.png •  Keine Pixel-Koordinaten der Hotspot-bild6.png Kreise notwendig!bild7.png •  Bildbereiche können optisch aufbild8.png beliebige Weise hervorgehoben werden (nicht nur mit Kreisen)
  22. 22. Alternative !   Aufteilung in separate Seiten !   Sequentielle Erklärung aller HotspotsHerzgefässe: Übersicht Aorta Lungenarterie Linke Herzkamm Lorem ipsum dolor sit amet, consetetur Lorem ipsum dolor sit amet, consetetur Lorem ipsum dolor sit amet, consetetur Lorem ipsum dolor sitsadipscing elitr, sed diam nonumy sadipscing elitr, sed diam nonumy sadipscing elitr, sed diam nonumy sadipscing elitr, sed dieirmod tempor invidunt ut labore et eirmod tempor invidunt ut labore et eirmod tempor invidunt ut labore et eirmod tempor invidundolore magna aliquyam erat, sed diam dolore magna aliquyam erat, sed diam dolore magna aliquyam erat, sed diam dolore magna aliquyamvoluptua. voluptua. voluptua. voluptua.

×