Yksi kilpailija näyttää viimeistellyltä joka näytöllä. Toinen näyttää ahtaalta ja vanhentuneelta, vaikka molemmat myyvät samanlaisia palveluja. Ero löytyy yleensä siitä, miten UI-suunnittelu on ymmärretty, ja sen takana olevista tavoista. Huomaat eron heti, vaikka et osaisi vielä nimetä jokaista sääntöä.
UI-suunnittelu kattaa ne visuaaliset ja vuorovaikutteiset pinnat, joita käyttäjät napauttavat ja klikkaavat. Tässä luvussa kerrotaan arkikielellä, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sen voi ottaa käyttöön ilman ammattisanoja. Näet myös, miten UI-suunnittelun periaatteet kuuluvat samaan kokonaisuuteen. Käydään se läpi askel askeleelta.
Mitä on UI-suunnittelu
UI-suunnittelu kattaa ne visuaaliset ja vuorovaikutteiset pinnat, joita käyttäjät napauttavat ja klikkaavat.
Käytännössä UI-suunnittelu näkyy sivustosi otsikoissa, palvelusivuilla, some-grafiikoissa ja painotuotteissa. Kun osaat nimetä sen oikein, ohjeistat suunnittelijoita nopeammin ja arvioit luonnoksia varmemmin.
Lähiaiheet, kuten UI-suunnittelun periaatteet, kytkeytyvät suoraan tähän. Pidä ne mielessä, kun luet tämän osion loput luvut.
Painikkeet, lomakkeet, kuvakkeet ja värien tilat ovat UI-päätöksiä.
Miksi UI-suunnittelu on tärkeää yrityksellesi?
Asiakkaat arvioivat uskottavuutta asettelusta jo ennen kuin lukevat jokaisen sanan. Selkeä visuaalinen rakenne vähentää kitkaa ja tekee tarjouksista helpommin ymmärrettäviä.
UI-suunnittelun periaatteet pitävät käyttöliittymät yhtenäisinä ja ennustettavina.
Yhtenäistä painikkeiden muodot ja lomakekenttien tyylit kaikissa pohjissasi.
Jos haluat nähdä, miten tämä liittyy lähialueisiin, lue seuraavaksi UI vs UX ja käytettävyystestaus.
Käytännön tarkistuslista tälle päivälle
Yhtenäistä painikkeiden muodot ja lomakekenttien tyylit kaikissa pohjissasi.
Kun katsot mitä tahansa sivua, kysy, näkyykö UI-suunnittelu onnistuneena jo ensimmäisellä vierityksellä puhelimessa. Jos ei, vaihda osioiden järjestystä, ennen kuin alat hioa yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, niin opit, mikä muutos auttoi UI-suunnittelussa sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta UI-suunnittelun periaatteet pysyvät yhtenäisinä uusillakin sivuilla.
Valitse tälle kuukaudelle yksi seurattava mittari, kuten sivulla vietetty aika tai lomakkeen aloitukset. Näin ulkoasun muutokset liittyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä rajoitu yhteen sivuun. UI-suunnittelun periaatteet pitävät käyttöliittymät yhtenäisinä ja ennustettavina.
Some-julkaisujesi, sähköpostiesi ja painotuotteidesi kannattaa noudattaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalinen ilme alkaa hajota, asiakkaat aistivat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.
Lue UI-suunnittelun periaatteet, niin voit verrata muistiinpanojasi tämän osion toiseen lukuun.
Painikkeet, lomakkeet, kuvakkeet ja värien tilat ovat UI-päätöksiä.
Kysymykset, jotka usein unohtuvat
Lisähakusanat, kuten UI-suunnittelun periaatteet ja UI vs UX, auttavat löytämään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin käytäntöihin.
UI-suunnittelun periaatteet pitävät käyttöliittymät yhtenäisinä ja ennustettavina.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla julkaistulla sivulla. Pienet mitatut muutokset ovat parempia kuin hatarat suunnitelmat.
Kun tiimilläsi on yhteinen sanasto UI-suunnittelusta, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.
Työkalut, jotka tekevät visuaalisista päivityksistä helpompia
Moniin asettelun ja tyylin ongelmiin ei tarvita omaa koodia. Visuaalisessa editorissa voit säätää välejä, värejä ja kirjasimia ja esikatsella samalla puhelin- ja tietokonenäkymää.
WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten voit julkaista muutokset odottamatta kehittäjää jokaisen pienen säädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, tarkista vielä UI vs UX ja käytettävyystestaus, niin osio pysyy yhtenä kokonaisuutena mielessäsi.
Sinulla on nyt toimiva näkökulma UI-suunnitteluun. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointiaineistoja tai ohjeistat suunnittelijaa. Jatka lukuihin käytettävyystestaus ja UI-suunnittelun periaatteet, niin vauhti säilyy tässä osiossa.
Usein kysytyt kysymykset
Kauanko UI-suunnittelun parantaminen kestää?
Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamassa keskittyneessä työvaiheessa, kun käyttävät tämän luvun perusasioita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan UI-suunnitteluun?
Suunnittelija auttaa laajoissa brändiuudistuksissa, mutta moni UI-suunnitteluun liittyvä korjaus onnistuu itse, kun tiedät, mitä katsoa. Lue tämän luvun rinnalla UI vs UX, niin saat aiheesta lisää.
Voiko WEMASY auttaa UI-suunnittelun käyttöönotossa verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla voit säätää asettelua, värejä ja kirjasimia ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää pohjia ja esikatsella muutoksia puhelimessa.
Mikä on yleisin virhe UI-suunnittelussa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi tärkein asia, esimerkiksi luettavuus tai kontrasti, ja katso sitten käytettävyystestaus seuraavaa parannusta varten.
Miten UI-suunnittelu liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät pidempään sivulla, mikä tukee merkkejä, joita hakukoneet seuraavat. Yhdistä ulkoasun korjaukset toimivaan sisältörakenteeseen, niin tulos on paras.
Mitä kannattaa lukea seuraavaksi UI-suunnittelun jälkeen?
Jatka tämän kirjan luvuilla UI vs UX ja käytettävyystestaus, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.