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

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

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

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

focus- plus-context screen

focus- plus-context screen

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

mouse ether start target

drag-and-pop

tablecloth

tablecloth

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

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

große Dokumente kleine Displays

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

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

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

 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“

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

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

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

Halo: Das Problem +

Halo-Demo studie weiter

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

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

title: user study Benutzerstudie

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

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

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

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)

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

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

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

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

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

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

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

lesbar unlesbar

beliebige Displaygröße beliebige Textgröße

demo

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

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

related work

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

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

# 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

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

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

collapse- to-zoom collapse expand narrow down manually

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

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

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

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

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

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

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

collapse-to-zoom allow bookmarking collapsed state

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

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

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

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

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

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

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

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? …

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

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

END

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

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…

next: search

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

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

3. traverse task

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

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?

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

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

related work

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

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

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

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

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

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