Алматылық клиент оларды тапсырыс беру формасы неге мобиль пайдаланушыларды жалықтыратынын сұраған кезде, мәселе төлем шлюзінде емес екені белгілі болды. Мәселе пернетақтада болды. Дәлірек айтқанда, Android-тегі қазақ кириллик пернетақта схемасы мен email өрісінің автотолтыруы іске қосылған кезде пайда болатын латын баламасы арасындағы алшақтықта — пайдаланушыларды форманы толтыру ортасында таныс енгізу режимінен шығарып жіберетін.
Мұндай мәселелер Figma шолуында көрінбейді.
Үш жазу жүйесінің шындығы
Қазақстан, Ресей және Орталық Азия пайдаланушылары күнделікті үш түрлі жазу ортасында жұмыс істейді:
- Кирилл орысша — көптеген интерфейстердің негізі
- Қазақ кириллицасы — орысшада жоқ Ә, Ғ, Қ, Ң, Ө, Ұ, Ү, Һ әріптері бар 42 әріпті алфавит
- Латын — ағылшын қарыз сөздері, брендтер атаулары және Қазақстанның латын жазуына көшу бағдарламасы арқылы кіруде
Орысшада жақсы жұмыс істейтін іздеу өрісі қазақ пайдаланушысы «Нұр» теріп жатса визуалды бұзылады — себебі Ұ мен Ү глифтерінің өлшемдері орыс баламаларынан кеңірек, ал «қауіпсіз» ТМД шрифт жиынтықтарының көпшілігі қазақ тілінде ешқашан тексерілмеген.
«Кириллица қолдауы» орыс тілін қолдауды білдіреді деген болжам бірнеше ТМД өніміне жергілікті нарығын жоғалтқызды.
Типография: шынымен жұмыс істейтіні
Алматы, Ташкент және Новосибирск клиенттері үшін интерфейс жасай отырып, мынаған келдік:
ТМД интерфейстеріне арналған шрифт жиыны:
body {
font-family:
'Inter',
'PT Sans',
'Noto Sans',
system-ui,
-apple-system,
sans-serif;
}
Inter латын мен кириллдің басым бөлігін жақсы қамтиды. PT Sans орыс тіліндегі баспа үшін арнайы жасалған және қарапайым гротесктер жіберіп алатын оптикалық салмақ балансын шешеді. Noto Sans — бар Unicode блогын, соның ішінде барлық қазақша кеңейтілген таңбаларды қамтитын резервтік нұсқа.
Масштабтау ерекшеліктері:
Кириллдік мәтін бірдей нүктелік мөлшерде латын эквивалентінен шамамен 10–15% кеңірек болады. Бұны орналасуыңызда есепке алыңыз:
- Кириллдік жапсырмалары бар навигация элементтері ағылшынша дизайндарға қарағанда 20% артық көлденең кеңістік қажет
- Қию нүктелері ең ұзын қазақша жол ұзындығын ескеруі тиіс
- Негізгі мәтін жолдар аралығы: 1,5–1,6, ағылшын тілді дизайндардағы 1,4 емес
Енгізу өрістері және IME жанжалдары
ТМД жобаларындағы ең жиі кездесетін қате: форма валидациясы фокусты жоғалтқанда емес, әрбір батырма басылғанда іске қосылады. Латын тілінде бұл жай жалықтыратын. Кириллдік енгізуде, әсіресе бір таңбаны жасау үшін бірнеше батырма басуды қажет ететін қазақша IME (енгізу әдісі) пайдаланылғанда, бұл интерфейсті толығымен бұзады.
/* ТМД формалары үшін мұны жасамаңыз */
input:invalid {
border-color: red; /* теру барысында іске қосылады */
}
/* Оның орнына мұны жасаңыз */
input:invalid:not(:focus) {
border-color: red;
}
:not(:focus) ережесі валидация кері байланысы тек пайдаланушы өрісті тастағаннан кейін — яғни кириллдік жинақтау аяқталғаннан кейін пайда болатынын қамтамасыз етеді.
Пернетақта ауысу мәселесі
Бізді Ташкент e-commerce жобасында ойландырған бір бөлшек: пайдаланушылар пернетақталарды үнемі ауыстырып отырады. Тауар іздеу — орысша, промокод — латынша, телефон нөмірі кириллицамен басталып халықаралық форматпен аяқталады. Әрбір ауысу — когнитивтік кедергі.
Үйкелісті азайту стратегиямыз:
- Телефон және OTP өрістері үшін
inputmode="numeric"қолданыңыз — бұл жазу жүйесі сұрағын айналып өтіп, цифрлық пернетақтаны тікелей шақырады - Есім өрістері үшін
autocomplete="name"қосыңыз, осылайша ОЖ пернетақта ашылғанда орналасуды қайта есептеусіз деректерді автотолтыра алады - Әрбір форманы ТМД локалімен нақты Android құрылғысында тексеріңіз — iOS эмуляциясы жеткіліксіз, себебі Android ТМД пернетақта экожүйесі (SwiftKey, ТМД пакеттерімен GBoard, қазақша Samsung) басқаша жұмыс істейді
Тестілеу тізімі
ТМД бетіне арналған кез келген интерфейс жіберілмес бұрын тексеріңіз:
- [ ] Әрбір мәтін контейнерінде қазақ алфавитінің 42 таңбасынан тұратын жолды көрсету
- [ ] Кириллдік пернетақтадағы барлық форма өрістері арқылы tab өту
- [ ] Қазақша өнім атауының ұзындығымен мобиль бөлу нүктесіндегі кесу
- [ ] Валидация қателерінің енгізу кезінде емес, фокус жоғалғанда пайда болуы
- [ ] Өрістің жолдар аралығы кириллдік толтырғыш мәтінді қиып алмауы
Пернетақта — пайдаланушыларыңыз шынымен өмір сүретін орын. Ол үшін жобалаңыз.