Een webapp-homepage ontwerpen: voorbeelden, tips en ergernissen
Het web is volledig oververzadigd met apps die je helpen verbinding te maken met een sociaal netwerk, boodschappenlijstjes te maken, grote projecten te beheren, te beslissen wie thee gaat zetten en elke andere gekke taak die je maar kunt bedenken.
Hoe kunt u met al deze wedstrijden bezoekers er mogelijk van overtuigen dat uw app de spreekwoordelijke naald onder het hooi is? Vandaag zullen we enkele echte voorbeelden bekijken om te zien of we kunnen leren welke strategieën we moeten nabootsen en welke we moeten vermijden.
De startpagina van uw app is uiterst belangrijk
Je hebt veel tijd, geld en moeite gestoken in het maken van een webapplicatie. Het is een eersteklas onderneming waarvan je zeker weet dat het als een lopend vuurtje zal aanslaan. Er is maar één addertje onder het gras: je moet mensen overtuigen om het eens te proberen.
Het maakt niet uit hoe goed uw web-app is, u moet nog steeds een solide verkooptactiek hebben die mensen uiteindelijk overtuigt om op de knop "aanmelden" te klikken. Zelfs als de service volledig gratis is en een heleboel functies biedt, moet je echt werken om die conversies te winnen.
Ga er nooit vanuit dat alleen omdat een gebruiker op uw startpagina is beland, ze oprecht geïnteresseerd zijn in wat u te bieden heeft en daarom slechts een klein duwtje nodig hebben om verder te gaan. De kans is groot dat ze een link volgden met slechts een vaag idee van waar ze terecht zouden komen en zich in een delicaat stadium bevinden waarin ze waarschijnlijk binnen enkele seconden naar een andere site gaan als je ze niet naar binnen trekt.
De startpagina van uw webapp is een van uw meest waardevolle marketingtools. Weersta de drang om gewoon snel iets samen te maken en in plaats daarvan je uiterste best te doen. Laten we enkele voorbeelden bekijken om te zien wat we kunnen leren.
Tip: houd het ontwerp eenvoudig en de boodschap sterk
Ons eerste voorbeeld komt van een nieuwe dienst genaamd Kroud. Laten we eens kijken naar het gedeelte van de site boven de vouw.
Er is veel dat ik leuk vind aan deze pagina. Allereerst is het heel eenvoudig en gericht. Het overweldigt je niet met lege beweringen over hoe de service je leven zal veranderen, en het maakt ook geen grap over wat de site is. Er is niets erger dan een pagina die zichzelf niet goed definieert. Als ik niet weet wat uw app binnen vijf seconden doet, ga ik verder.
Kroud ziet echt de taak om een complexe dienst te relateren aan een duidelijke boodschap die ook dient als een sterke oproep tot actie: "Maak binnen enkele seconden een interactieve FAQ-pagina." Die regel is een van de eerste dingen die ik zie wanneer ik de pagina laad en het geeft meteen precies weer wat de site doet.
De grote knop
Een ander ding dat we van Kroud kunnen leren, is dat grote, vetgedrukte aanmeldknoppen een goede zaak zijn! Hier is de Kroud-knop op ware grootte.
Deze knop is enorm en heel duidelijk over wat er gebeurt als je erop drukt: "Start een Kroud", met de secundaire boodschap "Het is gratis!". Merk op hoe deze knop uw aandacht trekt, niet alleen met grootte, maar ook met kleur. Het is zoveel helderder dan de andere inhoud dat je ogen er meteen naar worden getrokken.
Tip: Screenshots zijn een must!
De startpagina van uw web-app heeft twee hoofddoelen: mensen informeren over uw product en hen ervan overtuigen het te proberen. Dit zijn dezelfde doelen die u ziet in marketing en reclame van bijna elk bedrijf ter wereld.
Stel je een tijdschriftadvertentie of een website voor een nieuwe Corvette voor. Hoe zou die pagina er volgens jou uitzien? Er zijn een miljoen mogelijke ontwerpen, maar één ding zou waarschijnlijk constant blijven: je zou de auto zien. Corvettes hebben een erfenis van goed ontwerp en ze weten dat de beste manier om te pronken met hun nieuwste prestatie, is om je er een foto van te laten zien in al zijn glorie. Wie kan er van overtuigd worden om een sportwagen te kopen zonder hem te zien? Dit zou nog meer het geval zijn als de sportwagen geen Corvette was, maar iets waar niemand ooit van had gehoord.
Dit werkt als een metafoor voor de startpagina van uw web-app. Web-apps zijn een dozijn dozijn en niemand heeft ooit van je gehoord. Tenzij je je schaamt voor je slechte ontwerpvaardigheden, willen mensen precies zien hoe de service eruit gaat zien voordat ze de tijd nemen om zich aan te melden.
De mensen bij Freckle weten dit goed en kozen ervoor om hun pagina bovenaan te plaatsen met een reeks van vijf screenshots.
Hoewel grote delen van sommige hiervan bedekt zijn, geeft de afbeelding als geheel u echt een goed beeld van hoe de service eruit ziet.
Functies als screenshots
De huidige trend in het ontwerpen van startpagina's van webapps is om de functies op uw startpagina te laten zien met kleine pictogrammen. Dit is een geweldig idee dat de esthetische waarde van de pagina echt verhoogt en helpt grote blokjes tekst op te splitsen. Hier is een voorbeeld van Ballpark Invoicing.
Hoewel pictogrammen beter zijn dan tekst, denk ik in het geval dat je echt een solide interface hebt, dat screenshots een veel sterker visueel element kunnen zijn. Schermafbeeldingen geven uw service rechtstreeks weer, terwijl generieke pictogrammen slechts een abstracte weergave geven van wat gebruikers kunnen verwachten. Bekijk hoe Freckle hun kenmerken bespreekt.
Zie je hoe de berichtgeving hier wordt versterkt door een afbeelding van hoe dit er precies uit zal zien in de app? Dit is een trend die ik de laatste tijd steeds vaker zie en ik denk dat het een goede is die het idee van de vorige generatie webapps echt verbetert.
Een ander voorbeeld: TodayPulse toont drie van hun belangrijkste kenmerken in een horizontale strook schermafbeeldingen:
Peeve: geen screenshots
Je denkt misschien dat screenshots vrij eenvoudig zijn en dat niemand deze herinnering nodig heeft, maar de waarheid is dat er talloze startpagina's van webapps zijn die je niet de minste hint geven van hoe de app er eigenlijk uitziet.
Zelfs als deze pagina's redelijk aantrekkelijk zijn, zoals Wordfaire hieronder, is de kans dat ik het probeer veel kleiner omdat ik geen voorbeeld kan zien.
Het oude gezegde 'een beeld zegt meer dan duizend woorden' bewijst echt waar in deze arena. Ik ga de zeven paragrafen op de startpagina van Wordfaire gewoon niet lezen. Ik zou er ten minste vijf ruilen voor een screenshot zonder erbij na te denken.
Tip: laat gebruikers spelen met een live voorbeeld
Het concept van 'probeer voordat je koopt' bestaat al sinds de dageraad van de verkoper. Het is een eenvoudig concept dat blijft bestaan zolang er producten zijn. Verplichtingen zijn waardeloos, vooral als er onzekerheid is. Door een gebruiker eerst uw webapp te laten uitproberen, wordt de onzekerheid weggenomen.
Het is uitermate belangrijk om in gedachten te houden dat het 'proberen voordat je koopt' zelfs van toepassing is op gratis services! Dit lijkt verwarrend, maar het is eigenlijk best simpel. Zelfs een gratis service kost mijn tijd op, een bron die ik vrij waardevol vind en die ik niet zomaar inruil. Aanmelden voor een gratis webservice voelt nog steeds als een verplichting; een die ik niet wil maken, tenzij ik echt zeker weet dat ik het product leuk zal vinden.
Het concept is eenvoudig, creëer een manier waarop gebruikers kunnen rondneuzen en de banden van uw app kunnen schoppen zonder een beetje informatie in te voeren. We zien dit in actie hieronder voor Pen.io. Dit is een andere pagina zonder schermafbeeldingen, maar is een beetje beter gemaakt door een link naar een voorbeeld op te nemen, zodat u kunt zien wat u van de service krijgt.
Nogmaals, het is geweldig dat Pen.io dit bevat, maar de uitvoering is sterker terug op Kroud, waar de link naar de voorbeeldpagina wordt versterkt door een voorbeeld.
Peeve: lange rondleidingen
Sommige web-apps nemen je mee op een excursie van tien minuten die hun service tot in detail uitlegt. Begrijp me niet verkeerd, informatie is goed en als ik betaal voor een dienst, dan wil ik dat ook. Maar moet een 'producttour' echt zo arbeidsintensief zijn?
Als ik op een link klik met de tekst 'Rondleiding volgen', wil ik echt de app zien. Een levend voorbeeld zoals we zojuist hebben besproken, veel sterker dan 2000 woorden, waarin wordt uitgelegd hoe het zal zijn als je eindelijk het punt bereikt waarop je het daadwerkelijk mag uitproberen. Sommige sites bouwen zelfs een aangepast 'slim' live voorbeeld dat u door het proces leidt. Dit is een geweldige manier om gebruikers uw service te laten uitproberen, terwijl u er echt voor zorgt dat ze het punt begrijpen en zien wat u wilt.
Nogmaals, het is niet per se slecht om over je functies te tieren, maar onthoud dat het belangrijk is dat gebruikers gewoon kunnen inspringen en zien wat ze denken.
Voeg een video toe
Een ander idee om uw web-app in actie te laten zien, is door een korte video op de startpagina op te nemen. Als een foto meer zegt dan duizend woorden, dan is één minuut met 15-30 frames per seconde onbetaalbaar! Een video bereikt hetzelfde doel als het voorbeeld en de screenshots, alleen is het dynamischer dan screenshots en een meer gestructureerde ervaring dan een proefveld in vrije vorm.
Aviary doet dit goed door te pronken met een time-lapse van hun afbeeldingseditor, waardoor een complexe fotomanipulatie ontstaat.
Een van mijn huidige favoriete implementaties van een homepagina-video van een web-app is Greplin. Hier verschijnt een video wanneer u de pagina laadt, maar als u de video na een paar seconden niet start, verandert deze in een diavoorstelling met schermafbeeldingen.
Peeve: Cartoons die de app nooit laten zien
Om de een of andere reden is het coole om nu te doen een van deze video's samen te voegen als een leuke kleine cartoon. Dit is vaak een geweldig idee, maar het probleem dat ik heb, is dat ik na twee minuten saaie kleine animatie nog steeds weinig tot geen idee heb hoe de app eigenlijk is!
De twee onderstaande video's van Minus en Summify zijn hier goede voorbeelden van. Toegegeven, ze komen er uiteindelijk toe om je bijna een geïllustreerde versie van de app te laten zien, maar alleen aan het einde en zelfs dan is het een klein, abstract kijkje.
Afsluitende gedachten: een recept voor succes
Al het advies in dit artikel is gericht op de twee hoofddoelen voor de startpagina van uw web-app, die we al hebben besproken: onderwijs en verleiding. Verwijder eerst alle rommel uit uw ontwerp en snijd het terug tot de belangrijkste elementen, zodat de bezoeker zich zonder afleiding op de essentiële informatie kan concentreren.
Maak in uw berichten een gewaagde verklaring over wat de app doet en voor wie deze is bedoeld. We hebben dat laatste punt vandaag niet veel besproken, maar er is een sterk argument dat suggereert dat u meer conversies zult winnen door uw doelgroep duidelijk te identificeren. Voorbeeld: "MyCoolWebApp helpt ontwerpers en ontwikkelaars om klant- en projectinformatie te organiseren" is beter dan "MyCoolWebApp organiseert klant- en projectinformatie". Zorg er ook voor dat u wijst op belangrijke functies en waarom bezoekers de app zouden moeten gebruiken.
Zodra uw berichten zijn weggewerkt, is het tijd om u te concentreren op het presenteren van uw product aan uw publiek. Drie geweldige manieren om dit te doen zijn screenshots (meerdere als je het kunt swingen), live voorbeeldaccounts en videotours (het soort dat het product daadwerkelijk laat zien). Het doel van haar is om de hoeveelheid onzekerheid rond uw product te verminderen. Hoe minder onzekerheid, hoe minder gebruikers zullen aarzelen om zich aan te melden.
Dit gaat er natuurlijk allemaal van uit dat u een kwaliteitsproduct heeft. Als uw interface zwak is, verberg deze dan voor het publiek en houd u in plaats daarvan aan saaie, lange beschrijvingen!
