Upload
daniel-estermann
View
918
Download
2
Embed Size (px)
DESCRIPTION
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...
Citation preview
Mobile Interaction Design Tücken bei der Abbildung von PC-Anwendungen
Daniel Estermann
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
Problemstellung Frage:
Wie kann die 'Hotspot'-Seite auf einem kleinen Display mit Fingerbedienung abgebildet werden?
2 Varianten
! Lernen: Anzeige einer Beschreibung zu jeder Bildstelle
! Testaufgabe zum Üben: Zuordnung von Beschriftungen zu Bildstellen
Linke Herzkammer Aus der linken Kammer wird sauerstoffreiches Blut in den Körperkreislauf gepumpt.
Initialer Vorschlag des Kunden Antippen mit Finger
Beschreibung des Bildbereichs
Initialer Vorschlag des Kunden Zuordnungsaufgabe Drag & Drop
Herausforderung Infoseite
! Wo sind die antippbaren Bildbereiche (Hotspots)? Kein Mouse-Hover möglich!
! Beschreibung gleichzeitig mit Bild anzeigen => Bild muss noch kleiner sein
! Hotspots sehr nah beieinander. Fehlende Präzision des Fingers!
! Zoomen? Umständlich.
Zuordnungs-Aufgabe
! Drag & Drop auf dem kleinen Touch-Screen ziemlich umständlich
Alternative Idee...
...aus dem Cockpit
5
7
6 2
3
4 8
1
• In der oberen Screenhälfte wird das bild und bis zu 8 Hotspots angezeigt.
• Statt auf das Bild tippt man auf die Nummern am Rand.
• Vorteil: Die Hotspots können klein sein und eng beieinander liegen.
Das Herz Tippen Sie auf eine Zahl!für weitere Details.
tap
5
7
6 2
3
4 8
1
• Nach Antippen einer Nummer wird unterhalb des Bilds die zughörige Beschreibung eingeblendet.
• Zudem wird der Hotspot im Bild hervorgehoben.
Einschränkung: • Aus Platzgründen können
maximal 6-8 Bildstellen ausgewählt werden. (Genaue Zahl muss noch durch Tests verifiziert werden)
• Falls mehr Hotspots benötigt werden, können Sie auf weitere Fragen verteilt werden.
5. Aorta Die Aorta, auch Hauptschlagader genannt, ist ein großes Blutgefäß, das direkt aus der linken Seite des Herzens entspringt. Sie leitet das Blut aus der linken Herzkammer …
Fragetyp
Rechte Herzkammer
Linke Herzkammer
Aorta
Lungenvene
5
7
6 2
3
4 8
1
• Zu Beginn werden wiederum alle Punkte angezeigt
• In der unteren Hälfte erscheinen alle möglichen Beschriftungen (in zufälliger Reihenfolge, scrollbar)
• Der Benutzer kann wahlweise zuerst eine Textzeile oder einen Zahlenknopf antippen
tap
5
7
6 2
3
4 8
1
• Drücken wir also mal auf eine Zahl...
• Im Bild wird der gewählte Hotspot entsprechend hervorgehoben (in diesem Beispiel werden alle anderen Linien und Bereiche ausgeblendet).
• Als nächstes wählt man den zugehörigen Text... Rechte Herzkammer
Linke Herzkammer
Aorta
Lungenvene
tap
Rechte Herzkammer
Linke Herzkammer
Aorta
Lungenvene
7
6 2
3
4 8
1
• während dem Tippen wird die Zeile markiert...
5
5 tap
Rechte Herzkammer
Linke Herzkammer
Aorta
Lungenvene
5
5
7
6 2
3
4 8
1
• Nach dem Loslassen bleibt die Zeile mit der gleichen Zahl gekennzeichnet.
• Beide Zahlsymbole werden nun farblich abgedunkelt, um anzuzeigen, dass bereits eine Zuordnung besteht.
• Nun kann die nächste Zuordnung erfolgen.
Rechte Herzkammer
Linke Herzkammer
Aorta
Lungenvene
5
5
7
6 2
3
4 8
1
• Diesmal wird zuerst eine Textzeile gewählt...
tap
Rechte Herzkammer
Linke Herzkammer
Aorta
Lungenvene
7
6 2
3
4 8
1
• und dann die zugehörige Zahl.
1
tap 5
5
Rechte Herzkammer
Linke Herzkammer
Aorta
Lungenvene
7
6 2
3
4 8
1
• Und so weiter...
1
5
5
Rechte Herzkammer
Linke Herzkammer
Aorta
Lungenvene
5
7
6 2
3
4 8
• War das richtig bisher???
1
tap
1
1
5
5
Linke Herzkammer
Lungenvene
5
7
6 2
3
4 8
1
• Die Bewertung jeder erfolgten Zuordnung gibt Aufschluss.
Rechte Herzkammer 1
Aorta 5
Umsetzung: 1 Bild pro Hotspot Zutaten: • 1 Übersichtsbild (bild0.png) • X Detailbilder pro Hotspot
(bild1.png bis bildX.png) • XML-Struktur mit:
• Prefix des Bildnamens ("bild"...) • Titel und Beschreibung jedes
Hotspots
Vorteile: • Keine Pixel-Koordinaten der Hotspot-
Kreise notwendig! • Bildbereiche können optisch auf
beliebige Weise hervorgehoben werden (nicht nur mit Kreisen)
bild0.png
bild1.png bild2.png bild3.png bild4.png bild5.png bild6.png bild7.png bild8.png
Aorta Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Herzgefässe: Übersicht Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lungenarterie Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Linke Herzkammer Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Alternative
! Aufteilung in separate Seiten
! Sequentielle Erklärung aller Hotspots