Wat is een logische opvolging van schermen in onze webshop? Moet deze knop groen of oranje om klanten over te halen iets te kopen? Het zijn zaken waar over nagedacht is in vrijwel elke grote website, webshop of app. Maar ook apparaten en machines waar mensen mee moeten werken, waar tenminste één knop op zit, hebben een goede uxer experience (UX) nodig. De psychologie als kracht in user experience moet problemen voorkomen; van gefrustreerde klanten tot letterlijk het einde van de wereld.

Het werkt niet? Ik zal het wel verkeerd doen..

Een goede gebruikerservaring wordt doorgevoerd tot in de kleinste details. Een kleine verandering in de homepage gaat bij grote bedrijven als Bol.com en Amazon om het verschil tussen winst en verlies. Vaak genoeg blijkt dat gebruikers een website snel verlaten als ze niet vinden wat ze zoeken. Foutmeldingen, cookiemeldingen en andere ‘afleiding’ zoals pop-ups helpen daar niet bij (maar soms wint de marketing het van de gebruikersvriendelijkheid).

We hebben allemaal wel eens met de handen in het haar gezeten bij het bedienen van een apparaat. We geven vaak onszelf de schuld; ik weet niet wat al die knoppen betekenen op mijn oven. Of: ik ga wel naar de balie voor een kaartje, want die ticketmachine doet niet wat ik wil. Beide apparaten hadden beter ontworpen kunnen worden door gedegen onderzoek te doen. Niemand wil op zoek naar de handleiding.

Zo is een goede gebruikerservaring essentieel voor grote bedrijven. Je wilt dat eindgebruikers lang gebruik maken van je app, website, apparaat of dienst. Bij een slechte ervaring denk je wel twee keer na voor je weer een telefoon van hetzelfde merk koopt.

Levensgevaarlijke software; wanneer de psychologie niet goed onderzocht wordt

Maar het gaat niet alleen om winst en behoud van je klandizie. Slechte UX kan het verschil betekenen tussen leven en dood. Wanneer de user experience van een bepaald scherm slecht doordacht is, kan dat enorme gevolgen hebben. Anders gezegd: het onderzoeken van de psychologie van user experience is onmisbaar. De gedachten en gedragingen van de eindgebruiker in kaart brengen kan met tools, zoals persona’s en usabilitytests. Het is een enorme verantwoordelijkheid, die softwarebedrijven zeer serieus moet nemen.

Eén van de bekendste voorbeelden van real-life problemen als gevolg van onbegrepen UX is een rakettest in Hawaii uit 2018. Een medewerker van de Hawaii Emergency Management Agency wilde een test uitvoeren om te kijken of een noodwaarschuwing voor een raket werkt. Hij moest kiezen uit twee opties in een dropdown: ‘Test missile alert’ en ‘Missile alert’. Hij koos de laatste optie, iets waarvan hij tot op de dag van vandaag spijt heeft. Duizenden mensen kregen een waarschuwing op hun telefoon dat er een raket naar het eiland onderweg was: “zoek dekking, blijf binnen”.

Een menselijke fout, maar begonnen bij een dropdown waarbij twee opties direct onder elkaar staan. De medewerker koos per ongeluk de verkeerde optie. De psychologie als kracht in user experience had hier beter toegepast kunnen worden. Twee opties in één element zo dicht bij elkaar, met twee heel verschillende gevolgen. In dit geval: totale paniek onder duizenden inwoners en toeristen en een urenlange disruptie van het eiland. Dit is niet alleen slechte UX, het zou verboden moeten worden.

Er zijn nog meer voorbeelden waarbij een gebrek aan onderzoek hoe gebruikers denken en handelen, levensgevaarlijk kan zijn.

• Het grootste nucleaire incident met een lekkende kernreactor in de VS is deels te wijten aan onduidelijke apparatuur, met ruim een miljard dollar aan schade.
• Designers van medische software zullen zorgvuldig om moeten gaan met meldingen, anders trekt de behandelend arts wellicht een verkeerde conclusie.
• Er zijn tientallen voorbeelden van ongelukkige designkeuzes in auto’s, die zelfs kunnen leiden tot de dood. Ford riep in 2015 ruim 13.000 auto’s terug, omdat de start/stop knop per ongeluk werd ingedrukt tijdens het rijden.

Het heeft te maken met onze steeds groter wordende afhankelijkheid van apparatuur en software. We kunnen zo vaak blind uitgaan van de werking van apparaten, dat we nog wel eens vergeten zelf na te denken. Eigenlijk leg je elke dag je leven in handen van user experience designers. Het is vaak een slecht idee als je als groot softwarebedrijf wilt besparen op UX. De psychologie achter user experience onderzoeken, kan letterlijk levens redden.

Gebruikers onderzoeken voor een (bijna) perfect resultaat

Het doel van je app(licatie), systeem of apparaat moet duidelijk zijn, voordat de user experience designer kan nadenken over de juiste oplossing. Maar kennis over de eindgebruiker is net zo belangrijk. Soms is de eindgebruiker duidelijk: medewerkers van een administratiekantoor zullen gaan werken met de nieuwe facturatiesoftware die wordt gebouwd. Soms is de groep gebruikers heel divers: iedereen kan een nieuwe televisie gebruiken. Wat moet die nieuwe Samsung televisie beter kunnen dan de vorige? Onderzoek de eindgebruiker! Welke klachten waren er? Welke kansen liggen er in de markt, wat doet de concurrentie nog niet? Maar ook: hóe navigeert de gebruiker door de schermen, kan de software beter?

Als de ‘gemiddelde’ gebruiker een functie niet begrijpt, zul je dat als ontwikkelaar vrijwel nooit direct van hem te horen krijgen. Maar er is wel achter te komen. Met anonieme gebruikersstatistieken vanuit bestaande software is een schat aan informatie te verkrijgen. De ontwikkelaar bouwt functionaliteit in om op te slaan welke knoppen worden ingedrukt, als een logboek. Als veel mensen op een knop drukken die je als designer niet had voorzien, dan kan dat beter de volgende keer. Ontwikkelaars gebruiken psychologie als kracht in user experience onderzoeken ook op andere manieren:

• Het enquêteren van een specifieke doelgroep om hun behoeften te meten
• Het schrijven van persona’s, archetypen om te kunnen inschatten hoe gebruikers handelen
• Feedback zoeken of gericht vragen op sociale media
• Een selecte testgroep creëren, door een prototype te ontwikkelen en het gebruik ervan te analyseren
• Beoordelingen van de gebruikerservaring op een website of in een app uitvragen, door middel van korte vragenlijsten of reviews

Het hangt er natuurlijk sterk vanaf voor welke markt een product wordt ontworpen, voor welke doelgroep je een applicatie ontwikkelt. Vaak gaan er ook meerdere iteraties overheen alvorens een product goed wordt ontvangen. Er zijn talloze voorbeelden van websites, apparaten, maar ook bijvoorbeeld games die pas na meerdere updates als bruikbaar of acceptabel werden beschouwd.

Koop jij de eerste generatie Apple Watch of wacht je liever tot een latere, verbeterde versie? Het levert een belangrijk inzicht op voor ontwikkelaars: hoe goed je er ook over nadenkt, de eindgebruiker weet het altijd beter. Er is áltijd ruimte voor verbetering en daarmee is je soft- of hardware nooit af.

Psychologie als kracht in user experience designs

Behalve het onderzoeken van reacties op bestaande interfaces of prototypen, zal gebruikersonderzoek ook rekening moeten houden met een aantal andere zaken. Er is inmiddels veel literatuur geschreven over menselijk gedrag: hoe mensen denken en handelen bij bepaalde situaties. Een voorbeeld om dat uit te vinden is eye-tracking software. Door meerdere personen bij een website dezelfde opdracht te geven, kun je zo patronen in hun muis- en oogbewegingen ontdekken. Of een knop het beste links of rechts kan staan, is waardevolle informatie als je iets hebt te verkopen.

Er is een aantal interessante bevindingen te ontdekken in die onderzoeken naar de psychologie als kracht in user experience designs:

1. Bij elke keuze die wordt toegevoegd, kost het meer tijd om te kiezen. Ook bekend als Hick’s Law. Als je website-menu lijkt op een menu in een Chinees restaurant, dan wordt het tijd om je website te herindelen.
2. Objecten met een relatie moeten dichtbij elkaar te vinden zijn. De grootte en locatie van knoppen en navigatie bepalen de snelheid waarmee een gebruiker ze kan bereiken. De Wet van Fitts berekent die tijd. Het gaat bijvoorbeeld over een knop waarvan het klikgebied groter is dan de knop zelf. De gebruiker kan de knop dan gemakkelijker gebruiken.
3. Gebruikers weten vaak niet waaróm ze iets doen. Het blijkt uit onderzoeken waarbij mensen uit producten moeten kiezen. Psycholoog Timothy Wilson deed dat met vier paar sokken. Hij vroeg aan mensen welke de beste kwaliteit had. De meeste mensen (40%) koos voor D, terwijl alle sokken identiek waren. Bij de vraag waaróm men daarvoor koos, verzonnen mensen allerlei redenen.

Kortom, gebruikersonderzoek mag nooit alleen afgaan op interviews. Goede onderzoekers vragen niet, maar observeren. Wat mensen zeggen, verschilt nog wel eens met wat mensen doen.

De kracht van psychologie van UX als basis voor succes

Het zijn slechts enkele voorbeelden in de wereld van de psychologie achter menselijk gedrag. Onderzoeken en ervaring, maar ook fouten uit het verleden, kunnen goed ingezet worden om je applicatie overzichtelijker en handiger te maken.

Het levert meer conversie in je webshop op. Het zorgt voor meer tevreden klanten die volgende keer je product opnieuw kiezen. Het leidt tot blije werknemers, die hun werk efficiënter kunnen doen. De psychologie achter user experience is een onmisbare schakel bij het ontwerpen van hard- en software.

In 15 jaar tijd hebben we bij Ambrero veel nieuwe technieken voor front end design uitgeprobeerd. We zijn begonnen op een zolderkamer met wat HTML en PHP. Met de opkomst van grotere projecten kozen we voor Java. We programmeren nu veelal in .NET. Voor de voorkant van webapplicaties is één ding hetzelfde gebleven: we programmeren nog steeds in HTML en CSS. En gebruiken front end design tools als Photoshop. Maar de mogelijkheden zijn flink veranderd. In deze blog lees je alles over ontwikkelingen in front end design bij Ambrero: tools, design en trends.

In 2005 ontwikkelden we nog vooral websites. Na wat schetsen en een ontwerp in Photoshop werd de HTML door een front-end developer gebouwd. In 2020 ontwikkelen we vooral (web)applicaties en zijn de verschillende stappen in een project veel meer met elkaar verweven. Dankzij nieuwe technieken!

15 jaar Ambrero; hoe front end design van projecten en de Ambrero site veranderde (klik voor een grotere versie)

Design volgens de laatste trends, met beperkingen

We duiken in de archieven en vinden pareltjes van design voorstellen. Die vonden we tóen heel mooi en vernieuwend, maar nu kan het niet meer. Apps waren er 15 jaar geleden nog nauwelijks. Schermen waren kleiner, hadden een beperkte resolutie en kleurweergave. In de eerste jaren konden we slechts een handjevol lettertypen gebruiken. Een lettertype dat de eindgebruiker niet op de computer had staan, werkte niet. Met Cufon en nu web fonts is het aantal mogelijkheden drastisch toegenomen. Visual designers volgden de ontwikkelingen in front end design de afgelopen 15 jaar.

De tijd van gradiënten, veel schaduwen, ronde hoekjes en kleine lettertypen heeft lang geduurd. Websites in 2005 waren vaak niet meer dan een verzameling links. Met een afbeelding aan de bovenkant en een zijbalk. Te veel visuele elementen toevoegen was een uitdaging, want dan werd de website te langzaam. Dat probleem bestaat nog steeds, maar de snelheid van browsers en hardware is toegenomen. Dat biedt onze designers meer mogelijkheden. Met de komst van de iPhone in 2007, veranderde alles. Websites moeten sindsdien óók op mobiele apparaten werken. Met Javascript en CSS3 zijn animaties mogelijk die vroeger alleen met Macromedia Flash konden worden gerealiseerd.

De opkomst van flat design veroorzaakte een designrevolutie. Grote vlakken, strakke lettertypen en iconen met heftige kleuren. Grote bedrijven als Google hebben er design guides voor geschreven. Hun Material Design beschrijft grafische elementen, animaties en gestures op mobiele apparaten. Microsoft kwam vorig jaar nog met hun nieuwe kijk op design, genaamd Fluent Design.

Van vloeken op Internet Explorer 6 naar Android apps

Websites maakten we in 2005 voor Internet Explorer 6, Opera en Netscape. Regelmatig hebben we bij Ambrero gevloekt op de meest populaire browser. IE6 hield zich vaak niet aan de standaarden voor webdevelopment. De afgelopen 15 jaar zijn deze door het W3C uitgewerkt. Het was vaak noodzaak om aparte code te schrijven voor verschillende browsers. Het duurde tot 2016 voordat Microsoft hun betere Edge browser introduceerde. Veel bedrijven stappen echter niet zomaar over, dus is het zaak altijd te blijven testen in oude browsers. Dat kan nu met tools als Browserstack, die we bij Ambrero regelmatig inzetten.

Inmiddels is het browserlandschap flink uitgebreid. Front-end developers testen in Internet Explorer, Edge, Google Chrome, Safari en Firefox. Én op veel soorten mobile devices. De technieken om webapplicaties er goed uit te laten zien zijn ook toegenomen. Je hoeft niet voor elk device een aparte versie te maken. Met media-queries in CSS worden de stijl en locatie van elementen op de pagina per device geoptimaliseerd. Het testen van webapplicaties is dankzij de web-developer tools veel eenvoudiger geworden.

Nu zijn er talloze ontwikkelmethoden voor apps, native, of als web-based app (zoals we deden voor de HKU in 2018). Ontwikkelen voor Android- en Apple-devices is nog steeds een arbeidsintensieve klus. Er bestaan gelukkig steeds betere initiatieven om één applicatie te laten werken op beide platformen.

HTML, Javascript en CSS: ontwikkelingen in front end design

Browsers evolueren continu. Sommige elementen die we in 2005 gebruikten worden niet meer ondersteund. Daardoor is het zaak om als (front-end) developer continu op de hoogte te blijven. Browserupdates gaan nu vaak automatisch, dus kun je er veiliger vanuit gaan dat mensen met een recente browser werken.

Met het succes van jQuery in 2006 werd het schrijven van Javascript-code makkelijk. Ook Ambrero zet het in, waardoor developers tijd besparen. Inmiddels is vrijwel elke applicatie die we bij Ambrero bouwen asynchroon opgezet. De pagina wordt geladen zonder content en de daadwerkelijke database-informatie wordt daarna opgehaald. Eén van de belangrijkste ontwikkelingen in front end design van de afgelopen 15 jaar.

CSS3 is de laatste versie van de stylesheet-standaard waarbij alle webapplicaties en -sites worden opgemaakt. De beperkingen die we hadden door verschillende browsers zijn grotendeels voorbij. Bovendien zijn ze nu goed gedocumenteerd. Met CSS3 zijn geavanceerde animaties en pagina-overgangen mogelijk. Die ontwikkelingen in front end design zorgen voor responsieve, betere webapplicaties!

Een greep uit de front-end tooling van nu: van Bootstrap tot Node JS

Ontwikkelingen in front end design tools voor sneller front-end development

In 2005 maakte je een website in Kladblok. Je schrijft de code, slaat het op als HTML-bestand of genereert het in een back-end taal als PHP. In de loop der tijd hebben bij Ambrero heel wat handiger tooling versleten.

Designapplicaties als Photoshop gebruiken we al sinds het begin. We wisselen bestanden uit via de cloud. Gebruiksvriendelijkheid kreeg de afgelopen 15 jaar meer prioriteit en Ambrero zette de mens centraal. Enkele ontwikkelingen:

• User interfaces hebben we jarenlang in Axure ontworpen. Inmiddels zijn tools als Figma en Adobe XD meer gebruikt.
• Met prototypes presenteren we een interactieve versie van de applicatie, voordat we deze bouwen.
• We programmeren in IntelliJ, de meest uitgebreide front end design tool voor webontwikkeling.
• Met LESS (2010) en nu Sass kost het ontwikkelen van CSS veel minder tijd. Vele regels code CSS worden nu in een handomdraai gegenereerd, dankzij functies.
• De open-source JavaScript toolkit Gulp.JS levert ons een enorme tijdwinst op.

Er ontstond bij Ambrero ook de behoefte aan versiebeheer. Met SVN en nu GIT kunnen we terug in de tijd om te kijken welke code developers wijzigden in onze webapplicaties. Bovendien gaat samenwerken aan hetzelfde project eenvoudiger.

We staan niet stil

We vinden het leuk om nieuwe ontwikkelingen in front end design te blijven proberen. Je kunt ervan uit gaan dat je applicatie de laatste technieken gebruikt. Met open-source, toekomstbestendige technieken zijn we met front end design in onze applicaties een stap vooruit.

Ambrero bestaat 15 jaar. We volgen sinds de oprichting in 2005 de trends, het nieuws en ontwikkelingen in ons vakgebied. We verbazen ons dat bepaalde producten of diensten nog maar zo kort bestaan. YouTube werd opgericht rond de tijd dat Ambrero startte. Twitter een jaar later. De eerste iPhone kwam uit in 2007. En soms gaat de lancering van een stukje software helemaal mis, door software bugs of menselijk falen. In deze blog lees je software fouten in de afgelopen 15 jaar die ons zijn bijgebleven.

We vroegen aan het team van Ambrero om na te denken over 15 jaar softwaregeschiedenis. Software die het nieuws haalde vanwege fouten, die bedrijven of projecten in de war schopte. Kortom: wat waren de software fouten en bugs in de afgelopen 15 jaar die je nooit zult vergeten?

Als automatische updates mis gaan: Windows 10

Microsoft heeft veel kritiek gekregen op Windows 8, in 2012. Het besturingssysteem introduceerde een hele nieuwe manier van werken: met apps, in een Metro UI huisstijl. Strakke vormgeving, in blokken en felle kleuren leverde een groot contrast met vorige Windows-versies op. Het moest de grote verbetering worden ten opzichte van het mislukte Windows Vista avontuur. Gebruikers konden het nieuwe startscherm niet waarderen. De twee verschillende user interfaces maakte het bovendien lastig werken. Steeds meer gebruikers stapten over naar Apple en beklaagden zich online. In 2014 kondigde Microsoft een grote verandering aan: de laatste versie van Windows, genaamd Windows 10 kwam eraan. Een jaar later kon iedereen die dat wilde gratis overstappen. De manier waarop overstappen ging, leverde al gauw nieuwe controverse op.

Microsoft was namelijk wel heel erg actief bezig met het overhalen van mensen om toch écht over te stappen. Het bedrijfde veranderde de download voor Windows 8 gebruikers naar een ‘Aanbevolen’ download. Daarmee werd het nieuwe besturingssysteem eigenlijk automatisch geïnstalleerd. Dat leverde grote problemen op voor mensen met langzame computers. En meerdere drivers, voor printers en andere randapparatuur, hielden op te werken. De upgrade terugdraaien was bovendien een tijdrovend proces. Een pop-up met de melding dat er geupgrade zou worden kon eerst worden weggeklikt, nu betekende het simpelweg ‘accepteren’. Om te voorkomen dat het bij hun pc gebeurde, zetten veel gebruikers belangrijke updates helemaal uit. Het leverde grote beveiligingsrisico’s op.

Het duurde tot vorig jaar voordat Microsoft de ‘Windows as a service’ deels losliet. Het is nu mogelijk om grote en kleine updates in Windows 10 eerst te controleren, voordat ze automatisch worden geïnstalleerd. Wát er wordt veranderd is vaak verstopt in lange update-informatie. Vaak duurt het enkele minuten voordat een computer bruikbaar is bij het installeren van updates. Bedrijven verliezen daarmee nog steeds kostbare tijd.

iOS zorgt dat mensen zich verslapen

Een bug in Apple’s iOS besturingssysteem zorgde er in 2011 voor dat gebruikers die een alarm voor 1 of 2 januari instelden, niet werden gewekt. Het probleem deed zich voor bij alarmen die voor die dagen waren ingesteld, maar herhalende wekkers werkten wel. Volgens een analyse werd de fout veroorzaakt door het verkeerd programmeren van de weeknummers. Een alarm op maandag 3 januari 2011 werd maandag, week 1, 2011. Een alarm op zondag 2 januari 2011 werd zondag, week 52, 2011. Gelukkig viel de fout in een weekend. In de commentaren op het bericht bij Tweakers lees je een uitgebreide analyse.

Software fouten leveren minima tonnen op

De Belastingdienst in Amsterdam zal december 2013 niet snel vergeten. Een van de grootste software bugs bij de Nederlandse overheid resulteerde in miljoenen verlies. Bij de overboeking van de woonkostenbijdrage voor dat jaar, aan mensen in de bijstand, is iets misgegaan met komma’s en punten. Wie recht had op 125 euro, zag 12.500 euro bijgeschreven. Sommige mensen kregen zelfs 30.000 euro op hun rekening. In totaal is 188 miljoen euro uitgekeerd. Iedereen moest het geld terugstorten. De uiteindelijke oorzaak bleek een combinatie van software bugs en een menselijke fout. Daardoor is het bedrag in eurocenten veranderd in euro’s. In dit geval was er 1,5 miljoen euro schade voor de gemeente Amsterdam. Een van de grootste software fouten in de afgelopen 15 jaar, kon dus worden voorkomen door een duidelijker label bij een invulveldje. Een grote verantwoordelijkheid voor software developers.

Apple stuurde je in 2012 naar een onbewoond eiland

Apple introduceert Maps app die niet werkt

Als Apple iets nieuws introduceert, downloaden of kopen veel gebruikers het meteen. Zo ook in 2012, met de nieuwe Maps app voor iOS. Apple beloofde de interface compleet te vernieuwen en de app heel gebruiksvriendelijk te maken. Hun oude kaartgegevens waren gebaseerd op databases van Google, maar daar wilden ze vanaf. Vanaf iOS versie 6 vervingen ze deze voor hun eigen kaartsoftware, vanaf de grond af aan opgebouwd. Ze haalden het nieuws, maar niet om de reden die ze wilden. Hun kaarten werkten namelijk helemaal niet.

De interface was inderdaad zeer prettig, de kaarten duidelijk. Echter, wanneer je het onderweg gebruikte, werd je gedropt in the-middle-of-nowhere. Duizenden klachten van mensen op sociale media die te laat waren voor afspraken. Of in een weiland stonden zonder een idee waarheen te gaan. Tientallen software bugs zorgden voor veel frustratie. Zoeken naar bepaalde locaties leverde vaak de verkeerde resultaten op. Hele treinstations, bruggen, attracties voor toeristen waren van de kaart verdwenen. Of hadden een verkeerde titel of locatie. Satellietfoto’s werden uit verschillende seizoenen aan elkaar geplakt. Een lijst hilarische voorbeelden vind je nog steeds op Tumblr. Volgens ons team kon dit voorbeeld niet ontbreken in de software fouten in de afgelopen 15 jaar. Apple kwam met een serie updates, die de app inmiddels een stuk bruikbaarder maakt. Ze zullen een nieuwe app volgende keer naar verwachting beter testen.

Leren van software bugs en fouten

Wanneer een bedrijf of dienst het nieuws haalt vanwege software bugs is het voor software developers interessant om te kijken waar de fout zit. De meest voorkomende problemen bij software fouten in de afgelopen 15 jaar zien we:

• Eindeloze (overheids)projecten, die ver boven budget alsnog gecancelled worden.
• De eerste dag dat nieuwe software in gebruik wordt genomen, kunnen werknemers er niet mee omgaan.
• Soms duurt de ontwikkeling van software eindeloos, door de veranderende markt of het verkopen van rechten.

Zeker als het gaat over persoonsgegevens, zoals medische informatie is goed testen onmisbaar. Met uitgebreide tests, gebruikersonderzoeken en een software bugs tracker, voorkomen we bij Ambrero zoveel mogelijk fouten. Software voor onze klanten monitoren we bovendien continu. Met een succesratio van 99% rondt Ambrero projecten zonder software fouten af!

User experience (UX) is overal. Als je de weg moet vinden in een stad waar je nog nooit geweest bent. Wanneer je een magnetronmaaltijd wilt opwarmen. Als je een hotel wilt boeken. Of wanneer je snel informatie in een applicatie wilt vinden. Om een goede oplossing te vinden voor een UX-probleem, analyseren ontwerpers de eindgebruiker. Die psychologie achter user experience kan het verschil betekenen tussen winst en verlies.

Mensen lezen nauwelijks meer. De tijd is voorbij dat je met lange teksten kan uitleggen hoe een website of applicatie werkt. Dat is niet meer nodig; een steeds grotere groep mensen is goed bekend met navigeren op internet en in apps. Voor user experience designers is de vraag: hoe ontwerp ik een user interface (UI) die direct begrepen wordt? De designer onderzoekt de wensen en gedragingen van de doelgroep voor wie hij of zij een interface ontwikkelt. Het gaat bijvoorbeeld over:

• Heldere opvolging van schermen
• Logische en gemakkelijke navigatie
• Herkenbare interface-elementen

Netflix; voorbeeld van een succesvolle interface

Er zijn genoeg voorbeelden van succesvolle user interfaces. Netflix wordt dagelijks door miljoenen mensen gebruikt. De dienst heeft een interface die werkt. Dat kunnen we gerust stellen nadat het bedrijf veel geld stak in gebruikersonderzoeken. Wat levert nu echt het beste resultaat op? Het doel van de applicatie is snel vinden wat je zoekt. Én om je te verleiden om iets anders te kijken. De zoekfunctie levert altijd resultaat. Ook al is de film die je zoekt niet op Netflix te vinden. Dit doen ze door slim gebruik te maken van zoektermen van andere gebruikers. Maar ook op basis van relevantie, bijvoorbeeld je locatie. Je krijgt bij Netflix persoonlijke aanbevelingen op basis van je kijkhistorie. En pauzeer je in de app, dan kijk je direct verder op je televisie. De user interfaces van de verschillende applicaties van de dienst zijn consistent, herkenbaar.

Een app(araat) moet doen waar het voor bedoeld is

De wensen van de eindgebruiker kan worden beschreven in scenario’s of user stories. Daarin staat hoe de gebruiker omgaat met de applicatie. Dit is vaak een continu proces, want het kan altijd nóg beter. De psychologie achter user experience wordt door grote bedrijven vaak toegepast in updates van de software.

Als je user interface compleet over het hoofd wordt gezien, heb je het goed gedaan!

Uiteindelijk telt er maar één ding: de app, de website, de gameconsole of slimme thermometer moet doen wat het moet doen. Je opent Netflix en je wilt een serie kijken. Dus zonder lang te moeten zoeken, zonder (fout)meldingen. In een webshop wil je snel producten kunnen bestellen. Een vaatwasser moet de vaat schoonmaken. Als de eindgebruiker de UI direct gebruikt en begrijpt, dan is de missie van de designer geslaagd.

Verdiepen in de gedachten van de eindgebruiker: Human Computer Interaction

Het gaat bij user experience dus niet alleen over digitale interfaces. Het kunnen ook tastbare apparaten en machines zijn. Er moet worden nagedacht over het indelen van displays in auto’s, afstandsbedieningen en bedieningspanelen. Daarbij zijn herkenbaarheid en veiligheid essentieel. Om een goede interface te kunnen ontwerpen, verdiept de UX-designer zich in de eindgebruiker. Bijvoorbeeld met een prototype en gebruikerstests, om te kijken hoe de eindgebruiker zich gedraagt. Het onderzoeken van de psychologie achter de user experience levert meestal een betere gebruikerservaring op.

Met Human Computer Interaction (HCI) ontstond er in de jaren 70 de wens om computertechnologie te combineren met cognitieve wetenschap en ‘menselijke factoren’. Elke gebruiker is immers anders. De gedachte in de HCI community is dat een optimale koppeling tussen ‘man’ en ‘machine’ wordt gevonden. Met kennis van beperkingen van mensen met computertechnologie. Mensen kunnen bijvoorbeeld:

• Fouten maken
• Verkeerde beoordeling maken
• Vooroordelen hebben
• Kleurenblind of doof zijn, of anderszins een (audio)visuele beperking hebben
• Gelimiteerd zijn door tijd
• Slechts een aantal handelingen tegelijk doen
• Gemotiveerd moeten zijn
• Gevoelens hebben: ongeduldig, angstig, moe of irrationeel zijn
• En nog veel meer

Dit is waar een user experience designer op let

Er zijn honderden artikelen geschreven over de psychologie achter user experience. Het gaat dan over de gedragingen van mensen ten opzichte van software en hardware. Als je de lijst afzet tegen moderne (web)applicaties en interfaces, dan kun je komen tot een aantal sleutelelementen die een interface goed maken. Zoals:

• Snelheid: binnen zo weinig mogelijk handelingen het einddoel bereiken. Je zoekt een warme trui en wordt blij als de zoekfunctie van een kledingwebshop je een lijstje met truien in jouw maat geeft.
• Veiligheid: de gebruiker wil een beveiligde applicatie of veilig apparaat. Een handeling moet niet leiden tot problemen. Verwijdert dat prullenbakje mijn bestelling definitief en zonder waarschuwing?
• Prestatie en plezier: het gevoel geven iets te bereiken met het gebruiken van de software. De gebruiker heeft de controle. Bij het boeken van een treinreis wil je de terugreis niet opnieuw invullen als je de heenreis wijzigt. Heb je een sportieve sessie met een app gedaan, dan krijg je een vrolijke animatie als beloning.
• Persoonlijk en pro-actief: op basis van je voorkeuren of historie wordt aangeraden wat je het beste kunt doen. Bij Bol.com worden dagelijkse producten opnieuw aangeraden na een bepaalde periode. Bijvoorbeeld als je gekochte tandpasta op is.
• Duidelijkheid: zorg dat de werking van de functie overeenkomt met de verwachtingen van de gebruiker. Weet je wat er gebeurt als je op een rookmelder die rode knop indrukt?
• Herkenbaarheid: mensen zijn eerder geneigd een applicatie te begrijpen als deze conventies gebruikt die algemeen worden begrepen. Zo is een ander icoon verzinnen voor de aan/uit knop van een elektrische auto, een slecht idee.

Onderzoek de psychologie in user experience voor betere software

Pas deze lijst eens toe op huishoudelijke apparaten, veelgebruikte apps of websites. Je ziet dat interfaces al snel beter kunnen. Interfaces die gebruikers verder helpen, plezier laten hebben én consistent en efficiënt zijn, zorgen voor blije gebruikers. En dat leidt tot meer conversie op je website, of meer klanten voor je product.

De gebruikerservaring is dus alles in software. Of het nu een app, ticketmachine of auto is, gebruikers willen het efficiënt gebruiken. De developers, ontwerpers en marketingafdeling van dergelijke soft- en hardware, willen tevreden gebruikers. Met gedegen usability onderzoek en gebruikerstests, voorkom je veel ellende.

Bij Ambrero leggen we de nadruk op de user experience. Met ruim 15 jaar ervaring weten we goed hoe we het gedrag van eindgebruikers kunnen achterhalen. Zodat de applicaties die we maken, direct begrepen worden en snel vertrouwd raken. Met het in acht nemen van de psychologie achter de user experience, is je applicatie klaar voor de toekomst.

De user experience (UX) krijgt tijdens de ontwikkeling van innovatieve webapplicaties meer en meer aandacht. Wat houdt een goede gebruikerservaring eigenlijk in? Wat komt er bij kijken om dat te realiseren? Dit blog geeft antwoord op de vraag; Hoe draagt UX bij aan de ontwikkeling van innovatieve webapplicaties? En wat betekent dat voor jou.

Tegenwoordig is vrijwel elke applicatie die we dagelijks gebruiken, of het nu een app op je telefoon is of een e-mailprogramma online, gefocused op de eindgebruiker. Veel meer dan pakweg vijftien jaar geleden, toen applicaties vooral moesten wérken en niet zo zeer gebruiksvriendelijk waren. Vaak worden er door grote bedrijven gebruikersonderzoeken gedaan om er achter te komen welke aanpak het beste werkt voor een innovatieve webapplicatie.

De gebruiker centraal

Het begint vaak met een wens tot verbetering van de huidige werkwijze. Of een doel zoals het bereiken van meer betalende klanten of een hogere efficiëntie. Misschien werk je nu in eindeloze Excel-sheets, klagen je werknemers over te grote bestanden, langzame applicaties of een omslachtige manier van werken? Dat kan beter, zeker met de huidige technieken beschikbaar op het web.

Direct na die wens komt UX in beeld: hoe vertalen we deze gewenste verbeteringen tot een innovatieve webapplicatie waar gebruikers fijn mee werken? Kan het aantal stappen waarmee een doel wordt bereikt verminderd worden? De user experience is onmisbaar geworden in het ontwikkelproces. Usability staat voorop. De eindgebruiker is het middelpunt van dat ontwerpproces. Een goed beeld krijgen van die eindgebruiker is dan ook essentieel voor efficiënte en toekomstbestendige software.

Dat is niet alleen tegenwoordig de ‘standaard’ bij webapplicaties. Het is ook nodig om de eindgebruikers te overtuigen van de noodzaak tot vernieuwing.

Wat komt er kijken bij een user experience concept?

Gebaseerd op een functionele beschrijving (user stories in een agile traject) zal de UX-designer nadenken over een oplossing voor het probleem. Het moet een logische, overzichtelijke en innovatieve webapplicatie worden. Met de ervaring die de UX-designer heeft kan hij adviseren over de te nemen richting. Het gaat dan over:

• Opvolging van schermen: hoe komt de gebruiker snel waar hij wil zijn?
• Indeling van (hoofd)menu’s
• Plaatsing van informatie, navigatie en interactieve onderdelen op het scherm

Een voorbeeld van een wireframe (klik om een animatie te zien van het interactieve prototype)

Daarom is het van belang dat er de tijd wordt genomen voor een ontwerpproces, zodat UX kan bijdragen in de ontwikkeling van je applicatie. Dat zijn in het kort de volgende stappen:

1. Wireframes De UX-designer ontwerpt enkele draadmodellen (wireframes) om de werking van de applicatie uit te leggen. In een agile project zoals wij werken bij Ambrero gaat dat vaak per sprint: een aantal user stories worden enkele weken vóór de start van de sprint uitgewerkt tot een user experience concept.
2. Interactief prototype De UX-designer presenteert de draadmodellen in een interactief prototype, door de knoppen en menu’s klikbaar te maken. Zo lijkt het alsof je door de applicatie navigeert. Je krijgt een gevoel bij de te ontwikkelen applicatie.
3. Feedback verwerken De productowner geeft feedback. Is de informatie helder genoeg? Worden alle technische vereisten meegenomen in het voorstel?
4. Implementatie De definitieve wireframes vormen de basis voor de applicatie. Met enkele schermen is de logica en indeling voor een programmeur al duidelijk en kan hij of zij aan de slag.

In een later stadium wordt een user interface design (UI) of huisstijl ontworpen, zoals een bepaling voor typografie en grafisch ontwerp. In elke iteratie (sprint) van een agile project zal UX bijdragen om de richting te bepalen.

Wat heb je aan user experience in innovatieve webapplicaties?

Je ziet het: je hebt snel resultaat. Een helder én werkend prototype kun je al na enkele weken testen. De UX-designer werkt veel samen met de productowner van een project. Een agile werkproces met UX als steunpilaar is efficiënt en helder voor iedereen die met die nieuwe applicatie te maken heeft. De productowner houdt met zo’n UX-concept de vinger aan de pols:

• Je bent elke iteratie op de hoogte van de voortgang;
• Er kan direct worden bijgestuurd in overleg met de UX-designer;
• De productowner wint advies in op basis van de ervaring die de UX-designer heeft;
• Hij kan aan belanghebbenden, zoals eindgebruikers, visueel uitleggen wat er gebouwd gaat worden;
• Er is een referentie om later te kijken of aan de vraag is voldaan: meer zekerheid;

De applicatie gaat leven in de organisatie – die betrokkenheid van eindgebruikers is fijn. Want hoewel processen omslachtig of vervelend kunnen zijn, het is wel dagelijkse kost voor je werknemers. Zij zullen moeten wennen aan nieuwe software. Wat kan die nieuwe applicatie bijdragen aan de productiviteit? We geloven dat wanneer je gebruikers in een vroeg stadium meeneemt in het ontwikkelproces, ze eerder geneigd zijn af te stappen van hun bestaande werkwijze. En belangrijker nog: gebruikers hebben een onmisbare bijdrage in de ontwikkeling.

Innovatieve webapplicaties, klaar voor de toekomst

UX kan dus sterk bijdragen aan een vloeiende ontwikkeling, helderheid bij de eindgebruikers scheppen en je als productowner meer controle geven. Meer grip, meer helderheid, dus meer zekerheid. Een moderne, vernieuwende oplossing waar je jaren mee vooruit kunt. Uiteindelijk zorgt een goed UX-ontwerpproces voor een toekomstbestendige, innovatieve webapplicatie waar fijn mee te werken is. Dat levert blije werknemers, tijdwinst en meer productiviteit op.

Er is geen interface die zonder UX design kan. User experience design is de manier om behoeften van gebruikers om te zetten naar een werkbaar scherm, voor computer, smartphone of waar dan ook. Belangrijk als je geld wilt verdienen met je website, als je iets te vertellen hebt, je werknemers efficiënt wilt laten werken en wilt zorgen dat bedrijfsprocessen worden vergemakkelijkt. Maar wat komt er bij kijken?

Hier bij Ambrero kijken we altijd eerst naar de wensen van de klant. Wat is het eerste idee, wat is het uiteindelijke doel? Soms is er veel (offline) data beschikbaar, die in kaart moet worden gebracht. Hoe kunnen we deze gegevens gebruiken voor schermen? Hoe ontsluit je deze informatie en hoe maak je dit inzichtelijk en doorzoekbaar? UX design bestaat uit het vatten van deze wensen (soms geschreven in user stories) in begrijpelijke schermen. Als UX designer begin je na het in kaart brengen van de gegevens met het uitdenken van een flowchart: op welke manier komt de gebruiker bij de gewenste data? Dit leidt tot enkele onderdelen in de applicatie of website, die logisch aanvoelen en snel te vinden zijn, maar altijd met de eindgebruiker centraal. Sommige applicaties hebben te maken met verschillende typen gebruikers. Het is belangrijk dat je daarmee rekening houdt, want niet iedereen mag of kan alle data zien.

Een voorbeeld ter illustratie

Als voorbeeld kunnen we een applicatie nemen waar leerlingen van een middelbare school hun cijfers van vakken kunnen inzien. We hebben in deze fictieve software te maken met drie verschillende doelgroepen. Ten eerste de leerlingen, die graag hun resultaten snel moeten kunnen vinden. Daarnaast de docenten, die de resultaten eenvoudig moeten kunnen invoeren en groepen leerlingen kunnen indelen. En de applicatiebeheerders, die bijvoorbeeld docenten kunnen uitnodigen en onderhoud aan het systeem kunnen plegen. Logische sectie voor zo’n applicatie zouden kunnen zijn:

• een overzicht van vakken en resultaten voor de leerling
• een pagina met groepen en leerlingen, behorende bij de docent
• schermen voor de docent om snel veel resultaten en leerlingen te kunnen invoeren
• een scherm om docenten te kunnen toevoegen voor de beheerder

Met deze secties zijn we er natuurlijk nog niet. Je kunt je voorstellen dat een docent alleen zijn eigen groepen mag inzien, dus krijg je een rechtenstructuur die alleen bepaalde data ophaalt voor specifieke gebruikers. Daarnaast moeten alle doelgroepen nog kunnen in- en uitloggen (inclusief een ‘wachtwoord vergeten’ functionaliteit) en zouden meldingen dat er nieuwe cijfers zijn toegevoegd erg handig zijn, bijvoorbeeld per e-mail. Je ziet dat een eenvoudige wens, leerlingen moeten hun resultaten kunnen inzien, al snel leidt tot veel onderdelen binnen een applicatie, die snel complex kunnen worden. Dit is natuurlijk helemaal afhankelijk van de gewenste diepgang en hoeveelheid data. Vaak worden deze verschillende onderdelen daarom beschreven volgens de Agile methode in user stories: hapklare stukken functionaliteit, die individueel worden uitgedacht en uitgetekend. Daarna kan het ontwikkelteam met behulp van de wireframes een goede inschatting maken van de hoeveelheid werk om de applicatie daadwerkelijk te bouwen.

Wireframes zeggen meer dan 1000 woorden

Een van de user stories zou kunnen zijn: “Als leerling wil ik graag snel een overzicht van mijn resultaten zien”. Met behulp van de beschreven gegevens in de story, kan er een wireframe worden gemaakt. Er is bijvoorbeeld beschreven dat vakken in semesters zijn ingedeeld, er zowel proefwerken als examens zijn en dat bepaalde resultaten zwaarder kunnen wegen dan andere. Dit soort gegevens neemt de UX designer in nauw overleg met de klant mee tijdens het uittekenen van het wireframe. Het is een draadmodel van een scherm dat klaar is om gebouwd te worden, zelfs wanneer er nog niet ingelogd kan worden of er een menu is. Alleen de benodigde onderdelen worden getekend – de rest komt later, wanneer er meer wensen duidelijk zijn en andere stories in behandeling worden genomen. Een wireframe is ideaal voor gerichte feedback van de klant, die daarmee continu de controle houdt over zijn project.

UX design is in feite het oplossen van problemen – in het invoeren en ontsluiten van gegevens, met behulp van de elementen die daarvoor beschikbaar zijn. We tekenen de locatie van gegevens, knoppen, opties en formulieren uit, zodat het team weet wat er gebouwd gaat worden. Na enkele (of tientallen!) schetsen, werkt de UX designer met behulp van tools als Axure of het online UXPin een aantal wireframes uit. Een goed middel om de klant en, na goedkeuring, het ontwikkelteam te laten zien wat we van plan zijn om te bouwen.

Een voorbeeld van een wireframe voor Rodeo. Vaak worden alleen grijstinten gebruikt, zodat de aandacht uitgaat naar de plaatsing en functionaliteit van onderdelen. Dit scherm verbeeldt het toevoegen van uren in de applicatie.

In het functioneel ontwerp, het uittekenen van wireframes met wellicht enkele annotaties, wordt de vorm van de applicatie al heel goed duidelijk. We zien waar het menu komt, welke onderdelen daar in staan en hoe de schermen zijn opgebouwd. Met een wireframe geef je ook gebruikersinteractie aan: wat gebeurt er als je op een knop klikt of met je muis op een regel gaat staan? De opvolging van schermen is hier heel belangrijk en kunnen zelfs als opmaat dienen naar een interactief prototype van de applicatie. Daarmee kan de opdrachtgever van begin tot eind door de applicatie klikken, zonder dat er een regel code is geschreven. Daarmee komt de software al in een vroeg stadium van het project tot leven! Sommige projecten lenen zich er zelfs voor om gebouwd te worden op een ‘draadmodel-manier’. Zonder grafische schil is de applicatie dan te gebruiken. Het design, dat meestal na het functioneel ontwerp komt, wordt dan pas na ontwikkeling toegepast.

Met goed UX design zal de docent straks veel minder tijd kwijt zijn met het invoeren van cijfers voor al zijn leerlingen. En zal de beheerder met een druk op de knop meerdere docenten kunnen uitnodigen om te werken met het systeem. En leerlingen? Die zitten minder lang in spanning voordat ze het cijfer van die belangrijke wiskundetoets weten. Want dit systeem is wel heel makkelijk in gebruik!

In het begin van het internettijdperk was het al een hele prestatie als je een eigen webpagina had. En ook toen al moest je opvallen door met een creatieve website te komen. Met scriptjes om een klok op je website te tonen, of letters die het beeld in kwamen vliegen. Geluidjes, later JAVA-applets of Flash-animaties. Grote bedrijven kwamen met innovatieve en dure Flash-websites, waar je mond van openviel. De tijden zijn veranderd.

Als je nu animaties op je website wilt, om je verhaal te vertellen, om de website er net iets krachtiger uit te laten zien of om interactieve elementen aan te duiden, dan grijp je niet meer naar Flash. Afgezien van de ondersteuning onder desktop-browsers, wil je niet dat iemand die je website met een smartphone bezoekt, je pagina niet kan laden, of door z’n maandbundel heen is omdat de pagina een aantal MB groot is. Flash is dood. Zelfs de enige uiting die nog actief gebruik maakt van deze techniek, advertentiebanners op internet, wordt veelal geblokkeerd door een van de vele Adblocker-applicaties. Nee, dan moet je als creatief webbureau, adverteerder of bedrijf echt op zoek naar alternatieven.

Animaties zijn daarentegen helemaal in. Vooral animaties die op alle platformen, van desktop tot tablet en smartphone, snel en helder ogen. Met Javascript is dat dankzij een aantal uitgebreide scripts te bereiken en lijkt de enige limiet je fantasie. In de vorige artikelen zagen we al dat graphics te creëren zijn met code. SVG laat toe dit soort innovatieve animaties te maken, zonder dat het veel rekenkracht of dataverkeer kost, omdat de browser geen afbeelding, maar tekst inleest om de animatie te realiseren.

Kies je script

Javascript en SVG passen goed bij elkaar. Animeren met native SVG code, zoals in het vorige artikel, wordt al snel complex en bovendien onleesbaar. Wanneer je bijvoorbeeld een SVG pad wilt laten animeren naar een andere vorm, dan kun je al snel verdwaald raken in de grote hoeveelheid code die daarvoor nodig is. Met libraries als SnapSVG, Velocity en Bonsai, animeer je veelal CSS-attributen en kun je animaties ook eenvoudig aaneenrijgen. Je moet daarbij onderscheid maken tussen libraries die SVG’s kunnen manipuleren of SVG’s kunnen maken. Soms is beide mogelijk, maar een aantal libraries beperkt zich tot enkele functionaliteiten, zoals het animeren van lijnen (<path>-elementen) in Walkway.js of Vivus. Veel libraries zijn geschikt voor manipulatie van allerlei soorten HTML-elementen – niet alleen SVG, zoals het populaire Velocity.js. Het is even zoeken naar de juiste bibliotheek voor jouw project: wil je een complete set aan vormgegeven elementen zoals grafieken en loading-bars, wil je een enkele animatie realiseren, of wil je alle controle hebben? Let daarbij ook op de licentie (mag je een bibliotheek in een commercieel project gebruiken?) en kosten: de SVG-uitbreiding van het geweldige GSAP (MorphSVG) is bijvoorbeeld een betaalde bibliotheek. Met de browser-ondersteuning zit het meestal wel goed: juist veel Javascript-bibliotheken zullen veelvoorkomende problemen in oudere browsers, zoals Internet Explorer 10 en lager, opvangen. Toch is het natuurlijk goed om in elke browser te testen.

Ben je gewend om te animeren met jQuery, dan zullen veel Javascript-libraries niet veel moeilijkheden opleveren. Omdat dit artikel vooral gaat over animeren met SVG’s, zullen we in dit artikel ingaan op één library: BonsaiJS. Deze zeer complete aanvulling op Javascript, kan SVG’s zowel creëren als manipuleren en wordt ondersteund door alle grote browsers (IE9 en hoger). Daarnaast heeft de website een heldere documentatie. Wil je andere elementen kunnen manipuleren, dan zijn jQuery, Velocity, GSAP of TweenJS goede alternatieven. Om specifiek SVG’s te kunnen animeren zijn SnapSVG en SVGjs goede keuzes.

Elementen tekenen en animeren: een geanimeerde kroon!

Laten we beginnen met Bonsai. Het is bijna Koningsdag, dus tekenen we een kroon die we daarna voorzien van een eenvoudige animatie. We hebben gezien hoe SVG’s werken en hoe deze te animeren zijn. De Bonsai-library laat toe elementen te tekenen en te manipuleren en wordt ondersteund door alle grote browsers (voor Internet Explorer geldt versie 9 en hoger). Bonsai ondersteunt afbeeldingen, video’s en lettertypen, path morphing (<path> in SVG), keyframe-animaties en time-based animaties. Om de library aan je pagina toe te voegen kun je de volgende code gebruiken of download de laatste versie via Github.

<script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>

Maak daarnaast een nieuw Javascript-bestand aan. Met de volgende code wordt het Javascript-bestand ingeladen voor gebruik in Bonsai. We definiëren de URL naar de animatie, de grootte en het element waar de animatie ingeladen moet worden.

<div id="kroon"></div>
<script type="text/javascript">
   bonsai.run(document.getElementById('kroon'), {
      url: 'animatie.js',
      width: 200,
      height: 200
   });
</script>

In animatie.js gaan we de animatie creëren. Om te kijken hoe verschillende vormen werken, kun je het volgende stukje code in het bestand plaatsen. Het resultaat zie je hiernaast.

var square = new Rect(0, 0, 100, 100);
square.addTo(stage);
square.fill('#96be28');

Je ziet dat het toevoegen van een eenvoudige vorm, met een stukje gemakkelijk te begrijpen code gaat. In de variabele square wordt een SVG gemaakt van 100×100 pixels en toegevoegd aan de stage, die we eerder hebben gedefinieerd met bonsai.run. Daarnaast wordt het vlak gevuld met een kleur. Je kunt spelen met de volgende varianten om andere vormen te maken:

• new Rect(x, y, width, height, [cornerRadius])
• new Arc(centerX, centerY, radius, startAngle, endAngle, isAntiClockwise)
• new Circle(centerX, centerY, radius)
• new Ellipse(centerX, centerY, radiusX, radiusY)
• new Polygon(centerX, centerY, radius, sides)
• new Star(centerX, centerY, radius, rays, factor)

Met een stukje extra code laten het vierkant veranderen van vorm, positie en kleur. Je kunt een hele reeks aan eigenschappen animeren. Je ziet dat de animatie start na 1,5 seconde (1500ms) en 6 seconden duurt. Vernieuw de pagina om de animatie te zien.

var square = new Rect(0, 0, 100, 100);
square.addTo(stage);
square.fill('#96be28');
square.animate('6s', {
   x: 200,
   scaleY: 0.5,
   scaleX: 0.5,
   fillColor: 'orange'
}, {
   delay: '1500ms'
})

De elementen die we zagen in het SVG artikel krijg je zo eenvoudig op het scherm. Voor onze kroon verwijderen we de code in animatie.js weer en voegen het volgende

path

new Path()
.moveTo(10, 40)
.lineTo(20,55)
.lineTo(30,35)
.lineTo(40,55)
.lineTo(50,20)
.lineTo(60,55)
.lineTo(70,35)
.lineTo(80,55)
.lineTo(90,40)
.lineTo(85,80)
.lineTo(15,80)
.closePath()
.fill('orange')
.addTo(stage);
new Rect(15, 83, 70, 8)
.fill('orange')
.addTo(stage);
var circle1 = new Circle(10, 40, 5).fill('orange').addTo(stage);
var circle2 = new Circle(30, 30, 5).fill('orange').addTo(stage);
var circle3 = new Circle(50, 20, 5).fill('orange').addTo(stage);
var circle4 = new Circle(70, 30, 5).fill('orange').addTo(stage);
var circle5 = new Circle(90, 40, 5).fill('orange').addTo(stage);

Lees meer over Paths in de documentatie van Bonsai. Zoals je in het vorige artikel zag wordt op de ‘SVG-manier’ een lijn getekend en vervolgens gevuld met de kleur oranje. We voegen ook een extra <rect> toe aan de pagina voor de onderkant van de kroon en vijf cirkels op de juiste positie voor aan de top. Die onderdelen kunnen we nu animeren! Vernieuw de pagina met sneltoets F5 om de animatie te zien.

new Path()
.moveTo(10, 40)
.lineTo(20,55)
.lineTo(30,35)
.lineTo(40,55)
.lineTo(50,20)
.lineTo(60,55)
.lineTo(70,35)
.lineTo(80,55)
.lineTo(90,40)
.lineTo(85,80)
.lineTo(15,80)
.closePath()
.fill('white')
.addTo(stage)
.attr('y',40)
.animate('500ms', {y: 0, fillColor: 'orange'}, { delay: '1s' });

		new Rect(15, 100, 70, 8)
.fill('white')
.addTo(stage)
.animate('500ms', {y: 83, fillColor: 'orange'}, { delay: '1200ms' });

		var circle1 = new Circle(10, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 40, fillColor: '#da5c25'}, { delay: '1400ms' });
var circle2 = new Circle(30, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 30, fillColor: '#da5c25'}, { delay: '1500ms' });
var circle3 = new Circle(50, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 20, fillColor: '#da5c25'}, { delay: '1600ms' });
var circle4 = new Circle(70, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 30, fillColor: '#da5c25'}, { delay: '1700ms' });
var circle5 = new Circle(90, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 40, fillColor: '#da5c25'}, { delay: '1800ms' });

In de bovenstaande code is aan elk element een animatie toegevoegd volgens de volgende structuur:

.animate(<speed>,{<elements>},{<properties>});

path

delay

Een mooie toevoeging in Bonsai is de zogenaamde Keyframe-animatie. Met

new KeyframeAnimation()

Voor onze kroon maken we de illusie van glinsteringen op de onderrand door sterren in- en uit te laden faden. Voeg de volgende code toe aan de code die we al hadden in

animatie.js

var centerX = 20;
for (i = 0; i < 4; i++) {
		  var ster = new Star(centerX, 87, 2,5,3).fill('#FFFFFF').addTo(stage);
			   centerX += 20;
			   new KeyframeAnimation(Math.random(2)+1+"s", {
			     '0%': { opacity: 0 },
			     '50%': { opacity: 1 },
			     '100%': { opacity: 0 }
			  }, {
			     repeat: 'Infinity',
			     delay: '2000ms'
			  }).play(ster);
		 }

	

Je ziet dat er vier sterren worden toegevoegd met

new Star()

Math.random(2)+1+"s"

repeat: 'Infinity'

Meer leren!

Met een beetje creativiteit kun je met Bonsai en andere Javascript-bibliotheken een geanimeerd logo, stijlvolle knoppen of zelfs een hele digitale wenskaart in elkaar programmeren. En dat allemaal zonder een afbeelding te gebruiken. Het resultaat van de animatie is zoals bij alle SVG's enkel wat code, waardoor dit soort animaties snel inlaadt, op zowel desktop als mobiele websites en applicaties. Wil je verder met Bonsai, neem dan rustig de documentatie door. Bekijk ook vooral een van deze voorbeelden op de website van Bonsai.

Dit was het laatste artikel in de reeks over SVG: een introductie, vormen en animaties in SVG code en animaties met Javascript.

Met SVG kun je met eenvoudige code visuals te maken, die er aantrekkelijk en strak uitzien. Onafhankelijk van het platform of scherm dat je gebruikt! Maar SVG gaat verder dan alleen vormen op het scherm toveren; je kunt deze ook eenvoudig laten bewegen. Met behulp van animatie-attributen ingebouwd in de SVG-specificatie, of door enkele Javascript-bibliotheken die dit ondersteunen. Met dit artikel neem ik je mee de diepte in, dus enige kennis van SVG is gewenst! Lees mijn eerdere artikel eerst.

De vele mogelijkheden in code

Met SVG kun je eenvoudig stijlvolle, eenvoudige afbeeldingen maken. Met behulp van relatief weinig code heb je snel een aantal vormen, dat uiteindelijk zo complex kan worden als je zelf wilt. Geen pixels, maar vectoren, waardoor je computer of mobiele telefoon er sneller mee overweg kan, want de laadtijden gaan drastisch naar beneden als je het vergelijkt met een pixelafbeelding.

Het SVG-formaat ondersteunt verschillende type objecten, zoals:

• Eenvoudige vormen: een circle (<circle>), rechthoek(<rect>), ellips (<ellipse>) of polygoon (<polygon>) kan worden gedefinieerd in grootte, kleur en positie.
• Lijnen (lines): een enkele lijn van punt A naar B, waarbij de dikte, positie en kleur kan worden bepaald.
• Paden (paths): eenvoudige of complexe vorm, getekend met rechte of gebogen lijnen, die al dan niet met een kleur wordt gevuld. SVG definieert met absolute coördinaten en een vaste set letters (zoals M ‘move to’ en L ‘line to’) waar de vorm zich bevindt.
• Tekst: door het lettertype, de lettergrootte, kleur en positie van een stuk tekst te bepalen, kun je deze eenvoudig implementeren in je SVG.

Veel mogelijkheden middels het manipuleren van de objecten, zoals gradiënten, maskers en patronen.

Alle objecten kunnen op een bepaalde manier worden gemanipuleerd, met een achtergrond- en lijnkleur, maar ook gradiënten, patronen en zelfs maskers zijn mogelijk. Dit maakt het mogelijk zeer complexe en visueel aantrekkelijke elementen te maken. Er zijn ook filters beschikbaar, zoals blur (vervagen), drop shadows (schaduwen) en meer.

Een standaard SVG-bestand kan bestaan uit de volgende code, wat we ook zagen in het vorige artikel:

<svg width="200" height="200" viewBox="0 0 200 200" id="testSVG"> <line x1="0" y1="0" x2="100" y2="200" /></line> </svg>

Een eenvoudig, leesbaar stukje tekst. De taal lijkt zoals gezegd erg op XML en kan direct in de HTML-code van een website gebruikt worden, mits je browser het ondersteunt. In het bovenstaande voorbeeld die je een lijn die wordt getekend vanaf x1-coördinaat 0 en y1-coördinaat 0 (linksbovenin). De lijn loopt naar positie 100 op de X-as en positie 200 op de Y-as.

Er is nog niets op het scherm te zien als je bovenstaande code uitprobeert. Dat komt omdat de lijn nog geen stijl-attribuut heeft. In onderstaand voorbeeld heeft de lijn een donkergrijze kleur en een breedte van twee pixels gekregen met CSS. Meer daarover vind je hier.

#testSVG { stroke: #333; stroke-width: 2px; }

Daarnaast zie je het viewBox-attribuut gedefinieerd. Daarmee wordt het zichtbare deel van de SVG vastgesteld. De vier getallen stellen respectievelijk de x, y, breedte en hoogte van de viewBox voor. Wanneer je een element in een SVG tekent dat groter is dan de SVG zelf, kun je met viewBox het zichtbare gedeelte bepalen en zo ‘inzoomen’ om het hele element zichtbaar te krijgen. De viewBox is een erg complex onderdeel van de SVG-specificatie. Meer over de viewBox lees je hier.

Een eenvoudige cirkel in SVG teken je met:

<svg> <circle cx="50" cy="50" r="30" /> </svg>

Met de cx- en cy-attributen definieer je de positie van het midden van de cirkel ten opzichte van het grid. Als je die weglaat, worden deze ingesteld op 0, wat ervoor zorgt dat de cirkel slechts half zichtbaar is op de pagina. Met r definieer je de grootte van de cirkel, in dit geval 30 ‘units’ ten opzichte van de viewbox (de grootte van de SVG).

Een rechthoek gaat op dezelfde wijze:

<svg> <rect width="200" height="100" /></rect> </svg>

Een circle en rectangle (en onder andere ook een polygon en ellipse) kunnen ook een vulkleur krijgen door het attribuut fill='red' mee te geven of deze natuurlijk in CSS te definiëren als fill: red. Je zult zien dat de rechthoek zónder stijldefinitie zwart wordt.

Iconen kunnen met SVG strak worden weergegeven, op alle devices. En gemanipuleerd en geanimeerd met code.

Complexe vormen

Met paden kun je in SVG echt alle kanten op. Dit is hoe iconen worden gecreëerd wanneer je deze exporteert vanuit een vectorprogramma. Als je een wiskundig rekenwonder bent, dan kun je ook zelf tekeningen maken door een reeks aan getallen en letters samen te stellen! Een <path>-element heeft altijd een d-attribuut (een drawing command). Daarmee wordt in een stukje complexe code de vorm van het pad ingesteld.

<svg width="200" height="200"> <path d="M50,50 A30,50 0 0,1 100,100" style="stroke:#660000; fill:none;"/> </svg>

In het d-attribuut hierboven zie je een M en A staan, samen met enkele absolute coördinaten. Dit zijn de mogelijke commando’s:

• M: moveto
• L: lineto
• H: horizontal lineto
• V: vertical lineto
• C: curveto
• S: smooth curveto
• Q: quadratic Bezier curve
• T: smooth quadratic Bezier curveto
• A: elliptical Arc
• Z: closepath

De code lijkt heel complex, maar is goed te begrijpen als je eenmaal doorhebt hoe het is opgebouwd. Het voorbeeld tekent een boog van startpunt 50,50 tot 100,100 (aan het eind van het drawing command). De radius van de boog wordt door de eerste twee parameters van het A-commando bepaald. De eerste is rx (radius naar de x-kant) en de tweede is ry (radius naar de y-kant). Als je rx en ry op dezelfde waarde zet, zul je een circulaire boog zien. De derde parameter (0) na de a is de x-axis-rotation. Deze zet de rotatie van de x-as van de boog vergeleken met de normale x-as. Meestal is deze parameter 0, dus die kun je gerust negeren. De vierde en vijfde parameter (0,1) heten de large-arc-flag en sweep-flag parameters. De eerste bepaalt of de smalle of grote boog getekend moet worden richting het startpunt, eindpunt en rx en ry. Meer over het instellen van het d-attribuut en de mogelijkheden van <path> zie je op deze pagina.

Inline animaties

Maak het jezelf makkelijk door de stijlattributen van een SVG te manipuleren met o.a. SVGSnap, GSAP of CSS3-animaties.

Het is mogelijk om met Javascript-bibliotheken zoals Processing.js, SVGSnap en GSAP de stijlattributen van een SVG te manipuleren tot complexe en visueel aantrekkelijke animaties. Daarmee wordt er veel werk uit handen genomen, want je hoeft je minder druk te maken over complexe paden en de positionering van je elementen. Animeren met CSS3-animaties is ook mogelijk en het is afhankelijk van je voorkeur welke manier van werken je kiest. Maar er is nog een mogelijkheid, namelijk animeren in SVG zelf. Het W3C heeft voorzien dat beweging een interessant onderdeel kan zijn in een SVG-element, dus heeft tags en attributen toegevoegd aan de specificatie die ook animaties omzetten in leesbare code.

Een eenvoudig voorbeeld is hieronder te zien (vernieuw de pagina om de animatie te zien):

<svg width="200" height="200"> <rect x="10" y="20" width="50" height="50"> <animate attributeName="fill" from="#333" to="#adc353" dur="2s" /> </rect> </svg>

De code spreekt eigenlijk voor zich. Het fill-attribuut wordt door de <animate>-tag aangesproken en gemanipuleerd. Gedurende twee seconden verandert de kleur van grijs naar Ambrero-groen. Je ziet dat de tag zich binnen het -element bevindt.

Op dezelfde manier kunnen we een element laten draaien:

<svg width="200" height="200"> <rect x="0" y="0" height="100" width="100" style="fill:#adc353"> <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> </rect> </svg>

De attributeName komt wederom overeen met die in CSS: daarmee zou je hetzelfde kunnen bereiken door transform(rotate(360deg)) te schrijven. Zoals hier te zien wordt de animatie oneindig herhaald. De from- en to-attributen zijn niet voor niets gekozen. De waarde 50 ligt precies in het midden van het vierkant, zodat deze om zijn as draait.

Tot slot is het ook mogelijk om een element langs een pad te laten bewegen. Bekijk de volgende code:

<svg width="200" height="100"> <rect x="0" y="0" width="30" height="30" style="fill: #adc353;"> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="5s" repeatCount="indefinite" /> </rect> </svg>

Dit groene blokje beweegt langs een curve zoals gedefinieerd in het d-attribuut. Het <animateTransform>-element is noodzakelijk om het parent-element te laten bewegen langs een pad. Het is zelfs mogelijk om een animatie te laten starten wanneer een andere animatie – in dezelfde SVG – is gestopt. Daarmee wordt het <animate>-element pas echt nuttig, want dit is in CSS niet eenvoudig te bereiken. Zo kun je animaties aaneenrijgen en daardoor bijvoorbeeld eerst een knop en daarna de tekst en een icoontje laten verschijnen. Door <animate> of <animateTransform> het attribuut begin="svgID.end" mee te geven, start de animatie pas als de animatie met het ID ‘svgID’ is gestopt. Andersom is met end="svgID.end" te bereiken dat de animatie eindigt als de animatie met het ID ‘svgID’ eindigt, of wanneer de duur (in het attribuut dur) is geëindigd – degene die als eerste plaatsvindt.

Overigens hoef je dit in Internet Explorer en Safari niet te proberen. Deze browsers ondersteunen wel SVG, maar geen animaties. Daarvoor kun je beter een Javascript-bibliotheek gebruiken. In een volgend artikel lees je daar meer over!

De tijden van Flash liggen lang achter ons. En dat is maar goed ook! Flash, en nog erger: JAVA-applets, vreet geheugen – en batterijen – en liet een browser vroeger steevast vastlopen. Gelukkig gaan steeds meer browsers steeds sneller mee met hun tijd: we kunnen nu animaties realiseren waar we vroeger enkel die lompe tools voor konden inzetten. Met SVG-graphics en -animaties wordt het een stuk eenvoudiger om op zowel desktop als mobiele devices vernieuwende user interfaces op te zetten, die net even dat beetje extra hebben. Met dit artikel wil ik je kennis laten maken met SVG, wat is het en welke voordelen het met zich meebrengt.

Snel laden van webpagina levert geld op

Met een instabiel WiFi-netwerkje of goedkoop 3G-abonnement, moet je er niet aan denken dat je onderweg een restaurant zoekt waarvan de eigenaar dacht dat het wel allemaal wat hipper kon. Flash-websites zijn niet meer van deze tijd. En animatie-bibliotheken gebaseerd op Javascript, zoals jQuery, hebben nu de overhand. Zo ben je al snel enkele MB’s door je databundel heen, om een website te zien die niet eens in je mobiele browser past. Vrijwel alle browsers ondersteunen Javascript, maar nu is er ook de noodzaak om dit snel en efficiënt in te laden. Om te voorkomen dat je niet lang hoeft te wachten tot de pagina laadt. Dat levert zelfs geld op: grote webwinkels doen er alles aan om hun laadtijden zo laag mogelijk te houden.

Afbeeldingen en (Flash-)video’s bepalen deels de laadtijd van een pagina. Er zijn niet voor niets regels voor banners (nog vaak in Flash gemaakt!) die voorschrijven dat ze niet boven de 60kb mogen uitkomen. Reclame op je website mag dan geld opleveren: een trage pagina als gevolg van zo’n banner kan niet de bedoeling zijn. Volgens een onderzoek kan het een webwinkel die dagelijks 100.000 euro omzet draait, zelfs 2.500.000 euro per jaar kosten wanneer de website één seconde trager binnenkomt. Geen wonder dat de nieuwste technieken gericht zijn op een zo laag mogelijke impact voor je browser!

Tijd voor vectoren op het web

Eén van deze technieken is SVG. Het zit hem al in de naam: Scalable Vector Graphics zijn vectoren in plaats van pixels, waardoor de laadtijd direct drastisch wordt verminderd. Vectoren werken met wiskundige berekeningen om te bepalen waar een bepaalde lijn, cirkel of object staat ten opzichte van een vlak (grid). Doordat die berekeningen eigenlijk niets meer dan tekst (code) zijn, zal een browser veel sneller overweg kunnen met een vector-bestand dan met een gewone afbeelding (zoals JPEG, PNG). Een SVG-bestand kan dan ook in elke tekst-editor worden geschreven en is relatief gemakkelijk te begrijpen en aan te passen. SVG wordt al sinds 1999 door het W3C ontwikkeld en vindt de afgelopen jaren zijn weg naar het web, omdat grote browsers het zijn gaan ondersteunen. En daar speelt een aantal web ontwikkelaars weer handig op in, door bijvoorbeeld Javascript plug-ins te bouwen die SVG-bestanden kunnen genereren en manipuleren.

Scalable Vector Graphics zijn vectoren in plaats van pixels, waardoor de laadtijd direct drastisch wordt verminderd.

Daarbij wordt gebruik gemaakt van CSS, wat elke web ontwikkelaar toch al gebruikt. Terwijl een afbeelding gebaseerd op pixels ‘vast’ is en hooguit met CSS in grootte en plaatsing op de pagina is te manipuleren, is SVG volledig aanpasbaar met CSS. Wanneer je een gewone afbeelding groter schaalt, zal deze kwaliteit verliezen (vager worden), maar met vectoren heb je dat probleem niet. Zo zal een afbeelding altijd scherp en helder op het beeld verschijnen, hoe groot of hoe klein je deze ook schaalt. Ideaal voor iconen of elementen in interfaces die een responsive design hebben, waarbij op het ene scherm een andere grootte getoond moet worden dan op het andere (mobiele) scherm. Toch moet er ook meteen bij worden gezegd dat SVG nog zeker geen vervanging kan zijn voor pixel-afbeeldingen. De graphics die je met SVG kunt bereiken zijn vaak eenvoudig en in een ‘tekenstijl’ die niet in de buurt komen van een gedetailleerde foto. In theorie zou je dat overigens wel kunnen bereiken, maar dan definieer je nog steeds elke pixel individueel, waardoor de SVG-afbeelding een enorme hoeveelheid code bevat. Niet erg efficiënt.

De graphics op de website Love Notes van Spotify zijn grotendeels met SVG gerealiseerd.

SVG code is te indexeren door Google

SVG is gebaseerd op de taal XML. Een hiërarchische structuur van leesbare code ‘vertelt’ de browser waar, welk element moet komen te staan ten opzichte van het gedefinieerde grid. Dat grid is schaalbaar en daarmee schalen de vectoren die zijn getekend ook mee. Elke lijn in de graphic kan worden veranderd van positie met CSS. Zo kun je gave animaties creëren. Er zijn al talloze prachtige websites ontwikkeld met SVG-animaties, die we tot tien jaar geleden alleen met Flash of Javascript konden realiseren. Een van de pluspunten van SVG is bovendien dat de code te indexeren is door zoekmachines als Google. Een zoekmachine kan dus ‘uitlezen’ wat er in de afbeelding staat, wanneer je dit met leesbare tekst definieert. Ook niet geheel onbelangrijk: SVG’s kunnen in elke resolutie worden geprint en zijn niet afhankelijk van type beeldscherm, zoals retina-schermen. JPG-afbeeldingen die niet geschikt zijn voor schermen met een hogere ‘pixeldiepte’ kunnen problemen opleveren, maar SVG zal, mits correct ingesloten in de webpagina, meeschalen en er altijd goed uitzien.

Ook niet geheel onbelangrijk: SVG’s kunnen in elke resolutie worden geprint en zijn niet afhankelijk van type beeldscherm.”

Ideaal voor iconen dus, maar je kunt gerust verder gaan dan dat. JavaScript, de meestgebruikte scripttaal voor het web, maakt onbeperkte functionaliteit mogelijk voor een SVG-bestand. Vloeiende animaties worden mogelijk, die resulteren in de meest prachtige websites. SVG’s kunnen zelfs filters en effecten bevatten, zoals slagschaduwen en vervaging. Om de eigenschappen van elementen binnen een SVG (zoals simpele rechthoeken en cirkels, maar ook paden en polygonen) te bewerken zijn er verschillende Javascript-bibliotheken gemaakt. Met SVG.js bijvoorbeeld, waarmee je nieuwe elementen kunt aanmaken en manipuleren in je webpagina. In een volgend artikel vertel ik daar meer over!

SVG in een pagina laden – in elke browser?

SVG-bestanden kun je op verschillende manieren in je pagina laden. Het is goed mogelijk om een SVG als .svg-bestand op je webserver op te slaan en toe te voegen aan het HTML code met een -tag, zoals je gewend bent voor ‘gewone’ pixelafbeeldingen:

<img src="ambrero.svg" alt="Ambrero logo">

Dit werkt niet in Internet Explorer 8 en lager of Android 2.3 en lager. Dat geldt ook voor het implementeren van een .svg-bestand als achtergrond in CSS-code, zoals je hieronder kunt zien. Ben je gewend om met CSS te werken, dan is dit een gemakkelijke implementatie, zoals je met normale achtergrondafbeeldingen zou doen.

.logo { background: url(ambrero.svg); }

Als je een website of applicatie maakt voor een doelgroep die deze verouderde browsers niet meer gebruikt, dan kun je rustig SVG inzetten. In CSS kun je de eigenschappen van een SVG eenvoudig manipuleren. Een andere mogelijkheid is de SVG direct in je HTML-code te zetten:

<svg height="100" width="100"> <circle cx="40" cy="40" r="40" /> </svg>

In het bovenstaande voorbeeld zie je dat er een cirkel getekend wordt door middel van een stuk zeer leesbare code. Als je gewend bent met HTML te werken, is deze code vast helder. In het volgende artikel vertel ik je meer over de verschillende elementen binnen een SVG.

Het hangt vooral af van je eigen voorkeur hoe je SVG’s in de pagina wilt laden. De voor- en nadelen van verschillende implementaties kun je lezen op deze pagina. Je kunt er vanuit gaan dat de moderne browsers allemaal SVG ondersteunen. Dat is fijn, want het resulteert in een mooier web. SVG draagt met de simpele structuur bij aan de trend die een aantal jaar geleden is ingezet om applicaties eenvoudig en helder te houden. Iconen worden scherper, knoppen worden interactiever en pagina’s laden sneller. Onafhankelijk van je scherm of resolutie, door gebruik te maken van vectoren in plaats van pixels, is SVG een goede optie om je website net wat meer stijl te geven!

SVG voor gevorderden

In een volgend artikel ga ik dieper in op het implementeren van SVG-bestanden in je pagina. Je kunt tot die tijd meer lezen over SVG via de volgende links:

De SVG-specificatie van het W3C
Een introductie over SVG op About.com
SVG maken en exporteren vanuit Adobe Illustrator