Monkey Business on the Fly

Monkey Business on the Fly *wink*

Met de werkgroep 'Practicum Nieuwe Media' (bachelorcursus UU) bekeken we de mogelijkheden van Firebug en Greasemonkey.

Veel websites zijn slecht ontworpen. Een esthetische belediging, maar vaak ook een klap in het gezicht van de gebruiksvriendelijkheid. Onhandige navigatie, hinderlijke banners en zoeken naar de zoekfunctie; we kennen allemaal de digitale doorns van het web.
In een proposal stelden we voor om te onderzoeken hoe we deze euvels kunnen verhelpen met ons eigen gereedschap. Kan het beter? En kan het ook mooier? Want een website is tenslotte ook een compositie op het canvas van het browserscherm.

Firebug (Firefox), Stylish (Chrome) en Greasemonkey (Firefox) zijn plugins om te sleutelen aan bestaande websites, en/of deze aanpassingen op te slaan als je eigen configuratie. Firebug is vooral een webdeveloppers-tool; een kijkje onder de motorkap van een website, met volledig beheer van alle styles 'n scripts die er draaien. Stylish laat je eigen thema's maken, die je kunt opslaan en delen met andere webgebruikers. Om ook echt de functionaliteit te veranderen, gebruikt de nerd anno nu het befaamde Greasemonkey, waarmee de gebruiker nieuwe scripts met een website kan integreren. Bijbehorende film-torrents zien op IMDB? De PlusOne -knop uit Google slopen? Greasemonkey maakt het mogelijk.

Hoe geschikt zijn deze tools voor een gemiddelde gebruiker, en kunnen we echt vrij het web her-ontwerpen? Voordat we een event op poten zetten, verkenden we de mogelijkheden met een werkgroep 'Practicum Nieuwe Media'. Deze groep studenten werkt aan een campagne voor de Belastingdienst, om te kijken hoe het naast makkelijker ook vooral beter kan. De ideale testgroep.

De vrijheid in redesign moet worden genuanceerd

We zagen lichte verwondering over het idee dat je een bestaande website zelf kunt bewerken. Met Firebug werden stukjes css aan en uit gezet, waarmee de wijzigingen zich direct visueel vertaalden. Het toevoegen van nieuwe eigenschappen vereist echter wat meer kennis van css, die niet iedereen paraat had. Hierdoor bleven de aanpassingen relatief klein/oppervlakkig; ander font, andere kleur. Tegenover deze kleinschaligheid stonden wilde designkeuzes; om echt goed te zien dat er iets is veranderd, doet een feloranje achtergrond het net even wat beter. Ironisch genoeg gaat dat precies tegen het doel in.

Vanuit het what-you-see-is-what-you-get-principe is Firebug wel een handige tool om css te leren. En als we het over leren hebben, komen we bij Greasemonkey. Hiermee vroegen we namelijk erg veel van onze testgroep. Greasemonkey kent een uitgebreide bibliotheek van handige scripts, die je op specifieke websites kan loslaten. Maar om zelf een script te schrijven voor de website naar keuze... ai. Een enkeling had wat ervaring met Javascript/Jquery en begreep hoe je hiermee de content kon aanpassen, maar voor de leek geen geschikte tool.

De crux van deze tools ligt in hun ambigue relatie met visueel denken. Bij oppervlakkige aanpassingen zie je direct -visueel- wat je doet. Wil je echter groots te werk gaan, dan besteedt je meer tijd aan het (her)schrijven van vele regels code. Een kolom invoegen of elementen anders positioneren vereist structurele wijzigingen, met het gevaar dat de F5-knop niets anders opent dan een desillusie; in je voorstellingsvermogen zag het er toch beter uit dan wat de lichtbak van het computerscherm uiteindelijk de kamer in werpt.

Een tip van uw blogschrijver: MS Paint.

Om dit -na uw honende schaterlach- verder toe te lichten; onderschat pre-historische software niet. Ze bevatten soms de kern van wat je eigenlijk wilt doen. Maak bijvoorbeeld screenshots van websites die je tof vindt: elementen die je visueel prikkelen, structuren die prettig lezen of slimme navigaties. In een programma als Paint cut-'n-paste je in no-time een mockup, waarin je al die elementen bij elkaar brengt (of vervangt in een screenshot van de website naar keuze). Zodra het resultaat in grote lijnen visueel tevreden stelt, kun je onderzoeken hoe je dit ook daadwerkelijk kunt uitwerken/realiseren. Welke tools voldoen? Met welke technieken/talen moet je je vaardigheden uitbreiden? Wie kun je verleiden/inhuren/omkopen om dit werk voor je te doen?

Kortom, gebruik simpele technieken als visuele leidraad, om voor jezelf duidelijk te maken wat je wilt aanpassen. Kijk dan pas hoe. En onthoud dat het aanpassingen blijven; een wezenlijk slecht ontworpen website zal dat blijven. In Greasemonkey-jargon: "Al draagt een aap een gouden ring, ..."

Enfin, u kent het gezegde.

Heb je hier ideeën over? Ken je andere tools die nuttig zijn? Mail naar frank-jan@setup.nl

Tekst/visual: Frank-Jan van Lunteren