UI eli User Interface eli verkkosivuston käyttöliittymä – ”Ei tartte auttaa.”

Sisältövaroitus: tekstiä ei ole optimoitu Modern Sapiensin pitkäjännitteisyydelle.

Vinkkilinkki: Jos aiot tehdä vain yhden asian yrityksesi tai yhteisösi näkyvyyden eteen liity

Google My Businekseen. Se on ilmaista ja toimii myös äppiksellä. Jos et osaa, ota yhteyttä Betamieheen.

Asiaan

Asiat alkavat muuttua astetta hankalammaksi sukellettuamme syvemmälle graafisen suunnittelun tasolta UI eli käyttöliittymätasolle.

Näkyvyyttä hämärtää myös se, että graafinen suunnittelu ja UI sotkeutuvat toisiinsa. Molemmat ovat teknisesti yhdistelmä bittikartta– ja vektorigrafiikkaa, ASCII-tekstiä, HTML-koodia, JavaScriptiä, sRGB:tä, HEX-koodia, Apina-koodia ja paljon muuta.

UI on muutakin kuin pelkkää viehättävää ulkonäköä

Yksinkertaistettuna UI eli käyttöliittymä on väriä, kuvaa, tekstiä sekä liikettä joilla sinä löydät verkkosivulta haluamasi tiedon tai sinut hypnotisoidaan katalasti ostamaan jotain mitä et seuraavana päivänä enää tarvitse. Mukavia vaihtoehtoja molemmat.

Mutta entä jos olet lukihäiriöinen, värisokea, heikkonäköinen tai kokonaan sokea? Kätesi tärisee eikä koordinaatio toimi yhtä hyvin kuin mediaanin käyttäjillä.

Ei hätää, UI suunnittelija huomioi kaikki käyttäjäryhmät seuraamalla WCAG-suositusten ohjeistoa ja omaa kokemustaan.

Teoria, käytäntö ja käytettävissä oleva budjetti eivät aina kohtaa, mutta on hyvä olla perusta jolle verkkosivuston saavutettavuuden käytänteet voidaan rakentaa. Lisäksi ohjeistuksesta on apua tehdessä jatkokehitystä käyttäjäpalautteen perusteella.

Miten UI:n eli käyttöliittymän toimivuutta voi arvioida

– Onko kotisivujen ulkonäkö hyvä ja vastaako se brändiä, miten sitä pitäisi tehdä paremmaksi?

Siellähän on paljon käsiä pystyssä.

– Onko User Interface eli UI hyvä, miten sitä saisi paremmaksi?

Käsiä nousee vähemmän ja hieman epäröiden.

Mitä pitäisi siis tehdä? Voit käyttää testaamispalveluja verkossa tai tilata konsultin selvittämään asiaa.

Voit käyttää myös maalaisjärjen havaintoja.

– Sinä siellä takarivissä, älä ujostele, kerro mielipiteesi.

”No minä kun en tästä tekniikasta mitään ymmärrä ja tämä ruutukin on niin pieni ja silmälasitkin ovat niin vanhat — pitäisi uusia, mutta en ole ehtinyt — enkä oikein osaa tehdä tällä ohjelmassa mitään, että mistä alottaisin, enhän ole täällä yrityksessäkään töissä vaan toin vain näitä kahvipaketteja…”

Sieltähän se löytyi! Takarivistä! Verkkosivuprojektimme paras UI-asiantuntija! Juuri oikeita kysymyksiä joihin ammattilaisten tehtävä on löytää parhaat ratkaisut.

Verkkosivujen tilaaja — toimitusjohtaja, tuotepäällikkö, markkinointipäällikkö, myyntipäällikkö — ja niiden toteuttaja eivät aina innostuessaan huomaa ottaa huomioon käyttäjää ja hänen kokemusmaailmaansa joka koostuu näöstä, motoriikasta, iästä, käyttöympäristöstä, kielellisestä hahmottamisesta tai vaikkapa yksinkertaisesti hänen päätelaitteensa näytön koosta .

Pieni tai suuri puhelin, S tai XL pad, kannettava PC resoluutiolla 1366 x 768 tai MacBook Air 1440 x 900 tai pöytäkone jättinäytöllä.

Yhden ja saman sivuston UI:n pitää selviytyä käytettävänä suuresta määrästä eri kokoisia näyttöjä. Jos se siitä selviää kutsutaan sivustoa responsiiviseksi.

Fun fact: ABC-asemien sivustoja mainostetaan verkossa jopa super-responsiivisina! Siitä on paha atk-työläisen pistää paremmaksi!

Toimitusjohtaja, tuotepäällikkö, markkinointipäällikkö ja myyntipäällikkö eivät pääsee asiakkaalta pakoon jatkossakaan. UI:n kehittäminen jatkuu verkkosivuston julkaisun jälkeen palautteen keräämisellä ja toimintojen muokkaamisella paremman käyttäjäkokemuksen aikaansaamiseksi.

Kaupallisella sektorilla hyvin toimiva UI tekee tyytyväisen käyttäjän. Hyvä UI parantaa palvelukokemusta sekä lisää myyntiä. Lisäksi se vapauttaa asiakaspalvelun rajapintaa kotisivun käytön opastamisesta tuottavampiin tehtäviin.

— Kuulinko, että joku mainitsi kaksi kirjainta UX. Mitä se on? Mihin sitä tarvitaan? Salissa täysi hiljaisuus. Vai halusiko joku vain vessaan ja sanoi vahingossa väärät kirjaimet?

Otetaan hieman lisää vettä tankkeihin ja kellutaan internetmeressä taas astetta syvemmälle Beta UX-venellä.

Plumps!

Mitä mielestäsi pitää ottaa huomioon UI eli käyttöliittymäsuunnittelussa

• Web-hotellin latausnopeus
• Länsimainen lukusuunta
• Selaimen välimuistin tyhjentäminen
• Web-analytiikka
• Videon tekstitys

Beta-standardi: löydettävyys, käytettävyys, tavoitettavuus.

Lataa esite Beta-standardista (PDF)

Betamies tekee verkkosivuston ulkonäön, UI- ja UX-suunnittelun tilaajan brändilupauksen mukaisesti, WOW-efektillä sekä Googlen indeksointirobottien eli käyttäjäagenttien ehdoilla.