Кейс: доопрацювання мобільної версії сайту
Дуже часто до нас звертаються клієнти за допомогою доопрацювання мобільної версії їхніх сайтів. Причини проблем можуть бути різними: наприклад, поставили новий модуль і забули його адаптувати під мобільні дозволи або змінили дизайн кнопки, а в мобільному дозволі вона закриває собою дуже важливий блок.
Через такі дрібниці Ви можете втратити майбутніх клієнтів, яким не сподобається щось у мобільній версії або, наприклад, вони не зможуть у ній зорієнтуватися, отримати потрібну інформацію та зробити замовлення. У сукупності всі ці дрібні недоробки та недоліки призводить до значного недоотриманого прибутку, втрати позицій у пошукових системах та інших серйозних наслідків для проекту в цілому.
Одним з головних пріоритетів мобільної версії є зручність користування на смартфоні: великі кнопки (по якому можна легко потрапити), збільшений шрифт (щоб не напружувати очі і не мружитися) та інші дрібниці, які можуть виявитися вирішальними для користувачів мобільних пристроїв.
Доробка мобільної версії інтернет-магазину «Інтерпрезент»
Саме з таким завданням – необхідністю доопрацювання відображення сайту на мобільних телефонах та планшетах – ми зіткнулися нещодавно. Сайт https://inter-present.kz був у цілому адаптивним, але містив низку помилок і недоліків з погляду юзабіліті на мобільних пристроях.
Загальний вигляд та шапка сайту
Найбільш груба помилка на мобільній роздільній здатності – це горизонтальний скролл. Контент сайту не вміщується на екрані смартфона і вимагає перегортання сторінок по горизонталі.
На скріншоті відразу видно кілька недоліків:
- картинка з подарунком виходить за межі екрана;
- кнопка онлайн-чат перекриває кнопку меню;
- порожнеча у шапці біля кнопки меню.
До цього завдання ми підійшли комплексно та переробили шапку сайту. В т.ч. додали клікабельний номер телефону в область біля кнопки меню, перемістили кнопку «швидкий чат» та зменшили картинку подарунка
Величезна капча
Проте навіть після всіх цих дій на сторінці все ще залишався горизонтальний скролл. На першому скріншоті Ви можете побачити, що саме виявляє неправильну верстку. Блок із Google ReCaptcha не вписався у мінімальну ширину екрана смартфона. З цим завданням ми впоралися, використавши компактний варіант відображення капчі.
Псевдоадаптивність елементів
Під час роботи над сайтом ми виявили, що деякі елементи сторінок формально адаптивні, але незручні для перегляду на мобільних пристроях, наприклад сторінка з відгуками про компанію. Текст відображався лише на половину екрана, що було незручно для читання. Для покращення юзабіліті було прийнято рішення змінити цей блок, і ось що в нас вийшло:
Нашарування елементів
Як ми й казали раніше, дуже поширена ситуація, коли елементи накладаються один на одного, заважають перегляду та й просто виглядають неестетично. Такі ситуації треба обов’язково усувати:
Відсутність відступів
Дрібна недоробка, яка одразу кинулася в очі – відсутність відступів. Її ми також виправили:
Мобільне меню
Дороблення адаптивності сайту інтернет-магазину «Фазенда»
Кейси з доопрацювання адаптивності сайтів та інтернет-магазинів зустрічаються у нашій практиці досить часто. Ще один такий приклад – https://fazenda.shop (роздрібний магазин) та https://fazendasib.shop (оптовий сайт тієї ж компанії).
Загальний вигляд та шапка сайту
Адаптивність каталогу
Резюме
Кожну з цих доробок не можна назвати критичною, але вони помітно знижували зручність використання сайтів на мобільних телефонах і планшетах. Крім того, такі проблеми впливають на купівельні настрої користувачів (відчуття того, що ти користуєшся неякісним продуктом – китайською підробкою, де щось не працює).
Ми позбавляємо Ваших потенційних покупців цього почуття і піклуємося про працездатність Вашого сайту на будь-якій роздільній здатності.
Комментарии