Hvað er hreyfihönnun á vef?

Hreyfihönnun á vef er sú vinna sem ákveður hvernig hlutir á síðunni birtast, breytast og svara þegar notandinn gerir eitthvað. Það á við um allt frá því hvernig valmynd opnast til þess hvernig efni fer inn í skjáinn þegar þú skrollar. Markmiðið er ekki að síðan sé skemmtileg að skoða, heldur að notandinn skilji hvað er að gerast og hvar hann er.

Ef þú tekur alla hreyfingu af vef þá virkar hann enn þá, en hann verður stökkur. Efni birtist skyndilega, valmynd hvarf en þú sást ekki hvert, og þú ert ekki alveg viss hvort þú ýttir á takkann eða ekki. Hreyfihönnun leysir þessi litlu óvissuaugnablik.

Hvar hreyfihönnun kemur fram á vefsíðu

Það eru fjórir staðir þar sem hreyfing gerir mest gagn.

Fyrsta er svörun á aðgerð. Takki sem dökknar örlítið þegar músin fer yfir hann, hleðsluvísir eftir að þú sendir form, hjarta sem fyllist þegar þú vistar hlut. Þetta segir notandanum að kerfið tók við skipuninni og hann þarf ekki að ýta aftur.

Annað eru umbreytingar milli ástanda. Fellilisti sem opnast, mynd sem stækkar, flipar sem skipta um innihald. Þegar umbreytingin er hreyfð fylgir augað sjálft eftir og þú átt ekki að endurraða skjánum í hausnum.

Þriðja er innkoma efnis. Textablokkir og myndir sem fara mjúklega inn þegar þú skrollar niður. Þetta er algengasta form hreyfihönnunar á íslenskum fyrirtækjavefjum og líka það sem oftast er misnotað.

Fjórða er sviðshreyfing, oftast í hero-hluta forsíðunnar. Myndband, texti sem raðast upp, bakgrunnur sem hreyfist hægt. Hér liggur vörumerkjavinnan, og þetta er sá hluti sem fólk man eftir.

Um smæstu útgáfuna af þessu höfum við skrifað sérstaklega: Hvað er micro-interaction og af hverju skiptir hún máli í vefhönnun?

Hvað hreyfing gerir fyrir notandann

Hreyfing gerir þrennt sem texti og útlit gera ekki.

Hún staðfestir. Notandinn fær vitneskju um að aðgerðin hans skráðist, án þess að þurfa að lesa neitt. Þetta er stærsta ástæðan fyrir því að vefir án hreyfingar líða óáreiðanlegir, sérstaklega í formum og innkaupakörfum.

Hún sýnir samband. Þegar smámynd stækkar upp í fulla mynd á sama stað þá skilur notandinn að þetta er sami hluturinn. Ef myndin bara skyndilega birtist í miðju skjásins þá er sambandið horfið og hann þarf að finna sig aftur.

Hún stýrir röð. Á forsíðu þar sem þrjú atriði fara inn með örlítilli töf á milli les augað þau í þeirri röð sem hönnuðurinn ætlaðist til. Þetta er lúmskt en það hefur mælanleg áhrif á hversu langt fólk kemst niður síðuna.

Tímasetning er allt

Munurinn á góðri og vondri hreyfingu liggur nánast alltaf í tímanum og ferlinum, ekki í hugmyndinni.

Fyrir viðmótshreyfingu eins og hover, opnun valmyndar eða flipaskipti þá er 150 til 300 millisekúndur rétt svið. Undir 100 sér notandinn hana ekki. Yfir 400 fer hann að bíða, og bið á vef sem hann sjálfur bað um er verri en engin hreyfing.

Fyrir innkomu efnis við skroll er 300 til 500 millisekúndur venjulega nóg, með 60 til 100 millisekúndna töf milli atriða í röð. Þegar töfin fer yfir 200 fer síðan að líðast hæg þótt hún hlaðist hratt.

Svo er ferillinn, það sem á ensku kallast easing. Hreyfing með jöfnum hraða frá byrjun til enda líður vélræn. Hlutir í raunveruleikanum taka við sér og hægja á sér, og hreyfing sem gerir það sama er sú sem fólk skynjar sem fínpússaða án þess að geta sagt af hverju. Í Framer og öðrum nútíma verkfærum er þetta stilling sem tekur tvær sekúndur að velja, og hún gerir meira fyrir upplifunina en flest annað.

Hvenær hreyfihönnun skaðar

Það eru fjögur einkenni sem við sjáum aftur og aftur þegar hreyfing er farin úr böndunum.

Allt fer inn við skroll. Þegar hver einasta blokk á síðunni bíður eftir að koma inn þá er notandinn í raun læstur við skrollhraða síðunnar. Fólk sem er komið til að finna símanúmer verður óþolinmótt á fyrstu tíu sekúndum.

Hreyfing sem tefur upplýsingar. Ef verðið birtist ekki fyrr en eftir hálfa sekúndu af animation þá er hreyfingin að vinna á móti kaupferlinu.

Parallax og læst skroll. Þetta lítur vel út í myndbandi á Dribbble og verður óþolandi á fartæki, sem er meirihluti heimsókna á íslenskum vefjum.

Hreyfing án ástæðu. Ef þú getur ekki sagt hvað notandinn skilur betur vegna hreyfingarinnar þá er hún skreyting, og skreyting á vef kostar bæði hleðslutíma og athygli.

Almenna reglan sem við notum hjá Flóru: hreyfing á forsíðunni má hafa vörumerkjahlutverk, hreyfing dýpra í vefnum þarf að hafa verklegt hlutverk. Enginn hefur nokkurn tíma keypt í netverslun vegna þess hvernig síðan skrollaði á vörusíðunni.

Aðgengi og hleðslutími

Tveir hlutir sem oft gleymast.

Sumir fá vanlíðan af hreyfingu á skjá, og stýrikerfi þeirra sendir merki um það. Það heitir prefers-reduced-motion og góður vefur les það og slekkur á stærstu hreyfingunum sjálfkrafa. Þetta er lítil viðbót í kóðanum og hún er hluti af WCAG-kröfum, sem eiga við um opinbera aðila á Íslandi. Meira um það hér: Þarf vefsíðan mín að uppfylla WCAG?

Hreyfing á líka að nota þá eiginleika sem vafrinn getur hreyft á skjákortinu, sem í praxís eru transform og opacity. Þegar hreyfing er byggð á öðru, til dæmis hæð eða stöðu í flæði, þá fer vafrinn að reikna upp á nýtt í hverjum ramma og síðan hikstar á ódýrari símum. Þetta sést ekki á MacBook hönnuðarins og það er einmitt ástæðan fyrir því að hreyfingu á að prófa á raunverulegu tæki.

Hvað hreyfihönnun kostar í vefverkefni

Hreyfihönnun er sjaldnast sérstakur liður á tilboði, hún er hluti af hönnun og útfærslu. En umfangið breytir tímanum.

• Grunnhreyfing á fyrirtækjavef, hover-ástönd, opnun valmyndar, mjúk innkoma efnis: innan við dagur í útfærslu og oft innifalið

• Sérhönnuð hreyfing í hero-hluta með sviðsetningu og tímalínu: einn til þrír dagar

• Hreyfð vörusaga eða gagnvirk sýning á vöru: viku eða meira, og þarf sérstakt samtal um umfang

Í Framer, sem við notum fyrir flesta vefi Flóru, er stór hluti af þessu innbyggt. Umbreytingar milli ástanda, easing og scroll-hreyfing eru stillingar í hönnunarverkfærinu sjálfu í stað þess að vera kóði sem þarf að skrifa og viðhalda. Það er ein af ástæðunum fyrir því að við skiptum yfir, og við höfum skrifað um það hér: Er Framer gott fyrir fyrirtækjavefi?

Algengar spurningar

Er hreyfihönnun sama og animation?

Þau eru notuð sem samheiti í daglegu tali og það er í lagi. Ef greint er á milli þá er animation einstök hreyfing og hreyfihönnun heildarákvörðunin um hvernig hreyfing hegðar sér yfir allan vefinn, þar með talið hvenær hún er engin.

Hægir hreyfihönnun á vefsíðunni?

Rétt útfærð hreyfing hefur nánast engin áhrif á hleðslutíma, því hún notar eiginleika sem vafrinn hreyfir á skjákortinu. Það sem hægir á vefjum er þungt myndefni og stór JavaScript-pakkar sem stundum koma með hreyfibókasöfnum. Vandinn er þá pakkinn, ekki hreyfingin.

Þarf lítill fyrirtækjavefur hreyfihönnun?

Hann þarf grunninn: sýnileg hover-ástönd, mjúka opnun valmyndar og staðfestingu þegar form er sent. Þetta er ódýrt og það munar mest. Sviðsett hero-hreyfing er valkostur sem borgar sig þegar vörumerkið er hluti af sölunni.

Hvernig veit ég hvort hreyfingin á vefnum mínum sé of mikil?

Opnaðu vefinn á síma í lélegu sambandi og reyndu að finna eitt tiltekið atriði, til dæmis verð eða opnunartíma, á tíu sekúndum. Ef þú þarft að bíða eftir hreyfingu til að lesa það sem þú komst til að lesa þá er hún of mikil.

Get ég fengið hreyfihönnun á vefinn sem þegar er í loftinu?

Já, og það er oft ódýrasta einstaka lagfæringin sem til er. Hover-ástönd, umbreytingar í valmynd og staðfesting í formum má bæta við án þess að hreyfa við hönnun eða innihaldi.

Viltu skoða hreyfinguna á vefnum þínum?

Sendu okkur slóðina og við gefum þér þrjú atriði sem má bæta og eitt sem ætti að fara. Það kostar ekkert og tekur okkur hálftíma. Skoðaðu tilboðssíðuna okkar eða heyrðu bara í okkur.