Сегодня мобильные устройства прекрасно заменяют ноутбуки и настольные компьютеры в повседневной жизни. Посмотреть фильм, найти необходимую информацию, поиграть, послушать музыку и даже совершить онлайн-шоппинг можно с гаджетом в руках. Именно поэтому качество мобильной версии сайта порой важнее компьютерной. Так что сегодня мы поговорим о тех нюансах, которые важно учесть при анализе уже созданной адаптации страницы к мобильным устройствам.
Почему стоит обратить внимание на качество мобильного сайта?
Аналитики прогнозируют, что в ближайшую «пятилетку» количество посетителей интернет-пространства с гаджетов будет увеличиваться каждый год на 25%. Так что, кажется, самое время проверить, как работает ваша страница через мобильные устройства.
Чтобы проанализировать привлекательность и полезность адаптированной версии сайта, постарайтесь непредвзято оценить его в качестве стороннего наблюдателя и ответить на следующие вопросы:
- Быстро ли загружается страница?
- Привлекает ли внимание контент?
- Передает ли сайт основные нюансы и цели вашего бизнеса?
- Помогает ли сайт решить какие-то проблемы целевого клиента?
- Является ли навигация по странице доступной и понятной?
- Заинтересовывает ли целевая страница сайта настолько, чтобы посетитель перешел на другие страницы?
Что на мобильном сайте проверить в первую очередь?
По исследованиям, которые проводил Google, около 80% пользовательского внимания захватывает первый экран сайта. Таким образом, важно с первой секунды привлечь зрителя главной страницей. Если удержать внимание посетителя не получится, он уйдет, так и не оценив все ваши старания на других страницах.
Проверьте, чтобы на первом экране вашей мобильной версии сайта располагались эти ключевые элементы:
- призыв к действию;
- изображения и логотип;
- ценностное предложение.
Призыв к действию – это ключ к взаимодействию с клиентом. Вовсе не обязательно использовать стандартные СТА-кнопки с кричащим капслоком «КУПИТЬ». Призывом считается все, что подтолкнет пользователя к продвижению с главной страницы дальше: просмотреть, заказать, зарегистрироваться, добавить в корзину, прочитать и прочее. Если чувствуете необходимость, можете разместить несколько СТА на главном экране.
Изображения распознаются нашим мозгом в разы быстрее и эффективнее, чем текстовые сообщения. Так что чем больше картинок, визуальных образов и фотографий вы будете использовать, тем проще будет наладить контакт с пользователем, апеллируя к его эмоциям. Можно также размещать иллюстрированные иконки, отображающие ваши особенности. В дальнейшем это может создать ваш определенный образ у клиентов, что поможет привлечь внимание к товарам и услугам.
Ценностное предложение – собственно то, ради чего пользователь заходит на сайт. Здесь должна быть конкретная и лаконичная информация о самом товаре или услуге, об акции, о нововведениях или специальных предложениях. Также на главном экране вы можете разместить УТП своей компании, в котором выделите свои особенности. Ценностное предложение должно мотивировать посетителя остаться на сайте.
Скоростная загрузка – залог успеха
Чтобы не потерять ни единого потенциального клиента, нужно позаботиться о быстрой загрузке сайта. Минутами ждать, пока откроется нужная страница, никто не станет. К тому же загрузка в кратчайшие сроки дает серьезное преимущество в сравнении с конкурентами. Чтобы проверить эту «величину», рекомендуем воспользоваться Google PageSpeed Insights. Кстати там же можно узнать, как и что исправить, чтобы сделать этот показатель лучше.
Чтобы сократить время загрузки, можно совершить следующие действия:
- сократить обработку со стороны посетителя;
- сделать размер картинок меньше;
- сократить содержание;
- по возможности не использовать перенаправления m-точек;
- выбрать точный вариант для хостинга;
- поставить ограничения на HTTP-запросы;
- использовать сжатие.
Технические аспекты удобства мобильной версии сайта
- Перенаправления между мобильной и компьютерной версиями. Если просто, то мобильные пользователи должны попасть на мобильный сайт, а компьютерные, соответственно, на компьютерную (ох уж эта тавтология!). Это поможет пользователям попасть именно на ту страницу, которая им необходима. Но важно также сделать доступной функцию перехода на компьютерную версию сайта для тех, кто сидит с мобильных устройств.
- Кликабельность ссылок. Если говорить о размерах, то поля между ними следует делать минимум 28x28 пикселей. Но высчитывать это не обязательно. Главное – проверить, чтобы при нажатии на ссылку не открывалось что-нибудь дополнительное (берите во внимание большие пальцы!).
- Flash-табу. Многие мобильные браузеры не воспринимают и не показывают контент в формате Flash. Так что старайтесь его избегать, чтобы на планшетах и телефонах сайт открывался без проблем.
- Корректировка размера страниц. Viewport позволяет мобильным браузерам менять размер страницы, чтобы она точно подходила под любой гаджет. Так что на экране любого размера сайт отобразится корректно.
- «Нет» всплывающим окнам. Воздержаться от использования всплывающих окон стоит по двум причинам. Во-первых, они снижают скорость загрузки сайта. А во-вторых, они часто мешают просмотру основного контента. На маленьком экране их легко ненароком задеть и перейти на непонятную страницу, покинув важный сайт.
- Грамотное размещение компонентов сайта. Основное должно располагаться сверху, чтобы привлекать внимание, остальное – по степени важности. От лишних деталей в мобильной версии вообще лучше отказаться.
- Простая навигация. На сайте, который открывается с мобильного устройства, пользователь должен легко ориентироваться. Разбираться и копаться нет времени и желания. Здесь должно быть все быстро и элементарно.
- Удостоверьтесь, что URL-адрес мобильной версии сайта включает главное слово и удобен для запоминания и узнавания.
Что делать с контентом?
- Мобильных страниц сайта может быть по количеству больше, чем на ПК. Порой проще перейти с одной на другую, чем листать вниз в поисках нужного.
- Уберите лишние картинки, изображения и текст. На маленьком экране все смешается и будет выглядеть, как каша. Все должно быть максимально лаконично и эстетично.
- Если вы не используете публикацию рекламы в качестве основного источника дохода, в мобильной версии от нее лучше совсем отказаться. Благодаря этому, сайт будет загружаться в разы быстрее, контент не будет перекрываться надоедливыми объявлениями, а клиенты точно скажут вам «спасибо» (хотя бы мысленно).
- Что касается видео-контента, то в первую очередь удостоверьтесь, что вы их вообще загрузили и запустили грамотно. Советуем воспользоваться HTML5 проигрывателем, он прост в использовании и в нем удобно обрабатывать ролики.
- Имейте в виду, что на заголовок у вас есть всего 70 знаков. И будет он в мобильной версии разбит на две строки, поскольку ширина экрана незначительна. Продумайте название таким образом, чтобы оно смотрелось гармонично и не переносилось непонятным образом.
Несколько рекомендаций в качестве итога
- Волю пальцам! Еще раз обратите внимание на размер ссылок, картинок и других элементов страницы. Наши пальцы не такие маленькие, как курсор мышки. Иногда мы можем перекрывать контент, нажимая на какую-то область. Вообще кликабельные элементы должны быть хотя бы 1см х 1см.
- Кнопки вместо ссылок. На компьютере все просто: мы наводим курсор мыши на нужный элемент и понимаем, ссылка это или нет. В мобильной же версии так сделать невозможно, а значит нужно помочь пользователю найти кликабельную деталь. Яснее крупной говорящей кнопки ничего не придумаешь.
- Сигнал действия. В нашей стране мобильный интернет не всегда и не везде работает на «ура». Даже если ваша версия по всем проверкам показывает сверхбыструю загрузку, у кого-то она может занять время. Чтобы пользователь понимал, что все сделал верно, что сто раз кликать на один и тот же элемент не стоит и загрузка началась, обозначьте это каким-то образом. Например, «тапнутая» кнопка может поменять цвет или продавиться.
- Сделайте разворачивающееся меню. В мобильной версии это особенно актуально, потому что важно экономить и так небольшое место экрана. Если сидеть с компьютера, меню «выпадает» обычно при наведении на него курсора. На гаджете же немного по-другому. Следует сделать специальный элемент, кликнув на который, можно развернуть меню. Помните о том, что каждый пункт должен быть такого размера, чтоб нажать на него было удобно.
- Меньше печатания. Набирать текст с мобильного устройства – то еще мучение. Избавьте от него пользователя, и он будет очень этому рад. Если необходимо заполнить больше 2-3 полей, сделайте несколько страниц, которые будут постепенно возникать после нажатия на кнопку «далее». Это будет удобнее, чем листать постоянно вниз.
- Используйте мобильные возможности. Например, если вы оставляете на своем сайте номера телефонов для связи, активируйте специальную функцию – звонок в один клик. При нажатии на номер телефона со страницы автоматически пойдет вызов.
Чем удобнее будет использование вашего сайта с мобильных устройств, тем больше клиентов вы можете ожидать. Ведь гаджеты всегда у нас под рукой. Именно они облегчают нам жизнь в общественном транспорте, кафе, на учебе, на работе и в других местах, где нет возможности воспользоваться компьютером.