große Displays—kleine Displays

patrick baudisch

microsoft researchadaptive 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

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 aufwall-size Displays

Visualisierung auf kleinen Displays

focus-plus-context

Maus zwischenDisplays Erreichen auf

Touchscreen

Generalisierungdes Erreichens

Maus überDistanzen

Interaktionen mit

grossen Displays

focus-plus-context

screen

focus- plus-context screen

high-density cursor

previous cursorposition

current cursorposition

mouse

motion fill-in cursors

current framefill-in cursors

previous frame

mouse ether

target

start

drag-and-pop

tablecloth

tablecloth

building one

mouse acrossbezels

reach icons

reach anything

mouse acrossdistances

Mehr Information in…

UIST 2001CHI 2002

INTERACT2003

CG&A 2005

INTERACT 2003GI 2005

CHI 2004

patrickbaudisch.com/projects

Ü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 aufwall-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• 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“

[rooms, card et al 86]

Forschungsagenda

• Fernzielwieviel 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• bei 300 Millionen Lizenzen gesättigt

• Handymarkt• bereits 5 mal größer• nach wie von massives Wachstum

collapse

expand

außerhalb

verdichten

lesbar machen

irrelevantes entfernen

mehr ebenen

Projekte

Zusammenfassung

Halo: Das Problem

+

Halo-Demo

weiter

studie

Bühnenwissenschaften

1. Ein-und Ausgänge

2. Blickrichtung (point of view)

Pfeilbasierte Techniken

3. Teilsichtbarkeit (partially out of the frame)

Halo

Ringe sind eine vertraute Form

weiter

studie

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

weiter

studie

title: user study

Benutzerstudie

Zwei Techniken (interfaces)

• Maßstab 110-300m/cm

• Hintergrund Karte• Lesbarkeit ok• Selektionsfläche

gleich

• Hypothese:Halo schneller

Halo Ring Distanz vom Displayrand

Legende

weiter

Vier Aufgaben (Tasks)

(a) lokalisieren (b) nächste

(d) vermeiden(c) traversieren

Durchführung

• 12 Teilnehmer

• Within-Subject Design, counterbalanced

• Vier Karten Training pro Technik/Aufgabe,dann acht Karten mit Zeitmessung

• Fragebogen

Resultate: Zeiten

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)

0

5

10

15

20

25

Locate Closest Traverse Avoid

Arrow interface

Halo interface

33%

16%Lokalisieren Nächsten Traversieren Vermeiden

Pfeil Technik

Halo Technik

FehlerrateAufgabe Pfeil Technik Halo TechnikLokalisieren 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%)

0

5

10

15

20

25

30

Locate Closest Traverse Avoid

Arrow interface

Halo interface

• 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

0

1

2

3

4

5

6

7

8

9

Locate Closest Traverse Avoid

Arrow interface

Halo interface

Subjektive Präferenz

Lokalisieren Nächsten Traversieren Vermeiden

Pfeil Technik

Halo Technik

multiblending

collapse

expand

außerhalb

verdichten

lesbar machen

irrelevantes entfernen

mehr ebenen

Zusammenfassung

multiblending

Lösung multiblending:Glasspalette unterschieden vom Hintergrundphoto& Hintergrund bessr erkennbar

Lösung multiblending:Glasspalette unterschieden vom Hintergrundphoto& Hintergrund bessr erkennbar

Problem mit traditionallem alpha blending: Ist derBusch Teil der Palette oder des Hintergrunds?

Problem mit traditionallem alpha blending: Ist derBusch Teil der Palette oder des Hintergrunds?

außerhalb

verdichten

lesbar machen

irrelevantes entfernen

mehr ebenen

fishnet

collapse

expand

Zusammenfassung

summary: highlighted search

US

Blackout

PGA

Microsoft

found!

found!

don’t know

don’t know

• highlights tell me “found”• …but cannot tell me “not there”

fishnet

not there!not there!

found!found!

benefit: judge relevanceof web page at a glance

benefit: judge relevanceof web page at a glance

Microso

summary thumbnails

collapse

expand

außerhalb

verdichten

lesbar machen

irrelevantes entfernen

mehr ebenen

Zusammenfassung

unlesbarlesbar

• beliebige Displaygröße• beliebige Textgröße

demo

ImplementierungText auf 23pt vergrößern2

text verkürzen3

Seite klein rendern4

mars mission

mars mission

mars m

bitmap

html

• In web browser control laden

• for jedes mshtml element imdocument object model (DOM)• zähle Zeilen• vergrößere Schrift• Kürze Text zur

Erhaltung der Zeilenzahl

• Skalierung der Seite beim Client

Text Reduktion

• In momentaner Implementierung • 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)• 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

Thumbnail SummaryThumbnail

Single Column

# o

f p

arti

cip

ants

0

2

4

6

8

10

0

5

10

15

20

25

Thumbnail Semantic Th. Single Column Desktop

Me

an

ta

sk

tim

es

(s

)

Zeiten

Präferenzen

Weitere Ergebnisse

0

10

20

30

TN ST SC DT

Tot

al v

ertic

al s

crol

l

0

10

20

30

TN ST SC DT# ve

rt s

crol

l dir

chan

ge

a

c

0

2

4

6

8

10

12

14

Thumbnail Summary Thumbnail

# o

f zo

om

ing

ev

en

ts

# zooming

scrolling

Diskussion

• Summary Thumbnails subsumieren Traditionelle Thumbnails

• Konvertierung• per Proxy Server

beliebige Plattform• oder im Device

Produkttransfer

collapse-to-zoom

collapse

expand

außerhalb

verdichten

lesbar machen

irrelevantes entfernen

mehr ebenen

Zusammenfassung

collapse-to-zoom

narrow down manually

collapse

expand

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 viewscollapse-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-cell

expand-cell

collapse-column

expand&zoom

expand

collapse

an

mai

n

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

ausserhalb

verdichten

lesbar machen

irrelevantes entfernen

mehr ebenen

collapse

expand

nächste Schritte

Zusammenfassung

Integration

collapse-to-zoomfür Interaktion

summary thumbnailspassen Seitenbreite an

+ +fishnet

paßt Seitenhöhe an

Zusammenfassung & Nächste Schritte

• Hürde Bildschirmgröße überwinden

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

außerhalb

verdichten

lesbar machen

irrelevantes entfernen

mehr ebenen

Mehr Information in…

collapse

expand

CHI 2003

CHI 2004

UIST 2004

CHI 2005AVI 2004

patrickbaudisch.com/projects

Vielen Dank!

• Danke an meine Co-Autoren• ruth rosenholtz• carl gutwin• bongshin lee• heidi lam• xing xie

• und VIBE

END

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

next visit of that page:page is already pre-collapsedwhich leads to fullyreadable detail viewUser uses expand-and-zoomgesture…User can follow links directlyfrom within overviewContent area expands moreand is now readable…make page content grown.Now collapses “menu” columnuser collapses“archive” column to…

collapse-to-zoom:

walkthrough

thumbnail view:unreadably small

next:search

1. locate task

click at expected location of off-screen targets

had tosimulate on PC

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]