Tour sidor är en av de viktigaste komponenterna för webbplatser som annonserar apps och / eller tjänster. Turnésidan är ofta där intresserade användare antingen fattar beslutet att anmäla sig eller gå vidare till något annat.
Det är självklart att det finns mycket tryck som designer för att få det här! Skräck inte, men många begåvade designers har gått framför dig och vi kan lära oss mycket genom att titta på deras exempel. Vi dyker in på turnésidor från jättar som Mozilla, 37Signals och Mint.com och ser vilka vanliga tricks de alla använder för att vinna omvandlingar.
Det är svårare än det ser ut
Du har gjort det, du har skämt bort den någonsin elusiva hemsidan, klicka ut av användaren. De är intresserade av din webbplats och de vill lära sig mer. Du tror att du är klar men en ny utmaning väntar. Du har nu ett skott för att övertyga dem om att du kan göra bra på löften på hemsidan, att din app gör vad du sa det skulle och mer på ett sätt som är bättre än vad alla andra gör.
Du utformar en turné sida. Det är en bedrägligt enkel uppgift. Du gör det bra att inte köra igenom det halvhjärtat, men istället spendera lite solid tid så att den blir den bästa sidan du kan. Här kommer potentiella användare verkligen att börja döma om din tjänst och du vill inte skruva upp det viktiga första intrycket. Låt oss ta en titt på några levande exempel från designers som har gått förbi dig för att se vad vi kan lära oss.
Mint.com
Mint är en av mina favorittjänster på webben. Det är inte bara det oerhört användbart att spåra varje cent du spenderar, det råkar också vara super attraktivt ur ett designperspektiv. Eftersom deras designers är så begåvade, tänkte jag att de nog kan lära oss en sak eller två om dagens ämne. Här är en snap på turnésidan:
Innehållsorganisation
Det första jag märker om den här sidan är att den har en ton av innehållet. Du vill inte överbelasta dina besökare med information om du har en ganska rakt framåt tjänst, men något ekonomiskt som Mint ger upphov till många röda flaggor med personer som är rätt försiktiga att ge en webbplats tillgång till sitt bankkonto. Mot bakgrund av detta är Mint mycket transparent om alla aspekter av tjänsten innan du registrerar dig.
Detta är ett viktigt begrepp. Om din tjänst har några anledningar som skulle ge besökare paus när du tänker anmäla dig, är turneringssidan din chans att ta itu med dessa problem i detalj genom att vara öppen, ärlig och lugnande om din produkt.
En annan bra sak som Mint blir rätt är organiseringen av innehållet i små, smältbara och snyggt organiserade bitar. Snarare än att kasta allt på en mil lång sida, har de implementerat en slags AJAX-innehållsomkopplare som uppdaterar den högra kolumnen när du väljer ett ämne.
Stark innehållspresentation
En annan sak som mint verkligen naglar är presentationen av deras innehåll. Notera detta eftersom många människor har fel: Korta, enkla och raka rubriker i kombination med tydliga, attraktiva skärmdumpar och kortfattad men beskrivande stödtext. Här är det som ser ut som i åtgärd:
Lägg märke till kopian här, det är kort och till och med medan du berättar vad du behöver veta. Kolla även hur skärmdumpen fokuserar på den viktiga delen, det här loupe-tricket är verkligen vanligt i webbdesign just nu.
Mint har också ett annat trick upp sin ärm. När skärmdumparna kanske inte räcker, kastar de i några extra visuella signaler. I skärmdumpen nedan förstärks rubriken om en budget genom att läsa en spargris med en bälte runt den för att indikera budgetar:
Skärmbilden kunde ha gjort det själv, men graferna är lite vaga och var därför inte en omedelbar läsning, grisen kan vara ostlik och förutsägbar men det bidrar till att driva denna design precis där den behöver vara.
Basläger
Låt oss lämna Mint bakom och titta på en annan väl utformad turnésida. Folk på 37signals är kända för sin enkla och rena designstil som serverar precis vad du behöver och ingenting mer. Här är ett skott av turnésidan för deras Basecamp-app.
Olika, men detsamma
Lägg märke till två viktiga aspekter av denna sida mot bakgrund av föregående exempel. För det första är designstilen väldigt annorlunda än Mint's. Sidorna är dock faktiskt otroligt lika. Lägg märke till de korta bitarna av innehåll som organiseras av en innehållsbrytare till vänster, skärmdumpar, starka rubriker, extra visuella signaler för att hjälpa skärmdumparna, även fram och tillbaka layoutstil är nästan exakt vad vi såg på Mint.
Det här är en mycket viktig sak att lära sig som designer: Designmönster existerar oberoende av designstil. Mint har en mycket blank och färdig look med mycket glans och reflektion medan Basecamp är väldigt platt i sin Google-liknande enkelhet. Det här är bara godisbeläggningen men under det här är den kritiska ramen för en stark layout, vilket gör innehållet lättare att ta in.
Gräver djupare
När du har kontrollerat överblicken för Basecamp-funktionerna har du möjlighet att se dem i åtgärd genom att klicka på de lilla videolänkarna som är utspridda över hela sidan. Jag är en sucker för en bra produktvideo och jag tror att de verkligen hjälper till att hålla ditt innehåll kortfattat och till den punkten medan du fortfarande erbjuder det djupgående utseende som vissa besökare behöver.
Tänk på att Basecamp är stolt över hur enkelt och avtagbart dess funktionssats är, så om Basecamp inte är för grundläggande för produktdemonstrationsvideos, är inte heller din webbplats. Videoscreencasting-appar är mycket prisvärda och lätta att använda så oavsett vad din budget är, det är inte svårt att dra ihop några professionella videoturer.
Mozilla tänker på turneringssidan
Det grundläggande formatet som vi har sett för de två senaste turnsidorna är en ganska vanlig.Du kan se nästan identiska taktik som används på dussintals webbapps-webbplatser. Kolla in sidorna för Checkout App and Campaign Monitor och du kommer att finna att samma vänsterjusterade innehållsomkopplare används tillsammans med korta listor med funktioner i kombination med skärmdumpar och ikoner.
Det finns en anledning till att detta format används så mycket: det fungerar. Var och en av dessa sidor kan upprätthålla sin egen unika identitet samtidigt som man delar provade och sanna tekniker med sina bröder. Detta innebär emellertid inte nödvändigtvis att reglerna för turnésidan är stilla eller att vi har landat på bästa möjliga lösning för alla webbplatser.
Ett exempel på ett företag som ofta bestämmer sig för att tänka utanför lådan är Mozilla. Deras begåvade designteam bestämde sig för att dölja det gemensamma turnésidformatet och bläddra i eget spår. Resultatet är en rolig, interaktiv och otroligt enkel överblick över webbläsaren:
Här ser vi en skärmdump av webbläsaren med en massa markörer placerade överallt. Anvisningarna är enkla och kan läsas på en sekund:? Rulla över markörerna nedan för funktion info.? Genom att följa detta råd får du en närmare titt på de viktiga funktionerna.
Jag älskar hur direkt den här metoden är, den förklarar appens funktioner inte genom abstrakta generiska ikoner och uppblåsta stycken men med en enkel skärmdump som pekar ut allt du behöver veta.
En organiserad röra
Denna metod för att markera en skärmdump ger en ganska organisk design. Istället för ett förutsägbart och logiskt flöde är markörerna utspridda överallt. Det finns ett väldigt subtilt designtrick men det hjälper dig att se ordning i kaoset, kan du se det?
Den lilla prickade vägen är en av de små designen som verkligen kan dra en sida tillsammans. Utan det finns det en röra av länkar, med det finns en tydlig progression att följa. Beviljas, du behöver inte följa det perfekt och jag skulle satsa på att få användare någonsin gör det, men det är bara närvaro ger sidan en liten men viktig användbarhetshöjning samtidigt som man får en ordningsföljd.
Visa processen
Vårt senaste tävlingssidesignal som du borde borde kommer från Big Cartel. Här är ett beskådat skott av deras turné sida:
Det finns något super enkelt men otroligt effektivt högst upp på den här sidan, en tre stegs process. Ibland behöver en tur sida vara mer än en enkel presentation av funktioner. Till exempel när du hävdar att din tjänst förenklar något komplicerat, till exempel att skapa en onlinebutik, är det viktigt att du illustrerar hur det fungerar på något sätt.
Tre är ett magiskt nummer så försök att bryta ner processer till tre fina och enkla steg som alla kan förstå. Det här handlar om att få användaren att känna sig bemyndigad, de måste titta på det här och säga, "Jag kan göra det här!", Särskilt om de har tittat på andra ställen och bara hittat avskräckande komplicerade lösningar.
Slutsats
Exemplen ovan har sina egna unika lektioner för att lära oss och tillsammans målar de en bild av några mycket vanliga turnésidedesigner som du kan implementera i dina kommande projekt.
När du börjar med ditt turnésidéäventyr, kom ihåg att webben ger dig enastående frihet att experimentera för att se vad som fungerar bäst. Försök komma med några olika mönster och kör sedan några A / B-test för att se vilka användare som svarar bäst.
Om du har utformat en resesida nyligen, lämna en kommentar med en länk nedan. Vilka tekniker har du för att säkerställa framgång? Har du lärt dig något genom att experimentera med olika layouter och mönster?