Kategoriarkiv: Webdesign

Kæmpe succes med intelligente filtre

På en webshop, som udvikles med flere og flere sortimenter, produkter, linjer, bliver det ofte sværere og sværere at lave en brugervenlig navigation. Det er bl.a. en af grundene til, at man bør sikre sig, at ens webshop har en rigtig god søgefunktion. Denne har vi haft i lang tid på vores shopplatform her hos MCB – der kommer et blogindlæg om dette snarest, hvor vi dykker ned i teknologien og setuppet bag, og resultater.

En anden metode til, at sikre at brugerne kan finde rundt, er via intelligente mersalgs løsninger, hvor man guider brugerne rundt, ved at sikre at mersalgs motoren er toptunet via algoritmer baseret på masseadfærd. Vi har integreret en ny teknologi i vores shopløsning, som har vist enormt gode resultater. Men vi vil gerne have lidt mere data, og så kommer der også et blogindlæg omkring dette.

Her skal det dreje sig om facetteret søgning, både hvordan vi har løst det på http://www.vildmedvin.dk, men især hvilke resultater det har givet. Shoppen har fået et markant løft i konverteringsraten, siden vi har implementeret de nye filtre.

Der er rigtig mange som bruger facetteret søgning i dag, hvor man via nogle valg, filtrer de produkter man søger efter. Det kan f.eks. være på pris, størrelser, farver, som det ses på f.eks. SmartGuy og Boozt. Men det er så ofte også det. Dvs. der er meget få shops, hvor man ser filtre som går ud over et standard filter. Og det er der flere gode grunde til. Først skal din shop kunne understøtte det, dernæst så skal du have datagrundlaget på plads.

På din shop kan filtrene opsættes på dine varegrupper. De filtre der oprettes kan oprettes på baggrund af varegrupper (undergrupper), produktspecifikationer og varianter. Eksempler på dette kunne være:

Varegrupper: Man kunne f.eks. have en varegruppe på en tøj shop med undergrupper, hvor alle mærkerne man sælger listes, og man så kan filtrere på dem. Det kan også være, hvad produkterne kan anvendes til, på f.eks. en vinshop hvor mange eksempelvis søger en vin til fisk. Det er også varegrupper vi bruger til, at kunne filtrere på priser på, ved at vi i CMS opdeler produkterne i de grupper, som kunder ønsker man skal kunne filtrere på.

Produktspecifikationer: Dette kan f.eks. være på en whiskygruppe, hvor man kan søge på hvor røget en whisky skal være.

Varianter: dette kan være størrelser eller farve.

Når man tilbyder så unikke muligheder for at opsætte sine filtre, så er eksemplerne fra den samme shop, at du kan have et filtersæt på en rødvingsgruppe som denne: http://www.vildmedvin.dk/Roedvin.aspx 

mens du har et andet filtersæt på http://www.vildmedvin.dk/Whisky.aspx

og et helt tredje på http://www.vildmedvin.dk/champagne.aspx. Det smukke ved dette er, at vi har opsat det således, at du laver et standardfilter som ligger på alt, og kun vises hvis der er produkter som opfylder kravene. Dvs. selvom vi f.eks. har et standardfilter, til at ligge på en gruppe med Sennep, men der ikke er lavet kombinationer med “Passer til”, så vises kun prisfilter.

Dette stiller naturligvis krav til, at webshoppen får arbejdet med alle de nødvendige data. Det er et stort arbejde f.eks. på alle whiskygrupperne i ovenstående eksempel, at have datagrundlag til rådighed. Men ønsker du, at vinde kampen om kunderne, ja så skal du igang!

For det her virker! Alle ehandlere vil gerne læse om konverteringsfrekvenser, så vi kan sammenligne, men af konkurrencemæssige hensyn kan jeg ikke oplyse dem. Men det kan jeg vise, er stigningen. Dvs. hvilken stigning der er i konverteringen, når brugerne anvender de nye filtre.

En lille sidenote her, er at vi kun kan spore effekten, fordi vi har implementeret hændelsessporing 

Hvis vi kigger på det mest simple filter, som kører på alle grupper nemlig prisfilter. Så hver gang en bruger anvender et prisfilter, så er konverteringen 3,5 gange så høj, som en bruger som blot klikker på en vare/varegruppe – det er på tværs af alle varegrupper! Og så bliver det ellers bare mere og mere interessant. Jo mere detaljeret vores filtre bliver, desto mere stiger konverteringen. Hvis vi får en bruger, til f.eks. på en vingruppe, at vælge land så er konverteringen 5,5 gange så høj. Og topscoren er på denne gruppe: http://www.vildmedvin.dk/specialiteter_.aspx Hvis en bruger vælger varetype, så er konverteringen 15 gange så høj, som shoppens generelle konverteringen.

Det er vilde tal! Og vi har ikke mødt andre optimeringsprojekter på webshops, som har formået at hæve konverteringen med ligeså høj rater.

Vi vil helst ikke afsløre mere, om hvordan vi arbejder med filtrene i shoppen, backend, og fra kundens side. Men vil du høre mere om, hvordan vi kan hjælpe dig videre med dette, så tag endelig kontakt til os her! Dette er med garanti en løsning, som kan hæve din konvertering, såfremt det løses på den korrekte måde, og den har vi nu fundet.

{lang: 'da'}

Webdesign med CSS3

Det er jo efterhånden noget af en floskel det med, at vores branche udvikler sig med rivende fart, men ikke desto mindre er det tilfældet. Som webdesigner har du sjældent de samme konkrete arbejdsværktøjer i mere end et par år af gangen, og arbejder du som webdesigner, vænner du dig hurtigt til at sætte dig ind i “det sidste nye” på webfronten. En af de ting, vi er begyndt at gøre rigtigt meget brug af inden for det sidste års tid, er CSS3. I dette indlæg vil jeg forklare lidt om, hvad det er, og hvad vi bruger det til.

Hvad er CSS3?

Lad mig først forklare lidt om CSS generelt. Cascading Style Sheets er det, der får et website til at se ud, som det gør. Det er et værktøj, der oftest bruges af webdesignere til at implementere det design, der ønskes på et site, og det er i stylesheetet, at man bestemmer ting som typografi, billeder, størrelser på elementer og det generelle layout. Rent teknisk er et stylesheet blot en fil, der ligger på webserveren. Filen indeholder instrukser i et sprog, som man næsten kan forholde sig til, hvis man kan læse engelsk. Lad mig give et eksempel på det følgende link. Helt uden yderligere styling ser et link således ud på MCB Blog:
MCB.dk

Ved at bruge CSS koder kan vi få linket til at ligne en knap: MCB.dk

Her kan vi så snakke kort om, hvad det egentlig er, jeg fortæller om nu, nemlig CSS i sin seneste udgave: CSS3. CSS har eksisteret siden 1996, men er først for alvor taget i brug omkring år 2000. Siden dengang har CSS i tredje udgave været under udvikling. CSS3 tilføjer simpelthen yderligere muligheder til det nuværende sprog, og giver dermed webudviklere flere muligheder. Lad mig demonstrere hvad vi kan opnå med vores knap fra før, denne gang med CSS3 teknikker: MCB.dk

Hvorfor CSS3?

Fakta er, at mange af de effekter, man kan opnå med CSS3, har man længe kunnet opnå ved at lave grafiske elementer. Der er dog mange grunde til, at man bør bruge CSS3 så vidt muligt. Her er en kort liste, der opsummerer de største fordele ved at bruge CSS3 i stedet for grafiske elementer:

  • Grafik fylder meget og gør siden langsom at hente. Med CSS3 kan du eliminere meget af den grafik, der normalt skal til for at lave et flot site.
  • Søgemaskiner kan ikke læse din grafik, og du får dermed ikke indekseret dit indhold, hvis det står som tekst i grafikken.
  • Hvis dit design skal rettes eller opdateres, går det meget nemmere og hurtigere, hvis du benytter CSS3 til så meget som muligt.
  • Du opnår stor fleksibilitet med hensyn til størrelser på elementer. Størrelsen på grafiske elementer er oftest låst til faste dimensioner, hvor CSS3 er langt mere fleksibelt.
  • Webdesign arbejdet går hurtigere og det er mere simpelt og overskueligt.

CSS3 er dog ikke kun et spørgsmål om at optimere hastighed og søgemaskineoptimering. Det er også et stærkt værktøj til at engagere de besøgende. Ved at krydre dit site med diskrete, men lækre effekter, får du brugeren mere “med”, og du vil kunne tiltrække besøgende ved at fremhæve din shop som det sted, der er lækrest at opholde sig. Forkæl dine besøgende! Det føles super godt, når en side reagerer på det, du gør, og kvitterer for, at du har valgt at holde musen lige netop der, hvor du har. Hvis siden bare ligger død hen, bliver interaktion hurtigt til en kølig affære.

Med smartphonens success er der opstået en helt ny målgruppe, og til vores held understøtter de moderne mobile browere CSS3 langt bedre end mange desktop browsere! Det giver kæmpe fordele, da mobile enheder ellers kan være svære at lave indhold til. Der findes et utal af forskellige opløsninger og skærmstørrelser, og med CSS3 kan du opbygge en side, der er utroligt fleksibel, uanset hvilken enhed der viser den. Ved at bruge en teknik, der kaldes “responsive web design”, kan du ændre indholdet, alt efter de egenskaber enheden, der viser siden, har. Et godt eksempel på en enhed hvor du kan benytte det, er iPhone 4, som sammen med nogle af de nyere Android telefoner har en meget høj pixeltæthed (det Apple kalder “retina skærm”) og kan vise meget fine detaljer. Ved at specificere specielle CSS koder, der kun læses af enheder med høj pixeltæthed kan du hente grafik i ekstra høj opløsning, så dit site tager sig bedst muligt ud, uden at enheder, der alligevel ikke kan vise det, henter unødvendig tung grafik.

Hvad kan man med CSS3?

Herfra bliver det nok lidt mere teknisk, så hvis du ikke har en lille nørd gemt i maven, foreslår jeg, at du hovedsageligt læser teksten, ser på eksemplerne og lader koder være koder 🙂

Skygger

Skygger har altid været en god måde at fremhæve elementer og skabe dybde på en side. Før CSS3 var man tvunget til at lave skygger som grafik, men i moderne webdesign er det muligt at lade browseren generere skyggen. Eksemplet her viser et link, der blot er sat op som en firkant, med to forskellige typer skygge. Begge er helt fleksible og fylder kun ganske lidt at hente, da browseren kun henter instruksen om at vise en skygge, ikke selve skyggen.

/* Link 2 */
	box-shadow:4px 5px 2px rgba(0, 0, 0, 0.2);
/* Link 3 */
	box-shadow:0px 0px 7px rgba(0, 0, 0, 0.3);

Runde hjørner

Med CSS3 er det endeligt blevet muligt at lave runde hjørner på elementer. Vi bruger samme eksempel som sidst, og viser to forskellige størrelser på de runde hjørner.

/* Link 2 */
	border-radius:3px;
/* Link 3 */
	border-radius:7px;

Baggrundsgraduering

Her kan man for alvor vinde noget. Du kan opnå flotte grafiske effekter ved at lade baggrunden graduere på forskellige måder, uden at det har indflydelse på den tid, det tager at hente siden. Samtidigt er det hurtigt og let at ændre udseendet på hele dit site ved at opdatere instrukserne. Eksemplet er igen vores link, og jeg har sat to forskellige gradueringer på:

/* Link 2 */
	background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(179,179,179,1) 100%);
/* Link 3 */
	background: -moz-linear-gradient(top, rgba(0,104,153,1) 0%,rgba(0,50,93,1) 100%);

Tekstskygger

Den gode gamle slagskygge har fået nye muligheder! Første knap er helt uden effekt, den næste med en klassisk slagskygge, den sidste bruger tekstskyggen til at skabe det, der kaldes en “letterpress” effekt. Det kaldes det, når det ser ud som om skriften er “trykket” ind i knappen.

/* Link 2 */
	text-shadow:0px 2px 1px rgba(0,0,0,1);
/* Link 3 */
	text-shadow:0px -1px 0px rgba(0,0,0,1);

Overgange

CSS3 har gjort det muligt at lave overgange mellem forskellige CSS indstillinger. Det vil sige, at du kan lave ændringer flydende i stedet for enten-eller. Et af de mest oplagte steder, hvor man kan bruge overgange er ved interaktion med den besøgende, f.eks. det man kalder “mouse over”, altså når man kører musen hen over et element på siden. I videoen her kan du se hvordan det ser ud.

CSS3 i den virkelige verden

Pingel Cykler

www.pingelcykler.dk
På Pingel Cykler har vi brugt CSS3 skygger til at løfte produktbilleder fra siden.

VildMedVin

www.vildmedvin.dk
På VildMedVin har vi brugt skygger og tekstskygge. Tekstskyggen er tydelig i fx. overskriften, hvor den skaber en letterpress effekt.

HJ Hansen Vin

www.hjhansen-vin.dk/
På forsiden af HJ Hansen Vin har vi lavet en effekt med overgange (transitions). Når musen føres over en flaske vin, forstørres den en smule.

Kom i gang!

Vi glæder os til at ældre browsere, der ikke understøtter CSS3, forsvinder fuldstændigt fra markedet. Vi har skrevet lidt omkring understøttelsen af CSS3 i denne nyhed. Indtil det sker, er vi nødt til at bruge tid på at sikre, at browsere, der ikke understøtter CSS3 viser siden på en god måde, men det er bestemt ikke en grund til ikke at pifte din side op med masser af godter. Der er masser af besøgende, der vil få glæde af det!

Fordelene er mange og ulemperne få – det er kort sagt bare at komme i gang. Dit site vil køre hurtigere, fungere bedre og være et sjovere sted at opholde sig!

Hvis du gerne vil se CSS3 i fuldt flor, og du har en smartphone, anbefaler jeg at du kigger på vores liste over mobile løsninger.

{lang: 'da'}