Veebirakenduse kodulehe kujundamine: näited, näpunäited ja näpunäited
Veeb on täiesti üleküllastunud rakendustega, mis aitavad teil luua ühenduse sotsiaalse võrgustikuga, koostada toidupoe nimekirju, hallata suuri projekte, otsustada, kes tee valmistab ja kõiki muid hullumeelseid ülesandeid, mida võite ette kujutada.
Kuidas saate kogu selle võistluse korral veenda külastajaid, et teie rakendus on vanasõna nõela heina hulgas? Täna vaatame mõnda tõelist näidet, et teada saada, kas saame teada, milliseid strateegiaid jäljendada ja milliseid vältida.
Teie rakenduse koduleht on äärmiselt oluline
Veebirakenduse loomiseks olete kulutanud palju aega, raha ja vaeva. See on tipptasemel ettevõtmine, millega kindlasti hakkama saada nagu kulutulena. Seal on ainult üks saak, peate inimesi veenma seda proovima.
Pole tähtis, kui hea teie veebirakendus on, peab teil siiski olema kindel müügitaktika, mis veenab inimesi klõpsama nupul „registreeruma”. Isegi kui teenus on täiesti tasuta ja pakub palju funktsioone, peate tõesti nende konversioonide võitmiseks vaeva nägema.
Ärge kunagi eeldage, et kasutaja on just teie kodulehele jõudnud, et ta on teie pakutavast tõeliselt huvitatud ja seetõttu on vaja kaugemale minemiseks vaid väikest viha. Koefitsiendid on see, et nad järgisid mingit seost, vaid ainult ebamäärase ettekujutusega sellest, kuhu nad jõuavad, ja on õrnas staadiumis, kus nad tõenäoliselt kolivad mõne sekundi jooksul teisele saidile, kui te neid ei tõmba.
Teie veebirakenduse koduleht on üks teie kõige väärtuslikumaid turundustööriistu. Pidage vastu soovile lihtsalt midagi kiiresti rüübata ja pange selle asemel pingutama. Vaatame mõnda näidet, et näha, mida me saame õppida.
Näpunäide. Hoidke kujundus lihtne ja sõnum tugev
Meie esimene näide pärineb uuest teenusest nimega Kroud. Vaatame voldi kohal olevat saidi osa.
Selle lehe juures on palju, mis mulle meeldib. Esiteks on see väga lihtne ja keskendunud. See ei uputa teid tühjade väidetega selle kohta, kuidas teenus teie elu muudab, ega ka põrmugi ümber selle saidi kohta. Pole midagi hullemat kui leht, mis ei määratle end hästi. Kui ma ei saa öelda, mida teie rakendus viie sekundiga teeb, liigun edasi.
Kroud naelutab ülesande siduda kompleksne teenus selgeks sõnumiks, mis on ka tugev üleskutse tegevusele: “Looge sekunditega interaktiivne KKK leht.” See rida on üks esimesi asju, mida ma lehe laadimisel näen ja see annab kohe edasi seda, mida sait teeb.
Suur nupp
Teine asi, mida me Kroudilt õppida saame, on see, et suured, julged registreerumisnupud on hea asi! Siin on Kroudi nupp tegelikus suuruses.
See nupp on tohutu ja väga selge selle kohta, mis juhtub selle vajutamisel: “Start a Kroud” koos teisesõnumiga “See on tasuta!”. Pange tähele, kuidas see nupp teie tähelepanu köidab mitte ainult suuruse, vaid ka värviga. See on teistsugusest sisust nii palju heledam, et teie pilgud tõmmatakse sellele kohe.
Näpunäide: ekraanipildid on kohustuslikud!
Teie veebirakenduse avalehel on kaks peamist eesmärki: õpetada inimesi teie tootele ja veenda neid seda proovima. Need on samad eesmärgid, mida näete turunduses ja reklaamis peaaegu kõigil planeedi ettevõtetel.
Kujutage ette ajakirjakuulutust või uue Corvette'i veebisaiti. Kuidas see leht teie arvates välja näeks? Võimalikke disainilahendusi on miljon, kuid üks asi püsib tõenäoliselt muutumatuna: näeksite autot. Corvettel on hea disaini pärand ja nad teavad, et parim viis oma uusima feat välja näidata on näidata fotot sellest kogu oma hiilguses. Kes võiks veenduda sportauto ostmises ilma seda isegi nägemata? See oleks veelgi enam juhul, kui sportauto ei oleks Corvette, vaid hoopis midagi sellist, millest keegi pole kunagi kuulnud.
See toimib teie veebirakenduse avalehe metafoorina. Veebirakendusi on peenraha tosin ja keegi pole teie seast kunagi kuulnud. Kui teil pole häbi oma kehvade kujundamisoskuste pärast, tahavad inimesed enne registreerumiseks aega näha, kuidas teenus täpselt välja näeb.
Freckle'i inimesed teavad seda hästi ja otsustasid oma lehe ülaosale lisada viie ekraanipildiga.
Ehkki mõned neist on kaetud suure osaga, annab pilt tervikuna teile korraliku ülevaate teenuse väljanägemisest.
Funktsioonid ekraanipiltidena
Veebirakenduse avalehe kujunduse praegune trend on näidata oma kodulehe funktsioone väikeste ikoonidega. See on suurepärane idee, mis tõstab tõepoolest lehe esteetilist väärtust ja aitab purustada suured koopiaplokid. Siin on näide Ballparki arveldusest.
Ehkki ikoonid on paremad kui tekst, arvan ma, et kui teil on tõepoolest kindel liides, siis võivad ekraanipildid olla palju tugevam visuaalne element. Ekraanipildid edastavad teie teenust otse, samas kui üldised ikoonid kujutavad endast ainult abstraktset kujutist sellest, mida kasutajad võivad oodata. Vaadake, kuidas Freckle nende omadusi arutab.
Vaadake, kuidas siinset sõnumsidet tugevdab pilt sellest, milline see rakenduses välja näeb? Seda suundumust näen viimasel ajal üha enam ja arvan, et see on hea, mis tõepoolest parandab eelmise põlvkonna veebirakenduste ikooniideed.
Teise näitena näitab TodayPulse ekraanipiltide horisontaalsel ribal kolme peamist funktsiooni:
Peeve: ekraanipilte pole
Võite arvata, et ekraanipildid on üsna lihtsad ja keegi ei vaja seda meeldetuletust, kuid tõsi on see, et leidub lugematu arv veebirakenduse avalehti, mis ei anna teile vähimatki vihjet selle kohta, kuidas rakendus tegelikult välja näeb.
Isegi kui need lehed on üsna atraktiivsed, nagu Wordfaire allpool, on tõenäosus, et ma seda proovin, palju vähem, kuna ma ei näe eelvaadet.
Vana kõnekäänd „pilt on väärt tuhat sõna” osutub sellel areenil tõepoolest tõeseks. Lihtsalt pole võimalust lugeda Wordfaire'i kodulehe teksti seitset lõiku. Ma vahetaksin neist vähemalt viis ekraanipilti ilma teise mõtteta.
Näpunäide: laske kasutajatel mängida reaalajas näitega
Mõiste „proovige enne ostmist” on eksisteerinud alates müügimehe koidikust. See on lihtne kontseptsioon, mis püsib nii kaua, kui on olemas tooteid. Kohustused imevad, eriti kui sellega on seotud ebakindlust. Lastes kasutajal kõigepealt teie veebirakendust proovida, kaob ebakindlus.
Äärmiselt oluline on meeles pidada, et “proovida enne ostmist” kehtib isegi tasuta teenuste kohta! See tundub segane, kuid tegelikult on see üsna lihtne. Isegi tasuta teenus kulutab minu aega - ressurss, mis on minu jaoks üsna väärtuslik ja ei tegele ainult millegi ostmisega. Tasuta veebiteenuse kasutajaks registreerumine on endiselt kohustus; sellist, mida ma ei taha valmistada, kui pole tõesti kindel, et see toode mulle meeldib.
Kontseptsioon on lihtne. Looge viis, kuidas kasutajad saavad teie rakenduse rehve näpistada ja rehve lüüa, ilma et sisestaksite ühte natuke teavet. Näeme seda Pen.io jaoks allpool. See on veel üks leht ilma ekraanipiltideta, kuid selle muudab mõnevõrra paremaks, kui lisada link näitele, nii et näete, mida teenusest saate.
Jällegi on tore, et Pen.io sisaldab seda, kuid Horudis on teostus tugevam, kui linki eksamilehele tugevdab eelvaade.
Peeve: Pikad ekskursioonid
Mõni veebirakendus viib teid kümne minutilisele ekskursioonile, mis selgitab nende teenust väga detailselt. Ärge saage minust valesti aru, teave on hea ja kui maksan teenuse eest, siis soovin seda. Kuid kas “tootetuur” peaks tõesti olema nii töömahukas?
Kui klõpsan lingil, mille pealkiri on „Tutvu ringkäiguga”, siis tahan seda tegelikult näha rakenduse näol. Elav näide, nagu me arutasime lihtsalt palju tugevamalt kui 2000 sõnaga, selgitades, mis see saab olema, kui jõuate lõpuks punkti, kus teil on lubatud seda tegelikult proovida. Mõni sait loob isegi modifitseeritud nutika reaalajas näite, mis juhendab teid kogu protsessis. See on suurepärane võimalus lasta kasutajatel teie teenust proovida, tagades samal ajal, et saavad asjast aru ja näevad, mida soovite.
Jällegi ei ole tingimata halb oma funktsioonide kallal käia, kuid pidage meeles, et oluline on võimaldada kasutajatel lihtsalt sisse hüpata ja näha, mida nad arvavad.
Kaasa video
Veel üks idee veebirakenduse näitamiseks on lühikese video lisamine otse kodulehele. Kui pilt on väärt tuhat sõna, on üks minut kiirusega 15-30 kaadrit sekundis hindamatu! Video täidab sama eesmärki nagu näide ja ekraanipildid, ainult see on dünaamilisem kui ekraanipildid ja struktureeritum kogemus kui vabas vormis testimiskoht.
Aviary teeb selle heaks ära, näidates nende pildiredaktorile ajaliselt keerulist fototöötlust.
Üks minu praegusi veebirakenduse avalehe video lemmikrakendusi on Greplin. Siin ilmub video, kui laadite lehe, kuid kui te ei alusta videot mõne sekundi pärast, muutub see ekraanipiltide slaidiseansiks.
Peeve: koomiksid, mis ei näita kunagi rakendust
Mingil põhjusel on praegu lahe teha üks neist videotest ühe toreda väikese koomiksina. See on sageli suurepärane idee, kuid mul on probleemiks see, et pärast kaheminutilist igavat väikest animatsiooni on mul ikkagi vähe aimugi, mis rakendus see tegelikult on!
Kaks allpool olevat videot Minusest ja Summifyst on selle head näited. Tõepoolest, nad saavad lõpuks peaaegu teile rakenduse illustreeritud versiooni kuvada, kuid alles selle lõpus ja isegi siis on see väike, abstraktne pilk.
Mõtte lõpp: edu retsept
Kõik selle artikli nõuanded on suunatud teie veebirakenduse avalehe kahele peamisele eesmärgile, millest me juba arutanud oleme: haridus ja ahvatlus. Esiteks, eemaldage kõik segadused oma kujundusest ja peenestage need kõige olulisemate elementide juurde, et külastaja saaks keskenduda elutähtsale teabele ilma tähelepanu kõrvale.
Avaldage oma sõnumites paks kirjeldus selle kohta, mida rakendus teeb ja kellele see on mõeldud. Me ei arutanud seda viimast punkti täna kuigi palju, kuid on olemas tugev argument, mis soovitab arvata, et saate oma sihtrühma selgelt määratledes rohkem konversioone. Näide: „MyCoolWebApp aitab disaineritel ja arendajatel kliendi- ja projektiinfot korraldada” on parem kui „MyCoolWebApp korraldab kliendi- ja projektiinfot”. Samuti osutage kindlasti olulistele funktsioonidele ja sellele, miks külastajad rakendust peaksid kasutama.
Kui olete oma sõnumivahetuse ruudud ära saanud, on aeg keskenduda oma toote vaatajaskonnale esitlemisele. Kolm suurepärast viisi selleks on ekraanipildid (mitu, kui saate seda pöörata), reaalajas näidiskontod ja videoreisid (sellised, mis toodet tegelikult näitavad). Tema eesmärk on vähendada teie toodet ümbritsevat ebakindlust. Mida vähem ebakindlust on, seda vähem kasutajad kõhklevad registreerumist.
See kõik muidugi eeldab, et teil on kvaliteetne toode. Kui teie liides on hale, peidake see kindlasti avalikkuse eest ja pidage kinni igavatest, pikkadest kirjeldustest!
