sáëì~äáò~íáçå=~åç=áåíéê~åíáçå=íéåüåáèìéë=íç=åçåíêçä= ãìäíáéäé=îáçéç=ëíêé~ãë

sáëì~äáò~íáçå=~åÇ=áåíÉê~Åíáçå=íÉÅÜåáèìÉë=íç=Åçåíêçä= ãìäíáéäÉ=îáÇÉç=ëíêÉ~ãë Auteursrechterlijke overeenkomst Opdat de Universiteit Hasselt uw eindverhandeling wereldwijd kan reproduceren, vertalen en distribueren is uw akkoord voor deze overeenkomst noodzakelijk. Gelieve de tijd te nemen om deze overeenkomst door te nemen, de gevraagde informatie in te vullen (en de overeenkomst te ondertekenen en af te geven). Ik/wij verlenen het wereldwijde auteursrecht voor de ingediende eindverhandeling met Titel: Visualization and interaction techniques to control multiple video streams Richting: 2de masterjaar in de informatica - Human Computer Interaction

Jaar: 2009

in alle mogelijke mediaformaten, - bestaande en in de toekomst te ontwikkelen - , aan de Universiteit Hasselt. Niet tegenstaand deze toekenning van het auteursrecht aan de Universiteit Hasselt behoud ik als auteur het recht káÉäë=tÉäâÉåÜìóòÉå om de eindverhandeling, - in zijn geheel of gedeeltelijk -, vrij te reproduceren, (her)publiceren of distribueren zonder de toelating te moeten verkrijgen van de Universiteit Hasselt. Ik bevestig dat de eindverhandeling mijn origineel werk is, en dat ik het recht heb om de rechten te verlenen die in éêçãçíçê=W deze overeenkomst worden beschreven. Ik verklaar tevens dat de eindverhandeling, naar mijn weten, het mêçÑK=ÇêK=h~êáå=`lkfku auteursrecht van anderen niet overtreedt. Ik verklaar tevens dat ik voor het materiaal in de eindverhandeling dat beschermd wordt door het auteursrecht, de nodige toelatingen heb verkregen zodat ik deze ook aan de Universiteit Hasselt kan overdragen en dat dit duidelijk in de tekst en inhoud van de eindverhandeling werd genotificeerd.

ÅçJéêçãçíçê=W

Universiteit Hasselt zal mij als auteur(s) van de eindverhandeling identificeren en zal geen wijzigingen aanbrengen mêçÑK=ÇêK=hêáë=irvqbk aan de eindverhandeling, uitgezonderd deze toegelaten door deze overeenkomst.

Ik ga akkoord,

WELKENHUYZEN, Niels Datum: 14.12.2009

báåÇîÉêÜ~åÇÉäáåÖ=îççêÖÉÇê~ÖÉå=íçí=ÜÉí=ÄÉâçãÉå=î~å=ÇÉ=Öê~~Ç= ã~ëíÉê=áå=ÇÉ=áåÑçêã~íáÅ~=eìã~å=`çãéìíÉê=fåíÉê~Åíáçå

Samenvatting Dit document is een eindwerk voorgedragen tot het behalen van de graad van Master in de Informatica: Human-Computer Interaction aan de Transnationale Universiteit Limburg / Universiteit Hasselt. Traditionele computersystemen hebben een aantal beperkingen: zo zijn ze vaak niet geschikt als meerdere personen met elkaar samenwerken en de interactie gebeurt op een minder natuurlijke en indirecte methode. Daarom zijn er interactieve oppervlakken ontwikkeld die in een horizontale of verticale opstelling kunnen voorkomen. De gebruikers kunnen met het computersysteem, dat getoond wordt op het oppervlak, interageren door gebruik te maken van hun handen, vingers of speciale devices. In het eerste deel van deze tweejarige thesis wordt een algemeen overzicht gegeven door een aantal technologieën te bespreken, samen met verscheidene interactie- en visualisatietechnieken. In het tweede deel zal vervolgens Creatan besproken worden, een multi-touch applicatie die ontwikkeld is voor de thesis, waarbij gebruikers kunnen samenwerken om een film te creëren. Hierbij zijn een aantal van de behandele technieken toegepast om de bruikbaarheid ervan te bestuderen.

Voorwoord Het lijkt in eerste instantie iets voor de toekomst: interageren met een computersysteem dat getoond wordt op een tafel of wand door gebruik te maken van je vingers. Toch wordt er op dit vlak al vele jaren onderzoek verricht en verscheidene toepassingen zijn reeds op de markt gebracht. Een onderwerp dat gebruik maakt van deze technologieën viel me daarom vrij snel op, aangezien me dit ook eens de kans biedt om ermee te werken. Voorlopig is een digitale tafel namelijk nog iets te duur om zelf in huis te halen. . . Bij het maken van dit eindwerk is ook hulp van anderen nodig geweest. Daarom wil ik bij deze ook vooral mijn begeleiders, Maarten Cardinaels en Davy Vanacken, bedanken voor hun aanwijzingen en uitgebreide feedback op mijn literatuurstudie en implementatie. Daarnaast wil ik tevens twee medestudenten, Patrik Goorts en Dominique Salden, bedanken voor hun medewerking bij een eenvoudige test. Het EDM verdient tevens een woordje van dank, voor het aanbieden van hun infrastructuur en ook mijn promotor Karin Coninx voor het mogelijk maken van de thesis. Tot slot mijn ouders nog bedankt dat ik deze opleiding heb mogen volgen.

i

Inhoudsopgave 1 Introductie

1

I

3

Literatuurstudie

2 Digitale tafel 2.1 Inleiding . . . . . . . . . . . . . . . . . . . 2.2 Technologieën . . . . . . . . . . . . . . . . 2.2.1 Augmented tables . . . . . . . . . 2.2.2 DiamondTouch . . . . . . . . . . . 2.2.3 SmartSkin . . . . . . . . . . . . . . 2.2.4 Microsoft Surface . . . . . . . . . . 2.2.5 Frustrated Total Interal Reflection 2.2.6 LambdaTable . . . . . . . . . . . . 2.2.7 Andere technologieën . . . . . . . 2.3 Voordelen . . . . . . . . . . . . . . . . . . 2.4 Aandachtspunten . . . . . . . . . . . . . . 2.5 Conclusies . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

4 4 5 5 5 7 8 8 10 11 12 12 15

3 Digitale wand 3.1 Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . 3.2 Technologieën . . . . . . . . . . . . . . . . . . . . . . 3.2.1 SMART Board . . . . . . . . . . . . . . . . . 3.2.2 Interactive DataWall . . . . . . . . . . . . . . 3.2.3 Liveboard . . . . . . . . . . . . . . . . . . . . 3.2.4 Collaborative classroom learning environment 3.2.5 Interactive Learning Wall . . . . . . . . . . . 3.2.6 Augmented wall . . . . . . . . . . . . . . . . 3.3 Voordelen . . . . . . . . . . . . . . . . . . . . . . . . 3.4 Aandachtspunten . . . . . . . . . . . . . . . . . . . . 3.5 Horizontaal versus verticaal . . . . . . . . . . . . . . 3.6 Conclusies . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

16 16 16 17 19 19 20 21 21 23 24 25 25

4 Interactie- & visualisatietechnieken 4.1 Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.2 Precieze selectietechnieken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.2.1 Single-touch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27 28 28 28

ii

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

Inhoudsopgave

4.3

4.4

4.5

4.6

4.7

4.8

4.9

iii

4.2.2 Multi-touch . . . . . . . . . . . . . . . . . 4.2.3 Selectie van objecten dicht bij elkaar . . . Afstand . . . . . . . . . . . . . . . . . . . . . . . 4.3.1 Drag-and-Pop & Drag-and-Pick . . . . . . 4.3.2 Pick-and-Drop . . . . . . . . . . . . . . . 4.3.3 Drag-and-Throw & Push-and-Throw . . . 4.3.4 Push-and-Pop . . . . . . . . . . . . . . . . 4.3.5 Frisbee . . . . . . . . . . . . . . . . . . . . 4.3.6 CoR2 Ds . . . . . . . . . . . . . . . . . . . Gestures . . . . . . . . . . . . . . . . . . . . . . . 4.4.1 Tabletop publishing prototype . . . . . . 4.4.2 RoomPlanner . . . . . . . . . . . . . . . . Organisatie & management . . . . . . . . . . . . 4.5.1 Storage bins . . . . . . . . . . . . . . . . . 4.5.2 Interface Currents . . . . . . . . . . . . . 4.5.3 Mobile spatial tools . . . . . . . . . . . . 4.5.4 ZoomScapes . . . . . . . . . . . . . . . . . 4.5.5 Rotatie & translatie . . . . . . . . . . . . Interactie van op afstand . . . . . . . . . . . . . . 4.6.1 Laser pointer interactie . . . . . . . . . . 4.6.2 Spraakherkenning . . . . . . . . . . . . . 4.6.3 Vision-tracked multi-finger gestural input Menu’s & speciale iconen . . . . . . . . . . . . . 4.7.1 Menu’s voor samenwerking . . . . . . . . 4.7.2 Pie menu . . . . . . . . . . . . . . . . . . 4.7.3 Gedrics . . . . . . . . . . . . . . . . . . . 4.7.4 FlowMenu . . . . . . . . . . . . . . . . . . Tekstinvoer . . . . . . . . . . . . . . . . . . . . . 4.8.1 Sticky Notes . . . . . . . . . . . . . . . . 4.8.2 Karakterherkenning . . . . . . . . . . . . Conclusies . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32 34 35 35 36 38 39 40 41 41 42 43 44 44 45 47 47 48 50 50 51 51 52 53 53 53 55 56 56 57 57

5 Conclusies

59

II

62

Implementatie

6 Creatan 6.1 Inleiding . . . . . . . . . . . . . . . . 6.2 De applicatie . . . . . . . . . . . . . 6.2.1 Overzicht interface-elementen 6.2.2 Technische aspecten . . . . . 6.3 Algemene interactietechnieken . . . . 6.3.1 Directe manipulatie . . . . . 6.3.2 Pie menu . . . . . . . . . . . 6.3.3 Gesture shortcuts . . . . . . . 6.3.4 Tekstinvoer . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

63 63 64 65 66 66 67 67 69 70

Inhoudsopgave

6.4

6.5

6.6 6.7 6.8 6.9

III

6.3.5 Overlapping . . . . . . . Media-elementen . . . . . . . . 6.4.1 Visualisaties . . . . . . . 6.4.2 Interactietechnieken . . 6.4.3 Media-element afspelen Containers . . . . . . . . . . . . 6.5.1 Interactietechnieken . . 6.5.2 Libraries . . . . . . . . . 6.5.3 Storyboard . . . . . . . 6.5.4 Timeline . . . . . . . . . Movieplayer . . . . . . . . . . . Label creator . . . . . . . . . . Informele gebruikerstest . . . . Conclusies . . . . . . . . . . . .

Conclusies

iv

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

71 72 72 73 73 74 74 78 81 82 83 85 88 89

91

7 Conclusies

92

Referenties

98

Hoofdstuk 1

Introductie Deze thesis handelt over de controle van videobeelden, afbeeldingen en audiofragmenten waarbij er gebruik gemaakt wordt van interactieve oppervlakken. Het eerste deel van deze tweejarige thesis bestaat uit de literatuurstudie (academiejaar 20072008), waarbij deze interactieve oppervlakken in meer detail besproken worden. Zo wordt in hoofdstuk 2 een algemeen overzicht gegeven van de mogelijke technologieën om digitale tafels te construeren. Een digitale tafel kan het beste omschreven worden als een horizontaal oppervlak waarop de acties van de handen of speciale devices gedetecteerd worden, terwijl het computerscherm op hetzelfde vlak wordt getoond. Verder wordt er aandacht besteed aan een aantal voordelen die er zijn vergeleken met de traditionele computersystemen, zoals de ondersteuning om samen te werken en het onmiddellijke contact op het vlak, waardoor het intu¨ıtief voor de gebruikers is. Bij de ontwikkeling van toepassingen zijn er echter ook een aantal aandachtspunten waarmee rekening gehouden dient te worden, zoals de precieze selectie van kleine items, het bedekken van het scherm door lichaamsdelen, de invloed van de tafel- en groepsgrootte en privacyaspecten. Daar waar de gebruikers beter kunnen samenwerken met een horizontaal oppervlak, zullen de digitale wanden, die besproken worden in hoofdstuk 3, een grotere functie hebben voor het presenteren van informatie aan een groep personen. Net zoals bij de digitale tafels kunnen bij de verticale varianten de gebruikers interageren met het systeem, waarbij naast de directe aanrakingen ook laser pointers gebruikt kunnen worden, om input op afstand te geven. Aangezien deze vlakken een grote oppervlakte hebben, dient er voldoende aandacht besteed te worden aan de fysieke eigenschappen van de gebruikers, waarbij het overbruggen van afstanden een belangrijke rol speelt. Ten opzichte van traditionele computersystemen gebeurt de interactie en visualisatie op een andere manier. Hoofdstuk 4 is daarom gewijd aan technieken om problemen met precieze selectie, afstand, menu’s, invoer van tekst, . . . op te lossen. Verder worden er voorbeelden van gestures gegeven, samen met mogelijke technieken om de informatie op de oppervlakken te beheren, zodat de items eenvoudig doorgegeven kunnen worden aan de andere groepsleden. Het tweede deel (academiejaar 2008-2009) past enkele technologieën en technieken uit het eerste deel toe in Creatan, een applicatie die in hoofdstuk 6 uitvoerig besproken zal worden.

1

Hoofdstuk 1. Introductie

2

Hierbij is het de bedoeling dat één of meerdere gebruikers kunnen samenwerken om nieuwe filmpjes samen te stellen door bestaande videofragmenten en afbeeldingen samen te voegen, waarbij tevens audiofragmenten en ondertitels toegevoegd kunnen worden. Om de gebruikte technieken te evalueren is er tevens een informele gebruikerstest gehouden met enkele testpersonen. Deze masterproef wordt afgesloten met een algemene conclusie in hoofdstuk 7.

Deel I

Literatuurstudie

3

Hoofdstuk 2

Digitale tafel Contents

2.1

2.1

Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.2

Technologie¨ en . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

2.2.1

Augmented tables . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

2.2.2

DiamondTouch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

2.2.3

SmartSkin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

2.2.4

Microsoft Surface . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

2.2.5

Frustrated Total Interal Reflection . . . . . . . . . . . . . . . . . . .

8

2.2.6

LambdaTable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

2.2.7

Andere technologieën

11

. . . . . . . . . . . . . . . . . . . . . . . . . .

2.3

Voordelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

2.4

Aandachtspunten

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

2.5

Conclusies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

Inleiding

Eén van de doelstellingen van Human-Computer Interaction is het ontwikkelen van meer natuurlijke en intu¨ıtieve interfaces, iets wat door touch devices bereikt kan worden. Het standaard pointer device, de muis, is namelijk minder natuurlijk en minder direct dan de vingers [33]. Aangezien tafels overal rond ons aanwezig zijn (thuis, op kantoor, op café, openbare plaatsen, . . . ), bieden zij een goede fysieke plaats om te vergaderen en samen te werken. Door touch en tafel te combineren komen we tot een digitale tafel, waarbij bijvoorbeeld via een projector of LCD-schermen het tafelblad ook als computerscherm gaat fungeren. Zo is het mogelijk om samen te werken aan een digitaal document zonder daarvoor rond een desktopcomputer te verzamelen. Documenten kunnen via deze weg ook eenvoudiger uitgewisseld en bekeken worden aan tafel, zonder dat er een fysieke stapel papieren is.

4

Hoofdstuk 2. Digitale tafel

2.2

5

Technologie¨ en

Een digitale tafel bestaat ruwweg uit 2 delen: enerzijds is er het opvangen van de positie van het aanraken van het oppervlak en anderzijds is er het tonen van een digitaal scherm. Dit kan op verschillende manieren uitgewerkt worden. Zo zal er in de ene variant met camera’s gewerkt worden die van bovenaf de positie proberen te bepalen, terwijl in een ander systeem met een touch-sensitive oppervlak gewerkt wordt. Het beeld kan door een projectie langs boven of onder het oppervlak gebeuren, of door bijvoorbeeld gebruik te maken van verschillende LCD-schermen, die tegen elkaar geplaatst zijn. In deze sectie zullen een aantal verschillende technologieën besproken worden.

2.2.1

Augmented tables

Een normale tafel opwaarderen tot een desktop, dat is het principe van de augmented table. Een voorbeeld hiervan is de DigitalDesk[67, 68] uit ’91, waarbij er nog steeds gewerkt kan worden met normale objecten op een bureau, maar het systeem voor nieuwe functionaliteiten zorgt. In deze opstelling, zoals figuur 2.1 toont, is er een camera gemonteerd boven een tafel, die de handelingen registreert. Deze gegevens worden vervolgens geanalyseerd waaruit afgeleid kan worden waar de gebruiker wijst en waaruit ook delen van documenten, die zich op het oppervlak bevinden, gelezen kunnen worden. Daarnaast is er ook een projector die een computer display toont op de tafel. Zo kan er extra informatie op bestaande papieren getoond worden, maar kunnen digitale afbeeldingen ook op de tafel ‘gelegd’ worden. Bij dit systeem zijn er ook een aantal aandachtspunten, zoals bijvoorbeeld de moeilijkheid om exact af te leiden wanneer een gebruiker een ‘klik’ uitvoert, hetgeen opgelost kan worden door een microfoon onder het oppervlak te bevestigen. Een nadeel ontstaat er doordat er met een camerasysteem van bovenaf gewerkt wordt. Hierdoor bestaat er een grote kans dat de gebruiker af en toe met zijn lichaam delen van de tafel bedekt, waardoor het systeem niet meer alles kan waarnemen. Verder is het moeilijk om specifieke onderdelen aan te duiden met de vingers, hetgeen bij grotere objecten in mindere mate een rol speelt. Het gebruik van een pen om zo’n kleine delen aan te duiden kan een oplossing bieden. Een ander voorbeeld van een augmented table is de EnhancedDesk[33], waarbij de hardwareopstelling gelijkaardig is aan die van de DigitalDesk, maar er nieuwe technologieën ontwikkeld zijn om een betere interactie te voorzien. Zo wordt er hierbij een infrarood camera gebruikt, samen met een camera die kan bewegen. Nog andere voorbeelden zijn Video Mosaic[36] en de computer augmented environment van Rekimoto & Saitoh[48].

2.2.2

DiamondTouch

De DiamondTouch[13] tafel van Mitsubishi Electronic Research Laboratories (MERL) is een touch device waar een projector van boven af op een drukgevoelige tafel projecteert. Bij deze digitale tafel is het mogelijk om met verschillende personen gelijktijdig touch events te genereren, terwijl de gebruikers ge¨ıdentificeerd kunnen worden. Een gebruiker heeft ook de mogelijkheid om multi-touch events te generen en dus meerdere aanrakingen op hetzelfde moment uit te voeren. In figuur 2.2(a) wordt deze digitale tafel getoond.


6

Figuur 2.1: Prototype van de DigitalDesk waarbij een projector en camera boven een gewoon oppervlak bevestigd zijn [68].

Elektrische signalen worden gebruikt om de exacte posities op de DiamondTouch te kunnen berekenen. De gebruikers moeten geconnecteerd zijn met het systeem, door bijvoorbeeld op een stoel te zitten die verbonden is met het apparaat. Als de persoon vervolgens met een lichaamsdeel het oppervlak aanraakt, zullen er zwakke elektrische signalen van de antenna’s, die zich direct onder het oppervlak bevinden, verstuurd worden door het lichaam van de gebruiker zelf naar een unieke receiver (zie figuur 2.2(b)). Deze receiver kan vervolgens de positie van de aanraking berekenen, hetgeen verwerkt wordt als een bounding box rond de vinger(s)/hand(en), waardoor er dus geen exact punt op het oppervlak teruggeven wordt. Het middelpunt van deze bounding box kan wel berekend worden bij een enkele aanraking, hetgeen dan bijvoorbeeld als contactpunt aanzien kan worden (dit is afhankelijk van de juiste verwerking van het gesture). Als er twee drukpunten zijn, kan er een probleem opduiken bij de detectie van de aanraakpunten. Dit is te wijten aan het feit dat het systeem afleidt welke twee rij- en kolomantenna’s actief zijn, maar niet de exacte combinatie. Zo kan in deze bounding box niet exact bepaalt worden welke twee van de vier punten aangeraakt worden [9]. Doordat elke persoon over dit systeem beschikt, is het mogelijk om de gebruiker uniek te identificeren en zullen signalen niet door mekaar afgehandeld worden. Het nadeel hierbij is wel uiteraard dat de gebruiker altijd in contact moet zijn met het systeem (de stoel aanraken bijvoorbeeld). Maximum 4 gebruikers kunnen tegelijkertijd interageren met de DiamondTouch. Eén van de voordelen is dat de tafel gewone objecten negeert die op het oppervlak geplaatst worden en dus enkel op de invoer van menselijke gebruikers reageert. Hierdoor is het dus mogelijk om een pen of tas op de tafel te leggen, zonder dat dit interfereert met het systeem;


7

ook zijn er hierdoor extra devices (zoals een stylus) overbodig om te kunnen interageren. Sommige applicaties daarentegen hebben soms nood aan input van pennen, zeker aangezien het schrijven met een stylus betere resultaten geeft dan met de gewone vinger. Door deze beperking, kunnen deze applicaties niet toegepast worden.

(a) De tafel in werking [41].

(b) Elektrische signalen worden uit de antenna’s in de tafel verstuurd door de gebruikers naar de bijbehorende receivers [13].

Figuur 2.2: DiamondTouch bestaat uit een drukgevoelig oppervlak waarop het beeld wordt geprojecteerd.

2.2.3

SmartSkin

De technologie van SmartSkin[47] is gebaseerd op elektrische capaciteit. Hierbij wordt er op het oppervlak een net gelegd van verticale transmitter elektroden en horizontale receiver elektroden. Dit kunnen bijvoorbeeld koperdraden zijn, waardoor het mogelijk is om grote en flexibele oppervlakken te gebruiken. De afstand van een geleidend object (zoals de mens) kan berekend worden door de effecten die optreden als de transmitter geprikkeld wordt, waarbij de wave signalen doorgegeven worden aan de receivers. Algoritmen kunnen vervolgens ook gebruikt worden om de vorm van de aanrakingen te herkennen. Een schematische weergave van deze structuur wordt gevisualiseerd in figuur 2.3. Verder is het tevens mogelijk dat de gebruiker interageert met objecten (bijvoorbeeld van hout of plastic), die geleidend materiaal op de zijkanten bevatten. Als deze blok gewoon op het oppervlak staat, gebeurt er niets, maar wanneer de gebruiker ze aanraakt en ermee beweegt, wordt het patroon herkend door het systeem. Een nadeel van deze technologie ten opzichte van de hiervoor besproken DiamondTouch is dat er geen identificatie van gebruikers plaatsvindt. Als meerdere personen het oppervlak aanraken, kan dit voor interferentie zorgen, hetgeen uitaard niet gewenst is. Een voordeel van SmartSkin is dan wel weer dat de hand het oppervlak niet perse hoeft aan te raken, waardoor ook hovering ge¨ıntroduceerd kan worden.


8

Figuur 2.3: De sensorconfiguratie van SmartSkin bestaat uit een grid van verticale transmitter en horizontale receiver electroden, die de positie en vorm van de hand kunnen determineren [47].

2.2.4

Microsoft Surface

Sinds 2001 werkt Microsoft aan een digitale tafel, de Microsoft Surface[40, 6, 12]. Het product dat momenteel nog in ontwikkelingsfase is, bevat 4 hoofdelementen: multi-touch, multi-user, object herkenning en directe interactie. Het oppervlak, een 30 inch display, is niet touch-sensitive, maar 5 camera’s, die ingebouwd zijn onderin de tafel, kunnen de posities waarnemen door de reflecties van het infrarode licht als het scherm aangeraakt wordt. Bij deze camera’s zitten ook het computersysteem en de projector onder het oppervlak verstoken, hetgeen in figuur 2.4(a) wordt getoond. Naast aanrakingen van vingers en handen maken de camera’s het ook mogelijk dat niet-digitale objecten gebruikt kunnen worden om te interageren, waarbij de vorm en gekoppelde tags voor de herkenning door het systeem zorgen. Dit geeft bijvoorbeeld de mogelijkheid om met een penceel te tekenen. Het gebruik van tags zorgt ervoor dat oneindig veel objecten gekoppeld kunnen worden. Zo kan er bijvoorbeeld informatie opgevraagd worden van een fles wijn, die voorzien is van zo’n tag, als deze op de tafel wordt gezet. Maar ook uitgebreidere acties zijn mogelijk, zoals het plaatsen van een digitaal fototoestel op het oppervlak, waarna foto’s getransfereerd kunnen worden naar de Surface. De draadloze communicatie met deze devices wordt geregeld door gebruik te maken van WiFi en Bluetooth en met een eventuele uitbreiding naar RFID in de toekomst. Net zoals bij SmartSkin, kan Surface de gebruikers niet identificeren, hetgeen het grote voordeel van DiamondTouch is. Hierdoor is het niet mogelijk dat meerdere gebruikers tegelijkertijd verschillende gestures uitvoeren [64].

2.2.5

Frustrated Total Interal Reflection

Deze techniek[22] is gebaseerd op de frustrated total internal reflection (FTIR), waardoor het mogelijk wordt om de positie van de touch te bepalen. Totale interne reflectie (TIR), een optisch verschijnsel, treedt op als het licht een raakvlak treft met een optisch minder dicht materiaal. Het licht zal vervolgens afgebroken worden, be¨ınvloed door de invalshoek. Als dan een vinger het oppervlak aanraakt, zal deze reflectie het licht naar buiten uitsturen (=


(a) De structuur van de technologie met onder het oppervlak (1) een projector (4), camera’s, een infrarode LED lichtbron (2) en het computersysteem (3) [12].

9

(b) De tafel in werking [40].

Figuur 2.4: Bij Microsoft Surface nemen camera’s onder het oppervlak infrarode lichtreflecties weer.

FTIR), hetgeen opgevangen kan worden door een camera. Door eenvoudige beeldverwerking toe te passen op deze gegevens, kan de exacte positie daaruit bepaald worden. De opstelling bestaat uit plexiglas waar aan de zijkant infrarode LED’s geplaatst zijn, die voor de TIR zorgen. Onderaan het oppervlak bevinden zich een camera en een projector. Een schematische voorstelling wordt weergegeven in figuur 2.5.

Figuur 2.5: Schematisch overzicht van de Frustrated Total Internal Reflection: bij een aanraking van het oppervlak wordt het LED licht afgebroken en naar onder verstuurd, hetgeen door een camera opgevangen kan worden [22].


10

Het voordeel van deze technologie is dat de projectie en cameraopvang van beneden kan gebeuren, waardoor de beelden niet gestoord kunnen worden door de gebruiker zelf. Ook biedt deze methode de mogelijkheid om grotere oppervlakken te gebruiken, hetgeen wel be¨ınvloed wordt door de resolutie van de projector. Meerdere camera’s en projectoren kunnen dan een oplossing bieden. Verder is deze techniek ook vrij goedkoop te construeren in vergelijking met gelijkaardige systemen. Net zoals SmartSkin en Microsoft Surface heeft deze technologie als nadeel dat de gebruikers niet apart ge¨ıdentificeerd kunnen worden.

2.2.6

LambdaTable

Terwijl de technieken die reeds besproken zijn telkens gebruik maken van projectoren, maakt de LambdaTable[35] gebruik van meerdere LCD-schermen, die tegen elkaar geplaatst zijn. Het voordeel van deze schermen is dat deze vaak een goedkopere oplossing bieden dan hoge resolutie projectoren en dat er ook geen projectieafstand nodig is. Het nadeel dat hierbij optreedt is dat de randen van deze schermen de continu¨ıteit kunnen breken, hetgeen uiteraard voor problemen kan zorgen als er bijvoorbeeld een sleepgesture uitgevoerd dient te worden van het ene naar het andere scherm. De interactie bij LambdaTable wordt gedetecteerd door camera’s, die boven de tafel gemonteerd zijn, zoals getoond wordt in figuur 2.6. Fysieke objecten, die ge¨ıdentificeerd worden door een uniek patroon van infrarode LED’s, kunnen vervolgens interageren met het systeem. Het grote nadeel bij deze techniek is dat de gebruiker deze LED’s kan bedekken, waardoor het systeem de patronen niet meer kan detecteren. Meerdere gebruikers kunnen daarentegen wel tegelijkertijd samenwerken, zolang als er unieke patronen gebruikt worden.

Figuur 2.6: De opstelling van de LambdaTable, bestaande uit verschillende LCD-schermen waarboven camera’s gemonteerd zijn om de interacties waar te nemen [35].


2.2.7

11

Andere technologie¨ en

Naast de hiervoor gepresenteerde technologieën zijn er uiteraard nog andere varianten van touch technologieën. Deze sectie geeft nog een aantal voorbeelden, zonder echt verder in detail te treden. Hiervoor wordt de lezer doorverwezen naar de bijbehorende referenties.

• De Apple iPhone[3] beschikt over een display dat multi-touch acties ondersteunt, waarmee de gebruiker kan interageren met het systeem. Zo zijn er bij deze smartphone geen fysieke toetsen meer, maar dient de eigenaar alles via aanraking uit te voeren. Het display bestaat uit een beschermende laag die elektrische velden detecteert bij een aanraking en deze informatie vervolgens doorstuurt naar het onderliggende LCD-scherm (zie figuur 2.7(a)). • De voorloper van Microsoft Surface was TouchLight[69], een methode waarbij eenvoudige beeldverwerkingstechnieken gebruikt werden om de beelden van twee camera’s te verwerken, die achter een semi-transparante plaat waren geplaatst, waarop langs achter beelden geprojecteerd werden. Bij deze technologie konden meerdere vingers en handen gedetecteerd worden van verschillende gebruikers. • Het TactaPad[62] van Tactiva is een input device, voorzien van een bijbehorende camera waarmee de gebruiker kan interageren met het computersysteem. Als de handen zich boven het device en onder de camera’s bevinden, worden deze doorzichtig weergegeven op het scherm, waarbij een cursor wordt getoond als er contact met het oppervlak plaatsvindt, hetgeen getoond wordt in figuur 2.7(b). De gebruiker heeft de mogelijkheid om met twee handen tegelijkertijd te interageren en force feedback wordt teruggegeven bij acties. • De reacTable[29, 43] is een soort muziekinstrument, hetgeen bestaat uit een ronde doorzichtige tafel waaronder een camera en een projector geplaatst zijn. Door te interageren met speciale blokken (tangibles) en de vingers, kunnen er muziek en soundeffecten gecreëerd worden (zie figuur 2.7(c)).

(a) Apple iPhone [3].

(b) TactaPad [62].

Figuur 2.7: Andere technologieën.

(c) reacTable [43].


2.3

12

Voordelen

Vergeleken met traditionele computersystemen hebben digitale tafels een aantal voordelen. Op een digitale tafel is de input vaak gekoppeld aan de output, hetgeen directe interactie als gevolg heeft. Hierdoor zal het voor de gebruikers zeer intu¨ıtief overkomen hetgeen zeker een voordeel is voor onervaren gebruikers. Door deze interactie is er (afhankelijk van de gebruikte technologie) geen nood aan speciale extra input devices, hetgeen op openbare plaatsen anders sneller voor problemen kan zorgen (bijvoorbeeld een pen die verdwenen is) [2, 5, 56]. Een touch device kan ook een rol spelen bij het samenwerken van groepen. Doordat de personen rond de tafel kunnen zitten, zoals men ook deed zonder digitaal oppervlak, kan er nog steeds face-to-face interactie plaatsvinden. Met het gebruik van een digitale tafel is het vervolgens mogelijk om samen te werken aan gemeenschappelijke items, zonder daarvoor rond een laptop of PDA te zitten. Tijdens vergaderingen worden vaak documenten op de tafel gelegd en uitgedeeld; door het gebruik van een digitale tafel kan dit enkel verbeterd worden. Het is eenvoudiger om verschillende items te tonen, te organiseren en ook onmiddellijk wijzigingen door te voeren, waardoor de hoeveelheid papier ook verminderd kan worden [56, 66]. Bepaalde systemen beschikken ook over de functionaliteit om fysieke objecten op de tafel te plaatsen, die vervolgens ge¨ıntegreerd kunnen worden in het systeem. Zo is het bij de Microsoft Surface mogelijk om via speciale tags objecten te laten herkennen, waardoor bestanden getransfereerd kunnen worden. Dit principe is ook besproken door Rekimoto & Saitoh[48], waarbij in een hybride computersysteem fysieke objecten via markers door het systeem herkend kunnen worden.

2.4

Aandachtspunten

Naast de voordelen zijn er ook een aantal punten bij digitale tafels waar speciale aandacht aan besteed moet worden. Deze sectie probeert een overzicht te geven van deze kwesties. Hoofdstuk 4 zal uitgebreid speciale interactie- & visualisatietechnieken bespreken om een aantal mogelijke oplossingen te bieden aan deze problemen. Als eerste is er dat door de directe interactie het vaak ook mogelijk is dat de vinger of de hand van de gebruiker het onderliggende deel bedekt. Dit is vooral het geval als er van onder het oppervlak geprojecteerd wordt. In het andere geval zal de projectie op de lichaamsdelen getoond worden [2, 5, 56, 71]. Vervolgens speelt ook de dikte van de vinger een rol. Vaak moeten er kleine objecten geselecteerd worden, hetgeen moeilijk uit te voeren is met de huidige ‘resolutie’ van de vinger; met een muispointer zou dit eenvoudiger gaan. Het gebruik van een stylus kan op zo’n momenten toegepast worden, maar hierdoor is er weer een extra input device nodig en deze resolutie is ook nog steeds lager dan deze van een muis [2, 5]. Er moet uiteraard ook rekening gehouden worden met de fysieke eigenschappen van de ge-


13

bruikers zelf. Zo is het belangrijk dat de gebruiker de mogelijkheid heeft om de items die hij/zij nodig heeft te bereiken, zonder hiervoor op te moeten staan of volledig over de tafel te buigen. Ook kan het langdurig gebruik voor vermoeidheid in de armen zorgen. Alle acties dienen steeds comfortabel voor de gebruiker te zijn [5, 71]. Verder moet er ook aandacht besteed worden aan hoe verschillende gebruikers samen kunnen werken. Als meerdere gebruikers tegelijkertijd aan eenzelfde item werken, is er een grotere kans op fouten. In bepaalde gevallen kan het menu beter gedupliceerd worden, om ervoor te zorgen dat er geen interferentie optreedt. De oriëntatie van items speelt tevens ook een rol. Als er gebruikers zich aan verschillende kanten van de tafel bevinden, kunnen zij niet allemaal de items even goed bekijken. Daarom moet er ook de mogelijkheid bestaan documenten te roteren, naargelang de gebruikers dat wensen [56, 66]. Tafel- en groepsgrootte De grootte van de groep en de tafel speelt ook een belangrijke rol. Hieronder volgt een overzicht van een zevental mogelijke kwesties waarmee rekening gehouden moet worden bij het gebruik van grotere digitale tafels [50]: • Resource management: de positie van de resources (zowel fysiek als digitaal) zal afhankelijk zijn van de grootte van de tafel en de grootte van de groep. • Werkstrategie: de tafelgrootte kan ook een impact hebben op de dynamiek van de werkgroep (verspreiding van het werk tussen de groepsleden, de verschillende rollen die groepsleden aannemen en de probleem-oplossing strategieën die toegepast worden). • Sociale interacties: interpersoonlijke relaties, interacties tussen personen en de persoonlijke voorkeuren. Zo is het bijvoorbeeld eenvoudig om items te manipuleren die binnen handbereik zijn, terwijl deze eventueel in een ander persoonlijk gebied liggen. Ook is het bij een single-input device systeem voor alle groepsleden duidelijk wat iemand bijdraagt aan het geheel, hetgeen bij een multi-input systeem niet altijd meer mogelijk is. • Display resolutie: de resolutie speelt een belangrijke rol; hoe hoger deze is, hoe meer informatie er getoond kan worden. • Fysiek bereik : de gebruikers moeten directe interactie uitvoeren, waardoor het belangrijk is dat ze ook aan de items kunnen. • Zichtbaarheid : als bepaalde items zich verder van de gebruiker bevinden, is het mogelijk dat deze niet meer goed leesbaar of zichtbaar zijn. • Taken: de impact van de tafelgrootte op groepsactiviteiten hangt ook af van de taak zelf. Om de invloed van groeps- en tafelgrootte te verkennen is er een gebruikerstest uitgevoerd[50]. Gebruikers kregen een gedicht op papier, waarvan de woorden apart op het oppervlak getoond werden, samen met een aantal opvulwoorden. De opdracht bestond eruit om de woorden in een container te plaatsen en zo de exacte tekst te vormen. Bij deze test was onder andere als resultaat dat de tafelgrootte geen rol speelt op de snelheid dat een bepaalde taak uitgevoerd werd, terwijl de groepsgrootte dit wel had. Een grotere groep zal ervoor zorgen dat een taak


14

sneller uitgevoerd wordt, maar uiteraard hangt dit ook samen met de opdracht. Zo zal een taak waar parallellisme mogelijk is betere resultaten geven, hetgeen bij deze opdracht van toepassing was, want er kon gezamelijk naar woorden gezocht worden. Als meerdere gebruikers regelmatig hetzelfde item moeten manipuleren, kan dit bij grotere groepen wel meer problemen geven, aangezien de kans groter wordt dat meerdere personen dit object nodig hebben. Gebruikers gaan ook een andere strategie toepassen naargelang de groep groter wordt en ook het omgaan met de resources verschilt als er meerdere personen samenwerken. Zo worden vaak items in persoonlijke gebieden geplaatst, waarbij de gebruiker zich verantwoordelijk over voelt. Als er meer plaats is en eventueel minder gebruikers zijn, zal dit persoonlijk gebied groter zijn, waardoor de gebruiker meer items bij zich zal hebben. Ook bleek uit de resultaten dat bij grotere groepen er nood was om meerdere, eventueel verticale, schermen te gebruiken om informatie te tonen. Als er meer mensen rond een tafel staan, zal het moeilijker worden voor iedereen om alle informatie op te vangen. Gebieden Als meerdere mensen tegelijkertijd samenwerken aan eenzelfde tafel, zullen ze de neiging hebben om deze in verschillende delen op te splitsen[52, 54]. Enerzijds is er het gemeenschappelijke werkvlak, hetgeen voor iedereen zichtbaar en toegankelijk is; anderzijds is er het persoonlijke, meer private gedeelte. Bij de UbiTable[54] wordt er bijvoorbeeld met drie verschillende werkvlakken gewerkt: privé, persoonlijk en publiek. Het privé-gedeelte hierbij is enkel voor de gebruiker en is niet zichtbaar of toegankelijk voor andere personen. Dit kan vaak op de eigen laptop zijn, die op het systeem aangesloten wordt. Het persoonlijke werkvlak bevindt zich voor de gebruiker zelf aan de rand van de tafel en is in tegenstelling tot het privé-gedeelte wel zichtbaar voor de anderen. In het publieke gedeelte kunnen alle gebruikers samen items uitwisselen. Figuur 2.8 toont een aantal screenshots waarop de indeling van de verschillende gebieden gevisualiseerd wordt. Een ander voorbeeld is de hybride computer omgeving van Rekimoto & Saitoh[48], waar ook de laptop als privé-gebied aanzien wordt, met de muur en tafel als publieke gebieden. De RoomPlanner[70], een applicatie om meubels in een kamer te plaatsen, voorziet bij elke gebruiker kleine privé-gebieden en centraal een gemeenschappelijke ruimte. In deze privéruimtes kunnen de gebruikers bepaalde items voorbereiden, om ze vervolgens in het geheel te integreren. Afhankelijk van de taken die uitgevoerd moeten worden, dient er rekening gehouden te worden met de privacy van de gebruiker. Als er in een vergadering bijvoorbeeld documenten uitwisseld of aangepast moeten worden, kan het voor de gebruiker vaak beter zijn als er een ruimte voorzien is waar niemand anders aankan en waar bepaalde zaken voorbereid kunnen worden.


(a) Screenshot laptop A: privé-gebied.

15

(b) Screenshot UbiTable: persoonlijke en publieke gebieden.

Figuur 2.8: De verschillende gebieden die gebruikt worden bij de UbiTable [54].

2.5

Conclusies

In dit hoofdstuk is een algemeen overzicht van digitale tafels beschreven, waarbij een aantal technologieën om een tabletop touch-device te implementeren besproken zijn. Het opvangen van de positie van het aanrakingspunt op het oppervlak van de vingers of objecten kan enerzijds gebeuren door camera’s, zowel boven als onder het (doorzichtige) oppervlak, anderzijds door een touch-sensitive oppervlak. Het weergeven van het computerdisplay kan gebeuren door een projector langs boven of langs onder, of door gebruik te maken van LCD-schermen, waarbij elke methode voor- en nadelen heeft. Bij het ontwikkelen van software voor deze systemen is het belangrijk om de voordelen optimaal uit te buiten en rekening te houden met de aandachtspunten. De directe input is het belangrijkste voordeel, maar ook het aspect van samenwerken kan in toepassingen gebruikt worden. Het selecteren van kleine items kan dan weer voor problemen zorgen, net zoals de fysieke beperkingen van de gebruikers, waarbij de afstand om objecten te selecteren een rol kan spelen. Ook dient er rekening gehouden te worden met het feit dat gebruikers bij bepaalde taken graag een persoonlijke ruimte hebben op de tafel, waar ze items kunnen voorbereiden en apart bewerken. In het volgende hoofdstuk zullen verticale opstellingen besproken worden, waarbij net zoals in dit hoofdstuk technologieën, voordelen en aandachtspunten aangehaald zullen worden.

Hoofdstuk 3

Digitale wand Contents 3.1 3.2

3.3 3.4 3.5 3.6

3.1

Inleiding . . . . . . . . . . . . . . . . . . . . . . . Technologie¨ en . . . . . . . . . . . . . . . . . . . . 3.2.1 SMART Board . . . . . . . . . . . . . . . . . . 3.2.2 Interactive DataWall . . . . . . . . . . . . . . . 3.2.3 Liveboard . . . . . . . . . . . . . . . . . . . . . 3.2.4 Collaborative classroom learning environment . 3.2.5 Interactive Learning Wall . . . . . . . . . . . . 3.2.6 Augmented wall . . . . . . . . . . . . . . . . . Voordelen . . . . . . . . . . . . . . . . . . . . . . Aandachtspunten . . . . . . . . . . . . . . . . . Horizontaal versus verticaal . . . . . . . . . . . Conclusies . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16 16 17 19 19 20 21 21 23 24 25 25

Inleiding

Wanneer mensen samenwerken hebben ze vaak een grote hoeveelheid informatie die ze aan de muur ophangen om een goed overzicht te krijgen, waarbij de items georganiseerd en er notities bij gemaakt kunnen worden. Ook wordt bij meetings en lessen het whiteboard vaak als centraal communicatiemiddel gebruikt, waardoor informatie gepresenteerd kan worden aan de aanwezigen. Door deze informatie op een digitaal interactief bord te tonen kunnen de items eenvoudiger opgeroepen worden, kunnen aantekeningen opgeslagen worden, kan deze informatie eenvoudiger georganiseerd worden, . . . Door interactie toe te staan met behulp van pennen, laser pointers en vingeraanrakingen kan het geheel een meer intu¨ıtievere interface vormen, hetgeen het presenteren en samenwerken kan bevorderen.

3.2

Technologie¨ en

Deze sectie bespreekt een aantal technologieën om een digitale wand te creëren. Interactie met deze toepassingen kan via allerlei technieken gebeuren, zoals door gebruik te maken van 16

Hoofdstuk 3. Digitale wand

17

een digitale pen, een laser pointer, spraakherkenning of door directe input met de vingers en handen. Het is ook uiteraard mogelijk dat technologieën van digitale tafels, die voorgesteld zijn in het vorige hoofdstuk, in een verticale vorm worden gebruikt.

3.2.1

SMART Board

De interactieve whiteboarden van SMART Technologies, de SMART Boards[60], geven de mogelijkheid om de computer aan een projector aan te sluiten, waardoor het beeld geprojecteerd wordt. Vervolgens kan de gebruiker applicaties bedienen via het scherm en interageren met vingers, pennen of andere voorwerpen.

(a) Projectie langs voor op een drukge- (b) Projectie langs achter met DViT voelig oppervlak. voor het opvangen van de interactie.

Figuur 3.1: SMART Board [60].

De SMART Boards zijn in drie opties beschikbaar: • Front projection In deze variant (zie figuur 3.1(a)) wordt er langs de voorkant geprojecteerd op een touch-sensitive oppervlak, dat gebruik maakt van drukintensieve technologie, waarmee single-touch interactie mogelijk is. Hierbij worden er twee lagen gebruikt, waartussen een flinterdunne luchtopening voorzien is. Wanneer er gedrukt wordt op het voorste blad zal dit ervoor zorgen dat het achterblad ook geraakt wordt, waardoor het contactpunt berekend kan worden. Deze technologie geeft de mogelijkheid om zowel contact van een vinger, een stylus of eender welk object te registreren. • Rear projection Deze soort SMART Boards maakt gebruik van een projector aan de achterkant van het scherm, waardoor schaduwen niet meer kunnen optreden als gebruikers in het licht van de projector staan (zie figuur 3.1(b)). Hierdoor is er uiteraard wel meer plaats aan de


18

achterkant nodig. Deze variant maakt geen gebruik van de drukintensieve technologie, maar gebruikt DViT. • Flat panel overlays De overlay geeft de mogelijkheid om interactie toe te voegen aan bijvoorbeeld plasma en LCD-schermen. Door het gebruik van DViT worden alle aanrakingen op het scherm geregistreerd en kan er ge¨ınterageerd worden met het systeem. DViT (Digital Vision Touch Technology)[59] is een multi-touch technologie waarvoor geen touch-sensitive schermen of speciale input devices nodig zijn, aangezien er gebruik gemaakt wordt van vier camera’s, geplaatst in elke hoek (zie figuur 3.2(a)). Als er vervolgens een contact optreedt, zullen de hoeken ten opzichte van deze camera’s meehelpen om de exacte positie te berekenen (zie als voorbeeld figuur 3.2(b)). Deze aanraking kan dus zowel gebeuren door vingers, als door objecten. Deze technologie kan op grote oppervlakken toegepast worden, aangezien er geen rekening gehouden dient te worden met speciale oppervlakken. Hoe beter de camera’s zijn die gebruikt worden, hoe beter uiteraard de exacte positiebepaling zal plaatsvinden.

(a) De camera in de hoek van het frame.

(b) De berekening van het contactpunt met behulp van de camera’s.

Figuur 3.2: Digital Vision Touch Technology maakt gebruik van camera’s in de vier hoeken om het contactpunt te berekenen [59].

De SMART Boards zijn ook voorzien van een speciale SMART Pen Tray, bevestigd onder de borden (zie figuur 3.1(a)). Hierin zijn vier ruimtes voor pennen en een bordenwisser voorzien, die uitgerust zijn met sensortechnologie. De pennen zelf hebben geen technologie, maar als een pen opgenomen wordt, zal dit gedetecteerd worden door het systeem, waardoor de bijbehorende kleur toegepast wordt bij het schrijven/tekenen op het bord. Dit hoeft dan niet perse uitgevoerd te worden door de desbetreffende pen, ook vingers of andere objecten kunnen in deze kleur acties uitvoeren. Hetzelfde wordt toegepast bij de bordenwisser. Als deze van de houder is opgeheven, zal eender welk contact dat op het oppervlak plaatsvindt een wiseffect hebben.


3.2.2

19

Interactive DataWall

Grote schermen worden vaak gebruikt in controle- en commandocenters, zoals bij het treinverkeer, militaire toepassingen en ruimteluchtvaart. Zo heeft het Air Force Research Laboratory de Interactive DataWall[28] ontwikkeld voor militaire toepassingen om een overzicht van de situatie te bekomen en geco¨ ordineerde beslissingen te ondersteunen. Drie projectoren, die horizontaal langs elkaar geplaatst zijn aan de achterkant, zorgen voor één groot scherm met een resolutie van ongeveer 5.8 miljoen pixels (zie figuur 3.3). Er is geopteerd om te werken met projectoren in plaats van monitors, dit om ervoor te zorgen dat er geen randen optreden. Dit zou dan voor discontinu¨ıteit zorgen, waardoor het scherm niet meer als één geheel overkomt. Meerdere beamers worden ook gebruikt om een hogere kwaliteit als resultaat te hebben, hetgeen een vereiste is bij het tonen van details (zoals terreinmodellen en digitale kaarten). Interactie met de Interactive DataWall is op twee manieren mogelijk. Zo kunnen er normale muisacties uitgevoerd worden door een camera tracked laser pointer. Hiervoor worden er drie camera’s, die uitgerust zijn met rode filters, geplaatst op de projectoren, die de laser zullen detecteren. Het verslepen en resizen van vensters en het interageren met de user interface (knoppen en scrollbalken) kan door deze methode uitvoerd worden. Verder is er ook interactie mogelijk door gebruik te maken van spraakherkenning. Door gebruik te maken van draadloze micro’s kunnen er bepaalde commando’s ingevoerd worden, zoals het tekenen van geometrische vormen (zoals lijnen en cirkels), die met behulp van de pointer gepositioneerd kunnen worden.

Figuur 3.3: De Interactive DataWall bestaat uit drie projectoren die één scherm vormen, waarbij interactie via laser pointers en spraakherkenning mogelijk worden [28].

3.2.3

Liveboard

In de beginjaren ’90 heeft Xerox een interactief groot scherm ontwikkeld, Liveboard[15]. Het scherm van ongeveer 115cm op 80cm is in een houten frame gebouwd en heeft een resolutie van ongeveer 1 miljoen pixels. Het beeld wordt aan de achterkant geprojecteerd en wordt


20

daar tweemaal afgebogen om ervoor te zorgen dat het gedeelte achter het scherm zo klein mogelijk is (zie figuur 3.4 voor een overzicht van deze opstelling). Door gebruik te maken van een draadloze digitale pen kan er geinterageerd worden met het systeem. Deze pen stuurt een optische straling uit, hetgeen door een detector opgevangen wordt achter het scherm, waardoor de exacte positie bepaald kan worden. Met dit input device kan er zowel pointing op afstand gebeuren, als het uitvoeren van bepaalde gebaren. Een veegbeweging naar rechts kan zo bijvoorbeeld bij presentaties de volgende slide tonen.

Figuur 3.4: Optische en mechanische details van Liveboard [15].

3.2.4

Collaborative classroom learning environment

Om een meer collaboratieve omgeving te creëren in een klas wordt er met een groot gedeeld scherm gewerkt[39]. Hierbij worden er 4 projectoren gebruikt, die langs de voorkant verschillende beelden tonen en een totale resolutie van ongeveer 5 miljoen pixels als resultaat hebben. Deze infrastructuur wordt via een netwerk gekoppeld aan de laptops van de studenten in dezelfde ruimte, die de beelden van het scherm zelf kunnen opvragen. Hierdoor krijgen ze de mogelijkheid om tijdens presentaties bepaalde gegevens op te slaan, extra notities te maken, of om op eigen tempo door de presentatie te bladeren. Het systeem heeft drie verschillende operatiemodes: • Collaboration mode: in deze mode, die tevens in figuur 3.5 wordt getoond, worden alle wijzigingen op het scherm doorgegeven aan alle eindgebruikers (de gebruikers B in de afbeelding). De andere gebruikers in het lokaal kunnen ook de inhoud van hun scherm tonen op het grote scherm, door via een tool een beschikbare ruimte te selecteren (gebruikers A). • Laptop presentation mode: als één persoon een presentatie wil geven, kan deze mode ingesteld worden. De controle over het volledige scherm wordt dan door deze gebruiker geregeld en andere personen kunnen nu hun scherm niet meer tonen.


21

• Instructor mode: om de voortgang van studenten te volgen is de instructor mode voorzien, waarbij de instructor de schermen van de andere gebruikers kan tonen op zijn/haar display en zelfs op het grote scherm. Door de thumbnail optie bestaat er de mogelijkheid om simultaan de voortgang van verschillende laptops op te volgen.

Figuur 3.5: Collaboration Classroom Learning Environment: gebruikers A tonen hun informatie ook op het grote display. Gebruikers B capturen het grote scherm op hun eigen laptop [39].

3.2.5

Interactive Learning Wall

Ook de Interactive Learning Wall[14] is een systeem dat gebruikt kan worden bij het lesgeven, waarbij de inhoud van de presentatie van op afstand beheerd kan worden. Via een hoofdcomputer wordt de inhoud geprojecteerd op een groot scherm en door een laser pointer kunnen er normale muisacties uitgevoerd worden. Een eenvoudige camera vangt het scherm op en stuurt elk frame naar de computer, waarbij de software het eventuele punt van de laser detecteert. Om een enkele muisklik uit te voeren dient de gebruiker op het juiste widget de laser pointer eerst te richten, vervolgens de button los te laten en tenslotte binnen de seconde opnieuw de laser af te schieten op ongeveer dezelfde plaats. Afhankelijk van de huidige instelling kunnen er ook rechtermuiskliks uitgevoerd worden en kan de gebruiker ook tekenen (lijnsegmenten volgen de afgelegde weg van de pointer). Verder kunnen de andere personen in de ruimte, die met hun computer verbonden zijn met het netwerk, de controle vragen, waardoor ze de muis en het keyboard van de hoofdcomputer kunnen overnemen en zo zelf tekst typen en van slide verwisselen. Uiteraard moet de instructor hiervoor wel toestemming geven. In figuur 3.6 wordt de opstelling van deze technologie gepresenteerd.

3.2.6

Augmented wall

Bij de vorige technologieën werd er enkel gewerkt met digitale informatie, die bijvoorbeeld geprojecteerd werd. Maar vaak worden er op een muur verschillende papieren opgehangen zoals


22

Figuur 3.6: De opstelling van de Interactive Learning Wall waarbij verschillende computers met het systeem verbonden kunnen worden om te projecteren, terwijl interactie via laser pointers of de devices van de actieve computers kan gebeuren [14].

diagrammen, posters, aantekeningen, print-outs, . . . Deze informatie is helaas enkel zichtbaar op één plaats en bij het verschuiven of verwijderen van items kunnen bepaalde relaties verdwijnen. Daarom worden er in deze sectie twee technieken besproken waarbij fysieke informatie gekoppeld wordt aan digitale informatie en interactiemogelijkheden.

Collaborage Bij Collaborage[42] worden fysieke items op een bord geplaatst, die voorzien zijn van een unieke identifier (een soort barcode). Een camera zal het bord waarnemen en de frames doorzenden naar de software, waarbij de items ge¨ıdentificeerd kunnen worden door hun tags. Een aantal toepassingen voor deze opstelling zijn ontwikkeld zoals het In/Out & Away systeem, waarbij groepsleden op het bord kunnen aanduiden of ze binnen of buiten het gebouw zijn en de datum opgeven wanneer ze afwezig zullen zijn. Elk groepslid heeft hiervoor een token dat op het bord geplaatst kan worden (zie figuur 3.7(a)), hetgeen door het systeem opgevangen zal worden en waardoor in de database een update uitgevoerd wordt. Via de webbrowser kan deze informatie dan opgevraagd worden. Verder is er een andere applicatie ontwikkeld waarbij de huidige status van taken binnen een project opgevolgd kan worden.

The Designer’s Outpost De opstelling van The Designer’s Output[32] bestaat uit een touch-gevoelig SMART Board (rear projection variant) dat uitgerust wordt met een video camera aan de achterkant, die de bewegingen opvangt en een hoge resolutie camera aan de voorkant, die de inkt opvangt en de inhoud van de notes opslaat. Langs achter output een projector digitale informatie op het oppervlak, waarop langs de voorkant Post-It Notes en afbeeldingen gehangen kunnen worden, die vervolgens door het systeem gedetecteerd worden; het papier dient dus ook als


(a) Het In/Out & Away systeem van Collaborage waarbij items met tags op een bord geplaatst worden, die later door een camera verwerkt worden [42].

23

(b) The Designer’s Outpost bestaat uit een SMART Board waarop tevens fysieke papieren gehangen kunnen worden, die opgenomen worden door een camera [32].

Figuur 3.7: Verschillende toepassingen van de augmented wall.

input. Links tussen de verschillende notes kunnen gelegd worden door een lijn te tekenen met een stylus. Als een note vervolgens verplaatst wordt, zullen de links mee bewegen. Ook bestaat er de mogelijkheid om op een note te tikken, waardoor een bijbehorend menu wordt getoond. Figuur 3.7(b) toont deze technologie.

3.3

Voordelen

Net zoals bij de digitale tafels (zie sectie 2.3) is de directe input een voordeel, waardoor er niet constant met een muis of toetsenbord gewerkt moet worden om met bepaalde items te interageren. Hierdoor kan de focus op het scherm behouden worden en moet deze dus niet verschuiven naar het keyboard of de muis van een computer die het centrale scherm bedient [15]. Andere technologieën maken dan weer gebruik van laser pointers, die muisacties kunnen uitvoeren, waardoor ook op afstand ge¨ınterageerd kan worden met het systeem. Verder biedt een digitaal interactief whiteboard een heel aantal voordelen ten opzichte van gewone borden, die vaak in kantoren gebruikt worden. Op deze traditionele borden kan er genoteerd worden en kunnen er papieren opgehangen worden, door bijvoorbeeld gebruik te maken van magneten. Bij deze borden kan het herschikken van items vaak moeilijk zijn, waardoor er ook bijbehorende relaties kunnen verdwijnen. Door beperkte ruimte zullen ook items moeten verdwijnen, die dan weggeveegd kunnen worden als deze geschreven zijn. Papieren die opgehangen worden zijn vaak print-outs, waardoor deze dus eerst uitgeprint dienen te worden. Door gebruik te maken van een digitaal interactief bord kunnen deze nadelen verholpen worden, aangezien items niet eerst uitgeprint dienen te worden, maar rechtstreeks getoond worden. Ook bestaat er de mogelijkheid om wijzigingen en notities op te slaan, waardoor dit in latere fasen opnieuw opgeroepen kan worden. Als het opgeslagen is, kan er eenvoudi-


24

ger door gezocht worden en kan het ook op andere plaatsen opgevraagd worden, waardoor men dus niet meer verplicht is om zich naar het lokaal van het bord zelf te verplaatsen [19, 20].

3.4

Aandachtspunten

Deze sectie geeft een aantal aandachtspunten, waar tijdens het ontwerp van applicaties rekening gehouden mee dient te worden. Mogelijke oplossingen zullen in de hoofdstuk 4 besproken worden. Net zoals bij de digitale tafels (zie sectie 2.4) spelen ook de fysieke eigenschappen van de gebruikers een rol. Zo zal de persoon meer moeten bewegen ten opzichte van een desktopcomputer om bepaalde items te selecteren, hetgeen zeker bij grotere borden een probleem kan vormen. Kleine personen kunnen ook problemen hebben om aan de bovenkant van het bord te geraken. Verder zal het hoofd ook meer moeten bewegen om alles waar te kunnen nemen [17]. Het verslepen van items van de ene naar de andere kant kan ook voor problemen zorgen. Vaak moet de gebruiker zich dan verplaatsen en naargelang de afstand toeneemt, zullen er ook steeds meer fouten optreden bij de sleepacties. Als er met meerdere schermen gewerkt wordt, die tegen elkaar geplaatst zijn, kunnen de randen ook voor discontinu¨ıteit zorgen. Een groot scherm uit één deel of speciaal voorziene interactietechnieken zouden voor deze toepassingen gebruikt moeten worden [4, 61]. Het schrijven met de vingers of een digitale pen kan soms onleesbare resultaten als gevolg hebben, hetgeen mede afhangt van de tracking rate van het systeem [46]. Vingers leveren vaak een slechter resultaat, aangezien deze ook dikker zijn dan een pen. Bij beide methoden kunnen de lijnen nogal hakkelig overkomen, iets wat bij conventionele borden minder voorkomt. Uiteraard hoort men hierbij ook rekening te houden met de persoon zelf die schrijft, aangezien bepaalde mensen zowieso iets slechter kunnen schrijven op borden. Input geven via een toetsenbord kan dit probleem oplossen, maar hierdoor gaat de directere input verloren. Een onscreen toetsenbord kan eventueel wel ook gebruikt worden in bepaalde gevallen. Sommige mensen laten graag hun hand op het oppervlak rusten als ze schrijven, iets wat problemen kan geven als het een touch-gevoelig oppervlak is, aangezien de menselijke aanraking als input aanzien wordt. Bij pen-only systemen, wordt enkel de invoer van een speciale pen verwerkt, waardoor de hand het oppervlak kan aanraken zonder problemen te veroorzaken [63]. Om te interageren met de digitale borden kan er vaak met de vingers, een digitale pen of een pointer gewerkt worden. Afhankelijk van de doelstellingen van de applicatie moet gekozen worden welke manier geopteerd wordt. Muisgerelateerde functies, zoals het indrukken van knoppen en slepen van items, kunnen eenvoudig uitgevoerd worden met de vingers, terwijl schrijven daarentegen weer beter verricht kan worden door gebruik te maken van een stylus [63]. Vaak zijn deze interactieve borden single-user, waardoor er niet simultaan samengewerkt kan worden door meerdere gebruikers [17, 46]. Verder kan het ook vrij vervelend zijn als er met


25

een extra inputdevice gewerkt dient te worden, aangezien dit dan telkens doorgegeven moet worden, tenzij er verschillende exemplaren aanwezig zijn. Als er directe input met de vingers is, is dit probleem uiteraard iets minder; er moeten dan enkel gewacht worden zodat er geen interferentie optreedt. Als een gebruiker bepaalde gegevens wilt opvragen, dient er ook voor gezorgd te worden dat niet het hele bord hierdoor in beslag genomen wordt. Privacy-aspecten spelen een rol bij deze schermen. Als een gebruiker bepaalde data wilt zoeken, wordt dit vaak getoond aan alle aanwezige gebruikers, hetgeen niet altijd even preferabel is. Het gebruik van een multi-device methode kan hiervoor een oplossing bieden, waarbij de gebruiker bijvoorbeeld op een PDA een item kan selecteren en dit later op het bord kan tonen. In het volgende hoofdstuk worden hier mogelijke oplossingen voor besproken [46].

3.5

Horizontaal versus verticaal

Uit studies[49] is gebleken dat de horizontale digitale oppervlakken andere vormen van interactie- en samenwerkingsstijlen veroorzaken dan de verticale varianten. Bij de horizontale oppervlakken zullen de gebruikers beter kunnen samenwerken, aangezien het hierbij bijvoorbeeld eenvoudiger is om items door te geven. Een groot nadeel is wel dat het aantal personen van de groep gelimiteerd is. De technologie zelf speelt hierbij een belangrijke rol, want niet alle toepassingen kunnen een groter oppervlak voorzien. Aangezien de groepsleden zich ook aan verschillende zijden van de tafel kunnen bevinden, is het mogelijk dat niet alle informatie goed bekeken kan worden, waarvoor rotatietechnieken een oplossing kunnen bieden. Het gebruik van de horizontale digitale oppervlakken sluit in grote mate ook aan bij de traditionele tafels, die voor vergaderingen en groepswerken gebruikt worden. Samenwerken met verschillende personen is een aspect dat bij de verticale opstellingen in mindere mate mogelijk is. Dit is vooral te wijten aan het feit dat er een grote kans bestaat dat de groepsleden mekaar voor de voeten lopen, iets wat bij digitale tafels niet voorkomt. Het presenteren van informatie aan groepen, waarbij de grootte in mindere mate een rol speelt, is het belangrijkste doel van een digitale wand. Interageren met deze toepassingen, door bijvoorbeeld één persoon, biedt een meerwaarde ten opzichte van de gewone projectieschermen of whiteboards, aangezien deze meerdere interactiemogelijkheden geven.

3.6

Conclusies

Een algemeen overzicht van digitale wanden stond in dit hoofdstuk centraal. Hierbij zijn er een aantal technologieën besproken om te kunnen interageren met een bord/wand door bijvoorbeeld het opvangen van de aanrakingen van vingers, het gebruik van een (digitale) stylus, spraakherkenning en laser pointers, die gebruik maken van camera’s om de posities op te vangen. Ook zijn opstellingen besproken waarbij verschillende gebruikers met hun laptop met een groot scherm verbonden zijn en hierdoor de controle van de hoofdcomputer kunnen opvragen of zelf hun scherm kunnen tonen. Het voordeel van een interactief digitaal bord is dat het eenvoudiger is om tijdens het presenteren, lesgeven of werken aan een project te


26

interageren met het systeem. Hierdoor kan er genoteerd worden op het scherm en kan dit vervolgens opgeslagen worden, kunnen links tussen items bewaard blijven, is het eenvoudiger om items te verplaatsen. . . Bij het ontwikkelen van applicaties dient er wel voldoende aandacht besteed te worden aan bijvoorbeeld de fysieke eigenschappen van de gebruikers, aangezien grotere oppervlakken meer beweging vragen; maar ook het verslepen over grote afstand kan problemen opleveren. Verder speelt het privacy-aspect ook een rol, aangezien het bord voor alle aanwezigen op elk moment zichtbaar is. Het volgende hoofdstuk zal interactie- & visualisatietechnieken voorstellen, waarbij oplossingen beschreven worden voor de aandachtspunten die in de afgelopen twee hoofdstukken zijn aangehaald.

Hoofdstuk 4

Interactie- & visualisatietechnieken Contents 4.1 4.2

4.3

Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

Precieze selectietechnieken . . . . . . . . . . . . . . . . . . . . . . .

28

4.2.1

Single-touch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

4.2.2

Multi-touch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

4.2.3

Selectie van objecten dicht bij elkaar . . . . . . . . . . . . . . . . . .

34

Afstand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Drag-and-Pop & Drag-and-Pick . . . . . . . . . . . . . . . . . . . . .

35

4.3.2 4.3.3

Pick-and-Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Drag-and-Throw & Push-and-Throw . . . . . . . . . . . . . . . . . .

36 38

4.3.4

Push-and-Pop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39

4.3.5

Frisbee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

4.3.6 4.4

4.5

4.6

4.7

35

4.3.1

2

CoR Ds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Gestures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41 41

4.4.1

Tabletop publishing prototype . . . . . . . . . . . . . . . . . . . . .

42

4.4.2

RoomPlanner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

Organisatie & management . . . . . . . . . . . . . . . . . . . . . .

44

4.5.1

Storage bins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4.5.2

Interface Currents . . . . . . . . . . . . . . . . . . . . . . . . . . . .

45

4.5.3

Mobile spatial tools . . . . . . . . . . . . . . . . . . . . . . . . . . .

47

4.5.4

ZoomScapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

47

4.5.5

Rotatie & translatie . . . . . . . . . . . . . . . . . . . . . . . . . . .

Interactie van op afstand . . . . . . . . . . . . . . . . . . . . . . . .

44

48 50

4.6.1

Laser pointer interactie . . . . . . . . . . . . . . . . . . . . . . . . .

50

4.6.2

Spraakherkenning . . . . . . . . . . . . . . . . . . . . . . . . . . . .

51

4.6.3

Vision-tracked multi-finger gestural input . . . . . . . . . . . . . . .

Menu’s & speciale iconen . . . . . . . . . . . . . . . . . . . . . . . .

51 52

4.7.1

Menu’s voor samenwerking . . . . . . . . . . . . . . . . . . . . . . .

53

4.7.2

Pie menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53

4.7.3

Gedrics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53

27

Hoofdstuk 4. Interactie- & visualisatietechnieken

4.7.4 FlowMenu . . . . . . 4.8 Tekstinvoer . . . . . . . 4.8.1 Sticky Notes . . . . 4.8.2 Karakterherkenning 4.9 Conclusies . . . . . . . .

4.1

. . . . .

. . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . . . . . . . . . . . . . . .

55 56 56 57 57

Inleiding

In de vorige twee hoofdstukken zijn digitale tafels en wanden ge¨ıntroduceerd, waarvoor andere interactie- en visualisatietechnieken nodig zijn dan de traditionele computersystemen. Hierbij zijn telkens een aantal aandachtspunten besproken, waarmee rekening gehouden dient te worden tijdens het ontwerp van nieuwe applicaties. Dit hoofdstuk presenteert mogelijke technieken om problemen met onder andere precieze selectie, afstand, menu’s, tekstinvoer,. . . op te lossen. Ook worden er visualisatietechnieken voorgesteld om de items op een digitaal oppervlak te organiseren.

4.2

Precieze selectietechnieken

Het selecteren van kleine items met direct touch kan soms een moeilijke opgave zijn. Enerzijds kunnen de vingers of de hand van de gebruiker het onderliggende bedekken en anderzijds heeft de vinger een lage resolutie, waardoor het moeilijk is om items te selecteren die kleiner zijn dan deze vinger. Ook het gebruik van een stylus, als de hardware dit ondersteunt, kan dit probleem niet altijd vermijden, aangezien de resolutie hiervan nog steeds lager is dan deze van een muispointer. Deze sectie presenteert daarom een aantal technieken die het mogelijk maken om pixelnauwkeurige selecties uit te voeren op items. Hierbij valt wel op te merken dat als de items voldoende groot zijn, er beter direct met de vinger gewerkt kan worden, aangezien deze voorgestelde methoden meer tijd kosten.

4.2.1

Single-touch

Hier worden een aantal mogelijke technieken[2] besproken waarbij er telkens gewerkt wordt met single-touch invoer.

Take-Off De Take-Off methode[53] voorziet een cursor die boven de vinger van de gebruiker met een vaste offset wordt getoond op het scherm. Door de vinger vervolgens te verplaatsen over het oppervlak wordt de cursor mee bewogen en wanneer deze zich boven een item bevindt en de vinger opgeheven wordt, zal het item geselecteerd worden. Bij testen bleek dat het selecteren van kleine objecten (1 ` a 2 pixels groot) met deze methode niet goed uitgevoerd kon worden.


29

Zooming Een veelgebruikte methode is het inzoomen, waardoor de items groter weergegeven worden en de gebruiker deze beter kan selecteren met de vinger. Bounding box zoom is een mogelijkheid om dit te voorzien, waarbij de gebruiker eerst de zoommode dient te activeren, waarna een bounding box ingesteld moet worden. Dit kan gebeuren door eerst de vinger in een gewenste hoek te plaatsen en vervolgens de grootte in te stellen door de vinger naar de tegenstelde hoek te verslepen. Als de vinger dan het oppervlak loslaat zal het systeem inzoomen naar dit geselecteerde gebied, waarna de gebruiker het gewenste item eenvoudiger kan selecteren (zie figuur 4.1). Het grote nadeel bij deze techniek is dat de gebruiker de oriëntatie kan verliezen. Het weergeven van een miniatuuroverzicht met een aanduiding welk deel momenteel getoond wordt, kan hiervoor eventueel wel een oplossing bieden. Ook kan het herhaaldelijk in- en uitzoomen de taak vertragen.

(a) Bounding box instellen.

(b) Het ingezoomde beeld.

Figuur 4.1: Bounding box zoom geeft een geselecteerd deel groter weer om eenvoudiger te kunnen selecteren [2].

Cross-Lever Cross-Lever maakt gebruik van twee transparante, kruisende lijnen, waarbij de intersectie het selectiepunt voorstelt, zoals getoond wordt in figuur 4.2(a). Als de gebruiker tikt1 (zo dicht mogelijk bij het te selecteren item) zullen de twee lijnen verschijnen, die aan de uiteinden handles hebben voorzien, waardoor de lijnen verplaatst en groter/kleiner gemaakt kunnen worden. Het vergroten van de lijnen zorgt ervoor dat er een betere precisie gebruikt kan worden. Door vervolgens in de grijze cirkel te tikken (het activatiegebied), zal het intersectiepunt tenslotte als activatiepunt gebruikt worden, waardoor het onderliggende item geselecteerd wordt. 1

Tik: het plaatsen en opheffen van de vinger of stylus op het oppervlak (vergelijkbaar met een muisklik).


30

Testen hebben uitgewezen dat deze methode 1-pixel selectie toestaat, hoewel daarentegen staat dat het een vrij tijdrovende methode is.

(a) Cross-Lever: selectiepunt wordt door (b) Virtual Keys: cursor wordt via pijlen de intersectie van twee lijnen bepaald. verplaatst.

Figuur 4.2: Cross-Lever en Virtual Keys staan pixelnauwkeurige selectie toe [2].

Virtual Keys Virtual Keys maakt gebruikt van een widget waarin vier grafische pijlen en een activatieknop worden voorzien, waardoor een selectiekruis verplaatst kan worden. Door eerst zo dicht mogelijk bij het te selecteren item te klikken, verschijnt de cursor die vervolgens met de pijlen verplaatst kan worden. Het selecteren gebeurt door op de ok-button te drukken (zie figuur 4.2(b)). Gebruikerstesten wezen uit dat deze techniek snellere resultaten had dan Take-Off en CrossLever, maar een groot nadeel was dat de gebruikers hun focus telkens moesten verleggen tussen de pointer en het widget.

Cross-Keys Om de focus van de vorige methode niet constant te moeten verleggen, wordt er een combinatie gemaakt tussen de Cross-Lever en de Virtual Keys technieken, hetgeen resulteert in Cross-Keys. Als de gebruiker hierbij op het oppervlak tikt, zal een groter kruis getoond worden, met aan de uiteinden telkens handles voorzien, die de pijlen voorstellen, zoals figuur 4.3(a) toont. Het verplaatsen van de pointer kan gebeuren door op de bijbehorende handles te tikken. Om te bevestigen dient de gebruiker binnen de activatiecirkel te tikken. Deze methode is geschikt voor de selectie van kleine objecten en biedt een verbetering ten opzichte van de Virtual Keys methode. Problemen kunnen wel opduiken als een item aan de rand van het scherm geselecteerd dient te worden, waardoor de handles niet volledig getoond


31

kunnen worden, een probleem dat bij meerdere technieken voor ongewenste resultaten kan zorgen.

(a) Cross-Keys: handles op uiteinden (b) 2D Lever: handle draait pointer rond van pointerkruis zorgen voor verplaat- pivotpunt. sing.

Figuur 4.3: Cross-Keys en 2D Lever staan pixelnauwkeurige selectie toe [2].

2D Lever In plaats van in discrete stappen te werken, hetgeen het geval is bij de Virtual Keys, wordt er bij 2D Lever gewerkt met vloeiende, continue bewegingen. Deze techniek maakt gebruikt van een handle, een pivotpunt en een kruispointer, gesitueerd aan het uiteinde van de handle (zie figuur 4.3(b)). Het verplaatsen van de handle zorgt ervoor dat de pointer draait rond het pivotpunt met hoge precisie, aangezien de handle veel verder van het rotatiepunt verwijderd is. Deze handle kan ook vergroot of verkleind worden. Net zoals bij de vorige methodes kan het item tenslotte geselecteerd worden door in de activatiecirkel te tikken. Een gebruikerstest gaf als resultaat dat deze nieuwe methode sneller was dan Cross-Lever, maar minder goed presteerde dan Cross-Keys.

Precision Handle Precision Handle past de 2D Lever techniek aan door het pivotpunt weg te laten. Elke beweging die op de handle uitgevoerd wordt, zal ook op de kruispointer worden doorgevoerd, maar op een kleinere schaal, dus nog steeds met verhoogde precisie. Deze techniek had goede resultaten voor zowel kleine als grote objecten en werkte ook sneller dan 2D Lever.


4.2.2

32

Multi-touch

De volgende interactietechnieken[5] maken telkens gebruik van multi-touch invoer. De eerste vinger die op het oppervlak geplaatst wordt, is de primaire (pointing) vinger, die bijgestaan wordt door het tweede contact, de secundaire (non-pointing) vinger.

Dual Finger Offset De Dual Finger Offset voorziet een offset die pas gebruikt wordt op het moment dat de secundaire vinger op het oppervlak wordt geplaatst. Deze offset plaatst de cursor op een vaste waarde boven de primaire vinger. Deze eenvoudige techniek is niet zo flexiebel en zal in de volgende methodes uitgebreid worden.

Dual Finger Midpoint De Dual Finger Midpoint methode wordt geactiveerd wanneer de secundaire vinger het oppervlak raakt, waardoor er een variabele offset gebruikt wordt tussen de twee vingers. De cursor kan dan verplaatst worden door één of twee vingers te verplaatsen, zoals figuur 4.4 toont. Deze techniek heeft wel als nadeel dat het op bepaalde plaatsen niet gebruikt kan worden, zoals bij de randen van het scherm. Verder toonde een test aan dat deze methode niet zo goed werkt voor het selecteren van objecten die kleiner dan 3 pixels zijn.

Figuur 4.4: Dual Finger Midpoint: de pointer wordt tussen de twee vingers geplaatst [5].

Dual Finger Stretch De Dual Finger Stretch is gebaseerd op de hiervoor besproken Zooming techniek. Rond de primaire vinger wordt er een stretching area getoond, die door de secundaire vinger vergroot of verkleind kan worden. Hierdoor wordt er in het gebied ingezoomd terwijl de primaire vinger selecties kan uitvoeren. Door de tweede vinger van het oppervlak los te laten, wordt het ingezoomde deel terug naar de oorspronkelijke staat hersteld. Als de primaire vinger zo dicht mogelijk bij het te selecteren item geplaatst wordt, heeft dit als voordeel dat het mogelijk is dat er na het vergroten nog maar slechts een minimale verplaatsing nodig is (zie figuur 4.5).


33

Vergeleken met de Zooming techniek heeft deze Stretch methode ook als voordeel dat het inzoomen en selecteren gekoppeld is en dus niet in twee aparte acties is verwerkt, hetgeen uiteraard ook te danken is aan het gebruik van multi-touch. Ook wordt hierbij de interface in alle richtingen vergroot ten opzichte van de primaire vinger, hetgeen een voordeel is vergeleken met de bounding box zoom. Bij een gebruikerstest met alle vijf deze technieken bleek ook dat deze methode de hoogste voldoening opleverde.

(a) Stretching area wordt getoond rond (b) Secundaire vinger past de grootte primaire vinger. van het gebied aan.

Figuur 4.5: Dual Finger Stretch: gebied rond primaire vinger wordt vergroot door secundaire vinger om eenvoudiger te selecteren [5].

Dual Finger X-Menu Bij de Dual Finger X-Menu techniek zal er een widget getoond worden als de secundaire vinger op het oppervlak wordt geplaatst. Dit cirkelvormige menu, dat gepositioneerd is rond de tweede vinger, bevat mogelijkheden om de instellingen van de cursor aan te passen. Zo zijn er vier mogelijkheden met betrekking tot de snelheid: normaal (dezelfde snelheid als de primaire vinger), slow 4x & slow 10x (reduceert de snelheid met een factor) en freeze (de cursor zal nu niet meer bewegen). Verder zijn nog twee opties voorzien: snap, waarbij de cursor offset zal verdwijnen en de cursor weer direct aan de vinger wordt gekoppeld en magnify, dat een ingezoomd deel in het midden van het menu toont. De gekozen snelheid van de cursor wordt aangegeven door cirkels rond deze pointer. Zo duidt één cirkel op slow 4x, twee cirkels op slow 10x en een ijskristal op freeze, zoals figuur 4.6 toont. Een gebruikerstest wees uit dat deze methode goed presteerde maar iets traagde werkte dan de Stretch techniek. Vooral de freeze optie werd door de gebruikers geapprecieerd, aangezien dit werkt als een soort “ben je zeker?”, waardoor foute selectie vermeden kan worden.


34

Figuur 4.6: Dual Finger X-Menu: eigenschappen van de cursor kunnen ingesteld worden. Deze afbeelding toont tevens de freeze mode [5].

Dual Finger Slider De Dual Finger Slider methode maakt gebruik van de afstand tussen de twee vingers om de snelheid van de cursor af te leiden. Hoe dichter de secundaire vinger bij de primaire geplaatst wordt, hoe meer de snelheid gereduceerd wordt, hetgeen in dezelfde stappen als X-Menu werkt. Ook bij deze methode wordt er visuele feedback door middel van ringen rond de cursor gegeven om de snelheid aan te duiden. Deze techniek bekwam dezelfde resultaten als de vorige methode in de gebruikerstest.

4.2.3

Selectie van objecten dicht bij elkaar

Als objecten dicht bij elkaar liggen, kan de selectie met de gewone vinger voor problemen zorgen. De bovenstaande technieken bieden een mogelijkheid, waarbij vaak speciale tools gebruikt worden. Deze methodes zijn voorzien om pixelnauwkeurige selecties uit te voeren, hetgeen niet altijd nodig is. Bij deze techniek zal de gebruiker een tik uitvoeren in een gebied, waardoor alle objecten die binnen een bepaalde straal van het contactpunt liggen, naar de buitenkant verschoven zullen worden, waarbij de afstand tussen de middelpunten van de objecten in beschouwing genomen wordt. Hierdoor liggen de objecten niet meer dicht op mekaar en kan de gebruiker, zonder een ander item te raken, het gewenste object selecteren. Als deze actie uitgevoerd is, zullen de objecten terug naar de oorspronkelijke positie verplaatst worden, terwijl het object geselecteerd blijft. Deze methode is ge¨ımplementeerd in een project van Actuele Trends in HCI aan de Universiteit Hasselt2 /EDM3 samen met Dominique Salden, Tom Vereenooghe en Davy Vanacken. Hierbij is een 3D roomplanner voor een MERL DiamondTouch ontwikkeld. In figuur 4.7 wordt dit principe getoond met behulp van een tafel en vier stoelen. Het selecteren van de stoelen kan voor problemen zorgen, aangezien deze gedeeltelijk onder de tafel geplaatst zijn. Na een tik op de tafel zullen de stoelen naar buiten verschoven worden, waarna de gebruiker het gewenste object kan selecteren. Als dit uitgevoerd is, zullen de stoelen terug naar hun oorspronkelijke plaats gaan. Deze tijdelijke verplaatsingen worden via een animatie weer2 3

http://didactiek.edm.uhasselt.be/athci Expertisecentrum voor Digitale Media, http://www.edm.uhasselt.be


35

gegeven, zodat de gebruiker voldoende feedback krijgt over de nieuwe posities van de objecten.

(a) De normale positie van de tafel (b) Na een tik op de tafel worden (c) De stoelen zijn nu gescheiden en stoelen. de stoelen via een animatie naar van de tafel waardoor de gebruiker buiten verschoven. een selectie kan uitvoeren.

Figuur 4.7: De selectie van een object.

4.3

Afstand

De Drag-and-Drop methode[4, 45] is een veelgebruikte interactietechniek om items te verplaatsen, zowel bij de traditionele computersystemen als bij interactie op oppervlakken met een vinger of pen. De gebruiker ‘pakt’ een object vast door het met de vinger (of stylus) aan te raken en verplaatst het vervolgens door contact te behouden met het oppervlak. Eens op de gewenste positie kan het object losgelaten worden door de vinger van het oppervlak op te heffen. Deze techniek heeft een aantal nadelen, die vooral bij grote afstanden optreden. Zo moet de gebruiker zich soms fysiek verplaatsen en bestaat er de mogelijkheid dat er steeds meer errors optreden naargelang de afstand groter wordt, aangezien het noodzakelijk is dat de vinger continu met het display in contact blijft. Wanneer dit contact verbroken wordt, wordt het object vervolgens losgelaten, hetgeen een onderbreking van de actie is. Verder treedt er ook een probleem op als het oppervlak uit meerdere schermen bestaat, waardoor het bij de randen niet mogelijk is om verder te slepen naar het volgende scherm. De volgende secties zullen uitbreidingen op de Drag-and-Drop methode voorstellen om deze problemen te overbruggen.

4.3.1

Drag-and-Pop & Drag-and-Pick

In tegenstelling tot de Drag-and-Drop methode is het bij deze technieken niet nodig om met de pointer naar het target te gaan; het target zal zelf naar de pointer toekomen. Wanneer de gebruiker een bepaalde actie met een icoon wilt uitvoeren, zullen bij de Drag-and-Pop techniek[4] de pictogrammen die een compatibel type hebben, bij dit icoon getoond worden.


36

In figuur 4.8(a) wordt bijvoorbeeld een icoontje van een Word-document versleept, waardoor er automatisch kopieën (tip icons) van andere iconen getoond worden, waarop een eventuele actie uitgevoerd zou kunnen worden. In dit geval gaat het om de Prullenbak, Microsoft Word en Internet Explorer. Deze tip icons zullen via een rubberen band, die gedecoreerd is met de texture van de afbeelding, verbonden zijn met de oorspronkelijke iconen (base icons). Als het sleepicoontje vervolgens op een tip icon losgelaten wordt, zal de actie uitgevoerd worden.

(a) Drag-and-Pop met een Word-bestand waardoor (b) Drag-and-Pick toont tip icons van alle iconen in compatibele iconen dichterbij gebracht worden. de richting van de sleepbeweging.

Figuur 4.8: Drag-and-Pop & Drag-and-Pick verplaatsen iconen naar de pointer [4].

De Drag-and-Pick methode[4] past Drag-and-Pop aan, zodat het hierbij ook mogelijk wordt om iconen te activeren (het uitvoeren een applicatie, het openen van een map, . . . ). Hiervoor dient er een sleepactie uitgevoerd te worden op een lege plaats, waardoor tip icons getoond worden die in deze richting liggen, zoals getoond wordt in figuur 4.8(b). Als de gebruiker vervolgens met de pointer over een target gaat en loslaat zal de actie plaatsvinden. Bij een gebruikerstest viel op dat de sleepbeweging soms onder een verkeerde hoek uitgevoerd werd, waardoor niet de gewenste tip icons getoond werden. Ook kon het gebeuren dat de gebruikers bij de Drag-and-Pop methode het item op een verkeerd icoon loslieten, hetgeen voorkomt als er teveel tip icons dicht op mekaar getoond worden. Verder wees de test ook uit dat vergeleken met de traditionele Drag-and-Drop deze interactietechnieken een verbetering hadden als er gewerkt werd met grotere en samengestelde schermen (zie figuur 4.9), aangezien het verslepen over randen vermeden kon worden. Tenslotte hebben deze technieken wel een nadeel dat opduikt als meerdere gebruikers hiervan tegelijkertijd gebruik maken [25]. Het kan namelijk verwarrend worden als er verschillende rubberen banden door mekaar getoond worden.

4.3.2

Pick-and-Drop

Een andere manier om de Drag-and-Drop methode uit te breiden is de Pick-and-Drop techniek[45], waarbij er geen continu contact nodig is op het oppervlak om items te verplaatsen. Zo kan een stylus een virtueel object vasthouden door eerst met de pen een item aan te raken en vervolgens de pen op te heffen, waardoor het object op deze positie zal verdwijnen. De


37

Figuur 4.9: Drag-and-Pop techniek waarbij de gebruiker de rand van samengestelde schermen niet moet doorkruisen [4].

pen kan vervolgens verplaatst worden zonder het display aan te raken en bij het opnieuw neerzetten zal het object op deze nieuwe positie teruggeplaatst worden. Als de stylus dichtbij het oppervlak komt, wordt er ook een objectschaduw getoond om visuele feedback te geven dat de pen informatie vasthoudt. Het systeem maakt gebruik van een pen manager, die een object-ID koppelt aan een pen-ID. Deze pen-ID is leesbaar door een computer wanneer de pen zich dicht genoeg bij het scherm bevindt. De systeemopstelling van deze techniek wordt weergegeven in figuur 4.10. Deze interactietechniek geeft de gebruiker dus de kans om een item op te nemen en op een andere plaats terug te plaatsen, hetgeen handig is bij grote oppervlakken waarbij er een fysieke verplaatsing nodig is. Door gebruik te maken van time-outs kan deze methode ook samenwerken met de Drag-and-Drop techniek, in het geval dat de gebruiker de pen niet oplicht maar het object versleept naar een andere positie. Verder biedt de Pick-and-Drop techniek de mogelijkheid om in een ubiquitous computing omgeving, waarbij er gewerkt wordt met digitale tafels, interactieve wanden, PDA’s, . . . informatie van het ene systeem naar het andere te transfereren.

Figuur 4.10: Systeemopstelling van de Pick-and-Drop methode [45].


4.3.3

38

Drag-and-Throw & Push-and-Throw

Nog een andere methode om een item over een grote afstand te verplaatsen - eventueel naar een ander scherm - is door het item te ‘gooien’ over het scherm. De eerste methode, Dragand-Throw[24], maakt hiervoor gebruik van de pijl en boog metafoor. Wanneer een aanraking gebeurt op een icoon wordt, zoals figuur 4.11 toont, automatisch een take-off area getoond met het traject dat het item zal afleggen als de pointer losgelaten wordt (gelijkend op de rubberen band van Drag-and-Pop). Door de pointer in tegenovergestelde richting te bewegen (zoals bij een pijl en boog), zal het traject verder aangepast worden. Deze verplaatsing dient te gebeuren binnen de take-off area. Wanneer het starticoontje op de gewenste positie is, kan de pointer losgelaten worden, waardoor de actie doorgevoerd wordt en alle hulpmiddelen verdwijnen. De items kunnen naar elke positie op het scherm verplaatst worden, maar om het eenvoudiger te maken, wordt er ook trajectory snapping toegepast, zodat het traject automatisch aangepast wordt als het zich nabij een mogelijk target bevindt.

Figuur 4.11: Drag-and-Throw: na de initiële aanraking van een icoon (1) wordt de take-off area en het traject getoond (2), waarbij het traject door de gebruiker ingesteld kan worden (3). Het loslaten van de pointer voert de actie uit (4) [1].

Bij Push-and-Throw[24] wordt er gebruik gemaakt van de pantograaf metafoor, waarbij het verplaatsen van de pointer gebeurt in dezelfde richting als het target. In figuur 4.12 wordt een voorbeeld van deze techniek getoond, waarbij een Word-document naar Microsoft Word wordt gegooid. Na de initiële aanraking van het Word-document icoontje worden de bijbehorende hulpmiddelen getoond: het traject en de take-off area, waarbij het puntje de initiële klik voorstelt. Als de pointer vervolgens in de gewenste richting versleept wordt, zal het tip icon verplaatst worden naar de respectievelijke positie op het scherm. De take-off area kan hierbij vergeleken worden met een world-in-miniature van het scherm. Deze methodes hebben als voordeel dat er geen fysieke verplaatsing nodig is om een object virtueel te verplaatsen, hetgeen bij Pick-and-Drop wel nodig is. Ook verplaatst de pointer zich niet naar de andere positie, aangezien deze op ongeveer dezelfde plaats van waar de initialisatie heeft plaatsgevonden blijft. Dit zorgt er wel voor dat de focus telkens weg en terug verschuift. Een gebruikerstest wees uit dat deze twee technieken iets sneller waren dan de gewone Drag-and-Drop methode.


39

Figuur 4.12: Push-and-Throw: na de initiële aanraking van een icoon (1) wordt de take-off area en het traject getoond (2), waarbij het traject door de gebruiker ingesteld kan worden (3). Het loslaten van de pointer voert de actie uit (4) [1].

4.3.4

Push-and-Pop

De Push-and-Pop methode[10] combineert het world-in-miniature aspect van Push-and-Throw samen met de target-to-pointer methode van Drag-and-Pop. In figuur 4.13 wordt een voorbeeld getoond, waarbij een take-off area verschijnt wanneer de gebruiker een aanraking uitvoert op een Word-document icoontje. Alle andere iconen, die compatibel zijn met het initiële icoontje, zullen tip icons creëren in de take-off area, op de respectievelijke posities van het volledige scherm (world-in-miniature aspect). De rubberen banden worden hierbij vermeden. Het icoontje van het Word-document kan dan binnen dit gebied verplaatst worden en zal in het voorbeeld op de Prullenbak losgelaten worden, waardoor de actie uitgevoerd wordt en de take-off area samen met de tip icons verdwijnen. Deze techniek beschikt ook over de mogelijkheid om tijdelijk over te schakelen naar de Pushand-Throw methode, zodat de iconen op het scherm herschikt kunnen worden, hetgeen niet mogelijk is bij de andere variant. Hiervoor moet de pointer verplaatst worden naar het oorspronkelijke aanroeppunt, waarna de gewone Push-and-Throw techniek gebruikt wordt. Vergeleken met Drag-and-Pop worden bij deze interactietechniek alle mogelijke ondersteunde tip icons getoond en dus niet enkel deze die in de richting van de aanraking liggen. Dit zorgt ervoor dat het probleem van de juiste targets, dat zich regelmatig voordeed, voorkomen wordt. Ten opzichte van Push-and-Throw biedt deze aanpassing ook enkele voordelen. Zo worden er nu in de take-off area tip icons getoond en kunnen de gebruikers het gewenste tip icon bereiken zonder zich te heroriënteren. Verder is de take-off area nu een semantische miniatuurversie van het scherm doordat het enkel mogelijke targets bevat, waardoor de iconen van de targets op normale grootte getoond kunnen worden. Een gebruikerstest wees uit dat deze nieuwe techniek betere resultaten gaf dan de hiervoor beschreven technieken.


40

Figuur 4.13: Push-and-Pop: na de intiële aanraking van een Word-document icoon (1) wordt de takeoff area getoond met de tip icons van de compatibele pictogrammen (2). Het icoontje wordt op de Prullenbak losgelaten (3), waarna de oorspronkelijke staat hersteld wordt (4) [10].

4.3.5

Frisbee

De Fribee methode[30] biedt de gebruikers de mogelijkheid om items, die in een ander deel van het scherm liggen, te manipuleren binnen armlengte. Dit gebeurt door gebruik te maken van een telescoop, die bij de gebruiker gepositioneerd is en een target, hetgeen zich op een ander deel van het scherm bevindt. Het beeld dat onder het target ligt zal getoond worden binnen de telescoop, waarbij de gebruiker met deze afgelegen items kan interageren. Figuur 4.14(a) toont een groot scherm waarbij de persoon links een telescoop heeft, waarvan het bijbehorende target zich meer naar rechts bevindt. De foto van de auto onder het target wordt hierbij ook in de telescoop getoond. Bij deze telescoop zijn er twee ringen voorzien: de buitenste (blauwe) ring voorziet een aantal controles voor het positioneren en resizen van de telescoop zelf, terwijl de roze binnenste ring de mogelijkheid biedt om het target te verplaatsen en resizen. Hierdoor moet de gebruiker zich niet verplaatsen om het target op een andere positie te plaatsen. In figuur 4.14(b) wordt in de local space de telescoop getoond, waarin de afbeelding van de appel wordt getoond, die zich onder het target op de afgelegen positie bevindt. Door op de controls van de binnenste ring te drukken zal het target zich verplaatsen, waardoor het beeld onder de telescoop mee zal wijzigen. In de buitenste ring zijn ook een aantal openingen voorzien, de zogenaamde transfer channels. Hierdoor kunnen er items uit de directe omgeving naar de afgelegen positie verplaatst worden, door de objecten die zich buiten de telescoop bevinden, via de transfer channels naar de binnenste ring te verslepen. Door deze actie omgekeerd uit te voeren kunnen ook objecten van op afstand naar de onmiddellijke omgeving verplaatst worden.


41

Deze techniek zal vooral bij zeer grote schermen van toepassing zijn, aangezien deze onderdelen redelijke plaats innemen op het display. Verder bestaat er ook de kans op onduidelijkheid als meerdere gebruikers tegelijkertijd gebruik maken van deze techniek. Hierdoor zullen er verschillende telescopen en targets getoond worden, waarbij de connectie tussen beiden onduidelijk kan zijn. Dit is te wijten aan het feit dat de twee onderdelen niet met elkaar verbonden zijn. Het voordeel van het target is dat de andere gebruikers zien op welke plaats een persoon items bekijkt of manipuleert.

(a) Het gebruik van de Frisbee techniek op een groot (b) Verplaatsing van het target door de controls op scherm. de binnenste ring, waardoor het onderliggende beeld mee wijzigt.

Figuur 4.14: Frisbee maakt interactie op afstand mogelijk: een telescoop bij de gebruiker toont het beeld van het afgelegen target [30].

4.3.6

CoR2 Ds

CoR2 Ds[55], Context-Rooted Rotatable Draggables, is een popupwidget dat verbonden is via een transparante, elastische driehoek met het basisobject. Dit geeft de mogelijkheid om menu’s, tools of andere informatie te verbinden met items op afstand, zodat het eenvoudiger te bereiken is voor de gebruiker (zie figuur 4.15). Deze widgets kunnen vrij bewogen en geroteerd worden, zodat onderliggende informatie minder snel bedekt wordt en het door de gebruikers aan alle zijden van een interactieve tafel bekeken kan worden. Er kunnen ook verschillende CoR2 Ds vanuit hetzelfde object vertrekken, zodat meerdere personen simultaan aan hetzelfde item kunnen werken.

4.4

Gestures

Het gebruik van gestures is een veelgebruikte interactietechniek bij directe input. Dit geeft de mogelijkheid om door middel van verschillende handbewegingen acties uit te voeren op de items, zoals het verplaatsen, roteren, selecteren, kopiëren, . . . Hiervoor kunnen er meerdere


42

Figuur 4.15: CoR2 Ds: popupwidget is verbonden met een object om het item op afstand te manipuleren [55].

aanrakingspunten tegelijkertijd gebruikt worden, waardoor geavanceerdere gestures ontwikkeld kunnen worden. Bij het ontwikkelen van gestures is het belangrijk dat deze acties intu¨ıtief werken en ook vlot door de gebruikers uitgevoerd kunnen worden. Ingewikkelde en moeilijk uitvoerbare handgebaren zullen namelijk minder snel uitgevoerd worden en kunnen ook problemen opleveren bij de herkenning door het systeem. De gebruiker moet ook een bepaalde vrijheid krijgen bij het uitvoeren, aangezien het exact behouden van een bepaald gebaar niet altijd eenvoudig vol te houden is. Hieronder volgt de bespreking van een aantal gestures bij verschillende applicaties.

4.4.1

Tabletop publishing prototype

Een voorbeeldapplicatie is ontwikkeld waarbij de gebruikers de mogelijkheid krijgen om bij een digitale tafel documenten te organiseren, selecteren, aantekeningen te maken, en andere acties uit te voeren. Hoewel het huidige systeem gebruik maakt van een stylus, kunnen ook de vingers als input gebruikt worden [71]. • Annotate Om aantekeningen te kunnen maken, dient de gebruiker eerst twee vingers op de tafel te plaatsen, waardoor het gesture geregistreerd wordt. Vervolgens kan er met de pen geschreven worden, zolang de hand of stylus contact hebben met het oppervlak. • Wipe Het verwijderen van de aantekeningen gebeurt door eerst een deel van de hand op het oppervlak te leggen, waarna de gebruiker de onderliggende notities kan verwijderen door erover te wrijven, eender welke vorm er gebruikt wordt. De aantekeningen zullen geleidelijk aan onder de hand verdwijnen door steeds transparanter te worden. • Cut/Copy-n-Paste Dit gesture (zie figuur 4.16) start door met minimum drie vingers een deel van een


(a)

43

(b)

(c)

(e)

(f)

(d)

Figuur 4.16: Het Copy-n-Paste gesture kopieert delen van een document en plakt het op een nieuwe positie [71].

document te selecteren (a), waarna een verplaatsbare rechthoek de grootte van het gebied aanduidt (b). Om te kopiëren tikt de gebruiker met de stylus op een open vlak (c), terwijl het document zelf aangetikt moet worden door de stylus om te knippen. Het geselecteerde deel van het document zal vervolgens de bewegingen van de pen volgen. Om te plakken dient de gebruiker eerst de hand los te laten van de selectiebox (e) en kan vervolgens de stylus opheffen om het plakken door te voeren (f ). • Pile-n-Browse Dit gesture (zie figuur 4.17) wordt geactiveerd door twee handen op het oppervlak te plaatsen, waartussen een cirkel zal verschijnen met de documenten die deel uitmaken van de stapel (a). De handen kunnen vervolgens verplaatst worden om de cirkel uit te breiden of in te krimpen. Een stapel wordt gecreëerd door beide handen snel naar elkaar toe te bewegen (b). Door een stapel items browsen kan door het snel uit elkaar bewegen van twee handen, waarbij de afstand tussen de handen de spreiding van de documenten bepaalt (c,d).

4.4.2

RoomPlanner

RoomPlanner[70] is een 2D applicatie waarbij twee personen, die tegenover elkaar aan een interactieve tafel zitten, meubels in een kamer kunnen plaatsen. Dit kunnen ze door multitouch gestures uit te voeren, waarbij de gebruikers voor zich een private ruimte hebben met in het midden de publieke kamer. • 1 vinger Een object wordt geselecteerd door het met de vinger éénmaal aan te raken, waarbij


(a)

(b)

44

(c)

(d)

Figuur 4.17: Het Pile gesture stapelt items door beide handen snel naar binnen te bewegen [71].

het object ook de verplaatsing van de bijbehorende vinger volgt. Een dubbele tik met een vinger zorgt ervoor dat een contextgevoelig pie menu getoond wordt, waarbij een item na het bewegen in de desbetreffende richting en vervolgens opheffen geselecteerd wordt. • 2 vingers Door gebruik te maken van twee vingers (al dan niet van dezelfde hand) is het mogelijk om een geselecteerd object te roteren. Hierbij bepaalt de eerste vinger het middelpunt van de rotatie, terwijl de tweede vinger de rotatiehoek bepaalt. Verder is het ook mogelijk om een object te vergroten, waarbij de factor bepaald wordt door de afstand tussen de twee vingers. • 1 hand Als de gebruiker met een vlakke hand het oppervlak aanraakt, kan de kamer geroteerd worden door de hand te verplaatsen. Wanneer het contact met de tafel verbroken wordt, zal de kamer naar de oorspronkelijke positie hersteld worden. Het gebruik van een verticale hand geeft de gebruiker de mogelijkheid om, op een natuurlijke manier, items naar een bepaalde kant te vegen (figuur 4.18(a)). • 2 handen Met twee verticale, rechtop geplaatste handen is het mogelijk om items naar elkaar toe te verplaatsen, of van mekaar weg te verwijderen. Met twee handen die beide een hoek naar binnen maken, is het mogelijk om een deel van de kamer te kopiëren naar de individuele ruimtes (figuur 4.18(b)).

4.5

Organisatie & management

Deze sectie bespreekt een aantal technieken die het mogelijk maken om verschillende items op het oppervlak te beheren. Hierbij speelt het doorgeven aan andere gebruikers, net als het vrijmaken van plaats een grote rol.

4.5.1

Storage bins

Een methode om items op te slaan, te beheren en te delen, is door gebruik te maken van Storage Bins[51]. Het principe van deze techniek is gebaseerd op een observatie van gebrui-


45

(a) Het wegvegen van items die de hand raken. (b) Het kopiëren van items tussen de hoekvormige handen.

Figuur 4.18: RoomPlanner voorziet een aantal gestures om meubels in een ruimte te manipuleren [70].

kers aan een echte tafel. Hierbij was namelijk opgevallen dat de personen fysieke documenten vaak in stapels ophoopten en deze stapels verplaatsten. Daarom zijn er widgets ontwikkeld die als containers dienen en waaraan gebruikers items kunnen toevoegen of uit verwijderen. Objecten die toegevoegd zijn, worden automatisch verkleind via een animatie, om zo meer plaats te winnen, zoals figuur 4.19(b) toont. Aangezien informatie in een container samengevoegd is, is het mogelijk deze eenvoudig te verplaatsen en zo aan anderen door te geven. Om meer ruimte te creëren op de interactieve tafel kunnen deze widgets ook ingeklapt worden (zie figuur 4.19(c)), waarna ze uiteraard ook weer uitgespreid kunnen worden over het oppervlak.

(a) Een verzameling foto’s.

(b) Dezelfde verzameling foto’s, nu (c) Een Storage Bin die ingeklapt toegevoegd aan een Storage Bin. is.

Figuur 4.19: Storage Bins zijn containers waaraan items toegevoegd kunnen worden om eenvoudiger op te slaan en door te geven [51].

4.5.2

Interface Currents

Interface Currents[25] zorgen ervoor dat items op een eenvoudige manier aan andere personen aan de tafel beschikbaar gesteld kunnen worden. Het principe van deze techniek is gebaseerd


46

op de Lazy Susans4 en de bagagebanden in een luchthaven. Bij deze Interface Currents kan de gebruiker items in de containers plaatsen, waardoor deze door de stroming be¨ınvloed zullen worden. Deze widgets hebben twee fundamentele eigenschappen: de stroming, die een specifieke richting en snelheid heeft en het pad, waarbij de grenzen de vorm en de grootte aanduiden. De container kan naargelang het soort grens, twee types aannemen. Als er enkel aan de buitenzijde een grens voorzien is, spreekt men van een pool (figuur 4.20(a)), terwijl als aan de binnen- en buitenkant grenzen voorzien zijn, men het een stream (figuur 4.20(b)) noemt. In beide gevallen zullen de items automatisch naar de buitenste rand georiënteerd worden, om ervoor te zorgen dat deze goed leesbaar zijn voor de gebruikers. Op de randen zijn een aantal controlepunten voorzien, waarbij na het aanraken een FlowMenu (zie sectie 4.7.4) getoond wordt, hetgeen opties geeft om de vorm te wijzigen. Net zoals bij de Storage Bins, zullen de items verkleind worden als deze in de stroom geplaatst worden. Aangezien bij een stream de vorm niet overal gelijk hoeft zijn, zal het formaat dynamisch aangepast worden. De stroming zelf kan door de gebruiker aangepast worden door binnenin in de gewenste richting een aanraking uit voeren, waarbij de lengte van dit gesture de snelheid bepaalt. Deze techniek heeft een drietal doelen. Enerzijds wil deze methode een groepsruimte voorzien, hetgeen uit een gedeelde ruimte op het oppervlak bestaat en beschikbaar is voor alle gebruikers. Anderzijds kunnen kleine of gedeeltelijk zichtbare containers gebruikt worden als persoonlijke opslagplaatsen, waarin items bijgehouden kunnen worden zonder veel plaats in te nemen. En tenslotte bieden deze Interface Currents ook de mogelijkheid om items te delen met alle gebruikers aan de interactieve tafel door bijvoorbeeld containers door te geven.

(a) Een pool heeft enkel een buiten- (b) Bij een stream is zowel een grens. binnen- als buitengrens voorzien waartussen objecten automatisch ‘stromen’.

Figuur 4.20: Interface Currents zijn containers waarin items door de stroming verplaatst worden [25]. 4

Draaiplateau dat op tafel geplaatst wordt met items erop (zoals bijvoorbeeld eten in een restaurant) om het eenvoudiger te verdelen onder de personen.


4.5.3

47

Mobile spatial tools

Verschillende technieken verwachten dat de items naar bepaalde posities versleept worden om er een actie op uit te voeren, hetgeen bij deze volgende tools[27] niet het geval is. Hierbij worden er tools gebruikt die naar de objecten zelf verplaatst kunnen worden en die vervolgens de spatiale eigenschappen van de omliggende objecten aanpassen. • Motion tool Als het oppervlak bedekt ligt met objecten, kan deze tool ervoor zorgen dat de items die rondom deze tool liggen naar de zijkanten verplaatst worden, om zo meer lege ruimte te creëren. Deze actie zou veel tijdrovender zijn als de items apart geselecteerd en verplaatst zouden moeten worden. Figuur 4.21(b) toont het resultaat nadat de motion tool de items naar de zijkanten heeft verplaatst. • Piling tool De piling tool geeft de mogelijkheid om de objecten die binnen een bepaalde straal liggen samen te voegen op een stapel, waardoor opnieuw plaats gewonnen kan worden (figuur 4.21(c)). • Magnification tool Deze tool voorziet een lokaal vergrootglas, waardoor objecten met meer detail bekeken kunnen worden. Het object, dat aangeraakt wordt door de vinger (of pen) wordt hierbij groter weergegeven. • Alignment tool De alignment tool geeft de gebruiker de mogelijkheid om items die in een bepaald gebied liggen tijdelijk te heroriënteren, zoals getoond wordt in figuur 4.21(d). • Motion orientation tool Terwijl de vorige tool de items tijdelijk heroriënteert, zorgt deze tool ervoor dat de objecten permanent uitgelijnd worden. • Radial orientation tool Deze tool kan de objecten zowel inwaarts (figuur 4.21(e)), of uitwaarts (figuur 4.21(f)) oriënteren. De eerste variant is geschikt voor groepswerk, terwijl de tweede meer geschikt is voor het individueel bekijken van objecten.

4.5.4

ZoomScapes

ZoomScapes[20] is een mechanisme waarbij elk punt op het oppervlak een bepaalde schaalfactor heeft. Dit geeft de mogelijkheid om items te organiseren op het scherm en objecten die minder belangrijk zijn eventueel te verkleinen, terwijl de belangrijke items in het groot weergegeven worden. Als de gebruiker een item verplaatst over het scherm, zal dit item geschaleerd worden naargelang de bijbehorende factor. Aangezien het mogelijk is dat een object zich in meerdere regio’s tegelijkertijd bevindt, is er geopteerd om het aanraakpunt van de vinger of de pen te gebruiken om de bijbehorende factor te bepalen. Het verplaatsen van een groep items is uiteraard complexer, aangezien deze groep niet aanzien dient te worden als één geheel. Daarom wordt de schaal van elk element bekeken samen met de geometrie van de groep. Figuur 4.22 toont een voorbeeld waarbij de dikke lijn de grens van de 100%-factor aanduidt


(a) Een items.

verzameling (b) Motion tool: ver- (c) Piling tool: plaatst items naar de zij- items. kant.

48

stapelt (d) Alignment tool: oriënteert items tijdelijk.

(e) Radial orientation (f) Radial orientation tool: oriënteert items tool: oriënteert items inwaarts. uitwaarts.

Figuur 4.21: Mobile spatial tools worden naar de items verplaatst waarna spatiale eigenschappen aangepast worden [27].

en het gebied boven de dunne lijn 25% als factor heeft. Wanneer het item van de groep in een schaalregio komt, zal de grootte van het item aangepast worden, samen met de afstand tussen het item en het contactpunt. In deze afbeelding tonen de lichte items waar de objecten zich normaal zouden bevinden, terwijl de grijze items hun grootte aan het systeem hebben aangepast.

4.5.5

Rotatie & translatie

Bij interactieve tafels speelt de oriëntatie van een document vaak een grote rol, aangezien de gebruikers zich hierbij aan verschillende zijden van de tafel kunnen bevinden, een probleem dat zich bij verticale opstellingen niet voordoet. Hiernaast zorgt de oriëntatie er ook voor dat de eigendom van het item duidelijk is voor de andere gebruikers. Verschillende rotatie- en translatietechnieken zijn ontwikkeld om ervoor te zorgen dat de gebruikers de items dynamisch kunnen aanpassen [23]: • Expliciete specificatie Hierbij voeren de gebruikers expliciete commando’s uit om de positie of de oriëntatie van items te bepalen. Dit kan door menusecties, bepaalde gestures, widgets, . . . RoomPlanner (zie sectie 4.4.2) maakt bijvoorbeeld gebruik van een parameter adjustment widget, waardoor de geselecteerde objecten geroteerd kunnen worden (zie figuur 4.23).


49

Figuur 4.22: ZoomScapes: de grootte van meerdere items wordt aangepast naargelang de onderliggende schaalfactor (lichte items tonen de normale posities van de items, terwijl donkere items de aangepaste grootte weergeven) [20].

• Automatische ori¨ entatie Rotatie en translatie worden hierbij in één actie uitgevoerd, waarbij de rotatie automatisch berekend wordt door het systeem. Zo is het bijvoorbeeld mogelijk dat het item altijd automatisch naar de rand van de tafel gedraaid wordt, wanneer de gebruiker het object verplaatst. Het nadeel van deze methode is dat de oriëntatie niet meer individueel aangepast kan worden, hetgeen in bepaalde gevallen nog gewenst kan zijn. Het voorzien van een aparte rotatiefunctie kan dit verhelpen. DiamondSpin[58] is een toolkit die gebruik maakt van deze techniek. • Ge¨ıntegreerde rotatie en translatie In plaats van de automatische oriëntatie kan ook een natuurlijk model toegepast worden, zoals de Rotate’N Translate methode[34], waarbij slechts één contactpunt gebruikt wordt om het object te manipuleren. Het aanraakpunt wordt bij deze techniek gecombineerd met de bewegingsvector. Als dit dan een gebalaceerde beweging creëert, wordt het object enkel verplaatst, zoals getoond wordt in figuur 4.24(a). Als dit daarentegen ongebalanceerd is, zal het item geroteerd worden totdat een balans gevonden is, zoals figuur 4.24(b) weergeeft. • Rotatie en translatie met twee contactpunten Als laatste type is het mogelijk om rotatie en translatie te integreren door gebruik te maken van twee contactpunten. Voor de rotatie wordt de eerste vinger als middelpunt aanzien, terwijl de andere vinger de hoek bepaalt. Deze tweede vinger kan eventueel ook gebruikt worden om het object te vergroten of verkleinen. De translatie wordt daarentegen wel nog steeds uitgevoerd door enkel de eerste vinger te verplaatsen. Bij het roteren of verplaatsen van objecten kan er gebruik gemaakt worden van snapping. Dit is een methode waarbij het eenvoudiger wordt om items te aligneren door bijvoorbeeld met bepaalde intervallen te werken. Hierbij worden bijvoorbeeld enkel 0◦ , 45◦ , 90◦ , . . . gebruikt bij de rotatie. Ook kunnen de objecten op een (onzichtbaar) grid uitgelijnd worden. Hierdoor wordt uiteraard een deel van de vrijheid ingeperkt.


50

Figuur 4.23: Via het parameter adjustment widget kan de gewenste oriëntatie ingesteld worden [70].

(a) Een gebalanceerde beweging zorgt voor een (b) De ongebalanceerde beweging zorgt ervoor dat translatie zonder rotatie. een rotatie uitgevoerd wordt todat het terug gebalanceerd is.

Figuur 4.24: Rotate’N Translate combineert rotatie en translatie in één actie [34].

De keuze van de juiste interactietechniek hangt in grote mate af van de taak die uitgevoerd dient te worden, waarbij op te merken valt dat geen enkele techniek voor alle mogelijke acties geschikt is. Natuurlijke acties zijn het meeste gepast als er groepswerk is, waarbij de automatische oriëntatie of de Rotate’N Translate methode gebruikt kunnen worden. Om meer preciezere taken uit te voeren, kan beter een beroep gedaan worden op technieken zoals de onafhankelijke rotatie en translatie. Het gebruik van snapping kan hierbij ook van pas komen. Een groter probleem zal opduiken wanneer een applicatie beide types moet ondersteunen. Verschillende interactietechnieken kunnen dan het beste resultaat geven, zodat de gebruiker zelf kan afwisselen naargelang de uit te voeren actie.

4.6

Interactie van op afstand

Naast directe input, wordt er bij bepaalde digitale schermen ook interactie voorzien van op afstand. Zo is het mogelijk om met behulp van een laser pointer te interageren of door spraak bepaalde commando’s te geven. Deze sectie bespreekt aan aantal van deze mogelijkheden.

4.6.1

Laser pointer interactie

Om te interageren met een laser pointer op een scherm, wordt er gebruik gemaakt van camera’s, waar de beelden verwerkt worden door beeldverwerkingsalgoritmen [44, 31, 11, 28, 14]. Hierdoor kan de exacte positie op het scherm bepaald worden en wordt de pointer gebruikt om normale muisacties uit te voeren. De Interactive DataWall (zie sectie 3.2.2) laat zo gebruikers interageren met de interfacewidgets, zoals buttons en scrollbars. Ook de Interactive


51

Learning Wall (zie sectie 3.2.5) geeft de gebruiker de mogelijkheid om op afstand input te geven. Hierbij wordt het bewegen van de laser aanzien als het lokaliseren, waarna het deactiveren en activeren van de laser binnen de seconde een enkele muisklik veroorzaakt. Het herhalen van deze actie wordt verwerkt als een dubbelklik. Het is uiteraard wel van belang dat bij het opnieuw activeren van de laser, dit op ongeveer dezelfde positie gebeurt, hetgeen moeilijker op afstand is, aangezien een kleine wijziging bij het vasthouden van de laser pointer een grotere verplaatsing op het scherm veroorzaakt.

4.6.2

Spraakherkenning

Een andere methode om commando’s te geven, is spraakherkenning, zoals de Interactive DataWall (zie sectie 3.2.2) ondersteunt. De gebruikers kunnen hierbij met draadloze micro’s spraakcommando’s invoeren, waarna de geassocieerde acties in de grammar uitgevoerd worden. Deze toepassing werkt onafhankelijk van de gebruiker, zodat het systeem niet getraind moet worden op de stem van deze persoon. Het gebruik van een draadloze micro geeft de personen ook de mogelijkheid om vrij rond te bewegen. Bij het gebruik van spraakherkenning dient er rekening gehouden te worden met het opvangen van de spraak. Vooral als er samengewerkt wordt, zullen er geluiden zijn die best genegereerd worden door het systeem, aangezien er anders ongewenste acties uitgevoerd kunnen worden. Het indrukken van een knop of het werken met start/stop commando’s kan een eventuele oplossing bieden. Hoewel de Interactive DataWall dit niet vereist, hebben bepaalde spraaksystemen wel nood aan training van de stem van de gebruiker, hetgeen als nadeel aanzien kan worden. In combinatie met andere technieken kan spraakherkenning een nuttige aanvulling zijn, bijvoorbeeld om snel tussen verschillende modes te veranderen.

4.6.3

Vision-tracked multi-finger gestural input

Via een touchpad interageren met een scherm op afstand is een methode waarbij de gebruiker op zijn/haar stoel kan blijven zitten en niet telkens naar het display dient te lopen [38]. Deze techniek maakt gebruik van een klein zwart rechthoekig oppervlak, waarbij twee camera’s de gestures van de vingers en handen opvangen. Bij dit touchpad is ook een unieke identifier voorzien, waardoor het mogelijk wordt om met verschillende touchpads samen te werken. Om te interageren wordt het touchpad in twee helften verdeeld (zie figuur 4.25), waarbij de linkerhelft gemapt wordt op de 4 hoeken van het grote scherm. Als de gebruiker met een vinger van de linkerhand tikt, zal een beperkt gebied op het display geselecteerd worden, hetgeen getoond zal worden door een transparante rechthoek. De rechterhand kan vervolgens acties binnen dit gebied met meer precisie uitvoeren op de rechterhelft van het touchpad. Door de linkervinger te verplaatsen, zal het geselecteerde gebied zich ook herpositioneren, waardoor de rechterhand op andere posities kan interageren met de items. Deze techniek kan handig zijn bij het verplaatsen van een object over een grote afstand, aangezien hier slechts een kleine verplaatsing met de linkervinger voor nodig is. Het selecteren van een item gebeurt door met een rechtervinger te tikken. Om meerdere items


52

te selecteren, kan er gebruikt gemaakt worden van het grabbing gesture met de rechterhand (van een open hand een vuist maken), waarbij het object dat het dichtste bij de hand gesitueerd is, toegekend wordt aan een vinger en zal verdwijnen van het scherm. Als de hand vervolgens weer open op het touchpad wordt gelegd, zullen de items bij elke vinger weergegeven worden, die na het tikken van de desbetreffende vinger op de huidige positie losgelaten worden. Verder zijn er ook gestures voorzien om het geselecteerde gebied te vergroten, te roteren of in te zoomen.

(a) De mapping van de linkerhelft van (b) De mapping van de rechterhelft van het touchpad op het volledige scherm. het touchpad op een selectie van het scherm.

Figuur 4.25: Vision-tracked multi-finger gestural input: via een touchpad interageert de gebruiker op afstand [38].

4.7

Menu’s & speciale iconen

De traditionele menu’s en toolbars staan vaak op een vaste positie van de applicatie en zijn slechts in één richting beschikbaar. Deze eigenschappen kunnen voor problemen zorgen bij interactie op digitale oppervlakken. Zo kunnen bij een tafel de gebruikers zich aan verscheidene zijden bevinden, waardoor ze moeite kunnen hebben met het lezen van de menu-items. Ook is het widget vaak niet voor alle gebruikers toegankelijk, als deze enkel op een vaste plaats gepositioneerd is. Ook bij een digitale wand kan de positie bovenaan het scherm voor problemen zorgen om te bereiken. Daarom dienen de menu’s zo flexiebel mogelijk ontworpen te worden, zodat de gebruikers de mogelijkheid krijgen om deze te verplaatsen en roteren naar keuze. Een ander probleem dat opduikt bij interactieve oppervlakken is het ontbreken van de rechtermuisklik. Hierdoor dient het oproepen van een contextmenu op een andere manier te gebeuren, zoals bijvoorbeeld het uitvoeren van een dubbele tik op een geselecteerd object. Deze sectie bespreekt een aantal soorten menu’s voor samenwerking, samen met speciale iconen die meer functionaliteit dan de traditionele ondersteunen.


4.7.1

53

Menu’s voor samenwerking

Menu’s en toolbars zijn populaire widgets, maar kunnen problemen geven als er met meerdere personen samengewerkt wordt. Voor digitale tafels treedt vooral het aspect van oriëntatie en afstand een rol. De toolkit DiamondSpin[58, 57] voorziet vier soorten menu’s om deze problemen te vermijden: • Eén gedeelde menubalk, die door een vingerbeweging verplaatst kan worden naar eender welke positie op het scherm. De gebruikers kunnen dit widget aan elkaar doorgeven. Verder kan deze menu geroteerd worden, zodat de gebruikers aan alle zijden van de tafel de items kunnen lezen. • Op een gedeeld oppervlak kunnen gebruikers vaak eenvoudig aan de menubalk van de andere gebruikers, hetgeen niet altijd gewenst is. Daarom is er de mogelijkheid voorzien om een menubalk te locken, zodat enkel de bijbehorende gebruiker er gebruik van kan maken. • Meerdere menu’s toestaan is een optie om ervoor te zorgen dat meerdere gebruikers makkelijker acties kunnen uitvoeren. Hierbij dient wel aandacht besteed te worden aan het gebruik, want als meerdere gebruikers een actie proberen uit te voeren op hetzelfde item kunnen er problemen optreden. Het ontoegankelijk maken voor de anderen kan er bijvoorbeeld voor zorgen dat slechts één gebruiker het item kan manipuleren. • Verschillende menuversies kunnen gebruikt worden, waarbij bijvoorbeeld één gebruiker toegang heeft tot alle opties van de menubalk, terwijl andere gebruikers slechts een deel van de acties kunnen uitvoeren.

4.7.2

Pie menu

Pie menu’s zijn cirkelvormige menu’s, die gepositioneerd worden bij de vinger die het widget heeft opgeroepen (zie figuur 4.26). Deze methode heeft als voordeel dat minder plaats op het scherm ingenomen wordt dan bij vaste menu’s of toolbars [70]. Ook zorgen deze menu’s ervoor dat de gebruiker zijn hand en focus niet te zeer hoeft te verplaatsen, aangezien ze op de plaats van de hand getoond worden. Het nadeel van deze manier van tonen is wel dat het mogelijk is dat de hand eventueel items bedekt. Minder belangrijke (of eventueel geen) items kunnen daarom beter aan de onderkant voorzien worden, om dit euvel te vermijden. Vergeleken met lineaire menu’s hebben deze menu’s ook het voordeel dat ze tijd besparen, aangezien alle items even ver van het middelpunt verwijderd zijn (Fitt’s Law) [8]. Het selecteren van een menu-item kan op twee manieren uitgevoerd worden: enerzijds is het mogelijk om de vinger (of pen) naar het bijbehorende deel van de schijf te verslepen in een continue actie, anderzijds kan er een tik uitgevoerd worden op het desbetreffende deel.

4.7.3

Gedrics

Gedric[16] staat voor GEsture DRiven ICon en heeft als doel de interactie te versnellen. Deze techniek biedt meer functionaliteit aan iconen dan een gewone tik, aangezien er anders vaak


54

Figuur 4.26: Pie menu bestaande uit 6 opties.

een groot aantal van deze pictogrammen aanwezig dient te zijn. Een gedric vormt een combinatie van iconen, uitklapmenu’s en gestures. Iconen worden gebruikt aangezien deze niet veel schermruimte nodig hebben en eenvoudig te leren zijn. Uitklapmenu’s hebben dan weer als voordeel dat ze functionaliteit on demand bieden en gestures handelen als shortcuts om de functionaliteit uit te voeren. De drie basisgestures, die bij alle gedrics herkend worden, worden getoond in figuur 4.27, waarbij het vierkant het icoontje representeert en de beweging van de pen door middel van een vloeiende lijn/bol wordt weergegeven. Voor de onervaren gebruikers bestaat er de mogelijkheid om extra informatie op te roepen via het helpmenu, terwijl de meer ervaren personen onmiddellijk de gestures kunnen uitvoeren (zoals het gebruik van shortcuts). Figuur 4.28 toont enkele gestures die behoren tot de Layout gedric, om grafische objecten te ordenen.

(a) Gedric activeren: tik uit- (b) Gedric openen: stroke voeren. van binnen naar buiten waarna een uitklapmenu wordt getoond.

(c) Helpmenu tonen.

Figuur 4.27: Basis gedric gestures [16].

Deze gedrics zijn ontwikkeld voor het gebruik van iconen, maar dit kan uiteraard ook uitgebreid worden naar objecten op de interactieve tafel of wand. Terwijl de voorbeelden gebruik maken van een stylus, kunnen vingers deze gestures ook uitvoeren. Hierbij is het dan wel van belang dat de objecten voldoende groot zijn, zodat voldoende geavanceerde gestures herkend kunnen worden.


(a) Selectie aan grid (b) Selectie zigzaggend (c) Selectie snappen. aligneren. aligneren.

55

verticaal (d) Selectie horizontaal aligneren.

Figuur 4.28: Layout gedric om grafische objecten te orderen [16].

4.7.4

FlowMenu

Een FlowMenu[21] is een radiaal menu dat bestaat uit 8 octanten, met in het midden een rustgebied. De gebruiker start met de pen (of vinger) vanuit het rustgebied en selecteert vervolgens een top-level menu-item, door het bijbehorende octant te betreden. Vervolgens zullen er nieuwe submenu’s verschijnen rond dat item, waarnaar de penbeweging dan verplaatst kan worden om een nieuwe selectie te maken. De overige octanten zullen dan grijzer weergegeven worden, om de aandacht naar de nieuwe items te verleggen. Om een diepere hierarchie toe te staan is het mogelijk om de menu’s in elkaar in te bouwen, zodat de items in de derde stap bijvoorbeeld weer in de hoofdoctanten verschijnen. Figuur 4.29 toont een voorbeeld om een zoomniveau te kiezen. In de eerste fase kiest de gebruiker voor het octant Item, waarna nieuwe opties getoond worden en met een vloeiende beweging Zoom wordt geselecteerd, gevolgd door de presentatie van de mogelijke zoomfactors. In dit voorbeeld is duidelijk te zien dat de acties uit een vloeiende beweging bestaan, hetgeen onthouden kan worden door ervaren gebruikers. Net zoals bij de pie menu’s is het bij deze techniek ook mogelijk dat de hand delen bedekt.

(a) De pen beweegt over het octant (b) Nieuwe items worden getoond, (c) De beweging gaat naar de geItem. waarbij Zoom wordt geselecteerd. wenste zoomfactor.

Figuur 4.29: Het gebruik van een FlowMenu om in te zoomen [21].


4.8

56

Tekstinvoer

Het invoeren van tekst kan op interactieve tafels en wanden een moeilijke opgave zijn. Zo zal de invoer via vingers soms schokkerig zijn en moeilijk te lezen voor anderen. Sommige opstellingen maken gebruik van een fysiek toetsenbord, zoals LiveBoard[15], maar dit heeft uiteraard een aantal nadelen. Hierdoor worden er verscheidene invoerapparaten gebruikt, hetgeen niet altijd gewenst is. Ook kan dit als nadeel hebben dat slechts één gebruiker op hetzelfde moment het toetsenbord kan gebruiken, tenzij er meerdere voorzien zijn. Het toetsenbord kan eventueel ook virtueel weergegeven worden, maar hierdoor kan een deel van het scherm bedekt worden. Ook werkt dit niet op zo’n natuurlijke manier, aangezien de feedback die een gebruiker krijgt bij een echt toetsenbord niet aanwezig is. Zeker bij digitale wanden kan een virtueel toetsenbord zeer ongemakkelijk zijn, aangezien de gebruiker zijn handen dan rechtop moet gebruiken. Als er meerdere devices gebruikt worden, kan eventueel de Pick-andDrop methode toegepast worden om tekst, die bijvoorbeeld eerst op een PDA gevormd is, te verplaatsen naar het scherm; maar ook hierbij is weer het nadeel dat de focus telkens verlegd wordt [46]. Naast gewone directe invoer, is het eventueel ook mogelijk om via spraak teksten in te voeren. Dit vraagt vaak enige training en de verwerking ervan is niet altijd perfect.

4.8.1

Sticky Notes

Tekstinvoer door aanraking met een pen of vinger gebeurt vaak op lage resolutie, terwijl het scherm hoge resolutie weergeeft. Hierdoor kunnen de lijnen, die door een vinger ingevoerd zijn, vaak dik weergegeven worden. Sticky Notes[26] is een methode waarbij de gebruikers aantekeningen kunnen maken op grote notes (figuur 4.30(a)), die vervolgens verkleind zullen worden (figuur 4.30(b)), aangezien deze invoer niet op die invoerresolutie getoond hoeft te worden. Door gebruik te maken van speciale lenzen is het dan mogelijk om de tekst op deze notes later te vergroten, indien nodig.

(a) Tekstinvoer met pen of vinger op in- (b) Scherm op hoge resolutie, met vervoerresolutie. kleinde notes.

Figuur 4.30: Sticky Notes toont aantekeningen op lagere resolutie [26].


4.8.2

57

Karakterherkenning

Karakterherkenning kan ervoor zorgen dat via gestures de karakters afzonderlijk ingevoerd worden in het systeem. Het nadeel van gewone karakters invoeren is dat deze vaak uit meerdere strokes bestaan, hetgeen moeilijk te detecteren kan zijn. Daarom zijn er bepaalde alfabets ontwikkeld die nieuwe strokes koppelen aan het huidige alfabet. Deze strokes bestaan uit continue gestures, zodat de gebruiker snel de tekst kan invoeren. Een voorbeeld van deze technologie is Unistrokes[18], waarbij de meest gebruikte karakters (e, a, t, i & r) bestaan uit een enkelvoudige stroke. Figuur 4.31 toont dit alfabet, waarbij opvalt dat de gestures niet altijd even duidelijk gekoppeld zijn aan de letters uit het gewone alfabet, waardoor de gebruiker deze strokes eerst zal moeten instuderen. Als antwoord hierop is een andere technologie ontwikkeld, Graffiti[7], waarbij de strokes dichter aansluiten bij het gewone alfabet, maar de strokes wel nog steeds uit een continue beweging bestaan. De gebruikers moeten hierbij nog steeds deze nieuwe gestures leren, maar zullen het eenvoudiger kunnen mappen [37].

Figuur 4.31: Karakterstrokes van Unistrokes en Graffiti [37].

4.9

Conclusies

In dit hoofdstuk zijn een aantal technieken besproken waarmee de gebruikers eenvoudiger kunnen interageren met digitale oppervlakken. Deze technieken zijn nodig aangezien interactieve tafels en wanden andere vormen van interactie hebben dan normale computersystemen. Het belangrijkste aspect hierbij is dat de vinger of stylus vaak direct contact heeft met het oppervlak. Om het probleem van precieze selectie op te lossen kan er een beroep gedaan worden op speciale widgets, zooming methoden, een offset bij de vinger of het uit elkaar schuiven van objecten. Omdat gebruikers vaak items moeten manipuleren die uit het fysieke bereik liggen, kunnen technieken gebruikt worden waarbij de objecten naar de pointer gebracht worden, de items naar een andere positie gegooid kunnen worden, via een stylus informatie van de ene positie naar de andere verplaatst kan worden door ze op te nemen, door middel van een telescoop andere delen van het oppervlak te kunnen bekijken of door gebruik te maken van CoR2 Ds. Gestures worden veelvuldig gebruikt, waarbij het belangrijk is dat deze zo intu¨ıtief mogelijk zijn en de gebruikers niet overladen worden met een grote hoeveelheid aan mogelijkheden. Organisatie van de informatie op het oppervlak is tevens van belang. Speciale technieken zoals Storage Bins, Interface Currents, mobile spatial tools, ZoomScapes en rotatie- & translatietechnieken geven de gebruiker de mogelijkheid om de items te beheren. Interactie op afstand kan dan weer handig zijn als er met grote schermen gewerkt wordt, waarbij er een beroep gedaan kan worden op laser pointers, spraakherkenning en multi-finger gestural input op een touchpad. De traditionele menu’s en toolbars worden op een digitaal scherm beter


58

gedupliceerd waarbij ze voldoende flexiebel zijn of vervangen door andere oplossingen zoals pie menu’s, FlowMenu’s en gedrics. Tenslotte is ook tekstinvoer besproken, waarbij Sticky Notes en karakterherkenning aangehaald worden. De keuze van de juiste interactietechniek hangt in grote mate af van de opdracht, die de gebruiker dient uit te voeren met de applicatie. Vaak zijn er verschillende varianten nodig, want op het ene moment is bijvoorbeeld meer detail nodig dan het andere moment. Het inbouwen van meerdere technieken, waartussen de gebruiker kan wisselen, biedt hiervoor de beste mogelijkheid.

Hoofdstuk 5

Conclusies In de literatuurstudie van deze thesis is er aandacht besteed aan digitale oppervlakken, waarbij er verschillende technologieën besproken zijn. Zo is het mogelijk dat de posities van aanrakingspunten van de vingers, handen, (digitale) pennen of objecten door camera’s opgevangen worden, die zowel boven als onder het oppervlak bevestigd kunnen worden. Drukgevoelige oppervlakken kunnen ook gebruikt worden, waarvoor bijvoorbeeld elektrische capaciteit of infrarode reflecties toegepast worden. Afhankelijk van de gebruikte technologie kunnen meerdere gebruikers tegelijkertijd werken, single- of multi-touch interacties uitvoeren of objecten laten herkennen door tags. Identificatie van de gebruikers kan er tevens voor zorgen dat meerdere gebruikers op hetzelfde moment meerdere aanrakingen kunnen uitvoeren, hetgeen een voordeel is als er samengewerkt wordt. Het weergeven van het computerdisplay kan ofwel gebeuren door één of meerdere projectoren die aan de boven- of onderkant (voor- of achterkant) bevestigd zijn, of door gebruik te maken van LCD-schermen. Deze laatste methode heeft als groot nadeel dat de randen van deze schermen de continu¨ıteit bij interactie kunnen verbreken. Bij de digitale wand zijn ook nog opstellingen besproken waarbij verschillende gebruikers met hun laptop met een groot scherm verbonden zijn en hierdoor de controle van de hoofdcomputer kunnen opvragen of zelf hun scherm kunnen tonen. Gebruikers hebben andere werken interactietechnieken bij de horizontale dan de verticale opstellingen. Zo zijn de digitale tafels vooral geschikt om samen te werken met een beperkte groep, waarbij het eenvoudig is om gezamelijk aan items te werken en deze door te geven aan de andere groepsleden. De digitale wanden daarentegen zijn meer geschikt voor het presenteren van informatie waarbij er ge¨ınterageerd kan worden met de getoonde items. Het samenwerken bij deze toepassingen kan sneller voor problemen zorgen, aangezien de gebruikers mekaar voor de voeten kunnen lopen, hetgeen bij de horizontale variant niet voorkomt. Deze digitale oppervlakken hebben andere vormen van interactie dan de traditionele computersystemen, waardoor er nood is aan speciale technieken. Zo is er bij de meeste technologieën direct contact met de vinger of stylus op het oppervlak, waardoor het uitvoeren van pixelnauwkeurige acties moeilijk kan zijn. Om dit probleem op te lossen kan er een beroep gedaan worden op speciale widgets waarbij het selectiepunt ingesteld kan worden met precisie, zoo-

59

Hoofdstuk 5. Conclusies

60

ming methoden en een vaste of variabele offset bij de vinger. Als objecten dicht bij elkaar gelegen zijn kan er een methode toegepast worden om deze uit elkaar te schuiven om zo een eenvoudigere selectie uit te voeren. Een ander belangrijk aspect is de afstand. Digitale wanden kunnen soms enkele meters lang zijn en ook bij de horizontale oppervlakken moeten de gebruikers soms items manipuleren die buiten het fysieke bereik liggen. Hiervoor zijn er technieken voorzien waarbij de objecten naar de pointer gebracht kunnen worden of de items naar een andere positie gegooid kunnen worden, waarbij visuele feedback getoond wordt om de actie correct uit te voeren. Via een telescoop kan bij de Frisbee methode een andere deel van het scherm bekeken worden waarbij er ge¨ınterageerd kan worden met deze afgelegen items, terwijl popupwidgets bij CoR2 Ds interactie van op afstand mogelijk maken. De Pick-and-Drop methode geeft dan weer de mogelijkheid om via een stylus informatie van de ene naar de andere positie te verplaatsen, waarbij ook tussen meerdere schermen items uitgewisseld kunnen worden. Bij het gebruik van direct contact van de vingers op het oppervlak worden er verschillende gestures gebruikt, waarbij via de acties van de vingers objecten bijvoorbeeld geselecteerd, geroteerd en vergroot kunnen worden. Deze gebaren dienen ze intu¨ıtief mogelijk te werken en moeten goed uitvoerbaar zijn. Het is ook belangrijk dat de gebruikers niet overladen worden met allerlei technieken die ze moeten onthouden. De organisatie van de informatie op het oppervlak is tevens van belang. Zo zijn er bijvoorbeeld containers, waaraan items toegevoegd kunnen worden, die eenvoudig doorgegeven kunnen worden aan de andere groepsleden en die ingeklapt kunnen worden om meer plaats te winnen. Bij de Interface Currents worden de items die aan de container toegevoegd zijn automatisch bewogen, zodat ook personen op andere posities eenvoudig de objecten kunnen selecteren. Bij een horizontale opstelling kunnen gebruikers ook aan verschillende zijden van het oppervlak zitten, waarvoor er speciale rotatietechnieken voorzien dienen te zijn, zodat de items goed leesbaar zijn. Mobile spatial tools en ZoomScapes be¨ınvloeden de getoonde items, waardoor de informatie beter beheerd kan worden. De traditionele menu’s en toolbars leveren problemen op bij deze soort oppervlakken, aangezien de vaste positie niet geschikt is. Als er meerdere gebruikers zijn, kunnen deze dan niet bereikbaar zijn, waardoor meerdere verplaatsen roteerbare widgets een oplossing kunnen bieden. Door de aanrakingen met de vinger is het oproepen van een contextmenu via een rechtermuisklik niet meer mogelijk, waardoor er andere methoden gebruikt moeten worden. Het gebruik van pie menu’s kan ervoor zorgen dat de gebruiker een kleinere verplaatsing moet uitvoeren om een selectie te maken, aangezien de items even ver van de vinger verwijderd zijn, iets wat bij de lineaire menu’s niet het geval is. FlowMenu’s en Gedrics voorzien vloeiende bewegingen over menu’s, iconen of objecten waardoor de interacties sneller uitgevoerd kunnen worden. Tekstinvoer tenslotte kan op interactieve oppervlakken een moeilijke opgave zijn. De invoer kan soms hakkelig zijn, waardoor deze ook moeilijk te lezen wordt voor andere gebruikers. Het gebruik van toetsenborden, al dan niet virtueel, heeft ook zijn nadelen. Om ervoor te zorgen dat de karakters herkend worden door het systeem kan er gebruik gemaakt worden van Unistrokes of Graffiti, waarbij vloeiende strokes gebruikt worden om het alfabet voor te


61

stellen. De keuze van de juiste interactietechniek ligt niet altijd voor de hand en hangt in grote mate af van de opdracht zelf. Vaak zijn er verschillende varianten nodig, want zo is er bijvoorbeeld op het ene moment meer detail nodig dan op het andere. De beste oplossing is dan vaak om meerdere technieken te voorzien, waartussen de gebruiker zelf kan kiezen, om zo tot het beste resultaat te komen.

Deel II

Implementatie

62

Hoofdstuk 6

Creatan Contents 6.1 6.2

6.3

6.4

6.5

6.1

Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

63

De applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

64

6.2.1

Overzicht interface-elementen . . . . . . . . . . . . . . . . . . . . . .

65

6.2.2

Technische aspecten . . . . . . . . . . . . . . . . . . . . . . . . . . .

66

Algemene interactietechnieken . . . . . . . . . . . . . . . . . . . .

66

6.3.1

Directe manipulatie . . . . . . . . . . . . . . . . . . . . . . . . . . .

67

6.3.2

Pie menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

67

6.3.3 6.3.4

Gesture shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tekstinvoer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

69 70

6.3.5

Overlapping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Media-elementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

71 72

6.4.1

Visualisaties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

72

6.4.2

Interactietechnieken . . . . . . . . . . . . . . . . . . . . . . . . . . .

73

6.4.3

Media-element afspelen . . . . . . . . . . . . . . . . . . . . . . . . .

Containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

73 74

6.5.1

Interactietechnieken . . . . . . . . . . . . . . . . . . . . . . . . . . .

74

6.5.2

Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

78

6.5.3

Storyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

81

6.5.4

Timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

82

6.6

Movieplayer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

83

6.7

Label creator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

85

6.8

Informele gebruikerstest . . . . . . . . . . . . . . . . . . . . . . . .

88

6.9

Conclusies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

89

Inleiding

Het eerste deel van deze thesis heeft via een literatuurstudie getracht een algemeen beeld te geven van digitale oppervlakken, waarbij een aantal interactie- en visualisatietechnieken

63

Hoofdstuk 6. Creatan

64

besproken zijn. In dit tweede deel zal Creatan 1 besproken worden, een toepassing waarbij één of meerdere gebruikers samen kunnen werken om een film te creëren door gebruik te maken van reeds bestaande afbeeldingen, video- en audiofragmenten. Hoewel het principe lijkt op programma’s zoals Windows Movie Maker, is het in deze applicatie de bedoeling om de voordelen van de digitale tafel uit te buiten en zo op een intu¨ıtieve manier te werken en dit met meerdere personen. Om dit te verwezenlijken zullen een aantal van de behandelde technieken uit de literatuurstudie ge¨ımplementeerd worden, waarbij de bruikbaarheid en gebruiksvriendelijkheid ervan bestudeerd zal worden.

6.2

De applicatie

Met Creatan kunnen één of meerdere gebruikers filmpjes creëren door verscheidene afbeeldingen en videofragmenten te groeperen en bewerken. Door bestaande bestanden van de computer aan een library in het programma toe te voegen, kunnen deze vervolgens in storyboards of timelines gegroepeerd worden, waarbij de gebruiker onder andere de mogelijkheid krijgt om de starten eindposities in te stellen, zelf aangemaakte labels toe te voegen, ondertitels te voorzien en geluidsfragmenten toe te voegen. In de secties die volgen zal deze functionaliteit in detail besproken worden met een toelichting van de ontwerpkeuzes.

Figuur 6.1: Aanmaken van een nieuw project.

De applicatie is opgebouwd rond projecten, dewelke in XML-bestanden worden opgeslagen. Alle elementen die toegevoegd worden aan een library zullen hierin bijgehouden worden, net zoals de eigenschappen van de items. Bij het starten van het programma krijgt de gebruiker de keuze om een bestaand project in te laden of een nieuw aan te maken, zoals getoond wordt in figuur 6.1. 1

Samentrekking van het Latijnse creare (creëren) en tangere (aanraken).


6.2.1

65

Overzicht interface-elementen

De applicatie bestaat uit verschillende interface-elementen, dewelke in figuur 6.2 worden getoond. In dit hoofdstuk zullen deze afzonderlijke elementen verder toegelicht worden.

Figuur 6.2: Overzicht van de verschillende interface-elementen binnen de applicatie.

1. Een media-element van het type video bevat een ingebouwde movieplayer (zie 1’) en wordt gevisualiseerd door een gegenereerde frameafbeelding (sectie 6.4). 2. Media-element dat een afbeelding voorstelt (sectie 6.4). 3. Een audio media-element wordt voorgesteld door een muzieknoot en bevat tevens een ingebouwde player (sectie 6.4). 4. Alle media-elementen worden in een freeform library opgeslagen (sectie 6.5.2). 5. Een structured library positioneert de elementen in een rooster (sectie 6.5.2). 6. In het storyboard kunnen nieuwe films gecreëerd worden door media-elementen toe te voegen (sectie 6.5.3). 7. De timeline geeft de mogelijkheid geavanceerde bewerkingen op het storyboard uit te voeren (sectie 6.5.4). 8. Via de movieplayer kunnen afzonderlijke elementen of volledige storyboards/timelines afgespeeld worden (sectie 6.6). 9. Met de label creator kan de gebruiker labels en overlaytitels aanmaken (sectie 6.7).


6.2.2

66

Technische aspecten

Digitale tafel Creatan is een applicatie die ontwikkeld is voor een digitale tafel van het EDM (Universiteit Hasselt / Expertisecentrum voor Digitale Media), waarbij gebruik gemaakt wordt van Frustrated Total Internal Reflection (zie sectie 2.2.5). Een belangrijk aspect hierbij is dat deze tafel geen individuele herkenning ondersteunt, waardoor het niet mogelijk is om exact te detecteren welke gebruiker het oppervlak aanraakt. Deze digitale tafel wordt getoond in figuur 6.3.

Figuur 6.3: Digitale tafel.

Software De applicatie zelf is in C# geprogrammeerd en maakt gebruik van Windows Presentation Foundation (WPF)2 voor de grafische interface.

6.3

Algemene interactietechnieken

Deze sectie geeft een overzicht van de algemene interactietechnieken die toegepast zijn in Creatan: de directe manipulatie van elementen, de ondersteuning van gesture shortcuts, het pie menu, de invoer van tekst en een manier om overlappende elementen te verplaatsen. 2

http://www.windowsclient.net


6.3.1

67

Directe manipulatie

Aangezien de applicatie ontwikkeld is voor een digitale tafel, hebben we te maken met directe input van één of meerdere vingers op het oppervlak. Om een item te verplaatsen wordt er een beroep gedaan op de veelgebruikte en intu¨ıtieve Drag-and-Drop methode (zie sectie 4.3.1), waarbij de gebruiker een object vastpakt met de vinger en dit vervolgens verplaatst door contact te houden met het oppervlak. Vermits de gebruikte digitale tafel geen te groot oppervlak is, zullen er geen speciale afstandstechnieken, zoals besproken in sectie 4.3, ge¨ımplementeerd worden. Wel valt op te merken dat de gebruiker altijd de mogelijkheid heeft om het volledige vlak met alle items erop te verplaatsen, waardoor het mogelijk wordt om iets verder afgelegen items eenvoudig te bereiken. De achtergrond van de applicatie maakt hiervoor gebruik van een radiale gradiënt om ervoor te zorgen dat de gebruiker zich beter kan situeren. Om een item te verplaatsen zal de gebruiker met de vinger het item moeten aanraken op het oppervlak, waardoor het geselecteerd zal worden. Dit item kan vervolgens verplaatst worden naar eender welke positie, afhankelijk van het type item en de omliggende structuur, zoals verder in dit hoofdstuk in detail besproken zal worden. Er is geopteerd om het item onmiddellijk te selecteren en niet eerst een selectie door bijvoorbeeld tik-loslaten of dubbele tik uit te voeren. Het voordeel van selectie door onmiddellijk contact is dat de gebruiker direct het oppervlak aanraakt en zo vervolgens andere acties kan uitvoeren. Een nadeel dat optreedt is dat soms het element ongewild enkele pixels verplaatst wordt bij het bewegen van de vingers voor een andere actie. Om dit kleine ongemak op te lossen is er daarom voor geopteerd om een verplaatsing pas door te voeren na een aantal pixels.

6.3.2

Pie menu

De gebruiker krijgt de mogelijkheid om een pie menu op te roepen om acties uit te voeren op de elementen, containers en de applicatie in het algemeen. Zoals reeds vermeld in sectie 4.7.2 is een pie menu een cirkelvorming menu, dat gepositioneerd wordt bij de vinger. Het oproepen kan op verscheidene manieren gebeuren, waarbij elke methode voor- en nadelen heeft. Zo is het mogelijk om door een enkele tik op het oppervlak een pie menu te tonen. Hoewel dit één van de eenvoudigste methodes is, kan deze manier van aanroep storend overkomen voor de gebruiker, aangezien dit kan interfereren met gewone acties op het oppervlak zoals het verplaatsen. Een andere oproeptechniek is het uitvoeren van een dubbele tik, hetgeen een duidelijke herkenningstechniek is. Hierbij kan er gekozen worden om na het loslaten van de tweede ‘tik’ het pie menu te tonen, of door bij de tweede aanraking het menu reeds te activeren. Deze eerste mogelijkheid zou ervoor zorgen dat de vinger niet meer op het oppervlak geplaatst is, een gevolg dat tevens het geval is bij de enkele tik. Een andere techniek om ervoor te zorgen dat de vinger op het oppervlak blijft is het activeren na een bepaalde tijd, dewelke ge¨ımplementeerd is bij Creatan. Om het pie menu op te roepen zal de gebruiker een vinger op het oppervlak dienen te plaatsen, waarbij na een bepaalde tijd het widget zal verschijnen. Het grootste voordeel hierbij is dat de vinger reeds contact met het oppervlak maakt en het pie menu rond de top van de vinger gecentreerd wordt. De gebruiker dient vervolgens enkel een schuifbeweging uit te voeren naar het gewenste segment, zonder daarvoor eerst weer contact te maken met het oppervlak.


68

Als de vinger het segment betreedt zal de bijbehorende actie uitgevoerd worden, waarna het pie menu zal verdwijnen. Om de gebruiker een rustpositie en enige vrijheid te geven om de mogelijkheden te bekijken, is het middelste deel van het menu leeg, zoals getoond wordt in figuur 6.4(a). Dit witte deel is voldoende groot gemaakt om de vinger in te laten rusten.

(a) Pie menu van de applicatie

(b) Onderliggende segmenten kunnen bedekt worden door de hand.

Figuur 6.4: Het pie menu is een circelvormig menu dat gepositioneerd wordt rond de vinger.

In de applicatie wordt een minimum tijd van 1000 milliseconden gehanteerd, aangezien deze bij informele testen tijdens het gebruik van het programma als beste aanzien werd. Wat de beste tijd is, dient het beste via gebruikerstesten met meerdere personen bepaald te worden, maar kan afhankelijk van persoon tot persoon zijn. Een probleem dat kan opduiken bij pie menu’s is dat onderliggende segmenten bedekt worden door de hand, zoals wordt gevisualiseerd in figuur 6.4(b). Dit kan enerzijds opgelost worden door minder belangrijke acties rechtsonder te plaatsen of hier zelfs geen segmenten te tonen, aangezien dit de plaats is waar rechtshandige gebruikers hun hand in eerste instantie houden. Voor linkshandige personen is deze theorie niet meer toepasbaar, maar indien de digitale tafel gebruikersherkenning zou ondersteunen, zou het mogelijk zijn om profielen aan te maken, waarbij de gebruiker vervolgens kan instellen of deze rechts- of linkshandig is. Anderzijds kan de mogelijkheid voorzien worden dat de vinger opgeheven mag worden, zodat de gebruiker de opties kan bekijken. Deze laatste methode is toegepast binnen Creatan, waarbij het aanraken van het middelste deel of eender welke andere positie op het oppervlak ervoor zorgt dat het pie menu verdwijnt. Een ander probleem door het gebrek aan persoonsherkenning is dat het vaak bij multi-user systemen niet mogelijk wordt om de positie van de gebruiker te bepalen. Om deze kwestie op te lossen is er daarom geopteerd om het pie menu mee te roteren met het bijbehorende item, aangezien ervan uit gegaan wordt dat de gebruiker het item reeds naar zichzelf heeft gedraaid. Om het menu niet te erg te overladen met mogelijkheden is tevens de mogelijkheid voor hierarchische nesting voorzien. Hierbij zal een sub pie menu gepositioneerd worden rond de


69

nieuwe positie van de vinger, terwijl het oude niveau zal verdwijnen. Er is voor dit ontwerp van pie menu gekozen, aangezien in vorige projecten met een digitale tafel reeds andere methodes ge¨ımplementeerd waren, zoals tik-loslaten en dubbele tik. Een gebruikerstest van het geheel biedt de mogelijkheid om de gebruiksvriendelijkheid van deze implementatie te onderzoeken.

6.3.3

Gesture shortcuts

De gebruiker kan de meeste functionaliteit van de applicatie bereiken door gebruik te maken van de bijbehorende pie menu’s. Daarnaast zijn er tevens verscheidene shortcuts voorzien, waarbij de actie uitgevoerd kan worden door eenvoudige gesturebewegingen toe te passen. Aangezien het uitvoeren van gestures op een element kan interfereren met het normale verplaatsingsgesture of andere interactieve items, is er geopteerd om met een layer te werken. Deze layer wordt geactiveerd door twee vingers langs mekaar op het element te plaatsen, waarna een lichte transparante laag op het element gelegd wordt. De gestures, die vervolgens met de andere hand uitgevoerd worden, zullen hierdoor niet als verplaatsing verwerkt worden. Als één van de twee activatievingers opgeheven wordt, zal de layer verdwijnen. Dit principe wordt getoond in figuur 6.5, waarbij met de linkerhand twee contactpunten gemaakt worden en de layer verschijnt. Een vinger van de rechterhand voert vervolgens een gesture uit.

Figuur 6.5: Twee contactpunten langs mekaar activeren een layer, waardoor de gebruiker gesture shortcuts kan uitvoeren.

Al deze gestures zullen met één vinger uitgevoerd kunnen worden waarbij een continue beweging gemaakt dient te worden. Het herkenningsalgoritme splitst een gesture op in verscheidene onderdelen: • Horizontaal naar links / naar rechts; • Verticaal naar boven / naar onder; • Diagonaal van links boven naar rechts onder / van links onder naar rechts boven;


70

• Diagonaal van rechts boven naar links onder / van rechts onder naar links boven. Elk gesture bestaat uit één of meerdere van deze delen en als de gebruiker de vinger van deze gesture shortcut opheft zal het algoritme controleren welke delen uitgevoerd zijn. Hierbij is het van belang dat deze herkenning op een robuuste manier gebeurt en dat bijvoorbeeld de gestures tevens in omgekeerde volgorde uitgevoerd kunnen worden, indien dit mogelijk is. Dit is vooral nuttig voor linkshandige gebruikers, aangezien handgebaren in een andere richting uitvoeren voor deze personen eenvoudiger kan zijn.

6.3.4

Tekstinvoer

In sectie 4.8 is de tekstinvoer voor applicaties met digitale oppervlakken besproken. Hoewel er technieken voor tekstinvoer met de vinger besproken zijn door te schrijven en karakterherkenning, wordt er bij deze applicatie toch geopteerd voor een virtueel toetsenbord, aangezien er slechts tekstuele input nodig is om de naam van het project in te voeren en om de tekst voor labels en ondertitels te creëren. Voor deze beperkte noodzaak aan tekstuele input zou het gebruik van karakterherkenning als een extra last beschouwd kunnen worden, aangezien de gebruiker nieuwe gestures moet onthouden om deze uit te voeren (bijvoorbeeld bij Unistrokes, zie sectie 4.8.2). Het tekenen van lijnen, zoals bij Sticky Notes (zie sectie 4.8.1), is hiervoor tevens niet gepast, aangezien deze invoer niet verwerkt kan worden.

Figuur 6.6: Via het virtuele toetsenbord kan tekstuele input gegeven worden.

Een voorbeeld van het virtuele toetsenbord wordt getoond in figuur 6.6. Aangezien feedback een belangrijk aspect voor de gebruiksvriendelijk is, zullen de aangeraakte toetsen groen oplichten, zoals de ‘h’ toont in de afbeelding. Hierdoor krijgt de gebruiker naast de toegevoegde letter in het tekstveld extra informatie over welke toets aangeraakt is, aangezien tactiele feedback ontbreekt. In de linkerboven- en de rechterbenedenhoek zijn er driehoekjes voorzien, om de gebruiker de mogelijkheid te geven het keyboard te vergroteren, verkleinen of roteren. Door een oranje hoekje aan te raken en vervolgens de vinger naar buiten of binnen te bewegen, kan het toetsenbord respectievelijk vergroot of verkleind worden, terwijl bij aanraking van de twee hoekjes tegelijkertijd de rotatie doorgevoerd zal worden. De gebruiker kan het widget verplaatsen


71

door op een open plaats, waar geen buttons zijn, het initiële contactpunt te maken. In sectie 6.5.1 zullen deze technieken in meer detail toegelicht worden.

6.3.5

Overlapping

Als er meerdere elementen en containers op het oppervlak gelegen zijn, kunnen deze mekaar overlappen, waardoor de gebruiker eventueel gehinderd kan worden bij het uitvoeren van de taak hierop. Om dit op te lossen zullen de items die geselecteerd zijn naar boven gebracht worden tijdens bijvoorbeeld het verplaatsen en roteren. Hierdoor kan de gebruiker altijd het volledige element zien waar de actie op uitgevoerd wordt. Bij het verplaatsen van elementen tussen verschillende containers is deze optie tevens van belang, om ervoor te zorgen dat het versleepte element zich niet onder de nieuwe container bevindt. Naast deze automatische aanpassing krijgt de gebruiker tevens de mogelijkheid om de volgorde van de elementen aan te passen, door in het pie menu de optie Order te selecteren. Hierna zal een nieuw pie menu getoond worden met de twee opties Bring to front, waarbij het item naar de voorgrond verplaatst wordt en Send to back, waardoor het element naar de onderste positie verplaatst wordt. Deze functionaliteit kan tevens opgeroepen worden door het uitvoeren van de gesture shortcuts, dewelke in figuur 6.7 gevisualiseerd worden.

(a) Verplaatst het element (b) Verplaatst het element naar de voorgrond. naar de achtergrond.

Figuur 6.7: Gesture shortcut om een element naar de voorgrond of de achtergrond te brengen.

In een eerdere versie van het programma kon de gebruiker een speciaal widget oproepen, waarbij de diepte van het element exact ingesteld kon worden. Dit widget bestond uit een verticale balk met een gele rechthoek erin, die de huidige diepte aanduidde en met de vinger naar boven of onder verplaatst kon worden , zoals figuur 6.8 toont. Net zoals bij het pie menu werd het widget bij het oproepen gepositioneerd bij de vinger, waarbij de huidige positie in beschouwing genomen werd; de onderliggende balk werd naargelang deze waarde hoger of lager getoond. Uit informele testen bleek echter dat de gebruikers hier niet goed mee overweg konden, waardoor dit widget uit de finale versie is verdwenen.


72

Figuur 6.8: Via een speciaal widget kon de diepte van een element aangepast worden.

6.4

Media-elementen

De media-elementen zijn de elementaire items in de applicatie en kunnen opgesplitst worden in drie categorieën: • Videofragmenten • Afbeeldingen • Audiofragmenten Een media-element zal nooit los op het oppervlak rondslingeren en dient bijgevolg altijd tot een bepaalde container te behoren, waarvan de verschillende types in sectie 6.5 besproken worden. Deze sectie zal de verschillende visualisaties voor elke categorie, de interactietechnieken die een gebruiker op de elementen kan uitvoeren en de ingebouwde movieplayer toelichten.

6.4.1

Visualisaties

Om het verschil tussen de drie categorieën duidelijk te maken aan de gebruikers, wordt het type door verschillende kenmerken gevisualiseerd. Een videofragment wordt voorgesteld door een afbeelding, die gegenereerd wordt uit het filmbestand, en toont aan de beide zijkanten een filmstrip (figuur 6.9(a)). Een afbeelding wordt daarentegen enkel voorgesteld door de afbeelding zelf (figuur 6.9(b)), terwijl een muzieknoot een element van het type audio voorstelt (figuur 6.9(c)). Elk element bevat tevens onderaan een witte band waarop de naam van het item wordt weergegeven. Daarnaast wordt het geheel omgeven door een grijze border, dewelke van kleur wijzigt naargelang de actie. Als het element bijvoorbeeld verplaatst wordt, zal deze in het oranje worden weergegeven, terwijl de rand groen kleurt tijdens het afspelen.


(a) Videofragment

73

(b) Afbeelding

(c) Audiofragment

Figuur 6.9: Verschillende visualisaties voor de soorten media-elementen.

6.4.2

Interactietechnieken

Aangezien elementen de essentiële componenten zijn om een film te creëren, zal de gebruiker hier verscheidene acties op kunnen uitvoeren, afhankelijk van het type container waartoe deze behoren (zie sectie 6.5). Zoals reeds toegelicht in sectie 6.3.1 kan de gebruiker een element verplaatsen door het met een vinger aan te raken en deze vervolgens te bewegen over het oppervlak; het geselecteerde element zal de vinger volgen. Daarnaast kan het item geroteerd of vergroot worden en dit door gebruik te maken van twee vingers, dewelke beiden op het element geplaatst moeten worden. Door de vingers verder uit elkaar te verplaatsen zal het item vergroot worden, terwijl het naar mekaar toebrengen voor een verkleining zorgt. Hierbij zullen de verhoudingen van de afbeelding wel altijd behouden blijven, waardoor het soms mogelijk is dat resize de uitgevoerde vingerbeweging niet precies volgt. Als één vinger blijft staan en de andere vinger een draaibeweging maakt, zal het geselecteerde item geroteerd worden met de hoek die gevormd is door deze verplaatsing (zie tevens sectie 4.5.5). Deze rotatie- en resizegestures kunnen tevens tegelijkertijd uitgevoerd worden.

6.4.3

Media-element afspelen

Op de video- en audiofragmenten wordt een transparante lichtgrijze driehoek getoond, waarop getikt kan worden. Als deze actie uitgevoerd wordt, zullen de driehoek, de balk met de naam en de filmstrip verdwijnen, terwijl een klein panel onder het element zal uitschuiven met basisopties voor het afspelen en het fragment zelf zal starten. Dit panel bestaat uit een stopen pauzebutton (als het fragment gepauzeerd is, zal deze laatste button vervangen worden door play) met daarlangs een tijdslijn, waarop de huidige positie weergegeven wordt. Deze positie wordt tijdens het afspelen continu aangepast en kan door de gebruiker tevens ingesteld worden door het balkje te verslepen. Als er op de stopbutton gedrukt wordt, zal het fragment gestopt worden, waarna het onderste panel terug naar boven zal schuiven en de playdriehoek opnieuw zal verschijnen met de overige visualisaties. In figuur 6.10 wordt het afspelen van een filmpje getoond, waarbij de border een groene kleur heeft gekregen om feedback aan de gebruiker te geven. Afhankelijk van de grootte van het element zal de afspeelbalk eenvoudiger gemanipuleerd kunnen worden. Als het element klein is, zal de gebruiker met minder precisie de positie kunnen instellen dan als het element groter weergegeven wordt, waarbij de balk vervolgens vergroot


74

Figuur 6.10: Via de ingebouwde movieplayer kan een element afgespeeld worden.

zal worden. Om de positie exacter te kunnen bepalen en uitgebreidere opties te bekijken, kan de movieplayer gebruikt worden, dewelke in sectie 6.6 toegelicht wordt. Er is gekozen om deze eenvoudige ingebouwde player te voorzien, om zo de gebruiker snel de mogelijkheid te bieden om het fragment te bekijken zonder daarvoor een extra widget op te moeten roepen.

6.5

Containers

Om de elementen op het oppervlak eenvoudiger te beheren en door te geven, wordt er gebruik gemaakt van containers (zie tevens sectie 4.5.1). Zoals reeds vermeld in 6.4 mogen de elementen niet los op het oppervlak rondslingeren en dienen ze altijd aan een bepaalde container toegevoegd te worden, maar met voldoende flexibiliteit om deze tussen containers uit te wisselen. Er zijn drie soorten containers te onderscheiden, namelijk de libraries, storyboards en timelines, dewelke verder in deze sectie in detail besproken zullen worden. Door het pie menu van de applicatie te gebruiken, krijgt de gebruiker de mogelijkheid om nieuwe containers toe te voegen aan het programma. Via het menusegment New container krijgt de gebruiker een nieuw pie menu te zien, waarbij het type container geselecteerd dient te worden, zoals in figuur 6.11. Op elk moment kan een container verwijderd worden, andermaal door gebruik te maken van het pie menu.

6.5.1

Interactietechnieken

Acties om een item te verplaatsen, roteren of resizen vormen bij de elementen geen probleem (zie sectie 6.4.2), iets wat daarentegen bij containers wel het geval is. Zo bevatten de containers interactieve media-elementen waarop tevens acties uitgevoerd kunnen worden, dewelke kunnen interfereren met de acties op de containers. Daarom worden in deze sectie technieken voorgesteld om dit probleem op te lossen. Een belangrijk aspect bij de gebruiksvriendelijkheid van een applicatie is het geven van feedback aan de gebruiker. Daarom krijgen de containers een oranje rand als er acties op uitgevoerd worden, hetgeen tevens gebeurt bij acties op media-elementen. Hierdoor kan de gebruiker zien op welk item een gesture wordt uitgevoerd.


(a) Pie menu van de applicatie.

75

(b) Na de selectie van het segment New container verdwijnt het huidige pie menu en wordt een nieuw getoond met de verschillende types.

Figuur 6.11: Hierarchische menu om een nieuwe container toe te voegen.

Om de container te verplaatsen dient de gebruiker met de vinger contact te maken zonder de bijbehorende media-elementen aan te raken. Hierdoor zal de container geselecteerd worden en zal deze vervolgens elke beweging van de vinger volgen. De aanwezigheid van elementen kan voor een extra moeilijkheid zorgen, maar bij het ontwerp van alle types is er aan de randen een voldoende grote marge vrijgehouden om ervoor te zorgen dat de gebruiker deze interactie altijd kan uitvoeren zonder daarvoor eerst media-elementen te verslepen. Het uitvoeren van gestures, waar er minimum twee contactpunten voor nodig zijn, kan bij de containers niet op dezelfde manier als bij de media-elementen afgehandeld worden. Daarom worden er in de linkerboven- en rechterbenedenhoek 2 oranje hoekjes getoond, dewelke door de gebruiker aangewend kunnen worden om te roteren en resizen. Deze hoekjes kunnen opgeroepen of verborgen worden door de bijbehorende optie in het pie menu te selecteren, maar zullen standaard actief zijn. Om de container te vergroten of verkleinen moet de gebruiker één hoekje aanraken, waarna respectievelijk naar buiten of binnen bewogen kan worden. Door deze actie zal de grootte van de container zelf aangepast worden, waardoor er meer of minder elementen getoond zullen worden. Afhankelijk van het type container zal het widget horizontaal, verticaal of in alle richtingen uitgebreid kunnen worden. Om de ondersteunde acties duidelijk te maken aan de gebruiker, zullen er kleine pijlen verschijnen bij het aangeraakte driehoekje, zoals getoond wordt in figuur 6.12(a), waarbij de grootte in alle richtingen aangepast kan worden, terwijl 6.12(b) toont dat deze enkel horizontaal aangepast kan worden. Bij het loslaten van het hoekje zullen de pijlen weer verdwijnen. Om de container te roteren zal de gebruiker de twee hoekjes tegelijkertijd moeten aanraken, waarbij het tweede hoekje dat aangeraakt wordt voor de rotatie zelf zal zorgen. Als de gebruiker met de vinger hierop beweegt, zal de hoek berekend worden met het middelpunt, waarna


76

(a) Vergroten van een container in alle (b) De grootte van de container kan enrichtingen mogelijk. kel horizontaal gewijzigd worden.

(c) Om te roteren moet de gebruiker de twee driehoekjes aanraken, waarbij de tweede vinger de draaihoek zal bepalen.

Figuur 6.12: Het resizen en roteren van de container gebeurt door middel van driehoekjes, waarbij symbolen de actie verduidelijken.


77

de container gedraaid zal worden. Om dit te verduidelijken zal bij het tweede driehoekje een rotatiesymbool getoond worden, zoals figuur 6.12(c) toont. Voordat deze methode ontwikkeld werd, zijn er twee andere technieken ge¨ımplementeerd, dewelke wegens te grote nadelen verdwenen zijn uit de finale versie. Zo was er voor het resizen een grote border voorzien rond de volledige container, zoals figuur 6.13 verduidelijkt. Door de vinger hierop te plaatsen en vervolgens naar binnen of buiten te bewegen kon de grootte van het widget aangepast worden in de ondersteunde richting. Indien zowel horizontale als verticale resize mogelijk was, waren er in de hoeken donkere vierkantjes aangebracht, waardoor de gebruiker meerdere richtingen tegelijkertijd uit kon bewegen, zoals in de huidige methode het geval is. Deze border nam aanzienlijke plaats in op het oppervlak en dezelfde acties kunnen uitgevoerd door het gebruik van de twee huidige driehoeken, waardoor voor deze eenvoudigere oplossing is geopteerd.

Figuur 6.13: Via de border kon de container vergroot worden in de ondersteunde richtingen (De pijlen op deze tekening dienen als extra uitleg en waren niet in de implementatie zelf opgenomen, zoals wel het geval is bij de nieuwe methode).

Daarnaast werd er voor het roteren van de container gebruik gemaakt van een layer, dewelke over het widget gelegd werd na een activatie door twee vingers naast mekaar op het oppervlak van de container te plaatsen. De gestures die ondersteund worden bij de media-elementen, konden vervolgens op deze layer uitgevoerd worden, zonder te interfereren met de onderliggende items. Het grote nadeel bij deze techniek was dat de gebruiker eerst een andere mode diende te activeren, dewelke als hinderlijk ervaren kon worden, zeker bij een basisactie zoals het roteren. De techniek van de layer is niet volledig gesneuveld, maar is voor andere doeleinden gebruikt, zoals de gesture shortcuts, dewelke in sectie 6.3.3 reeds toegelicht zijn.

Container inklappen Naast het resizen via de hoekjes, krijgt de gebruiker ook de mogelijkheid om een container volledig in te klappen, zodat er slechts beperkte plaats op het scherm wordt ingenomen. Door de optie Collapse in het pie menu te selecteren, zal de container via een animatie verkleind worden, terwijl deze wordt rondgedraaid, zoals figuur 6.14 visualiseert. Het resultaat is een


78

icoon, verschillend van het type container, waarop een aantal elementen in het klein worden weergegeven. Zo wordt er een map getoond bij de libraries (figuur 6.15(a)) en een filmstrip bij de storyboards en timelines (figuur 6.15(b)). Enkele elementen worden willekeurig geroteerd op deze achtergrond weergegeven, zodat de gebruiker deze ingeklapte containers toch kan herkennen. Als deze containers ingeklapt zijn, kunnen ze ook nog steeds verplaatst worden, waardoor het eenvoudig wordt om deze door te geven of ze aan de zijkant op te bergen.

Figuur 6.14: Evolutie van een container in normale toestand naar de ingeklapte versie.

Om de container opnieuw uit te klappen dient de gebruiker een vinger minimum 1000 milliseconden op het oppervlak te laten rusten; dit is dezelfde actie die gebruikt wordt voor het oproepen van het pie menu (zie sectie 6.3.2). De oorspronkelijke container zal vervolgens uit het icoon verschijnen.

(a) Ingeklapte library.

(b) Ingeklapt board/timeline.

story-

Figuur 6.15: Ingeklapte containers krijgen een bijbehorend achtergrondicoon.

6.5.2

Libraries

De library is een eerste type container en is een widget waarin media-elementen verzameld worden. De gebruiker krijgt de mogelijkheid om afbeeldingen, video- en audiofragmenten van de computer in te laden in de applicatie en toe te voegen aan deze container, waarna deze verder gebruikt kunnen worden in het storyboard of timeline om een nieuwe film te creëren. Het toevoegen van elementen gebeurt door via het bijbehorende pie menu Add item te selecteren. Vervolgens zal een layer over de container gelegd worden met drie tabbladen: Movies,


79

Images en Audio. De gebruiker zal dan door de items per type kunnen scrollen, zoals figuur 6.16 demonstreert. Door een bepaalde bestandsnaam aan te raken, zal het item oranje oplichten en zal vervolgens de Add -button actief worden. Door hierop te drukken zal het geselecteerde bestand toegevoegd worden aan de library en zal de layer verdwijnen. In het geval dat een videofragment ingeladen wordt, zal tevens een frame gegenereerd worden dat als achtergrond getoond wordt bij de afbeelding. Aangezien het toevoegen van een nieuwe file een layer over de container is, zal het tevens mogelijk zijn deze nog steeds te resizen en roteren door gebruik te maken van de driehoekjes.

Figuur 6.16: Layer wordt over de container gelegd om een item toe te voegen aan de library.

Tussen verschillende containers krijgt de gebruiker tevens de mogelijkheid om media-elementen uit te wisselen. Hiervoor dient een element boven een andere container gepositioneerd te worden, waardoor het element vervolgens uit de oorspronkelijke container verwijderd zal worden en aan de nieuwe zal worden toegevoegd (drag-and-drop). Als het element in de container zelf verplaatst wordt, zal dit herschikt worden naargelang het type library. Het verwijderen van een element kan door het Remove-segment in het pie menu te selecteren van het mediaelement zelf. Er zijn twee verschillende types van libraries ontwikkeld, dewelke hierna besproken worden. Afhankelijk van het type worden de elementen op een vaste of vrije plaats gepositioneerd, worden ze herplaatst tijdens het vergroten of verkleinen en worden ze tijdens het intern verplaatsen anders behandeld. Via het piemenu krijgt de gebruiker tevens de mogelijkheid om op eender welk moment te wisselen van type library. De gebruiker krijgt hierdoor de mogelijkheid om afhankelijk van de taak of wens het desgewenste type te gebruiken. Om een beter overzicht te krijgen kan de structured library gebruikt worden, terwijl de freeform library meer vrijheid toestaat.


80

Freeform library Een freeform library geeft de gebruiker de vrijheid om de media-elementen te roteren, resizen en plaatsen waar deze dat wenst, zolang de elementen zich binnen de container blijven bevinden, zoals figuur 6.17 toont. Als een element over de rand uitsteekt, zal deze via een animatie terug naar binnen verplaatst worden, op enkele pixels van de rand. Deze marge aan de randen wordt voorzien om acties zoals het verplaatsen en activeren van de layer voor gesture shortcuts uit te kunnen voeren, zonder daarvoor eerst de binnenliggende items te moeten verplaatsen. Bij het verkleinen van dit type library zullen de items daarom ook mee naar binnen schuiven, indien deze marge niet meer vrij is.

Figuur 6.17: Elementen worden op willekeurige posities geplaatst in de freeform library.

Structured library Een structured library positioneert alle media-elementen op vaste posities, een soort rooster, zoals getoond wordt in figuur 6.18. Aangezien alle elementen in dit rooster in hetzelfde formaat worden weergegeven, zal de gebruiker deze niet kunnen roteren of vergroten; deze acties worden ongedaan gemaakt. Bij het verplaatsen van een element binnen de container zal een nieuwe positie berekend worden, waardoor alle elementen herschikt (opgeschoven) zullen worden. Door het vergroten of verkleinen van de container zelf zullen respectievelijk meer of minder elementen getoond kunnen worden, waardoor de elementen ook herschikt worden. Aangezien het kan voorkomen dat niet alle elementen tegelijkertijd getoond kunnen worden, zijn er twee technieken ingebouwd. Zo worden er pijlen aan de boven- en onderkant voorzien als er meer elementen respectievelijk boven of onder beschikbaar zijn. Als de gebruiker hierop drukt, zal alles een rij opschuiven. Daarnaast is er tevens een scrollbalk aan de rechterkant


81

voorzien, waarmee door de library genavigeerd kan worden en tegelijkertijd feedback getoond wordt over het aantal aanwezige elementen. Om het zoeken te versnellen is er bovendien in het pie menu een optie voorzien om de items te sorteren, zowel op naam als op type.

Figuur 6.18: Elementen worden op vaste posities in de structured library geplaatst.

6.5.3

Storyboard

Het storyboard is een container waarin nieuwe films gecreëerd kunnen worden door verschillende media-elementen samen te voegen. De gebruiker kan dit doen door elementen van de libraries naar deze container te verslepen. Terwijl bij het wisselen van items tussen libraries onderling, deze van container verwisseld worden, zal het oorspronkelijke element in de library blijven als dit wordt toegevoegd aan het storyboard. Om een element te verwijderen uit het storyboard, kan de gebruiker een beroep doen op het pie menu of het element simpelweg wegslepen uit het storyboard. Als het midden van het item niet meer in de container ligt zal het verdwijnen. Net zoals bij de structured library, worden de elementen in het storyboard op een rooster geplaatst om ze beter aan de gebruiker te kunnen presenteren. De gebruiker krijgt hierbij de mogelijkheid om een element van plaatst te wisselen door het naar de nieuwe positie te verplaatsen. Aangezien het storyboard slechts één element in de hoogte bevat, zoals figuur 6.19 visualiseert, zal de gebruiker enkel horizontaal kunnen scrollen door gebruik te maken van de pijlen die links en/of rechts bevestigd zijn of door gebruik te maken van de horizontale scrollbalk. Zoals reeds besproken bij figuur 6.12(b), kan het resizen ook enkel horizontaal gebeuren, waarbij een pijlsymbool feedback aan de gebruiker zal geven over deze beperking.


82

Figuur 6.19: Via het storyboard kan de gebruiker een nieuwe film creëren door elementen te rangschikken.

Het storyboard kan volledig afgespeeld worden in de movieplayer (zie sectie 6.6), waarbij alle elementen in de opgegeven volgorde afgespeeld zullen worden. Deze functionaliteit kan de gebruiker oproepen door de optie in het pie menu te selecteren of door het storyboard op een movieplayer te slepen. Hoewel via deze container nieuwe films gecreëerd kunnen worden, zal de gebruiker geen elementen zelf kunnen bewerken; daarvoor dient de timelinevisualisatie gebruikt te worden, dewelke in de volgende sectie besproken zal worden. Het storyboard wil de gebruiker de kans geven om op een eenvoudige manier de juiste beelden te selecteren en herschikken voor de nieuwe film. Om deze reden is er tevens voor geopteerd om geen audioelementen toe te staan.

6.5.4

Timeline

Terwijl het storyboard ontworpen is om eenvoudig een nieuwe film samen te stellen, zal de timeline meer geavanceerde bewerkingen toestaan. Uit figuur 6.20 zijn zo drie verschillende layers op te merken, dewelke parallelle afspeelmogelijkheden bieden: movies, audio en overlay. Door een element van eender welk type toe voegen, zal deze automatisch aan de juiste layer worden toegevoegd.

Figuur 6.20: De timeline bevat drie lagen: de visuele, de audio en de tekstuele layer.

De bovenste en tevens grootste layer is voorzien voor al het beeldmateriaal: de videofragmen-


83

ten en afbeeldingen. De lengte van het toegevoegde element zal de duur van het fragment bepalen, waarbij de gebruiker via de bovenstaande tijdsaanduiding de starten eindposities kan vaststellen. Om het element duidelijk weer te geven, zal vooraan een frame uit het videofragment of de afbeelding zelf getoond worden gevolgd door de titel van het item. Indien de duur slechts enkele seconden omvat, zal deze informatie niet volledig zichtbaar zijn. De gebruiker krijgt in deze container ook de mogelijkheid de elementen van plaats te verwisselen, hetgeen doorgevoerd wordt als het middelpunt van het geselecteerde item over de rand van het andere element is verplaatst. Bij fragmenten van lange duur kan dit uiteraard onhandig zijn voor de gebruiker, maar hiervoor biedt het storyboard een betere oplossing. Door met twee vingers tegelijkertijd op het element te drukken, kan de gebruiker naar rechts bewegen om het fragment langer te laten duren (indien de oorspronkelijke duur van het element niet overschreden wordt) of naar links om de startpositie aan te passen. De tweede layer bevat, zoals de naam het zegt, audiofragmenten. Deze worden gevisualiseerd door een muzieknoot gevolgd door de naam, indien de duur van het fragment het toestaat. In tegenstelling tot de visuele elementen, hoeven de audiofragmenten niet tegen mekaar geplaatst te worden; deze kunnen eender waar op de layer gepositioneerd worden. Het aanpassen van de starten eindposities zal bij deze elementen op dezelfde wijze gebeuren als bij de filmfragmenten. De onderste layer, overlay, bevat de ondertitels en bovenschriften. De gebruiker kan deze aanmaken door gebruik te maken van de label creator. Hier kan tekst in een afbeelding geplaatst worden, dewelke een transparante achtergrond heeft, waardoor deze over de videofragmenten getoond kan worden (de werking van deze label creator zal in sectie 6.7 in verder detail besproken worden). Net zoals bij de audiofragmenten kunnen deze items op eender welke positie in de tijdslijn gepositioneerd worden. Het aanpassen van de duur kan gebeuren door het item naar links of naar rechts te vergroten of verkleinen. Net zoals bij het storyboard, kan de gebruiker enkel horizontaal de container aanpassen. Om door de tijdslijn te navigeren is ervoor geopteerd om enkel via een scrollbalk te werken, aangezien de visuele layer een aaneensluitend geheel vormt. Dit geeft tevens de mogelijkheid om de tijdslijn mee te laten volgen tijdens het afspelen in de movieplayer, hetgeen in sectie 6.6 verder toegelicht zal worden. Aangezien het storyboard en de timeline nauw met elkaar verbonden zijn, kan de gebruiker op elk moment wisselen tussen het soort weergave. Dit kan gebeuren door gebruik te maken van het pie menu.

6.6

Movieplayer

De movieplayer kan alle mediaelementen, storyboards en timelines afspelen. Hiervoor dient de gebruiker de optie in het pie menu te selecteren of simpelweg het desbetreffende item op de movieplayer te slepen. Terwijl de ingebouwde player bij de video- en audiofragmenten bedoeld is om eenvoudig en snel het element af te spelen, bevat de movieplayer meer functionaliteit. Zo wordt er een tijdsaanduiding gegeven op welke positie het fragment zich bevindt tijdens het afspelen en geeft deze de totale tijdsduur aan, zoals figuur 6.21 toont. Ten opzichte van de ge¨ıntegreerde afspeelfunctionaliteit bij de elementen is de tijdslijn bij de movieplayer groter,


84

zowel de tijdslijnbalk als de positieaanduiding. Hierdoor zal het voor de gebruiker eenvoudiger worden om de tijd in te stellen. Net zoals bij de elementen, zal de grootte van het item zelf een bepalende rol spelen bij deze functionaliteit. Zoals in sectie 4.2 werd voorgesteld, had een zoom methode voor precieze interactie betere resultaten. Het vergroten van de movieplayer zal ervoor zorgen dat de tijdslijn groter wordt weergegeven, zodat de gebruiker eenvoudiger en exacter de positie kan instellen.

Figuur 6.21: Het afspelen van een videofragment in de movieplayer, waarbij de groene rand aantoont dat deze actief is.

Via de pijltjesbutton rechtsboven kunnen er meer opties ingesteld worden. Als de gebruiker hierop drukt zal de movieplayer vergroten en zullen er drie sliders getoond worden, zoals wordt getoond in figuur 6.22. Hierbij kan het volume, de balans van de luidsprekers en de afspeelsnelheid ingesteld worden. Deze opties kunnen zowel tijdens het afspelen van een fragment of op voorhand ingesteld worden. Door opnieuw op de pijltjesbutton te drukken (na het uitklappen veranderen de pijltjes van richting) zal de movieplayer weer de normale grootte terugkrijgen. De movieplayer bevat dezelfde basisgestures als de elementen, zoals het verplaatsen met één vinger en het roteren en vergroten met twee vingers. Voor deze laatste twee gestures is het niet nodig dat dezelfde techniek als bij de containers wordt toegepast met de twee driehoekjes, aangezien het grootste deel van het item ingenomen wordt door het beeld van het fragment, waardoor de gebruiker voldoende plaats voorzien heeft om het desbetreffende gesture uit te voeren. Zoals reeds vermeld bij het storyboard en de timeline, kunnen deze twee types containers afgespeeld worden door ze op de movieplayer te slepen. Aangezien deze items groter dan de player zelf kunnen zijn, is ervoor gekozen om te detecteren of het contactpunt van de vinger boven de movieplayer ligt. Deze detectie gebeurt dus op een andere manier dan bij het verplaatsen van elementen in de structured library of het storyboard, aangezien bij deze soort


85

Figuur 6.22: Via de pijltjesbutton rechtsboven kunnen meer opties ingesteld worden, zoals het volume, de balans van de luidsprekers en de afspeelsnelheid.

containers de elementen allemaal dezelfde kleine grootte hebben. Als het contactpunt binnen de movieplayer valt, zal het storyboard of de timeline onder de movieplayer gepositioneerd worden, zodat enerzijds de connectie duidelijk is en anderzijds deze container de getoonde beelden niet verbergt. Tijdens het afspelen zullen de elementen in de containers mee volgen en een groene border krijgen. In het storyboard zal het huidige element dat afgespeeld wordt altijd links getoond worden, zoals gevisualiseerd wordt in figuur 6.23(a). Als de movieplayer vervolgens het volgende fragment toont, zullen alle elementen opschuiven. Bij de timeline zal de positie continu aangepast worden door de scrollbalk mee te laten volgen, waarbij de huidige positie onder de groene lijn gepositioneerd wordt. De elementen die afgespeeld worden, zowel de beelden, audiofragmenten als overlaytitels, zullen tevens een groene border krijgen, zoals te zien is in figuur 6.23(b). Net zoals de movieplayer een groene rand krijgt tijdens het afspelen, zullen de bijbehorende containers deze kleur krijgen, om de connectie nog meer te verduidelijken. Naast het selecteren in het pie menu of het verslepen, krijgt de gebruiker tevens de mogelijkheid om de movieplayer op te roepen door het play gesture shortcut uit te voeren zoals wordt getoond in figuur 6.24.

6.7

Label creator

De gebruiker krijgt de mogelijkheid om via de label creator labels en overlaytitels te creëren. Door gebruik te maken van het pie menu bij de storyboards en timelines kan dit widget opgeroepen worden, waarvan de indeling getoond wordt in figuur 6.25. In het rechterdeel wordt het label zelf getoond, terwijl de gebruiker aan de linkerkant verscheidene opties kan instellen. Tekst kan toegevoegd worden door deze in te voeren in het daarvoor voorziene veld en vervolgens op Add text te drukken, waardoor deze op het label gepositioneerd zal worden. Om de tekst zelf in te geven kan het virtuele toetsenbord opgeroepen worden, door de button Keyboard te activeren. Hierdoor zal het widget onder de label creator gepositioneerd worden en kan het terug ingeklapt worden door nogmaals op dezelfde knop te drukken.


86

(a) Tijdens het afspelen van een storyboard in de movieplayer zal het huidige element links gepositioneerd worden met een groene border.

(b) De timeline past continu de positie van de tijdslijn aan tijdens het afspelen.

Figuur 6.23: Storyboards en timelines kunnen in de movieplayer afgespeeld worden.

(a)

(b)

Figuur 6.24: Gesture shortcut om een media-element, storyboard of timeline af te spelen in de movieplayer.


87

Figuur 6.25: Met de label creator kunnen labels en overlaytitels gecreëerd worden.

Voordat de tekst toegevoegd wordt, kan de gebruiker nog verscheidene opmaakopties instellen. Zo kan op de vorige en volgende driehoekspijlen gedrukt worden om het lettertype te wijzigen of kan via een slider de lettergrootte aangepast worden. Er is voor deze twee mogelijkheden gekozen aangezien het invoeren van tekst, om bijvoorbeeld de lettergrootte in te stellen, het beste vermeden dient te worden op digitale oppervlakken. Bij de grootte hebben we te maken met een continue actie, waardoor een slider geschikter is dan vorige of volgende te selecteren, hetgeen wel toegepast is bij het lettertype. Naast deze twee opties krijgt de gebruiker tevens de mogelijkheid om de kleur van het lettertype en de achtergrond aan te passen. Door te drukken op de button die de huidige kleur aangeeft, zal een kleurenkiezer verschijnen, waarbij de gewenste kleur geselecteerd kan worden. Eens de tekst is toegevoegd aan het label, beschikt de gebruiker nog steeds over de mogelijkheid om deze aan te passen. Door in het label op de desbetreffende tekst te drukken, zal deze opnieuw in het tekstveld verschijnen, waarbij de knop Add text gewijzigd zal worden in Change. Tijdens het aanpassen van zowel de tekst als de opties, zullen de wijzigingen onmiddellijk doorgevoerd worden. De gebruiker kan tevens de geselecteerde tekst in het label verplaatsen naar een gewenste positie. Om tekst te verwijderen kan het verslepen buiten het label ervoor zorgen dat de tekst verdwijnt of kan de gebruiker op de Change-button drukken nadat het tekstveld leeggemaakt is. Om het label toe te voegen aan de nieuwe film dient er op Add gedrukt te worden. Hierdoor zal een afbeelding gegenereerd worden van het beeld dat rechts getoond wordt in de creator en vervolgens worden toegevoegd aan het storyboard of de timeline. De gebruiker kan twee soorten labels aanmaken: een eerste soort bevat een achtergrond en wordt afgehandeld als een afbeelding, terwijl een tweede soort een transparante achtergrond bevat en als overlay gebruikt kan worden. Enkel de timeline kan dit tweede type aanmaken door in het pie menu te kiezen tussen Label of Overlay.


6.8

88

Informele gebruikerstest

Om een initieel beeld te krijgen van de gebruiksvriendelijkheid en de werking van sommige huidige technieken van Creatan is er een informele gebruikerstest met twee gebruikers uitgevoerd, dewelke beide masterstudent in de informatica zijn. Eén van hen heeft ervaring met multi-touch systemen, terwijl de andere testpersoon deze kennis niet heeft. Hoewel twee personen slechts een zeer beperkt beeld geven, kwamen bepaalde problemen naar boven en werden er constructieve tips gegeven. Tijdens deze test mochten de twee gebruikers tegelijkertijd met de applicatie werken, waarbij hen telkens informeel enkele opdrachten gegeven werd. Hierbij werd telkens gepolst naar de gebruiksvriendelijkheid en de werking van de technieken na de uitvoer, waarbij over mogelijke andere oplossingen gediscussieerd werd. Door de twee personen samen de test uit te laten voeren, werden bepaalde opmerkingen verder besproken, aangezien ze elkaar konden aanvullen. Deze interactie tussen de testgebruikers had een positief resultaat. Een probleem dat opdook was de oproepmethode van het pie menu. Zoals beschreven werd in sectie 6.3.2 is er geopteerd om het pie menu te laten verschijnen door de vinger een bepaalde tijd op het oppervlak te plaatsen. De twee testpersonen hadden hulp en enige oefening nodig om erin te slagen het menu te laten verschijnen. Beiden lieten ze uitschijnen dat de dubbele tik methode hun voorkeur droeg. De oranje hoekjes bij de containers werden daarnaast positief bevonden, waarbij de icoontjes een meerwaarde waren. Deze functie werd wel niet onmiddellijk zelf gevonden, maar er dient hierbij opgemerkt te worden dat helpsystemen een ander aandachtspunt vormen; na de verduidelijking konden beide testpersonen er probleemloos mee interageren. Er werd hierbij opgemerkt dat deze techniek tevens bij andere elementen aanwezig zou mogen zijn, zoals bij de movieplayer en de media-elementen; dit om de consistentie te verhogen. Ook werd opgemerkt dat het naar binnen bewegen, terwijl beide hoekjes ingedrukt worden, een verkleining van de container zou moeten veroorzaken, aangezien dit intu¨ıtiever zou overkomen; deze actie wordt momenteel enkel door de aanraking van één hoekje uitgevoerd. De aanwezigheid van de grijze en oranje randen bij de objecten werd tevens positief onthaald, aangezien hierdoor duidelijke feedback getoond werd over het actieve object. Tijdens het interageren vielen nog enkele kleine ongemakken op. Zo drukte een testpersoon telkens op de playbutton bij video- en audiofragmenten als hij deze wenste te vergroten of roteren. Het invoeren van een dubbele tik op de playbutton kan ervoor zorgen dat de gebruikers deze actie niet meer per ongeluk uitvoeren. Daarnaast viel tevens op dat de testpersonen alle functionaliteit van een bepaalde techniek wensen als deze overgenomen wordt uit gekende applicaties. Zo had een gebruiker de neiging om onder de oranje scrollbalk van de structured library in het donkergrijze deel te drukken om deze omlaag te plaatsen, zoals het geval is in de traditionele computeromgeving. Ook verwachtte een gebruiker dat bij het drukken op een andere positie in de afspeelbalk van de movieplayer en de ingebouwde player van mediaelementen de positie zich aan deze plaats zou aanpassen, zoals tevens het geval is bij sliders in traditionele systemen (in de huidige implementatie dient deze versleept te worden). We kunnen hieruit concluderen dat er een zo goed mogelijke mapping dient te gebeuren tussen de traditionele en nieuwe systemen wat betreft het gebruik van herkenbare technieken.


89

Daarnaast gaven de twee testpersonen nog enkele tips qua functionaliteit zoals het voorzien van een multiple select optie bij het toevoegen van nieuwe bestanden aan een library, het samenvoegen van twee containers als de ene boven de andere gepositioneerd wordt en het mee laten volgen van de elementen in een freeform library als deze vergroot wordt zodat de media-elementen hierin meer verspreid worden. Om de consistentie te verhogen opteerden de gebruikers voor een pie menu bij de tekst op een label in de creator en zou een aanduiding aan de zijkanten van het scherm van pas kunnen komen als hier elementen verborgen liggen.

6.9

Conclusies

In dit hoofdstuk is de implementatie van Creatan besproken, een toepassing waarin gebruikers samen kunnen werken om een nieuwe film te creëren door verschillende beelden audiobestanden samen te voegen. De applicatie, die ontworpen is voor een digitale tafel waarbij multi-touch directe manipulatie mogelijk is, houdt rekening met de studies die uitgevoerd zijn in het eerste deel. Als menu bij deze applicatie is er geopteerd voor het pie menu, waarbij het laten rusten van de vinger op het oppervlak ervoor zorgt dat het widget zal verschijnen. Daarnaast heeft de gebruiker de mogelijkheid om bepaalde functionaliteit op te roepen door gebruik te maken van gesture shortcuts, waarbij na de activatie van een layer met twee vingers een gesture uitgevoerd kan worden. Op deze manier kunnen bepaalde acties sneller opgeroepen worden, zonder daarvoor eerst het pie menu te laten verschijnen. Om tekstuele invoer te geven wordt er een beroep gedaan op een virtueel toetsenbord, aangezien er binnen de applicatie slechts een beperkte noodzaak aan tekst is. Creatan bestaat uit verschillende interface-elementen, dewelke opgesplitst kunnen worden in twee categorieën. Zo zijn er enerzijds de media-elementen die afbeeldingen, video- en audiofragmenten voorstellen en anderzijds de containers. Op deze eerste soort van elementen kan de gebruiker multi-touch gestures uitvoeren, zoals het resizen en roteren, acties die bij de containers minder eenvoudig uitgevoerd kunnen worden. Dit is te wijten aan het feit dat de containers andere interactieve media-elementen bevatten, waardoor het vinden van een lege plaats in de container zelf voor problemen kan zorgen. Daarom is ervoor geopteerd om gebruik te maken van twee interactiedriehoekjes, dewelke zich in tegenovergestelde hoeken bevinden. Door één hoekje aan te raken en vervolgens de vinger naar binnen of buiten te verslepen zal de grootte van de container gewijzigd worden, terwijl een aanraking van beide hoekjes de rotatie activeert. Om deze functionaliteit nog meer te verduidelijken, worden er tevens kleine pijlicoontjes getoond om de ondersteunde acties te tonen aan de gebruiker. Om duidelijk te maken aan de gebruiker op welke item er momenteel een actie uitgevoerd wordt, zal de rand van het item oranje kleuren als dit het geval is. Hierdoor krijgt de gebruiker feedback, hetgeen zeker noodzakelijk is als meerdere elementen in mekaar gelegen zijn. De containers zelf bestaan uit twee verschillende soorten. Langs de ene kant zijn er de libraries, waarin media-elementen opgeslagen kunnen worden. Hierbij krijgt de gebruiker de mogelijkheid om een freeform library te gebruiken, waarbij de elementen op eender welke posi-


90

tie gepositioneerd kunnen worden, terwijl de structured library een uitgelijnd overzicht geeft, waar via een scrollbalk of scrolldriehoekjes door de items genavigeerd kan worden. Langs de andere kant zijn er vervolgens de containers waarin nieuwe films samengesteld kunnen worden. De eenvoudigste variant hiervan is het storyboard, waarin enkel beeldfragmenten toegevoegd kunnen worden. Het voordeel hierbij is dat de gebruiker simpel bestanden kan toevoegen en van plaats kan verwisselen. Aangezien hierbij de elementen zelf niet bewerkt kunnen worden, kan de gebruiker de timeline visualisatie oproepen, waarbij naast het instellen van de starten eindpositie van de elementen tevens audiofragmenten en overlaytitels toegevoegd kunnen worden. Deze overlaytitels kunnen samen met labelafbeeldingen aangemaakt worden in de speciale label creator. Afhankelijk van het soort taak dat de gebruiker wenst uit te voeren, kan de gewenste visualisatie gekozen worden bij de containers. De media-elementen, de storyboards en de timelines kunnen afgespeeld worden in de movieplayer, waarbij feedback een belangrijke rol speelt. Zo zullen de storyboards en timelines de huidige elementen die afgespeeld worden aanduiden door de indicatie van een groene rand. Deze movieplayer bevat meer functionaliteit dan de ingebouwde player bij de video en audio media-elementen. Deze player bij deze elementen is enkel ingebouwd om het fragment snel te bekijken of beluisteren, terwijl voor betere instellingen de movieplayer gebruikt dient te worden. Opnieuw krijgt de gebruiker hierbij de mogelijkheid om afhankelijk van de taak het gewenste te kiezen. Een gebruikerstest is tenslotte gehouden met enkele personen om bepaalde ontwerpkeuzes te testen. Hierbij viel onder andere het probleem op dat ontstond bij het oproepen van het pie menu en het positieve gebruik van de interactiedriehoekjes van de containers, dewelke bij alle elementen aanwezig mochten zijn om de consistentie te verhogen. Daarnaast kan er tevens geconcludeerd worden dat bij de implementatie van widgets uit traditionele omgevingen zoveel mogelijk functionaliteit overeen dient te komen bij nieuwe systemen, net zoals feedback een belangrijke rol speelt voor de gebruiker.

Deel III

Conclusies

91

Hoofdstuk 7

Conclusies Interactieve touch-systemen vinden stilaan steeds meer hun weg naar het grote publiek. Televisieprogramma’s pakken uit met fancy toepassingen op deze systemen, dankzij de iPhone van Apple weten meerdere mensen wat multi-touch inhoudt en er wordt uitgekeken naar de komst van de Surface en Windows 7 van Microsoft. Aangezien deze systemen een andere invalshoek hebben, op meerdere gebruikers tegelijkertijd gericht zijn, andere eisen stellen en hierdoor tevens andere ontwerptechnieken toepassen, vraagt de ontwikkeling van applicaties voor deze systemen speciale aandacht. Misschien is één van de belangrijkste aspecten bij het ontwerp wel keep it simple. Zo zullen deze toepassingen tevens op openbare plaatsen ge¨ınstalleerd worden, zoals bijvoorbeeld in winkels, waardoor een nieuwe gebruiker op een eenvoudige manier ermee moet kunnen werken. Een belangrijke conclusie bij de literatuurstudie was het aanbieden van verschillende soorten interactie- en visualisatietechnieken. Om succesvolle toepassingen te ontwerpen, zal dit één van de belangrijkste aspecten worden om zo enerzijds verschillende soorten gebruikers te ondersteunen, maar anderzijds de gebruiker ook zelf nog steeds de keuze te laten over wat hij of zij op dat moment nodig heeft. Bij de thesisapplicatie Creatan is hier tevens getracht rekening mee te houden. Zo heeft de gebruiker de mogelijkheid om te switchen tussen het soort library en kan er gekozen worden voor het storyboard of de timeline. Om een individueel fragment af te spelen kan de ingebouwde player gebruikt worden met beperkte functionaliteit, terwijl er een beroep gedaan kan worden op de movieplayer om meer opties in te stellen. Via de ondersteuning van gesture shortcuts kan de gebruiker tenslotte bepaalde functionaliteit sneller en op een andere manier oproepen dan via het pie menu. Een ander aandachtspunt is het geven van voldoende feedback aan de gebruikers. Aangezien directe manipulatie toegepast wordt, is het belangrijk dat de elementen deze uitgevoerde acties erop onmiddellijk tonen en real-time volgen. Door de andere ontwerpen dan de traditionele computersystemen en de eventuele aanwezigheid van meerdere gebruikers, speelt de terugkoppeling een essentiële rol om ervoor te zorgen dat de gebruikers met de toepassing zullen werken. In Creatan is er hiervoor onder andere gebruik gemaakt van een border rond de elementen, dewelke een andere kleur krijgt naargelang de actie. Als het item bijvoorbeeld verplaatst en geroteerd wordt of de scrollbalk gebruikt wordt, zal de border oranje oplichten. Tijdens het afspelen van een media-element of een storyboard/timeline zal deze balk vervol-

92


93

gens groen kleuren om de toestand van het element te verduidelijken. Zoals bij de beperkte gebruikerstest reeds opviel, is er nood is aan duidelijke helpsystemen, waardoor de gebruiker de functionaliteit van de toepassing kan verkennen. Aangezien er gebruik gemaakt wordt van andere ontwerpprincipes, kunnen gebruikers moeite hebben om de werking van de applicatie te achterhalen. Zo wordt er in deze systemen veelvuldig gebruik gemaakt van gestures, dewelke niet altijd eenvoudig te achterhalen zijn. Een helpsysteem, zeker op openbare plaatsen, zou dit kenbaar moeten kunnen aanmaken aan de gebruiker, zoals TouchGhosts [65] tracht te doen. Wat de toekomst ons op dit vlak zal brengen is nog onduidelijk, maar het zal alleszins steeds meer ge¨ıntegreerd worden in het dagelijkse leven.

Bibliografie [1] New dragging paradigms, 2008. http://www.lirmm.fr/edel/dragging, laatst bezocht op 14 augustus 2008. [2] P.A. Albinsson and S. Zhai. High precision touch screen interaction. Proceedings of the SIGCHI conference on Human factors in computing systems, pages 105–112, 2003. [3] Apple. iPhone, 2008. http://www.apple.com/benl/iphone, laatst bezocht op 29 juli 2008. [4] P. Baudisch, E. Cutrell, D. Robbins, and M. Czerwinski. Drag-and-Pop and Drag-andPick: techniques for accessing remote screen content on touch-and pen-operated systems. Human-Computer Interaction, 2003. [5] H. Benko, A.D. Wilson, and P. Baudisch. Precise selection techniques for multi-touch screens. Proceedings of the SIGCHI conference on Human Factors in computing systems, pages 1263–1272, 2006. [6] Todd Bishop. Microsoft Surface brings computing to the table, 2008. http:// seattlepi.nwsource.com/business/317737_msftdevice30.html, laatst bezocht op 28 juli 2008. [7] C.H. Blickenstorfer. Graffiti: Wow. Pen Computing Magazine, 1:30–31, 1995. [8] J. Callahan, D. Hopkins, M. Weiser, and B. Shneiderman. An empirical comparison of pie vs. linear menus. Proceedings of the SIGCHI conference on Human factors in computing systems, pages 95–100, 1988. [9] C. Collberg, S. Kobourov, S. Kobes, B. Smith, S. Trush, and G. Yee. TetraTetris: A Study of Multi-User Touch-Based Interaction Using DiamondTouch. Human-Computer Interaction (INTERACT’95), pages 81–88, 2003. [10] M. Collomb, M. Hascoët, P. Baudisch, and B. Lee. Improving drag-and-drop on wall-size displays. Proceedings of the 2005 conference on Graphics interface, pages 25–32, 2005. [11] J. Davis and X. Chen. Lumipoint: multi-user laser-based interaction on large tiled displays. Displays, 23(5):205–211, 2002. [12] Glenn Derene. Microsoft Surface: Behind-the-Scenes First Look, 2008. http:// www.popularmechanics.com/technology/industry/4217348.html, laatst bezocht op 28 juli 2008.

94

Bibliografie

95

[13] Paul Dietz and Darren Leigh. DiamondTouch: a Multi-User Touch Technology. User interface software and technology, 2001. [14] R.R. Eckert and J.A. Moore. The Classroom of the 21st Century: The Interactive Learning Wall. SIGCHI Bulletin, 23(2):33–40, 2000. [15] S. Elrod, K. Pier, J. Tang, B. Welch, R. Bruce, R. Gold, D. Goldberg, F. Halasz, W. Janssen, D. Lee, et al. Liveboard: a large interactive display supporting group meetings, presentations, and remote collaboration. Proceedings of the SIGCHI conference on Human factors in computing systems, pages 599–607, 1992. [16] J. Geißler. Gedrics: The next generation of icons. Proceedings of the 5th International Conference on Human-Computer Interaction (INTERACT’95), pages 73–78, 1995. [17] J. Geißler. Shuffle, throw or take it! working efficiently with an interactive wall. Conference on Human Factors in Computing Systems, pages 265–266, 1998. [18] D. Goldberg and C. Richardson. Touch-typing with a stylus. Proceedings of the SIGCHI conference on Human factors in computing systems, pages 80–87, 1993. [19] C. Greiffenhagen. Out of the office into the school: electronic whiteboards for education. Programming Research Group Technical Report TR-16-00. Retrieved February, 11(2004):16–00, 2000. [20] F. Guimbretiere, M. Stone, and T. Winograd. Fluid Interaction with High-resolution Wall-size Displays. UIST’01: Proceedings of the 14th Annual ACM Symposium on User Interface Software and Technology, Orlando, Florida, November 11-14, 2001, 2001. [21] F. Guimbretiére and T. Winograd. FlowMenu: combining command, text, and data entry. Proceedings of the 13th annual ACM symposium on User interface software and technology, pages 213–216, 2000. [22] Jefferson Y. Han. Low-cost multi-touch sensing through frustrated total internal reflection. User interface software and technology, 2005. [23] M.S. Hancock, F.D. Vernier, D. Wigdor, S. Carpendale, and C. Shen. Rotation and Translation Mechanisms for Tabletop Interaction. Proceedings of the First IEEE International Workshop on Horizontal Interactive Human-Computer Systems, pages 79–88, 2006. [24] M. Hascoët. Throwing models for large displays. Proc. of HCI2003, pages 73–77. [25] U. Hinrichs, S. Carpendale, S.D. Scott, and E. Pattison. Interface currents: Supporting fluent collaboration on tabletop displays. Lecture notes in computer science, pages 185– 197. [26] T. Isenberg, P. Neumann, S. Carpendale, S. Nix, and S. Greenberg. Interactive Annotations on Large, High-Resolution Information Displays. Conf. Comp. VIS/Info-Vis/VAST, pages 124–125, 2006. [27] T. Isenberg, S. Nix, M. Schwarz, A. Miede, S. Scott, and S. Carpendale. Mobile Spatial Tools for Fluid Interaction. 2007.

Bibliografie

96

[28] P.A. Jedrysik, J. Moore, M. Brykowytch, and R. Sweed. The Interactive DataWall. Proceedings of the Command and Control Research and Technology Symposium, Naval War College, 29, 1999. [29] S. Jord` a, M. Kaltenbrunner, G. Geiger, and R. Bencina. The reacTable. Proceedings of the International Computer Music Conference (ICMC 2005), Barcelona, Spain, 2005. [30] A. Khan, G. Fitzmaurice, D. Almeida, N. Burtnyk, and G. Kurtenbach. A remote control interface for large displays. Proceedings of the 17th annual ACM symposium on User interface software and technology, pages 127–136, 2004. [31] C. Kirstein and H. Mueller. Interaction with a Projection Screen Using a Camera-tracked Laser Pointer. Proceedings of the 1998 Conference on MultiMedia Modeling, 1998. [32] S.R. Klemmer, M.W. Newman, R. Farrell, M. Bilezikjian, and J.A. Landay. The designers’ outpost: a tangible interface for collaborative web site. Proceedings of the 14th annual ACM symposium on User interface software and technology, pages 1–10, 2001. [33] H. Koike, Y. Sato, and Y. Kobayashi. Integrating Paper and Digital Information on EnhancedDesk: A Method for Realtime Finger Tracking on an Augmented Desk System. ACM Transactions on Computer-Human Interaction, 8(4):307–322, 2001. [34] R. Kruger, S. Carpendale, S.D. Scott, and A. Tang. Fluid integration of rotation and translation. Conference on Human Factors in Computing Systems, pages 601–610, 2005. [35] C. Krumbholz, J. Leigh, A. Johnson, L. Renambot, and R. Kooima. Lambda Table: High Resolution Tiled Display Table for Interacting with Large Visualizations. Proceedings of Fifth Workshop on Advanced Collaborative Environments, 2005. [36] W. Mackay and D. Pagani. Video Mosaic: laying out time in a physical space. Proceedings of the second ACM international conference on Multimedia, pages 165–172, 1994. [37] I.S. MacKenzie and S. Zhang. The immediate usability of Graffiti. Proceedings of Graphics Interface, 97:129–137, 1997. [38] S. Malik, A. Ranjan, and R. Balakrishnan. Interacting with large displays from a distance with vision-tracked multi-finger gestural input. Proceedings of the 18th annual ACM symposium on User interface software and technology, pages 43–52, 2005. [39] P. Mantey and J. Richards. Using large shared displays to create a collaborative classroom learning environment, 2005. [40] Microsoft. Microsoft Surface, 2008. http://www.microsoft.com/surface, laatst bezocht op 28 juli 2008. [41] Mitsubishi Electric Research Laboratories. MERL: DiamondTouch, 2008. http://www. merl.com/projects/DiamondTouch, laatst bezocht op 30 juli 2008. [42] T.P. Moran, E. Saund, W. Van Melle, A.U. Gujar, K.P. Fishkin, and B.L. Harrison. Design and technology for Collaborage: collaborative collages of information on physical walls. Proceedings of the 12th annual ACM symposium on User interface software and technology, pages 197–206, 1999.

Bibliografie

[43] Music Technology Group - Pompeu Fabra University. reactable.iua.upf.edu, laatst bezocht op 30 juli 2008.

97

reacTable, 2008.

http://

[44] D.R. Olsen Jr and T. Nielsen. Laser pointer interaction. Proceedings of the SIGCHI conference on Human factors in computing systems, pages 17–22, 2001. [45] J. Rekimoto. Pick-and-drop: a direct manipulation technique for multiple computer environments. Proceedings of the 10th annual ACM symposium on User interface software and technology, pages 31–39, 1997. [46] J. Rekimoto. A multiple device approach for supporting whiteboard-based interactions. Proceedings of the SIGCHI conference on Human factors in computing systems, pages 344–351, 1998. [47] J. Rekimoto. SmartSkin: an infrastructure for freehand manipulation on interactive surfaces. Proceedings of the SIGCHI conference on Human factors in computing systems: Changing our world, changing ourselves, pages 113–120, 2002. [48] J. Rekimoto and M. Saitoh. Augmented surfaces: a spatially continuous work space for hybrid computing environments. Proceedings of the SIGCHI conference on Human factors in computing systems: the CHI is the limit, pages 378–385, 1999. [49] Y. Rogers and S. Lindley. Collaborating around vertical and horizontal large interactive displays: which way is best? Interacting with Computers, 16(6):1133–1152, 2004. [50] K. Ryall, C. Forlines, C. Shen, and M.R. Morris. Exploring the effects of group size and table size on interactions with tabletop shared-display groupware. Proceedings of the 2004 ACM conference on Computer supported cooperative work, pages 284–293, 2004. [51] S.D. Scott, M.S.T. Carpendale, and S. Habelski. Storage Bins: Mobile Storage for Collaborative Tabletop Displays. IEEE Computer Graphics and Applications, pages 58– 65, 2005. [52] S.D. Scott, M. Sheelagh, T. Carpendale, and K.M. Inkpen. Territoriality in collaborative tabletop workspaces. Proceedings of the 2004 ACM conference on Computer supported cooperative work, pages 294–303, 2004. [53] Andrew Sears and Ben Shneiderman. High Precision Touchscreens: Design Strategies and Comparisons with a Mouse. International Journal of Man-Machine Studies, 34(4):593– 613, 1991. [54] C. Shen, K. Everitt, and K. Ryall. UbiTable: Impromptu Face-to-Face Collaboration on Horizontal Interactive Surfaces. Proc. UbiComp 2003, pages 281–288, 2003. [55] C. Shen, M.S. Hancock, C. Forlines, and F.D. Vernier. CoR2 Ds: Context-Rooted Rotatable Draggables for Tabletop Interaction. Conference on Human Factors in Computing Systems, pages 1781–1784, 2005. [56] C. Shen, K. Ryall, C. Forlines, A. Esenther, F.D. Vernier, K. Everitt, M. Wu, D. Wigdor, M.R. Morris, M. Hancock, et al. Informing the Design of Direct-Touch Tabletops. IEEE Computer Graphics and Applications, pages 36–46, 2006.

Bibliografie

98

[57] C. Shen, K. Ryall, C. Forlines, A. Esenther, F.D. Vernier, K. Everitt, M. Wu, D. Wigdor, M.R. Morris, M. Hancock, et al. Informing the Design of Direct-Touch Tabletops. Computer Graphics and Applications, pages 36–46, 2006. [58] C. Shen, F.D. Vernier, C. Forlines, and M. Ringel. DiamondSpin: an extensible toolkit for around-the-table interaction. Proceedings of the 2004 conference on Human factors in computing systems, pages 167–174, 2004. [59] SMART Technologies. DViT: Digital Vision Touch Technology white paper. 2003. [60] SMART Technologies. SMART Board, 2008. http://www.smartboard.be, laatst bezocht op 28 juli 2008. [61] J.P. Springer, C. Sladeczek, M. Scheffler, J. Hochstrate, B. Frohlich, and F. Melchior. A Survey of Large High-Resolution Display Technologies, Techniques, and Applications. Proceedings of the IEEE Virtual Reality Conference (VR 2006)-Volume 00, 2006. [62] Tactiva. TactaPad, 2008. http://www.tactiva.com, laatst bezocht op 30 juli 2008. [63] Smart Technologies. The Truth About Interactive Whiteboards, Pens and Fingers: Separating Myths from Facts. 2007. [64] Techpin. DiamondTouch vs Surface, 2008. multi-user-system, laatst bezocht op 28 juli 2008.

http://www.techpin.com/

[65] D. Vanacken, A. Demeure, K. Luyten, and K. Coninx. Ghosts in the Interface: Meta-user Interface Visualizations as Guides for Multi-touch Interaction. In 3rd IEEE International Workshop on Horizontal Interactive Human Computer Systems, 2008. TABLETOP 2008, pages 81–84, 2008. [66] F. Vernier, N. Lesh, and C. Shen. Visualization techniques for circular tabletop interfaces. Advanced Visual Interfaces, 2002. [67] P. Wellner. The DigitalDesk calculator: tangible manipulation on a desk top display. User interface software and technology, 1991. [68] P. Wellner. Interacting with paper on the DigitalDesk. Communications of the ACM, 36(7):87–96, 1993. [69] A.D. Wilson. TouchLight: an imaging touch screen and display for gesture-based interaction. Proceedings of the 6th international conference on Multimodal interfaces, pages 69–76, 2004. [70] M. Wu and R. Balakrishnan. Multi-finger and whole hand gestural interaction techniques for multi-user tabletop displays. Proceedings of the 16th annual ACM symposium on User interface software and technology, pages 193–202, 2003. [71] M. Wu, C. Shen, K. Ryall, C. Forlines, and R. Balakrishnan. Gesture Registration, Relaxation, and Reuse for Multi-Point Direct-Touch Surfaces. Proceedings of IEEE TableTop-the International Workshop on Horizontal Interactive Human Computer Systems, pages 183–190, 2006.

sáëì~äáò~íáçå=~åç=áåíéê~åíáçå=íéåüåáèìéë=íç=åçåíêçä= ãìäíáéäé=îáçéç=ëíêé~ãë

Recommend Documents