RobIII

Je hebt hét idee waarmee je het compleet gaat maken. Die 1,3 miljard euro die de jongens van YouTube opstreken bij hun overname is peanuts vergeleken bij het bedrag dat jij gaat verdienen met je applicatie en je zult je dan ook snel scharen onder de elite. Je applicatie wordt genomineerd om te worden toegevoegd aan het lijstje met wereldwonderen waarbij men zal twijfelen of dat plek 1 of 2 zou moeten worden.

En toch slaat je applicatie niet aan. Hoeveel marketing je er ook tegen aan smijt. Je laat de prijs zakken, je bouwt een 2.0 versie die nog slimmer is en je deelt zelfs gratis CD's uit op beurzen wereldwijd. Je applicatie is synergistisch, proactief, multitasking, patented, volledig AJAX en haalt het maximale uit de werknemers (linkje). Wat doe je verkeerd?

Tja, een erg simpel antwoord kan ik daar helaas niet op geven. Je doet iets verkeerd; dat moge duidelijk zijn. Maar wat dan? De kans is groot dat je dan eens moet gaan kijken naar je User Interface, en in de meeste gevallen zal dat de Graphical User Interface (GUI) zijn. Het smoelwerk van je applicatie. De toegang voor de gebruiker naar de onderliggende functies van je applicatie. Een (let wel: niet dé) sleutel in de rij van vele sleutelonderdelen in het recept voor succes.

Maar al te vaak zie ik in het dagelijks leven bij collegae of in mijn taak als moderator op GoT programmeurs voorbij komen die erg enthousiast hun nieuwste applicatie vol trots tonen. En maar al te vaak is daarbij erg veel aandacht gestoken in het 'compleet skinnable' maken van de applicatie. De 'duffe XP look' moet natuurlijk vervangen worden door een hippe gele 'lemon' kleur met flitsende controls. De saaie dropdowns die een browser toont moeten natuurlijk gestileerd worden zodat de duffe pijltjes nu hippe pijltjes zijn en het liefst trekken we alle kleurenregisters van onze VGA kaart even vol open. Door de hele stijl-brij wordt er echter vaak, achteraf bezien, teveel tijd gestoken in het überhaupt stileren van de applicatie en minder tijd in het daadwerkelijke nut van de applicatie. Een koekje voor de non-tweaker die meteen doorhad dat de afbeelding rechts een mediaspeler is.

Maar los van het stileren van een applicatie, al dan niet 'skinnable' (waarbij die laatste term vaak niet veel meer behelst dan het laden van een andere achtergrond afbeelding terwijl ik onder 'skinnable' toch ook echt het o.a. vervangen en verplaatsen van controls versta) wordt er vaak niet erg goed nagedacht over de informatie die de interface toont en de manier waarop die informatie gepresenteerd wordt; laat staan hoe die informatie bewerkt kan worden. Laat ik even het hele stileren gebeuren vast uit mijn systeem halen, want dat zit me toch hoger dan ik aanvankelijk dacht , zodat ik daarna verder kan met waarom ik deze blog in eerste instantie wilde gaan schrijven.

Wat mij mateloos stoort is een applicatie die zich niet houdt aan de door mij zo zorgvuldig ingerichte defaults van mijn OS. True, ik schakel XP ook meteen over van "teletubby" naar Royale en ook mijn wallpapertje vervang ik door een mooie zelfgekozen wallpaper. Maar dan verwacht ik wel dat een applicatie dat netjes mee doet. Dit gaat in de meeste gevallen nog goed, behalve (ik noem maar wat random applicaties) applicaties als Photoshop, Winamp, Safari en Quicktime die het vertikken zich aan mijn geselecteerde en samengestelde theme te houden. Sommigen maken het nog bonter door bepaalde conventies domweg om te gooien; zo wordt in Safari bij het klikken in de adresbalk niet de hele URL geselecteerd, waardoor ik eerst met wat knoppenrammen de URL moet verwijderen, hebben optieschermen geen 'OK' knop waar ik me telkens lens naar zoek en hebben in Quicktime een aantal gangbare keyboard shortcuts een totaal wereldvreemd resultaat bij het indrukken ervan. Het ziet er misschien wel 'gelikt' uit, maar ik wil het niet!

Daarbij is zo'n theme niet voor niets via het OS te regelen. Mensen met een visuele handicap zullen eerder een contrastrijk thema selecteren of samenstellen en mensen met een lichamelijke beperking zullen wellicht bepaalde opties als 'plaktoetsen' of alt-keys voor snelle toegang tot bepaalde velden of andere zaken gebruiken. Als dat eenmalig is ingesteld hoort, in mijn zo nederige mening, de hele meute aan applicaties zich daar netjes aan te houden (tenzij het écht, écht niet anders kan in bepaalde extreme gevallen). Laat dat stileren dus achterwege of maak het optioneel. In een aantal applicaties is dat inderdaad optioneel, in de meeste niet. Er is niets mis met een leuk kleurtje her-en-der, of een leuk icoontje om een knop of toolbar op te vrolijken, maar maak ze niet de primaire methode om te communiceren met je gebruiker. Een website (of web applicatie om maar eens Web2.0 te gaan) zonder CSS is geen porem om te bekijken, maar een goede web applicatie blijft dan wél functioneel en hele goede web applicaties ook nog zonder gebruik van Javascript. Hou je dus gewoon aan het OS-theme waar mogelijk en sla niet compleet op hol in het stileren van je applicatie. Geloof het of niet, maar er is door hele knappe koppen gedacht over die 'saaie' look van Windows, maar ook OSX of *n*x varianten van de GUI's. Skinnen is leuk maar maak het optioneel en ondergeschikt aan alle, maar dan ook alle, functionaliteit die je applicatie kan bieden: zijn er nog functionele zaken die je ooit zou willen implementeren doe dat dan eerst. Sure, een gelikte skin zal allicht je applicatie sneller doen verkopen, maar een applicatie met een mooi smoeltje die verder weinig spannends doet zal je klanten alleen maar van een koude kermis doen thuiskomen en zich bedrogen laten voelen. Daarbij loopt het vaak al gauw uit op Software bloat.

Goed, themes en skins en andere zaken daargelaten mankeert er met grote regelmaat nog vanalles aan een GUI. Een GUI dient om een gebruiker te helpen een taak uit te voeren. Een GUI moet dus geen taak an sich worden voor de gebruiker om zich er door heen te worstelen. Een GUI waarin ik te lang moet zoeken naar hoe ik een bepaalde taak kan uitvoeren heeft bij mij snel afgedaan. Een mooi voorbeeld waar we nu nog steeds allemaal van profiteren is Google. Weinig tot geen poespas op de zoekpagina, één textbox en 2 knoppen. That's it. En totdat doordrong tot de vele andere concurrenten vele jaren geleden dat dat een groot onderdeel was van het succes van Google zagen veel zoekmachines er uit als "the strip". Een volgeknalde pagina met ads, 'handige' sidebars, nutteloze weerinformatie uit regio's aan de andere kant van de wereld en ga zo maar door. On a side-note: wat dat betreft doet Google het met de 'persoonlijke homepage' wel leuk; daarin kan ik zelf bepalen hoe ik mijn startpagina inricht (en sure, vele anderen zullen dat ook kunnen, ik ga ze niet allemaal noemen of uitzoeken). Live.com (toen nog MSN.com wat nu nog steeds een puinhoop is), Altavista en Ask.com volgden en zegevierden mee (hoewel in minder mate dan Google, maar dat had weinig met de GUI te maken ). Zoekmachines die het niet (willen?) leren, zoals Yahoo, AOL en Lycos zullen al gauw nieuwe of beginnende gebruikers afschrikken danwel verwarren.

Dus; overzicht en bruikbaarheid is key. Het ontwerp is ondergeschikt aan de functionaliteit. Maar dient wel overzichtelijk en toegankelijk te zijn. Keyboard shortcuts worden op prijs gesteld door ervaren en langdurige gebruikers van je applicatie. Uniformiteit ook. Om eens een mooie b*llshitbingo-term van de marketing jongens te gebruiken: de GUI en de achterliggende functionaliteit moeten in synergie en symbiose leven Het gebruik van de juiste controls voor de juiste taken is daarbij belangrijk. Een dropdown heeft een totaal andere toepassing dan een listview; dat zal iedere programmeur wel duidelijk zijn. Maar een dropdown met 5 opties kan vaak, niet altijd, ook vervangen worden door een aantal radio buttons. Maar radio buttons kun je dan weer niet zomaar vervangen door checkboxes. Een statusbalk zal een gebruiker onderin je applicatie zoeken, niet in de titelbalk en een Annuleren-knop zit rechts van een OK-knop. Een aantal zaken zal je bekend in de oren klinken, een aantal zaken was je misschien nog nooit opgevallen. Op het moment dat ze echter verkeerd worden toegepast knal je er een keer tegen aan. Soms met rampzalige gevolgen van dien (verlies van gegevens bijvoorbeeld). Als van tabblad gewisseld wordt hoort er géén (permanente, data wijzigende) actie uitgevoerd te worden; daar zijn knoppen voor. Als een checkbox wordt aangevinkt dient bij een tweede klik (of druk op de spatiebalk) het vinkje weer te verdwijnen of in een enkel geval 'grayed' te worden, maar dient de GUI niet zomaar iets uit te voeren. Een knop of menuoptie waarvan de tekst eindigt op "…" zal een vervolgactie vereisen of tweede scherm vertonen; is je dat al eens opgevallen (neem een goede GUI )? Maar al te vaak zal een fout in het ontwerp van een GUI uiteindelijk de functionaliteit van diezelfde GUI ten onder doen gaan omdat de programmeur rare bokkensprongen dient te maken om de verkeerde controls te laten doen wat hij wil dat ze doen terwijl bij het gebruik van de juiste controls geen enkel vuiltje aan de lucht zou zijn geweest. En mensen: let eens op de Tab-order van controls!

Ik kan duizend-en-één foute interface-bloopers voor je opnoemen maar een, helaas wat verouderde, site heeft dat heel mooi samengevat in de Interface Hall of Shame. En hoewel de website zelf, anno 2008, ook wel voor enige nominaties in deze HoS in aanmerking komt is het zeker eens het lezen waard. Het beste is om het ontwerp van een GUI over te laten aan mensen die er voor gestudeerd hebben; het is een heuse studie en het loont zich om eens een kijkje in dat wereldje te nemen. Maar het is niet altijd mogelijk (of betaalbaar) om een 'interaction designer' op een project te zetten. Het probleem van programmeurs is vaak dat zij de achterliggende functies één-op-één vertalen naar een GUI en dat zijn dus vaak de laatsten aan wie het ontwerp van een GUI overgelaten dient te worden. Toch komt het vaak in hun (of onze ) schoot terecht en hoort dan nou eenmaal bij het vak volgens de bazen. Daarom kan het als programmeur ook geen kwaad je eens een beetje te verdiepen in het ontwerpen van een GUI, zij het native applicatie zij het web (waarbij semantiek ook nog eens om de hoek komt kijken!). Daar valt veel winst in te behalen en het zal het plezier dat een gebruiker beleeft in een applicatie zeker verhogen. Er zijn veel goede boeken over interface design (veel daarvan zul je terugvinden in ons Centraal boekentopic - part II) en hoewel je misschien niet alle ins en outs hoeft te kennen durf ik te stellen dat 90% van de programmeurs hier wel wat in bijgeschaafd kan worden; mezelf incluis.

Als zichzelf respecterend blogger dien je na je betoog tot een conclusie te komen en die zal ik dan ook nu weer trekken: Natuurlijk is een weluitgedachte en in alle opzichten verantwoordde GUI met een waardeloze applicatie erachter nog steeds nutteloos en geen money-making machine. Laat dat duidelijk zijn. Maar het is wel degelijk een bepalende factor op de weg naar succes. Een bakker bakt mijn brood, een kapper kapt mijn haar, een automonteur repareert mijn lekkende koppakking, een programmeur bouwt een functionele applicatie en een 'interaction designer' zorgt ervoor dat iedereen die functionele applicatie soepeltjes en met gemak kan bedienen. Ieder zijn vak. Ik kan mijn broertje prima millimeteren en met mijn "easy bake" oventje kan ik best een leuk broodje bakken. En een bruikbare applicatie maak ik ook in een handomdraai. Maar ik waan mezelf geen kapper of bakker en al helemaal geen interaction designer. Schoenmaker blijf bij je leest!