Als PDF, PPTX herunterladen
Mobile Interaction Design: Die Tücken
- 1. Daniel Estermann Mobile InteractionDesign Tücken bei der Abbildung von PC-Anwendungen
- 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. Problemstellung Frage: 2 Varianten Wie kann die 'Hotspot'-Seite ! Lernen: auf einem kleinen Display mit Anzeige einer Fingerbedienung abgebildet Beschreibung zu jeder werden? Bildstelle ! Testaufgabe zum Üben: Zuordnung von Beschriftungen zu Bildstellen Linke Herzkammer Aus der linken Kammer wird sauerstoffreiches Blut in den Körperkreislauf gepumpt.
- 4. Initialer Vorschlag desKunden Beschreibung des Antippen mit Finger Bildbereichs
- 5. Initialer Vorschlag desKunden Zuordnungsaufgabe Drag & Drop
- 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.
- 8.
- 9. • In deroberen Screenhälfte wird das bild und bis zu 8 Hotspots 1 5 tap angezeigt. 2 6 • Statt auf das Bild tippt man auf die Nummern am Rand. 3 7 • Vorteil: Die Hotspots können 4 8 klein sein und eng beieinander liegen. Das Herz Tippen Sie auf eine Zahl! für weitere Details.
- 10. • Nach Antippeneiner Nummer wird unterhalb des Bilds die 1 5 zughörige Beschreibung eingeblendet. 2 6 • Zudem wird der Hotspot im Bild hervorgehoben. 3 7 4 8 Einschränkung: • Aus Platzgründen können 5. Aorta maximal 6-8 Bildstellen ausgewählt werden. Die Aorta, auch Hauptschlagader (Genaue Zahl muss noch durch genannt, ist ein großes Blutgefäß, das direkt aus der linken Seite des Tests verifiziert werden) Herzens entspringt. Sie leitet das Blut aus der linken Herzkammer … • Falls mehr Hotspots benötigt werden, können Sie auf weitere Fragen verteilt werden.
- 11.
- 12. • Zu Beginnwerden wiederum alle Punkte angezeigt 1 5 tap • In der unteren Hälfte 2 6 erscheinen alle möglichen Beschriftungen 3 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. • Drücken wiralso mal auf eine Zahl... 1 5 • Im Bild wird der gewählte 2 6 Hotspot entsprechend hervorgehoben (in diesem 3 7 Beispiel werden alle anderen Linien und Bereiche 4 8 ausgeblendet). • Als nächstes wählt man den Rechte Herzkammer zugehörigen Text... Linke Herzkammer Aorta tap Lungenvene
- 14. • während demTippen wird die Zeile markiert... 1 5 2 6 3 7 4 8 Rechte Herzkammer Linke Herzkammer 5 Aorta tap Lungenvene
- 15. • Nach demLoslassen bleibt die Zeile mit der gleichen Zahl 1 5 gekennzeichnet. 2 6 • Beide Zahlsymbole werden nun farblich abgedunkelt, um 3 7 anzuzeigen, dass bereits eine Zuordnung besteht. 4 8 • Nun kann die nächste Zuordnung erfolgen. Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene
- 16. • Diesmal wirdzuerst eine Textzeile gewählt... 1 5 2 6 3 7 4 8 Rechte Herzkammer tap Linke Herzkammer 5 Aorta Lungenvene
- 17. • und danndie zugehörige Zahl. 1 tap 5 2 6 3 7 4 8 1 Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene
- 18. • Und soweiter... 1 5 2 6 3 7 4 8 1 Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene
- 19. • War dasrichtig bisher??? 1 5 2 6 3 7 4 8 1 Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene tap
- 20. • Die Bewertungjeder erfolgten Zuordnung gibt Aufschluss. 1 5 2 6 3 7 4 8 1 Rechte Herzkammer Linke Herzkammer 5 Aorta Lungenvene
- 21. Umsetzung: 1 Bildpro 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 jedes bild1.png Hotspots bild2.png bild3.png Vorteile: bild4.png bild5.png • Keine Pixel-Koordinaten der Hotspot- bild6.png Kreise notwendig! bild7.png • Bildbereiche können optisch auf bild8.png beliebige Weise hervorgehoben werden (nicht nur mit Kreisen)
- 22. Alternative ! Aufteilung in separate Seiten ! Sequentielle Erklärung aller Hotspots Herzgefä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 sit sadipscing elitr, sed diam nonumy sadipscing elitr, sed diam nonumy sadipscing elitr, sed diam nonumy sadipscing elitr, sed di eirmod tempor invidunt ut labore et eirmod tempor invidunt ut labore et eirmod tempor invidunt ut labore et eirmod tempor invidun dolore magna aliquyam erat, sed diam dolore magna aliquyam erat, sed diam dolore magna aliquyam erat, sed diam dolore magna aliquyam voluptua. voluptua. voluptua. voluptua.