Pientä harmaata tekstiä sekavalla taustalla. Silmät väsyvät jo ensimmäisen lauseen aikana. Juuri siksi ui vs ux on tärkeä brändillesi. Kun asettelu ja värit taistelevat viestiä vastaan, ihmiset lähtevät kertomatta miksi.
UI vs UX vertaa käyttöliittymän ulkoasua kokonaiskokemukseen ja tehtävien onnistumiseen. Tässä luvussa kerrotaan selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sitä sovelletaan ilman jargonia. Näet myös, miten mitä on ux-suunnittelu liittyy samaan kokonaisuuteen. Käydään se läpi vaihe vaiheelta.
Ui vs ux ymmärrettävästi
UI vs UX vertaa käyttöliittymän ulkoasua kokonaiskokemukseen ja tehtävien onnistumiseen.
Mitä UX-suunnittelu on ja mitä UI on, menee pienillä sivustoilla päällekkäin, mutta sovelluksissa ne erkanevat.
Vahvat tuotteet tarvitsevat sekä toimivat polut että selkeät visuaalit.
Näin valitset brändiisi sopivan tavan
Korjaa sekavat kassan vaiheet ennen kuin hiot painikkeiden värejä.
Vertaa nykyistä sivustoasi lukuun käytettävyystestaus ja lukuun käyttöliittymäsuunnittelun periaatteet, niin huomaat puutteet nopeasti.
Kirjoita ylös kaksi sääntöä, joita noudatat jokaisella uudella sivulla. Näin päätökset pysyvät johdonmukaisina.
Käytännön tarkistuslista tälle päivälle
Korjaa sekavat kassan vaiheet ennen kuin hiot painikkeiden värejä.
Kun tarkastat sivua, kysy, näkyykö ui vs ux jo ensimmäisellä vierityksellä mobiilissa. Jos ei, järjestä osiot uudelleen ennen kuin hiot yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen. Näin opit, mikä liikutti ui vs ux -tuloksia sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta mitä on ux-suunnittelu pysyy yhtenäisenä uusilla sivuilla.
Valitse yksi mittari seurattavaksi tässä kuussa, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Näin suunnittelumuutokset kytkeytyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä rajoitu yhteen sivuun. Mitä UX-suunnittelu on ja mitä UI on, menee pienillä sivustoilla päällekkäin, mutta sovelluksissa ne erkanevat.
Somejulkaisujesi, sähköpostiesi ja painettujen materiaalien kannattaa toistaa samaa hierarkiaa, värejä ja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalit alkavat rönsyillä, asiakkaat aistivat pienen ristiriidan, vaikka eivät osaisi selittää sitä.
Käytä lukua käyttäjälähtöinen suunnittelu vertaillaksesi muistiinpanoja tämän moduulin toiseen lukuun.
Vahvat tuotteet tarvitsevat sekä toimivat polut että selkeät visuaalit.
Kysymyksiä, jotka usein unohtuvat
Sivutermit, kuten mitä on ux-suunnittelu ja mitä on ui, auttavat etsimään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Mitä UX-suunnittelu on ja mitä UI on, menee pienillä sivustoilla päällekkäin, mutta sovelluksissa ne erkanevat.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat toimivalla sivulla tällä viikolla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto ui vs ux -aiheesta, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Monien asettelu- ja tyyliongelmien korjaamiseen ei tarvita omaa koodia. Visuaalisella editorilla säädät välit, värit ja typografian, ja samalla esikatselet mobiili- ja työpöytänäkymät.
WEMASYssa on Sivustonrakentaja, jossa on visuaalinen muokkaus. Voit julkaista muutokset odottamatta kehittäjää jokaisen pikkusäädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, tarkista uudelleen käytettävyystestaus ja käyttöliittymäsuunnittelun periaatteet, jotta moduuli pysyy mielessäsi yhtenä kokonaisuutena.
Sinulla on nyt toimiva näkökulma ui vs ux -aiheeseen. Käytä sitä, kun tarkistat sivustoasi, hyväksyt markkinointimateriaaleja tai briefaat suunnittelijaa. Jatka lukuihin käyttöliittymäsuunnittelun periaatteet ja käyttäjälähtöinen suunnittelu, niin vauhti säilyy tässä moduulissa.
Ui vs ux on taito, joka kehittyy vähitellen. Palaa tähän lukuun, kun olet julkaissut yhden parannuksen, jotta ideat siirtyvät lukemisesta tavaksi. Pienet toistuvat tarkistukset voittavat sen, että yrität opetella kaikki säännöt kerralla. Pidä muistiinpanoja siitä, mikä toimi yleisöllesi, niin seuraava päivitys käy nopeammin.
Usein kysytyt kysymykset
Kuinka kauan ui vs ux -asioiden parantaminen kestää?
Useimmat pienyritykset saavat selkeämmät sivut muutamassa keskittyneessä työsessiossa, kun he soveltavat tämän luvun perusteita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan ui vs ux -työhön?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni ui vs ux -korjaus onnistuu itse, kun tiedät, mitä katsoa. Käytä käytettävyystestaus tämän luvun rinnalla saadaksesi aiheeseen liittyvää ohjausta.
Voiko WEMASY auttaa soveltamaan ui vs ux -ajattelua verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla säädät asettelua, värejä ja typografiaa ilman koodia. Avaa Sivustonrakentaja päivittääksesi mallit ja esikatsellaksesi muutokset mobiilissa.
Mikä on yleisin virhe ui vs ux -työssä?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi ykkösasia, kuten luettavuus tai kontrasti, ja katso sitten seuraavaa parannusta varten käyttöliittymäsuunnittelun periaatteet.
Miten ui vs ux liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee hakukoneiden seuraamia sitoutumissignaaleja. Yhdistä suunnittelukorjaukset hyvään sisältörakenteeseen, niin tulokset ovat parhaat.
Mitä kannattaa opiskella seuraavaksi ui vs ux -aiheen jälkeen?
Jatka lukuihin käytettävyystestaus ja käyttöliittymäsuunnittelun periaatteet tässä kirjassa, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.