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