Designa en bättre webbplats: 5 fantastiskt bra produktsidor att inspireras av

Benjamin Razi

Detta är en artikel i serien "Designa en bättre webbplats" där vi går igenom webbplatsens olika sidor för att guida dig till hur du förbättrar den digitala närvaron, skapar en mer användarvänlig webbplats och sätter strategin för leadsgenerering.

Precis som du surfar jag runt på en massa olika sidor, men som digital strateg och passionerad UX designer stannar jag ofta upp en extra sekund för att besvara frågorna:

  • Hur väl presenteras ett värde?
  • Hur tydligt är det att förstå vad sidan handlar?
  • Finns det ett flow med guidande och naturliga nästa steg?
  • Vad är viktigast på sidan? Och hur väl står det ut i kontrast till andra element?
  • Finns det någon CTA?

Det vi ska gå igenom i den här artikeln är fem olika företag som utifrån ovanstående frågeställningar verkligen har lyckats med sina produktsidor.

Observera att när jag beskriver detaljerna är det utifrån desktopläge.

Det betyder att om du tittar på sidorna via mobilen kan/kommer de att se annorlunda ut.

Och innan vi sätter igång, ordet CTA upprepas genom artikeln. Är du inte familjär med ordet är det bra för dig att veta vad det betyder.

En CTA är en förkortning på ordet call-to-action. Det är att du uppmanar dina besökare till att utföra en särskild handling.

På webben visar du det oftast med en knapp, som exempelvis kan säga köp nu, kom igång gratis eller ring oss.

Alrighty – det var grundkraven för att förstå artikeln. Låt oss sätta igång.

GitHub Pages

GitHub är en plats där utvecklare kan lagra sina projekt och enkelt samarbeta med andra utvecklare.

Det är den ledande plattformen för mjukvaruutveckling där många av världens bästa utvecklare är samlade.

Och Pages är en produkt som tillåter utvecklare att mer eller mindre ha en webbplats för deras projekt som hostas direkt genom GitHub.

Sidan är informativ, intuitiv och attraktiv.

Det börjar med en banner-bakgrund som visar att många välkända varumärken använder produkten: bland annat Facebook, Microsoft och Adobe.

Ett socialt bevis som snabbt inger förtroende.

Och med en tydlig värdeproposition som enkelt förklarar vad produkten är och gör, vill du stanna kvar på sidan för att lära dig mer.

Nästa sektion har en video som INTE autospelas (viktigt) och när du väljer att spela upp den får du beskrivande genomgång.

En sak GitHub har gjort väldigt väl, är att efter videon adresserar de sina olika buyer personas genom att du som besökare presenteras med två olika CTA:n som:

  • ”User or organization site”
  • ... och ”project site”.

Som besökare får du på ett intuitivt sätt kontrollen, det besvarar frågorna du har och det gör användarupplevelsen betydligt mer relevant.

Vad som är så bra är att du på ett koncist sätt och med enkla steg kan ta reda på hur produkten fungerar utefter ditt knappval.

github-pages-screen-capture.jpg
Se sidan live

Basecamp

Basecamp är ett webbaserat projekthanteringsverktyg som lanserades 2004 och som snabbt vuxit i popularitet.

Så pass mycket att det idag är världens ledande projekthanteringsverktyg tillsammans ryktet om att vara ett användarvänligt program.

Det är alltid intressant med produkter från SaaS företag som förenklar folks liv, och det är vad Basecamps produktsida har valt att lyfta fram som värde.

När du landar på sidan är det första du ser efter rubriktexten: ”Here’s how basecamp works” – en kort tvåminuters video du kan välja att spela upp och som då förklarar hur produkten fungerar.

När du fortsätter scrolla ner på sidan lyfter man fram vanliga problem och smärtpunkter som kommer med att ha utspridda system.

Rätt igenom hela sidan har de en bra copy, med ett språk som gör det lätt för besökaren att förstå hur produkten fungerar.

Under nästkommande sektion förklarar de hur Basecamp ersätter många av de dagliga system ett företag använder sig av och att det egentligen inte behövs något annat program än Basecamp.

Det i sig besvarar de vanligaste frågorna en besökare har om varför de ska välja Basecamp.

basecamp-screen-capture.jpg
Se sidan live

Hotjar

Med en betalansering under september 2014 är Hotjar "the new kid on the block".

Det är ett kraftfullt analys- och feedbackverktyg som gör det möjligt att förstå hur du kan förbättra din webbplats.

Analysverktygen tillåter dig att mäta och observera användarbeteende (vad dina besökare gör) medan feedbackverktygen låter dig veta vad dina användare tycker.

Vad som gör Hotjar’s produktsida fantastiskt bra är att de bryter ner produkterna till en serie av simpla och sammanhängande funktioner.

Varje sektion förklarar hur funktionerna fungerar med informativa skärmdumpar som du intuitivt och interaktivt kan navigera dig genom med enkla knapptryck.

Förutom att Hotjar kommunicerar fördelarna med produkten väldigt väl, är det i jämförelse med många andra produktsidor sällsynt att se hur bra de förklarar detaljerna kring produkten på ett sådant kort och exakt sätt.

hotjar-screen-capture.jpg
Se sidan live

Microsoft Power BI

Microsoft är ett företag med många produkter och Power BI är ett av dem.

Det är ett analysverktyg som hjälper dig att visualisera din data.

Att visualisera data kanske inte låter sexigt (förutom för oss analysnördar) men låt oss se varför produktsidan är bra.

När du landar på sidan fångas din uppmärksamhet först och främst med en relevant banner-bild som visuellt och tydligt förklarar vad produkten handlar om.

Likaså med värdepropositionen i rubriken: ”Bring your data to life”.

Direkt ovanför bilden hittar du en CTA som skickar dig till en annan sida där du presenteras med två val.

Power BI för desktop eller den molnbaserade versionen.

Det jag gillar är att du precis under banner-bilden kan klicka dig vidare till Power BI’s Youtubekanal för att lära dig mer om produkten, ett bra sätt för att besvara frågorna en besökare har om produkten.

En annan sak jag verkligen gillar är att när du scrollar ner på sidan, kan du omgående se vilka appar Power BI har fungerande integrationer med.

Det är ett effektivt sätt för att öka medvetandet om vad nyttan och värdet är med produkten.

Allt som allt är det en logiskt strukturerad och välorganiserad sida som ger besökaren naturliga nästa steg i deras resa.

Och med minimal copy blir det aldrig överväldigande.

microsoft-power-bi-screen-capture.jpg
Se sidan live

Fitbit

I kontrast till alla tech-sidor har jag sparat det bästa till sist och om du kollar på sidan kommer du att förstå varför.

Fitbit som till större delen säljer fitness trackers, har Apple Watch och Jawbone som närmaste konkurrenter - och kanske även Microsoft Band.

Sidan börjar med en stark värdeproposition och inte en lista på funktioner. Den inledande sektionen är i två delar med en autospelande video till höger.

I know, I know – jag har sagt att du ska undvika autospelande videos.

Men i detta fall är den här videon minimal och agerar nästan som en subtil bakgrundsbild, och framför allt är videon superrelevant till produkten som visar folks vardagliga liv när de använder Fitbit.

Till vänster har du en bakgrundsbild som framhäver produkten och snabbt skapar en känsla för hur det kan se ut när du har den på dig.

Bakgrundsbilden täcks med tydliga CTA’s där den ena är att du kan välja att se den autospelande videon (som då spelas upp i fullstor skärm med ljud) eller ta dig vidare till shoppen som är den mer framhävande CTA:n.

När du scrollar ner på sidan möts du av bra copy:

  • ”The power of heart rate in our slimmest design yet.”
  • ... och ”Reach your health goals in style.”

Efter den sista rubriken, med en CTA precis bredvid som tar dig till shoppen, ser du vad produkten kostar.

Well done Fitbit.

Till den vita bakgrunden framhävs produkten tydligt och med interaktiva knappar kan du bläddra mellan produktens alla färger.

På under en minut har en besökare nu fått svar på de mest relevanta frågorna.

När du fortsätter att scrolla neråt förklaras varför produktens funktioner är värdefulla. Och det görs på interaktiva sätt, med tydliga bilder och minimal copy.

Sammanfattat är det en mycket användarvänlig sida som är generös med whitespace.

(Relaterat: Lär dig mer om designprinciper för en användarvänlig webbplats)

fitbit-screen-capture.jpg
Se sidan live

"Jag säljer tid, inte produkter. Vad ska jag göra?"

Du är inte glömd och jag ska på ett kortfattat sätt ge dig ett värdefullt perspektiv som kommer hjälpa dig att bättre förstå hur du kan övertyga potentiella kunder.

När du säljer idéer och tid istället för glänsande produkter har du en utmaning.

En del av utmaningen är att folk vanligtvis inte värdesätter tid lika mycket som "saker".

Den andra delen är att de som säljer produkter taktiskt kan erbjuda rabatter för att skapa en "bråttom bråttom" känsla och driva folk till att köpa.

Men är du konsult som lever på att sälja din tid vill du inte minska ditt eget värde genom att "rabattera". Speciellt inte när vi människor har svårt att greppa värdet av tid.

Du behöver tänka om.

Första tipset är att du INTE ska förklara hur bra din tjänst är.

Ja, du läste rätt.

Du måste prata om resultat och inte tjänsten.

Du måste besvara frågan "What's in it for me"? Vi gick igenom när vi pratade om hur du ska designa din "om oss"-sida.

När du säljer tid måste din produktsida förklara fördelarna en kund får att jobba med dig.

Bemöter din produktsida folks vanliga rädslor och smärtpunkter din tjänst kan lösa? Presenteras det på ett lättbegripligt sätt?

Som du har märkt utifrån ovanstående exempel är bra copy viktigt.

Hur du positionerar dig och att du sveper in din kund med en bra värdeproposition. Det innebär att du ska undvika floskler.

Ditt jobb är att förstå jobbet en kund vill få utfört och sedan designa din produktsida för att tillfredställa det behovet.

Kunder vill helt enkelt köpa din tid för att få ett jobb utfört, eller som den legendariske Harvard Business School professorn, Theodore Levitt sa:

”People don’t want to buy a quarter-inch drill. They want a quarter-inch hole”.

Lägg märke till att det inte handlar om att förklara hur BRA din tjänst är. Det handlar om att förstå jobbet kunden vill få utfört.

I mitt fall är det ingen som vill ha en ny webbplats. Klart någon kan säga att de vill ha en ny webbplats. Men vad kunden egentligen vill ha (jobbet som ska utföras) är nya leads, kunder och försäljningen som webbplatsen genererar.

Det är mycket enklare att sälja visionen om fler kunder, mer pengar och mindre jobb än att sälja min tid för att designa en ”snygg” webbplats.

Kort och gott, förstå jobbet dina kunder vill få utfört och designa din produktsida utefter det.

Sammanfattning

Vi har gått igenom fem olika sidor men vad är det vi har lärt oss?

Ett par saker:

  • Gör det intuitivt och lätt för dina besökare att förstå vad din produkt gör
  • Besvara vanliga frågor om produkten och gör det lätt att hitta informationen
  • Viktigt att tidigt och tydligt presentera en värdeproposition
  • Minimal copy och framhävande bilder som är relevanta

Din produktsida är en viktig sida. För att efter startsidan är den i konkurrens med ”om oss”- och prissidan för sidor med flest antal besökare.

Finn inspiration från vad vi har gått igenom, notera det som är bra och använd det som en checklista när du designar eller förändrar dina egna produktsidor.


Alla artiklar i denna serie

Om författaren
Benjamin Razi

Benjamin Razi

Benjamin är en digital strateg med en analytisk och filosofisk inställning till affärer — ett fall av vänster och höger hjärnhalva som slåss om uppmärksamhet. Han hjälper IT & Telekomföretag att få fler kunder genom att kombinera psykologi, strategi och design.

Nästa steg

Ladda ner din kopia

Skriv ett svar

Vi är fan av starka åsikter och vi gillar att argumentera som om vi har rätt och självklart lyssna som om vi har fel. Så var inte blyg med att säga vad du tycker.