Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Große Displays kleine Displays patrick baudisch microsoft research adaptive systems and interaction research.

Ähnliche Präsentationen


Präsentation zum Thema: "Große Displays kleine Displays patrick baudisch microsoft research adaptive systems and interaction research."—  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 Forschungsagenda vor 10 Jahren: Alle Benutzer hatten Bildschirme heute: wand-große Displays ansehen von Documenten ist einfach aber Größe macht Manipulation schwierig heute: kleine Displays Interaktion ist einfachliegt in der Hand aber Betrachetn von Documenten schwierig Interaktion auf wall-size Displays Visualisierung auf kleinen Displays

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

5 focus- plus-context screen

6

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

8 mouse ether target start

9 drag-and-pop

10 tablecloth

11

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

13 Übersicht vor 10 Jahren: Alle Benutzer hatten Bildschirme heute: wand-große Displays ansehen von Documenten ist einfach aber Größe macht Manipulation schwierig heute: kleine Displays Interaktion ist einfachliegt 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 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]

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 bei 300 Millionen Lizenzen gesättigt Handymarkt bereits 5 mal größer nach wie von massives Wachstum

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

22 Halo: Das Problem +

23 Halo-Demo weiter studie

24 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

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 weiter studie

26 title: user study Benutzerstudie

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

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

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

30 Resultate: Zeiten AufgabePfeil TechnikHalo Technik Lokalisieren20.1 (7.3)16.8 (6.7) Nächste9.9 (10.1)6.6 (5.3) Traversieren20.6 (14.1)16.8 (8.7) Vermeiden9.2 (4.7)7.7 (5.8) 33% 16% LokalisierenNächstenTraversierenVermeiden Pfeil Technik Halo Technik

31 Fehlerrate AufgabePfeil TechnikHalo 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%) Teilnehmer ueberschätzen Distanzen 26% Teilnehmer sehen Ovale (Gestaltgesetze?) we can compensate for that: width += 35% Pfeil Technik Halo Technik LokalisierenNächstenTraversierenVermeiden

32 Subjektive Präferenz LokalisierenNächstenTraversierenVermeiden Pfeil Technik Halo Technik

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

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

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

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

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

38 unlesbar lesbar

39 beliebige Displaygröße beliebige Textgröße

40

41

42

43 demo

44

45 Implementierung Text auf 23pt vergrößern 2 text verkürzen 3 Seite klein rendern 4 mars mission mars m bitmap html 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

46 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

47

48

49 related work

50

51 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

52 Resultate ThumbnailSummary Thumbnail Single Column # of participants Zeiten Präferenzen

53 Weitere Ergebnisse TNSTSCDT Total vertical scroll TNSTSCDT # vert scroll dir change a c ThumbnailSummary Thumbnail # of zooming events # zooming scrolling

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

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

56 collapse- to-zoom narrow down manually collapse expand

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 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-cell expand-cell collapse-column expand&zoom 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: cant start drag over link user study

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

71

72 Integration collapse-to-zoom für Interaktion summary thumbnails passen Seitenbreite an ++ fishnet paßt Seitenhöhe 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 außerhalb verdichten lesbar machen irrelevantes entfernen mehr ebenen Mehr Information in… collapse expand CHI 2003 CHI 2004 UIST 2004 CHI 2005 AVI 2004 patrickbaudisch.com/projects

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

76 END

77

78 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 thumbnailscollapse-to-zoomsummary thumbnails

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

80 next: search

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

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, chi01] 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 1task 2 … necessarytask 3task 4

88 related work

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

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

91 related work: multiple foci [Wobbrock et. al UIST02]: Web thumb

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

93 related work: fisheyes document lens [robertson, uist93] unifying presentation space [carpendale, uist01] focus+context sketching on a Pocket PC [lank, chi04] fishnetfishnet, collapse, s-thumb collapse s-thumb

94 related work: peep hole Ka-Ping Yee [CHI03]


Herunterladen ppt "Große Displays kleine Displays patrick baudisch microsoft research adaptive systems and interaction research."

Ähnliche Präsentationen


Google-Anzeigen