3th Dimensional Graphical User Interface (3d GUI)
Inleiding Bestaande gui’s Structuur Wat is een Graphical User Interface (GUI) Geschiedenis van de Graphical User Interface (GUI) Desktop metafoor GUI Navigatie / Besturing Cursor Navigatie Tekst invoer Visualisatie Gelaagdheid in de GUI Nieuw te ontwikkelen gui Structuur Hiërarchie in een interface Blokkendozen Navigatie / Besturing Navigatie in 3d Tekst Visualisatie Pictogrammen Visueel onderscheid Derde dimensie -3d op het platte vlak -3d Waarneming -3d Weergave -Bestaande 3d projectiemethoden -Alternatieve 3d projectie methode Nieuwe metafoor Boom metafoor Meerdere bomen Geen kader Conclusie eindresultaat Werking en visualisatie van mijn 3d gui conclusie
De online voorbeelden zijn te vinden op: http://www.wdka.hro.nl/~0531979/scriptie
1
Inleiding
Op welke manier kun je een personal computer en een ge-
Een gebruiker en een computer communiceren met elkaar
bruiker met elkaar laten communiceren en interacteren? :
via een interface. Een interface is eigenlijk een heel breed
• Hoe werd dit in het verleden opgelost?
begrip. Er wordt het gebied mee bedoeld tussen een ge-
• Hoe gebeurt dit tegenwoordig?
bruiker en een systeem. Een systeem hoeft niet persé een
• Wat moet er veranderen om de communicatie en de
elektronisch apparaat te zijn. Een deurklink is bijvoorbeeld
interactie in de toekomst te verbeteren?
ook een systeem. Een interface wordt gebruikt om het systeem duidelijk te
In het eerste gedeelte van mijn scriptie wil ik het verleden
maken aan de gebruiker, het tastbaar en begrijpbaar maken
en het heden van de computerinterface bekijken. In het
van het systeem. In het geval van de deurklink is de vorm
tweede gedeelte wil ik bekijken hoe technologische on-
van de deurklink de interface, door de klink vast te pakken
twikkelingen van nu of in de nabije toekomst toegepast
en naar beneden te bewegen zet je het systeem in werking.
kunnen worden om de interactie tussen computer en ge-
Het belangrijkste aspect van deze interface is de vorm, het
bruiker te verbeteren. Problemen die ik in het eerste deel
is een herkenbare vorm. De gebruiker ziet visuele over-
heb gesignaleerd probeer ik in het tweede deel op te los-
eenkomsten met andere deurklinken. De gebruiker heeft
sen door alternatieven aan te dragen. Zo wil ik uiteindelijk
ooit geleerd hoe deze interface bestuurd moet worden.
een richting aangeven voor een nieuw te ontwikkelen GUI en bediening hiervan.
Een ander voorbeelden van een systeem met bijbehorende interface is een mobiele telefoon. Het systeem is een apparaat dat er voor zorgt dat je kunt communiceren met
Deel 1:
andere personen. De interface is het toetsenbord en het
Bestaande computerinterfaces en hun besturing.
display. Via het display verstrekt het systeem informatie aan de gebruiker. Via het toetsenbord kan de gebruiker opdrachten geven.
Wat is een Graphical User Interface (GUI)
Als de visuele herkenning er niet is, dan moet de gebruiker
*Direct Manipulation: http://developer.apple.com/techpubs/mac/
de interface eerst begrijpen.
HIGuidelines/HIGuidelines-18.html#heading18-0
Dit is ook het geval met de gebruiker en zijn mobiele telefoon, of de gebruiker en zijn computer. Hier zorgt de
De computerinterface bestaat uit een aantal onderdelen:
interface er ook voor dat het systeem en de gebruiker met
• De muis
elkaar kunnen communiceren. De interface zorgt ervoor
• Het toetsenbord
dat er een interactie kan ontstaan tussen de gebruiker en
• Het beeldscherm
het systeem.
• Het besturingssysteem Het besturingssysteem zorgt voor de interactie tussen
In mijn scriptie wil ik mij verdiepen in de wereld van com-
de eerste drie elementen en de computer zelf. Alle op-
municatie tussen een gebruiker en een computer. Ik wil
drachten die de gebruiker aan de computer geeft lopen
bekijken hoe de computerinterface is geëvolueerd tot
meestal via de muis of het toetsenbord naar het bestur-
de personal computerinterfaces die we nu kennen, zoals
ingssysteem. Het besturingssysteem zorgt ervoor dat de
onder andere Windows, Macintosh OS en Linux. Daar wil
computer de opdracht in zijn eigen taal krijgt en dat de
ik het niet bij laten, want ik wil ook bekijken op welke
gebruiker feedback krijgt op zijn opdracht. Bijvoorbeeld
manier de computerinterfaces en hun bediening in de toe-
wanneer de gebruiker een “a” op het toetsenbord indrukt
komst kunnen evolueren zodat ze de gebruiker nog beter
dan ziet de gebruiker een “a” op het beeldscherm en krijgt
van dienst kunnen zijn.
de computer een code door die voor “a” staat. Dit heet
Kort samengevat komt het op de volgende vraagstelling
direct manipulation, het is een belangrijk element voor een
neer:
interface. Apple heeft het zelfs in zijn Human Interface Guidlines staan*.
2
Een besturingssysteem dat gebruik maakt van grafische ob-
om te zetten naar bewegingen van de cursor op het scherm.
jecten zoals plaatjes en pictogrammen in combinatie met
Het werkte een stuk sneller dan wanneer de cursor met
tekst, noemen we een graphical user interface (GUI).
de pijltjes toetsen op het toetsenbord voortbewogen
Een besturingssysteem dat alleen maar gebruik maakt van
moest worden. Deze ideeën fascineerden de medewerkers
tekst en getallen noemen we een command-line interface.
van Engelbart, maar werd bijna nutteloos geacht buiten
De gebruiker geeft het besturingssysteem tekstuele op-
het lab.
drachten.
In 1968 creëerde Engelbart NLS (oNLine System), een
De meest gebruikte besturingssystemen voor Personal
hypermedia groupware systeem dat gebruik maakte van
Computers op dit moment zijn: Microsoft Windows, Mac
de muis, en een GUI. Hypermedia, waarmee een object
OS en Linux (combinatie van GUI en Command-line in-
geadresseerd kon worden gelinkt. Er werd zelfs gebruik
terface).
gemaakt van een vroege versie van video conferencing om het publiek, een groep technici, ingenieurs en wetenschappelijke types van Stanford University, te verbazen.
Geschiedenis van de Graphical User Interface (GUI)*
Maar Engelbart was niet de enige visionair uit de ge-
*Bron: http://www.knudde.be/index.php?page_name=gui&page=1
schiedenis van de GUI. In 1963 maakte Ivan Sutherland, een student aan het MIT, voor een Thesis Sketchpad, een
De communicatie tussen mens en computer is iets waar
programma dat direct objecten manipuleerde op het sch-
we toch al een hele tijd mee bezig zijn. In de beginjaren
erm met behulp van een lichtpen.
moest je toch al vele jaren gestudeerd hebben om met een
Sketchpad was een van de pioniers in het concept Graphical
computer te kunnen communiceren. De computerinter-
Computing. Ze maakte gebruik van geheugen structuren
faces waren toen vrij ingewikkeld. Het was ook niet de
om objecten in op te slaan, het was mogelijk om in en uit
bedoeling dat iedereen thuis zo’n computer had staan.
te zoomen op het display. Er was de mogelijkheid om per-
Als het aan die gebruikers zou liggen dan was het waarschi-
fecte lijnen hoeken en verbindingen te maken.
jnlijk altijd zo gebleven, zij konden er immers mee werken.
Dit was de eerste GUI, zelfs lang voordat de term bedacht
Toch waren er in 1945 al visionairs die de potentie van de
was.
computers inzagen voor het grote publiek. Eén van deze personen was Vannevar Bush (wetenschapper en futurist).
Het volgende stukje is uit een Sun Microsystems (elec-
Hij maakte zijn ideeën aan het grote publiek bekend over
tronica bedrijf) biografie van Ivan Sutherland:
Memex, een computerapparaat dat gebruik maakte van iets
“Het idee om objecten rechtstreeks te manipuleren op het
wat wij nu “Hyperlink technologie” noemen om informatie
scherm zit in het concept van de GUI. In feite is de GUI
tot de vingertoppen van iedere gebruiker te brengen.
afgeleid van cognitieve psychologie, de studie van hoe het brein omgaat met communicatie. Het idee is dat het brein
De ideeën van Bush spoorde het toekomstgericht denken
veel efficiënter werkt met grafische pictogrammen en
aan in een wetenschapper genaamd Douglas Engelbart. In
schermen dan met woorden. Woorden zorgen voor een
1962 creëerde deze Douglas Engelbart enkele interes-
extra laag van interpretatie in het communicatieproces.
sante dingen voor het computerpubliek. Hij vond de “X-Y
Stel je voor dat alle verkeersborden er hetzelfde uitzagen,
Position Indicator” uit, hetgeen wij nu muis noemen. Een
maar allen de woorden erop zouden voor het onderscheid
houten doosje met daarin een balletje, dat bewoog op
zorgen. Dan zou een “stop”-bord er hetzelfde uitzien als
wieltjes en de cursor bij het bewegen met zich meenam.
een “voorrangsbord”-bord. Het onderscheiden van de ver-
Hij vond ook een GUI uit die gebruik maakte van vensters
schillende borden wordt trager en moeilijker.
om groepen informatie bij elkaar te laten zien, hetgeen hij
We zouden dan nog meer ongelukken krijgen dan we nu
een “gevensterde GUI” noemde uit. Volgens Engelbart was
hebben.
de muis een essentieel onderdeel van zijn GUI. De muis
Engelbart en Sutherland’s creaties bleven echter niet
was namelijk instaat om bewegingen te registreren en die
onopgemerkt voor de creatievelingen van Xerox’s PARC
3
(Palo Alto Research Center),dit was (en is), tenminste op bepaalde vlakken, een computer denktank, waar een stel knappe koppen ideeën produceren en deze met wisselend succes proberen te implementeren. In het begin van de jaren 70 ontwierpen Alan Kay en anderen een object georiënteerde programmeertaal genaamd “Smalltalk”. In deze programmeertaal werd gebruik gemaakt van allerlei vooruitstrevende ideeën op het computergebied, die ideeën werden “geleend” van allerlei
DOSSHELL
andere projecten. Na al die ideeën bij elkaar gebracht te hebben in Smalltalk hadden ze daarbij een interface
dmv de muis of de pijltjes toetsen op het toetsenbord.
ontwikkeld die verdacht veel lijkt op de later gekomen
Later ontwikkelde Microsoft: Windows. Windows maakte
versies van Apple en Microsoft.
nu net als Apple al met LISA deed, gebruik van de Desktop metafoor.
Apple had eigenlijk al snel het GUI principe geadopteerd met Apple LISA (1983), terwijl Microsoft nog vrij lang met de Command-line interface werkte. Dit is een interface
Desktop metafoor GUI
waarin je de computer tekstuele opdrachten geeft. Een
* Metaphors: http://developer.apple.com/techpubs/mac/HIGuidelines/
voorbeeld van MS-DOS:
HIGuidelines-17.html#heading17-0
De onderzoekers en ontwikkelaars van Xerox PARC produceerde een systeem dat niet beruste op een commandline interface (de gebruiker geeft zijn opdrachten via een regel met codes) zoals bv MS-DOS, maar op een grafische interface waarbij ze gebruik maakte van metaforen. De metaforen* zorgen ervoor dat er voor een onervaren
MS-DOS
gebruiker een aantal herkenbare elementen inzitten. Deze elementen zijn bijvoorbeeld afgeleid van de werkelijkheid. Op deze manier is de abstracte data en de structuur weer te geven in herkenbare elementen. Zelfs een leek kan een ingewikkeld systeem makkelijker begrijpen als de interface eromheen gebaseerd is op visuele elementen en handelingen uit de werkelijkheid. Bij PARC waren ze ook bezig met de vraag, hoe ze de communicatie tussen een computer en een gebruiker konden verbeteren. Ze kwamen met de volgende oplossing. De werkomgeving op het scherm was een metaforisch kantoor, met een bureaublad als belangrijkste werkveld. Ze
Apple LISA
maakte gebruik van mappen om groepen bestanden ofwel Veel gebruikers vonden DOS niet erg handig werken.Voor
directory’s weer te geven, de bestanden werden docu-
deze mensen werd er DOSSHELL ontwikkeld. Dit was een
menten genoemd en deze werden in de mappen geplaatst,
programma wat DOS aanstuurde, een soort omhulsel.
net zoals je op een gewoon kantoor tegen komt. Mappen
De gebruiker zag een overzichtelijk scherm over DOS
en documenten kon je verplaatsen door ze op te pakken
heen. In dit scherm kon de gebruiker de cursor bewegen
en in een andere map los te laten. Dat is wel wat anders
4
dan dat je in een command-line interface zou doe. Dat ziet
diepte. Als je echter vier of vijf mappen hebt geopend dan
er ongeveer zo uit: naambestand\>copy *.* naamnieuwedi-
is er weinig overzicht meer. Het is ook niet makkelijk te
rectory. Voor een leek is de metaforische interface sneller
zien waar de map zich bevindt, niet op het scherm, maar in
te begrijpen dan de command-line interface. Dit is omdat
de mappenstructuur van de GUI.
de metaforische interface gebruik maakt van handelingen die we eigenlijk al kennen. Het verplaatsen van objecten door ze op te pakken te verschuiven en daarna weer los te laten is ook weer zo’n handeling die afgeleid is van de werkelijkheid. Wanneer je documenten wilt verwijderen dan sleep je ze naar de prullenbak. Deze documenten kun je eventueel nog uit de prullenbak halen. Als je de prullenbak leegt dan zijn de bestanden ook echt weg, ze zijn zegmaar met de het oud papier mee. Om het geheel te besturen wordt een pijltje gebruikt. Dit symbool is niet afgeleid uit de kantoor omgeving. Het is wel een cruciaal element voor het besturen van de interface. Een ander essentieel onderdeel dat ook niet is
desktop overladen met mappen
afgeleid van de kantoor omgeving is het “pull-down menu”. Bv je klikt op “bestand” of “file” en er verschijnt een menu
Apple heeft met OS X iets nieuws bedacht dat er voor
waarin je meerdere keuzes kunt maken, gerelateerd aan
zorgt dat je makkelijk kunt zien welke weg je aflegt voordat
“bestand” of “file”.
je bij een bepaalde map bent. De mappen worden naast elkaar geopend zonder dat ze over elkaar komen te liggen. Op deze manier houd de gebruiker overzicht over het pad wat door hem of haar is afgelegd. Het is ook mogelijk om door je afgelegde traject heen en weer te scrollen.
dit ___________ is een pull down menu
Het scrollen zoals wij het kennen is eigenlijk een metafoor voor een papierrol die aan de ene kant wordt opgerold en aan de andere kant wordt afgerold. De Desktop metafoor GUI zoals Apple OS, Windows en
OS X mappen overzichtelijk naast
Linux die gebruiken, bestaat eigenlijk uit een combinatie
elkaar
van metaforen. Dit maakt het voor de gebruiker makkelijker om de interface te begrijpen.
Het is wel jammer dat op het moment dat je een splitsing maakt halverwege het afgelegde pad, dat het andere pad
Gelaagdheid in de GUI
voorbij de splitsing helemaal verdwijnt. Het pad blijft eigen-
De Desktop GUI is eigenlijk niet twee dimensionaal, maar
lijk eendimensionaal. Er is alleen een rechte lijn mogelijk.
twee en een half dimensionaal. Er wordt namelijk gebruik gemaakt van lagen. Iedere keer als je een map opent dan komt deze over de andere al geopende mappen en de desktop te liggen. Hiermee suggereer je eigenlijk een soort
1 dimensionaal
5
2 dimensionaal
Navigatie / besturing
maar wel steeds vaker bij muisgebruikers voor). Als alternatief voor de muis is er het tekentablet. Dit is
Cursor Navigatie
een pennetje met een plankje waar je op kunt tekenen,
De muis, een apparaatje waar we bijna niet meer zonder
de bewegingen worden direct doorgestuurd naar de com-
kunnen bij het besturen van een GUI. Het werkt zo goed
puter, net als bij de muis. Het pennetje is oorspronkelijk
omdat het eigenlijk de beweging van je hand volgt, het is
bedoeld om te tekenen op de computer, het is echter ook
een stuk natuurlijker dan dat je met de vier pijltjes toetsen
goed te gebruiken als alternatief op de muis. In het begin
(boven, beneden, links en rechts) de cursor voort moet
is het even wennen, maar na een tijdje vinden de meeste
bewegen. De muis zorgt ervoor dat we een object op het
gebruikers het fijner werken dan de muis. Het voordeel
beeldscherm praktisch aan kunnen wijzen. Het feit dat de
hiervan is dat het een natuurlijkere beweging is dan het
muis naast je ligt en de cursor op het scherm voor je be-
muizen (minder kans op RSI). Met een pen is het mogelijk
weegt is iets waar we ons vrij snel aan kunnen aanpassen.
om kleinere preciezere bewegingen te maken dan met een
Bij beginnende muis gebruikers zie je dat ze er toch wat
muis. Helaas bestaat er ook zo iets als een schrijversarm,
moeite mee hebben. Een ervaren gebruiker zal dit niet snel
ook een vorm van RSI, maar omdat de arm zich in een iets
snappen, het is toch logisch hoe het werkt. Eigenlijk wil dit
natuurlijkere positie bevindt duurt dit wel langer dan wan-
zeggen dat de muis lang niet zo natuurlijk is dan we denken.
neer een muis gebruikt wordt.
Dit komt onder andere door de afstand tussen de muis en de cursor. Ze zouden eigenlijk op elkaar moeten liggen
Tekst invoer
want ze geven dezelfde beweging aan. Het is natuurlijker
*Qwerty toetsenbord: http://home.planet.nl/~bouwl003/dutch/
dat je objecten kunt aanwijzen en vast kunt pakken op het
historie2.html#Qwerty
scherm. Dit gaat echter niet omdat bijna alle programma’s
**microwriting: http://www.electronsoup.com/xcom/Input/Chording/
voor de muis gemaakt zijn. Er wordt gebruik gemaakt van
*** DataHand Keyboard: http://www.keyalt.com/techtv-specials.htm
kleine knoppen die te klein zijn om
Het toetsenbord (qwerty) dat we nu gebruiken is al sinds
met je vinger aan
1874 onveranderd.
te wijzen zonder
De door Sholes gemaakte typemachine was voorzien van
dat je de om-
de letters in alfabetische volgorde. Bij het bedrijf Rem-
liggende knoppen
ington werd vastgesteld dat de lettervolgorde verbeterd
aanraakt. Je zou
moest worden. Bij twee opeenvolgende aanslagen van naast
dit probleem kun-
elkaar geplaatste letterarmen kwamen deze met elkaar in
nen oplossen door
aanraking. Vandaar de invoer van QWERTY, de eerste zes
met een pen op het beeldscherm te werken (het scherm
letters linksboven. Omdat dit gebaseerd is op gebruik van
moet dan wel lager en bijna horizontaal gepositioneerd
de Engelse taal, had men in andere talen daarmee wel meer
moeten worden). PDA’s (personal digital assistants) werk-
problemen. Later heeft men geprobeerd de volgorde te
en volgens dit principe.
veranderen, echter de macht van de gewoonte heeft hier
PDA
gewonnen*. De muis heeft voordelen maar toch ook een groot nadeel. Om een muis te besturen heb je maar weinig spieren
In de jaren 70 werd er door The
nodig. Deze spieren worden bij overmatig muis gebruik
Microwriting system** een key
vaak overbelast, daar komt ook nog bij dat de positie
board ontwikkeld met slechts
waarin de arm, pols en hand zich bevinden niet erg natu-
5 toetsen voor iedere hand, ze
urlijk is. Dit alles zorgt voor een bij de meeste mensen wel
waren zo geplaatst dat de handen
bekend probleem, genaamd RSI. Eigenlijk wil het gewoon
in een natuurlijke positie gehouden konden worden. Een
zeggen dat door een bepaalde herhaaldelijke beweging een
zesde toets werd als command toets gebruikt. Met deze
aantal spieren overbelast worden (dit komt niet alleen,
toetsen konden 64 tekens gemaakt worden.
6
Dit toetsenbord werkt sneller dan een qwerty toetsenbord.
Deel 2: Nieuw te ontwikkelen GUI en besturing.
Het heeft echter maar een beperkte groep gebruikers. Structuur
Er worden nog steeds varianten ontwikkeld op het qwerty toetsenbord. Eén daarvan is ook weer van Microwriting. Het is een soort keypad, CyKey genaamd, dat door één
Hiërarchie in een interface
hand bediend kan worden. Het is uitermate geschikt voor
Een cruciaal element dat in de bestaande GUI’s niet echt
pda’s, maar kan ook gebruikt worden voor gewone com-
gebruikt wordt is een duidelijke hiërarchische structuur
puters. Het maakt gebruik van een heel ander systeem dan
die afhankelijk is van het gebruik van de interface. Element-
het qwerty toetsenbord.
en die de gebruiker vaak nodig heeft moeten belangrijker zijn dan elementen die de gebruiker maar weinig nodig heeft. Microsoft Windows heeft wel iets dat een beetje in de buurt komt. Opties uit pulldown menu’s die al een tijdje niet gebruikt zijn worden weggestopt onder een knop. Als je op de knop klikt dan verschijnen al deze opties weer in
CyKey en Schema
het pulldown menu. Er wordt echter geen verschil gemaakt tussen weinig en niet gebruikte opties. Het is zichtbaar of onzichtbaar. Eigenlijk is het beter wanneer de mappen op de desktop Een andere recente variant op het qwerty toetsenbord is
ook een hiërarchisch structuur hebben. Mappen of snelko-
het “DataHand ergonomic keyboard”.*** Dit is een naar
ppelingen (naar andere programma’s) moeten transpar-
de hand gevormd toetsen bord, met aan alle vingertoppen
anter worden naarmate ze minder gebruikt worden. Op
een set knoppen. De vingers hoeven maar een minimale
deze manier past de GUI zich een klein beetje aan, aan het
afstand af te leggen om bij hun doel te komen.
gedrag van de gebruiker. De voor de gebruiker minder nuttige informatie wordt zo naar de achtergrond verschoven, zodat er weinig onnodige informatie in het zicht van de gebruiker staat. Dit zorgt er weer voor dat de gebruiker sneller kan werken. Blokkendozen Dit is een praktijkvoorbeeld van het hiërarchisch indelen, waar ik in een interface naar toe wil, van veel, weinig en niet gebruikte elementen zoals we dit in de werkelijkheid
DataHand Keyboard
doen. Voice recognition is tegenwoordig een aanvulling, of zelfs
Iedereen kent het nog wel van vroeger je bent met een
een gedeeltelijke vervanger van het toetsenbord. De ge-
blokkendoos aan het spelen. Alle blokjes die je wilt ge-
bruiker praat tegen de computer en de computer zet het
bruiken leg je dichtbij. De blokken die je niet wilt gebruiken
om in getypte tekst. Het enige nadeel is dat de gebruiker
leg je verder weg.
eerst het hele alfabet en bepaalde woordcombinaties met
Stel je voor dat je nu met een aantal blokkendozen tegelijk
de computer moet doornemen alvorens het te kunnen
aan het spelen bent.
gebruiken, maar naarmate de spraakherkenningsoftware
Er staan 30 dozen voor je. Ze zijn allemaal verschillend, de
beter wordt zal in de toekomst verdwijnen. Deze manier
ene is rood de ander groen, weer een ander is heel groot.
van tekst invoer gaat aanzienlijk sneller dan het met de
Stel dat je nu alleen met de rode, groene en witte blokken-
hand typen van de tekst. Het is ook een veel natuurlijkere
doos wilt gaan spelen. Dan pak je de drie dozen en zet ze
manier van werken.
bij elkaar neer zodat alle drie de dozen binnen handbereik liggen. Als je nu een aantal blokken van de oranje blokken-
7
doos wilt hebben en er is geen plaats meer om je heen, dan
een ruimte te navigeren. Virtual Reality zit ook heel dicht
zet je de doos dichtbij de plek waar je aan het spelen bent.
bij de werkelijkheid, Als je bepaalde handschoenen (of
Je gaat natuurlijk niet de hele tijd op en neer lopen van je
een soort pak) aantrekt dan kun je gebruik maken van je
werkplek tot de andere kant van de kamer en weer terug.
handen en armen in de virtuele wereld. Je ziet je armen dan ook in de virtuele wereld. Je kunt er objecten mee
Dit idee wil ik gebruiken voor de 3dinterface. Bestanden
vast pakken, dit voelt niet echt natuurlijk aan, want je pakt
(blokken) en mappen (blokkendozen) die je veel gebruikt
dan een virtueel iets vast, iets wat niet echt bestaat. Hier
staan vooraan.
heeft het bedrijf Immersion* iets op gevonden, namelijk
Waarvoor is die derde dimensie nu nodig? Die is nodig
het CyberForce® systeem
voor het overzicht. BV. Je zit in het midden van de kamer te spelen en je wilt een aantal rode blokjes hebben. Je weet dat je al lang geen rode blokjes meer hebt gebruikt, dat wil dus zeggen dat de rode blokkendoos ergens achter aan moet staan. Je kijkt om je heen en je ziet binnen een oogopslag de rode blokkendoos staan. Een ander voorbeeld. Je gaat op vakantie naar de Spaanse Costa, met het vliegtuig wel te verstaan. Je neemt 2 stuks bagage mee, een tas (handbagage) en een grote koffer.
CyberForce, CyberGlove en de Cybergrasp
Als je alles effectief in gaat pakken dan stop je in de koffer spullen die je pas op je bestemming nodig hebt, zoals extra
Dit is een armatuur bevestigd aan twee handschoenen dat
kleren en schoenen. In de handbagage stop je spullen die je
voor weerstand kan zorgen. Als je een object vastpakt dan
eventueel onderweg nodig zult hebben, of spullen die erg
zorgt het apparaat dat je het object echt kunt voelen. Als
belangrijk zijn.
het object zwaar is dan zorgt het apparaat dat je arm naar beneden gedrukt wordt. Dit maakt de beleving wel veel echter.
Navigatie / besturing
In een virtual reality wereld wordt vaak gebruik gemaakt van een letterlijk vertaalde wereld. Het is eigenlijk te
Navigatie in 3d
realistisch om in een 3dGUI te stoppen. Een GUI haalt
*
http://www.immersion.com
zijn kracht uit een toch wat abstractere weergave van de
**
Hand-shape recognition: http://www.ercim.org/publication/Ercim_
werkelijkheid, door middel van metaforen. Er worden wel
News/enw46/shamaie.html
interessante dingen ontdekt door middel van virtual real-
movement tracker: http://www.ai.mit.edu/people/trevor/
ity die goed te gebruiken zijn in een 3d interface. Neem nu
papers/1997-045/node2.html
het gegeven dat je met je handen iets vast kunt pakken en in de ruimte kunt verplaatsen, dat is goed te gebruiken als
Bijna alle cursor navigatie apparaten (muis, tablet en track-
navigatie aanvulling in de 3d GUI.
erball) zijn twee dimensionaal. Dat wil zeggen dat ze alleen
We gebruiken nu de muis om de cursor te besturen. Stel
maar over de X-as (horizontaal) en de Y-as (verticaal)
dat je nu de computer kunt besturen met je handen en
kunnen bewegen. Voor een 3d omgeving is dit erg lastig
armen. Via een soort gebaren taal kun je de computer op-
want de derde dimensie beschikt ook nog over een Z-as
drachten. Met je handen kun je veel verschillende beweg-
(diepte). Er zijn wel apparaten die zich over 3 assen kunnen
ingen maken, je hebt immers 5 vingers aan iedere hand (op
bewegen zoals een spaceball.
een reguliere muis kun je vaak maar drie vingers gebruiken
In virtual reality (een virtuele 3d omgeving waarover straks
om commando’s te geven aan de computer). Bv er staan
meer) maak je gebruik van je hele lichaam om jezelf door
drie objecten voor je, je wilt ze groeperen zodat ze een
8
soort map worden. Teken er een vierkantje om heen en
stukken beeldscherm tekst is dus printen. Is dit nu echt
grijp ze bij elkaar door je handpalm er op te leggen en hem
een oplossing? Op deze manier creëren we er eigenlijk
dan samen te knijpen tot een gebalde vuist. Zo groepeer
een aantal problemen bij. Het papierverbruik is explosief
je de objecten die voor je staan objecten. Pak de objecten
gestegen sinds de opkomst van de computer, we jagen
met je duim en wijsvinger vast en sleep ze naar een andere
onszelf onnodig op kosten door alles maar te printen.
plaats.
Eigenlijk is dit alles maar vreemd, want we hebben een
In de film Minority Report wordt deze manier van navigatie
medium dat uitstekend geschikt is voor beeld en geluid,
en interface besturing gebruikt.
en in iets mindere maten geschikt is voor tekst. Waarom gebruiken we de eerste twee niet wat meer? De mens kan namelijk uitstekend functioneren met alleen beeld en geluid (gesproken tekst). Gesproken tekst kan nooit altijd een vervanging zijn voor geschreven tekst, Er moet eerst duidelijk gekeken worden naar het doel van de tekst. Voor lange stukken tekst is gesproken tekst uitstekend geschikt. Een interessante stem is dan wel cruciaal. De gesproken tekst is nog efficiënter wanneer het interactief
Dit lijkt allemaal science fiction maar dat is het niet, het
wordt gemaakt. Een gebruiker kan dan een hoofdstuk uit-
wordt alleen nog niet toegepast in een normale computer
zoeken dat hem of haar interessant lijkt. Stel dat je naar
interface. Er bestaan namelijk een systemen die kunnen
een website gaat, je krijgt dan geen lappen tekst meer te
zien wat voor beweging een gebruiker met zijn hand of
zien, maar een soort interactieve documentaire.
arm of vingers maakt. Een gebalde vuist of een wijzende
Wanneer een gebruiker snel keuzes moet maken en
vinger kunnen gemakkelijk door de computer herkend
onderlinge verschillen tussen een aantal woorden moet
worden. Dit heet Hand Face Recognition**.
kunnen aanwijzen, dan is geschreven tekst veel efficiën-
Eén van die systemen is door het bedrijf immersion* on-
ter dan gesproken tekst. Neem nu bijvoorbeeld multiple
twikkeld. Het heet de cyberglove. Dit is een handschoen
choice vragen. Dit is veel overzichtelijker in geschreven
die gebruikt kan worden als drie dimensionale muis. Deze
vorm dan in gesproken vorm. De gebruiker kan voor
handschoen kan registreren hoe een gebruiker zijn arm en
zichzelf rustig de vraag analyseren en de antwoorden één
arm beweegt. Het kan zelfs vingerbewegingen registreren.
voor één bekijken.
Dit systeem wordt gebruikt als 3d muis om door virtuele
Een ander voorbeeld. Uit een rijtje met bestanden net dat
vliegtuigmodellen heen te bewegen door vliegtuig fabrikant
bestand kiezen wat je nodig hebt gaat sneller wanneer de
Boeing.
namen van de bestanden er naast staan ipv dat de bestand-
Het voordeel van deze manier van interface besturing is
en één voor één worden voorgelezen door de computer.
dat de kans op RSI erg klein is geworden. Je maakt namelijk gebruik van je hele bovenlijf in plaats van alleen je on-
Wanneer een gebruiker snel beslissingen moet nemen dan
derarm. Je kunt ook je vinger combinaties gebruiken om
is het gebruik van tekst in combinatie met pictogrammen
opdrachten te geven aan de computer.
veel efficiënter dan gesproken tekst. Daarentegen is gesproken tekst (in combinatie met bewegend of stilstaand beeld) weer veel efficiënter voor lange stukken tekst.
Tekst Het lezen van lange stukken tekst op een beeldscherm kost erg veel concentratie. Voor veel mensen is het ook erg vermoeiend. En dat terwijl het lezen van tekst op papier minder inspanning vergt. De oplossing voor lange
9
Visualisatie
(dit wordt gebruikt om de “dekstop” metafoor te versterken). Documenten die met een bepaald programma
Pictogrammen*
gemaakt worden krijgen een icon dat bij het programma
*
Pictogrammen en iconen, door Patricia Ruisch en Erna Theys,
hoort. Bv Het icon van het programma Word is een “W”.
Eindhoven 1998, pag 4 Charles S. Pierce
Alle documenten die met dit programma gemaakt worden krijgen een icon dat eruit ziet als een tekstvelletje met een
Bij een metaforische interface is belangrijk om te weten
“W” erop. Zo zie je meteen in welk programma het docu-
hoe je met de interface om moet gaan en hoe de structuur
ment gemaakt is.
eruit ziet. Dit is echter niet het enige. Een ander belangrijk
Het voordeel van de icons is dat je in een oogopslag ziet
element voor het snel kunnen werken met de interface,
met wat voor document je te maken hebt, mits je het icon
zijn pictogrammen.
herkend. Dit zorgt ervoor dat je sneller kunt werken. Je
Ze zijn onder te verdelen in iconen, symbolen en indices
kunt nooit alle icons herkennen die worden gebruikt, maar
(aanwijzingen). Ze worden overal om ons heen gebruikt.
wel degenene die je het meest gebruikt.
In het verkeer, op stations, vliegvelden, in de industrie, op
Sommige bestanden laten een als icon een voorvertoning
elektronische apparaten, enz.
zien van de inhoud van het bestand. Bv een foto krijgt i.p.v. een Photoshop (programma) icon, een verkleinde versie
Een symbolisch pictogram is een abstract beeld waar een
van de foto zien. Voor een tekstverwerkingsprogramma
betekenis aan gekoppeld wordt. Bv een pijl, die geeft een
heeft zoiets weinig zin, want je kunt de tekst toch niet
richting aan waar we naar moeten kijken of waar we naar
lezen.
toe moeten. Symbolen moeten echter wel vaak geleerd worden. Je kunt namelijk niet altijd aan het figuur zien wat de betekenis ervan is. Neem nu het symbool voor nucle-
Photoshop icon
air energie, dat is een stip met daar om heen drie ronde
met en zonder voorver-
vlakken. De betekenis van het figuur moet geleerd worden.
toning van de inhoud
Symbolen, mits gestandaardiseerd, zijn universeel. Visueel onderscheid* * Preattentive Processing in Visualization: http://www.csc.ncsu.edu/faculty/ healey/PP/PP.html
De mens heeft de eigenschap om sommige vormen en
dit zijn symbolen, ze moeten geleerd worden.
kleuren in een oogopslag te herkennen zonder dat er over Een iconisch pictogram vertoon in grote mate de gelijkenis
nagedacht of gezocht moet worden. We zijn in staat om,
naar het object waar naar verwezen wordt. Bv twee lo-
in één oogopslag, tussen allerlei objecten één object te
pende kinderen staat voor overstekende kinderen.
vinden wat afwijkt van de andere objecten. In dit geval is het ene object dat afwijkt het “target” (doel) en de andere
Een index is een teken dat indirect naar zijn object verwijst.
objecten zijn in dit geval de “distractors” (afleiders). Hier
Zo kan een pleister op een menselijk figuur verwijzen naar
volgt een voorbeeld. Het is snel te zien of het target aan-
een verwonding.
wezig is of niet.
De pictogrammen die op het beeldscherm gebruikt worden noemt men “icons” (niet te verwarren met iconisch pictogrammen) Het zijn vaak symbolische pictogrammen gecombineerd met iconische en indexachtige elementen. Bv. Een afbeelding van een map of prullenbak
10
Het kleurgebruik zorgt ervoor dat we nog sneller het tar-
de datastructuur voortbewegen om uiteindelijk bij je doel
get kunnen zien. Zonder kleur gaat het echter ook.
te komen, je legt een pad af. Stel je nu eens voor dat je die data keer op keer nodig hebt, je moet dan iedere keer hetzelfde pad afleggen en dit kost tijd. Het zou toch veel mooier zijn dat de interface dit pad voor jou onthoud en het ook laat zien. Je hoef dan niet iedere keer het traject af te leggen. Je kunt dan direct naar het einddoel. Op deze manier ontstaan er zichtbare patronen in de interface die afhankelijk zijn van het gebruik van de interface en de gebruiker. Er ontstaat ook patroon herkenning. Dit gegeven
Op het moment dat de er objecten zijn met dezelfde
wil ik gebruiken voor mijn 3d GUI, het is namelijk een
vorm of dezelfde kleur in één gebied dan kunnen we het
manier om een gebruikersafhankelijke structuur in de data
onderscheid niet meer in één oogopslag maken. Er moet
weergave te creëren.
nu gezocht worden naar het target en dat kost tijd. Zie het volgende voorbeeld. schematische structuur, geen hierarchie
hierarchische structuur dmv grootte
Door gebruik van kleurgradaties is het ook mogelijk om een target in één oogopslag te zien. hierarchische structuur
Symmetrische Patronen kunnen helpen bij het in één oog-
dmv grootte en helderheid
opslag vinden van het target.
Derde Dimensie 3d op het platte vlak* *
Information Graphics, door Peter Wilbur en Michael Burke, 1998 Londen, hoofdstukken: - Controlling the input - Interacting with the screen - Exploring the 3d interface
Om iets te bereiken moeten we een doel voor ogen hebben. Om dit doel te bereiken moeten we een aantal op
De behoefte om drie dimensionale objecten in de ruimte
een volgende dingen doen. We moeten bijvoorbeeld een
weer te kunnen geven bestaat al sinds de Renaissance, toen
traject afleggen. De meeste mensen werken volgens een
schilders zochten naar een manier om objecten ruimtelijk
bepaald patroon om hun doel te bereiken. Stel je weer-
te tekenen zodat het perspectivisch klopte. Ze onderzo-
spiegelt dit op een interface. De opdracht die je jezelf geeft
chte veranderingen in horizontale en verticale lijnen in een
is het bewerken van bepaalde data. Je moet je eerst door
ruimtelijk object.
11
Ze bekeken het object van verschillende afstanden. Ze
De derde dimensie is iets dat voor ons normaal is, waar
merkte dat de perceptie van de lijnen veranderde naar-
we aan gewend zijn. Op het moment dat je je ogen open
mate de afstand tussen het oog en het object groter werd.
doet zie je het al. Je kunt met gemak zeggen of een object
Ze stelde uiteindelijk een aantal regels op die gebruikt
dichtbij staat, of dat het ver weg staat. Ook in het verkeer
konden worden om een object of landschap in goed per-
maak je gebruik van de mogelijkheid om afstanden en snel-
spectief weer te kunnen geven. Architecten, schilders en
heden in te schatten.
tekenaars maakten en maken nog steeds dankbaar gebruik
Wat maakt het nu dat je 3d kunt zien. Het principe is ei-
van de ze bevindingen. Tegenwoordig wordt het meeste
genlijk heel simpel. Het linker oog krijgt een ander beeld te
technische tekenwerk op de computer gedaan en deze
zien dan je rechter oog. Dit noemt men stereokijken*.
berekent daarna het perspectivische beeld erbij. Er bestaat ook een schematische manier van 3d tekenen,
De hersenen vergelijken de ontvangen beelden van het
isometrisch tekenen genaamd. Perspectivisch klopt het
linker en het rechter oog. Hoe groter de afstand is tussen
niet helemaal. Alle objecten zijn even groot, of ze nu ver
het linkerbeeld en het rechterbeeld des te dichterbij het
weg staan of dichtbij. Toch heb je bij dit soort tekeningen
object is. Dit gegeven werkt eigenlijk alleen in een ruimte.
een verbazend goed overzicht. Beter dan dat je in een 2d
Op papier of op beeldscherm is het bijvoorbeeld niet na
tekening hebt.
te bootsen. Althans je kunt wel diepte suggereren maar het wordt nooit zoals we objecten in een ruimte zien. Ook op tv kun je wel een suggestie maken van diepte, maar
In dit voorbeeld zie je een voorbeeld van een isometrische
het wordt nooit zoals in de werkelijkheid. Dat komt namel-
plattegrond van New York. Je ziet hier een duidelijk over-
ijk doordat het linkeroog het zelfde beeld krijg te zien als
zicht van de straten van de stad (net als op een gewone
het rechteroog. De onderlinge afstand van objecten en
plattegrond), de 3d dimensie zorgt voor iets extra’s, want
personen in de film is voor links en voor rechts hetzelfde.
je kunt nu zelfs de gebouwen herkennen. Het is zelfs
Er zijn nog meer dingen die ervoor zorgen dat je diepte
mogelijk om de hoogte van de gebouwen te zien (of te
kunt zien. Objecten die dichtbij je oog staan zijn groter,
meten). Dit effect is niet te creëren met een 2d tekening
scherper en helderder dan wanneer ze verder weg staan
van de stad. Een gebouw ziet er recht van boven nu een-
van je ogen. Objecten die dezelfde snelheid hebben lijken
maal onherkenbaarder uit dan van de zijkant.
sneller te bewegen naarmate ze dichter bij je ogen staan.
Conclusie: we kunnen de derde dimensie op een platvlak gebruiken om overzicht, herkenbaarheid en duidelijkheid
Echte diepte perceptie is alleen te creëren door het linker
te creëren.
en het rechter oog van een ander beeld te voorzien.
Een ander voorbeeld. Lego slaagt er al sinds decennia in
3d Weergave
om duidelijke bouwtekeningen te creëren voor vooral
* 3d shutterglasses: http://www.edglasses.nl/product/wired.htm
een jonge doelgroep. Ze maken hierbij ook gebruik van isometrische tekeningen. Stel dat je één isometrische
Er zijn wel mogelijkheden om diepte te zien op een plat
tekening om wil zetten in een 2d tekening dan heb je
vlak. Een voorbeeld dat de meeste wel kennen zijn de
eigenlijk 3 tekeningen nodig, namelijk een voor-, zij- en
roodgroene strips of plaatjes die je met een roodgroene
bovenaanzicht.
bril moet bekijken. Dit is ook weer gebaseerd op het stereokijken. Met het roodfilter zie je alles wat rood is, alles wat groen is valt weg. Met het groenfilter zie je alles wat
3d Waarneming
groen is, alles wat rood is valt weg. Op deze manier kun
*
stereokijken: http://www.delta.tudelft.nl/jaargangen/28/25/3d.html
je met je linker oog iets anders zien dan met je rechter
voorbeelden stereoscopische afbeeldingen:
oog. Als het plaatje of de strip goed is gemaakt dan zie je
http://www.fotobeurs.com/stereo/
diepte.
12
Op een beeldscherm kun je hetzelfde toepassen, maar je
in de bol gaat lopen dan rolt de bol, zodat je eindeloos ver
kunt er zelfs meer mee doen. Er zijn namelijk ook brillen
kunt lopen. De beweging van de bol is gekoppeld aan een
waarmee je diepte kunt zien zonder dat je kleurfilters nod-
computer en die zorgt ervoor dat de projectie meeloopt
ig hebt (IMAX theater en ook verkrijgbaar voor sommige
met je beweging, zodat je echt door de ruimte kunt lopen.
computers*). Deze brillen werken ook volgens het ster-
VisionDome** is een uitvinding van Elumens. Er wordt
eokijk principe. In de bril zitten twee sluiters, een voor het
gebruik gemaakt van een halve bol als scherm. Het lijkt op
linker- en een voor het rechteroog. De sluiters knipperen
het Cybersphere project, alleen kun je er niet doorheen
om en om, zodat je altijd maar met een oog kan kijken. Op
lopen.
het scherm knippert het beeld met dezelfde frequentie als de bril. Uiteindelijk zie je met je linkeroog het beeld dat
Er zijn echter ook nog simpelere manieren bedacht om 3d
voor het linkeroog bedoeld is en met je rechteroog het
te zien. Een daarvan is het cabrioscherm***. Dit is gebase-
beeld dat voor het rechteroog bedoeld is.
erd op een oud principe, namelijk dat van de kaartjes met een geribbelde transparante laag erover. Op het moment dat je het kaartje beweegt dan veranderd het plaatje op de
Bestaande 3d projectiemethodes
kaart. Het wordt vaak gebruikt om een beweging te laten
*
Virtual Reality: http://www.viz-tek.com/index-main.html
zien, maar het kan ook gebruikt worden om 3d te laten
**
http://www.vara.nl/ontdekking “de perfecte droommachine“
zien. Er zijn een aantal wetenschappers die dit principe
*** Kijk, december 2002, artikel: 3d komt dichterbij, door Berend Harmsen
hebben toegepast op een beeldscherm.
De ontwikkelingen van derde dimensie visualisatie
Al deze uitvindingen zijn niet echt geschikt voor de consu-
methode is iets waar veel wetenschappers zich mee bez-
ment, althans nog niet. Er is wel al een bril op de markt die
ighouden.
ervoor zorgt dat je 3d kunt zien bij bepaalde programma’s
Een van de oudste is holografie. Bij holografie heb je geen
en spellen op de computer. Deze bril werkt hetzelfde als
bril nodig om 3d te kunnen zien. Het proces om een holo-
die van het IMAX theater van een paar alinea’s terug. De
grafische plaat te maken is echter wel erg ingewikkeld. Het
bril is makkelijk aan te sluiten op de computer. De meeste
is vrij moeilijk om holografie toe te passen op bewegend
3d spellen op de computer worden al in 3d gegenereerd,
beeld.
dit is alleen niet echt te zien op een plat scherm. De 3d bril zorgt ervoor dat het ook in 3d bekeken kan worden.
Een van de meest bekende methode is virtual reality*. In de luchtvaart wordt dit gebruikt om door vliegtuigen heen
De ontwikkelingen gaan vrij snel en over waarschijnlijk
te lopen zonder dat ze echt bestaan. Dit is erg handig voor
niet al te lange tijd zal er een projectie methode worden
de ontwerpers en technici ze kunnen eventuele fouten
ontwikkeld die ervoor zorgt dat de consument thuis een
opsporen alvorens het toestel gebouwd wordt.Vaak wordt
3d omgeving kan bekijken zonder daar al te veel dure hulp-
virtual reality ook als entertainment gebruikt.
middelen voor nodig te hebben. Het blijf dan niet bij een
Bij VR wordt gebruik gemaakt van twee schermpjes voor
GUI. Door de opkomst van realistische 3d animatie films
je ogen.
komt de 3d film, waar je echt doorheen kunt lopen, ook
Een andere uitvinding is CAVE (Computer Aided Virtual
steeds dichter bij. Er staan immers geen camera’s lichten
Environment)**. Het idee is vrij simpel.
en een crew op de set. Die wereld bestaat namelijk echt uit een drie dimensionale wereld.
Het is een ruimte waarin op alle muren wordt geprojecteerd. Om het geheel echt 3d te maken moet je toch een speciale bril opzetten. Een variant op dit idee is Cybersphere**. Dit is een bol waar je in kunt staan. Op de wand van de bol wordt helemaal rondom een visuele ruimte geprojecteerd. De bol rust op wieltjes. Op het moment dat je
13
Alternatieve 3d projectie methode
werkelijkheid kennen. Bv: om een bestand te openen dat
* HMD: http://www.viz-tek.com/index-main.html
niet op je bureaublad ligt, moet je eerst naar de archiefkast
** Quicktime VR: http://www.flightjournal.com/p-51/index.asp
gaan, de lade openen, het goede mapje eruit halen, het mapje openen en dan uit dat mapje het goede document
360 images player: http://www.fotobeurs.com/360/
halen. Dit werkt hetzelfde als in de metaforische kantoor Er zou gebruik gemaakt kunnen worden van een bril
interface, alleen is het dan een stuk realistischer. In het nu
met twee schermpjes* in plaats van het steeds groter
volgende voorbeeld zie je een filmpje waarin de kantoor
wordende beeldscherm.
omgeving letterlijk vertaald wordt ipv metaforisch*. Het is leuk om een keer gezien te hebben, maar voor een frequente gebruiker is dit geen uitkomst.
Je hebt dan niet meer een groot scherm op je bureau staan, maar alleen een bril als monitor. De bril kan voor beide ogen een ander beeld projecteren. Het stereokijk principe kan gebruikt worden, de derde dimensie kan dus zichtbaar gemaakt worden. De elementen die op het scherm geprojecteerd worden bewegen niet mee met de beweging van het hoofd. Ze bli-
Een win3D
jven op een bepaalde plaats in de ruimte zweven. Hierdoor
omgeving
krijg je het idee alsof je je in een soort ruimte bevindt, het lijkt alsof er een projectie bol om je hoofd zweeft. Het hoofd wordt gebruikt om te scrollen door de virtuele
Het is misschien verstandiger om het kantoor als meta-
omgeving. De richting waar het hoofd naar kijkt wordt
foor even aan de kant te zetten. Er zijn echter wel wat
gevisualiseerd door de computer, de rest niet. Dit scheelt
metaforen te bedenken die ook goed te gebruiken zijn.
erg veel rekenwerk voor de computer. Het scherm wordt
Een daarvan zou het heelal kunnen zijn. Vooral in een in-
op deze manier vele maten groter. Quicktime VR is een
terface met 3 dimensies zou dit een mooie metafoor zijn.
programma dat panorama foto’s om kan zetten in een 360
Het moet wel abstract blijven en geen letterlijke vertaling,
graden rondom foto**.
anders werkt het niet. Je zit op de zon (centrum) en je werkt met alle planeten (bestanden) in dit zonnestelsel (map). Het zonnestelsel
Nieuwe metafoor
bevindt zich samen met vele andere mappen in een melk-
* win3d: http://3dgraphics.about.com/gi/dynamic/offsite.htm?site=http%3A
weg (map in een map)
%2F%2Fwww.clockwise3d.com%2Fproducts%2Fproducts.html
In dit zonnestelsel werk je aan een bepaald project. Stel dat Voor een 3d GUI is het “kantoor” metafoor misschien niet
je planeten van een ander zonnestelsel nodig hebt dan haal
erg bruikbaar meer. Of je zou het niet metaforisch, maar
je deze planeten er even bij en zet ze in het zonnestelsel
echt kunnen laten zien. Een drie dimensionale kantoor
waar je mee bezig bent. Planeten die je voor het project
omgeving, met archiefkasten die mappen en bestanden
maar weinig nodig hebt die laat je achteraan in het zon-
bevatten.
nestelsel zweven.
Het is te betwijfelen of dit een aanvulling, of een verbe-
Voor een ander project vlieg je verder naar een ander
tering wordt van hetgeen nu gebruikt wordt. Het wordt
zonnestelsel en werk je met de planeten die je voor dat
dan misschien wel iets te realistisch, dat is wel goed voor
project nodig hebt.
de mensen die de interface voor het eerst gebruiken. Ze
Op deze manier krijg je een soort werkvelden (verschil-
herkennen dan erg snel handelingen die ze ook uit de
lende desktops)
14
In het volgende hoofdstuk vind je de uiteindelijke metafoor
aanspreekt. Eigenlijk laat de gebruiker de boom groeien.
die ik verder heb uitgewerkt, namelijk een abstracte boom.
De stam is belangrijk, maar voor de meeste gebruikers is
De boomstructuur metafoor wordt nu ook gebruikt in
dit traject niet belangrijk. Het hoeft dus ook eigenlijk niet
Windows Explorer. Het is echter heel iets anders dan dat
weergegeven te worden (pas als de gebruiker er om vraagt
ik er mee bedoel. De keuze voor deze metafoor leg ik
dan wordt het weergegeven).
straks uit in het hoofdstuk “boom metafoor” De vertakkingen zijn de mappen die we nu gebruiken. Bij Boom metafoor
de mappen die we nu kennen is er echter slechts één soort.
Na wat onderzoek te hebben gedaan ben ik tot de conclu-
Dit maakt het voor de gebruiker niet echt makkelijker, er
sie gekomen dat een boom het beste als metafoor gebruikt
is niet te zien wat voor soort mappen en/of bestanden er
kan worden. Het is geen statisch ding, het leeft er groeien
in die map zitten.
takken en blaadjes aan, maar ze sterven ook weer af. Je
Bij de metaforische vertakkingen zijn er drie soorten:
kunt een vergelijking maken tussen een computer GUI en een boom.
•Een vertakking van waaruit alleen maar andere vertak-
De informatiedrager is de wortel. Meerdere informatie-
kingen groeien. Een map met daarin alleen maar andere
drager betekent dus ook meerdere wortels. Vanuit deze
mappen. Het voordeel hiervan is dat de gebruiker in één
wortel groeit een stam met takken iedere vertakking
oogopslag kan zien of er vanuit deze vertakking direct
(splitsing) is een map. Er kunnen meerdere vertakkingen
blaadjes (bestanden) groeien, of dat er eerst nog een ver-
komen uit één tak. Soms groeien er ook bladeren uit een
takking geopend moet worden. Het is ook in één keer te
vertakking. In dit geval zijn de bladeren de bestanden. Aan
zien of je te maken hebt met een vertakking waaruit niks
het uiteinde van de boom heb je knoppen van waaruit de
groeit (bij een map kun je niet zien of er niks in zit).
meeste blaadjes groeien. Als je nieuwe mappen en bestanden aanmaakt dan groeit
•Een vertakking van waaruit zowel vertakkingen al blaadjes
de boom. Takken die geen nut meer hebben sterven
groeien.
(breken) af. Zo ook bestanden en mappen die je niet meer nodig hebt. De takken en blaadjes verdwijnen niet in een
•En als laatste een vertakking van waaruit alleen maar
keer, maar ze verteren, afhankelijk van hoelang ze al op de
blaadjes groeien.
grond liggen. En doordat ze op de grond liggen zorgen ze niet meer voor overbodige informatie in de boom. Ze zijn
De blaadjes en bloesem zijn de bestanden. Deze twee
echter nog wel terug te vinden.
soorten staan ook voor twee soorten bestanden. De ene soort zijn de bestanden die op zichzelf kunnen draaien,
De metafoor is ook goed om te zetten in abstracte sym-
zonder daarbij nog andere bestanden nodig te hebben. Dit
bolen. De symbolen zorgen weer voor een snelle herken-
zijn de meeste bestanden. Er bestaat ook nog een ander
ning en dus tijdsbesparing. De metaforische boom is onder
soort bestand, Dat is er één die andere bestanden nodig
te verdelen in een aantal delen, namelijk wortel, stam, tak
heeft om te kunnen draaien, of wat iets toevoegt. Bijvoor-
en blad. De wortel is de informatiedrager. De stam is de
beeld:
weg die de informatie af moet leggen van de informatie-
Een Word bestand met een link naar een webpagina met
drager tot uiteindelijk de kruin van de boom. Als je kijkt
aanvullende tekst, of een filmpje.
naar de harde schijf van een computer dan is dat de wor-
Een website met daarin een foto, een link of een filmpje.
tel. De informatie wordt gelezen, in het tijdelijk geheugen
Een QuarkXpress of een Adobe Illustrator bestand die
gestopt en uiteindelijk via de processor en grafische kaart
naar een extern plaatje verwijzen.
weergegeven op het beeldscherm. Dit traject is de stam. Als de informatiedrager uit de computer wordt gehaald
Op het moment dat de bestanden op hun originele plaats
dan groeit er geen stam meer uit de wortel. De stam
blijven staan dan is het meestal niet relevant om te weten
ontstaat pas als de gebruiker de wortel (informatiedrager)
om wat voor bestand het gaat.
15
Root (disk)
(hd, cd-rom, floppy disk, zip disk, ...)
boom laat zich ook makkelijk buigen. Een gebruiker kan
de wortel
er voor kiezen om een aantal vertakkingen bij elkaar te zetten.
Container for containers
(map die alleen maar andere mappen bevat)
De boom blijft groeien naarmate de gebruiker hem veel
een tak waar meerdere takken uit groeien
gebruikt. Af en toe moet er gesnoeid worden om de boom weer overzichtelijk te maken. Niet relevante onderdelen
Container for containers and files
(map die zowel mappen als bestanden bevat)
moeten weggegooid worden. Deze onderdelen verdwijnen
een tak van de boom waar takken uit groeien, maar waar ook blaadjes uit groeien
dan niet in een keer. Ze blijven even op de grond liggen. De bestanden verteren langzaam in de aarde. Hierdoor zorgen
Container for files
(map die alleen maar bestanden bevat)
ze ervoor dat de boom verder kan groeien. Anders raakt
de laatste tak van een boom, voordat het blad begint, vanaf hier aleen nog maar blaadjes
de informatiedrager na een tijdje te vol. Hoe houd de gebruiker nu overzicht? Hiervoor zijn een
File (standalone)
(bestand dat alleen kan draaien zonder externe bestanden. bv foto of een tekst)
aantal aspecten belangrijk:
het blad van de boom, het uiteinde
•
File (network)
Het wordt pas relevant wanneer de gebruiker bestanden het blad van de boom,
(een bestand dat andere bestanden nodig heeft om te functioneren. bv een html pagina met links of foto's, een word document wat verwijst naar een link op internet, een website)
Niet gebruikte elementen zijn niet zichtbaar, ze worden pas zichtbaar als de gebruiker er om vraagt.
het uiteinde
gaat verplaatsen naar een andere informatiedrager en het
•
ergens anders mee naartoe wil nemen. Bij een webpagina
Minder vaak gebruikte elementen zijn minder goed zichtbaar dan veel gebruikte elementen.
bijvoorbeeld zou je geen plaatjes zien en relatieve linken zouden dan niet werken.
Drie dimensionaliteit. Dit komt goed van pas bij de hiërarchische structuur van de vertakkingen en uiteindelijk het
Er zijn twee soorten links:
overzicht van de boom. Het werkt als volgt:
•
Een relatieve link (/main/image.jpg) bevat een gedeelte
De gebruiker opent een vertakking, daarmee wordt deze
van het adres. Deze gaat er vanuit dat het ding waar
vertakking het meest actieve element. Hij verschijnt op
hij naar linkt zich in dezelfde straat bevindt. Een
de voorgrond. Wanneer de gebruiker nog een vertakking
straatnaam en nummer is in dit geval voldoende.
opent in deze vertakking dan schuift de andere vertakking
Een absolute link (http://www.website.nl/main/
iets naar de achtergrond. Wanneer een andere tak geo-
image.jpg) is het volledige adres met straatnaam/nr,
pend wordt dan wordt deze tak het meest actieve element
postcode, stad en land. Dit adres is altijd te vinden
en verschijnt op de voorgrond. De ander vertakkingen
waar je je ook ter wereld bevindt.
verschuiven nu weer een stapje verder naar achteren. Op
•
deze manier kan de gebruiker in één oogopslag zien wat De verschillende symbolen en de plaatsing op het scherm
de meest recente vertakking is, en zo ook wat de minst
zorgen ervoor dat de gebruiker snel zijn belangrijke be-
actieve vertakking is. Als de boom te vol wordt dan verdwi-
standen en mappen kan vinden. Er ontstaan namelijk patro-
jnen de langst niet gebruikte elementen langzaam naar de
nen die de gebruiker makkelijk kan herkennen. Patronen
achtergrond om uiteindelijk te verdwijnen (uit het beeld).
kan de mens nu eenmaal makkelijker onthouden dan tekst
Het komt er op neer dat de meest relevante elementen
(mits ze een aantal keer bekeken wordt) Ook de plaatsing
ook het meest zichtbaar zijn, de minst relevante elementen
in het veld zorgt voor een duidelijke herkenning. Het ene
minder goed zichtbaar zijn en dat de niet relevante dingen
project bevind zich links onder en het andere project rech-
ook niet zichtbaar zijn. Op deze manier ontstaat er geen
tsonder. Films bevinden zich rechts midden enz.
visuele ruis door overbodige informatie.
Naarmate de gebruiker meer met de boom werkt hoe
Een belangrijk voordeel van de derde dimensie in de boom
eigenzinniger de boom wordt. De boom wordt dan een
is het overzicht dat je door de diepte krijg. De hiërarchie
weerspiegeling van hoe de gebruiker er mee werkt. De
structuur is in de derde dimensie goed weer te geven.
16
Objecten die op de voorgrond staan zijn belangrijk. Het is
er een nieuwe boom, het is immers een andere informa-
in één oogopslag te zien wat er op de voorgrond staat en
tiedrager.
wat niet dus wat belangrijk is en wat niet. Dit zorgt ervoor dat de gebruiker sneller met de interface kan werken. Er
Geen kader
hoeft niet gezocht te worden naar wat belangrijk is en wat
Het kader van de monitor is niet meteen het kader van de
niet. Verschillende elementen kunnen door elkaar heen
interface. Mijn ontwerp wordt echter wel op een moni-
staan. In de derde dimensie is het mogelijk dat de objecten
tor weergegeven, maar het is eigenlijk de bedoeling dat
achter elkaar staan, maar dat de gebruiker wel kan zien dat
het dmv een bril of Head Mounted Display geprojecteerd
het uit twee delen bestaat.
wordt(zie hoofdtsuk: Alternatieve 3d projectie methode). Een platte monitor laat het niet toe dat de gebruiker met een ander oogpunt naar de interface kijkt. Dat is jammer,
voorbeeld online
want door een beweging te maken met je hoofd kun je In dit voorbeeld zie je een ingewikkelde figuur staan. Door
objecten die achter elkaar staan toch afzonderlijk bekijken
erop te klikken haal je de objecten uit elkaar zonder ze
zonder ze meteen te hoeven verplaatsen.
horizontaal of verticaal te verplaatsen. Je kunt nu zien dat
Het geen kader principe is wel op te lossen voor een
da figuur uit drie elementen bestaat. In de tweede dimensie
gewoon beeldscherm door het scrollable of verschaal-
is de figuur vrij ingewikkeld en in de derde dimensie wordt
baar te maken, dat wil zeggen dat, wanneer de boom te
de figuur al iets eenvoudiger, de objecten worden echter
groot wordt voor het scherm dan kan de gebruiker door
niet horizontaal of verticaal verplaatst, ze gaan namelijk de
het ding heen scrollen door de cursor naar de rand van
diepte in. Dit zorgt voor ruimte besparing. Deze figuur
het scherm te bewegen. De boom verplaatst zich dan in
uitleggen in de tweede dimensie kost drie keer zo veel
tegengestelde richting, net als bij een scrollbar naast een
ruimte als wanneer je het in de derde dimensie doet.
tekst of een plaatje.
Meerdere bomen Conclusie eindresultaat
Iedere informatiedrager heeft zijn eigen boomstructuur. Zo heb je in één keer in de gaten of je nu op de harde schijf van je computer aan het werken bent, of dat je op
Werking en visualisatie van mijn 3d gui
een floppy of zip disk aan het werken bent. Wanneer de
Als voorbeeld voor mijn scriptie en tevens een van mijn
disk eruit wordt gehaald dan verdwijnt de boomstructuur
afstudeerprojecten, heb ik een aantal onderzoeken en
die daarbij hoort. Er kan immers niet meer mee gewerkt
bevindingen samengevoegd in één interface. Het kan een
worden.
vervanging zijn op de desktop metafoor GUI van de al
Waarom is het nuttig dat de gebruiker dit weet? Ik zal het
bestaande operating systems zoals Apple OS en Microsoft
uit proberen te leggen door middel van een voorbeeld. Stel
Windows.
je krijgt een mailtje via webmail met een Word document als attachment. Je opent het document en gaat ermee aan
Als eerste wil ik de desktop metafoor onder handen
de slag. Je bewaart het. Wat veel mensen niet weten is dat
nemen. Het idee is al zo oud en is eigenlijk niet meer ingrij-
dit document op de webserver (internet computer) van
pend veranderd sinds het ontstaan.
de webmail provider (het bedrijf dat de webmail aanbiedt)
Om een nieuwe metafoor te bedenken moet je eerst naar
draait. Dit kun je ook niet zien. Op het moment dat je
de basis van de computer kijken. Wat is het en Hoe zit het
de verbinding sluit dan ben je je document kwijt, mits je
globaal in elkaar?
het alsnog op de harde schijf van je eigen computer hebt
Het apparaat bestaat uit één of meerdere ingebouwde
bewaard.
informatie dragers, beter bekend als harde schijven. Dan
Door de boomstructuur interface in het klein te laten zien
bestaat er nog de mogelijkheid om externe informatie
kan de gebruiker ook zien waar hij of zij mee bezig is. Op
dragers te gebruiken zoals floppydisks, cd-roms, dvd’s enz.
het moment dat je een webpagina bezoekt, dan verschijnt
Dit zijn wel verwijderbare informatiedragers.
17
Het internet bestaat ook uit vele computers met informa-
goede interface moet hierop inspelen. Dit kan bijvoorbeeld
tie dragers, maar dat gaat te ver om er bij te betreken.
door de paden die een gebruiker aflegt om bij zijn doel te
Een computer verwerkt informatie van de informatiedrag-
komen, te onthouden. Als de gebruiker dit pad maar één
ers. Meer hoeft een gebruiker niet te weten. Hetgeen dat
keer aflegt dan is het pad niet zo belangrijk. Wanneer het
wel belangrijk is, is dat de gebruiker zijn informatie terug
pad meerdere keren afgelegd wordt dan is het voor de
kan vinden op de informatiedrager. Hierbij speelt de GUI
gebruiker blijkbaar een belangrijk pad. In dit geval kan de
een heel belangrijke rol, die moet zorgen voor een duide-
interface het pad in beeld laten staan en het pas laten ver-
lijke weergave van wat er zich op die informatiedrager(s)
dwijnen wanneer het niet meer gebruikt wordt.
bevindt.
De hiërarchische structuur van de informatie moet ei-
Er staat echter zoveel niet-relevante informatie op dat
genlijk bepaald worden door het gebruik van de interface.
alles tegelijk laten zien er niet bij is. Het is dus zaak dat de
Objecten die de gebruiker vaak nodig heeft staan op de
GUI alleen de voor de gebruiker relevante informatie laat
voorgrond. De objecten verschuiven naar de achtergrond
zien. Overbodige informatie kan zorgen voor visuele ruis.
afhankelijk van hun relevantie.
Dat is iets wat voorkomen moet worden omdat iedere
Tijd en gebruik bepalen de hiërarchie van de objecten in
handeling dan meer tijd kost.
de interface. De hiërarchie bepaalt de mate van diepte in
voorbeelden online
de interface. Wanneer de technologische ontwikkelingen goed en func-
Conclusie
tioneel worden toegepast in een interface en de besturing
In mijn scriptie heb ik getracht duidelijk te maken op
hiervan, dan stelt dit de gebruiker instaat om effectiever
welke manier een gebruiker en een personal computer
met de interface te werken. De interface en het bijbe-
met elkaar communiceren dmv een interface. En wat er
horende systeem moet zich aanpassen aan de gebruiker
aan deze interface veranderd moet worden om de com-
en niet andersom. Voor het ontwerpen van een nieuwe
municatie en de interactie te verbeteren.
GUI en besturing hiervan, moet het standpunt zijn: “Hoe kan een gebruiker opdrachten geven aan het systeem?”
Om een elektronisch systeem duidelijk te maken aan
En niet: “Hoe kan het systeem opdrachten krijgen van de
een gebruiker, heb je een interface nodig. In het geval van
gebruiker?”.
personal computers kan over het algemeen het beste
Bij de verdere en betere ontwikkeling van de GUI zijn de
gebruik gemaakt worden van een Graphical User Inter-
volgende punten erg belangrijk:
face. Dit is een interface die gebruik maakt van grafische
Er moet meer gebruik gemaakt worden van de functies
voorstellingen aan de hand van metaforen in plaats van een
van het menselijk lichaam. Het gebruik van spraak, gehoor
abstracte tekstuele omschrijving. Het menselijk brein kan
en beweging wordt nu minimaal gebruikt. Dit moet echter
immers sneller en makkelijker omgaan met beelden dan
verder uitgewerkt worden. Ook het visuele aspect kan
met tekst. Een combinatie van metaforen, pictogrammen
verder uitgediept worden, bijvoorbeeld door gebruik te
en tekst is de ideale combinatie om dit soort interfaces
maken van diepte ipv alleen het platte vlak.
duidelijk te maken. De metaforen zorgen voor herkenbare elementen uit
Als de Graphical User Interface wil evolueren naar een nog
ons dagelijks leven. Een metaforische omschrijving van de
gebruiksvriendelijkere interface, dan moeten de boven-
werkelijkheid werkt beter dan een letterlijke vertaling van
staande punten er zeker in verwerkt worden. De Graphical
de werkelijkheid. Bijvoorbeeld het scrollen dat wij kennen
User Interface evolueert dan naar een Graphical Phoneti-
is afgeleid van een papierrol die aan de ene kant opgerold
cal Kinetical User Interface (beeld, geluid en beweging).
wordt en aan de andere kant afgerold wordt. Als metafoor werkt het beter dan als letterlijke vertaling.
Geschreven door: Christiaan de Rooij
Alle gebruikers hebben een bepaalde manier van informa-
Interactieve Multimedia, Willem de Kooning Academie Rotterdam
tie indeling die karakteristiek is voor die ene persoon. Een
23 mei 2003
18
