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