Huono muotoilu vs. hyvä muotoilu: 5 esimerkkiä, joista voimme oppia

Katsomalla esimerkkejä huonosta muotoilusta rinnakkain hyvän muotoilun vastaesimerkkien kanssa ei ole vain hauskaa, vaan siitä voi myös ottaa tärkeitä oppeja suunnittelijoille. Ne tuovat esiin sudenkuoppia, joita suunnittelijoiden on syytä välttää, ja antavat meille mahdollisuuden ymmärtää, miten muotoiluteoriat käännetään reaalimaailmassa toimiviksi ratkaisuiksi. Jared Spool, yhdysvaltalainen kirjailija, tutkija ja käytettävyysasiantuntija, sanoi kerran: ”Kun hyvä muotoilu tehdään hyvin, siitä tulee näkymätöntä. Huomaamme sen vasta, kun se tehdään huonosti.” Tarkastellaan siis viittä esimerkkiä ilmeisen huonosta muotoilusta, valotetaan, miten hyvä muotoilu saa sen toimimaan, ja tislataan joitakin oppeja, jotta me kaikki voimme luoda käyttäjillemme hienoja ja näkymättömiä kokemuksia.

Informaation ylikuormitus

Paha: Los Angelesin pysäköintikyltit

Pysäköintikyltit Los Angelesissa (LA) ovat vuosikymmeniä olleet informaation ylikuormituksen ruumiillistuma. Ne ovat aina olleet tunnetusti vaikeasti ymmärrettäviä, koska liikennesäännöt ovat monimutkaisia, mikä johtaa siihen, että pienellä alueella on välitettävä paljon tietoa.

Miten sekavia nämä merkit ovat? Perinteisesti hyvin – katso tätä esimerkkiä 2010-luvulta:

Tekijä/Tekijänoikeuden haltija: Jorge Gonzalez. Tekijänoikeusehdot ja lisenssi: CC BY-SA 2.0

Kuten LA:n pysäköintikyltit menevät, tämä esimerkki on jo melko yksinkertainen.

Kuvittele, että olet autoilija tällä tiellä tiistaiaamuna klo 9.00. Voitko pysäköidä tähän paikkaan? Se, mikä kuulostaa yksinkertaiselta kysymykseltä, vaatii paljon henkistä prosessointia vastatakseen.

Suunnittelijoina joudumme usein tilanteisiin, joissa meidän on suunniteltava, että pienessä tilassa näytetään paljon tietoa. Los Angelesin pysäköintikyltit saattavat olla ääritapaus, mutta monesti mobiilisovellusten suunnittelu tarkoittaa samojen ongelmien kohtaamista. Onko olemassa ulospääsyä – sekä pysäköintikylteille että suunnittelijoille yleensä?

Hyvä: Nikki Syliantengin pysäköintikyltti

Kyltin suunnitteleminen niin, että siinä näkyvät kaikki tiedot ja se on samalla helppotajuinen, kuulostaa mahdottomalta tehtävältä. Mutta juuri sen Brooklynin suunnittelija Nikki Sylianteng teki.

Tekijä/Tekijänoikeuden haltija: Nikki Sylianteng. Tekijänoikeusehdot ja lisenssi: CC BY-NC-SA 4.0

Nikkin ehdottamaa pysäköintikylttiä käytettiin lopulta LA:ssa osana koekäyttöä.

Tekijä, jonka vuoksi Nikkin suunnittelu1 toimii hyvin, on se, että se on käyttäjäkeskeinen: Nikki ymmärsi, että kuljettajat haluavat vain tietää, voivatko he pysäköidä tietylle paikalle. Kyllä tai ei – siinä kaikki, mitä kuljettajat tarvitsivat, ja se on kaikki, mitä pysäköintikyltti näyttää.

Nikkin suunnittelussa käytettiin myös visuaalisia keinoja tekstin sijaan tiedon välittämiseen. Tulos on uskomattoman intuitiivinen: vihreä tarkoittaa OK, punainen pysäköinti kielletty. Se on suunniteltu jopa värisokeille, ja siinä on raidat pysäköintikieltoa varten.

Nyt kun katsot kylttiä, tiedät, että tiistaina klo 9.00 pysäköinti on kielletty. Raidoista näkee yhdellä silmäyksellä, mikä on mitäkin – yksinkertaista.

Lessons Learned: Best Practice

• Ymmärrä, mitä käyttäjät tarvitsevat, ja suunnittele sitten sen perusteella. Tämä auttaa vähentämään informaation ylikuormitusta.
• Onko sinulla paljon tietoa välitettävänä käyttäjillesi? Kokeile käyttää visuaalista materiaalia tekstin sijaan. Lue lisää tiedon visualisoinnista täältä.

Mysteerilihan navigointi

Paha: Mystery Meat Navigation (MMN) tarkoittaa tapauksia, joissa linkin määränpää ei ole näkyvissä ennen kuin käyttäjä klikkaa sitä tai osoittaa kursorin siihen. Termi ”mysteeriliha” oli viittaus amerikkalaisissa julkisissa koulukahviloissa tarjoiltuun lihaan, joka on niin käsitelty, että sen tarkkaa lajia ei voi enää erottaa.

MMN on huono, koska se vähentää navigointielementtien löydettävyyttä. Se lisää käyttäjien kognitiivista kuormitusta, koska heidän on nyt arvuuteltava, miten navigoida tai mitä jotakin klikkaamalla saa aikaan.

Vaikka useimmat MMN:t löytyvät vanhemmilta verkkosivustoilta, ne ovat yllättävän yleisiä nykyaikaisilla verkkosivustoilla. Otetaan esimerkiksi Lazor Office, suunnittelutoimisto, joka luo tehdasvalmisteisia koteja.

Tekijä/Tekijänoikeuden haltija: Lazor Office, LLC. Tekijänoikeusehdot ja lisenssi: Fair Use

LazorOffice.comin etusivulla on MMN-kuvien ruudukko. Kuten näette, tämä taulukko antaa hyvin vähän viitteitä siitä, mihin mennä. Sen sijaan yhdeksän kuvaa vain istuu paikallaan ja jättää osan meistä miettimään arvoitusta sen sijaan, että olisimme vuorovaikutuksessa sivun kanssa.

Heidän kotisivujensa taiton alapuolella odottaa kuvien pikkukuvien ruudukko. Voiko niitä klikata? No, kyllä – jos viet hiiren kursorin kuvan päälle, se muuttuu osoittimeksi. Mutta mitä tapahtuu, kun klikkaat kuvaa?

”Click to find out!” ei ole koskaan hyvä käyttäjäkokemuksen (UX) ratkaisu. Todennäköisesti käyttäjät hylkäävät navigoinnin ja löytävät vaihtoehtoisen ratkaisun kilpailijan sivustolta.

Hyvä: Kurssikortit Interaction Design Foundationin verkkosivuilla

Onneksi MMN-ongelmat on helppo ratkaista. Tärkeintä on tiedostaa, että linkit on merkittävä selkeästi. Jo pelkkä ”View project” -tekstin lisääminen, joka tulee näkyviin hiiren vietäessä hiiren osoittimen päälle, parantaa yllä olevan Lazor Officen sivun käytettävyyttä.

Tekijä/Tekijänoikeuden haltija: Interaction Design Foundation ApS. Tekijänoikeusehdot ja lisenssi: Fair Use

Kurssikorttimme ovat yhtä salaperäisiä kuin linkitkin.

Interaction Design Foundationin kurssikorttien kohdalla jokaisen kortin alareunassa on paitsi ”View Course” (Näytä kurssi), joka ilmaisee tapahtuvan toiminnon, myös hover-tila, jossa on teksti ”Go to course” (Siirry kurssille). Monet verkkosivut noudattavat samanlaista käytäntöä, ja sinunkin kannattaisi tehdä niin maksimoidaksesi verkkosivusi käytettävyyden.

Lesson Learnt: Best Practice

Kirjoita aina linkit! Et haluaisi syödä salaperäistä lihaa – ja vastaavasti käyttäjät eivät haluaisi klikata salaperäisiä linkkejä.

Kitkan lisääminen käyttäjän toimintoihin

Paha: iFly50.com

Suunnittelijoina meidän tulisi lisätä kitkaa käyttäjän toimintoihin äärimmäisen varovaisesti, ellei tarkoituksena ole estää käyttäjiä suorittamasta kyseistä toimintoa. Joskus saatamme kuitenkin jopa tahattomasti lisätä kitkaa käyttäjän toimiin (useimmiten esteettisistä tai uutuuteen liittyvistä syistä), mikä johtaa haitalliseen UX:ään.

Yksi esimerkki on iFly50.com, joka luotiin KLM:n iFly-lehden vuosipäivää varten. iFly 50 on pystysuoraan vierivä verkkosivusto, jossa esitellään 50 matkakohdetta, ja joissakin kohteissa (kuten alla olevassa kuvassa) alareunan lähellä oleva painike pyytää käyttäjiä klikkaamaan ja pitämään sitä painettuna muutaman sekunnin ajan, jotta he voivat katsella lisää kuvia.

Tekijä/tekijänoikeuden haltija: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Tekijänoikeusehdot ja lisenssi: Fair Use

iFly 50 odottaa käyttäjiensä klikkaavan ja pitävän painettuna muutaman sekunnin ajan joka kerta, kun he haluavat nähdä lisää kuvia.

Toiminto, joka lisää muutaman sekunnin kitkaa jokaiseen toimintoon, voi johtaa valtavasti huonompaan UX:ään. Kuvittele, että sen sijaan, että napsauttamalla lataat sivun välittömästi, sinun on nyt napsautettava ja pidettävä painettuna kaksi sekuntia jokaista selaimessasi napsauttamaasi linkkiä. Lopetat internetin tutkimisen kokonaan muutaman klikkauksen jälkeen.

Monesti meillä suunnittelijoilla on taipumus innostua uusimmista vuorovaikutustyyleistä tai -toiminnoista, mutta on ratkaisevan tärkeää, että noudatat aina varovaisuutta, kun suunnittelusi voi lisätä kitkaa käyttäjän toimiin. Useimmiten kokeillut ja testatut konventiot (esimerkiksi yksinkertaiset klikkaukset tai pyyhkäisy) toimivat täydellisesti.

Hyvä: Elastinen vieritys iOS:ssä

Huomiota herättävää on, että kitkan lisääminen käyttäjän toimintoihin harkitusti voi johtaa loistavaan suunnitteluun. Yksi Applen suosituimmista keksinnöistä heidän mobiilikäyttöjärjestelmässään iOS:ssä on elastisen vierityksen luominen, jossa tietyissä tilanteissa (esimerkiksi verkkosivun lopussa) vieritys muuttuu yhä vaikeammaksi.

Author/Copyright holder: Interaction Design Foundation ApS. Tekijänoikeusehdot ja lisenssi: Fair Use

IOS:n elastisessa vierityksessä kitkaa lisätään tarkoituksella joissakin tilanteissa.

Voit nähdä tämän toiminnassa yllä, jossa kitka kasvaa, kun käyttäjä vierittää verkkosivun loppuun. Kitkaa lisättiin osoittamaan tilanteita, joissa vierittäminen ei ole enää sallittua: ja vaikutus on intuitiivinen kokemus.

Oppitunti: Paras käytäntö

Vältä kaikenlaisen kitkan lisäämistä käyttäjän toimiin niin pitkälle kuin voit – ja toteuta se varovasti silloin, kun vaihtoehtoa ei ole.

”Nokkela” suunnittelu, joka sivuuttaa käytettävyyden

Paha: Bolden.nl

Joskus nokkela suunnittelu voi olla UX:n kannalta vahingollista. Vaarallisemmaksi tämän virheen tekee se, että me suunnittelijat rakastamme nokkelaa suunnittelua. Ne ovat pieniä graafisia ihmeitä, jotka saavat meidät hymyilemään. Valitettavasti suurin osa ihmisistä ei ole suunnittelijoita. Vielä surullisempaa on se, että kaikki nokkelat muotoilut eivät ole hyviä muotoiluja, varsinkaan silloin, kun ne aiheuttavat saavutettavuus-, löydettävyys- tai käytettävyysongelmia.

Otetaan esimerkiksi hollantilaisen strategisen suunnittelu- ja kehitysstudio Boldenin verkkosivusto:

Tekijä/Tekijänoikeuden haltija: Bolden. Tekijänoikeusehdot ja lisenssi: Fair Use

Pystytkö kertomaan, mitä heidän kotisivuillaan yritetään sanoa? Eikö? No, se johtuu siitä, että sinun on siirrettävä hiiresi sivun kulmaan, jotta näet viestit kunnolla.

Tekijä/Tekijänoikeuden haltija: Bolden. Tekijänoikeusehdot ja lisenssi: Fair Use

Onko tämä nokkela muotoilu? Kyllä, ehdottomasti. Mutta onko tämä huonoa suunnittelua? Ehdottomasti!

Tämä on loistava esimerkki suunnittelusta suunnittelijaa eikä käyttäjää varten: verkkosivusto vähensi vakavasti otsikoidensa luettavuutta, kun sen tekijät pyrkivät määrätietoisesti luomaan uudenlaisen muotoilun. Suunnittelija jätti myös pois tekstin, joka kertoo käyttäjille, että heidän pitäisi siirtää hiiri kulmiin, mikä tarkoittaa, että otsikoiden löytäminen on sattuman varassa. Lisäksi jopa silloin, kun otsikko paljastuu, tekstin ja taustan välinen kontrasti on heikko, koska päällekkäinen teksti näkyy edelleen. Tämä kaikki yhdessä luo käyttäjälle epäystävällisen verkkosivuston.

Hyvä: CultivatedWit.com

Cultivated Witin verkkosivusto on loistava vastakohtaesimerkki siitä, että fiksun muotoilun ei tarvitse rasittaa käytettävyyttä.

Tekijä/Tekijänoikeuden haltija: Cultivated Wit. Tekijänoikeusehdot ja lisenssi: Fair Use

Cultivated Witin kotisivulla näkyy kuvitettu pöllö.

Cultivated Witin kotisivulla pöllön kuvitus vinkkaa, kun hiiri liikkuu sen päällä:

Tekijä/Tekijänoikeuden haltija: Cultivated Wit. Tekijänoikeusehdot ja lisenssi: Fair Use

Yllätys! Pöllö vinkkaa sinulle, kun osoitat kursorilla sitä. Huomaa myös valkotilan viisas kohdentaminen.

Tärkeä ero tässä on se, että tämä ei ole olennainen osa verkkosivustoa, joten se ei heikennä käytettävyyttä, vaikka käyttäjä ei löytäisikään tätä nokkelaa muotoiluelementtiä.

Lisäksi heillä on selkeä alaspäin osoittava nuoli, joka viittaa siihen, että jotain on taiton alapuolella. Ja kun selaat alaspäin, näet tämän:

Tekijä/tekijänoikeuden haltija: Cultivated Wit. Tekijänoikeusehdot ja lisenssi: Fair Use

Ja verkkosivut voivat olla nokkelia UX:stä tinkimättä.

Kopio (joka on luettavissa ja jossa on hyvä kontrasti) luo nokkeluuden tunteen – ei toisin kuin mitä Bolden yritti saavuttaa – heikentämättä verkkosivun UX:ää. Ainoa pieni ongelma on teksti ”Liity sähköpostikerhoon”, jonka pitäisi olla paremmin näkyvissä, mutta kokonaisuutena tarkasteltuna Cultivated Witin verkkosivusto on loistava esimerkki siitä, miten fiksu muotoilu voidaan toteuttaa luomatta huonoa UX:ää.

Lesson Learned: Best Practice

Nokkelat suunnitelmat tulisi aina tehdä mahdollisimman idioottivarmoiksi ja/tai testata todellisilla käyttäjillä. Joskus nokkelat suunnitelmat voivat mennä takapakkia ja vahingoittaa käytettävyyttä.

Ylimääräiset animaatiot

Paha: PayPal Receipt Concept on Dribbble

Animaatiot ovat tärkeä osa vuorovaikutussuunnittelua, mutta niiden tulisi aina palvella tarkoitusta. Niitä ei saisi koskaan tehdä animaation vuoksi. Valitettavasti suunnittelijoilla on taipumus rakastua animaatioihin, osittain siksi, että animaatioiden luominen on niin hauskaa, ettemme ehkä tiedä, milloin lopettaa.

Vladyslav Tyzunin Dribbbleen julkaisema animaatiokonsepti PayPalin sähköpostikuitista on esimerkki väärin tehdystä animaatiosta:

Tekijä/Tekijänoikeuden haltija: Vladyslav Tyzun. Tekijänoikeusehdot ja lisenssi: Fair Use.

Animaatio on nätti, mutta tarpeeton. Kaikkiaan tapahtuman yksityiskohtien näkeminen kestää huimat 3,5 sekuntia. Yksinkertainen kuitin häivytys olisi tyylikkäämpi, ja koska se vie vähemmän aikaa, myös käyttäjän kannalta parempi.

Tämä ongelma muuttuu vaaralliseksi, kun suunnittelijat eivät näytä saavan tarpeeksi animaatioista. Vuonna 2016 Vladyslavin animaatio saisi yli 500 tykkäystä ja 8000 katselukertaa. Tämä osoittaa, että suunnittelijat arvostavat väärin animaatiota animaation vuoksi. Kun ymmärrät suunnittelijoiden taipumuksen suosia huojuvia eepoksia suorempien esitysten sijaan ja saat itsesi kiinni ennen kuin animaatioille antautuu, säästät paljon aikaa ja vältät monia päänvaivoja. Muista, että käyttäjät tulevat sivustoille tiettyä tarkoitusta varten – haluamme näyttää heille lyhyessä ajassa, mitä he etsivät, emmekä pidätellä heitä suurella galleriakierroksella.

Hyvä: Stripe Checkoutin animaatio

Kun teemme animaation tarkoituksenmukaisesti, tulokset voivat kuitenkin olla loistavia. Katso Stripe Checkoutin animaatiota, kun käyttäjä saa vahvistuskoodin:

Author/Copyright holder: Stripe, Inc. Tekijänoikeusehdot ja lisenssi: Fair Use.

Stripe käyttää animaatioita saadakseen asiat näyttämään nopeammilta kuin ne ovat: se antaa käyttäjille päivityksiä (kuten ”Lähetetty”), vaikka he eivät ehkä ole vielä saaneet tekstiviestiä. Tämä estää käyttäjiä turhautumasta odottamiseen ja antaa varmuuden siitä, että tekstiviesti on tulossa juuri nyt.

Rachel Nabors, W3C:n kutsuttu verkkoanimaatioasiantuntija, ehdottaa viittä periaatetta, jotka tulisi pitää mielessä animaatioita suunniteltaessa3:

1. Animoi harkiten: mieti jokainen animaatio läpi ennen kuin luot sen.
2. Tarvitaan enemmän kuin 12 periaatetta:
3. Hyödyllinen ja tarpeellinen, sitten kaunis: estetiikan tulisi olla UX:n taka-alalla.
4. Mene neljä kertaa nopeammin: Hyvät animaatiot ovat huomaamattomia, mikä tarkoittaa, että ne toimivat nopeasti.
5. Asenna tappokytkin: Luo suurille animaatioille, kuten parallex-efekteille, opt-out-painike.

Oppi läksy: Best Practice

Tee animaatioista aina tarkoituksenmukaisia: liika voi tappaa tuotteen UX:n. Kauneuden on vedettävä vertojaan ja oltava toimivaa.

The Take Away

Eikö olekin hauskaa katsella esimerkkejä huonosta suunnittelusta? Onneksi se on myös opettavaista. Tässä ovat keskeiset opetukset ja parhaat käytännöt viidestä esimerkistä hyvästä ja huonosta suunnittelusta:

1. Ymmärrä, mitä käyttäjät tarvitsevat, ja tarjoa sitten sitä tietoa.
2. Jos sinulla on paljon tietoa välitettävänä, kokeile käyttää tekstin sijasta visuaalisia keinoja.
3. Merkitse aina linkit! Käyttäjät eivät pidä salaperäisistä linkeistä.
4. Vältä lisäämästä minkäänlaista kitkaa käyttäjän toimiin, ellei niiden tarkoitus ole estää toimintaa.
5. Testaa nokkelat suunnitelmasi ja ota ne mukaan varovasti.
6. Animaatio on kuin kiroilu. Jos käytät sitä liikaa, se menettää kaiken vaikutuksensa.4

Kun seuraavan kerran nyrpistät otsaasi huonolle suunnittelulle, pysähdy miettimään: ymmärrä, miksi suunnittelu epäonnistui, etsi esimerkkejä suunnittelusta, jossa asiat on tehty oikein, ja merkitse muistiin oppimasi asia. Ja jaa sitten rakkautta: jaa oppituntisi muiden suunnittelijoiden kanssa keskustelufoorumillamme!