Hur får man till en snygg och lättanvänd design i webbutiken? I våra webbutiker kan du välja på en massa olika mallar som är bra att börja med. Om du vill ha en personlig och unik design så kan man fixa det med små ändringar i mallen. Här går vi igenom saker som kan vara bra att tänka på när du planerar butikens layout och design.
Skissa upp strukturen
Det hjälper om du först bestämmer vad för slags design du vill ha. Börja med att skissa upp hur du vill att designen ska se ut, du kan till och med börja med papper och penna. Du kan även använda dig av ett bildbehandlingsprogram för att enkelt skapa en mer precis bild av din design. Det är enklare att se vad som ser bra ut när du enkelt kan välja typsnitt, färger, layout osv. Tänk även på vilka fält du vill ha med på sidan; sidhuvud, sidfot, sidofält till höger och/eller vänster. När du har en klar bild av hur du vill att designen ska se ut kan du börja titta på hur du kan göra detta i administrationen för din webbutik. Oftast finns det inga tekniska hinder, utan det mesta går att få till på något sätt.
Det kan också vara bra att titta lite på dina konkurrenters webbsidor. Sök på Google efter, både svenska och engelska, webbutiker som säljer liknande produkter och "låna" deras bästa idéer som skulle passa i din butik.
- Titta igenom liknande webbutiker och tänk på vad som är bra i deras design
- Vilka av dessa idéer kan du själv använda i din butik?
- Tänk på vilka sidområden du ska använda (vänster, höger, sidhuvud och sidfot)
Användarvänlighet först!
Det är viktigt att förstå hur de olika delarna påverkar helheten och användavänligheten av sidan. T.ex. i valet av färger är det viktigt att de hänger ihop och att man inte använder för många olika färger. Med hjälp av färgerna kan man då förstärka något element, som t.ex. köpknappen, och rikta kundernas uppmärksamhet mot de vikitgaste delarna av sidan. Om man på samma sida förstärker tiotals olika länkar på olika delar av sidan så kan man räkna med att kundernas uppmärksamhet reduceras till noll. Man måste försöka hitta en balans mellan en snygg design och bra användarvänlighet. Om köpknappen inte märks bland för många dekorationsbilder kan det vara en bra idé att börja om.
- Arrangera produktkategorierna, navigationslänkarna och varukorgslänken så att de är enkla att hitta. Om något mindre viktigt element stör användarvänligheten, flytta då det elementet till en annan del av sidan eller ta bort det helt.
- Kom ihåg att det viktigaste är att butiken är enkel att använda och att de viktigaste elementen är enkla att hitta. Bestäm först layouten på sidan, sedan kan man börja tänka på hur man gör den snygg.
- Testa butikens användarvänlighet med hjälp av någon utomstående, som inte känner till din butik. Se om de kan göra en beställning och hitta nödvändiga funktioner och information. Fråga efter feedback om vad som kan förbättras.
Var noggrann i valet av färger
Det kan vara en bra idé att hålla antalet färger nere för sidans klarhet och enkelhet. Bakgrunden kan mycket väl vara vit och texten får vara svart. Det gör texten lättare att läsa och en enkel färgsättning ökar butikens pålitlighet. Det betyder såklart inte att designen behöver vara tråkig, redan en enda väl utvald och placerad bild kan göra sidan uttrycksfull. Rubriker och länkar kan t.ex. också vara i andra färger än svart, det gör att de sticker ut och drar uppmärksamheten till sig.
Man kan välja ut 2-3 huvudfärger som man använder. Svart och vitt räknas inte in då, inte heller olika nyanser av grått. Som huvudfärger kan man t.ex. välja färger som man använder i loggan, då får man automatiskt loggan att naturligt passa in på sidan. Förutom huvudfärgerna kan man använda sig av ljusare nyanser av de färgerna på större ytor, som t.ex. bakgrundsfärg i tabeller osv. Välj den ljusare nyansen genom att först välja huvudfärgen och sedan dra markören mot det vita hörnet, tills du har ca en femtedel kvar från startpunkten till det vita hörnet. I ett bildbehandlingsprogram kan man få samma effekt genom att välja 20% transparens.
Spara alla huvudfärger och ljusare nyanser i färgväljaren. Du sparar färgen genom att först välja rätt nyans (eller fylla i färgkoden) och sedan klicka på en tom ruta under "Användardefinierade färger" i färgväljaren. Då slipper du komma ihåg färgkoderna och du slipper använda "nästan samma färg" för olika saker.
- Välj 2-3 huvudfärger och, om det behövs, ljusare nyanser av dem
- Spara de färger du väljer så att du enkelt hittar rätt nyans senare
- Gör rubriker, länkar och bakgrundsfärger i de färger du har valt
Fonter och rubriker
I webbutikens administration finns inte ett så stort urval av fonter, men de fonter som finns är fonter som finns tillgängliga i alla operativsystem vilket betyder att man kan vara säker på att texten alltid ser likadan ut för alla besökare i butiken. Det finns även tjänster som Google Fonts som man kan använda för att få ett större urval.
Välj de fonter du vill använda och spara dem i designverktyget i administrationen. När du skriver produktbeskrivningar, nyhetstexter på startsidan osv. så finns det möjlighet att välja en font för just det stycket i texteditorn. Vi rekommenderar dock att inte använda olika fonter för specifika textstycken, utan låt texten vara i den font som valts i designen. Då passar sidorna ihop bättre, du kan enkelt ändra fonten (utan att behöva ändra separat i varje textstycke) och källkoden håller sig enkel (sidorna laddas enklare och skillnaderna i olika webbläsare är mindre). Oftast är det bra att använda samma font i alla fält på sidan, men man kan såklart använda olika fonter i t.ex. sidhuvudet. Välj storleken på fonten så att den är stor nog att man enkelt kan läsa även en längre text.
Brödtexten kan alltså mycket väl vara svart. Rubrikerna kan dock vara någon annan färg, helst då från någon av huvudfärgerna så att allt hänger ihop. Även någon nyans av grått går bra. Välj t.ex. olika färger/nyanser för rubrik 1, 2 och 3 så att man ser skillnad.
- Välj fonter och spara dem i designinställningarna
- Undvik att redigera texten för specifika texter, använd istället fonten i designinställningarna
- Kontrollera att även längre textavsnitt är lättlästa
Länkar
Välj ett sätt som lyfter fram länkarna. Man kan välja olika sätt för de olika fälten på sidan. Understruken text används ofta för länkar, därför antar man ofta att understruken text är en länk. Man kan även framhäva länkarna ännu mer genom att ge dom en annan färg, men undvik att använda samma färg som du har på rubrikerna så att det är enkelt att se vad som är en länk och inte. Aktiva länkar, alltså när användarens markör är över länken, kan man också framhäva genom att t.ex. ge den en lite starkare nyans än för normala länkar. Det lockar ännu mer till att klicka på länken. Använd inte fet stil för aktiva länkar om inte normala länkar också har det.
- Lyft fram länkarna med hjälp av understruken text eller färg så att användaren ser direkt att det är en länk utan att behöva föra musen över länken
- Om det behövs, använd en lite starkare nyans av färgen på aktiva länkar för att locka till klick
Bilder
Bilderna utgör en stor del av designen. Även en liten utfyllnadsbild på rätt plats kan direkt ge en bättre känsla för hela sidan. När man väljer bild bör man tänka på vilka färger som finns i bilden och hur de passar ihop med färgerna i butiken. Med ett bildbehandlingsprogram kan man ändra färgnyanserna litegrann för att få dem att passa ihop med butiksfärgerna. Bra ställen för bilder kan t.ex. vara högst upp i innehållet på förstasidan eller i sidhuvudet om man vill att bilden ska visas på alla undersidor också. Även sidfälten kan vara bra för bilder, men då bör man också lägga till någon slags funktion för bilden, t.ex. att det är en länk till produkterbjudanden eller nyheter.
Även produktbilderna har en väsentlig betydelse för designen. Lägg till några populära produkter på förstasidan. Om det finns flera nivåer på kategorierna så kan man även lägga till några produkter på kategorisidorna innan underkategorierna.
Utfyllnadsbilderna behöver nödvändigtvis inte ha någonting med själva verksamheten att göra utan de är mer till för att ge en speciell stämning eller inspiration. Det kan vara svårt att hitta bra bilder, men det är värt att lägga lite tid på det. Det finns flera olika bildbanker online där man kan leta efter passande bilder. Bilderna är oftast inte gratis men bilder med bra kvalitet för webben kan man få för redan en tjugolapp. Utöver att tänka på färgerna och känslan i bilden bör man även titta på dimensionerna. Om du t.ex tänker lägga till bilden i sidhuvudet bör den beskäras så att den är tillräckligt bred och inte för hög.