Met vector icon libraries als Glyphicons en FontAwesome heb je genoeg opties om je web software te voorzien van iconen, maar swipe-iconen worden nog gemist.
Afhankelijk van hetgeen dat gerealiseerd zal worden, leg ik het eindproduct als usability test voor aan één van mijn ouders. Soms kom je tot bevindingen waar je zelf eigenlijk helemaal niet bij stil hebt gestaan, of waar je juist wel bij stil hebt gestaan maar waarbij je te veel je eigen visie hebt aangehouden.
Dit was ook van toepassing op de eerdere slider die ik gerealiseerd had. Ik heb mijn moeder een tablet in handen gedrukt en merkte dat ze direct op de carousel met vingerbewegingen probeerde te navigeren. "Logisch", dacht ik en omdat ook zeker het doelgroep van de te realiseren maatwerk applicatie dat dan zal proberen, ben ik ermee aan de slag gegaan, zodat ook gebruikers die de responsive website voorgeschoteld kregen op hun smartphone of ander type mobile device, door de lijst van afbeeldingen konden scrollen.
Andersom, ook voor gebruikers die niet de directe intuitie hadden om met vingerbewegingen door de afbeeldingen te navigeren, moest duidelijk zijn dat deze mogelijkheid aanwezig was. Uiteraard bij voorkeur middels een kort maar bondige boodschap, oftewel iconen. Uiteraard ben ik gaan googlen naar swipe-icons voor FontAwesome, maar zonder resultaat. Wel leerde ik via GitHub dat de wens voor swipe-icons binnen FontAwesome al jaren bestond, namelijk sinds augustus 2012. Daarnaast stuitte ik op een codePen codevoorbeeld van een swipe-icon, waar echter betrekkelijk veel CSS bij kwam kijken. Ik ben dus zelf aan de slag gegaan.
Gecombineerde FontAwesome iconen voor swipe-iconen
En eerlijk is eerlijk, zo moeilijk was het niet. Ik wist dat er enkele hand-iconen aanwezig was binnen FontAwesome, zoals de hand-pointer. Deze kon ik combineren met geschikt ogende pijlen, en daarmee ben ik aan de slag gegaan. Op eenzelfde wijze, kun je de gebruiker bijvoorbeeld duidelijk maken dat een gebruik zijn telefoon of tablet kan draaien, of bijvoorbeeld moet dubbelklikken. Door te spelen met positionering, height en andere CSS properties, kun je een heel eind komen.
FontAwesome swipe icon preview
- Bekijk de swipe-image-marquee-slider-demo voor een live-voorbeeld
Verklein desnoods je scherm om de gecombineerde iconen rechtsbovenin te zien verschijnen; - Stand alone preview
Copy / paste de HTML / CSS naar hartelust direct uit de broncode
Ik heb vooral gebruik gemaakt van FontAwesome en de :before en :after pseudo-classes op de elementen. Op die manier maakte ik gebruik van bronnen die reeds ingeladen waren, en hoefde ik geen extra bronnen op te roepen. Wel is er logischerwijs enige CSS nodig om ze te combineren, maar dit bleef zeer beperkt.
In de stand alone preview heb ik wat voorbeelden gegeven. Bijvoorbeeld, voor de dubbel-klik icoon, heb ik gebruik gemaakt van de copyright icoon van FontAwesome, en deze middels CSS gewoonweg 90 graden gedraaid en vervolgens de onderkant afgekapt, om twee halve cirkels boven elkaar te kunnen tonen. Think out of the box noemen ze dat wellicht.
Wil je deze moeite niet doen en gewoon gebruik maken van een bestaande gesture icon set, dan zijn er op het web genoeg alternatieven te vinden. Ben je toch zelf gaan puzzelen en tot andere combinaties gekomen? Schroom dan zeker niet om me dit middels een berichtje te laten weten.