Designa en webbapps hemsida exempel, tips och peeves

Webben är helt övermättad med appar som hjälper dig att ansluta till ett socialt nätverk, göra livsmedelsbutiker, hantera stora projekt, bestämma vem som ska göra te och varje annan galen uppgift du kan tänka dig.

Med alla denna tävling, hur kan du övertyga besökare om att din app är en proverbial nål bland höen? Idag ser vi på några riktiga exempel för att se om vi kan lära vilka strategier som ska efterlikna och vilka som ska undvikas.

Appens hemsida är extremt viktigt

Du har spenderat massor av tid, pengar och ansträngningar för att skapa en webbapplikation. Det är ett högkvalitativt företag som du är säker på att kommer att ta på som en eldsvamp. Det finns bara en fångst, du måste övertyga människor för att prova.

Oavsett hur bra din webbapp är, måste du fortfarande ha en solid försäljningstaktik som i slutändan övertygar folk att klicka på? Registrera? knapp. Även om tjänsten är helt fri och erbjuder massor av funktioner, har du verkligen jobbat för att vinna dessa omvandlingar.

Antag aldrig att bara för att en användare har landat på din hemsida att de verkligen är intresserade av vad du har att erbjuda och behöver därför bara en liten nudge att gå vidare. Odds är, de följde en del länk med bara en vag uppfattning om var de skulle hamna och är i ett känsligt stadium där de sannolikt kommer att flytta till en annan webbplats om några sekunder om du inte drar in dem.

Din hemsida för webbapplikationer är ett av dina mest värdefulla marknadsföringsverktyg. Motstå strävan att bara knyta något tillsammans snabbt och istället lägga fram din allra bästa insats. Låt oss titta på några exempel för att se vad vi kan lära oss.

Tips: Håll designen enkel och meddelandet starkt

Vårt första exempel kommer från en ny tjänst som heter Kroud. Låt oss ta en titt på den del av webbplatsen ovanför veckan.

Det finns mycket jag tycker om den här sidan. Först och främst är det mycket enkelt och fokuserat. Det överväldigar dig inte med tomma påståenden om hur tjänsten kommer att förändra ditt liv, och det slår inte runt bushen om vad webbplatsen är. Det finns inget värre än en sida som inte definierar sig bra. Om jag inte kan berätta vad din app gör om fem sekunder fortsätter jag vidare.

Kroud verkligen naglar uppgiften att koppla en komplex tjänst till ett tydligt meddelande som också fungerar som ett starkt tillvägagångssätt: • Skapa en interaktiv FAQ-sida på några sekunder.? Den linjen är en av de första sakerna jag ser när jag laddar sidan och det förmedlar omedelbart exakt vad webbplatsen gör.

Den stora knappen

En annan sak vi kan lära av Kroud är att de stora, djärva anmälningsknapparna är en bra sak! Här är Kroud-knappen i verklig storlek.

Den här knappen är stor och mycket tydlig om vad som händer när du trycker på det:? Starta en Kroud ?, med sekundärmeddelandet,? Det är gratis!?. Lägg märke till hur den här knappen uppmärksammar inte bara storleken utan även färg. Det är så mycket ljusare än det andra innehållet som dina ögon omedelbart dras till.

Tips: Skärmdumpar är ett måste!

Din hemsida för hemsidan har två primära mål: att utbilda människor om din produkt och övertyga dem om att prova det. Dessa är samma mål som du ser i marknadsföring och reklam från nästan alla företag på planeten.

Föreställ dig en tidningsannons eller en webbplats för en ny Corvette. Vad tycker du att den här sidan skulle se ut? Det finns en miljon möjliga mönster, men en sak skulle troligen vara konstant: du skulle se bilen. Korvetter har ett arv av bra design och de vet att det bästa sättet att visa upp sin senaste prestation är att visa dig ett fotografi av det med all sin ära. Vem kunde vara övertygad om att köpa en sportbil utan att ens se den? Detta skulle vara ännu mer fallet om sportbilen inte var en Corvette utan istället något som ingen någonsin hört talas om.

Detta fungerar som en metafor för din hemsida för hemsidan. Webapps är ett dussin ett dussin och ingen har någonsin hört talas om din. Om du inte skäms över dina dåliga designkunskaper vill folk se exakt vad tjänsten kommer att se ut innan de tar sig tid att anmäla sig.

Folket på Freckle vet det här och valde att lägga upp sin sida med en serie med fem skärmdumpar.

Även om stora delar av några är täckta, ger bilden som helhet dig en anständig glimt av hur tjänsten ser ut.

Funktioner som Skärmdumpar

Den nuvarande trenden i webbapps hemsida design är att visa upp funktionerna på din hemsida med små ikoner. Det här är en bra idé som verkligen ökar sidans estetiska värde och hjälper till att bryta upp stora block av kopia. Här är ett exempel från Ballpark Fakturering.

Även om ikoner är bättre än text, om du verkligen har ett solidt gränssnitt tror jag faktiskt att skärmdumpar kan vara ett mycket starkare visuellt element. Skärmdumpar kommunicerar direkt din tjänst medan generiska ikoner bara presenterar en abstrakt representation av vad användare kan förvänta sig att se. Kolla in hur Freckle diskuterar sina funktioner.

Se hur meddelandet här förstärks av en bild av exakt vad det här kommer att se ut i appen? Det här är en trend som jag ser mer och mer på sistone och jag tycker att det är en bra som verkligen förbättrar ikonidén för den tidigare generationen webbapps.

Som ett annat exempel visar TodayPulse tre av deras primära funktioner i en horisontell remsa av skärmdumpar:

Peeve: Inga skärmdumpar

Du kanske tror att skärmdumpar är ganska grundläggande och att ingen behöver den här påminnelsen, men sanningen är att det finns otaliga webbapps hemsidor som inte ger dig den minsta aningen om vad appen faktiskt ser ut.

Även om dessa sidor är ganska attraktiva, som Wordfaire nedan, är oddsen för mig att försöka det mycket mindre helt enkelt för att jag inte kan se en förhandsgranskning.

Det gamla ordspråket? En bild är värd tusen ord? verkar verkligen sant i den här arenan.Det är helt enkelt inget sätt jag ska läsa de sju styckena på texten på Wordfaire-hemsidan. Jag skulle handla minst fem av dem för en skärmdump utan en andra tanke.

Tips: Låt användare spela med ett liveexempel

Konceptet? Försök innan du köper? har funnits sedan försäljarens gryning. Det är ett enkelt koncept som kommer att bestå så länge det finns produkter. Åtaganden suger, särskilt när det råder osäkerhet. Genom att låta en användare pröva din webapp först tas osäkerheten bort.

Det är oerhört viktigt att komma ihåg att? Försök innan du köper? till och med gäller gratis tjänster! Detta verkar förvirrande men det är verkligen ganska enkelt. Till och med en gratis tjänst äter upp min tid, en resurs som jag tycker är ganska värdefull och kommer inte att handla för någonting. Att registrera sig för en gratis webbtjänst känns fortfarande som ett engagemang; en som jag inte vill göra om inte jag är säker på att jag kommer att gilla produkten.

Konceptet är enkelt, skapa ett sätt som användare kan kasta runt och sparka på däcken i din app utan att lägga in en enda bit information. Vi ser detta i åtgärd nedan för Pen.io. Det här är en annan sida utan skärmdumpar men görs lite bättre genom att en länk till ett exempel ingår så att du kan se vad du får från tjänsten.

Återigen är det bra att Pen.io inkluderar detta, men utförandet är starkare tillbaka på Kroud där länken till exampe-sidan förstärks av en förhandsvisning.

Peeve: långa turer

Vissa webbapps tar dig på en tio minuters utflykt som förklarar deras service i detalj. Förse mig inte, informationen är bra och om jag betalar för en tjänst kommer jag vilja ha det. Men ska en? Produktturné? verkligen vara så arbetsintensiv?

Om jag klickar på en länk som säger? Ta en turné? Vad jag verkligen vill göra är att se appen. Ett levande exempel som vi diskuterade just i mycket starkare än 2000 ord förklarar hur det kommer att bli när du äntligen når den punkt där du får lov att prova det. Vissa webbplatser bygger även en modifierad? Smart? levande exempel som går igenom processen. Det här är ett bra sätt att låta användarna testa din tjänst samtidigt som de verkligen ser till att de får poäng och ser vad du vill ha dem till.

Återigen är det inte nödvändigtvis dåligt att rant om dina funktioner, men kom ihåg att det är viktigt att tillåta användare att bara hoppa in och se vad de tycker.

Inkludera en video

En annan idé att visa upp din webbapp i åtgärd är att inkludera en kort video direkt på hemsidan. Om en bild är värd tusen ord, är en minut vid 15-30 bilder per sekund ovärderlig! En video uppnår samma mål som exemplet och skärmdumpar, bara det är mer dynamiskt än skärmdumpar och en mer strukturerad upplevelse än ett fritt testområde.

Aviary gör ett bra jobb med detta genom att visa upp en tidsfördröjning av bildredigeraren som skapar en komplex fotomanipulation.

En av mina nuvarande favorit-implementeringar av en webbapps-startsida är Greplin. Här visas en video när du laddar sidan, men om du inte startar videon efter några sekunder blir den till ett bildspel av skärmdumpar.

Peeve: tecknade film som aldrig visar appen

Av en eller annan anledning kollar den snygga saken att göra just nu tillsammans en av dessa videor som en rolig liten tecknad film. Det här är ofta en bra idé men det problem jag har är att efter två minuter av lite tråkig liten animering har jag fortfarande ingen aning om hur appen faktiskt är!

De två videon nedan från Minus och Summify är bra exempel på detta. Beviljas, de kommer så småningom till nästan visar dig en illustrerad version av appen, men bara i slutet och även då är det en liten, abstrakt titt.

Slutsatser: Ett recept för framgång

Alla råd i den här artikeln riktar sig till de två primära målen för din webbapplikations hemsida, som vi redan har diskuterat: utbildning och enticement. Först, avlägsna alla rodren ur din design och smutsa ner den till de viktigaste elementen så att besökaren kan fokusera på vital information utan distraheringar.

I dina meddelanden, gör ett djärvt uttalande om vad appen gör och vem den är för. Vi diskuterade inte den senare punkten mycket idag, men det finns ett starkt argument som tyder på att du kommer att vinna fler konverteringar genom att tydligt identifiera din målgrupp. Exempel:? MyCoolWebApp hjälper designers och utvecklare att organisera kund- och projektinformation? är bättre än? MyCoolWebApp organiserar klient- och projektinformation ?. Också vara säker på att påpeka några viktiga funktioner och varför besökare ska använda appen.

När du har fått dina meddelanden kvadrade bort är det dags att fokusera på att presentera din produkt för publiken. Tre bra sätt att göra detta är skärmdumpar (flera om du kan svänga den), live exempelkonton och videoturer (den typ som faktiskt visar produkten). Målet är att minska mängden osäkerhet kring din produkt. Ju mindre osäkerhet det finns, desto mindre användare kommer att tveka att anmäla sig.

Det förutsätter självklart att du har en kvalitetsprodukt. Om ditt gränssnitt är lamt, då för det hela, göm det från allmänheten och håll dig till tråkiga, långa beskrivningar istället!