Verkkosivujen suunnitteluperiaatteet jotka toimivat
Suuri osa verkkosuunnittelusta sanotusta on mieltymys esitettynä periaatteena. On kuitenkin pieni joukko sääntöjä, jotka kestävät käytännössä ja jotka huomaa kun ne puuttuvat.
Tämä opas käy ne läpi, mitä kukin ratkaisee ja miten tarkistat että sitä noudatetaan.
Hierarkia: sanoa mikä on tärkeintä#
Hierarkia on periaate, joka eniten vaikuttaa siihen ymmärtävätkö ihmiset sivun, ja helpoin tarkistaa.
- Yksi asia on tärkein jokaisessa näkymässä. Jos niitä on kolme, kävijä ei valitse yhtään.
- Koko, paksuus ja ympärillä oleva tila viestivät tärkeyttä paremmin kuin väri.
- Päätoiminnon pitää erottua visuaalisesti kaikesta muusta sivulla.
- Ryhmittele toisiinsa liittyvät läheisyydellä; etäisyys viestii erillisyyttä.
- Älä käytä enempää kuin kahta tai kolmea otsikkotasoa. Useampia ei enää lueta hierarkiana.
- Testaa siristämällä: se mikä pysyy luettavana, on se minkä ihmiset näkevät ensin.
Siristystesti kestää viisi sekuntia ja nappaa useimmat hierarkiaongelmat.
Tila, kontrasti ja luettavuus#
Kolme mitattavaa asiaa, jotka erottavat mukavat sivut väsyttävistä.
| Elementti | Käytännön sääntö | Yleinen virhe |
|---|---|---|
| Rivin pituus | 60–80 merkkiä | Rivit koko näytön leveydellä |
| Leipätekstin koko | 16 pikseliä tai enemmän mobiilissa | 14 pikseliä «jotta mahtuu enemmän» |
| Riviväli | 1,5 leipätekstissä | Tiukka riviväli, tiivis palkki |
| Tekstin kontrasti | Vähintään 4,5:1 | Vaaleanharmaa valkoisella |
| Tila osioiden välissä | Antelias ja johdonmukainen | Kaikki liimattu yhteen, ei ilmaa |
| Kosketuskohteet | Vähintään 44 pikseliä | Pienet linkit mobiilissa |
| Kirjasinten määrä | Yksi tai kaksi | Neljä kirjasinta yhdellä sivulla |
Johdonmukaisuus ja selkeys#
Johdonmukaisuus antaa ihmisten oppia sivuston kerran sen sijaan että he oppisivat sen uudelleen joka sivulla.
- Sama elementti käyttäytyy aina samalla tavalla koko sivustolla.
- Saman painoarvon painikkeet näyttävät aina samalta.
- Linkit tunnistaa linkeiksi ilman hiiren viemistä päälle.
- Nimikkeet kertovat mitä tapahtuu: «Pyydä tarjous» eikä «Lähetä».
- Kirjoita asiakkaan kielellä, ei sisäisellä kielellä.
- Lomakevirheet näkyvät kentän kohdalla ja kertovat miten ne korjataan.
- Elementit joita ei voi klikata, eivät saa näyttää klikattavilta.
Nimikesääntö tuottaa eniten: «Lähetä» vaihtaminen «Pyydä tarjous» -muotoon nostaa konversiota ilman että mikään muu muuttuu.
Mikä on makuasia eikä periaate#
Toistuvia sääntöjä, jotka eivät kestä dataa vasten ja jotka maksavat aikaa keskusteluina.
| Väite | Todellisuus |
|---|---|
| Kaiken pitää olla taitteen yläpuolella | Ihmiset vierittävät; selkeys merkitsee enemmän |
| Vähemmän klikkauksia on aina parempi | Oikeat klikkaukset voittavat harvat klikkaukset |
| Karuselli etusivulla on pakollinen | Vuorovaikutus on tyypillisesti hyvin vähäistä |
| Minimalismi on aina parempi | Liian vähän kontekstia vaikeuttaa päätöstä |
| Älä koskaan avaa linkkejä uuteen ikkunaan | Riippuu kontekstista; dokumentit ovat poikkeus |
| Punainen on aggressiivinen | Riippuu täysin toimialasta ja kulttuurista |
| Sivun pitää olla omaperäinen | Tuttuus auttaa käyttämisessä |
Tutut mallit eivät ole luovuuden puutetta: ne ovat syy siihen, että ihmiset osaavat käyttää sivustoa jota eivät ole koskaan nähneet.
Usein kysytyt kysymykset
Konvertoiko kaunis sivusto paremmin?
Selkeä sivusto konvertoi paremmin; estetiikka auttaa uskottavuuden kautta ensimmäisinä sekunteina. Estetiikka epäonnistuu, kun se kilpailee ymmärtämisen kanssa — viivyttävät animaatiot, matala kontrasti eleganssin nimissä, luovat nimikkeet joita kukaan ei ymmärrä. Selkeys ensin, estetiikka selkeyden palveluksessa.
Montako väriä pitäisi käyttää?
Yksi brändiväri, yksi korostusväri toiminnoille ja harmaasävyasteikko. Sen jälkeen jokainen lisäväri vaatii toiminnallisen perustelun — virhe-, onnistumis- ja varoitustilat. Suuret paletit vaikeuttavat tärkeän korostamista, koska kaikki kilpailee kaiken kanssa.
Pitäisikö seurata suunnittelutrendejä?
Kohtuudella. Trendit vanhentavat sivuston ja pakottavat uudistuksiin esteettisistä eikä toiminnallisista syistä. Hyvin vanhenee selkeä typografia, antelias tila ja vankka hierarkia — periaatteet joilla on vuosikymmeniä ikää. Ota trendejä käyttöön siellä missä ne on halpa perua, ja vältä niitä rakenteessa.
Mistä tiedän toimiiko suunnitelmani?
Katso käyttäytymistä: pääsevätkö ihmiset päätoimintoon vai poistuvatko he? Missä he jumittuvat lomakkeissa? Istuntotallenteet ja lomakeanalyysi näyttävät tämän minuuteissa. Sisäinen mielipide estetiikasta on huonoin käytettävissä oleva mittari, koska tiimi näkee sivuston päivittäin ja kävijät kerran.
verkkosivujen suunnitteluperiaatteetvisuaalinen hierarkialuettavuus verkossatekstin kontrastisivuston käytettävyysulkoasu ja konversio
