Мобилен сайт: четим текст и бутони, които се натискат лесно
Удобството започва с четене и натискане
Един мобилен сайт може да се побира на екрана и въпреки това да е труден за използване. Ако телефонният номер е ситен, бутоните са близо един до друг, а важните уточнения се четат само с увеличаване, посетителят трябва да полага излишни усилия. За малък бизнес това често означава пропуснато обаждане или недовършено запитване.
Представете си клиент пред салон във Варна, който проверява работното време, или собственик на апартамент в Пловдив, който търси водопроводчик. И двамата може да държат телефона с една ръка, да са на слънце или да бързат. Сайтът трябва да е удобен и в тези обикновени условия, не само на голям монитор в офиса.
Четим текст на мобилен сайт
Размерът на буквите не е декоративен избор. Той определя дали човек ще разбере услугата и условията, без да приближава телефона до лицето си.
За основния текст около 16 CSS пиксела е разумна отправна точка, а не универсално правило. Някои шрифтове изглеждат по-дребни при същия размер. Затова проверявайте реалното усещане на телефон, вместо да разчитате само на числото в настройките.
Полезни насоки са:
- Разстояние между редовете около 1,5 пъти размера на текста.
- Кратки абзаци с по една основна мисъл.
- Ясна разлика между заглавия и обикновен текст.
- Достатъчно тъмен текст върху светъл фон или обратното.
- Без важни условия, скрити в бледи и дребни бележки.
Например уточнението „Посещения извън града се уговарят предварително“ трябва да е толкова четимо, колкото описанието на ремонтната услуга. То не става маловажно само защото е поставено под цената.
Позволете на посетителя да увеличава
Не блокирайте увеличаването през браузъра. Някои хора имат нужда от по-едър текст независимо от възрастта си или размера на телефона.
При проверка увеличете страницата до 200%. Вижте дали текстът остава достъпен, дали бутоните не закриват съдържанието и дали формата може да се попълни. Ако част от информацията изчезва или се застъпва, оформлението има нужда от корекция.
Бутони, които не изискват точен прицел
Малкият надпис може да има голяма зона за натискане. Именно тази зона е важна за удобството, а не само видимият размер на буквите.
Практична цел е основните бутони да имат зона за натискане поне около 44 × 44 CSS пиксела. Оставете и разстояние между съседни действия. Това намалява риска човек да избере погрешния бутон с палец.
В сайт на ресторант „Обадете се“ и „Вижте менюто“ не бива да са две тесни връзки, залепени една до друга. По-добре е да са ясно отделени, с достатъчно вътрешно пространство около надписите.
Проверявайте и по-малките елементи:
- Бутона за затваряне на изскачащ прозорец.
- Стрелките в галерията.
- Отметките във формата.
- Връзките в долната част на страницата.
Те лесно остават пренебрегнати, въпреки че могат да блокират следващата стъпка.
Надписът трябва да казва какво следва
„Натиснете тук“ не обяснява достатъчно. Използвайте конкретни надписи като „Обадете се“, „Изпратете запитване“ или „Вижте адреса“.
И действието трябва да отговаря на обещаното. Бутонът за обаждане да отваря набиране на правилния номер. Бутонът за запитване да води до формата, а не до началото на друга дълга страница.
За клиника е важно да се разграничи заявката от потвърдения час. Ако формата само изпраща желан ден, подходящ надпис е „Изпратете заявка за час“, с кратко уточнение, че предстои потвърждение.
Един водещ бутон е достатъчен
Когато всички бутони са ярки и еднакво големи, никой не изпъква. Изберете основно действие според начина, по който реално обслужвате клиентите.
За аварийна ремонтна услуга това може да е обаждане. За изработка на мебели по поръчка — запитване с размери. Другите възможности остават достъпни, но не трябва да се състезават за внимание.
Ако използвате лента с бутон в долната част на екрана, проверете дали тя не покрива последните редове, съобщенията за грешка или бутона за изпращане. На малък телефон подобна лента може да заема значителна част от видимото пространство.
Формите също трябва да са удобни за пръстите
Големият бутон не помага, ако полетата над него са трудни за попълване. За първоначално запитване обикновено са достатъчни име, начин за връзка и кратко описание.
Поставяйте постоянен етикет над всяко поле. Подсказката вътре изчезва при писане и човек може да забрави какво точно се очаква.
Поискайте от разработчика подходяща клавиатура за телефонен номер и имейл. Грешките трябва да се показват до съответното поле с разбираемо обяснение, например „Добавете телефон за обратна връзка“, вместо общо съобщение „Невалидни данни“.
След изпращане покажете ясно потвърждение. Посочвайте срок за отговор само ако можете реално да го спазвате.
Проверка с истински телефон
Отделете десетина минути и изпълнете конкретна задача, вместо просто да разглеждате сайта:
- Намерете една услуга и прочетете условията ѝ.
- Натиснете телефонния номер и проверете изписаните цифри.
- Попълнете и изпратете тестово запитване.
- Увеличете текста и повторете основните действия.
- Проверете дали менюто и прозорците се затварят лесно.
Помолете и човек, който не познава сайта, да направи същото. Не му подсказвайте къде да натисне. Колебанието му често показва проблем, който собственикът вече не забелязва.
Как да възложите промените
Изпратете на разработчика конкретен списък: „Текстът под услугата е дребен“, „Двата бутона се натискат погрешно“, „Клавиатурата закрива изпращането“. Добавете снимка на проблема и модела на телефона.
Ако планирате нов сайт, включете тези проверки в заданието още в началото. Можете да обсъдите нуждите си чрез контактите на Линкче. Целта не е повече ефекти, а човек да прочете, да избере и да се свърже с вас без ненужни препятствия.
