Webbplatser är byggda för att utföra en funktion och kommunicera med sina användare. Men bortom det här kan webbsidor också vara engagerande, spännande, även roligt att använda.

Att lägga till visuellt intresse för en webbplats hjälper till att hålla vårt engagemang med det, oavsett om det är typografi, grafik eller fotografi. Men jag tror att det finns också möjligheter till interaktionselement för att ge visuell stimulans och feedback, till och med glädja användaren. I den här artikeln kommer jag att hävda att att lägga till några effekter för att roa, överraska och excitera dina användare kan förbättra dina webbplatser och appar och hålla användare tillbaka.

Glädje

Webbdesign är ofta ett torrt ämne, laddat med UX-jargong och Information Architecture-användarresor. Men varför borde det inte vara kul på vägen? Att lägga till glädje åt en webbplats är ett bra sätt att göra en webbplats inte bara mer mänsklig utan också göra din webbplats unik.

Jag kommer att begränsa min definition av glädje här genom att säga att det är tillägget av oönskad funktionalitet.

Härmed menar jag att det inte är en väsentlig del av webbplatsens funktion. Det kan dock ha en kraftfull effekt på hur webbplatsen uppfattas och upplevs. Faktum är att jag skulle gå så långt som att säga att hur man hanterar de strängt onödiga elementen i användargränssnittet är lika viktigt som typografi och andra visuella element, när man ställer in tonen på en webbplats.

En fri interaktion

I en artikel för Cooper Journal, Chris Noessel kallar "En fri interaktion" ett designmönster "som ger mjukvaran en mer human känsla."

En del av det är erkännande att människor är fidgety varelser som ofta är benägna att repetera små handlingar. Traditionellt med penna och papper skulle vi doodle eller kontinuerligt dra in pennorna. Jag är till exempel en inveterate pen-spinner.

Människor bär ofta denna fidgety-ness i webbläsning, ofta rullar upp och ner, väljer bitar av text eller upprepade åtgärder.

One Free Interaction mönstret omfattar detta medfödda mänskliga behov att fina, genom att skapa interaktiva element som ger oväntade eller trevliga resultat. Behöver du ett exempel? Försök sväva din markör över logotypen Web Designer Depot 'W' längst upp på den här sidan.

Som Noessel säger, fria interaktioner sitter utanför arbetsuppgiften och istället sitter i mellanrummen. Men de är kraftfulla i att forma vårt emotionella svar på de webbplatser vi använder.

Rullningseffekter

Som tidigare sagt rullar en av de vanligaste "fidgets" upp och ner, så webbplatser som lägger till visuellt intresse när du rullar är ofta underbara.

Ensidig webbplats för Nizo fotograferingsapp från Image Mechanics har "Knolled" kamerakomponenter som rör sig in medan du rullar ner och ner medan du rullar ner. Om du är som jag, spenderar du ganska mycket tid, bara bläddrar upp och ner och spelar med det underbara gränssnittet. (Håll inte andan och vänta på att appen ska släppas men.)

nizo_01

Använda parallaxeffekter på rullning lägger också till glädje och skapar djupets illusion. jag älskar pojke-coy webbplats där scrollningseffekterna matchar tonens och visuell stil på webbplatsen perfekt.

boycoy_01

Jag är förvånad över att det inte finns fler webbplatser med horisontella rullningseffekter, eftersom sidrullning är ett så vanligt tema i speldesign. Men ett bra exempel är Nintendo Mario Kart webbplats som tittar på spelets historia över 20 år av Nintendo-konsoler.

mariokart_01

Den polska platsen Mashup lägger till lager av grafiska element som övergår när du rullar över, en högteknologisk metod för att uppnå en lågfrekvent sketchbook-känsla.

mashup_01

Kungen på bläddraffekterna är förmodligen Acko . Här är sidhuvudelementet ett animerat 3D-grafittobjekt. Det är den animerade logotypen som tagits till nästa nivå - fördjupande, interaktiv, lekfull. Det finns även prestationer att låsa upp på användargränssnittet - även om gamification är ett annat ämne helt och hållet.

acko_01

Design för känslor

Att lägga till glädje på din webbplats hjälper till att skapa en känslomässig anslutning med en användare. Kraften i känslor i design är något vi förstår förstår, men det hjälper till att förklara varför vi tycker om att använda vissa objekt och ha en så stark koppling till dem. Den gäller såväl fysisk produktdesign som interaktiv design.

Jag tror att en stark orsak till att Apple-produkter är så ansedda är att användarna blir känslomässigt knutna till dem, och det finns många exempel på glädje i både Apple-hårdvara och mjukvara. Jag vet att många människor älskar "gummibandet" som rullar på iOS mobil Safari så mycket att de kommer att sakna sinne och pinga den upp och ner.

OK med "många människor" menar jag, men Steve Jobs älskade det nog att patentera det, och det har varit en del av Apples tvister mot Samsung.

Aaron Walter, i sin bok Designing for Emotion, ser på hur framgångsrika webbplatser engagerar användarnas känslor genom att ge dem personlighet. Att lägga till element som glädjer en användare är ett mycket kraftfullt sätt att göra detta. Enkelt uttryckt, vi föredrar verktyg som glädjer oss, så det är bra för affärer också.

Glädje är inte en gimmick

Att lägga till glädje betyder inte att man lägger till viljande effekter som en gimmick. Effekterna finns för att hjälpa till att forma webbplatsens personlighet. De behöver inte vara lekfulla eller konstiga (även om de kan vara om det är den personlighet du vill förmedla), de kan vara subtila och upprörda om det passar karaktären bättre. Ta en titt på pictet.com. Jag älskar hur sökfältet dyker in när du klickar på söklänken - det stoppar söktextfältet som ett dominerande element tills du frågar att det ska vara. Det är subtilt och stilrent och passar perfekt för tonens webbplats - ett schweiziskt finansiellt företag.

pictet_01

Ibland är effekterna så subtila att du kanske inte ens märker dem. Visste du till exempel att volymkontrollen på BBC iPlayer går upp till 11? Det är en fin liten nod till Spinal Tap.

Överdriv inte det

Att lägga till för många oväntade interaktioner kan vara kontraproduktivt och skapa en visuell överkillning. Om du inte försöker skapa en hyperkinetisk spelliknande miljö kommer alltför många visuella effekter, med flip-overs, popup-fönster, whizzbangs och quirk-bomber överallt att försvåra ett meningsfullt engagemang med innehållet. Ta en titt på LEDbow plats till exempel. Tekniskt är det briljant men jag tror inte att det kommunicerar effektivt. Det är bara för mycket på gång.

ledbow_01

Ring upp glädjen

Jag älskar webbplatser som behandlar skärmen som en sökare eller en yta snarare än en sidvisare. Lager som rör sig med olika hastigheter skapar djup och intresse. Element som rör sig i läge uppmärksammar dem.

Motion gör erfarenheten mer nedsänkt, men var medveten om att denna typ av interaktivitet för egen skull inte motsvarar större engagemang.

Lägga till glädje gör webbplatser mer mänskliga och också mer taktila, engagerande vår apa-hjärna behöver röra och leka medan vi tänker och lär oss. Nästa gång du skapar en webbplats, tänk på hur du kan skapa något unikt för att glädja dina användare.

Designar du för känslor? Hur lägger du till glädje för en webbplats? Låt oss veta i kommentarerna.