Verbeter je User experience met Hover.css en Font Awesom

Map wijzigen

We hebben een server nodig om onze Hover.csspagina en bronnen te leveren. Dit is niet zo moeilijk als je op Linux of Mac werkt. Open een terminalscherm, cd naar je map en start het volgende commando:

Onze formulieren

Onze pagina is best eenvoudig: vul het formulier in en klik op Continue om verder te gaan. Niet zo moeilijk, tenzij er iets fout gaat. Met Hover.css kunnen we bepaalde acties verbeteren en de aandacht vestigen op de benodigde interacties. We geven onze gebruikers visuele feedback, zodat ze een idee krijgen van de voortgang.

De Continue-knop

Onze Continue-knop is momenteel helemaal statisch. Met Hover.css maken we een kleine visuele hint die zegt dat het formulier naar een ander formulier gaat. Deze wordt dus niet direct ingediend en geredirect. In dit geval maken we een kleine pijl die naar rechts wijst als de gebruiker met de muis over onze knop gaat.

De CSS-klasse

Hover.css bestaat helemaal uit CSS en kan dus alleen maar via klassen en attributen de interactie aangaan met de DOM. Om een effect toe te voegen aan een element moet je de relevante klasse toevoegen aan de tag. Open index.html en voeg de klasse hvr-icon-forward toe aan de knopelementen die je in de eerste en tweede formulieren vindt (rond regel 30 en regel 40).

Ongeldig

Zoals altijd wanneer er mensen en computers in het spel zijn, kan er iets fout gaan. Een veelgemaakte fout bij het indienen van een formulier is het overslaan van een verplicht veld. Elke browser geeft deze fout anders weer, dus wij gaan Hover. css gebruiken om aan te geven dat er iets niet kopt.
12. Error vangen Op regels 9 tot en met 37 van core.js, te vinden in de scripts-map, vind je wat code die de omissie van het verplichte veld afhandelt. Met een klein beetje JS kunnen we het uiterlijk van de Continue-knop aanpassen wanneer er iets fout is gegaan. Laten we deze eens heen en weer schudden als het mis gaat. Voeg de volgende code toe aan regel 34 van core.js.

| (function(btn){ | btn.setAttribute('class', 'hvr-wobble| horizontal'); | setTimeout(function(){ | btn.setAttribute('class', ''); | }, 1000); | })(form.getElementsByTagName('button')[0]);

Neem wat je nodig hebt

Hover.css draait niet alleen maar om het toevoegen van klassen om iets voor je gedaan te krijgen, maar het kan ook gebruikt worden als een soort modulaire animatiebibliotheek. We kunnen de animatie die we zoeken uit de CSS halen en naar wens aanpassen. Open css/hover.css en zoek naar .hvr
Linksboven skew-forward. Kopieer dat naar je klembord en plak het aan het eind van styles.css.

CSS aanpassen

De meeste animaties van Hover.css hebben meerdere klassen en pseudo-klassen met verschillende eigenschappen. Dat is mooi als een gebruiker actief werkt met een element, maar kan heel lastig zijn als je animatie programmerend wilt triggeren. We nemen de content van .hvr-skew-forward, plakken deze met de CSS-selectors [data-isinvalid=”true”] {} en voegen aan het eind de skewtransform toe.

Valideren

We hebben nu een animatie gemaakt die de aandacht van de bezoeker vestigt op velden die niet (correct) ingevuld zijn. Als we een formulier proberen in te dienen, wordt elk element met een verplichte of specifieke waarde vijf graden naar rechts gekanteld tot de gebruiker het probleem heeft opgelost.

Voortgang

Onder aan ons bestelformulier zien we drie bolletjes die oplichten om aan te geven hoe ver we in het proces zitten. Heel veel formulieren worden verlaten omdat mensen niet weten hoe veel ze nog te gaan hebben. Deze visuele aanwijzing houdt bezoekers op de rit.

Randanimaties

Om dit effect te bereiken, moeten we de hvr-rippleout-klasse toevoegen aan onze progress markup. Tijdens het uitwerken van het bestelproces, kunnen we data-attributen en klassenamen combineren om het proces te ondersteunen met kleuren, zonder al te veel JavaScript te gebruiken.

Terug naar het begin

Eigenlijk wil je aan het eind van het proces je gebruiker terug naar de shop leiden, maar wegens ruimtegebrek in dit magazine laten we dat hier even zitten. Hoe we dit dan goed kunnen laten zien? Nou, we voegen een subtiele animatie toe aan de #reset-knop in onze HTML .hvr-underlinefrom-right. Dit is slechts een animatie van de border-eigenschap van onze knop die van het einde van het proces weer helemaal naar het begin loopt.

Input opgepast!

Tot slot moeten we het nog even hebben over het input-element. Volgens de specificatie van HTML5 kan <input> niet gebruikmaken van de pseudoelementen ::before en ::after. Hover.css leunt echter zwaar op de before- en after-tags, dus als je Hover.css wilt gebruiken voor het verbeteren van je formulieren, moet je opletten met je keuzes.

Afronden

Dat is het. We hebben kennisgemaakt met Hover. css en de kracht van animaties om de user experience te verbeteren. Het is een subtiele en soms zelfs subjectieve kunst, maar met goed doordachte en onderbouwde inzichten, is het mogelijk om de UX voor zowel de designer als de gebruiker te verhogen. En dat allemaal met een van de indrukwekkendste toolsets van dit moment.