Goede grafische gebruikersinterfaces worden steeds belangrijker. Zeker nu door de opkomst van Internet-standaarden de technische barrières zijn weggenomen om externe partijen, zoals de klant, direct toegang te geven tot de interne informatiesystemen van een organisatie. Een goede interface is niet alleen belangrijk om te voorkomen dat gebruikers fouten maken. Ook voor de eigen medewerkers en externe relaties is een goede interface van belang. Twee adviseurs schetsen een platform-onafhankelijk gui-referentiemodel.
Het ontwerpen van een goede gebruikersinterface (graphical user interface, gui) is niet eenvoudig. De vele mogelijkheden van gui-platformen zoals Microsoft Windows en Apple Macintosh maken het de ontwerpers niet makkelijker. Om dit probleem te ondervangen, kan het ontwerpteam gebruik maken van een platform-onafhankelijk gui-referentiemodel. Dit biedt een structuur en houvast bij het ontwerpen van gebruikersinterfaces.
Daarnaast kunnen ontwerpers het referentiemodel gebruiken als communicatiemiddel, doordat het een gemeenschappelijk referentiekader schept om met bijvoorbeeld de gebruikersgroep te praten over gui’s.
Het referentiemodel is een abstractie van verschillende gui-platformen. Het model is gericht op ondersteuning van het browserplatform (interfaces die met behulp van een ‘world-wide’ web-browser met de gebruiker communiceren) en het Windows-platform (applicaties voor Windows 95, 98 en NT 4.0). Het platform-onafhankelijke gui-referentiemodel sluit echter ook aan op vele andere platformen, waaronder Windows-achtige (zoals Apple Macintosh, OSF/Motif), groupware-omgevingen (Lotus Notes) en handheld-platformen (3Com Palm OS, Psion OS en Microsoft Windows CE).
Interactiestijlen
De verschillende platformen ondersteunen uiteenlopende interactiestijlen; in de loop der jaren zijn er verschillende wijzen ontwikkeld waarop de mens met de computer interacteert.
- Commandotalen vormden de eerste manier van interactie met computers. Hierbij moet de gebruiker weten welke commando’s er zijn en op welke wijze hij deze moet invoeren.
- Bij een menustructuur zijn de commando’s ondergebracht in een hiërarchie. De gebruiker hoeft geen commando’s of toetscombinaties te onthouden.
- Invulformulieren bootsten papieren invulformulieren na.
- Directe manipulatie, ten slotte, is de interactiestijl die het meeste heeft bijgedragen aan het succes van grafische gebruikersinterfaces. Bij directe manipulatie toont de interface informatie zodanig op het scherm, dat de gebruiker snel inzicht heeft in de hoedanigheid en samenhang. Daarnaast kan hij de gevisualiseerde informatie rechtstreeks met een aanwijsinstrument (meestal de muis) manipuleren.
Onderdelen referentiemodel
Het gui-referentiemodel bestaat uit drie hoofdonderdelen: interfacecomponenten, dialoogontwerp en commando’s.
- De interfacecomponenten beschrijven de visuele en auditieve delen van de gebruikersinterface. Er zijn drie typen interfacecomponenten: interfacepanelen, interface-elementen en paneelcomposities.
De interfacepanelen zijn rechthoekige gebieden op het scherm die gegevens en instellingen tonen maar ook de gebruiker de mogelijkheid bieden deze te wijzigen. We onderkennen de volgende typen interfacepanelen: overzichtspanelen, detailpanelen, commandopanelen en boodschappanelen.
Interface-elementen zijn de elementaire bouwstenen van een interface. Interfacepanelen zijn opgebouwd uit interface-elementen. Tabel 1 geeft een overzicht van de beschikbare interface-elementen.
Een paneelcompositie is een verzameling van een of meer samenhangende interfacepanelen die de interface als één geheel aan de gebruiker toont. - Het dialoogontwerp geeft aan hoe de gebruiker tussen de paneelcomposities kan navigeren.
- De commando’s vormen de opdrachten die de gebruiker via de interface-elementen kan geven. Door middel van commando’s kan de gebruiker de gegevens die de gebruikersinterface toont, wijzigen (bijvoorbeeld een persoon toevoegen of verwijderen).
Bottom-up benadering
Bij het ontwerpen van een gebruikersinterface op basis van het gui-referentiemodel, wordt een bottom-up benadering gehanteerd. Daarbij gaat men er van uit dat een domeinanalyse is uitgevoerd die inzicht geeft in de gebruikersgroepen, hun taken en de gegevens die zij raadplegen en manipuleren. Uitgaande van de informatie die bekend is, ligt een bottom-up benadering voor de hand: op basis van de domeinanalyse begint men met het vaststellen van de interface-panelen. Pas wanneer inzicht verkregen is in de benodigde panelen, is men in staat paneelcomposities te formeren. En pas wanneer bekend is uit welke composities de interface zal bestaan, is de dialoog te ontwerpen.
Stap 1 houdt het ontwerpen van de interface-panelen in. Aan de hand van de domeinanalyse wordt een begin gemaakt met het ontwerpen van overzichtspanelen. Deze panelen geven een overzicht van de beschikbare instanties van één of meer objecten, bijvoorbeeld een overzicht van een groep personen.
Figuur 1. Voorbeeld van een overzichtspaneel voor personen. |
Dit is weergegeven in figuur 1 (een schets van een informatiesysteem voor een denkbeeldig adviesbureau). Voor ieder overzichtspaneel stelt men vast welke commando’s de gebruiker kan initiëren. Hier is dat bijvoorbeeld het toevoegen en verwijderen van een persoon.
Op basis van de overzichtspanelen volgt het ontwerp van de detailpanelen. Deze panelen tonen de attributen van één instantie en geven eventueel (lijstjes met) gerelateerde instanties, bijvoorbeeld de NAW-gegevens van een persoon, de organisatie waarvoor deze persoon werkzaam is en de lijst van projecten waaraan de persoon meewerkt. Ook voor ieder detailpaneel stelt men vast welke commando’s de gebruiker kan initiëren.
Commandopanelen
Nu volgt het ontwerp van de commandopanelen op basis van de overzichts- en detailpanelen. Dit type panelen is op drie manieren te gebruiken:
- Voor het tonen en specificeren van de parameters die nodig zijn om een commando te kunnen uitvoeren. Voor het toevoegen van een persoon is bijvoorbeeld onder meer een naam nodig.
- Voor het tonen van instellingen die de gebruiker in de interface kan maken, bijvoorbeeld de sorteerinstellingen die bij een overzichtspaneel horen of het filteren van een lijst personen, bijvoorbeeld filteren op alle medewerkers van een bepaalde organisatie.
- Voor het tonen van een overzicht van de commando’s die de gebruiker vanuit een ander paneel kan initiëren.
Ten slotte ontwerpt men op basis van de vastgestelde commando’s de boodschappanelen. Dit zijn berichten die de gebruiker inzicht geven in de voortgang en het resultaat van commando’s. Een voorbeeld van een boodschappaneel is de mededeling dat er bij het toevoegen van een persoon de gebruiker vergeten is een naam op te geven.
Paneelcomposities
Stap 2 omvat het samenstellen van paneelcomposities. De ontworpen interface-panelen worden gecombineerd tot paneelcomposities. Dit zijn samenstellingen van één of meer interface-panelen die als één geheel aan de gebruiker worden gepresenteerd. Zo kunnen het commandopaneel voor het tonen van instellingen, het overzichtspaneel van personen en het detailpaneel van één persoon tezamen een paneelcompositie vormen.
Stap 3 behelst het maken van de dialoogontwerp. Tijdens het dialoogontwerp legt men vast welke paneelcompositie het startpunt van de gebruikersinterface vormt en welke paneelcomposities daarop volgen. Er wordt bij wijze van spreken een landkaart met mogelijk af te leggen routes gemaakt. Dan volgt het verfijnen van het dialoogontwerp door aan te geven hoe paneelcomposities elkaar opvolgen; er zijn verschillende typen overgangen tussen composities mogelijk. De nieuwe compositie kan bijvoorbeeld de oude vervangen of naast de oude verschijnen.
Figuur 2. Voorbeeld van een dialoogontwerp voor een geldautomaat van een bank. |
Figuur 2 geeft een eenvoudig voorbeeld van een dialoogontwerp voor een geldautomaat van een bank. De vierkante hokjes zijn paneelcomposities en de pijlen vormen overgangen tussen de composities. In dit geval zijn alle overgangen vervangend.
Effectief gui-ontwerp
Het beschreven gui-referentiemodel maakt onderdeel uit van een complete aanpak voor het ontwerpen van gebruikersinterfaces genaamd ‘Effectief GUI-ontwerp’. Hieronder volgt een beschrijving van de complete aanpak en wordt duidelijk gemaakt op welke plaatsen het geschetste referentiemodel een rol speelt.
In fase 1 vindt de technologie-analyse plaats. Onder technologie verstaat men de technologische hulpmiddelen waarmee de gebruikersinterface gerealiseerd kan worden. Dit betreft niet alleen de ontwikkelhulpmiddelen maar ook de hard- en software die tijdens de werking van de gebruikersinterface nodig is. Netwerken, beeldschermen, hardwareconfiguraties, te koppelen databases, besturingssystemen en middleware zijn in dit kader voorbeelden van technologie.
Tijdens de technologie-analyse bepaalt men de invloed van de te gebruiken technologische middelen op de gebruikersinterface. Stel dat er gebruikers zijn die met een 28K8-modem toegang moeten krijgen tot de gebruikersinterface. Omvangrijke graphics in het ontwerp zijn dan niet mogelijk.
In fase 2 valt de domeinanalyse. Voordat een interface-ontwerp te maken is, moet men beschikken over voldoende inzicht in de gebruikers en hun werkzaamheden. Daartoe worden gebruikersprofielen opgesteld van de beoogde doelgroep en worden de werkzaamheden van de gebruikers vastgelegd met een ’taakdecompositie’. Met een objectmodel legt men vast welke gegevens de gebruiker nodig heeft en welke hij manipuleert bij het uitvoeren van zijn werkzaamheden. Ook bepaalt men aan welke kwaliteitseisen de gebruikersinterface straks moet voldoen om door de gebruikers te kunnen worden geaccepteerd.
Onafhankelijk en specifiek
Het platform-onafhankelijk ontwerp (fase 3) levert een eerste interface-ontwerp op, oftewel een schets van de gewenste interface. In de literatuur wordt vaak de term ‘mock-up’ gehanteerd. Het platform-onafhankelijke ontwerp stelt men samen op basis van een gui-referentiemodel. Dit referentiemodel zorgt ervoor dat de ontwerpers zich kunnen concentreren op het ontwerp en niet afgeleid worden door de concrete mogelijkheden van een specifiek platform.
Wanneer het platform-onafhankelijke ontwerp is geaccepteerd door de gebruikers, begint de vertaalslag naar fase 4, het platformspecifiek ontwerp. En alle platformspecifieke details worden ingevuld. Ook wordt de exacte lay-out van de ontworpen interface-componenten bepaald. Het ontwerp is bijvoorbeeld te vertalen naar een browser-interface of een Windows-interface (figuur 3).
Figuur 3. Voorbeeld van de uiteindelijke browserinterface voor personen. |
De zogenoemde bruikbaarheidstest valt in fase 5. Tijdens deze test controleert men in hoeverre de gebruikersinterface aan de tijdens de domeinanalyse opgestelde kwaliteitseisen voldoet. Eveneens worden nu de geconstateerde onvolkomenheden vastgelegd. Na afloop van de bruikbaarheidstest worden de belangrijkste geconstateerde gebreken verbeterd door het uitvoeren van een of meer iteratieslagen: afhankelijk van de aard van de gebreken wordt de aanpak opnieuw doorlopen vanaf de fase technologie-analyse, domeinanalyse, platform-onafhankelijk of platformspecifiek ontwerp.
De grote lijnen
Het gepresenteerde gui-referentiemodel voorkomt dat ontwerpers zich verliezen in details als vormgeving en precieze lay-out. De structuur die het biedt en de platform-onafhankelijkheid zorgen ervoor dat de ontwerpers zich kunnen concentreren op de grote lijnen en zo hun productiviteit verhogen. Daarnaast kunnen zij het referentiemodel gebruiken als communicatiemiddel met de eindgebruikers.
Guido van der Harst, adviseur bij het ICT-adviesbureau Verdonck, Klooster & Associates
Rob Maijers, adviseur bij het onderzoeksbureau Software Engineering Research Centre
In een volgend artikel ‘Ontwerpprincipes en indicatoren: een kwaliteitsmodel voor interface-ontwerp’ gaan de auteurs in op het kwaliteitsmodel van Effectief gui-ontwerp, zoals het opstellen en meten van kwaliteitseisen voor grafische gebruikersinterfaces.
Het boek "Effectief GUI-ontwerp" is verschenen bij Academic Service onder ISBN-nummer 90 395 0903 4 en kost � 59,50.
Overzicht interface-elementen
Groep | Interface-elementen |
Overzichtscontrols | List view Tree view Cell view Canvas |
Tekstinvoercontrols | Text box Multiple-line text box |
Numerieke invoercontrols | Spin box Slider |
Meervoudige selectiecontrols | Multiple-selection list box Check box |
Enkelvoudige selectiecontrols | List box Drop-down list box Radio button Image map |
Multimedia cues | Image Sound Movie |
Cues | Label Formatted text Separator Group box Progress indicator |
Navigatiecontrols | Tab control Command button |