Mobile-first դիզայն OpenCart-ի համար՝ քանի որ հայ գնորդը հեռախոսում է
Mobile-first դիզայն OpenCart-ի համար՝ քանի որ հայ գնորդը հեռախոսում է
Հայաստանում օնլայն գնումների մեծ մասը կատարվում է սմարթֆոնից։ Մարդիկ թերթում են ապրանքները մետրոյում, սրճարանում, հերթ կանգնած։ Եթե ձեր OpenCart խանութը նախագծված է առաջին հերթին համակարգչի համար և միայն հետո հարմարեցված հեռախոսին, դուք կորցնում եք գնորդների մեծամասնությանը։ Mobile-first մոտեցումը ճիշտ հակառակն է. նախ նախագծում ենք փոքր էկրանի համար, ապա ընդլայնում մեծ էկրանների։
Ինչու mobile-first
Փոքր էկրանից սկսելը ստիպում է կենտրոնանալ ամենակարևորի վրա՝ ապրանքի նկար, գին, գնման կոճակ։ Երբ սկսում ես աշխատասեղանից, հեշտ է ծանրաբեռնել էջը, որը հետո անհնար է խցկել հեռախոսի էկրանին։ Google-ն էլ օգտագործում է mobile-first indexing, այսինքն՝ վարկանիշավորում է ձեր կայքի մոբայլ տարբերակը։
Ադապտիվ թեմա
OpenCart 4-ի կանխադրված թեման ադապտիվ է (responsive)՝ կառուցված Bootstrap-ի վրա, և լավ հիմք է։ Թեմա ընտրելիս կամ պատվիրելիս միշտ ստուգեք, թե ինչպես է այն իրեն պահում 360px լայնության էկրանին։ Խուսափեք թեմաներից, որոնք գեղեցիկ են դեմո-էջում, բայց հեռախոսում ունեն մանր տեքստ կամ ճզմված տարրեր։
Mobile-first հիմնական սկզբունքներ
- Նախ նախագծիր 360-390px էկրանի համար
- Մեկ սյունակ՝ բովանդակության հոսքի համար
- Կարևորը՝ էկրանի վերևում (գին, կոճակ)
- Ընդլայնիր դիզայնը մեծ էկրաններին, ոչ հակառակը
Հպման համար հարմար կառավարման տարրեր
Մատը մկնիկի կուրսոր չէ։ Կոճակները և հղումները պետք է լինեն բավական մեծ (նվազագույնը ~44x44px) և բավարար հեռավորությամբ, որպեսզի օգտատերը սխալմամբ սխալ տեղ չսեղմի։ Drop-down մենյուները փոխարինեք հպման համար հարմար hamburger մենյուով, իսկ ֆիլտրերը՝ ստորին sheet-ով կամ առանձին էկրանով։
Արագ մոբայլ բեռնում
Հեռախոսը հաճախ աշխատում է 4G կամ անկայուն ինտերնետով։ Արագության համար. օգտագործեք WebP նկարներ, lazy loading, նվազեցրեք JavaScript-ը և կիրառեք քեշավորում։ Հիշեք՝ մոբայլ օգտատերն ավելի անհամբեր է, և 3 վայրկյանից ավելի սպասելը հաճախ նշանակում է կորսված գնում։
Մոբայլ արագության արագ քայլեր
- WebP + lazy loading նկարների համար
- Նվազագույն JavaScript above-the-fold-ում
- Քեշավորում և gzip/brotli
- Թեստ իրական 4G պայմաններում
Պարզեցված մոբայլ checkout
Checkout-ը մոբայլում ամենակրիտիկական կետն է, որտեղ զամբյուղները լքվում են։ Նվազեցրեք դաշտերը մինչև անհրաժեշտ նվազագույնը, օգտագործեք ճիշտ ստեղնաշարի տիպեր (թվային՝ հեռախոսի համար), առաջարկեք guest checkout և ցույց տվեք տեղական վճարման տարբերակները՝ ArCa, Idram, EasyPay, Telcell, ինչպես նաև առաքումը Haypost-ով կամ սուրհանդակով։ Գները ցույց տվեք ֆ (AMD)՝ առանց անակնկալների։
Sticky ավելացնել-զամբյուղ կոճակ
Մոբայլ ապրանքի էջում երբ օգտատերը գլորում է ներքև՝ նկարագրությունը կարդալու համար, գնման կոճակը կարող է անհետանալ։ Կպչուն (sticky) ստորին գոտի՝ գնով և Ավելացնել զամբյուղ կոճակով, պահում է գործողությունը միշտ հասանելի և բարձրացնում կոնվերսիան։
Ընթեռնելի տիպոգրաֆիա
Հիմնական տեքստի չափը պետք է լինի առնվազն 16px, բավարար տողերի միջակայքով։ Չափից շատ մանր տառերը ստիպում են օգտատիրոջը zoom անել, ինչը վատ փորձառություն է։ Կոնտրաստը ևս կարևոր է՝ բացօթյա պայմաններում հեռախոսի էկրանը կարդալու համար։
Թեստ իրական սարքերի վրա
Էմուլյատորը լավն է, բայց ոչ բավարար։ Փորձարկեք ձեր խանութն իրական հեռախոսների վրա՝ տարբեր էկրանի չափսերով և բրաուզերներով։ Անցեք ամբողջ ճանապարհը. գլխավոր էջ, որոնում, ապրանք, զամբյուղ, checkout, ինչպես իրական հայ գնորդը կանի։
Մոբայլ թեստի ստուգաթերթ
- Կոճակները հեշտ սեղմվում են մատով
- Տեքստն ընթեռնելի է առանց zoom-ի
- Checkout-ն աշխատում է մի ձեռքով
- Տեղական վճարումները տեսանելի են
Եզրակացություն: Հայաստանում mobile-first դիզայնը ընտրություն չէ, այլ անհրաժեշտություն, քանի որ ձեր գնորդների մեծ մասն արդեն հեռախոսում է։ Արագ բեռնում, հպման համար հարմար տարրեր, պարզեցված checkout տեղական վճարումներով և sticky գնման կոճակ՝ սրանք ուղղակիորեն վերածվում են ավելի շատ ավարտված պատվերների։
