Шапка для мобильной версии: Настройка фиксированной шапки в мобильной версии |

Содержание

Топ-6 ошибок мобильной версии сайта, которые снижают его конверсию ✔️ Блог Webpromo

19.02.2020

Редакция:
Ольга Коцофане. Автор: Владислав Воронин

Прежде чем разбирать заявленные 6 ошибок мобильной версии сайта, разберемся, зачем она вообще нужна. Согласно последним данным, доля тех пользователей, которые заходят в интернет с мобильных устройств, превышает долю тех, кто заходит с ПК, в 3 раза. И все они ожидают увидеть удобный и информативный сайт, который максимально похож на свою десктопную версию.

Но допустим, у вас есть мобильная версия сайта. Почему же тогда она плохо конвертирует? Скорее всего, дело в ошибках, которые были допущены при ее создании. Пользователи испытывают трудности при поиске информации на сайте, при нажатии CTA-кнопок, при загрузке страниц и пр.

В этой статье мы разберем 6 распространенных ошибок, на которые нужно проверить мобильную версию сайта. Они негативно влияют на конверсию ресурса, поэтому их нужно избегать.

Содержание:

Ошибка 1. Плохая структура и логика размещения элементов интерфейса в шапке сайта.
Ошибка 2. Отсутствие кнопки «Найти» в строке поиска.
Ошибка 3. Отсутствие кнопок целевого действия на первом экране.
Ошибка 4. Плохая оптимизация контента.
Ошибка 5. Медленная скорость загрузки страниц сайта.
Ошибка 6. Узкие баннеры в слайдерах.

Ошибка 1. Плохая структура и логика размещения элементов интерфейса в шапке сайта.

Один из самых важных элементов любого сайта — это header или, проще говоря, шапка. Именно здесь должны находиться основная информация о компании вместе с контактными данными и логотипом, а также панель навигации. Пользователь видит шапку первой и бóльшую часть информации ищет именно в ней.

При создании интерфейса сайта UX-дизайнеры руководствуются правилом «Не заставляй пользователя думать». Это означает, что юзеру не придется самому предполагать, где на сайте может располагаться та или иная информация. Чем больше процент такого «времени на размышления», тем меньше процент конверсий.

Чтобы конверсия продаж удерживала высокие показатели, к элементам, которые могут создавать дополнительную когнитивную нагрузку (например, к иконкам), как минимум стоит добавить подписи. Пользователь не должен задумываться об их функционале. Как максимум — у всех элементов должны быть четкая структура и логика размещения, сформированная на основании пользовательского опыта. Так, гамбургер-меню всегда размещается слева, тогда как «Корзина» — справа. Номера телефонов должны быть кликабельными, а клик на логотип должен перенаправлять пользователя на главную страницу сайта. Также у всех компонентов должны быть максимально понятный дизайн и единый стиль.

Шапка не должна занимать слишком много места на первом экране. Ее «идеальная» высота — от 80px до 120px. Такой размер позволит компактно разместить необходимые элементы интерфейса и не перегрузить первый экран.

Ошибка 2. Отсутствие кнопки «Найти» в строке поиска.

У большинства пользователей сформирован паттерн, при котором после ввода запроса в поисковую строку в десктопной версии сайта они нажимают на кнопку «Найти» с помощью курсора мышки. В то же время нажатие клавиши Enter воспринимается как переход на следующую строку. Эта поведенческая особенность даже в большей степени касается пользователей мобильных устройств и была замечена при просмотре записей сессий на многих версиях сайтов для гаджетов.

Оказалось, что человек вводит запрос, но далеко не сразу понимает, что ему нужно сделать, чтобы вывести на экран результаты поиска. Сложнее всего разобраться с этим аудитории старше 40 лет.

Исходя из этого, в строку поиска необходимо добавить кнопку с названием «Найти» или «Поиск».

Ошибка 3. Отсутствие кнопок целевого действия на первом экране.

Размещение кнопок целевого действия не на первом экране или в целом их отсутствие на странице крайне негативно влияет на конверсию сайта. Именно эти элементы интерфейса дают пользователю возможность совершить конверсионное действие.

Обычно это:

добавление товара в корзину;
совершение заказа;
вызов pop-up формы;
отправка заявок;
заказ обратного звонка.

Негативный эффект этой ошибки хорошо заметен при просмотре записей сессий в HotJar или тепловой карты скроллинга в Plerdy.

У пользователя, который заходит на целевую страницу сайта, возникают закономерные вопросы: «как заказать товар?» или «как отправить заявку на услугу?». Если он не находит нужной CTA-кнопки — ценность конверсии падает. Скорее всего клиент практически сразу уйдет с вашего сайта к конкурентам, у которых этой проблемы нет.

Кнопки целевого действия обязательно должны присутствовать на странице и крайне желательно, чтобы они были на первом экране (до скролла). Также хорошим решением будет закрепить основную кнопку внизу первого экрана.

Ошибка 4. Плохая оптимизация контента.

Содержание сайта влияет на множество поведенческих факторов. Так, плохо оптимизированный контент:

увеличивает длину страницы, что приводит к низкой глубине скроллинга, из-за чего большинство пользователей попросту пропустит часть информации;
плохо влияет на скорость загрузки страницы, из-за чего увеличивается процент отказа;
портит дизайн сайта, что приводит к снижению лояльности к компании и бренду.

Очень важно оптимизировать и адаптировать контент в мобильной версии. Например, вместо того, чтоб размещать изображения в большом размере в столбик, стоит их уменьшить и разместить по два в ряд. Благодаря этому существенно снизится длина страницы, что позитивно повлияет на глубину скроллинга. Нужно помнить и про оптимизацию тизеров товаров. Их также можно разместить по два в ряд.

Не стоит переносить текст, изображения, графику и прочее в мобильную версию сайта в том объеме, в котором они были в десктопной версии.

Следует уменьшить размер шрифта текста и заголовков. Например, если в десктопной версии сайта высота заголовков составляет 32px, то в мобильной стоит использовать 20px или 24px.

Ошибка 5. Медленная скорость загрузки страниц сайта.

Медленная прогрузка страниц сайта — одна из ключевых причин плохой конверсии на любом сайте, так как пользователи не любят долго ждать. У них может сложиться впечатление, что сайт просто не работает.

Также медленная загрузка снижает эффективность поискового робота Google, поэтому на индексирование веб-страниц уходит больше времени.

Стратегическая цель любого сайта, которая влияет и на SEO, и на юзабилити, — загружаться быстрее сайта конкурентов.

Если вы ускорите загрузку, то сможете повысить количество продаж. Так, исследования показывают, что оптимизация скорости сайта ведет к росту числа конверсий.

Для проверки скорости загрузки и оптимизации вашего сайта используется сервис Google PageSpeed Insights. Он также подскажет, что сделать, чтобы повысить скорость загрузки на любых устройствах:

Использовать современные форматы изображений (Progressive JPEG, WebP).
Включить Gzip-сжатие.
Включить кэширование браузера.
Использовать CDN.
Использовать подходящий размер изображений.
Удалить ресурсы, блокирующие отображения.
Отложить загрузку неиспользуемого контента CSS.
Сократить время ответа сервера (время до получения первого байта).
Уменьшить размер кода JavaScript.
Уменьшить размер кода CSS.
Использовать CSS-спрайты.

Часто мобильная версия сайтов страдает от некорректности отображения баннеров на слайдерах. Чаще всего они получаются слишком узкими, а информацию на них практически невозможно прочесть. Это происходит из-за использования баннеров для десктопной версии, которые просто пропорционально уменьшили.

Очевидно, что экраны телефонов не такие большие, как экраны компьютеров или планшетов. Именно поэтому изображения, которые хорошо смотрятся в десктопной версии, будут плохо выглядеть в мобильной.

Эту проблему решает создание отдельных баннеров для просмотра с гаджета. Они больше по высоте — как минимум 200–250px, а шрифт должен иметь высоту минимум 14px.

Избегайте перечисленных 6 ошибок мобильной версии вашего сайта при его проектировании — и он будет приводить вам новых клиентов!

Удобная навигация мобильных сайтов: обзор основных элементов

29 июля 2019
Продвижение
8K
5 мин.
Понравилось? Поделись!
Прочесть позже

Если вы только начинаете проектирование навигации на сайте, рекомендуем сначала прочитать статью про нее для десктопной версии сайта. Мобильная версия сайта — это уже второй шаг, продолжение основного этапа.

Для мобильных важно учитывать:

Область экрана слишком маленькая для размещения большого объема информации или крупных элементов.

Пользователь может делать что-то параллельно, поэтому хуже концентрируется на контенте и вряд ли будет разбираться в сложной навигации.

Пользователь кликает пальцем (стилусы, увы, не прижились), поэтому будет промахиваться при клике по мелким элементам.

Основные элементы навигации

Нижеперечисленные элементы должны присутствовать на всех страницах ресурса, чтобы помогать пользователю перемещаться по сайту.

Шапка сайта. В отличие от десктопной версии должна быть максимально компактной, желательно в одну полоску. Включает следующие элементы:

Логотип и название компании. Идеально, если ваш логотип и есть название компании. Располагать лучше слева.

Бургерное меню (или сэндвич-меню) — «свернутая» версия горизонтального меню. Удобно тем, что представляет собой всего один символ, который легко поместить в шапке сайта. Пример:

Форма поиска. Можно разместить как в виде одного символа (знак лупы), так и текстом «Поиск». О том, какой должна быть форма поиска, мы рассказывали здесь.

Если на вашем сайте огромное количество товаров и посетители сайта часто используют поиск, то на Главной можно показать форму поиска целиком, но на других страницах лучше представить компактную версию.

Пример для Главной страницы:

И та же форма поиска на внутренней странице:

Ссылка на личный кабинет, если он есть. Желательно, чтобы в форме авторизации также была ссылка на регистрацию, чтобы не добавлять в шапке сайта две кнопки.

Номер телефона. Подойдет не для всех тематик сайтов, например, если у вас служба доставки или другой бизнес, в котором пользователи чаще всего звонят, то данная информация обязательна. Можно разместить как номер телефона полностью (если позволяет место), так и использовать общепринятую иконку в виде телефонной трубки.

Ссылка на корзину. Важный элемент для интернет-магазинов и сайтов, у которых предусмотрена корзина. Располагать лучше справа.

Ссылка на избранное и/или список сравнения. Если у вас есть на сайте такие разделы, то кратко укажите их.

Примеры компактных шапок сайта для вдохновения:

Конечно, если позволяет место, желательно указать слоган или УТП, а также регионы и режим работы, но лучше данную информацию рассказать в основной части страницы соответствующих разделов.

Шапку сайта можно закрепить (зафиксировать при прокрутке страницы), если у вас много информации на страницах и пользователю будет неудобно искать меню.

Меню. Выше мы уже обсуждали бургерное меню, но допустим и другой вариант — расположить ссылки горизонтально с возможностью прокрутки. Например:

Такой вариант подойдет, если у вас небольшое количество разделов меню. Для крупных сайтов лучше комбинировать два варианта: ссылки на категории товаров/услуг расположить горизонтально, а остальные разделы свернуть в сэндвич-меню.

Возвращаясь к бургерному меню, выделим несколько рекомендаций:

Лучше не вываливать на пользователя полный список ссылок, а разделить его на группы. Так пользователю будет легче сориентироваться. Например, в данном меню использовано два уровня группировки ссылок:

И еще более лаконичный пример:

Выделить популярные разделы в виде кнопок. Еще один способ помочь клиенту быстрее найти нужный раздел. Пример выделения разделов с акциями, новинками и популярными товарами, которые чаще всего ищут пользователи:

Аналогично популярные ссылки можно добавлять и в шапке сайта.

Кратко указать контактную информацию. Так как в мобильной версии в шапке сайта чаще всего не хватает места для данной информации, стоит указать ее рядом, под списком разделов. Это поможет информировать новых пользователей:

Подвал сайта. В мобильной версии данный блок лучше сделать компактным, чтобы не удлинять страницы. Можно показать:

Ссылки на разделы сайта. Лучше показать их компактно, как и в боковом меню, объединив в группы. Если же у вас шапка сайта закреплена, можно пропустить этот пункт, так как у пользователя меню всегда на виду. Пример компактного представления ссылок:

Кнопки соцсетей. Лучше всего их указывать в подвале сайта, так как это дополнительная информация.

Ссылка на десктопную версию. Поможет тем пользователям, которые случайно зашли на мобильную версию.

Кнопка «Вверх». Поможет пользователю быстро вернуться в начало страницы.

Примеры подвалов сайта:

Дополнительные элементы навигации

Не менее полезные элементы, но обязательны не для всех сайтов.

Хлебные крошки. Можно разместить в том же виде, что и для десктопной версии. Однако если названия страниц слишком длинные, стоит ограничиться ссылкой на предыдущий уровень вложенности.

Например, здесь можно вернуться в общую категорию «Техника для кухни»:

В отличие от десктопной версии можно не использовать, если у сайта небольшая вложенность (1-2 уровня).

Боковое меню. Как таковое в мобильное версии отсутствует, так как информацию лучше отображать в одну колонку. При переходе в раздел отобразите подкатегории в виде дополнительного горизонтального меню:

Но если подкатегорий слишком много, достаточно указать ссылки в бургерном меню.

Сортировки и фильтры. Лучше всего разместить в виде двух кнопок перед списком сайта, чтобы они не занимали много места и пользователю было легко их найти.

Пример размещения данных кнопок:

После клика блок с фильтрами раскрывается следующим образом:

Нижнее меню. Использовать стоит аккуратно, желательно не закреплять шапку сайта. В нем можно разместить популярные функции, например, отправку письма, звонок менеджеру, запись на прием, добавить в корзину и др., но не более 3-4 кнопок. Такое меню позволяет пользователю быстрее совершить целевое действие.

Меню может отображаться не на всех страницах и содержать всего одну кнопку, например, на страницах товаров как правило это кнопка добавления товара в корзину:

Итоги

Мобильная версия сайта — это упрощенная версия основного сайта, отображающая основные функции. Только тогда пользователю будет легко ориентироваться в навигации и изучать информацию на страницах.

Внимательно отнеситесь к организации мобильной навигации, а понадобится помощь в проектировании или оценке удобства сайта, наши специалисты всегда готовы помочь.

P.S. Проверить свой сайт на адаптивность под мобильные можно на этой странице.

#ошибки юзабилити #фишки для сайта #интернет-магазины

Чек-лист по оптимизации мобильного сайта

Подробный список задач, который поможет вам оптимизировать мобильную версию своего сайта как для поисковых роботов, так и для пользователей.

Получить чек-лист

Комментарии для сайта Cackle

Улучшение мобильного приложения с помощью собственного заголовка

Обновлено 27 апреля 2022 г.

Стандартизируйте взаимодействие с пользователем в мобильных приложениях, добавив собственный заголовок для
персонализированная мобильная страница. Используя собственный заголовок в своем приложении, вы предоставляете пользователям
адаптивный интерфейс, одинаковый для нативных приложений и разных устройств. Для
например, пользователи могут перейти к предыдущему представлению с помощью встроенной кнопки «Назад» для Android.
приложений или проведите пальцем вправо для приложений iOS.

Чтобы создать мобильную страницу с нативным заголовком, необходимо
настроить три компонента пользовательского интерфейса:

Harness: Контейнер для вашей мобильной страницы, в который вы встраиваете обертку
раздел.
Раздел оболочки: Контейнер оболочки, в который вы вставляете раздел на основе шаблона и
настроить свойства макета, чтобы установить собственный заголовок для родного
заголовок.
Раздел с шаблоном мобильного заголовка: Раздел на основе шаблона с родным заголовком, в котором можно настроить
необязательные действия влево и вправо.

Внимание: Конфигурация собственных заголовков не поддерживается в приложениях
которые работают в службе Constellation.

Создание жгута для вашей страницы

В заголовке Dev Studio нажмите Создать Пользовательский интерфейс Жгут .
На вкладке Создать жгут в
Поле Label , укажите название жгута проводов.
В разделе Context определите приложение, класс и цель
набор правил для жгута.
Примечание: Чтобы потом можно было добавить страницу со жгутом в навигацию
вашего мобильного приложения, выберите класс UIPages вашего
приложение или класс, который находится в иерархии этого класса.
Нажмите Создайте и откройте . Результат: Откроется вкладка с новой обвязкой.

Настройка жгута для поддержки собственного заголовка для вашего
стр.

На вкладке Advanced в проводке
Использование , установите флажок Рабочая область .
На вкладке Design выберите компоновку экрана, а затем
щелкните Просмотр свойств 9Значок 0025.
В окне Свойства компоновки экрана на
Вкладка Общие выберите Заголовок ,
а затем нажмите Отправить.
Верхняя область макета экрана в виде заголовка представляет собой заполнитель, в котором вы
добавить элементы, составляющие шапку страницы в мобильном
приложение.

Создание раздела оболочки для собственного заголовка

Разверните список Structural и перетащите
Встроенная секция в верхнюю часть экрана
макет.
В разделе включить модальное диалоговое окно , в
Раздел поле, нажмите Открыть
икона.
В форме Создать раздел укажите метку для
раздел оболочки, а затем нажмите Создать и открыть .
Чтобы секция обмотки работала с вашей привязью,
Применить к и Добавить в набор правил
поля автоматически включают класс и набор правил проводки.
Результат: Откроется вкладка с новым разделом оболочки.
В шапке редактора раздела нажмите Преобразовать в полный раздел
editor , а затем подтвердите преобразование.

Создание и настройка раздела на основе шаблона для собственного
заголовок

На вкладке Design разверните список Structural , а затем перетащите Embedded section на холст под динамическим элементом по умолчанию.
макет.
В разделе включить модальное диалоговое окно , в
Раздел поле, нажмите Открыть
икона.
В форме Создать раздел укажите метку для
раздел на основе шаблона, а затем щелкните Создать и
открыть .
Чтобы секция на основе шаблона работала с вашей подвеской,
Применить к и Добавить в набор правил
поля автоматически включают класс и набор правил обвязки. .
Результат: Откроется вкладка с новым разделом на основе шаблона.
На вкладке Design в панели элементов шаблона на
вправо, щелкните Изменить , а затем щелкните значок Mobile
заголовок страницы с левым и правым действием шаблон дизайна.
Дополнительно: Чтобы добавить действия влево или вправо в заголовок мобильного устройства, добавьте кнопку к действиям влево или
Правильные действия разделов панели элементов шаблона.
Например, добавьте встроенную кнопку поиска в качестве правильного действия на встроенном
заголовок:
В Правильные действия раздел, нажмите Добавить Действие Кнопка .
Наведите указатель мыши на кнопку и нажмите кнопку Изменить
икона.
На вкладке Общие снимите флажок
Текстовое поле .
В списке Источник изображения выберите значок
класс .
Щелкните значок Откройте значок выбора класса , чтобы отобразить
все доступные иконки.
Найдите и выберите значок pi-search .
На вкладке Действия щелкните Создать
набор действий .
Нажмите Добавить событие Нажмите .
Нажмите Добавить действие Все действия , а затем в Отображение
категория, нажмите Мобильный поиск .
Нажмите Отправить .
Примечание. Собственный мобильный заголовок поддерживает только кнопку .
элементы как левые или правые действия. В наборах действий для кнопок используйте только
Нажмите событий.
В форме правила раздела на основе шаблона щелкните
Сохранить .

Настройка раздела оболочки и добавление пользовательского заголовка
title

Щелкните вкладку с разделом оболочки.
В Раздел включает модальное диалоговое окно оболочки
раздел, в поле Раздел введите наименование
созданный вами раздел на основе шаблона, а затем щелкните
Отправить .
Выберите динамический макет по умолчанию, а затем нажмите клавишу Delete, чтобы удалить его.
со своего полотна.
Выберите встроенный раздел и щелкните значок View
свойства 9Значок 0025.
В окне Свойства макета в
Формат контейнера список, выберите
Другой , а затем введите Мобильный заголовок .
Установите флажок Отображать заголовок и заголовок .
В разделе Настройки контейнера в
Заголовок список, выберите Текст и
затем введите пользовательский заголовок вашего заголовка.
Нажмите Отправить .
В форме правила раздела оболочки щелкните Сохранить .

Настройка жгута с собственным заголовком

Щелкните вкладку со своим жгутом.
В разделе включить модальное диалоговое окно жгута , в
в поле Section введите имя раздела оболочки
который вы создали, а затем нажмите Отправить .
На модели настройте основное содержимое вашего
страницу, добавляя элементы из палитры в нижнюю часть экрана
макет. Например: Добавьте раздел с персонализированным приветственным сообщением и гаджетом Pulse, который
упоминается как встроенный раздел.
В форме правила проводки щелкните Действия Отметить как соответствующую запись .
В форме правила проводки щелкните Сохранить .
Добавьте страницу с нативным мобильным заголовком в навигацию вашего мобильного
канал.
Дополнительные сведения см. в разделе Добавление элементов в строку меню.

Результат: Во время выполнения ваше мобильное приложение теперь отображает страницу, которую вы
добавлен в строку меню. Когда пользователи касаются значка новой страницы, приложение отображает
содержимое, которое вы настроили. Новая страница имеет собственный заголовок с вашим собственным заголовком,
встроенная кнопка поиска в качестве действия справа и стрелка навигации назад в качестве левого действия
действие.

Предыдущая тема
Отслеживание мобильных пользователей на основе данных геолокации
Следующая тема
Локализация мобильных приложений для международной аудитории

Посетите Центр поддержки , чтобы задать вопросы, принять участие в обсуждениях, поделиться идеями и помочь другим.

Посетите центр поддержки

Neve Header Builder на мобильных устройствах

Это мобильная версия Neve Header Builder, и для использования всех функций модуля Header Booster вы можете получить его отсюда.

Конструктор заголовков позволяет использовать различных заголовков для компьютеров и мобильных устройств. Просто нажмите на рабочий стол | Mobile иконки и вы получите доступ к соответствующему конструктору.

Цвет фона
Поведение при открытии мобильной боковой панели
Ширина мобильной боковой панели
Автоматически раскрывающиеся раскрывающиеся меню на мобильных устройствах

В построителе заголовков для мобильных устройств все аналогично построителю для настольных компьютеров. Единственным отличием является дополнительный столбец под названием 9.0024 Содержимое мобильного меню .

В Customizer — содержимое мобильного меню по умолчанию скрыто.
Чтобы отображать содержимое мобильного меню при редактировании, щелкните рядом с ним метку Показать .
Во внешнем интерфейсе – содержимое мобильного меню отображается только при нажатии на компонент «Значок меню».

Для добавьте компоненты в содержимое мобильного меню, выполните тот же процесс, что и раньше:

нажмите на знак ➕ и появится список компонентов, из которых вы можете выбрать.

Несмотря на то, что построитель заголовков учитывает только настольные и мобильные устройства, все настройки имеют три медиа-запроса : Рабочий стол | Планшет | Мобильный . Каждую настройку можно установить отдельно для планшета, переключившись на соответствующий медиа-запрос в настройщике из нижнего левого на боковой панели.

Изменить цвет фона заголовка или добавить фоновое изображение

После выбора версии конструктора заголовков Mobile вы увидите содержимое меню Mobile , представляющее область, которая будет отображаться на мобильных устройствах после нажатия на значок меню .

Чтобы изменить цвет фона заголовка, выполните следующие действия:

нажмите на ⚙️ , который появляется при наведении курсора на содержимое мобильного меню.
- Откроются параметры для Layout (где вы можете открыть мобильное содержимое слева или действовать как переключатель) и Style .
  - Здесь можно обновить фон области (цвет или изображение).

Способ мобильного бокового меню открывает/закрывает . Можно изменить следующие параметры: Слайд слева, Слайд справа, Толчок слева, Толчок справа, Весь холст, Слайд вниз.

Чтобы использовать эти опции:

Шаг 1 : включить мобильный заголовок.

Шаг 2 : нажмите на ⚙️ рядом с содержимым меню Mobile.

Мобильная боковая панель также может использоваться на рабочем столе с компонентом заголовка «Значок меню».