Napautat painiketta eikä mitään tapahdu. Viet kursorin valikkokohdan päälle ja alasvetovalikko ilmestyy puoli sekuntia myöhässä. Vierität lomakkeen ohi etkä erota, mitkä kentät ovat pakollisia. Jokainen pieni kitkakohta kasautuu, kunnes lähdet.
Verkkosivuston vuorovaikutussuunnittelu on sen suunnittelua, miten kävijät ovat vuorovaikutuksessa sivustosi elementtien kanssa. Jokainen klikkaus, hover, vieritys ja lomakkeen lähetys on vuorovaikutusta. Kun nämä vuorovaikutukset tuntuvat sujuvilta ja ennustettavilta, ihmiset viipyvät pidempään ja sitoutuvat enemmän. Tässä kerrotaan, mitä vuorovaikutussuunnittelu kattaa ja miksi se on tärkeää.
Mitä on verkkosivuston vuorovaikutus?
Verkkosivuston vuorovaikutus on mikä tahansa kävijän sivustollasi tekemä toimi, joka laukaisee vastauksen. Painikkeen klikkaaminen, valikon avaaminen, lomakkeen täyttäminen, haitarin laajentaminen tai liukusäätimen vetäminen ovat kaikki vuorovaikutusta. Näiden hetkien suunnittelu ratkaisee, tuntuuko kokemus helpolta vai turhauttavalta.
Verkkosivuston vuorovaikutussuunnittelu on näiden hetkien taustalla oleva suunnittelu. Se kattaa painikkeiden sijoittelun, hover-tilat, lomakkeen tarkistuksen, animaatioiden ajoituksen ja palauteviestit. Hyvä vuorovaikutussuunnittelu saa sivuston tuntumaan responsiiviselta ja intuitiiviselta.
Miksi vuorovaikutussuunnittelu vaikuttaa sitoutumiseen?
Sitoutuminen riippuu sujuvuudesta. Kun vuorovaikutukset toimivat odotetusti, kävijät liikkuvat sivustollasi luontevasti. He lukevat, klikkaavat, tutustuvat ja toimivat pysähtymättä selvittämään, miten jokin toimii.
Kun vuorovaikutukset epäonnistuvat, sujuvuus katkeaa. Painike, joka näyttää klikattavalta mutta ei tee mitään, aiheuttaa hämmennystä. Lomake, joka tyhjentää kaikki kentät yhden virheen jälkeen, aiheuttaa turhautumista. Ponnahdusikkuna, joka peittää sisällön ilman näkyvää sulkemispainiketta, herättää vihaa. Jokainen rikkinäinen vuorovaikutus lyhentää käyntiä.
Yleisiä vuorovaikutussuunnittelun esimerkkejä
Vuorovaikutussuunnittelun esimerkkejä on lähes jokaisella sivulla. Navigaatiovalikot, jotka laajenevat hoverilla tai klikkauksella. Painikkeet, jotka vaihtavat väriä hoverilla näyttääkseen olevansa aktiivisia. Lomakkeet, jotka korostavat virheet juuri kyseisen kentän vieressä sen sijaan, että näyttäisivät yleisen viestin ylhäällä.
Vierityksestä laukeavat animaatiot, jotka paljastavat sisältöä kävijän liikkuessa sivua alaspäin. Haitarit, jotka laajenevat ja supistuvat pehmeällä siirtymällä. Latausindikaattorit, jotka näyttävät edistymisen sisällön latautuessa. Jokainen näistä on suunniteltu vuorovaikutus, joka muokkaa kävijäkokemusta.
Hyvän verkkosivuston vuorovaikutussuunnittelun periaatteet
Tee interaktiivisista elementeistä interaktiivisen näköisiä. Painikkeiden pitäisi näyttää painikkeilta. Linkkien pitäisi erottua visuaalisesti leipätekstistä. Jos jotain voi klikata, sen pitäisi näyttää klikattavalta, ennen kuin kävijä yrittää.
Anna välitön palaute. Kun joku lähettää lomakkeen, näytä vahvistus tai virhe heti. Kun sivu latautuu, näytä edistymisindikaattori. Hiljaisuus toimen jälkeen saa ihmiset miettimään, tapahtuiko mitään.
Pidä vuorovaikutukset yhdenmukaisina sivujen välillä. Jos ensisijainen painikkeesi on sinisenä yhdellä sivulla ja vihreänä toisella, kävijät menettävät varmuutensa siitä, mitä klikata. Yhdenmukaiset mallit vähentävät kognitiivista kuormaa ja pitävät ihmiset liikkeellä eteenpäin.
Vuorovaikutussuunnittelu liittyy tämän moduulin muissa luvuissa käsiteltyihin sitouttamisen työkaluihin. Ponnahdusikkunat, kiinteät palkit, lähtölaskentakellot ja vierityslaukaisimet ovat kaikki vuorovaikutuksia, jotka tarvitsevat harkittua suunnittelua. Lue verkkosivuston ponnahdusikkunoista, kiinteistä palkeista ja interaktiivisesta sisällöstä, niin saat konkreettisia esimerkkejä.
Usein kysytyt kysymykset
Onko verkkosivuston vuorovaikutussuunnittelu sama asia kuin verkkosuunnittelu?
Verkkosuunnittelu kattaa sivustosi visuaalisen ilmeen. Vuorovaikutussuunnittelu keskittyy siihen, miten elementit käyttäytyvät, kun kävijät käyttävät niitä. Ponnahdusikkunat, lomakkeet ja kiinteät palkit ovat kaikki vuorovaikutussuunnittelun päätöksiä.
Tarvitsenko suunnittelijan hyvään vuorovaikutussuunnitteluun?
Ammattisuunnittelija auttaa, mutta monia vuorovaikutuksen periaatteita voi soveltaa pohjien ja visuaalisten rakentajien avulla. Aloita selkeillä painikkeilla, ilmeisillä linkeillä, yksinkertaisilla lomakkeilla ja yhdenmukaisilla malleilla sivujen välillä.
Mitkä vuorovaikutusvirheet vahingoittavat sitoutumista eniten?
Piilotettu navigaatio, nimeämättömät lomakekentät, painikkeet, jotka eivät reagoi klikkauksiin, ja ponnahdusikkunat ilman selkeitä sulkemistapoja ovat yleisimmät ongelmat. Tutustu ponnahdusikkunoiden parhaisiin käytäntöihin, ennen kuin lisäät kerroksia sivustollesi.
Miten hover-tehosteet vaikuttavat mobiilikävijöihin?
Mobiililaitteilla ei ole hover-tiloja. Suunnittele vuorovaikutukset, jotka toimivat napautuksilla hoverin sijaan. Alasvetovalikot, jotka aukeavat vain hoverilla, eivät toimi puhelimilla, ellei niitä voi avata myös napauttamalla.
Voiko animaatio parantaa vuorovaikutussuunnittelua?
Hienovaraiset animaatiot voivat ohjata huomiota ja vahvistaa toimia, esimerkiksi painike, joka vaihtaa hetkeksi väriä klikkauksen jälkeen. Raskaat animaatiot, jotka hidastavat sivun latautumista tai häiritsevät sisältöä, haittaavat enemmän kuin auttavat. Pidä liike tarkoituksenmukaisena ja nopeana.
Tukeeko WEMASY hyvää vuorovaikutussuunnittelua valmiiksi?
WEMASY:n WEMASY-sivustonrakentaja sisältää responsiiviset pohjat, joissa on yhdenmukaiset painikkeet, lomakkeet ja navigaatiomallit. Voit muokata vuorovaikutuksia visuaalisesti kirjoittamatta koodia tai hallinnoimatta erillisiä suunnittelutiedostoja.