Innovatieve webapplicaties; hoe UX kan bijdragen

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

Ambrero Blog - Innovatieve webapplicaties; hoe UX kan bijdragen
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.

Ga met ons aan de slag!

Heb je interesse in een innovatieve webapplicatie om je werkprocessen en business te verbeteren? Bel ons voor een kop koffie en laat je inspireren tijdens een agile workshop. We denken graag met je mee!

Erwin Rietveld

UX design als sleutel tot gebruiksvriendelijkheid

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.

Ambrero Blog - UX design voorbeeld wireframe

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!

Erwin Rietveld

Animeer SVG’s met Javascript

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.

Ambrero Blog Animeren van SVG met Javascript

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.

Code:


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

Resultaat:

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.

Code:

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'
})
Resultaat (Vernieuw de pagina):

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
er voor in de plaats:

Code:

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);
Resultaat:

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.

Code:

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' });
Resultaat (Vernieuw de pagina):

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

.animate(<speed>,{<elements>},{<properties>});
. Je ziet dat het
path
voor de kroon begint bij Y-coördinaat 40 en in 500 milliseconden geanimeerd wordt naar 0, oftewel van onder het beeld in komt. Bovendien laten we de kleur beginnen in wit (onzichtbaar) tot oranje. Dat doen we ook met de onderkant van de kroon, die iets later start (de
delay
-waarde ligt hoger). De vijf cirkels laten we vanaf bovenaf verschijnen, elk iets later.

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

new KeyframeAnimation()
is het mogelijk een reeks aan animaties achter elkaar te laten uitvoeren. Zo kun je bijvoorbeeld een cirkel laten vergroten en weer verkleinen en vervolgens die beweging herhalen, zodat het lijkt alsof het object pulseert.

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
:

Code:

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);
		 }

	
Resultaat (Vernieuw de pagina):

Je ziet dat er vier sterren worden toegevoegd met

new Star()
. De snelheid van de animatie wordt ingesteld met
Math.random(2)+1+"s"
, wat ervoor zorgt dat de animatie tussen minimaal 1 en maximaal 3 seconden duurt. De Keyframe-animatie bestaat uit drie onderdelen: de start (0%), precies het midden (50%) en het eind (100%) van de animatie. Per punt in de animatie worden één of meer eigenschappen gemanipuleerd, in dit geval alleen de doorzichtigheid, die van helemaal onzichtbaar naar helemaal zichtbaar gaat. De animatie wordt met
repeat: 'Infinity'
oneindig herhaald. Het resultaat van onze kroon zie je hierboven!

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.

Erwin Rietveld

SVG in code: strakke vormen en animaties

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.

Ambrero Blog - SVG in code 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!

Erwin Rietveld
UX-designer/ front-end developer

Erwin Rietveld

Een introductie tot SVG

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.

Ambrero Blog - Introductie tot SVG - banners

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.

Ambrero Blog - Introductie tot SVG - Love Notes 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

Erwin Rietveld