Det är helt klart så att responsiv design är både populärt och praktiskt. Tanken är att skapa en användarupplevelse som flyter på bättre och anpassar hemsidans utseende till olika format. Responsiv design används ofta för att få en webbplats att fungera både på datorer och mobila enheter. Just precis där finns det en hel del fallgropar. Genom att klämma ihop allt innehåll till en mycket mindre yta kan resultatet bli kaotiskt och direkt påverka konverteringen negativt.

Mycket av informationen är helt irrelevant för en användare på språng eftersom webbplatser väldigt ofta byggs med en datoranvändare i åtanke. Personer som söker upp din hemsida medan de är ute och rör på sig har ofta en helt annan avsikt med sitt besök än vad datoranvändaren har. Detta kan leda till att hemsidan inte alls känns relevant och besökaren lämnas både irriterad och besviken. Den här fallgropen kostar dig pengar.

Responsiv design är naturligtvis inte alltigenom dålig, men behöver anpassas efter användares sinnestillstånd. För att effektivt skapa en bra responsiv design för den mobila användaren behöver vi tänka på två saker:

     1. Varför har den mobila användaren klickat in på din hemsida?

     2. Vad har besökaren för mål?

Koka ner och destillera hemsidans innehåll till svaren på de här två frågorna. Det är vad som egentligen är viktigt för besökaren och vad som kommer ge dig konvertering.

5 Tips för att optimera din Responsiva Design

     1. Optimera bilder och fundera på om de behövs

I en responsiv design krymps de flesta bilder automatiskt ner till en anpassad storlek. En bild som ser snygg ut på en datorskärm kan dock bli plottrig och svårläst på en mycket mindre skärm på en mobil enhet. Därför bör du tänka över ditt val av bild. Den kanske faktiskt inte behövs alls. Tillför den något viktigt visuellt? Distraherar den från målet och informationen mer än den tillför ett värde? Även om bilden är vacker kan den förstöra upplevelsen av webbplatsen genom att påtvinga ett kaotiskt och förvirrat intryck.

Om du vill ha kvar bilden – se till att det är en bild som fungerar även i det mindre formatet. Bilden ska absolut inte ta över och dominera sidan. Den är tänkt som ett komplement i desktop-designen. Låt den förbli det även i det anpassade formatet.

     2. Se över navigeringen

Det är A och O att ha ett tydligt och lättläst navigationsfält. Mobilanvändare vill hitta svar snabbt. Se därför till att både menyn och sökfältet är lätta att hitta och att använda. I dagsläget använder många faktiskt hellre ett sökfält än en call-to-action-knapp. Genom att söka på sidan förväntar sig besökare hitta exakt rätt information snabbare. Det tyder också på att många call-to-action-knappar inte är så tydliga eller specifika som användarna vill.

Fundera på vad det är användaren vill åt på din sida. Förstå deras mål för att få insikt i vad på webbplatsen som är otydligt eller kanske saknas helt. Till exempel söker många mobila användare efter kontaktuppgifter så som telefonnummer eller adress. Det här är extra vanligt och viktigt för de som har en fysisk butik. Är det för krångligt att hitta adress eller vägbeskrivning ger presumtiva kunder lätt upp i förtid och du går miste om en möjlig konvertering.

     3. Gör dig av med responsiva popups

Overlays och popups som är designade för datorskärmar fungerar sällan bra på mobila enheter. Med 19000 kombinationer av upplösning och skärmstorlekar är det nästintill omöjligt att få det att se bra ut på alla enheter. Dessutom distraherar de ofta en mobilanvändare från deras egentliga mål. De upplevs som extremt störande, speciellt när de inte fungerar till 100% och blir oläsliga. Google har uppmärksammat det här problemet och tänker börja straffa de som använder popups som täcker sidans egentliga innehåll.

Om du ändå behöver något liknande så använd dig av en overlay som är anpassad till den mobila användarens behov. Åter igen ska du tänka på vad besökaren har för mål med att klicka in på just din hemsida. En välanpassad popup kan fungera väldigt effektivt för att leda besökaren mot målet.

     4. Förkorta och förenkla – se över din text

Förvånande nog är det många företag som inte tänker på sina texter. De optimeras sällan för desktop och ännu mer sällan för mobila enheter. Det resulterar lätt i stora massor text som fungerar okej på en datorskärm där du har en större överblick, men som blir oöverskådligt på en liten skärm. Datoranvändaren har också oftast mer tid till att läsa och ta till sig information.

Mobilsurfandet är helt annorlunda. När användaren snabbt vill uppfylla mål och hitta svar på kortast möjliga tid vill den inte söka igenom massiva mängder text. Kombinationen av den stora textmängden och enhetens format resulterar ofta i att den mobila versionen av sidan blir kaotisk, plottrig och svårläst när all text trycks ihop och tävlar om utrymmet.

Titta på vad du kan förkorta och förenkla. Har du koll på din informationshierarki? Det är ett stort och fint ord, men betyder helt enkelt att viss information rankas som viktigare än annan. Behåll bara det som är viktigt för besökaren!

Tänk också på hur mobilanvändare scrollar på sina enheter. På datorskärmen vill du ha allt på en sida eftersom datoranvändare är mindre benägna att scrolla. På mobil är det tvärt om – där är risken snarare att användaren scrollar för mycket. Använd ditt utrymme smart och författa rubriker som fångar intresse och får en scrollande besökare att stanna upp.

     5. Förtydliga din call-to-action

Vi pratade tidigare om att många användare väljer att använda ett sökfält istället för en call-to-action-knapp. Det är ofta för att din call to action upplevs som otydlig eller inte är relevant för det besökaren vill åt. Eftersom användaren vill få sitt ärende gjort snabbt är det extra viktigt att ha en tydlig call to action – naturligtvis relaterad till sidans mål. Tydlig kommunikation är viktigt. För att tillgodose alla behov kan det vara väldigt effektivt att ha både call to action och sökfältet tydligt synliga på landningssidan.

Se över din design idag

Ha alltid den mobila användarens beteende i åtanke! Välj inte de enkla lösningarna istället för de effektiva. Analysera och tänk igenom dina beslut både en och två gånger för att få bästa möjliga konvertering.

 

Känner du dig osäker? Kontakta oss så tittar vi på den bästa lösningen för dig och din hemsida!