Kymmenen vuotta sitten monet internetin käyttäjät kävivät kärsimättömänä Smashing Magazinessa lukeakseen uusimpia web-suunnitteluartikkeleita. Monet todelliset web-suunnittelijat löysivät intohimonsa verkkosivustojen luomiseen näiden viestien kautta. Se oli aikaa, jolloin web-suunnittelun periaatteet määrittelivät tuottavan keskustelun suunnittelijoiden – sekä aloittelijoiden että asiantuntijoiden – kesken.
Nykyään suunnittelun periaatteista keskustellaan huomattavasti vähemmän. Onko intohimo hyvään suunnitteluun kuollut? Uskon, että suunnittelijoilla, bloggaajilla ja kehittäjillä ei ole enää aikaa näille keskusteluille.
Meillä on pääsy niin moniin verkkosivustojen rakentajiin, sivustopohjiin, sisällönhallintajärjestelmiin (CMS) ja muihin työkaluihin verkkosivustojen luomiseen. Vaihtoehtojen runsauden vuoksi luomme yhä enemmän sivustoja, mutta jätämme huomiotta niiden suunnittelun.
Uskon, että jokainen tarvitsee ajoittain päivitystä web-suunnittelun perusteista. Tutustu näihin ideoihin!
Yksinkertaisuus suunnittelussa
Oletko kyllästynyt lukemattomiin blogikirjoituksiin, joissa korostetaan yksinkertaisuuden seksikkyyttä? Se on täysin ymmärrettävää. Mutta karu todellisuus on, että 99 % sivustoista on enemmän tai vähemmän täynnä hyödyttömiä elementtejä.
Verkkosivustojen omistajat haluavat auttaa käyttäjiä tarjoamalla mahdollisimman paljon tietoa mahdollisimman pienessä tilassa. Heidän on kuitenkin löydettävä makea paikka, koska liian paljon dataa ärsyttää katsojia. Verkkosuunnittelu on osa tiedettä, osa taidetta!
Toisin kuin kymmenen vuotta sitten, jolloin älypuhelimia käytti vain pieni osa väestöstä, mobiilikäyttäjiä on nyt enemmän kuin pöytätietokoneiden käyttäjiä. Tässä yhteydessä yksinkertaisuus on vielä tärkeämpää. Yksinkertainen asettelu latautuu nopeammin eikä ärsytä käyttäjiä.
Yksinkertaisuus kulkee käsi kädessä latausnopeuden kanssa. Nykyään nopea lataussivusto on pakollinen. Älä unohda Steve Jobsin teoriaa – suunnittelu ei ole sitä miltä se näyttää, vaan miten se toimii.
Tarkista jokainen sivustosi kohde. Onko se tarpeetonta? Jos on, poista se. Onko se jotenkin tarpeellista? Jos on, poista se. Onko se tarpeellista? Jos on, poista se! Onko se erittäin tarpeellista? Jos on, pidä se!
Älä pakota käyttäjiä ajattelemaan
Steve Krug kirjoitti tällä nimellä kirjan vuonna 2000, ja suunnittelijat arvostivat sitä suuresti. Krugin oivallukset ovat päteviä nytkin, lähes kaksi vuosikymmentä myöhemmin. Hyvä web-suunnittelija ei saa käyttäjiä ajattelemaan. Ja tämä ajatus ei loukkaa käyttäjiä.
Ihmisten keskittymiskyky on lyhyempi kuin kultakalalla ! Keskimääräinen ihmisen keskittymiskyky oli 12 sekuntia vuonna 2002 ja vain kahdeksan sekuntia vuonna 2012. Nykyään sinulla on todennäköisesti alle kahdeksan sekuntia vakuuttaa käyttäjät sivustosi hyödyllisyydestä.
On mahdollista, että yksinkertainen asettelu ei saa käyttäjiä ajattelemaan, mutta huomioon on otettava monia muita näkökohtia. Aloita tasosta, joka on skannattavissa – käyttäjät skannaavat, eivät lue. Varmista, että iskulauseesi ja tunnuslauseesi ovat helposti havaittavissa. Ihmisten pitäisi tietää, minne he ovat laskeutuneet ja verkkosivun tarkoitus heti ensimmäisestä sekunnista lähtien.
Sivuston arkkitehtuurin pitäisi antaa käyttäjien siirtyä kotisivulta mille tahansa sivulle alle kolmella napsautuksella. Kaikki lisäklikkaukset herättävät kysymyksiä. Mitä enemmän käyttäjällä on kysymyksiä, sitä heikommalta sivusto näyttää.
Visuaalinen hierarkia
Kaikki verkkosivulla oleva ei ole yhtä tärkeää. Kerro ihmisille, mikä on vahvin viestisi hyödyntämällä visuaalista hierarkiaa. Tästä syystä toimintakehotuspainikkeen tulee olla iso, lihavoitu ja sijoitettava sellaiseen paikkaan, että se kiinnittää huomion välittömästi.
Visuaalinen hierarkia saavutetaan sijoittelun, koon ja värin avulla. Suunnittele asettelu pitäen mielessä, että ihmiset yleensä skannaavat verkkosivun "F"- tai "Z"-kuviolla .
Myös isommat web-sivuelementit liittyvät tärkeämpiin rooleihin. On järkevää olla iso tunnuslause, eikö niin?
Lopuksi värit muokkaavat myös visuaalista hierarkiaa, minkä vuoksi hyvä toimintakehotuspainike on voimakkaassa kontrastissa taustan kanssa.
Gestalt-suunnittelun lait
Gestaltpsykologian tavoitteena on määrittää ihmisen havainnon lait näennäisesti kaoottisessa maailmassa. On olemassa muutamia lakeja, jotka auttavat suunnittelijoita luomaan käyttäjäystävällisempiä malleja.
Läheisyyslaki
Tämän lain mukaan esineet, jotka ovat lähellä toisiaan, nähdään yhtenäisenä ryhmänä. Käytä tätä lakia esimerkiksi hyvän navigointivalikon suunnittelussa.
Käyttäjät eivät näe valikkoa kokonaisuutena, jos sen kohteita ei ole ryhmitelty vastaavasti, mikä heikentää käyttökokemusta huomattavasti. Ryhmittele kaikki valikon kohdat ja pyri saavuttamaan symmetria ja samankaltaisuus esteettisen elementin saavuttamiseksi.
Samankaltaisuuden laki
Tämä laki sanoo, että samankaltaiset esineet yleensä nähdään yhtenäisenä ryhmänä. Kuten edellisessä laissa, suosittelen samanlaisten valikkokohtien suunnittelua.
Symmetrian laki
Toistensa kanssa symmetriset esineet koetaan yhtenäisenä ryhmänä. Ihmiset pitävät symmetriasta enemmän kuin epäsymmetriaa, joten pyri symmetriaan asettelussasi.
Jatkuvuuden laki
Tämän lain mukaan ihmisen aivot pyrkivät yhdistämään lähellä toisiaan olevat kohteet lineaarisella polulla. Katso tämä artikkeli oppiaksesi kuinka jatkuvuuden laki toimii taiteessa. Pidä tämä laki mielessä, kun suunnittelet asetteluja, jotka sisältävät epäsäännöllisiä muotoja ja kaarevia viivoja.
On olemassa muutamia muita Gestalt-lakeja, joilla on pienempi vaikutus suunnittelutyöhön. Älä jätä huomiotta ihmisen psykologiaa verkkosivustoja suunnitellessa.
Värit puhuvat
Värien kanssa leikkiminen on kivaa, mutta riskialtista! Verkkosivustojen rakentajat, kuten Wix, Gutenberg-editori ja muut WordPress-sivujen rakentajat, antavat käyttäjille mahdollisuuden muuttaa sivuston koko värimaailmaa hetkessä.
Se on varmasti hieno ominaisuus, mutta samalla se voi vaikuttaa negatiivisesti sivuston suunnitteluun.
Menestyvä sivusto on käyttäjäkeskeinen, joten värimaailman tulee olla käyttäjille miellyttävä eikä sivuston ylläpitäjän suosikkivalinta.
Oikean värimaailman valitseminen ei ole yksinkertaista. Nyrkkisääntönä yli neljä väriä on liikaa, mutta se riippuu sivuston tarkoituksesta ja monimutkaisuudesta. Värien tulee täydentää kuvia ja auttaa välittämään yhtenäistä viestiä.
Lopuksi, älä koskaan unohda värien eri merkityksiä eri puolilla maailmaa . Onneksi meillä on paljon verkkosovelluksia, joiden tarkoituksena on auttaa sinua saamaan inspiraatiota ja valitsemaan oikeat väriteemat.
Luettavuus
Keskimäärin joka toinen tämän viestin lukija lukee sitä kämmenlaitteella. Näyttökoot ja käyttöjärjestelmät ovat erilaisia, mutta sisältö on sama. Kirjasintyypin ja koon tulee mukautua jokaiseen laitteeseen parhaan lukuympäristön tarjoamiseksi.
Sanomattakin on selvää, että ihmiset poistuvat sivustostasi, jos sisältösi ei ole luettavissa, ja huono fonttivalinta voi pilata hyvän verkkosivuston. Testaa jokainen kirjasinvalinta ennen kuin otat sen käyttöön sivustossasi.
Testaa, testaa, testaa
Teknologia ei ole muuttunut vain viime vuosikymmenen jälkeen, vaan myös tapa luoda ja ylläpitää sivustoa. Verkkosivusto oli vain verkossa läsnäolo kymmenen vuotta sitten. Nykyään se on osa yritystä tai itse yritystä.
Ihmiset arvioivat palvelusi sivustosi perusteella. Siten sivusto ei ole enää staattinen esiintymä – se on elävä olento. Sivuston omistajat tekevät yhteistyötä suunnittelijoiden kanssa ja työskentelevät jatkuvasti parantaakseen sivustojaan.
Testaus ei ole web-suunnittelun periaate, vaan osa verkkosivuston luomis- ja kehittämisprosessia.
Päätös
WordPress, Bootstrap ja Wix antavat käyttäjille rajattoman vallan luoda verkkosivusto ilman koodausta. Ne ovat ihania, mutta kokemattomat käyttäjät saattavat joutua luomaan verkkosivustoja mieltymystensä mukaisesti eivätkä perustu hyviin web-suunnitteluperiaatteisiin.
Yllä olevat vinkit vain raaputtavat pintaa, mutta ne ovat hyödyllinen yhteenveto perusideoista. Unohdinko tärkeän vinkin? Jätä kommenttisi näkemyksilläsi. Odotamme innolla panostasi.
Jätä vastaus