Аналитикаға қараңыз: көп компанияда келушілердің 70–80%-ы телефоннан кіреді. Ал сайт көбіне үлкен мониторда жобаланған — дизайнер десктоп макетін тапсырып, мобильді нұсқаны «бір амалын тауып сыйғызған». Техникалық тұрғыдан ол ашылады. Бірақ пайдалану ыңғайсыз, сондықтан адам өтінім қалдырмай кетеді.
Төменде мобильді нұсқаның типтік қателерін талдаймыз: бірінші экран, мәзір, формалар, батырмалар, жылдамдық, қалқымалы терезелер мен контент. Соңында — өз телефоныңызбен сайтты жарты сағатта тексеретін шағын чек-лист және нүктелік түзетулер жеткіліксіз болып, адаптив-редизайн қажет болатын белгілер.
Неліктен мобильді нұсқа «сығылған десктоп» емес
Адаптивті бет құруды көбіне тура мағынада түсінеді: «бәрі сол қалпында, тек бағандар тігінен тізілген». Сайт телефонда ашылады, ештеңе ыдырамайды — демек, мобильді нұсқа бар. Формальды түрде — иә. Іс жүзінде — жоқ.
Телефонда адамның контексі басқа. Кішкентай экран, курсордың орнына саусақ, кеңсе Wi-Fi-ының орнына мобильді интернет және автобуста келе жатқанда немесе кофе күткендегі бір минуттық назар. «Десктоптан» жиналған сайт бұл контексті елемейді.
Мобильді сценарийдің десктоптан айырмашылығы
- Экран бірнеше есе кіші — оған бүкіл бет емес, бір ғана мағыналық блок сыяды
- Дәл курсордың орнына — саусақ, ал тышқанмен меңзеу мүлдем жұмыс істемейді
- Сессиялар қысқа: адам сайтты жолда, істер арасында қарайды, оны үнемі алаңдатады
- Байланыс тұрақсыз — кеңседе «ұшып тұрған» бет жолдағы 4G-де азаппен жүктеледі
- Экрандық пернетақтада мәтін теру қиын, форманың әр өрісі қымбатқа түседі
- Кету оңай: бәсекелестер сол іздеу нәтижесінде, сізден екі-ақ тап қашықтықта
Бұл айырмашылықтардың әрқайсысы жеке алғанда ұсақ-түйек сияқты. Бірге олар мобильді беттің десктоптан қысқа, қарапайым және жылдам болуы керектігін білдіреді — дәл сондай, бірақ тар емес.
Жобалау қатесі метрикаларда қалай көрінеді
Мәселеге күдіктену үшін аудит қажет емес. Өз аналитикаңыздағы сегменттерді салыстыру жеткілікті.
- Трафик бірдей болғанда мобильден өтінімге конверсия десктоптан екі-үш есе төмен
- Дәл мобильді жарнамадан бас тарту пайызы жоғары
- Адамдар форманы ашады, бірақ жібермейді
- Телефоннан беттегі уақыт айтарлықтай қысқа, қарау тереңдігі — бір экран
Біз Qazaqsoft-та UX-аудиттерде әрқашан дерлік мобильді және десктоп воронкаларын салыстырудан бастаймыз. Олардың арасындағы алшақтық әдетте өзі-ақ айтып тұрады: трафик бірдей, ал өтінімдер — жоқ.
«Мобильден» жобалау деген не
Mobile-first тәсілі — сәнді сөз емес, жұмыс тәртібі. Алдымен телефон экраны жобаланады: адам бірінші нені көреді, қайда басады, өтінімді қалай қалдырады. Десктоп кейін толықтырылады.
Бұл — тек бет құру емес, контент басымдықтарының мәселесі. Орын аз болғанда не маңызды екенін адал шешуге тура келеді: өтінім батырмасы ма, әлде «нарықта 15 жыл» туралы баннер ме. Үлкен мониторда бұл шешімді кейінге қалдыруға болады. Телефонда — болмайды.
Телефондағы бірінші экран: оған не сыюы керек
Бірінші экран — айналдырғанға дейін көрінетін аумақ. Телефонда бұл өте шағын орын, оны қосымша сайт шапкасы, браузер панелі мен cookies жолағы жеп қояды.
Адам бірінші экранға бірнеше секунд жұмсайды. Осы уақытта қайда келгенін және мұнда не істеу керектігін түсінбесе, ол шұқшимайды — іздеуге қайта оралады.
Бірінші экранға сыюы тиіс төрт нәрсе
- Не ұсынатыныңыз — нақты тақырыпат, «бизнесіңізге инновациялық шешімдерсіз»
- Кімге және қайда — қала, сала, сегмент: адам өзін тануы керек
- Мақсатты әрекет — өтінім, есептеу немесе жазылудың көзге түсетін батырмасы
- Жылдам байланыс жолы — форманы ұнатпайтындар үшін телефон немесе мессенджер
Төртеуі бірдей сыймаса, тақырыпат пен батырмадан басқасының бәрін құрбан етіңіз. Осы екі элемент — бірінші экранның өзі.
Орынды көбіне не бекер жейді
Біз талдайтын жобалардың көбінде бірінші экранды жауаптар емес, декорация алып тұрады.
- Алып логотип пен қайталанатын сілтемелері бар үрленген шапка
- Ешкім соңына дейін қарамайтын абстрактілі баннерлі слайдер
- «Біздің сайтқа қош келдіңіз» іспетті сәлемдесу мәтіні
- Астында тақырыпат оқылмайтын, бүкіл экранды алып жатқан сток фото
- Экранның үштен бірін жауып тұрған cookies немесе акция жолағы
Әрбір осындай элемент мән мен батырманы төменге, көрінбейтін жерге ығыстырады. Келушілердің бір бөлігі оларға жетпей-ақ қояды.
Бірінші экранды жылдам тексеру
Сайтты өз телефоныңызда инкогнито режимінде ашып, бес секунд белгілеңіз. Айналдырмаңыз.
Үш сұраққа жауап беріңіз: не ұсынылып жатқаны түсінікті ме; бұл сізге арналғаны түсінікті ме; өтінім қалдыру үшін не басу керегі көрініп тұр ма. Кем дегенде бір жауап «жоқ» болса — бірінші экран жұмыс істемейді.
Формалар: ұзындық, пернетақталар, телефон маскалары
Өтінім формасы — мобильді конверсия ең көп жоғалатын жер. Адам шешім қабылдап, форманы ашты — үшінші өрісте кетіп қалды. Телефонда әрбір артық өріс десктоптағыдан әлдеқайда қымбат: экрандық пернетақтада теру баяу әрі ыңғайсыз.
Қанша өріс қалдыру керек
Бірінші өтінім үшін есім мен телефон жеткілікті. Қалғанын менеджер әңгімеде нақтылайды — әрі мұны формадан жақсырақ істейді.
- Оған шынымен ешкім жазбаса, email-ды алып тастаңыз
- Мекенжай, бюджет пен жоба егжей-тегжейін алғашқы байланыстан кейінгі кезеңге шығарыңыз
- Түсініктемені қалдырыңыз, бірақ міндетті емес етіңіз
- Өріс төрттен көп болса, форманы прогресі бар қысқа қадамдарға бөліңіз
Біздің жобаларда екі өрістен тұратын қысқа форма егжей-тегжейлі сауалнамадан тұрақты түрде көбірек жіберілім береді. Егжей-тегжейді өріспен емес, дауыспен анықтаған дұрыс.
Әр өріске дұрыс пернетақта
Адам телефон өрісін тапағанда сандық пернетақта ашылуы керек. Email өрісінде — @ таңбасы бар пернетақта. Оның орнына кәдімгі әріптік пернетақта ашылса, адам оны қолмен ауыстырады — кейбірі форманы дәл осы жерде тастап кетеді.
- Сандық пернетақта ашылуы үшін телефон өрісінің типі tel болуы керек
- Email өрісі — email типі және бірінші әріптің автобас әріптенуі өшірілген
- Автотолтыру жұмыс істеуі тиіс: телефон мен есім құрылғы жадынан бір таппен қойылады
- Фокустағы өрісті пернетақта жаппауы керек — бет өздігінен жылжуға міндетті
Бұл — әзірлеушінің санаулы минуттық жұмысы. Бірақ «десктоптан» жиналған формаларда бұл үнемі ұмыт қалады.
Телефон маскасы: көмектесе ме, кедергі ме
Жақсы маска +7-ні өзі қояды, теру барысында нөмірді пішімдейді және артық таңбаларды кешіреді. Жаманы — буферден нөмірді қоюға бермейді, дұрыс енгізуге «ұрсады» және терілгенді өшіріп тастайды.
- Маска кез келген пішімдегі нөмірді буферден қоюды қабылдауға міндетті
- Ел кодын теруге мәжбүрлемей, алдын ала қойған дұрыс
- Қатені теру кезінде қызылмен емес, жіберу әрекетінен кейін көрсетіңіз
- Қате мәтіні жай «қате пішім» емес, нені түзеу керегін айтуы тиіс
Және сайттың әр жаңартуынан кейін форманы нақты телефоннан міндетті түрде тексеріңіз. Сынған маска — «өтінімдер кенет жоғалып кеттінің» ең жиі себептерінің бірі.
Қызмет
Мобильді нұсқа өтінімдеріңізді қай жерде жоғалтатынын табамыз
Мобильді нұсқаға UX-аудит жүргіземіз: клиент жолын жарнамадан жіберілген формаға дейін өтіп, бірінші экранды, мәзірді, формаларды, батырмалар мен жылдамдықты нақты құрылғыларда тексереміз. Түзетулер тізімін басымдық бойынша береміз — жылдам жеңістерден адаптив-редизайн міндеттеріне дейін, әрқайсысының әсерін бағалап.
Жүктелу жылдамдығы мен ауыр суреттер
Телефонда сайтты көбіне жарнамадан немесе әлеуметтік желіден ашады — мобильді интернетпен, қозғалыста, тұрақсыз сигналмен. Жүктелудің әрбір артық секунды — күтпей, бірінші экранға дейін-ақ қойындыны жауып тастаған келушілер.
Ең өкініштісі — бұл келушілерге ақша төленіп қойған: жарнама басылымы есептен шығарылды, ал адам бетті көрмеді.
Мобильді нұсқаны әдетте не тежейді
- Камерадан немесе фотостоктан толық өлшемінде жүктелген фотосуреттер
- Мәтіннен бұрын жүктелетін бірінші экрандағы видеофон
- Ондаған бөгде скрипт: чаттар, пиксельдер, карта виджеттері, коллтрекинг
- Бес түрлі қаріп кескіні, оның тек екеуі ғана нақты қолданылады
- Әр бетке өз кітапханаларын сүйрейтін слайдерлер мен анимациялар
Біздің тәжірибеде басты кінәлі әрқашан дерлік біреу — суреттер. Бір сығылмаған фотосурет беттің қалған бүкіл кодынан ауыр болуы мүмкін.
Не істеу керек
- Суреттерді сығып, webp сияқты заманауи пішімдерде беру
- Бірінші экраннан төменгі суреттерді жалқау жүктеу — айналдыруға қарай
- Карта мен видеоны бетпен бірге емес, басқан кезде жүктеу
- Жарты жылда бір рет бөгде скрипттерге ревизия жасап, өліктерін өшіру
- Бірінші экранға — ешқандай карусель мен видеофон, тек мәтін мен бір жеңіл сурет
Көбіне бетті редизайнсыз-ақ бірнеше есе жылдамдатады — жай суреттер мен скрипттерді ретке келтіріп. Бұл — конверсияның мүмкін болатын ең арзан пайыздары.
Жылдамдықты мамансыз қалай өлшеуге болады
Тегін PageSpeed Insights сервисін ашып, сайтыңызды мобильділерге арналған қойындыда тексеріңіз. Қорытынды баллға емес, негізгі контенттің пайда болу уақытына қараңыз — келуші дәл соны сезінеді.
Тексеруді шынайырақ етіңіз: Wi-Fi-ды өшіріп, сайтты кеңседен тыс жерде мобильді интернет арқылы телефоннан ашыңыз. Клиенттердің көбі сізді дәл осы жағдайда көреді.
Контент: кестелер, ұзын мәтіндер, оқылым
Сайт мәтіндерін әдетте кең экранда, құжаттарда жазып, келіседі. Онда алты жолдық абзац қалыпты көрінеді. Телефонда ол бір жарым экрандық мәтін қабырғасына айналады — оны оқымай-ақ парақтап өтеді.
Кестелер мен прайстар
Кең кесте — мобильді бейімдеудің классикалық құрбаны. Ол не экран шетінен асып кетеді, не екі сөзден тігінен тұратын оқылмайтын ұяшықтарға дейін сығылады.
- Кесте жолдарын карточкаға айналдырыңыз: атауы, бағасы, мерзімі — бірінің астында бірі
- Телефонда екі-үш негізгі бағанды қалдырып, қалғанын ашылмалы егжей-тегжейге жіберіңіз
- Көлденең айналдырусыз болмаса, кестенің парақталатынын айқын белгімен көрсетіңіз
- Мобильде прайс тордан гөрі «қызмет — баға» тізімі түрінде жақсырақ жұмыс істейді
Ұзын мәтіндер
- Телефон экранында абзацтар екі-төрт жолдан аспасын
- Мәтін шолынуы үшін әр екі-үш абзац сайын тақырыпша қойыңыз
- Тізбелеулерді жол ішінде үтірмен емес, тізіммен рәсімдеңіз
- Басты қорытынды — блоктың басында, егжей-тегжей — қажет адамға төменде
Телефондағы адам оқымайды, шолып шығады: көзі тақырыпшаларға, тізімдерге және сандарға ілінеді. Тірек нүктесіз мәтін ол үшін жай сұр шу.
Оқылым
- Қаріп өлшемі — мәтін екі саусақпен үлкейтпей-ақ оқылатындай
- Контраст: ақ фондағы ашық сұр мәтін макетте әдемі көрінеді, бірақ күн астында оқылмайды
- Жоларалық интервалда ауа болсын — кіші экрандағы тығыз мәтін шаршатады
- Маңыздыны — бағаларды, шарттарды, телефондарды — ең ұсақ қаріппен теруге болмайды
Тексеру қарапайым: телефонды қырық бес жастағы адамға беріп, қызмет бағасын тауып беруін сұраңыз. Ол қай жерде көзін сығырайтып, үлкейтсе — түзетулер де сонда.
Мобильді нұсқаны өзіңіз қалай тексересіз: шағын чек-лист
Алғашқы диагностика үшін мердігер қажет емес. Сіздің телефоныңыз, мобильді интернет және жарты сағат уақыт жеткілікті. Бір шарт маңызды: жолды ненің қайда жатқанын білетін иесі ретінде емес, клиент ретінде өтіңіз.
Он қадамдық чек-лист
- Сайтты телефоннан мобильді интернет арқылы, Wi-Fi-сыз, инкогнито режимінде ашыңыз
- Оқылатын бірінші экран неше секундтан кейін пайда болғанын белгілеңіз
- Айналдырмай, бес секундта жауап беріңіз: не ұсынылады, кімге, қайда басу керек
- Мәзірді ашып, нақты қызмет пен оның бағасын табыңыз — тап санын есептеңіз
- Форма арқылы нақты өтінім жіберіп, әр өрісте қандай пернетақта ашылатынын тексеріңіз
- Маскасы бар өріске буфердегі телефон нөмірін қойып көріңіз
- Сайттағы телефон нөмірін басыңыз — мәтін белгіленбей, қоңырау басталуы керек
- Бетті бір қолдың бас бармағымен өтіп, барлық мүлт басуды белгілеңіз
- Әр қалқымалы терезені тіркеңіз: қашан шықты және оңай жабылды ма
- Жарнама хабарландыруынан өтінімге дейінгі жолды толық өтіңіз — дәл ақша төлеп жатқан хабарландырудан
Нені жазып алу керек
Сүрінген, ойланған немесе мүлт басқан әр жерді тіркеңіз. «Әдемі — әдемі емес» деп бағаламаңыз, тек «ыңғайлы — ыңғайсыз».
Шыққан тізім — дайын түзетулер бэклогі. Оны «бір күнде жөнделеді», «дизайнер керек» және «қайта жобалау керек» деп сұрыптаңыз — тармақтардың жартысын осы аптада-ақ жабасыз.
Сырт көзқарас қашан қажет
Өзін-өзі тексерудің төбесі бар: иесі сайтты жатқа біледі және оны жаңадан келген адамның көзімен көре алмайды. Әдет клиентті үркітетін нәрсені сайтқа кешіреді.
Біз Qazaqsoft-та UX-аудиттерде алдымен хабарландырудан жіберілген өтінімге дейінгі мобильді жолды өтеміз — критикалық олжалардың көбі презентацияларда көрсетуге үйренген десктопта емес, дәл сонда жасырынады.
Адаптив-редизайн қашан қажет
Бұл мақаладағы әр мәселе редизайнмен емделмейді. Көбі — сайтты қайта жасамай-ақ жасалатын нүктелік түзетулер. Бірақ жамау мағынасыз болатын жағдайлар да бар.
Нүктелік түзетулер қашан жеткілікті
- Формалар: өрістерді қысқарту, масканы жөндеу, пернетақталарды баптау
- Жылдамдық: суреттерді сығу, карта мен видеоны кейінге қалдыру, артық скрипттерді өшіру
- Попаптар: көрсету сценарийлері мен крестиктерді қайта баптау
- Батырмалар: басу аймақтарын үлкейту, әрекеті бар sticky-панель қосу
- Мәтіндер: абзацтарды бөлу, тақырыпшалар қосу, кестелерді карточкаға қайта құру
Бұл жұмыстар аймен емес, күнмен өлшенеді және әрқашан дерлік тез ақталады: трафик бар, оны жоғалтуды тоқтату ғана керек.
Нүктелік түзетулер құтқармайтын кез
- Дизайн тек десктопқа сызылған, ал мобильді нұсқа — жобалаусыз автоматты сығу
- Бет құрылымы ескі әрі нәзік: әр түзету басқа жерде бірдеңені сындырады
- Беттердің құрылымы мобильді сценарийге жауап бермейді — мән мен әрекет әрқашан «әлдеқайда төменде»
- Сайт конструкторда жиналған және оның мобильді нұсқа бойынша шектеулеріне тірелдіңіз
- Нүктелік түзетулер жасалса да, мобильді конверсия десктоптан бірнеше есе төмен
Екі-үш тармақтан өз сайтыңызды таныған болсаңыз, әрі қарайғы жамаулар — шешімді қымбатқа кейінге қалдыру. Кешіктірілген әр ай жұмыс істемейтін мобильді нұсқаға құйылып жатқан жарнама бюджетімен төленеді.
Жұмыс істеп тұрғанды жоғалтпай редизайнға қалай кірісу керек
- Аудит пен аналитикадан бастаңыз: қазір қай беттер мен сценарийлер өтінім әкеледі — оларды бұзуға болмайды
- Алдымен мобильді макеттерді жобалаңыз, десктоп солардан туындасын
- Сайтты кезең-кезеңмен көшіріңіз — жарнама баратын беттерден бастап
- Мобильді конверсияны бұрын және кейін өлшеңіз — әйтпесе редизайн жұмыс істегенін білмейсіз
Адаптив-редизайн — «сайтты қайта бояу» емес. Бұл сценарийді саусаққа, кіші экранға және бір минуттық назарға қайта құрастыру. Сіз төлеп отырған мобильді трафик өтінімге дәл осылай айналады.
