Ritualer i online markedsføring giver fans, lær af D-A-D

Binzer rocker ud, sammen med resten af DAD drengene til Grøn Koncert

Kan vi bruge ritualer til at engagere vores brugere på websites, på samme måde som Jesper Binzer og resten af D-A-D bruger dem til at engagere deres fans? Til Grøn Koncert i torsdags kunne jeg ikke undgå at blive imponeret af D-A-D’s sceneshow. På trods af 28 år i branchen, har de absolut ikke mistet gnisten og de mestrer deres håndværk i en imponerende grad. Jeg kunne ikke undgå, mens jeg stod der, i bunker af brugte plastickrus og desperat forsøgte ikke at blive involveret i slåskampen mellem to koncertdeltagere foran mig, at overveje om de samme virkemidler, der gør D-A-D’s sceneoptræden så engagerende, kan bruges til at forbedre vores websites?

D-A-D gør stor brug af ritualer i deres sceneshow. Et ritual alle D-A-D fans kender, er den obligatoriske trommesolo. En trommesolo hører sig til, men der bliver ingen solo før publikum har gejlet Laust (og dermed også sig selv) op med det velkendte “Kom så Laust, vi ved du har det!”.

Tåbeligt? Ja.
Sjovt? Ja!
Engagerende? Hell yeah!

“Kom så Laust, vi ved du har det!” – Citat Nicolaj d. 15/7 2010

Ritualer som dette giver en genkendelse for fans som mig, der har været til adskillige D-A-D koncerter. Jeg ved, at denne del af koncerten kommer og jeg venter forhåbningsfuldt på øjeblikket, hvor jeg kan være med i sammenholdet. Vi får et fælles sprog i denne stamme, noget der unægteligt opstår, når en gruppe mennesker kæmper for samme mål.

Brug stammeteori til, at komme tæt på din målgruppe

Seth Godin skriver om stammer i sin bog af samme navn (Tribes, 2008), at disse kræver to ting for at opstå:

  1. En fælles interesse.
  2. En måde at kommunikere på.

Hvilke fælles interesser har dine kunder?

Min erfaring er, at de fleste emner kan gøres til en interesse, eller endog en besættelse, hvis de vinkles rigtigt. Det Britiske TV show Faking it, viste blandt andet hvordan en 22 årig cellist, der ellers kun værdsatte klassisk musik, på fire uger endte med at blive besat af, at lege DJ i Englands natklubber. Hvis du skriver engageret og uddybende om de områder du arbejder indenfor, har du derfor en mulighed for at skabe interessen, også selvom den ikke umiddelbart er til stede.

Næste skridt er, at finde ud af, hvordan din stamme kommunikerer. D-A-D’s fans kommunikerer ved at klappe og råbe i kor, men de mest hardcore fans går også hjem og følger med i debatten på D-A-D’s fansider.

Ved du hvor din stamme kommunikerer? Er du en del af samtalen? Hvis du i modsætning til D-A-D, ikke selv har skabt stammen og ritualerne, skal du kommunikere at du i det mindste er en del af stammen og sørge for at din kommunikation, inklusiv dit website, taler din stammes sprog.

Feedback og belønninger kan gøre dine brugere engagerede

Tilbage til koncerten. Der står vi og klapper Laust ind til en solo, da det går op for os, at der er noget nyt på færde i år. Trommesolo ritualet fik pludselig tilføjet en ekstra dimension, eftersom den platform, Laust spillede sine trommer på, bevægede sig højere og højere i takt med, at publikum råbte højere. Udover ritualet, havde vi som publikum nu også en mission. Vi skulle hæve Laust så højt op som vi kunne og vores eneste værktøj var, at råbe i kor.

Laust spiller solo på sin bevægelige platform

Højden af platformen blev til et feedback loop, der viste os, hvor tæt vi var på målet. Dette feedback omkring gruppens fremskridt mod målet, er utroligt vigtigt. Tænk tilbage på projekter på arbejdet, som har virket uendelige og langtrukne, fordi de manglede fornemmelsen af fremdrift. Spildesignere ved alt om disse principper, og om vigtigheden af den slags feedback. De bruger specifikke belønninger, til at sørge for fremdrift i deres spil, så gameplayet ikke stagnerer og bliver kedeligt. Én af disse belønninger er rank rewards, der giver spilleren en højere rangering, alt efter hvor meget han har opnået.

Eksempler på brug af rank rewards på websites, er LinkedIn, der giver en score, alt efter hvor komplet din profil er, eller Dopplr, der giver dig en speciel avatar, alt efter hvor mange kilometer du har rejst.

Feedback er også en vigtig bestanddel i, at anskueliggøre processer og navigation. Fortæl brugeren, hvor han befinder sig i hierarkiet på dit website. Sørg for at alle skridt i dit bestillingsflow er overskueligt vist, med en klar indikator af, at brugeren er på vej til at nå sit mål (at købe varen).

Brug genkendelse i stedet for genkaldelse

“Nu har Jakob taget sin gamle guitar på? Ved i hvad det betyder?” råbte Jesper Binzer til det skrigende publikum. Ja, vi vidste godt hvad det betød. Bandet skulle til at spille en, af deres gamle klassikere. Igennem hele koncerten, kunne vi følge med i, om den næste sang var fra den nye plade, eller en af de ældre, ved at genkende Jakobs guitarer. På samme måde kan du bruge genkendelse på dit website, til at kommunikere noget, der ellers havde behøvet alt for meget mental kapacitet fra dine brugere (husk: tving aldrig dine brugere til at tænke). Jeg taler her om princippet om “recognition over recall”, eller “genkendelse over genkaldelse”.

Jeg kan huske mit kontonummer i banken udenad, men kortnummeret, udløbsdatoen og kontrolcifrene kan jeg aldrig huske – indtil jeg ser kortet. Så snart jeg ser mit dankort kan jeg ikke fatte, at jeg har glemt numrene. Jeg bruger dem jo hele tiden, når jeg handler på nettet! Sagen er den, at der er en grænse for, hvor meget rå data vores hjerner kan genkalde. Til gengæld er hjernen en fantastisk mønstergenkendelsesmaskine. Derfor er vores hjerner meget bedre til at genkende et stykke information, den har set tidligere, end den er til at genkalde det præcise information uden nogle hints. Det kan vi udnytte i vores webdesign.

Jeg er i øjeblikket på udkig efter en ny cykel og blev anbefalet Jupiter Cykler. Den netbutik gør noget smart – I stedet for at stole på, at folk ved hvad en citybike er i forhold til en klassisk cykel, giver de mig en silhuet af cyklerne, som på en klar og visuel måde viser mig forskellen på cykeltyperne. I virkeligheden kan jeg sagtens genkende forskellen – når jeg ser den. Men udfra et stykke tekst på et website, er min hjerne nød til at genkalde sig billedet af de to cykler og derfra sammenligne forskellen. På det her site får jeg det hele serveret på et sølvfad, hvilket gør det meget nemmere at finde frem til den kategori jeg ønsker. Et perfekt eksempel på genkendelse over genkaldelse.

Konklusion: D-A-D rules!

Kan vi lære noget af D-A-D? Ingen tvivl. Succes på nettet har, ligesom alle vores tiltag, rod i menneskelig opførsel. Mit råd er at holde øjne og ører åbne. Alt vi møder i vores hverdag afslører, stykke for stykke, de små guldkorn, der i sidste ende fører til succes på nettet.

Posted in Psykologi, Usability | Leave a comment

Lightword WordPress tema på dansk

Jeg bliver jævnligt spurgt om jeg ikke vil dele min danske oversættelse af Lightword (Temaet jeg bruger her på bloggen, det er lavet af Andrei Luca). Det vil jeg da gerne :)

Download Lightword danske sprogfiler (zip) .

Installationen er simpel:

De to filer (.po og .mo) skal blot kopieres ind i “wp-content/themes/lightword/lang/” folderen.

Hvis din WordPress installation er sat korrekt op til at køre på dansk, skulle temaet automatisk bruge de danske sprogfiler.

Posted in wordpress | Leave a comment

Kampen for opmærksomhed

Forestil dig at hver side på dit website, er en arena for opmærksomhed. Hvert element på siden, hoppende og dansende, for at få din opmærksomhed. “Se mig!”, siger den store artikel-overskrift, “Nej, herovre!” lyder det fra login-boksen til højre, “Nej nej jeg er jo meget mere interessant” råber det store billede midt på siden. Der er i den grad kamp for pladsen og opmærksomheden. Kampene udspiller sig primært inde i hovederne på dine besøgende, og taberne er både dig og dine besøgende. 

Hvert nyt element, der introduceres på siden, betyder et nyt stykke indhold, dine besøgende skal tage stilling til. Det er din pligt, at sørge for, at reducere det antal valg, dine besøgende bliver tvunget til at tage. Hvorfor? Fordi dine besøgende har en lille kasse, der svæver ovenover deres hoveder (lidt ligesom de der figurer i The Sims). Kassen er en spørgsmålskasse og hver gang dine besøgende bliver i tvivl om, hvad de skal gøre, fyldes kassen op med spørgsmål. Når indholdet i kassen stiger, falder tålmodigheden tilsvarende og når brugeren er tilpas frustreret, flyder kassen over og han forlader siden og kommer højest sandsynligt ikke tilbage.

Det jeg prøver at sige er: “Don’t make me think”. Vis mig hvor guldet er på din webside. Der er ingen, der har tid til, at grave efter den slags nu om dage. Så i stedet for at koge suppe på vores budskab, skal vi koge det ind til en kort, præcis handling. “Start her”.

Desuden bliver vi mere tilfredse med vores valg, når der er færre af dem.

Godt så, vi skal sørge for at reducere antallet af valg på vores websider. Men hvordan gør vi det, når der er så meget, vi vil fortælle?

Her er et par foreslag: 

  • Simplificér din besked.
    Gå en tur i skoven (eller meditér, gå i fitness center eller headbang til Slayer, hvis det er mere din stil) og reflektér over målet med dit website. Tænk idéen lidt dybere end “mig ha’ penge” og forsøg at definere kernen i din online tilstedeværelse. Hvis du selv er i tvivl om, hvad du vil, hvordan skal dine besøgende så forventes at kunne regne det ud? 
  • Vis mig hvor jeg skal starte.
    Det skal være indlysende for dine besøgende, hvor de skal gå hen først, for at komme i gang på dit website.
  • Vis klare hierarkier. 
    I praksis har vi mere end ét mål på vores websites, og det er selvfølgelig sådan det skal være. Husk blot på at opbygge et hierarki, hvor de mål der er vigtigst for dig og dine brugere, er dem, der får størst vægtning.
Posted in Usability | Tagged , , | Leave a comment

Hvorfor vi gør som vi gør og vejbump, der forhindrer os i det

Jeg har i lang tid været fascineret af psykologiske principper. Hvad får os til at opføre os som vi gør? Hvordan påvirker man folks opførsel? Hvordan gør man en oplevelse spændende, et produkt interessant eller et tilbud umuligt at modstå. Det er nogle af de spørgsmål jeg vil forsøge at besvare overfor mig selv de næste par år.

Men hvordan hænger psykologien i vores opførsel sammen med usability som sådan? Jeg fandt et godt bud for nyligt i en af Stephen Andersons fremragende slide decks på Slideshare.

Beklager jeg skal være så bøvlet, men prøv engang at bladre til slide 81 i følgende slide deck. (Der er en boks i højre side til formålet).

View more documents from Stephen Anderson.

Her beskriver Stephen sammenhængen mellem usability og de psykologiske principper, som de relaterer sig til vores opførsel. Han ser de psykologiske principper som drivkraften i vores interaktion.

Et eksempel er et køb på en netbutik, med en billig pris på et bestemt produkt. Købet er drevet af vores jagt på det bedste tilbud. Eller en bruger, der opdaterer sin status på Facebook, drevet af kampen om social status og selv-realisering. Dette er psykologiske principper, der ikke på direkte vis, har meget med usability at gøre.

Usability kommer ind i billedet, når vores bruger skal nå de mål, de psykologiske principper lokker vores brugere med. Her fungerer dårlig usability som et vejbump, en blokering af brugerens naturlige interaktion med systemet.

Psykologien er altså drivkraften i interaktionen, mens usability ligger på sidelinien og fjerner friktionen, så brugerens oplevelse bliver så glat og smertefri som muligt.

Vi bliver overstrømmet med udtryk indenfor brugercentreret design; usability, user experience, interaction design, human-computer interaction o. lign. Udtryk, der desværre ikke alle lader til at være klart definerede. Jeg kan dog sagtens bistå Stephen Andersons rollefordeling i forhold til usability og de psykologiske principper.

Om jeg i fremtiden kalder mig selv for usability ansvarlig, user experience designer, interaction designer eller noget helt tredje, er for mig ligegyldigt. Mit arbejde har taget en drejning i en retning, jeg i øjeblikket kalder usability, men som unægteligt er en sammensmeltning af mange forskellige områder. Én ting ved jeg dog; jeg er priviligeret nok til at elske det jeg laver til dagligt og det er jeg taknemmelig for.

P. S. Husk at tjecke hele Stephens slide deck ud. Der er guldkorn derinde!

Posted in Psykologi, Usability | Tagged , , | Leave a comment

Usability handler om at nå i mål

Når vi snakker usability, er der ikke mange, der er klar over det egentlige formål. De fleste tror det handler om
flyvske idéer, gammeldags tankegang og overgeneraliseringer af brugerne på vores websider. Intet kunne være mindre
sandt.
Lad os få slået fast med det samme, at usability handler om, at nå mål.
Da jeg var mindre og min familie boede på Grønland, var vi tit på flyvere, for at kommer frem og tilbage mellem
Danmark og Grønland. Jeg var 5-6 år og var helt vild med opgavehæfter, så under flyveturene havde jeg favnen fuld
af prik-til-prik, kryds-og-tværs og labyrinter. Lige præcist labyrinterne synes jeg dog tit, var alt for lette.
Tricket er nemlig, at hvis man starter fra udgangen, altså slutningen af labyrinten, er det utroligt let at komme
hurtigt i mål.
Finten er den samme, når vi snakker usability. For at tjene penge på f.eks. en webshop, er en af de vigtigste
faktorer brugernes oplevelse. Derfor tager vi i usability udgangspunkt i brugeren, sætter ham i centrum, og sørger
for at han når sine mål. Og når brugeren kommer i mål, sidder du på bagsædet og når målstregen i samme sekund.
Så husk, usability er andet end streger under links, søgefelter og menuer. Usability er dybt afhængig af, at du er
100% afklaret med dine mål. Først da, kan usability hjælpe dig med at nå dem.

Når vi snakker usability, er der ikke mange, der er klar over det egentlige formål. De fleste tror usability handler om flyvske idéer, gammeldags tankegang og overgeneraliseringer af brugerne på vores websider. Intet kunne være mindre sandt.

Lad os få slået fast med det samme, at usability handler om, at nå mål.

Da jeg var mindre og min familie boede i Grønland, var vi tit ude at flyve, for at kommer frem og tilbage mellem Danmark og Grønland. Jeg var 5-6 år på det tidspunkt og helt vild med opgavehæfter, så under flyveturene havde jeg favnen fuld af prik-til-prik, kryds-og-tværs og labyrinter. Lige præcist labyrinterne synes jeg dog tit, var alt for kedelige.

Tricket er nemlig, at når man starter bagfra, altså fra slutningen af labyrinten, er det utroligt let at komme hurtigt i mål.

Finten er den samme, når vi snakker usability. For at tjene penge på f.eks. en webshop, er en af de vigtigste faktorer brugernes oplevelse. Derfor starter vi i usability bagfra, og tager udgangspunkt i brugeren, sætter ham i centrum, og sørger for at han når sine mål. Og når brugeren kommer i mål, sidder du på bagsædet og når målstregen i samme sekund.

Så husk, usability er andet end streger under links, søgefelter og menuer. Usability er dybt afhængig af, at du er 100% afklaret med dine mål. Først da, kan usability hjælpe dig med at nå dem.

Posted in Usability | Tagged , | 1 Comment

Har dit website sider?

Vi mangler et godt dansk ord for hjemmesider.

På engelsk har de det så let. De har “websites”, som består af “pages”. På dansk har vi “websider” som består af “sider”. Så når vi går ind på “siden”, er der ingen der aner, om vi snakker om websitet som helhed, eller en bestemt underside på websitet.

Som om det ikke skulle være forvirrende nok har vi både websider, websites, hjemmesider, sider, sites, webløsninger, internetsider (find selv på flere) som betegnelse for den samme ting. Intet under vi er så forvirrede i den her branche!

Som modspil mod ordforvirringen, er jeg godt igang med, at aflære mig ordet “side” som betegnelse for et website og i stedet bruge ordene “site” eller “website”. Mit håb er, at nårjeg konsekvent bruger ordet “side”, om individuelle sider på et website (præcist som “pages” på engelsk), vil det gøre min kommunikation skarpere. Hvis jeg er heldig, smitter mine formuleringer samtidig også af på folk i mine omgivelser, så vi alle kan kommunikere bedre med hinanden.

Så voila! Mit website har sider.

Jeg vil nu kunne sige “Gå ind på dit website’s forside”, uden at lyde helt som en bonghat.

Andre forlag til formuleringer af den her type?

Posted in Dagligdag | Tagged , , , | Leave a comment

Nej, jeg vil ikke åbne dine links i nye vinduer

Lad være at åbne alle links på dit website i nye vinduer!

Jeg kunne sagtens stoppe indlægget her, men lige præcist dette usability problem, er så udbredt, at jeg bliver konfronteret med det i næsten hvert eneste webprojekt, jeg er involveret i. Derudover har jeg et personligt regnskab med lige præcist dette problem, for jeg hader når links popper uønskede vinduer frem. Derfor føler jeg det er nødvendigt, at bakke min påstand op med objektive beviser.

Det handler ikke om mig

Min mening er i virkeligheden pokkers ligegyldig. Hvis det betød nok for mig, at links ikke åbnede nye vinduer, kunne jeg skrive et browserplugin, der fjerner popup links fra alle sites jeg besøger fremover. Men det er ikke det, der er problemet. Popup links betyder usability problemer, der kan frustrere dine brugere og i sidste ende gøre dit site mindre brugbart. Og det mister du penge på.

Hvad er problemet så med popup links?

1. De gør ikke hvad vi forventer.

Vi tager mange ting for givet når vi interagerer med et system. Når vi kører bil, tager vi for givet at de andre bilister, op til en vis grænse, overholder reglerne for god bilkørsel. På nettet, er der ikke så mange af den slags regler. Vi er frie til, designmæssigt at gøre lige hvad vi har lyst til, godt eller skidt. Heldigvis er der dog ud af kaos’et, dukket nogle designmæssige mønstre op. Der plejer at være noget i toppen, der indikerer hvilken webside vi er på. Der plejer at være en menu i toppen eller en af siderne. Og ligeledes plejer links at åbne i det nuværende vindue.

Plejer er ikke død. Plejer er i den grad levende. Mine dørhåndtag hjemme i stuen plejer ikke, at være tilsluttet en 230 volt stikkontakt. Helt naivt går jeg ud fra, at dørhåndtaget ikke gør mig noget og at det endda vil hjælpe mig med, at træde ind rummet ved siden af. Hvis jeg ikke kunne være sikker på, at mine dørhåndtag, mere eller mindre er harmløse, ville de ikke være ligeså brugbare for mig, som de er i dag. Det er det samme med links på websider. Vi forventer blindt, at de opfører sig, som de nu engang altid har gjort og bliver forvirrede og kan komme til at lave fejl, når de ikke gør.

Jakob Nielsen siger om sagen:

Links that don’t behave as expected undermine users’ understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser’s “open in new window” command — assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.

Top Ten Mistakes in Web Design

Hvilket leder mig til problem nummer 2.

2. Javascript popups giver problemer

Der findes to måder at få et link til at åbne i et nyt vindue på. Den ene gør brug af Javascript og det kan give problemer.

En typisk implementering gør brug af en såkaldt event, en hændelse, der kaldes onclick. Vi siger til browseren, at når der klikkes på linket, skal det åbnes i et nyt vindue.

Problemet her er todelt:

1. Det er ikke alle brugere der klikker.
Der findes mange alternative måder, at interagere med et link på. Du kan klikke med en mus, markere og trykke enter på tastaturet, berøre en smartphone skærm, eller for den sags skyld vrikke med storetåen (jeg har personligt set den slags interaktion, hvor mærkeligt det end lyder). Hvis vi kun tager højde for museklik (hvilket er tilfældet i de fleste Javascript implementeringer), lader vi altså nogle brugere, typisk de såkaldt svage brugere, i stikken. Det svarer til hvis min stuedør kun ville åbne, når jeg brugte højre hånd. Nogle gange har jeg altså brug for at bruge venstre hånd, eller min albue, hvis jeg f.eks. har indkøbsposer i hænderne.

2. Du sætter browserens standardopførsel ud af spillet.
Jakob Nielsen var kort inde over dette problem i ovenstående citat. Javascript linket overskriver typisk stien i standardlinket, så vi ikke kan bruge f.eks. højrekliksmenuen i browseren, til at åbne i nye faneblade, kopiere linkadressen og alle de andre smarte funktioner browseren nu engang stiller til rådighed.

Et eksempel på dette fandtes på EDBpriser‘s gamle design, hvor alle knapper til produktsiderne var kodet i Javascript. Konsekvensen var, at jeg endte med at skulle ind på hvert produkt, tjecke produktet ud, trykke tilbage for at komme ud til listen igen, trykke ind på næste produkt osv. Hvis linkene havde været kodet korrekt, kunne jeg fra listen have åbnet alle produkterne i faneblade, hvilket ville gøre det noget lettere at sammenligne dem. Heldigvis er det nye design på EDBPriser gået væk fra Javascript links. Usability sejrer i sidste ende.

Skal vi aldrig bruge popup-links?

Overordnet set er det brugeren selv, der skal bestemme, hvordan han vil åbne sit link. Der er dog nogle få situationer, hvor det giver mening at åbne et link i et popup vindue:

  • Hvis din kunde er inde i et købsflow.
    Hvis du har en kunde, som er godt i gang med at bestille en vare, er det sidste du vil have, at han forlader siden. Derfor er det ok at åbne f.eks. salgs- og leveringsbetingelser i et nyt vindue, så kunden ikke helt forsvinder fra købsflowet og er nød til at starte forfra, eller i værste fald mister alt i indkøbskurven.
  • Popup-en supplerer indholdet.
    Hvis popup vinduet indeholder et nødvendigt supplement til teksten, er det ok at bruge et popup vindue. Det kan f.eks. være en ordliste, hjælp til en webapplikation eller en video som hører til teksten.

Vær dog stadig opmærksom på, at en stor del af dine brugere fuldstændig ignorere popups og simpelthen bare lukker vinduerne uden at kigge på indholdet.

Jakob Nielsen svarer tilbage på en email fra en frustreret designer at:

To me, a pop-up is a window that is intended as a supplement to a primary browser window. Thus, it is typically smaller and it does not contain a “full” page of info. In contrast, the “new browser windows” I warned against as mistake #2 are intended to stand on their own and contain a full page.

I actually agree that pop-ups can be useful; I simply observe that users often close the pop-ups without even looking at their content. Thus, I currently warn against using them for anything essential.”

Readers’ Comments on the new Top-10 Design Mistakes

Det er selvfølgelig op til dig, hvordan du vil åbne dine links. Nu ved du lidt om, hvorfor det kan være et problem at gøre det. Og nu ved du også hvorfor, du ikke skal bede mig om at få dine links til at åbne i nye vinduer.

Har du en god historie om irriterende popup vinduer, eller kender du en god situation, hvor popups er helt uundværlige, så skriv en kommentar herunder…

Posted in Usability | 4 Comments

Ryd tekstfelter i din formular med jQuery

Nogle funktionaliteter er slået så meget igennem som en standard, at de nærmest kan findes på ethvert website. En af de funktionaliteter er den, hvor indholdet i feltet på en søgeboks, bliver ryddet når man klikker. Her er et lille jQuery script, der klarer den sag automatisk.

Hvis du ikke er interesseret i forklaringen (Det burde du nok være, men hey… hvem har tid?) kan du hente scriptet nederst på siden. Det eneste du behøver er, at inkludere scriptet på siden og sætte en klasse på de felter, du vil have ryddet.

Forklaring

Vi skal først finde en metode til, at gemme den originale tekst fra søgefeltet (i.e. “Søg…” eller lignende). Feltets value attribut vil nemlig ændre værdi, så snart der skrives i feltet. jQuery har en smart .data() metode, der giver mulighed for at gemme data på ethvert html element. Jeg bruger .each() metoden til, at gå igennem hvert input element med klassen clear.

$('input.clear').each(function(){
	$(this).data('txt', $(this).val());
});

Nu har hvert af de berørte input elementer gemt deres originale “standardværdi”, og den kan nu hentes igen med et kald til .data('txt'), ligegyldigt om værdien i boksen siden har ændret sig. Lad os få ryddet den tekstboks.

$('input.clear').each(function(){
	$(this).data("txt", $(this).val());
}).focus(function(){
	if ( $(this).val() === $(this).data("txt") ) {
		$(this).val("");
	}
});

Jeg bruger jQuerys focus event til, at udløse koden. Jeg vil kun rydde boksen, hvis indholdet er uændret, dvs. hvis den nuværende værdi er den samme som standardværdien. Til slut sætter jeg værdien til den tomme streng, "". Bemærk, forresten, at jeg bruger strict comparison, "===". Generelt set skal man altid sammenligne værdier i Javascript med strict comparison, dvs. "===" og "!==" i stedet for "==" og "!=". Hvorfor, må vi tage en anden gang.

Vi kunne egentlig stoppe her, men jeg vil gerne have én funktion mere i koden. Hvis der ikke skrives i boksen, foretrækker jeg, at standardværdien indsættes igen. Til det kan vi bruge jQuerys .blur event.

$('input.clear').each(function(){
	$(this).data("txt", $(this).val());
}).focus(function(){
	if ( $(this).val() === $(this).data("txt") ) {
		$(this).val("");
	}
}).blur(function(){
	if ($(this).val() === "" && !$(this).hasClass("once")) {
		$(this).val( $(this).data("txt") );
	}
});

Jeg har sneget et lille ekstra check ind, da det ikke er altid jeg er interesseret i at genindføre standardværdien. Input felter med klassen clear once, vil nu kun ryddes én gang og ikke få genindlæst standardværdien.

Endelige script

I det endelige script har jeg tilføjet et par kald til jQuerys $.trim() funktion, for at fjerne whitespace fra de indtastede værdier.

Husk at pakke hele molevitten ind i en jQuery .ready funktion. Jeg har brugt shorthand metoden, $(function() { // Kode her });.

$(function() {
	$('input.clear').each(function(){
		$(this).data( "txt", $.trim($(this).val()) );
	}).focus(function(){
		if ( $.trim($(this).val()) === $(this).data("txt") ) {
			$(this).val("");
		}
	}).blur(function(){
		if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
			$(this).val( $(this).data("txt") );
		}
	});
});

HTML:

<form>
	<input class="clear" type="text" value="Jeg bliver ryddet altid" />
	<input class="clear once" type="text" value="Jeg bliver kun ryddet én gang" />
	<input type="text" value="Jeg er helt normal" />
</form>

Håber det kunne bruges til noget :)

Har du forslag til ændringer eller nye features, så smid en hurtig kommentar.

Posted in Frontend udvikling | Tagged , , | Leave a comment

Bliv klogere på dine brugere

I august 2009 var jeg foredragsholder på en usability workshop til Huset G’s Web der Virker seminar. Det var virkelig fedt at stå der på scenen og snakke sagen for usability. Det var der brug for!

På trods af, at vi bor i fædrelandet for usability’s godfather, er det som om usability tit bliver overset i Danmark. Måske især her i vestjylland, er vi bange for at blive stemplet som vattede, hvis vi opfatter en webside som “svær at bruge”. Apache helikopter? Ja. Webside? Nej, nu må du sgu styre dig!

Men det er jo heller ikke dig selv, der skal bruge din webside, må du huske på. Du er ikke dine brugere. Og så snart du tager dem for givet, er det superlet for dem at vælge det røde kryds øverst til højre, i stedet for “Bestil” knappen i bunden.

Det er derfor vi skal blive klogere på vores brugere.

Slides fra mit indlæg:

Posted in Usability | Tagged , , | Leave a comment