Verkkopalveluja toteuttavat palvelumuotoilijat, front end -koodarit ja muut asiantuntijat joutuvat usein tekemään suunnittelua ja toteutusta ilman selkeitä ohjeita ja täysin irrallaan alkuperäisen ilmeen tai käyttökokemuksen suunnittelijoiden näkemyksestä. Samaan aikaan asiakkaiden kasvavat odotukset nostavat jatkuvasti palvelujen laatuvaatimuksia, mikä puolestaan lisää painetta synnyttää laadukkaita ratkaisuja nopeasti. Silloin hyvin suunniteltu graafinen ohjeisto on korvaamaton apu verkkopalveluiden suunnittelussa ja toteutuksessa.
Törmäämme yhä edelleen puutteellisiin graafisiin ohjeistuksiin. Nyt jos koskaan myös graafisten ohjeistojen tulisi olla niin selkeitä, ettei brändikokemus jää vajaaksi visuaalisen ilmeen tai palvelutason osalta. Graafista ohjeistoa ei voi tehdä 2020-luvulla ilman, että digitaaliset ympäristöt on laajasti huomioitu. Muutoin verkkopalvelun tilaaja löytää omista muroistaan #FFFFFF lisäksi myös #F9EE90.
Kun kilpailutat verkkopalvelun suunnittelua ja toteutusta, hyvä graafinen ohjeisto on palvelun tekijöille kullanarvoinen ja lopputulos on laadukkaampi ja brändikokemus saumattomampi. Kattava graafinen ohjeisto myös säästää merkittävästi aikaa tekniseltä toteutukselta. Huomattavaa on, että toimittajien tarjoukset ovat vertailukelpoisempia kun brändilinjat ovat selkeät jo tarjousvaiheessa. Silloin voit tilaajana olla varma siitä mitä saat ja että haluttu ilme ja tunnelma ovat myös toteutettavissa alusta asti. Jälkikäteen puukotettu koodi visuaalisen ilmeen vuoksi on aina lisäkustannus ja ikävä homma kaikille osapuolille.
Entä design system? Luojalle kiitos, sellainen on keksitty! Design system on laaja komponentti- ja interaktiokirjasto, joka sisältää mallit kaikista elementeistä, joita yrityksen verkkopalvelussa voi olla. Design system ei esitä pelkästään elementien ulkonäköä vaan esimerkiksi interaktioilla demoaa miten ne toimivat. Design system on kuitenkin erittäin laaja kokonaisuus ja itsessään jo iso ja työläs projekti eikä siksi välttämättä kaikkiin tarpeisiin järkevä ratkaisu. Jako ei ole kuitenkaan vain perinteinen graafinen ohjeisto vs. design system, vaan niiden väliin mahtuu monia muita mahdollisuuksia, joista jokainen yritys löytää varmasti itselleen sopivimman.
3 vinkkiä hyvän graafisen ohjeiston teettämiseen
1. Kokoa oikea tiimi
Tarvitset näitä asiantuntijoita:
- kokenut AD
- UX-suunnittelija
- fronttikoodari
- saavutettavuusasiantuntija
Yleinen ongelma on, että graafisia ohjeistoja tekevät usein yksin esimerkiksi erinomaiset printti-AD:t, joilla ei välttämättä ole paljoa, jos lainkaan, kokemusta digitaalisista ympäristöistä. Silloin digitaaliset ympäristöt jäävät ohjeistossa usein kokonaan huomioitta. Tai niistä tehdään vain printtimaailman toisintoja digitaaliseen muotoon ja silloin digitaalisen ympäristön ominaispiirteet ja käyttökokemus käytännössä sivuutetaan kokonaan. Siinä on sudenkuoppa, johon myöhemmin hyvätkin palvelut ja sisällöt helposti putoavat.
Verkkopalvelut ovat kuitenkin se paikka missä asiakkaat usein eniten aikaansa viettävät. Jos brändi ei jalkaudu laadukkaasti verkkoon, silloin on ihan sama kuinka hieno mattalakka tai stanssaus esitteen kantta koristaa. Alkuperäisen AD:n näkemys on kuitenkin kullanarvoinen. Ei heitetä sitä erinomaista näkemystä hukkaan, vaan ohjeistetaan se ylettymään verkkoon saakka.
Useimmiten tekniset asiantuntijat joutuvat toteuttamaan palveluita ilman hyödyllisiä ohjeita ja irrallaan alkuperäisen brändin suunnittelijoiden näkemyksestä. Mitä vähemmän heillä on käyttökelpoisia ohjeita digipalveluita varten, sitä luovemmiksi teknisten asiantuntijoiden on heittäydyttävä. Joskus harvoin se on siunaus, useimmiten ei. Muista, että visuaalisen ilmeen tai käyttökokemuksen suunnittelu ei ole teknisten asiantuntijoiden tehtävä vaan tekninen toteutus. Ja sen ohessa pakon edessä ”lennossa sävellettävä” visuaalisten elementtien tai käyttöliittymän suunnittelu voi viedä asioita kalliisti väärään suuntaan.
Osassa projekteista ei ole visuaalista UX-suunnittelijaa siivilöimässä ulkoasu- ja käyttökokemusvaatimuksia teknisille osaajille, ja joka tapauksessa tämäkin suunnittelija on irrallaan alkuperäisestä näkemyksestä vaikka olisikin osa projektia. Yksittäisten osien suunnittelu ilman kokonaiskuvan hahmotusta tuottaa verkkoon näkemyksetöntä designia, joka riittää kehitystiketin kuittaamiseen, mutta ei vie liiketoimintaa eteenpäin.
2. Keskity oikeisiin asioihin
Ei kaikkea tarvitse suunnitella valmiiksi, mutta huomioi edes tärkeimmät asiat. On helpompi neuvoa uudet tekijät perille silloin kun siellä on itse edes ajatuksellisesti käynyt.
Ilmoita graafisessa ohjeistossa yhteyshenkilö, joka oikeasti osaa vastata kysymyksiin. Kerro ohjeistossa milloin sitä noudatetaan ja milloin ei. Ohjeistossa tulee esittää tarkasti ainakin keskeisimmät käyttöliittymän elementit. Myös tone-of-voice on hyvä huomioida ohjeistossa, ainakin viitteellisellä tasolla: millaista kieltä käytämme verkossa? Esimerkiksi: kumpi on käyttäjälle kohteliaampi: ”Virhe! Puhelinnumero puuttuu!” vs. ”Vielä yksi juttu: lisää puhelinnumerosi”. Selkokielestä puhumattakaan.
Mobile first, logot, värit ja typografia
Mobiilikäyttö jyrää, se on jo itsestäänselvyys etenkin kuluttajapuolella. Myös B2B-verkkopalveluissa mobiilikäyttö on luonnollisesti voimakkaasti nousujohteinen. Siksi graafinen ohjeisto, design system tai ratkaisu eivät voi jättää mobiilikäyttöä huomiotta. Usein verkkopalvelun suunnittelussa lähdetään liikkeelle nimenomaan mobiilikäyttökokemuksesta ja -ilmeestä.
Entä onko palvelulla dark ja light mode? Miltä ne näyttävät? Esimerkiksi sairaalaympäristössä käytettävissä palveluissa on oltava tummapohjainen versio, käyttöympäristön runsaan valaistuksen vuoksi. Miltä näyttää pitkätekstinen logo mobiilissa, jääkö headerissa tilaa enää muulle? Jos logossa on upeita yksityiskohtia, miltä ne näyttävät pienessä koossa, esimerkiksi some-profiilissa? Pitääkö logosta tehdä someprofiilia varten yksityiskohdiltaan rajattu versio? Entä saavutettavuus: miltä sivu näyttää esimerkiksi colorblind-toiminnolla katseltuna?
Voiko brändin pääväri olla jo itsessään saavutettava? Jos ei, tee sille verkkoversio. Tämä voi olla ikävä asia brändipoliisi-puristeille, mutta toisinaan käytettävyyden ja saavutettavuuden nimissä rakkaasta ja ”ainoasta oikeasta” brändiväristä on tehtävä myös variaatio. Brändin pääväreistä johdetut vaaleat ja neutraalit prosenttisävyt ovat puolestaan arvossaan varsinkin työkalumaisten palvelujen suunnittelussa.
Vaikka brändifontit on rakkaudella valittu ja toisinaan teetetty ihan Lontoossa asti, ne eivät välttämättä ole sopivia digitaaliseen ympäristöön, pienelle ruudulle. Silloin niille on oltava verkkokäyttöön sopivat vaihtoehdot. Tutki mikä fontti toimii eri ympäristöissä parhaiten ja mikä myös jatkaa samaa brändifontin linjaa.
Myös eri kielet asettavat fonteille erilaisia vaatimuksia. Meidän rakkaassa ja hienossa suomen kielessämme sanat ovat pitkiä ja esimerkiksi viranomaispalveluissa ne ovat saavutettavuuslainsäädäntöineen ja yhdenvertaisuusperiaatesuunnitelmineen erityisen pitkiä. Silloin hieman kapeammin leikattu fontti ja tiukempi välistys voi toimia fontin perusleikkausta paremmin. Muista huomioida myös kyrilliset kirjaimet.
Pelkkä hyvä fontti tai fonttiperhe ei vielä riitä. Ohjeistossa pitää myös kertoa miten fonttia käytetään verkkopalvelussa tai sovelluksessa: miten sillä luodaan tekstin hierarkiaa, mitä tehokeinoja käytetään ja mitä ei.
Viivat, painikkeet ja ilmavuus
- Viivat. Jokainen verkkopalvelu tarvitsee ns. erotinviivoja. Se on esimerkiksi kahden tekstikappaleen välissä oleva viiva, joka kertoo käyttäjälle että ”tässä vaihtuu asiayhteys”. Useimmat vastaan tulevat erotinviivat ovat 1 pikselin paksuisia ja niin vaaleita, että niitä on normaalinäköisenkin vaikea erottaa, ikänäöstä tai muista näkörajoitteista puhumattakaan. Tämänkin yksinkertaisen ja käytännöllisen elementin voi kuitenkin tehdä brändiä ja käyttökokemusta vahvistaen – miksi emme tekisi niin?
- Painikkeet eli buttonit. Painikkeet ovat tärkeitä, käyttäjää ohjaavia elementtejä, joiden tulee sekä väreiltään että muodoltaan selkeästi erottua ympäristöstään. Graafisessa ohjeistossa painikkeista tulee olla kaikki eri versiot.
- Tekstilinkit. Muista että käyttäjälle on selkeästi osoitettava, mikä teksti tai tekstin osa on linkkiä. Mielellään myös indikaatio siitä mitä linkkejä on jo klikattu. Voi kuulostaa 90-luvun Amazonilta, mutta se on käytettävyyttä ja saavutettavuutta parhaasta päästä!
- Ilmavuus, marginaalit, white space. Tällä rakkaalla ja tehokkaalla design-aseella on monta nimeä. Tyhjän tilan hyödyntäminen on edelleen aliarvostettu keino, muista se designissa. Jos siihen ei ole erikseen kiinnitetty huomiota, koodissa elementit usein jäävät liian lähekkäin toisiaan.
3. Testauta teknisillä asiantuntijoilla!
Käyttäjätestaus loppukäyttäjillä on valttia myös graafisen ohjeiston tai muun elementtikirjaston suunnittelussa.
Päätyipä ratkaisussa sitten graafiseen ohjeistoon, design systeemiin tai esim. design-kirjastoon, se tulee testauttaa teknisellä asiantuntijalla, esimerkiksi front end -koodarilla. Katso miten tekninen toteuttaja pystyy tekemään ohjeiston mukaan edes yhden yksittäisen verkkosivun, kokonaisesta sivustosta puhumattakaan. Jos jotain ei pysty toteuttamaan tai se herättää kysymyksiä, lisää ne asiat graafiseen ohjeistoon. Palvelun loppukäyttäjä taas toivoo, että palvelun käyttö on sujuvaa ja saumatonta ja että se vastaa odotuksiin, mielellään jopa ylittää ne. Silloin se on toteutettu laadukkaasti, brändin mukaisesti ja saavutettavasti.
Bonus: laita graafinen ohjeisto avoimesti saatavaksi
Usein tuntuu siltä, että yrityksen graafinen ohjeisto ajatellaan liikesalaisuudeksi jota piilotellaan markkinoinnin tai viestinnän tarkkaan varjelluissa siiloissa ja sen saa vain erikseen pyytämällä, 3 päivän toimitusajalla.
Pyyntö, oikeastaan vaatimus: laita graafinen ohjeisto sivuillenne avoimesti nähtäväksi versioksi. Silloin säästät monilta turhaa työtä, teet palveluksen kaikille osallisille, ja ennen kaikkea palveluksen brändillesi!
Tutustu seuraaviin työkaluihin:
