Websites zijn gebouwd om een ​​functie uit te voeren en communiceren met hun gebruikers. Maar verder kunnen websites ook boeiend, spannend en zelfs leuk om te gebruiken zijn.

Het toevoegen van visuele interesse aan een site helpt ons engagement erbij te houden, of dat nu is door middel van typografie, grafische afbeeldingen of fotografie. Maar ik geloof dat er ook het potentieel is voor elementen van interactie om visuele stimulatie en feedback te bieden, zelfs de gebruiker verrukken. In dit artikel zal ik beargumenteren dat het toevoegen van een aantal effecten om je gebruikers te amuseren, te verrassen en te prikkelen je websites en apps beter kan maken en ervoor zorgen dat gebruikers terug blijven komen.

Genot

Website-ontwerp is vaak een droog onderwerp, beladen met UX-jargon en gebruikers van Information Architecture-gebruikers. Maar waarom zou er onderweg geen plezier zijn? Het toevoegen van verrukking aan een site is een geweldige manier om een ​​site niet alleen menselijker te maken, maar ook uw site uniek te maken.

Ik ga mijn definitie van verrukking hier beperken door te zeggen dat het de toevoeging is van niet- benodigde functionaliteit.

Hiermee bedoel ik dat het geen essentieel onderdeel is van de functie van de site. Het kan echter een krachtig effect hebben op de manier waarop de site wordt waargenomen en ervaren. In feite zou ik zo ver willen gaan om te zeggen dat hoe je omgaat met de strikt onnodige elementen van UI net zo belangrijk zijn als de typografie en andere visuele elementen, bij het bepalen van de toon van een website.

Eén gratis interactie

In een artikel voor Cooper Journal, Chris Noessel noemt 'One free interaction' een ontwerppatroon 'dat software een humaan gevoel geeft'.

Onderdeel hiervan is de erkenning dat mensen onrustige wezens zijn die vaak geneigd zijn om kleine acties te herhalen. Traditioneel met pen en papier zouden we de pennen krabben of continu intrekken. Ik ben bijvoorbeeld een verstokte pen-spinner.

Mensen dragen deze fidgetie vaak in webbrowsen, vaak op en neer scrollen, stukjes tekst selecteren of handelingen herhalen.

Het One Free Interaction-patroon omarmt deze aangeboren menselijke behoefte om te friemelen door interactieve elementen te creëren die onverwachte of aangename resultaten opleveren. Heb je een voorbeeld nodig? Plaats uw muisaanwijzer op het Web Designer Depot 'W'-logo bovenaan deze pagina.

Zoals Noessel zegt, zitten gratis interacties buiten de taakuitvoering en zitten ze in de tussenruimten. Maar ze zijn krachtig in het vormgeven van onze emotionele reactie op de sites die we gebruiken.

Scroll-effecten

Zoals eerder vermeld, is een van de meest voorkomende 'fidgets' op en neer scrollen, dus sites die visuele interesse toevoegen bij het scrollen zijn vaak heerlijk.

De site met één pagina voor de Nizo fotografie-app van Image Mechanics beschikt over 'Knolled' camera-componenten die naar binnen bewegen terwijl je naar beneden en naar beneden scrollt. Als je net als ik bent, besteed je best veel tijd door alleen maar op en neer te scrollen en te spelen met de prachtige interface. (Houd echter niet je adem in terwijl je wacht totdat de app is vrijgegeven.)

nizo_01

Het gebruik van parallaxeffecten bij scrollen zorgt ook voor verrukking, waardoor de illusie van diepte ontstaat. I hou van de boy-terughoudend website, waar de scrolleffecten perfect bij de toon en visuele stijl van de site passen.

boycoy_01

Het verbaast me dat er niet meer websites met horizontale scrolleffecten zijn, aangezien side-scrolling een veel voorkomend thema is bij het ontwerpen van games. Maar een mooi voorbeeld is de Nintendo Mario Kart site die kijkt naar de geschiedenis van het spel in 20 jaar Nintendo-spelcomputers.

mariokart_01

De Poolse site mashup voegt lagen grafische elementen toe die binnenkomen als je er overheen scrollt, een hightech manier om een ​​low-fi schetsboek te krijgen.

mashup_01

De koning van de scroll-effecten sites is waarschijnlijk Acko . Hier is het siteheaderelement een geanimeerd 3D-graffiti-object. Het is het geanimeerde logo naar het volgende niveau - meeslepend, interactief, speels. Er zijn zelfs prestaties om te 'ontgrendelen' in de gebruikersinterface - hoewel gamification een ander onderwerp is.

acko_01

Ontwerpen voor emotie

Verrukking toevoegen aan uw site helpt een emotionele band te creëren met een gebruiker. De kracht van emotie in design is iets dat we pas beginnen te begrijpen, maar het helpt verklaren waarom we het leuk vinden bepaalde objecten te gebruiken en zo'n krachtige verbinding met hen hebben. Het is van toepassing op zowel fysiek productontwerp als interactief ontwerp.

Ik denk dat een sterke reden dat Apple-producten zo hoog aangeschreven zijn, is dat gebruikers emotioneel gehecht raken aan hen, en er zijn veel voorbeelden van genot in zowel de Apple hardware en software. Ik weet dat veel mensen dol zijn op het 'rubberen band'-scrollen op iOS mobiele Safari zozeer dat ze er verstek van gaan zitten.

OK door 'veel mensen' Ik bedoel mij, maar Steve Jobs vond het voldoende om het te patenteren, en het maakte deel uit van de rechtszaak van Apple tegen Samsung.

Aaron Walter, in zijn boek Ontwerpen voor emotie, kijkt naar de manier waarop succesvolle websites de emoties van gebruikers beïnvloeden door ze met persoonlijkheid te imiteren. Het toevoegen van elementen die een gebruiker verrassen, is een zeer krachtige manier om dit te doen. Eenvoudig gezegd, geven we de voorkeur aan tools die ons bevallen, dus het is ook goed voor het bedrijfsleven.

Verrukking is geen gimmick

Het toevoegen van verrukking betekent niet het toevoegen van opzettelijke effecten als een gimmick. De effecten zijn er om de persoonlijkheid van de site vorm te geven. Ze hoeven niet speels of eigenzinnig te zijn (hoewel ze kunnen zijn als dat de persoonlijkheid is die je wilt overbrengen), ze kunnen subtiel en ingetogen zijn als het beter bij het personage past. Kijk eens naar pictet.com. Ik hou van de manier waarop de zoekbalk naar binnen komt wanneer je op de zoeklink klikt - het stopt het zoekveld als een dominant element, totdat je het vraagt. Het is subtiel en stijlvol en past perfect bij de toon van de site - een Zwitsers bedrijf voor financiële dienstverlening.

pictet_01

Soms zijn de effecten zo subtiel dat je ze misschien niet eens opmerkt. Wist je bijvoorbeeld dat de volumeregelaar op de BBC iPlayer gaat tot 11? Het is een aardig knikje naar Spinal Tap.

Overdrijf het niet

Het toevoegen van te veel onverwachte interacties kan contraproductief zijn en een visuele overkill veroorzaken. Tenzij je probeert een hyperkinetische game-achtige omgeving te creëren, zullen te veel visuele effecten, met flip-overs, pop-ups, whizzbangs en grilbommen overal ter wereld ernstige gevolgen hebben voor een zinvolle betrokkenheid bij de inhoud. Bekijk de LEDbow site bijvoorbeeld. Technisch gezien is het briljant, maar ik denk niet dat het effectief communiceert. Er gebeurt gewoon teveel.

ledbow_01

Kies de verrukking

Ik ben dol op sites die het scherm behandelen als een zoeker of een oppervlak in plaats van een pageviewer. Lagen die met verschillende snelheden bewegen, creëren diepte en interesse. Elementen die in positie bewegen, vestigen de aandacht op hen.

Beweging maakt de ervaring meeslepender, maar houd er rekening mee dat dit soort interactiviteit omwille van zichzelf niet gelijk is aan grotere betrokkenheid.

Het toevoegen van verrukking maakt sites menselijker en ook tactiel, waardoor onze apenbreinen moeten rommelen en spelen terwijl we denken en leren. Probeer de volgende keer dat u een site maakt na te denken over hoe u iets unieks kunt maken om uw gebruikers tevreden te stellen.

Ontwerp jij voor emotie? Hoe voeg je plezier toe aan een site? Laat het ons weten in de comments.