Pradedančiųjų vadovas apie reaguojantį mobilųjį UX

Įvadas

Mobiliuosius įrenginius vis dažniau naudojate mobiliuosiuose įrenginiuose, todėl svetainės ir programėlės, kurios sklandžiai prisitaiko prie skirtingų ekrano dydžių ir orientacijų, yra labai svarbios, kad naudotojui būtų patogu naudotis. Tai užtikrina, kad naudotojai įsitrauktų ir sugrįžtų dar kartą, nesvarbu, kokiu įrenginiu jie naudojasi.

Kūrėjai taiko įvairią geriausią reaguojančio dizaino praktiką, įskaitant CSS medijos užklausas, kuriomis nustatomi skirtingų ekrano dydžių lūžio taškai, kad naudotojai galėtų patogiai naršyti svetainėse ir žiniatinklio programėlėse savo konkrečiuose įrenginiuose. Šiomis užklausomis keičiamas stulpelių išdėstymas, šrifto matmenys, vaizdų mastelis ir turinio matomumas, užtikrinant nuoseklų svetainės veikimą skirtinguose ekrano matmenyse ir atitinkamai pritaikant turinį bei struktūras. Toks reaguojantis dizainas mobiliesiems įrenginiams UX (angl. user experience) leidžia lengvai naudotis programomis ir yra patrauklus mobiliuosiuose įrenginiuose. Taigi naudotojai gali be vargo naršyti, sąveikauti ir pasiekti turinį įvairiuose įrenginiuose ar mobiliosiose interneto naršyklėse internete.

Šiame straipsnyje supažindinsime jus su reaguojančiu mobiliuoju vartotojo sąsajų dizainu, pabrėšime jo svarbą, geriausią praktiką ir kitus aspektus.

Taigi, pradėkime mokytis daugiau apie prisitaikantį mobilųjį UX.

Kas yra "Responsive Mobile UX"?

"Responsive mobile UX" - tai požiūris, pagal kurį daugiausia dėmesio skiriama svetainės ir žiniatinklio programų dizainui ir naudotojo patirčiai įvairiuose mobiliuosiuose įrenginiuose. Prisitaikantis mobilusis dizainas užtikrina, kad sukurta interneto svetainė ir žiniatinklio programa būtų pritaikyta ir tiksliai veiktų daugelyje mobiliųjų įrenginių su įvairaus dydžio ir raiškos ekranais.

Šiuo atveju terminas "reaguojantis" reiškia, kad svetainės ir žiniatinklio programos sąsaja gali prisitaikyti prie skirtingų mobiliųjų įrenginių ir jų funkcijų. Įgyvendinant reaguojančią mobiliąją UX siekiama pagerinti naudotojų patirtį kuriant patrauklias, patrauklias ir patogias sąsajas.

Vienas iš būdų, kaip išspręsti reaguojančio dizaino problemą, yra permąstyti navigaciją. Mažuose ekranuose tam tikrus meniu elementus galite paslėpti naudodami mėsainio piktogramą, kad sutaupytumėte vietos. Taip naudotojai galės pasiekti visus reikiamus elementus neperkraudami ekrano.

Alternatyvus būdas - naudoti universalų stulpelių formatą, kuris keičia rodomų stulpelių skaičių priklausomai nuo ekrano dydžio. Tai leidžia programėlei efektyviai išnaudoti erdvę ir užtikrinti sklandų veikimą įvairiuose įrenginiuose. Svarbu apgalvotai ir apgalvotai kurti programėlę, kad ji būtų kuo patogesnė naudotojui.

"Responsive Mobile UX" svarba

Prisitaikanti mobilioji vartotojo sąsaja turi keletą svarbių aspektų, todėl ją reikia įtraukti į svetainių ir interneto programų kūrimą.

Kai kurios iš šių svarbių priežasčių yra šios:

• Svarbu, kad žiniatinklio svetainės ir žiniatinklio programos kūrimo sąnaudos būtų efektyvios. Tačiau turėti atskiras svetaines ir programėles mobiliesiems ir ne mobiliesiems naudotojams gali būti labai brangu. Įtraukus reaguojantį dizainą, išlaidas galima sumažinti, nes nereikia kurti specialiai mobiliesiems įrenginiams skirtos svetainės.
• Jautrusis dizainas leidžia greitai ir lengvai atlikti pakeitimus ir nereikia tvarkyti dviejų atskirų svetainių. Šis lankstumas yra neįkainojamas atliekant nedidelius dizaino pakeitimus ar taisant klaidas - tai vienkartinė užduotis.
• Tikslas - sudominti naudotojus ir užtikrinti lengvą navigaciją, skatinančią pakartotinius apsilankymus. Lėtai įkraunama mobilioji svetainė arba mažos raiškos vaizdai gali neigiamai paveikti jūsų įmonės įvaizdį ir rodyti profesionalumo stoką.
• Dar vienas prisitaikančiojo mobiliojo UX privalumas - maksimaliai padidinti optimizavimo paieškos sistemoms (SEO) naudą. SEO strategijos pagerina pozicijas "Google" paieškos puslapiuose ir padidina matomumą potencialiems naudotojams. Užtikrinus aukštesnę poziciją paieškos rezultatuose, padidėja tikimybė būti atrastam.

Pagrindinės į mobiliuosius įrenginius reaguojančių svetainių funkcijos

Štai keturios svarbiausios savybės, į kurias reikia atsižvelgti kuriant mobiliesiems įrenginiams pritaikytą dizainą:

• Geresnis skaitomumas:

Kad išvengtumėte įprastos klaidos, kai tinklalapiai tik sumažinami mobiliesiems ekranams, sutelkite dėmesį į teksto didinimą ir turinio išdėstymo optimizavimą. Tai neleis naudotojams kovoti su mažu, netinkamai išdėstytu tekstu ir užtikrins sklandesnę naršymo patirtį.

• Optimizuotas paveikslėlio ir mygtuko rodymas:

Aiškus mygtukų matomumas ir prieinamumas yra labai svarbūs, kad naudotojas būtų patenkintas. Užtikrinkite, kad tokie mygtukai, kaip prisijungimo ar navigacijos elementai, būtų dideli ir gerai suformatuoti - taip sumažinsite nusivylimą ir neleisite naudotojams palikti svetainės dėl navigacijos sunkumų.

• Pritaikoma vaizdo orientacija:

Atsižvelgiant į tai, kad mobiliuosiuose įrenginiuose dažnai keičiami kraštovaizdžio ir portreto vaizdai, labai svarbu išlaikyti turinio ir išdėstymo nuoseklumą. Taip išvengiama naudotojų patirties sutrikimų dėl trūkstamų paveikslėlių ar funkcinių problemų keičiant vaizdus.

• Supaprastintas žiniatinklio dizainas:

Mobiliųjų įrenginių naudotojai greitai atsisako lėtai įkraunamų svetainių ir žiniatinklio programėlių ir renkasi greitesnes alternatyvas. Teikite pirmenybę lengvam dizainui, kuris lengvai įkeliamas, palieka teigiamą pirmąjį įspūdį ir sustiprina naudotojų lūkesčius dėl programos.

"Responsive Mobile UX" vizualinis dizainas

Kuriant reaguojantį maketą reikia atsižvelgti į keletą aspektų. Tai procesas, kurio metu būtina sukurti struktūrizuotą dizaino sistemą ir turinio hierarchiją įvairiuose įrenginiuose.

Sklandus ir lankstus išdėstymas: Sklandūs ir pritaikomi maketai yra svarbios reaguojančio žiniatinklio dizaino idėjos. Sklandus dizainas keičiasi priklausomai nuo įrenginio pločio, o lankstus dizainas leidžia keisti puslapio elementų dydį priklausomai nuo turimos vietos.

Veiksniai, į kuriuos reikia atsižvelgti naudojant sklandžius ir pritaikomus maketus:

• Žiniasklaidos užklausos leidžia CSS taisyklėmis nustatyti išdėstymo elgseną skirtingų dydžių ekranuose.
• Padidinus erdvę aplink puslapio elementus, pagerėja vizualinė struktūra, grožis ir palengvėja skaitymas.
• Šriftas turi būti įskaitomas bet kokio dydžio ekrane, nepriklausomai nuo įrenginio.

Jautrūs vaizdai: Vaizdai, kurie reaguoja į turimą erdvę, nekeisdami kokybės, vadinami reaguojančiais vaizdais. Reaguojančiam žiniatinklio dizainui labai svarbu užtikrinti nuoseklų vaizdų rodymą įvairiuose įrenginiuose be iškraipymų ar pikselių mažesniuose ekranuose.

Veiksniai, į kuriuos reikia atsižvelgti naudojant reaguojančius vaizdus:

• Pasirinkite neprarandantį vaizdo formatą, pavyzdžiui, PNG, kad keičiant dydį būtų išsaugota vaizdo kokybė.
• Sumažinkite vaizdų failų dydį, kad pagerintumėte našumą.

Prisitaikanti tipografija: Tai - tipografijos elementų, tokių kaip šrifto dydis, eilučių ilgis ir aukštis, keitimas, siekiant užtikrinti geriausią skaitomumą ir vizualinį patrauklumą įvairiuose įrenginiuose ir ekrano dydžiuose.

Veiksniai, į kuriuos reikia atsižvelgti naudojant prisitaikantį tipografinį dizainą:

• Šriftų dydžiai pakeisti taip, kad atitiktų įvairių dydžių ekranus.
• Siekiant sumažinti nereikalingą horizontalų akių judesį, naudojami optimalūs linijų ilgiai.
• Eilučių aukštis, kuris reiškia vertikalų tarpą tarp eilučių, keičiamas siekiant užtikrinti pakankamą tarpą tarp eilučių ir išvengti teksto netvarkos.

Veiklos rezultatų gerinimas: Naudotojo sąsajos ir vartotojo sąsajos (UI/UX) dizaino srityje našumo didinimas apima trumpesnį krovimo laiką, mažesnį išteklių naudojimą ir geresnę naudotojo patirtį, nes sąveika vyksta sklandžiai ir greitai.

Tai apima įvairius metodus ir geriausias strategijas, pvz:

• Failų dydžių mažinimas ir optimizavimas
• Naršyklės spartinimo ir saugojimo sistemų naudojimas
• CDN naudojimas siekiant efektyviai pristatyti statinius išteklius.

Pertraukos taškai ir medijos užklausos: Lūžio taškai - tai iš anksto nustatyti dizaino taškai, kuriuose būtina atlikti esminius maketo pakeitimus, kad būtų užtikrinta ideali naudotojo patirtis. Žiniasklaidos užklausos yra CSS taisyklės, kurios paleidžiamos, kai įvykdomi tam tikri kriterijai. Šie kriterijai paprastai grindžiami naudotojo ekrano pločiu, aukščiu, orientacija arba įrenginio atributais. Tai leidžia dizaineriams apibrėžti konkrečius ekrano pločius arba įrenginio sąlygas, kad būtų galima koreguoti svetainės ar programos dizainą ir stilių pagal skirtingus ekrano dydžius ar orientacijas.

Nuolatinis keitimas ir tobulinimas: Nuolatiniai iteracijų ir tobulinimo ciklai: nuolat tobulinamas UI/UX dizainas. Svarbūs elementai yra aktyvus naudotojų nuomonės prašymas apklausose, bandymų sesijose ar atsiliepimų formose, naudotojų elgsenos duomenų nagrinėjimas, siekiant nustatyti modelius ir įžvalgas, taip pat atsiliepimų ir duomenų analizė, siekiant nustatyti konkrečias sritis, kuriose reikia tobulinti UI / UX dizainą.

Kaip sukurti reaguojantį mobilųjį UX?

Prieš kurdami prisitaikantį mobilųjį UX, turėtumėte atkreipti dėmesį į tai, kad dizainas turi būti naudingas, patogus, lengvai randamas, prieinamas, pageidaujamas ir patikimas.

• Naudinga: Mobiliojo telefono UX turi atitikti naudotojų lūkesčius.
• Galima naudoti: Jis turėtų būti aprašomas pats savaime.
• Pageidautina: Dizainas turi kelti teigiamą susižavėjimą interneto svetaine ir žiniatinklio programomis.
• Galima rasti: Navigacija turi būti paprasta.
• Galimybė naudotis: Žmonės su negalia turi turėti galimybę lengvai naudotis programa ir turėti tokią pačią naudotojo patirtį kaip ir neįgalieji.
• Patikimas: Vartotojas turi galėti naudotis svetaine ir žiniatinklio programa.

Kad atsižvelgtų į pirmiau minėtas aplinkybes ir sukurtų prisitaikantį mobilųjį UX, dizaineriai turi įgyvendinti šiuos proceso etapus:

1. Moksliniai tyrimai: Norėdami sukurti mobiliesiems įrenginiams pritaikytą UX, pirmiausia turite atlikti naudotojų tyrimus, kad suprastumėte jų tikslinę auditoriją ir reikalavimus. Šio tyrimo metu turite nustatyti jų tikslą, lūkesčius, pageidavimus ir problemas, kad atitinkamai sukurtumėte mobiliąją patirtį.
2. Sukurkite dizaino planą: Kitame žingsnyje turite sukurti naudotojų asmenybes ir scenarijus, kuriais vadovaudamiesi galėsite pasirinkti dizaino sprendimus.
3. Įgyvendinkite požiūrį, orientuotą į mobiliuosius įrenginius: Taikant šį metodą, internetinė programa ir svetainė pradedama kurti nuo mobiliosios versijos, o vėliau pereinama prie darbalaukio versijos. Atsižvelgiant į mažesnius mobiliųjų įrenginių ekranus, labai svarbu kurti svetainę ar taikomąją programą taip, kad ją būtų lengva naudoti šiuose įrenginiuose. Taikant "mobile-first" požiūrį pabrėžiamas svarbiausias turinys ir sąveikos, skirtos mobiliojo naudotojo patirčiai.
4. Naudokite reaguojančio dizaino sistemą: Kad sukurtumėte reaguojantį mobilųjį UX, pasirinkite atitinkamą reaguojančio dizaino sistemą, pvz., "Bootstrap", "Foundation" ir kt. Ji suteikia iš anksto paruoštus komponentus ir reaguojančią tinklelio sistemą, kuri leidžia palengvinti kūrimo procesą.
5. **Atsparus dizaino naudojimas: **Atsparus dizainas, užtikrinantis lankstumą įvairiems ekrano dydžiams ir orientacijoms. Šiuo tikslu nubraižykite svetainės maketą, pritaikydami skirtingų įrenginių ekrano dydžių skirtumus.
6. **Pagalvokite apie vizualinį dizainą: Vadovaukitės **mobiliojo vartotojo sąsajos vizualiniu dizainu, naudodami vieningą spalvų schemą, tipografiją ir vaizdus. Projektavimo procese turėtumėte atsižvelgti į stilių ir formatavimą. Naudokite tinkamas vaizdines nuorodas, pavyzdžiui, piktogramas ir mygtukus, kad naudotojams būtų lengviau orientuotis sąsajoje.
7. Numatyti riziką: Numatykite galimus reagavimo sunkumus, kurie gali iškilti vėlesniuose proceso etapuose, ir aktyviai spręskite juos pradiniuose projektavimo etapuose.
8. **Atsparumo bandymas: **Svarbu, kad, sukūrus mobiliesiems įrenginiams pritaikytą vartotojo sąsają, ji būtų išbandyta realiuose įrenginiuose ir užtikrintas sklandus jos veikimas įvairiose naršyklėse. Tam turite atlikti skirtingų naršyklių arba skirtingų įrenginių testavimą, kuris užtikrins mobiliojo UX jautrumą įvairiuose įrenginiuose ir naršyklėse.

Galite rinktis debesijos pagrindu veikiančią testavimo platformą, pavyzdžiui, "LambdaTest". Tai dirbtiniu intelektu paremta testų orkestravimo ir vykdymo platforma, leidžianti atlikti testus daugiau nei 3000 realių įrenginių, operacinių sistemų ir naršyklių derinyje. Ji teikia keičiamo mastelio debesijos tinklą, kuris taip pat leidžia atlikti automatizuotus bandymus naudojant įvairias testavimo sistemas, pavyzdžiui, "Cypress", "Selenium", "Appium" ir kt. Be to, galite atlikti tiesioginius interaktyvius bandymus realiose naršyklių aplinkose. Tai leidžia testuoti įvairiose platformose, pavyzdžiui, "Windows", "MacOS", "Android" ir "iOS", senesnėse ir naujesnėse stalinių kompiuterių ir mobiliųjų įrenginių naršyklėse.

9. Vartotojų lūkesčių ir atsiliepimų tenkinimas: Naudotojo lūkesčius, susijusius su žiniatinklio programa, labai svarbu suprasti kuriant mobiliesiems įrenginiams pritaikytą UX. Pavyzdžiui, mobiliųjų įrenginių naudotojai paprastai reikalauja greito turinio įkėlimo. Jie labiau linkę palikti svetainę, jei ji lėtai įkeliama, priešingai nei stacionariųjų kompiuterių naudotojai, kurie gali būti kantresni. Todėl kuriant į mobiliuosius įrenginius reaguojančią žiniatinklio taikomąją programą naudinga teikti pirmenybę greitam krovimo laikui. Taip pat galite apsvarstyti animacijas ir mikrointerakcijas, kad praturtintumėte naudotojo patirtį ir pasiūlytumėte grįžtamąjį ryšį.

Geriausia reaguojančio mobiliojo UX praktika

Kai kurios geriausios praktikos rūšys, kurias turėtumėte įtraukti į savo darbo procesą kuriant reaguojantį mobilųjį UX, yra šios:

• Apsvarstykite galimybę vietoj rastrinės grafikos naudoti SVG, ypač piktogramoms ir logotipams.
• Užtikrinkite, kad kiekviename tinklalapyje būtų bent trys lūžio taškai (mobilusis, planšetinis ir stalinis kompiuteris).
• Naudokite kortelių sąsajos modelius kaip turinio talpyklas, taip supaprastindami turinio išdėstymą ir taupydami laiką.
• Taikykite minimalistinį dizaino metodą.
• Atsižvelgdami į ribotą mažesnių ekranų erdvę, dizaineriai turi nustatyti, koks turinys išlieka nuolat matomas, o koks gali būti paslėptas.
• Be to, dizaineriai tarp nuorodų ir mygtukų turėtų įterpti pakankamai baltosios erdvės, kad išvengtumėte atsitiktinių paspaudimų, kurie gali sukelti naudotojų nusivylimą.

Išvada

Šiame straipsnyje apie "Responsive Mobile UX" pabrėžiama, kaip svarbu teikti pirmenybę mobiliesiems naudotojams ir kurti patirtį įvairiuose įrenginiuose. Naudotojų poreikių supratimas, planavimas pagal "mobile-first" principą ir reaguojančio dizaino rėmų naudojimas padeda kurti intuityvias ir patogias sąsajas. Testavimas, grįžtamojo ryšio rinkimas ir įžvalgomis paremta iteracija užtikrina nuolatinį tobulėjimą. Optimizuojant našumą ir užtikrinant prieinamumą neatsiejama įtraukiančios patirties dalis. Vadovaudamiesi šiais principais, pradedantieji dizaineriai gali kurti paveikią mobiliąją patirtį su naudotojais skaitmeninėje erdvėje.