Designe et webapps hjemmeside: eksempler, tips og peeves
Nettet er fullstendig mettet av apper som hjelper deg å få kontakt med et sosialt nettverk, lage dagligvarelister, administrere store prosjekter, bestemme hvem som skal lage te og alle andre sprø oppgave du kan forestille deg.
Hvordan kan du med all denne konkurransen overbevise besøkende om at appen din er den ordspråklige nålen blant høyet? I dag skal vi se på noen virkelige eksempler for å se om vi kan lære hvilke strategier vi skal etterligne og hvilke vi kan unngå.
Hjemmesiden til appen din er ekstremt viktig
Du har brukt massevis av tid, penger og krefter på å lage en webapplikasjon. Det er en førsteklasses satsning som du er sikker på at vil fange på som en fyrbål. Det er bare en fangst, du må overbevise folk om å prøve det.
Uansett hvor god web-appen din er, må du fremdeles ha solide salgstaktikker som til slutt overbeviser folk om å klikke på "påmeldingsknappen". Selv om tjenesten er helt gratis og tilbyr massevis av funksjoner, må du virkelig jobbe for å vinne disse konverteringene.
Aldri anta at bare fordi en bruker har landet på hjemmesiden din, at de virkelig er interessert i hva du har å tilby, og at de derfor bare trenger en liten pute for å komme videre. Oddsen er at de fulgte noen koblinger med bare en vag forestilling om hvor de ville havnet og befinner seg i et delikat stadium der de sannsynligvis vil flytte inn på et annet sted i løpet av sekunder hvis du ikke drar dem inn.
Hjemmesiden til webappen din er et av de mest verdifulle markedsføringsverktøyene dine. Motstå trangen til å bare cobble noe raskt sammen og i stedet legge frem din aller beste innsats. La oss se på noen eksempler for å se hva vi kan lære.
Tips: Hold designen enkel og meldingen sterk
Vårt første eksempel kommer fra en ny tjeneste som heter Kroud. La oss ta en titt på delen av siden over brettet.
Det er mye jeg liker med denne siden. For det første er det veldig enkelt og fokusert. Det overvelder deg ikke med tomme påstander om hvordan tjenesten vil forandre livet ditt, og slår heller ikke rundt busken om hva nettstedet er. Det er ingenting som er verre enn en side som ikke definerer seg godt. Hvis jeg ikke kan fortelle hva appen din gjør på fem sekunder, går jeg videre.
Kroud spikrer virkelig oppgaven med å relatere en kompleks tjeneste til en klar melding som også fungerer som en sterk handlingsfremmende handling: "Lag en interaktiv FAQ-side på sekunder." Den linjen er noe av det første jeg ser når jeg laster inn siden, og den formidler umiddelbart nøyaktig hva nettstedet gjør.
Den store knappen
En annen ting vi kan lære av Kroud er at store, dristige påmeldingsknapper er en god ting! Her er Kroud-knappen i faktisk størrelse.
Denne knappen er enorm og veldig tydelig om hva som skjer når du trykker på den: “Start a Kroud”, med den sekundære meldingen, “Det er gratis!”. Legg merke til hvordan denne knappen vekker oppmerksomheten med ikke bare størrelse, men også farge. Det er så mye lysere enn det andre innholdet at øynene dine umiddelbart blir trukket til det.
Tips: Skjermbilder er et must!
Hjemmesiden til webappen din har to hovedmål: å lære folk om produktet ditt og overbevise dem om å prøve det. Dette er de samme målene du ser innen markedsføring og reklame fra nesten alle selskaper på planeten.
Se for deg et bladannonse eller et nettsted for en ny Corvette. Hvordan tror du at siden ville sett ut? Det er en million mulige design, men en ting vil sannsynligvis holde seg konstant: du vil se bilen. Corvettes har en arv av god design, og de vet at den beste måten å vise frem deres siste bragd er å vise deg et fotografi av det i all sin prakt. Hvem kan være overbevist om å kjøpe en sportsbil uten en gang å se den? Dette vil være enda mer tilfelle hvis sportsbilen ikke var en Corvette, men i stedet noe som ingen noen gang hadde hørt om.
Dette fungerer som en metafor for hjemmesiden til webappen din. Nettapper er et krone et dusin, og ingen har noen gang hørt om deg. Med mindre du skammer deg over dine dårlige designferdigheter, vil folk se nøyaktig hvordan tjenesten kommer til å se ut før de tar seg tid til å registrere seg.
Folkene på Freckle vet dette godt og valgte å toppe siden med en rekke fem skjermbilder.
Selv om store deler av noen av disse er dekket, gir bildet som helhet deg virkelig et anstendig glimt av hvordan tjenesten ser ut.
Funksjoner som skjermbilder
Den nåværende trenden i design av websider for hjemmesider er å vise frem funksjonene på hjemmesiden din med små ikoner. Dette er en god ide som virkelig øker den estetiske verdien på siden og hjelper til med å bryte opp store blokker med kopi. Her er et eksempel fra Ballpark Fakturering.
Selv om ikoner er bedre enn tekst, i tilfelle der du virkelig har et solid grensesnitt, tror jeg faktisk at skjermbilder kan være et mye sterkere visuelt element. Skjermbilder kommuniserer tjenesten din direkte mens generiske ikoner bare presenterer en abstrakt representasjon av hva brukerne kan forvente å se. Sjekk hvordan Freckle diskuterer funksjonene deres.
Se hvordan meldingene her forsterkes av et bilde av nøyaktig hvordan dette vil se ut i appen? Dette er en trend som jeg ser mer og mer i det siste, og jeg synes det er bra som virkelig forbedrer ikonideen til den forrige generasjonen webapper.
Som et annet eksempel viser TodayPulse tre av de viktigste funksjonene i en horisontal stripe av skjermbilder:
Peeve: Ingen skjermbilder
Du synes kanskje at skjermbilder er ganske grunnleggende og at ingen trenger denne påminnelsen, men sannheten er at det er utallige hjemmesider for web-apper som ikke gir deg det minste antydningen til hvordan appen faktisk ser ut.
Selv om disse sidene er ganske attraktive, som Wordfaire nedenfor, er sjansen for at jeg prøver det mye mindre bare fordi jeg ikke kan se en forhåndsvisning.
Det gamle ordtaket "et bilde er verdt tusen ord" viser seg virkelig å være på denne arenaen. Det er ganske enkelt ingen måte å lese de syv avsnitt av tekst på hjemmesiden til Wordfaire. Jeg ville handlet minst fem av dem for et skjermbilde uten en ny tanke.
Tips: La brukere spille med et liveeksempel
Konseptet “prøve før du kjøper” har eksistert siden selgerens morgen. Det er et enkelt konsept som vil vedvare så lenge det finnes produkter. Forpliktelser suger, spesielt når det er usikkerhet involvert. Ved å la en bruker prøve webappen din først, blir usikkerheten tatt bort.
Det er ekstremt viktig å huske på at "prøve før du kjøper" til og med gjelder gratis tjenester! Dette virker forvirrende, men det er egentlig ganske enkelt. Selv en gratis tjeneste spiser opp tiden min, en ressurs som jeg synes er ganske verdifull og ikke vil bytte for bare noe. Å registrere deg for en gratis webtjeneste føles fortsatt som en forpliktelse; en som jeg ikke vil lage med mindre jeg virkelig er sikker på at jeg vil like produktet.
Konseptet er enkelt, lag en måte som brukere kan pirke rundt og sparke dekkene til appen din uten å legge inn en eneste bit informasjon. Vi ser dette i aksjon nedenfor for Pen.io. Dette er en annen side uten skjermbilder, men er gjort litt bedre ved å legge inn en lenke til et eksempel, slik at du kan se hva du får fra tjenesten.
Igjen, det er flott at Pen.io inkluderer dette, men utførelsen er sterkere tilbake på Kroud der lenken til eksemplet siden er forsterket av en forhåndsvisning.
Peeve: lange turer
Noen nettapper tar deg med på en ti minutters utflukt som forklarer tjenesten deres i detalj. Misforstå ikke, informasjonen er god, og hvis jeg betaler for en tjeneste, vil jeg ønske den. Men bør en "produktturné" virkelig være så arbeidsintensiv?
Hvis jeg klikker på en kobling som sier “Ta en tur”, er det jeg virkelig vil se appen. Et levende eksempel som vi nettopp diskuterte i mye sterkere enn 2000 ord som forklarte hvordan det vil være når du endelig kommer til det punktet der du har lov til å prøve det. Noen nettsteder bygger til og med et modifisert "smart" liveeksempel som leder deg gjennom prosessen. Dette er en flott måte å la brukere prøve ut tjenesten din, samtidig som de virkelig sørger for at de får poenget og se hva du vil at de skal.
Igjen, det er ikke nødvendigvis ille å glede seg over funksjonene dine, men husk at det er viktig å la brukere bare hoppe inn og se hva de synes.
Ta med en video
En annen idé for å vise frem nettappen din i aksjon er å inkludere en kort video rett på hjemmesiden. Hvis et bilde er verdt tusen ord, er et minutt med 15-30 bilder per sekund uvurderlig! En video oppnår det samme målet som eksemplet og skjermbilder, bare det er mer dynamisk enn skjermbilder og en mer strukturert opplevelse enn en testform.
Aviary gjør en god jobb med dette ved å vise frem et tidsrom for bildeditoren deres og skaper en kompleks fotomanipulasjon.
En av mine nåværende favorittimplementeringer av hjemmesiden til en webapp er Greplin. Her dukker det opp en video når du laster inn siden, men hvis du ikke starter videoen etter noen sekunder, blir den til en lysbildefremvisning av skjermbilder.
Peeve: Tegneserier som aldri viser appen
Av en eller annen grunn er den kule tingen å gjøre akkurat nå å kaste sammen en av disse videoene som en morsom liten tegneserie. Dette er ofte en god ide, men problemet som jeg har er at etter to minutter med litt kjedelig liten animasjon har jeg fortsatt liten eller ingen anelse om hvordan appen faktisk er!
De to videoene nedenfor fra Minus og Summify er gode eksempler på dette. Gitt, de kommer etter hvert til å nesten vise deg en illustrert versjon av appen, men bare helt på slutten og til og med da, er det en liten, abstrakt titt.
Lukkende tanker: En oppskrift for å lykkes
Alle rådene i denne artikkelen er rettet mot de to hovedmålene for hjemmesiden til webappen din, som vi allerede har diskutert: utdanning og lokkelse. Først må du fjerne alt rotet fra designet ditt og hvitle det ned til de viktigste elementene slik at besøkende kan fokusere på viktig informasjon uten distraksjoner.
Send meldinger om hva appen gjør og hvem den er til for i meldinger. Vi har ikke diskutert det siste punktet så mye i dag, men det er et sterkt argument som antyder at du vil vinne flere konverteringer ved å tydelig identifisere målgruppen. Eksempel: "MyCoolWebApp hjelper designere og utviklere med å organisere klient- og prosjektinformasjon" er bedre enn "MyCoolWebApp organiserer klient- og prosjektinformasjon". Sørg også for å peke på viktige funksjoner og hvorfor besøkende bør bruke appen.
Når du har fått meldingene dine kvadrert, er det på tide å fokusere på å presentere produktet for publikum. Tre gode måter å gjøre dette på er skjermbilder (flere hvis du kan svinge det), live-eksempelkontoer og videoturer (den typen som faktisk viser produktet). Målet hennes er å redusere usikkerheten rundt produktet ditt. Jo mindre usikkerhet det er, desto mindre vil brukerne nøle med å registrere seg.
Dette forutsetter selvfølgelig at du har et kvalitetsprodukt. Hvis grensesnittet ditt er halt, kan du for all del skjule det for publikum og hold deg til kjedelige, lange beskrivelser i stedet!
