Näin suunnittelemme.
UI/UX-suunnittelu kuuluu jokaiseen pakettiimme. Tällä sivulla näet, mitä se tarkoittaa käytännössä: yhden verkkokaupan kaikki vaiheet oikeine luonnoksineen. Kauppa on HANKI, kuviteltu asiakas ja oma demomme.
01Määrittely
Ensin sovitaan, mitä kaupan pitää saada aikaan ja kenelle.
Jokainen projekti alkaa lyhyellä määrittelyllä, jonka käymme läpi yhdessä. HANKIlle kirjoitimme sen kuin oikealle asiakkaalle: tavoitteet, käyttäjät, pakolliset asiat ja sivukartta.
- Asiakas
- HANKI, pieni tamperelainen vaatemerkki, jonka studio ja myymälä ovat samassa huoneessa. Kuviteltu: merkkiä ei ole olemassa.
- Tavoitteet
- Talvimallisto verkkoon niin, että kuvat ja vaatteet pääsevät oikeuksiinsa.
- Vähemmän kysymyksiä koosta: mitat ja istuvuus jokaiselle tuotesivulle.
- Nouto studiolta, jotta vaatteita voi sovittaa samalla.
- Käyttäjät
- Ihmiset, jotka ostavat harvemmin mutta parempaa. Selaavat usein puhelimella, joskus monta kertaa ennen kuin ostavat. Osa asuu Tampereella ja haluaa tulla sovittamaan.
- Mallisto
- AW26: 13 vaatetta ja asustetta sekä lahjakortti.
Vaatimukset
- V1Koko on valittava ennen kuin tuotteen voi lisätä ostoskassiin.
- V2Loppuneet koot näkyvät, mutta niitä ei voi valita.
- V3Varasto tarkistetaan vielä palvelimella, kun tilaus lähetetään.
- V4Hinnat sisältävät arvonlisäveron 25,5 %, ja se kerrotaan hinnan vieressä.
- V5Nouto studiolta, pakettiautomaattiin tai kotiin. Pakettiautomaattiin ilmainen yli 200 € tilauksiin.
- V6Alennuskoodit ja lahjakortit.
- V7Suomeksi ja englanniksi, sama sisältö molemmilla kielillä.
- V8Toimii puhelimella ja pelkällä näppäimistöllä, ja liike vähenee, jos käyttäjä on pyytänyt sitä laitteensa asetuksista.
- V9Demossa testimaksu, oikeassa kaupassa suomalainen maksupalvelu.
- Etusivu: Mallisto AW26 ja lookbook
- Kauppa (Kaikki 14 tuotetta) → Tuoteryhmät (7 ryhmää, suodatus) → Tuotesivu (14 sivua) → Kokotaulukko (Paneeli tuotesivulla)
- Lahjakortit (Ylävalikosta) → Lahjakortti (3 summaa, sähköpostilla)
- Ostoskassi (Paneeli ja oma sivu) → Kassa (Kolme vaihetta yhdellä sivulla) → Maksu (Maksupalvelu (demossa testi)) → Vahvistus (Tilausnumero)
- Toimitus ja palautus (Osio etusivulla)
- Tietosuoja (Alatunnisteesta)
02Käyttäjäpolku
Sitten piirretään polku, jota asiakas kulkee kuvasta tilausnumeroon.
Polku näyttää, missä asiakas voi epäröidä tai tehdä virheen, ja mitä hänelle silloin sanotaan. Jokainen alla oleva viesti näkyy kaupassa sanasta sanaan.
- Selaa: Etusivu tai kauppa
- Tuote: Kuvat ja istuvuus
- Koko: Pakollinen valinta. Ei kokoa: ”Valitse ensin koko.”
- Ostoskassi: Aukeaa sivulta. ”Jatka ostoksia” (takaisin vaiheeseen 1)
- Kassa: Tiedot ja toimitus. ”Tarkista merkityt kentät.”
- Maksu: Demossa testimaksu. Peruuta tai tuote loppui välissä (takaisin vaiheeseen 5)
- Vahvistus: Tilausnumero
03Rautalankamallit
Rakenne piirretään harmaana ennen kuin mietitään värejä tai kuvia.
Rautalankamalli näyttää, mitä sivulla on ja missä järjestyksessä, tietokoneella ja puhelimella. Siitä on helppo sanoa ”tämä ylemmäs” ennen kuin mitään on rakennettu.
Etusivu
- Mallisto ja yksi linkki kuvan päällä. Ensimmäisessä näkymässä ei muuta tekstiä.
- Ylätunniste on läpinäkyvä kuvan päällä ja saa taustan, kun kuva on ohitettu.
- Ostoskassi ja tuotteiden määrä näkyvät aina.
Tuotesivu
- Pääkuva mahtuu yhteen näkymään, ja nimi, hinta ja koot ovat sen vieressä.
- Hinta sisältää arvonlisäveron, ja se sanotaan.
- Koot rivissä kuin kaava-arkissa. Loppunut koko on yliviivattu.
- Määrä ja ostoskassiin lisääminen samalla rivillä.
Kassa
- Kolme numeroitua vaihetta yhdellä sivulla, ei erillisiä sivuja.
- Yhteenveto pysyy näkyvissä. Puhelimella se on ylimpänä.
- Toimitustavat riveinä, hinta jokaisen vieressä.
Nämä rautalankamallit on piirretty tälle sivulle uudelleen valmiin kaupan mitoista, jotta niitä voi verrata suoraan lopputulokseen.
04Visuaalinen ilme
Ilme kootaan yhdelle arkille: värit, fontit, osat ja kuvat.
Tyylitaulu on sopimus ilmeestä. Kun se on hyväksytty, jokainen sivu tehdään sen mukaan. Alla olevan taulun osat on piirretty kaupan omalla tyylitiedostolla, joten ne ovat täsmälleen samat kuin kaupassa.
05Komponentit ja tilat
Jokainen osa suunnitellaan myös silloin, kun jokin on loppu, tyhjä tai väärin.
Hyvä kauppa ei ole vain kuvakaappaus. Alla on kaupan oikeita osia kaupan omilla tyyleillä niissä tiloissa, joihin asiakas oikeasti törmää.
Tuotekortti
Koon valinta
Ostoskassi
Lomakkeet
06Valmis
Sitten se rakennetaan. Vedä ja vertaa luonnosta valmiiseen.
Koodaamme sivut itse emmekä aloita valmiista sivupohjasta, joten valmis sivu on se, joka suunniteltiin.
Kauppa toimii oikeasti: valitse koko, kokeile koodia DEMO10 ja maksa testimaksulla. Rahaa ei veloiteta, eikä mitään toimiteta.
Kokeile valmista kauppaa07Testaus
Lopuksi mitataan. Nämä luvut on mitattu tästä kaupasta.
Testaus kertoo, mikä toimii, ja myös sen, mitä pitää vielä parantaa. Siksi näytämme senkin luvun, joka ei ole vielä tavoitteessa.
Kontrasti
| Näyte | Käyttö | Suhde | WCAG |
|---|---|---|---|
| #181716 / #f4f2ee | Teksti | 16,0:1 | AAA |
| #48443f / #f4f2ee | Toissijainen teksti | 8,6:1 | AAA |
| #69645d / #f4f2ee | Vihjeet ja ALV-rivit | 5,2:1 | AA |
| #2b44ad / #f4f2ee | Varasto- ja alennusrivit | 7,4:1 | AAA |
| #f4f2ee / #181716 | Painikkeen teksti | 16,0:1 | AAA |
| #ffffff / #2b44ad | Painike hiiren alla | 8,3:1 | AAA |
| #a1261c / #f4f2ee | Virheviestit | 6,7:1 | AA |
| #69645d / #fbfaf7 | Vihjeet paperipinnalla | 5,6:1 | AA |
Laskettu kaupan tyylitiedoston väreistä WCAG 2:n kaavalla. Tavallinen teksti tarvitsee vähintään 4,5:1.
Mittaukset
Näppäimistö
Tuotesivulta koon valintaan, ostoskassiin ja kassalle pelkällä näppäimistöllä. Kohdistus näkyi 21 pysähdyksessä 21:stä.
24 painallusta
Näytön koot
390, 768, 1 024, 1 280, 1 440, 1 920, 2 560 px leveillä näytöillä. Etusivu, kauppa, tuotesivu, ostoskassi ja kassa: 35 yhdistelmää, sivuttaisvieritystä ei yhdessäkään.
35/35 ilman sivuttaisvieritystä
Lataus puhelimella
Etusivun suurin kuva oli valmis 3,6 sekunnissa simuloidulla hitaalla 4G-yhteydellä ja neljä kertaa hidastetulla suorittimella (0,7 Mt, 14 tiedostoa). Googlen raja hyvälle on 2,5 s, joten tässä on vielä parannettavaa: puhelimen kansikuvaa voi keventää.
3,6 s
Lataus tietokoneella
Sama mittaus nopealla yhteydellä (10 Mbit/s, viive 40 ms): 0,8 Mt, 16 tiedostoa.
0,43 s
Ostopolku
Automaattinen selaintesti käy koko polun läpi suomeksi ja englanniksi: pakollinen koko, ostoskassi, väärä ja oikea alennuskoodi, kassan virheet, testimaksu, varaston väheneminen ja se, ettei tilauksista lähde sähköpostia.
7 testiä × 2 kieltä
Mitattu 13.10.2026 paikallisella palvelimella samalla koodilla kuin verkossa oleva demo. Mittausskripti: tests/case-measure.mjs.
Haluatko kaupan, joka suunnitellaan näin?
Kerro maksuttomassa 20 minuutin puhelussa, mitä myyt ja kenelle. Saat kiinteän hinnan ennen kuin mitään aloitetaan, ja suunnittelu kuuluu siihen.