große Displays—kleine Displays

Präsentation zum Thema: "große Displays—kleine Displays"—  Präsentation transkript:

1 große Displays—kleine Displays
patrick baudisch microsoft research adaptive systems and interaction research

2 Vortragsübersicht Kurze Übersicht: Projekte mit grossen Displays
kleinen Displays Motivation: Handy aber kein PC Kurze Übersicht: Projekte Beispielprojekt: Summary Thumbnails weiterführende Forschungsagenda

3 Interaktion auf wall-size Displays
Forschungsagenda vor 10 Jahren: Alle Benutzer hatten 14”-21” Bildschirme heute:  wand-große Displays ansehen von Documenten ist einfach aber Größe macht Manipulation schwierig heute:  kleine Displays Interaktion ist einfach—liegt in der Hand aber Betrachetn von Documenten schwierig Interaktion auf wall-size Displays Visualisierung auf kleinen Displays

4 Interaktionen mit grossen Displays
Maus zwischen Displays Erreichen auf Touchscreen Maus über Distanzen Generalisierung des Erreichens focus-plus-context

5 focus- plus-context screen

6 focus- plus-context screen

7 high-density cursor previous cursor position current cursor position
fill-in cursors current frame fill-in cursors previous frame current cursor position mouse motion

8 mouse ether start target

9 drag-and-pop

10 tablecloth

11 tablecloth

12 mouse across distances
Mehr Information in… UIST 2001 CHI 2002 INTERACT 2003 CG&A 2005 INTERACT 2003 GI 2005 CHI 2004 patrickbaudisch.com/projects mouse across bezels reach icons mouse across distances reach anything building one

13 Interaktion auf wall-size Displays
Übersicht vor 10 Jahren: Alle Benutzer hatten 14”-21” Bildschirme heute:  wand-große Displays ansehen von Documenten ist einfach aber Größe macht Manipulation schwierig heute:  kleine Displays Interaktion ist einfach—liegt in der Hand aber Betrachetn von Documenten schwierig Interaktion auf wall-size Displays Visualisierung auf kleinen Displays

14 große Dokumente kleine Displays

15 Szenarien... Pendeln Seattle  Redmond
Anwendungen müssen unterstützen abrufen: Wetter webseite per bookmark vorberechnetess ausführen: Navigationssystem “eigentliche Arbeit” passiert auf PC PC  Handy sync Kabel

16 Aber: nicht für alle… PCs: 300 Millionen Handys: 1.5 Milliarden

17 Die „anderen“ Schwellenländer, z.B. Indien
Handybenutzer die noch nie Zugang zu PC hatten  Handy = erster Zugang zur digitalen Welt

18  Probleme 1. Handybenutzer ohne PC müssen
[rooms, card et al 86]  Probleme 1. Handybenutzer ohne PC müssen Karten und Routen auch planen und verstehen Das Web auch interaktiv erforschen Daten vergleichen, analysieren (sensemaking) Aber Anwendungen fast ausschließlich auf PC + Handy Kombination Benutzer zugeschnitten 2. Bildschirm zu klein meiste Inhalte auf PC „zugeschnitten“

19 Forschungsagenda Fernziel wieviel und welche Funktionalität können wir Handy Benutzern zur Verfügung stellen? Nahziel (= Fokus dieses Vortrags) Hürde Bildschirmgröße überwinden

20 Marktrelevanz PC Markt Handymarkt bei 300 Millionen Lizenzen gesättigt
bereits 5 mal größer nach wie von massives Wachstum

21 irrelevantes entfernen
Projekte verdichten lesbar machen mehr ebenen irrelevantes entfernen collapse expand außerhalb Zusammenfassung

22 Halo: Das Problem +

23 Halo-Demo studie weiter

24 Bühnenwissenschaften
Ein-und Ausgänge Blickrichtung (point of view) Pfeilbasierte Techniken Teilsichtbarkeit (partially out of the frame)  Halo Ringe sind eine vertraute Form studie weiter

25 Straßenlaternen Lichtkegel sichtbar auf Entfernung Lichtkegel ist rund
überlappende Lichtkegel additiv Abschwächung zeigt Entfernung Was wir angepasst haben Sanfte Transition  scharfe Kante Scheibe  Ring dunkler Hintergrund  heller Hintergrund studie weiter

26 title: user study Benutzerstudie

27 Zwei Techniken (interfaces)
Maßstab m/cm Hintergrund Karte Lesbarkeit ok Selektionsfläche gleich Hypothese: Halo schneller Legende Halo Ring Distanz vom Displayrand weiter

28 Vier Aufgaben (Tasks) (a) lokalisieren (b) nächste (c) traversieren
(d) vermeiden

29 Durchführung 12 Teilnehmer Within-Subject Design, counterbalanced
Vier Karten Training pro Technik/Aufgabe, dann acht Karten mit Zeitmessung Fragebogen

30 Resultate: Zeiten 16% 33% Aufgabe Pfeil Technik Halo Technik
Lokalisieren Nächsten Traversieren Vermeiden Aufgabe Pfeil Technik Halo Technik Lokalisieren 20.1 (7.3) 16.8 (6.7) Nächste 9.9 (10.1) 6.6 (5.3) Traversieren 20.6 (14.1) 16.8 (8.7) Vermeiden 9.2 (4.7) 7.7 (5.8)

31 Fehlerrate Teilnehmer ueberschätzen Distanzen 26%
Aufgabe Pfeil Technik Halo Technik Lokalisieren 23.5 pixels (21.6) 28.4 pixels (33.8) Nächste 22% (42%) 21% (41%) Traversieren 97.4 pixels (94.7) 81.0 pixels (96.7) Vermeiden 15% (35%) 14% (34%) Fehlerrate Teilnehmer ueberschätzen Distanzen 26% Teilnehmer sehen Ovale (Gestaltgesetze?) we can compensate for that: width += 35% Pfeil Technik Halo Technik Lokalisieren Nächsten Traversieren Vermeiden

32 Subjektive Präferenz Pfeil Technik Halo Technik Lokalisieren Nächsten
Traversieren Vermeiden

33 irrelevantes entfernen
multiblending verdichten lesbar machen mehr ebenen irrelevantes entfernen collapse expand außerhalb Zusammenfassung

34 multiblending Problem mit traditionallem alpha blending: Ist der Busch Teil der Palette oder des Hintergrunds? Lösung multiblending: Glasspalette unterschieden vom Hintergrundphoto & Hintergrund bessr erkennbar

35 irrelevantes entfernen
fishnet verdichten lesbar machen mehr ebenen irrelevantes entfernen collapse expand außerhalb Zusammenfassung

36 summary: highlighted search
 fishnet highlights tell me “found” …but cannot tell me “not there” Microso found! US found! Blackout don’t know PGA not there! found! benefit: judge relevance of web page at a glance Microsoft

37 irrelevantes entfernen
summary thumbnails verdichten lesbar machen mehr ebenen irrelevantes entfernen collapse expand außerhalb Zusammenfassung

38 lesbar unlesbar

39 beliebige Displaygröße
beliebige Textgröße

40

41

42

43 demo

44

45 Implementierung mars mission In web browser control laden
html Text auf 23pt vergrößern 2 mars mission In web browser control laden for jedes mshtml element im document object model (DOM) zähle Zeilen vergrößere Schrift Kürze Text zur Erhaltung der Zeilenzahl Skalierung der Seite beim Client text verkürzen 3 mars m 4 Seite klein rendern bitmap

46 Text Reduktion In momentaner Implementierung in Zukunft allerdings
vom Ende des Abschnitts her kürzen ODER häufige Worte entfernen in Zukunft Techniken der natürlichen Spachverarbeitung (aber der momentane Code funktioniert überraschend gut) allerdings Das Ziel ist es dem Benutzer zu zeigen wo reinzuzoomen Textzusammenfassung nicht unbedingt die beste Lösung

47

48

49 related work

50

51 Benutzerstudie Pilot-Teilnehmer (20 Studenten) Aufbereitung
x-te Seite aus Web History  45 Webseiten erklärt was in dieser Seite gesucht wurde Aufbereitung Rangordnung eine mehrdeutige Seite entfernt Eigentliche Teilnehmer (12 externe) in Studie selbst

52 Resultate Präferenzen Zeiten Thumbnail Summary Single Column
# of participants 2 4 6 8 10 Zeiten

53 # vert scroll dir change
Weitere Ergebnisse 30 20 # zooming Total vertical scroll 10 2 4 6 8 10 12 14 Thumbnail Summary Thumbnail # of zooming events TN ST SC DT a 30 20 # vert scroll dir change 10 TN ST SC DT c scrolling

54 Diskussion Summary Thumbnails subsumieren Traditionelle Thumbnails
Konvertierung per Proxy Server  beliebige Plattform oder im Device  Produkttransfer

55 irrelevantes entfernen
collapse-to-zoom verdichten lesbar machen mehr ebenen irrelevantes entfernen collapse expand außerhalb Zusammenfassung

56 collapse- to-zoom collapse expand narrow down manually

57 short demo (there will be a second, slightly longer demo at the end of this talk)

58 limitation of thumbnails
irrelevant page content costs valuable screen space when used with traditional thumbnails page content can become unreadable… ? related work

59 related work approaches device-specific authoring
multiple-device authoring automatic re-authoring and client-side navigation thumbnail views collapse-to-zoom

60 collapse-to-zoom allow users to use their knowledge about relevant areas  zoom in (arbitrary rectangular regions) .

61 collapse-to-zoom allow users to use their knowledge about relevant areas  zoom in …but also allow leveraging their knowledge about what is not relevant  collapse

62 collapse-to-zoom always show full page width
use freed space to grow remaining (relevant) content

63 collapse-to-zoom provide visual context at all times: placeholders

64 collapse-to-zoom allow bookmarking collapsed state

65 marquee menu: there are 4 ways to select
today: no distinction between the four ways of opening rectangular selection

66 marquee menu: direction selects 1 of 4 commands
collapse-column expand&zoom collapse-cell expand-cell expand collapse an main com ds m

67 the name of the game photoshop: “marquee selection”
“marking menu”: selecting commands with a pen stroke combine both  marquee menu

68 transfer to smartphone
generic label cells with numeric codes and let users enter cell label [Paek et al. CSCW 2004] simple: reduce to 1D collapse column and expand column  webTV

69 implementation runs on desktop / tabletPC page-splitting based on DOM
limitation: can’t start drag over link  user study

70 irrelevantes entfernen
verdichten nächste Schritte lesbar machen mehr ebenen irrelevantes entfernen collapse expand ausserhalb Zusammenfassung

71

72 + + Integration collapse-to-zoom für Interaktion
fishnet paßt Seitenhöhe an summary thumbnails passen Seitenbreite an

73 Zusammenfassung & Nächste Schritte
Hürde Bildschirmgröße überwinden Fernziel wieviel und welche Funktionalität können wir Handy Benutzern zur Verfügung stellen? Komplexe, kreative Aktivititäten auf PDAs und Handys unterstützen Auswählen der besten Versicherung? Erzeugen und Editieren einer Webseite? Einkommensteuererklärung machen? …

74 irrelevantes entfernen
Mehr Information in… verdichten CHI 2003 CHI 2004 UIST 2004 CHI 2005 AVI 2004 patrickbaudisch.com/projects lesbar machen mehr ebenen irrelevantes entfernen collapse expand außerhalb

75 Vielen Dank! Danke an meine Co-Autoren und VIBE ruth rosenholtz
carl gutwin bongshin lee heidi lam xing xie und VIBE

76 END

77

78 fishnet [Baudisch, AVI 2004]
related work: fisheyes works well to reduce page length applying it to page width works not so well forces users to scroll for each line fishnet [Baudisch, AVI 2004] back to collapse-to-zoom or summary thumbnails

79 collapse- to-zoom: walk through
User can follow links directly from within overview Content area expands more and is now readable which leads to fully readable detail view thumbnail view: unreadably small user collapses “archive” column to… …make page content grown. Now collapses “menu” column next visit of that page: page is already pre-collapsed User uses expand-and-zoom gesture…

80 next: search

81 1. locate task  had to simulate on PC
click at expected location of off-screen targets

82 2. closest task click arrow/arc or off-screen location closest to car

83 3. traverse task

84 4. avoid task click on hospital farthest away from traffic jams

85 why even consider fisheye?
web pages contain little spatial information limit distortion to what is absolutely necessary enhance periphery with something useful: search term popouts research question for what types of pages does highlighted search benefit from fisheye view?

86 different from [hornbæck & frokjær, chi’01]
fishnet shows entire page integrated navigation search term highlighting add utility to context areas

87 independent variables…
distinguishing columns immaterial … …necessary distinguishing rows immaterial task 1 task 2 … necessary task 3 task 4

88 related work

89 related work: zooming [Xie etc. al, www’04]: tap to zoom into a tile

90 related work: overview+detail
[O’Hara et. at CHI 99]: readable text on hover

91 related work: multiple foci
[Wobbrock et. al UIST’02]: Web thumb

92 related work: popouts popout prism [suh, et al., chi’02]
enhanced thumbnails

93 related work: fisheyes
document lens [robertson, uist’93] unifying presentation space [carpendale, uist’01] focus+context sketching on a Pocket PC [lank, chi’04] fishnet, collapse, s-thumb

94 related work: peep hole
Ka-Ping Yee [CHI’03]