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...
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.
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.
9. • In der oberen 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 Antippen einer 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.
12. • Zu Beginn werden 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 wir also 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 dem Tippen wird die
Zeile markiert...
1
5
2
6
3
7
4
8
Rechte Herzkammer
Linke Herzkammer
5
Aorta
tap
Lungenvene
15. • Nach dem Loslassen 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 wird zuerst eine
Textzeile gewählt...
1
5
2
6
3
7
4
8
Rechte Herzkammer
tap
Linke Herzkammer
5
Aorta
Lungenvene
17. • und dann die zugehörige Zahl.
1
tap 5
2
6
3
7
4
8
1
Rechte Herzkammer
Linke Herzkammer
5
Aorta
Lungenvene
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 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.
