MOBILE FIRST! Как сделать ваш сайт удобным для смартфонов и планшетов?

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

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

Наш родной Яндекс быстро подхватил этот тренд, хоть и не стал так строго придираться к сайтам. Сейчас он больше оценивает размер шрифта - если объем текста, набранного мелким кеглем, на одной странице составляет менее 3% относительно объема всего текста, то такая страница считается подходящей для просмотра с телефона. Также, как и Google, Яндекс учитывает этот фактор при поисковой выдаче. Удобные для изучения с мобильных устройств сайты выводятся на более высокие позиции, чем неудобные. А пользователям, выходящим в интернет со смартфона, эти поисковики вовсе не показывают площадки, которые признали неудобными для них.

Достаточно весомый аргумент, чтобы задуматься о мобильной версии сайта, если вы до сих пор этого не сделали, согласитесь. Особенно учитывая то, что число таких пользователей неумолимо стремится к 100%.

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

Их даже два:

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

Советы ниже, повторимся, если у вас в требованиях к проекту стоит: Mobile first. Запомним это, и приступим к изучению:)

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

Подобный подход является нормой при создании такого рода сайтов. И если вы считаете, что гораздо проще разработать сначала “расширенный” вариант страниц и лишь после этого “отсечь все лишнее”, то попробуйте сделать наоборот. Создайте упрощенный вариант и лишь потом добавьте в него элементы (активизирующиеся наведением курсора, например), которые обычно используются именно при работе с ПК. Как показывает практика, этот способ чаще всего оказывается более удобным и приемлемым, при работе над Mobile first проектами.

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

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

Например, есть возможность “поиграть” со шрифтами с выравниваниями по правому и левому краю. Для графических элементов и фото можете использовать карусель. Пользователи уже привыкли к тому, что свайпать можно не только вверх и вниз, но и вправо и влево.

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

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

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

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

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

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

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

Статью для вас написала команда SKY: