Webshop Hvordan – Ny designlinie indført
Nu har jeg kæmpet længe med at finde et rigtig godt design til ebogens website, så den kan udstråle den seriøsitet der ligger bag. Der er klare linier og lidt spacey look over det. Bloggen er ligeledes blevet redesignet, og jeg overvejer at indføre et rødt tema på den, så man kan se at det er nogenlunde adskilt fra hovedsitet.
Jeg synes selv det er blevet meget godt, og der er mange muligheder med designet. De forskellige farvetoner gør også at det ikke bliver for kedeligt, samtidig med at det er stilrent. Så nu skal jeg til at have overført den designlinie til min kommende annonce i Young Inc. Jeg håber at raketstarte salget pr. 1. februar, og det derfra vil boome med folk der opretter en ebutik.
Kommentarer på designet er mødt med bifald. Hvis I har lyst, ville jeg også meget gerne have en kommentar med på vejen omkring teksten, da det jo er den som skal sælge ebogen når folk er på websitet.
loading...
Det er en absolut forbedring Brian. Jeg synes dog nok at den er lige spacey nok, forstået på den måde at den store kugle ikke rigtig giver relevans til “webshop” og “ebog”.
Yderligere så tror jeg også at du skal passe på at teksten ikke bliver for lille og for svær at læse.
Noget som jeg har haft god erfaring med et at bruge amino brugerne som hjælpere til at få rettet det hele til. De ser ofte mange gode ting man ikke selv har set.
Meget bedre
Jeg giver Mikael ret i alle hans kommentarer, og kan tilføje:
Leg evt. lidt med en “accent” farve, en kraftig farve der skiller sig ud fra den ellers “svage” farvelinie.
Brug accent-farven til at skabe fikspunkter for øjet ud for de punkter, der er vigtigst på sitet. Overdriv det ikke, men hold dig under 5-7 punkter. Ellers mister det sin effekt.
Brug desuden farven på dine vigtigste “call-to-actions”. Altså de 1-3 ting der er vigtigst for dig at brugeren klikker på for at komme til det gyldne mål (conversion point): At købe bogen.
Se f.eks. hvordan jeg har brugt den kraftigt orange farve på min blog (ikke fordi det er verdens pæneste):
http://www.afdeling18.dk/
Til at teste sine call-to-actions fremhævet ved hjælp af en accent farve, kan man benytte det jeg kalder en squint-test: Gå 4-5 meter væk fra skærmen og knib øjnene sammen til det hele bliver sløret. Du skal nu stadig kunne identificere de steder man skal klikke for at komme et skridt nærmere på dit conversion point (et køb).
Kan man dette, så vil det være intuitivt for brugeren hvordan man kommer videre. Frem for at brugeren er tvunget til at læse eller (gud forbyde) tænke over hvad der rent faktisk er på sitet.
Se evt. min case for Gyldendal.dk for nogen hvor det er lykkedes at skabe denne effekt:
http://www.afdeling18.dk/blog/gyldendaldk-godt-og-skidt-paa-samme-tid.aspx
Det er fa´me godt arbejde det der Brian – bare fortsæt i den rille
Tak for responsen og de gode råd.
Jeg har nu ændret tekststørrelsen, hvilket fik mit css til at sprænge fuldstændig i vejret.
Men kan godt se hvad I mener med kuglen, men måske I kan komme med en ide til hvordan man “tegner” en webshop???
Jeg har været omkring indkøbsvogne med @ og E involveret. Billeder af webshops på forskellige måder etc.
Jeg synes bestemt ikke det er nemt.
Call to action, ja, det mangler jeg. Den vil jeg lige kigge nærmere ind til.
Prøv evt. at søge på “shopping cart” på iStockPhoto.com. Du skal godt nok betale for billedet, men det er virkelig peanuts der er tale om.
Selve templaten har jeg sådan set ikke noget imod. Jeg har dog nogle kommentarer:
Jeg er ikke vild med at der er tekst oven i det billede med kuglen. Det er det ikke velegnet til. I min IE7 er der et ærgerligt linjeskift lige før “netbutik”. Jeg har taget et screenshot her: http://www.10000kr.dk/img/wh1.jpg
I firefox går det endnu mere galt. Teksten i billedet er ikke god og der er et stort blankt felt nedenunder. Se screenshot: http://www.10000kr.dk/img/wh2.jpg
I stedet for det billede ville jeg foretrække et billede med forsiden af bogen og den vigtigste info til højre for. Se hvad jeg mener her: http://www.10000kr.dk/img/wh3.jpg
På den måde er det klart med det samme at her kan man købe en bog, og man skal ikke scrolle en hel side ned før man ser det.
Håber du kan bruge noget af det
iStockPhoto er da fyldt med gode sager. Der fandt jeg lige en indkøbsvogn med en mus, som jeg har gjort lidt ved og nu må det fungere som logo fremover. Samtidig med at jeg har leget med noget WH.
Tak Ruben, for dine gode råd. Havde godt se Mozilla drillede, men havde ikke lige fundet en løsning. Det er fixet nu.
Og jeg har prøvet at bruge dit forslag, som nu kan ses på forsiden. Jeg er faktisk selv lidt glad for det. Nu mangler jeg bare lige stadigvæk lidt en “call to action”.
Men mange tak for jeres gode råd. Jeg ligger min annonce op til Young Inc senere, som I også lige kan få lov at se inden den ryger i trykken.
Fint at du kunne bruge mine ideer
Som det er nu synes jeg dog at billedet er for bredt: det skubber teksten for langt ud til højre, hvor det burde være mere i centrum.
Selv om logoet er kreativt, så synes jeg det er overflødigt. Jeg foreslår at du fjerner det jf. ovenstående. Hav evt. noget grafik til højre for teksten i stedet.
Hvis du formår det, så lav en ramme rundt om billedet så mere ligner en tryksag eller et fysisk produkt, evt. en 3d-effekt ligesom på nyhedsbrevsikonet på siden.
Linket “køb nu” bør føre til en side hvor man præsenteres for betalingsmulighederne (hhv. paypal/ebog.dk). Så kan du fjerne teksten og ebog-logoet og gå direkte til beskrivelsen. Det tror jeg er mere overskueligt. (Lige nu kan du miste kunder der klikker på “køb nu” og kun ser paypal som option, hvilket de måske ikke ønsker at benytte.)