Updated on July 9, 2019
Just how important is your website design? Kun käyttäjiä pyydettiin kuvailemaan, miksi he eivät luota verkkosivustoon, 94% kommenteista liittyi suoraan sivuston suunnitteluun. Hyvin rakennettu verkkosivusto tuottaa parempaa asiakasliikennettä ja parannettu käyttöliittymä johtaa lisääntyneisiin muunnoksiin.
luovuus on tärkeää, mutta on olemassa joitakin suunnittelun ja käyttäjäkokemuksen perussääntöjä, jotka auttavat sinua kasvattamaan verkkosivustoasi. Kun luot tai uudistat sivustosi, pidä seuraavat ehdotukset mielessä.
voita luottamus puhtaalla, mukaansatempaavalla verkkosivujen suunnittelulla
digitaalinen designmaailma on omaksunut yksinkertaisuuden, luopumisen kelloista ja pilleistä ja keskittymisen perusasioihin. Käyttäjänäkökulmasta tämä on helpottanut verkkosivustojen navigointia nautinnollisemman kokemuksen saamiseksi. Sisällyttää nämä 8 suunnittelusäännöt sivustoosi paremmin sitouttaa yleisöä.
1 Pidä asettelu yksinkertaisena.
mitä yksinkertaisempi sivustosi ulkoasu, sen parempi. Se ei tarkoita, että sen pitäisi olla tylsää, mutta se tarkoittaa, että sen pitäisi keskittyä olennaiseen. Puhtaat, toiminnalliset asettelut helpottavat sivustosi lataamista, navigointia ja käyttöä eri alustoilla ja laitteissa.
Harryn nettisivuilla tärkeimmät tiedot-heidän tuotteensa-asetetaan eteen ja keskelle. Ne sisältävät visuaaleja, joissa on vähän tekstiä, jotta sisällön kanssa on helppo sitoutua.
2 helpottaa navigointia.
jos haluat vierailijoiden viettävän aikaa sivustollasi, sinun on tehtävä heidän liikkumisensa helpoksi. Se voi olla houkuttelevaa tehdä jotain luovaa kanssa navigointi valikot suunnittelu, mutta yksinkertaisuus ja intuitiivinen tietoarkkitehtuuri ovat tärkeämpiä. Tee valikot standardin ulkonäkö auttaa lukijoita tuntemaan olonsa mukavaksi, koska ne liikkuvat koko sivuston.
Voguella on kuvailevia, näkyviä navigointivalikoita, jotka auttavat sinua löytämään ja sitoutumaan etsimäsi sisällön tyyppiin.
3 Käytä selkeitä kehotuksia toimintaan.
mitä haluaisit sivuston kävijöiden tekevän? Ostaa tuotteita? Tilaa uutiskirje sähköpostiin? Lahjoita johonkin tarkoitukseen? Mieti kutsujasi toimintaan. Suunnittele ne siten, että ne erottuvat kävijä skannaus sivustosi. Jos käytät muotoilussasi painikkeita, varmista, että teksti on lyhyt ja suora.
Maailman luonnonsäätiö käyttää kirkkaita painikkeita navigointipalkkinsa rinnalla kehottaen vierailijoita ”lahjoittamaan” ja ”adoptoimaan”, sekä voimakkaita kehotuksia toimintaan koko sisällön ajan.
4 sisällöllisesti vähemmän on enemmän.
käytä sitä, mitä tiedät vierailijoistasi, minimoidaksesi heidän vaihtoehtonsa ja keskittääksesi heidän huomionsa tuotteisiisi. Näytä vain teksti ja visuaaliset elementit, joihin haluat heidän ryhtyvän.
mobiilisovellusten verkkosivut-kuten tasku-tekevät tämän kanssa hyvää työtä. Ne keskittyvät selittämään sovelluksen, sisältävät vahvoja kehotuksia toimia asentaa sen. Vähemmän tärkeää sisältöä, kuten niiden About-osio ja blogi ovat vähemmän näkyvästi ja linkitetään alatunnisteessa.
5 Älä pelkää välilyöntejä.
valkoinen tila on yksinkertaisesti tyhjä tila sivulla. Sen ei tarvitse itse asiassa olla valkoinen—sen täytyy vain sisältää tekstiä tai kuvia. Jos tehdään hyvin, se voi parantaa luettavuutta ja poistaa sotkua sivuston suunnittelu. Valkoinen tila voi myös auttaa keskittymään ja keskittymään. Se tarjoaa tavan erottaa ominaisuuksia ja ideoita, jotta kävijät voivat erottaa, mitä haluat heidän näkevän nopealla silmäyksellä, sen sijaan, että heidän pitäisi visuaalisesti lajitella läpi meluisa ja tungosta asettelu.
Google on äärimmäinen esimerkki tyhjämerkkien hyödyntämisestä. Se ei voisi olla puhtaampi—vain tyhjä sivu, jossa on logo ja hakukenttä.
6 Paranna verkkosivujasi huomiota herättävillä väreillä.
Valitse väri, joka luo perustan koko verkkosivustosi suunnittelulle, ja valitse sitten tärkeille painikkeille ja muille käyttöliittymäelementeille vastakkainen korostusväri. Voit oppia lisää oikean väripaletin valitsemisesta brändillesi.
Whole Foods Market käyttää vihreää ensisijaisena merkkivärinään, ja toissijaisen oranssin pienet poksahdukset vetävät katseen kohti toiminnallisia kutsuja.
7 sisältää viehättäviä, helppolukuisia fontteja.
käytä puoleensavetävää tyyppiä, joka on visuaalisesti tasapainoinen ja ainutlaatuinen tehdäksesi verkkosivustosi tekstistä selkeän ja kiehtovan. Neljä trendifonttia ovat Brandon Grotesque, Museo Sans, Railway ja Playfair Display.
belgialainen lastenvaatesivusto Studio Aimee käyttää Brandon groteskia siistiin ja helppolukuiseen ostoskokemukseen.
8 sitouttaa käyttäjiä videoilla ja rikkailla kuvilla.
videot ja kuvat ovat mukaansatempaavampia kuin pelkkä teksti—itse asiassa aloitussivut videoineen voivat lisätä muunnoksia yli 80%. Käytä skaalautuvia kuvia (SVG) varmistaaksesi laadukkaan käyttökokemuksen sekä työpöydällä että mobiililaitteilla.
voittoa tavoittelematon hyväntekeväisyysjärjestö: water näyttää videon heidän kotisivuillaan, tehden siitä yhden ensimmäisistä asioista, jotka näet, kun vierailet heidän verkkosivuillaan maksimaalista vaikutusta varten.
pidä kävijät mukana käyttäjäystävällisellä verkkosivustolla
sinulla voi olla maailman houkuttelevin verkkosivusto, mutta jos se on vaikea käyttää, kävijäsi eivät muutu asiakkaiksi. Nämä seitsemän sääntöä takaavat yleisöllesi sujuvan käyttökokemuksen.
1 Tee sivustostasi mobiiliystävällinen.
Tiesitkö, että jopa 70 prosenttia verkkoliikenteestä tulee mobiililaitteesta? Tämä tarkoittaa, että on olemassa hyvä mahdollisuus, että joku vierailevat sivuston ensimmäistä kertaa käyttää älypuhelinta. Ja jos mobiilikokemus on negatiivinen, olet juuri menettänyt asiakkaan. Lue, miksi ja miten tehdä sivustostasi mobiiliystävällisempi.
Everlanen mobiiliostoskokemus on siisti ja helppokäyttöinen. Suunnittelu sisältää modulaarista sisältöä, joten se on reagoiva ja kääntää hyvin mobiililaitteilla. Sivusto sisältää myös puhelut ladata ostoksia sovellus ilman, että sinusta tuntuu saat vähemmän kokemusta verkkosivuilla.
2 virtaviivaista navigointia.
mitä enemmän sivuja jonkun on navigoitava sivustossasi löytääkseen etsimänsä, sitä todennäköisemmin asiakas jättää sivustosi turhautuneena. Itse asiassa keskimääräiselle verkkosivustolle 40% kävijöistä lähtee nähtyään vain yhden sivun!
sisältöä ei pidä haudata. Älä pakota vierailijoitasi metsästämään sitä, mitä he tulivat hakemaan. Navigoinnin tulee olla hyvin organisoitua ja loogista käyttäjän näkökulmasta. Sen pitäisi myös tuntua tutulta, joten käyttäjillä ei ole jyrkkää oppimiskäyrää.
Tilde Inc. on yksinkertainen navigointipalkki yläreunassa sen verkkosivuilla, jossa tärkeitä kohtia linkitetty alla lyhyt selitys ”mitä teemme” osiossa. Näin on helppo löytää mitä etsit.
3 Käytä kutsuja toimintaan, jotta asioita olisi helpompi löytää.
mieti, mihin voit sijoittaa painikkeita sivustosi eri puolille, jotta tärkeät asiat löytyisivät helpommin. Jos olet verkkokauppasivusto, jossa on painikkeita, joissa lukee ”Shop Now”, on paljon enemmän vaikutusta kuin yksinkertainen navigaatiolinkki; jos olet voittoa tavoittelematon, ”Lahjoita” – painike navigointipalkin rinnalla tekee lahjoittamisesta helppoa vierailijoille.
neliössä on yksinkertainen toimintavalinta, joka kannustaa yrittäjiä aloittamaan myynnin. Heidän CTA-painikkeessaan lukee ” Start a Square account.”Se ei saa paljon helpompaa kuin että.
4 antaa käyttäjille vankat hakuominaisuudet.
on yhtä tärkeää miettiä, miten kävijät hakevat sivustosi ja miten tulokset näkyvät. Hakukokemuksen tulisi peilata navigointikokemustasi siihen, miten tulokset on järjestetty. Sisällyttämällä ominaisuuksia, kuten auto-complete, helpottaa etsimistä myös käyttäjän näkökulmasta.
Zapposilla on älykäs hakutyökalu, joka on erittäin tarkka ja päivittää myös vasemman puolen suodattimet hakusanojen perusteella.
5 keskeytä sisältö osioiden otsikoihin.
kun käsittelet sivustosi sisältöpainotteisia alueita, riko se otsikoilla. Olipa kyseessä artikkeli tai Tuotekuvaus, otsakkeet antavat sisältörakenteesi ja tekevät sen skannaamisesta helppoa.
WebMD tekee tehokasta työtä pilkkomalla niiden sisällön sulaviin paloihin, joissa on runsaasti osioiden otsikoita, jotta voit löytää etsimäsi tiedon.
6 puhu kuin oikea ihminen.
mitä enemmän ammattikieltä ja markkinointia puhuvat käyttäjät joutuvat tulkitsemaan verkkosivuillasi vieraillessaan, sitä epätodennäköisempää on, että he sitoutuvat brändiisi. Ystävällinen, keskusteleva sävy helpottaa kävijöitä lukea ja ymmärtää sisältöä, sekä navigoida sivustossasi.
Zipcar tekee heidän palvelustaan helpomman ymmärtää—ja sivustollaan helpomman navigoida—rennolla brändiäänellään.
7 Vahvista vierailijoiden toimet.
jos vierailijasi ostavat sinulta tuotteen, tilaavat uutiskirjeen tai jopa jakavat sisältöäsi, hyvä käytäntö on näyttää vahvistusnäyttö, joka näyttää heidän toimintansa onnistuneen. Ei ole pahitteeksi käyttää ruutua kiittääkseen heitä.
TheSkimm onnittelee ja toivottaa sinut tervetulleeksi, kun olet kirjautunut heidän uutiskirjeeseensä, kehotus jakaa sosiaalisessa mediassa.
testaa verkkosivustosi ennen julkaisua
on aina ongelmia, jotka sinun täytyy selvittää, kun käynnistät—tai käynnistät uudelleen—verkkosivuston. On tärkeää ottaa aikaa testata sivuston ja kerätä palautetta ennen kuin se menee live.
1 Suorita laadunvarmistustestejä (quality assurance, QA).
jos sinulla on resursseja, palkkaa laadunvarmistustiimi, jotta he voivat testata sivustosi kaikkia puolia. Jos et voi palkata ihmisiä erityisesti laadunvarmistus rooli, sitten on ihmisiä sekä sisäisiä että ulkoisia yrityksesi testata sivuston ennen käynnistämistä. He voivat klikata kaikkia linkkejä, täyttää kaikki lomakkeet ja kokeilla kaikkia palveluita. Periaatteessa, jos nettisivuilla on jotain tekemistä, heidän pitäisi tehdä se. Näin voit korjata mahdolliset viat ennen laukaisua.
2 Kerää käyttäjäpalautetta ennen kuin työnnät sivustosi suorana.
kutsu valikoitu ryhmä beetatestaajia antamaan palautetta esimerkiksi navigoinnista, suunnittelusta ja suurista käyttäjävirroista. Et välttämättä tee muutoksia ennen julkaisua saamasi palautteen perusteella, mutta haluat ehkä pitää mielessä ehdotukset muutoksista tiellä.
verkkosivuston luominen tyhjästä—vaikka olisit värvännyt viraston auttamaan-ei ole mikään pieni saavutus. Olemme luoneet kätevä 3 vaiheet luoda mukaansatempaava Verkkosivujen suunnittelu (PDF) tarkistuslista, joten voit varmistaa, että olet tarkistaa kaikki tärkeät kohteet pois luettelosta kuin mennä.