Tässä vaiheessa historiaamme huonolle tuotesuunnittelulle ei ole enää mitään tekosyytä. Ohjelmistotuotteiden jatkuvasti kiristyvässä kilpailussa käyttöliittymä- ja käyttökokemussuunnittelun onnistuminen ei ole neuvoteltavissa. Vaikka sinulla olisi loistavaa teknologiaa, joka pystyy ratkaisemaan käyttäjiesi ongelmat, huono käyttökokemus ajaa käyttäjät pois tuotteesi parista – joko siksi, etteivät he keksineet, miten sitä käytetään, tai yksinkertaisesti siksi, että he vihaavat sitä.
Valmistaudu: aion nyt antaa hieman ”kovaa rakkautta” siitä, miten käyttökokemusta ei pidä suunnitella, esittelemällä tuotesuunnittelun seitsemän kuolemansyntiä ja paljastamalla joitakin pahimmista esimerkeistä.
Synti nro 1: ”Joulukuusi”
Yksi miellyttävimmistä lapsuusmuistoistani on ajalta, jolloin koristelimme siskoni kanssa joulukuusta. Heti kun olimme valmiita, katselimme sitä ihaillen, sillä se oli meistä aivan upea. No, ainakin siltä se meidän silmissämme näytti. Miltä se todellisuudessa näytti? Suunnilleen tältä.
Oletan, että tiedät, mihin olen tällä menossa. Toisin kuin joulukuusen, jonka todella haluat lastesi koristelevan juuri niin kuin he itse haluavat, käyttöliittymäsi ja käyttökokemuksesi eivät pitäisi näyttää valtavalta eri puolille ripoteltujen elementtien ja värien sekamelskalta.
Katsotaanpa nyt oikean elämän tuotetta, joka näyttää ”joulukuuselta”.
Katso tätä hetki ja yritä selittää minulle, mistä tässä tuotteessa on kyse. Olen varma, että eksyit käyttöliittymään etkä hetkeen pystynyt selvittämään, mitä siinä tapahtuu. Tällä näytöllä tapahtuu aivan liikaa asioita, joten on käytännössä mahdotonta ymmärtää, missä olet ja mitä sinun pitäisi tehdä.
Tässä käyttöliittymässä näen seuraavat ongelmat:
- Värien liikakäyttö: Väri on taitavien tuotesuunnittelijoiden käsissä tehokas työkalu, sillä sen avulla käyttäjiä voidaan ohjata oikeaan suuntaan. Jos käyttöliittymässäsi on kuitenkin liikaa värejä, tämä teho heikkenee ja jokainen värillinen elementti alkaa kilpailla huomiosta.
- Toimintakehotteiden ylikuormitus: Mikä on tärkein asia, jota minun pitäisi nyt napsauttaa? Rehellisesti sanottuna minulla ei ole aavistustakaan – painikkeita on joka puolella.
- Sekava asettelu: Näyttö on siis jaettu kolmeen sarakkeeseen, joista keskimmäisessä on kaksi välilehteä, ja alareunassa on lisäksi suuri aikajanaosio. Suunnittelijat ovat yrittäneet mahduttaa yhdelle näytölle niin paljon asioita kuin mahdollista.
Tee sen sijaan näin
Tässä yritetään lähestyä käyttökokemusta luomalla jonkinlaista järjestystä valtavan tietomäärän keskelle. Ajattele sen sijaan käyttökokemustasi karttana, joka ohjaa käyttäjiltäsi toivomaasi toimintaa. On tuotesuunnittelun perusteita, että värien, toimintakehotteiden ja asettelun pitäisi toimia yhdessä ja ohjata käyttäjää ottamaan oikeat seuraavat askeleet.
Synti nro 2: Huono visuaalinen hierarkia
Visuaalinen hierarkia tarkoittaa käyttöliittymän elementtien järjestämistä tavalla, joka ilmaisee selkeästi niiden välisen hierarkkisen suhteen.
Esimerkiksi tässä lukemassasi artikkelissa on selkeä visuaalinen hierarkia: otsikko on ylhäällä suurikokoisella tekstillä, alaotsikot ovat otsikkoa pienemmällä tekstillä mutta huomattavasti leipätekstiä lihavoidumpina, ja niin edelleen.
Molemmissa tapauksissa korostamme otsikoita joko suurentamalla niitä tai lihavoimalla ne – näin ilmaistaan selkeästi, että kappaleet käsittelevät kunkin vastaavan alaotsikon aiheita.
Visuaalinen hierarkia on erinomainen tapa järjestää käyttöliittymä ja tehdä siinä navigoinnista helppoa. Sen puuttuminen puolestaan on erinomainen tapa saada käyttäjät kamppailemaan löytääkseen tiensä käyttöliittymässäsi.
Yksi päivittäin ärsyttävistä visuaalisen hierarkian merkittävistä epäonnistumisista on Quoran vastausosio.
Kannustaakseen ihmisiä selaamaan muita kysymyksiä ja viipymään verkkosivustollaan pidempään Quora on sisällyttänyt mukaan myös kysymyksiä ja vastauksia, jotka liittyvät parhaillaan selaamaasi kysymykseen.
Se ei haittaa minua. Kyse on olemassa olevasta käyttäjäkäyttäytymisestä, ja Quora on löytänyt orgaanisen tavan hyötyä siitä.
Sen sijaan minua häiritsee tapa, jolla he ovat suunnitelleet nämä aiheeseen liittyvät kysymykset ja vastaukset. Ne näyttävät lähes identtisiltä sivun varsinaisten vastausten kanssa, eikä niillä ole visuaalista hierarkiaa. Katso yllä olevaa kuvakaappausta ja kerro minulle, mikä niistä on vastaus ja mikä aiheeseen liittyvä kysymys. Sinun on todella luettava hitaasti, jotta huomaat eron.
Have an account? Log In
Tee näin
Ihannetapauksessa aiheeseen liittyvät kysymykset olisivat käyttöliittymässä vähemmän näkyvässä roolissa ja visuaalisessa hierarkiassa päävastausten alapuolella (esimerkiksi niillä olisi valkoisen taustan sijaan harmahtava tausta).
Synti nro 3: käyttöliittymä suoraan 2000-luvulta
Tiedän, tiedän, Craigslistin käyttöliittymä on pahasti vanhentunut, ja silti palvelu toimii täysin hyvin. Se on kuitenkin poikkeus sääntöön, eikä sinun pitäisi ajatella, että vuonna 2023 olisi edelleen aivan hyväksyttävää käyttää jotain sen kaltaista.
Ongelma on siinä, että toisin kuin Craigslist, tuotteesi ei tule olemaan erittäin suosittu eikä sillä ole maailmanlaajuisesti tunnettua brändiä. Jos ihmiset siis näkevät verkkosivustollasi vieraillessaan tai sovellustasi käyttäessään jotain vanhentunutta, he eivät yksinkertaisesti ota sinua vakavasti. Sinulla on kuitenkin aina mahdollisuus tulla tunnetuksi luovalla logosuunnittelulla ja brändäyksellä.
Valitettavasti joskus juuri kaikkein “vakavimmat” organisaatiot syyllistyvät tähän syntiin.
Sain muutama vuosi sitten mahdollisuuden tehdä yhteistyötä Armenian keskuspankin kanssa. Heillä on alan lahjakkaimpia rahoitusanalyytikkoja ja rahapolitiikan asiantuntijoita. Lisäksi tämän laitoksen johtaja (Harvardista valmistunut) toimi aikoinaan professorinani, ja hän on kiistatta älykkäin koskaan tapaamani ihminen.
Armenian keskuspankin verkkosivusto näyttää kuitenkin niin huonolta, että sinun on vaikea uskoa kyseessä olevan erittäin merkittävä organisaatio, jonka henkilöstö on poikkeuksellisen lahjakasta.
Synti nro 4: manipuloivat suunnittelumallit (tai UX:n käyttäminen käyttäjiäsi vastaan)
UX:n maailmassa “manipuloivat suunnittelumallit” tarkoittavat käyttäjäpolkuja ja käyttöliittymäelementtejä, jotka johtavat käyttäjää harhaan ja saavat hänet suorittamaan toiminnon, josta hän ei ole tietoinen.
On olemassa eräs verkkokauppa, jonka logona on oranssi nuolen muotoinen kuvio ja joka on erityisen “tunnettu” manipuloivien suunnittelumallien käyttämisestä. Se on syyllistynyt tähän siinä määrin, että sitä vastaan on esitetty jatkuvia valituksia ja tutkintoja FCC:n sääntöjen rikkomisesta.
Yksi tunnetuimmista tähän kategoriaan kuuluvista käyttäjäkokemuksista on tapa, jolla Prime-jäsenyys on tarkoitus peruuttaa.
Rehellisyyden nimissä mielestäni on edelleen hyvä idea pyytää käyttäjiltä palautetta, kun he peruuttavat maksullisen tilauksensa, tai jopa tarjota heille “älä lähde” -alennusta. Sinun on kuitenkin kunnioitettava käyttäjiesi aikaa ja kärsivällisyyttä.
Ota huomioon, että ihmiset, jotka haluavat peruuttaa tilauksesi, ovat todennäköisesti ärsyyntyneitä tai tyytymättömiä sinuun. Jos siis teet peruuttamisesta vaikeaa, he suuttuvat entisestään (ja voit unohtaa heidän palauttamisensa jonain päivänä tulevaisuudessa).
Jos yrität esimerkiksi peruuttaa Prime-jäsenyytesi, Amazon pyytää sinua harkitsemaan asiaa uudelleen.
Tämä näyttö on mielestäni ihan hyväksyttävä, kaikki tekevät niin.
En kuitenkaan hyväksy sitä, että valintasi täytyy vahvistaa peruuttamista varten vielä kaksi(!) kertaa (vitsailettehan, eikö niin?). Lisäksi heidän toimintakehotteissaan käyttämänsä sanamuodot ja värit on suunniteltu niin, että sinun on vaikea löytää painiketta, jolla jäsenyys peruutetaan sen säilyttämisen sijaan.
Tee näin
Älä yritä huijata käyttäjiäsi toimimaan vastoin heidän tarkoitustaan äläkä yritä “uuvuttaa heitä” tekemällä peruuttamisesta kohtuuttoman vaikeaa. Ihmiset ovat tarpeeksi älykkäitä tietääkseen, että teet sen tarkoituksella, ja se saa kilpailijasi vain näyttämään houkuttelevammilta. Tee sen sijaan lyhyt kysely siitä, miksi he lähtevät, ja tee prosessista tehokas jättäen samalla oven avoimeksi paluulle.
Synti nro 5: lomakkeiden parhaiden käytäntöjen noudattamatta jättäminen
Lomakkeet ovat verkkosivustojen peruselementtejä, ja ne kuuluvat ensimmäisiin asioihin, joiden rakentamisen kehittäjät oppivat ja joiden suunnittelun suunnittelijat oppivat – no, suunnittelemaan.
Lomakkeiden hyvän käyttäjäkokemuksen luominen on luultavasti yksi suunnittelijoiden keskuudessa eniten keskustelluista aiheista, ja parhaita käytäntöjä, oppaita ja ohjeita löytyy siihen käytännössä kaikkialta.
Author's Tip
Huomautus: Lisätietoa tästä aiheesta saat mielestäni erinomaisesti kirjasta ”UX:n suunnittelu: Lomakkeet” – Jessica Enders
Kun otetaan huomioon lomakkeita käsittelevän koulutusmateriaalin runsaus ja niiden oikeaoppisen toteutuksen tärkeys (se vaikuttaa suoraan asiakashankintaan ja muihin keskeisiin mittareihin), väittäisin, että vakiintuneiden lomakkeiden UX:n parhaiden käytäntöjen noudattamatta jättäminen on synti.
Haluan nyt antaa esimerkin huonosta lomakkeiden tuotesuunnittelusta.
En pysty edes katsomaan tätä sivua ilman, että silmiäni alkaa kirvellä. Tässä on niin paljon asioita pielessä. Mainitakseni muutaman:
Tyhjän tilan virheellinen käyttö: Miksi kenttien nimien pitää olla niin kaukana itse kentistä? Miksi käytät kokonaista lohkoa kahden pienen noutoa ja toimitusta koskevan vaihtokytkimen sijoittamiseen? Voit luoda lomakkeen, joka sisältää kaikki tässä tarvittavat tiedot, ja joka on vähintään neljä kertaa pienempi sekä paljon helpompi silmäillä.
Kenttien virheellinen muotoilu: Tässä on puhelinnumerokenttä, jossa kirjoittamasi numerot eivät näy puhelinnumeron muodossa (esimerkiksi +1 (555) 123-1234), mikä helpottaisi niiden lukemista. Tämä on niin yleinen toiminto, että useimmissa suunnittelutyökaluissa on sille jopa valmiit komponentit.
Paikkamerkin puuttuminen: ”Lisäohjeet toimitusta varten” -osiossa olevaa tekstikenttää tuskin huomaa. En myöskään ole varma, mitä siihen pitäisi kirjoittaa. Hyvä lomakkeiden UX lähtee aina siitä, että käytössä on paikkamerkkejä, jotka antavat vihjeen, kuten ”Jätä paketti kuistille”.
Tee näin
Jokaisen näiden ongelmien ratkaisut ovat melko ilmeisiä, mutta tässä tapauksessa vaikuttaa siltä, että ainoat tätä lomaketta testanneet ihmiset ovat sen rakentaneita henkilöitä. Suunnittelijoiden olisi ollut erittäin hyödyllistä hankkia tästä UX:stä aitoa käyttäjäpalautetta ennen sen julkaisua.
Synti numero 6: Väärien käyttöliittymäelementtien käyttäminen
Seuraava synti, josta haluan puhua, on edellisen jatkoa. Lomakkeet eivät ole tuotteesi ainoita käyttöliittymäelementtejä, joiden tulisi noudattaa vakiintuneita käytäntöjä ja parhaita käytäntöjä. Myös muut yleiset elementit, kuten vaihtokytkimet ja valintaruudut, kuuluvat tähän.
Käyttäjillä on itse asiassa jo vakiintuneet mentaaliset mallit siitä, miten kukin näistä elementeistä toimii, ja sinun on varmistettava, että käytät niitä oikein.
Tässä on muutama esimerkki siitä, mihin nämä elementit on tarkoitettu ja miten niitä ei pidä käyttää:
Vaihtokytkimet: Tämä elementti näyttää sinulle ”totuusarvon” (kuten jonkin asian olevan päällä/pois päältä tai aktiivinen/epäaktiivinen). Ne sopivat erinomaisesti esimerkiksi älypuhelimen Bluetooth-antennin tilan näyttämiseen käyttäjälle ja sen päälle tai pois päältä kytkemiseen.
Edellisessä lomakkeessa on kuitenkin kaksi vaihtokytkintä, joiden avulla käyttäjä voi valita noudon ja toimituksen välillä.
Jos ajattelet tätä hetken, olet käyttänyt siihen jo enemmän aikaa kuin suunnittelija. Nämä vaihtokytkimet tarkoittavat, että ”toimitus”-vaihtoehdon valitsemiseksi sinun on kytkettävä ”nouto” POIS ja ”toimitus” PÄÄLLE! He olisivat voineet käyttää valintanappeja. Rehellisesti sanottuna ihmettelen, mitä tapahtuu, jos käyttäjä kytkee molemmat yhtä aikaa päälle.
Valintavalikot ilman suodatusta: Valintavalikot ovat yksi vanhimmista verkkosivustoilla käytetyistä elementeistä, ja ne ovat edelleen suosittuja ja erittäin käyttäjäystävällisiä, kun niitä käytetään oikein.
Tee näin
Parhaiden käytäntöjen mukaan valintavalikkoa tulisi käyttää silloin, kun käyttäjän on valittava yksi vaihtoehto 5–15 vaihtoehdon pituisesta luettelosta. Jos vaihtoehtoja on alle 5, kannattaa käyttää valintanappeja.
Jos valittavana on laaja luettelo vaihtoehtoja (esimerkiksi 50 Yhdysvaltain osavaltiota tai noin 200 maata), valintavalikkoon on lisättävä suodatus. Muuten käyttäjä joutuu vierittämään pitkää luetteloa löytääkseen haluamansa vaihtoehdon.
More Articles
Synti numero 7: Käyttäjien ja heidän tarpeidensa sivuuttaminen
Viimeisenä, mutta suurimpana kaikista synneistä: uuden tuotteen luominen UX-suunnittelulla, joka ei vastaa käyttäjiesi tarpeita ja kiinnostuksen kohteita. Se on varma resepti epäonnistumiseen.
Tee näin
Hyvä tuotesuunnitteluprosessi alkaa aina käyttäjätutkimuksesta. Ellet tiedä, keitä käyttäjäsi ovat ja mitä he tarvitsevat, päädyt lähes varmasti huonosti suunniteltuun tuotteeseen riippumatta siitä, kuinka kauniin käyttöliittymän luot.
Tiedän, ettei käyttäjätutkimus ole helppo tehtävä. Applelta kului vuosia käyttäjätestaukseen, jotta se saavutti poikkeuksellisen käytettävyyden tason sekä iPhonen teollisessa muotoilussa että käyttäjäkokemuksessa. Usko kuitenkin minua: se on yksittäinen vaikuttavin työvaihe, jonka voit tehdä varmistaaksesi tuotteesi menestyksen.
Suunnittelusynteihin syyllistymisen välttäminen on todella helppoa
Jos työskentelet verkkosivustojen parissa, olet paremmassa lähtöasemassa. Miksi? Koska verkkosuunnittelutyökalut tarjoavat yleensä malleja, joissa jotkin tässä luetelluista synneistä on jo vältetty. Riippumatta siitä, oletko digitaalisten tuotteiden parissa työskentelevä startup-yritys tai fyysisiä tuotteita (kuten näppäimistöjä tai liiketunnistimia) valmistava suuryritys, huonon suunnittelun välttäminen on itse asiassa melko helppoa.
Niin kauan kuin tuotekehitysprosessisi keskittyy käyttäjiesi tarpeisiin ja kipupisteisiin ja käytät oikeaa tuotesuunnitteluohjelmistoa, pystyt välttämään merkittävät suunnitteluvirheet ja huonosti suunnitellun tuotteen (tämä on myös yksi monista tekoälypohjaisen suunnitteluohjelmiston hyödyistä).
Toivon, että nämä esimerkit saivat sinut tuntemaan olosi paremmaksi omien tuotteidesi suhteen tai ainakin naurahtamaan. Jos haluat lisää UX-vinkkejä ja muita tuotealan ammattilaisille suunnattuja artikkeleita, muista tilata uutiskirjeemme!
