×
Россия +7 (495) 139-20-33

«Юзабилити-лаборатория»: разбираем мобильные сайты

Россия +7 (495) 139-20-33
Шрифт:
1 14213

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

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

Анализ проводился на мобильном телефоне Lenovo A536 с разрешением дисплея 854x480, с системой Android 4.4.2, в браузере Google Chrome.

Телефон на сайте

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

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

  • Телефон должно быть легко найти, хорошо, если он находится в шапке или где-то вверху экрана.
  • По клику на номер телефона пользователя нужно переводить в экран совершения звонка, откуда он может сразу позвонить по номеру телефона компании без необходимости запоминать или копировать номер. Для этого телефон нужно оформить с помощью тега < a href="tel:номер телефона ">.
  • Номер обязательно должен начинаться с +7 или 8, так как это является обязательным условием для успешного совершения звонка.
  • Хорошо, если есть бесплатный номер по РФ «8 800»

Рассмотрим сначала три неудачных примера:

- bergarchitects.ru

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

ul2.png

- massm.ru

Телефона вообще нет ни в шапке, ни на главной странице.

ul3.png

- nebosvod.ru

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

ul4.png

Удачные примеры:

- gopro-shop.by

Номер телефона расположен в самом верху страницы, кликабелен, но указан мелким кеглем.

ul5.png

- sharkart.com.ua

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

ul6.png

Удобное мобильное меню

Второй немаловажный параметр после номера телефона – это удобство меню сайта. К нему есть следующие требования:

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

Рассмотрим несколько удачных и неудачных решений.

Неудачные примеры:

- gree.kiev.ua

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

ul7.png

- a24mag.ru

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

ul8.png

Паджинация на сайте вообще вытягивается по высоте страницы и занимает очень много пространства.

ul9.png

Удачные примеры:

­- sharkart.com.ua

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

ul10.png

- korea-cosmetircs.ru

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

ul11.png

- swlux.ru

Главное меню и меню каталога сделаны достаточно удачно, единственное, что можно посоветовать, так это переименовать слово «Категории» в «Каталог», чтобы пользователям было понятнее, также стоит выровнять слово «Меню» по левому краю.

ul12.png

Тексты на сайте

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

К оформлению текста есть несколько требований:

  • Читабельный шрифт, не очень мелкий, контрастный.
  • Разбивка текста на небольшие абзацы и выделение заголовков.
  • Использование инфографики в тексте (небольших иконок, изображений).
  • Использование разных элементов оформления – фона, таблиц, списков и т.п.
  • Выравнивание текста по левому краю.
  • Тексты «по делу» без лишней «воды».

Сначала рассмотрим неудачные примеры:

- nebosvod.su

В целом на сайте достаточно много с трудом читаемых текстов. Это обусловлено тем, что для объемных блоков текста используется выравнивание по центру, которое, как правило, применяется только для заголовков. Для основной массы текста используется выравнивание по ширине, которое оставляет большие пробелы между словами, из-за чего текст кажется рваным и нечитабельным. Большие блоки текста, не разбитого на достаточное количество абзацев, также сложны для восприятия. Все это делает тексты практически не читабельными с мобильных устройств.

ul13.png

- massm.ru

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

ul14.png

Удачные примеры:

- tender-spc.ru

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

ul15.png

Корректная верстка страниц

Страницы сайта должны корректно отображаться на разных телефонах с разными разрешениями экрана и помещаться на них целиком.

Неудачные примеры

- massm.ru

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

ul16.png

- shakart.com.ua

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

ul17.png

- nebosvod.su

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

ul18.png

- bergarchitects.ru

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

ul19.png

Лаконичность содержания

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

Неудачные примеры:

- nebosvod.su

При входе на страницу «Цены - Расчет цены с установкой “под ключ”» пользователь сразу ожидает увидеть некое подобие калькулятора, который позволит ему посчитать стоимость потолка. Но вместо этого он видит очень длинную страницу, которая называется не «калькулятор» или «расчет», а «Купить натяжные потолки у производителя – недорого, с установкой и без». Вверху страницы представлены примеры потолков «под ключ» и текст, который пользователь не будет читать, т.к. он ищет калькулятор.

ul20.png

 - massm.ru

Страница оформления заказа должна быть как можно проще и понятнее пользователю, а процесс оформления – как можно быстрее и короче. На странице оформления заказа, особенно на мобильном телефоне, не должно быть большого количества полей, лишних блоков, ненужных регистраций. Однако на сайте MassMarket на странице оформления заказа есть вариант заказа с регистрацией и заказа в качестве гостя. При выборе быстрого оформления заказа, как гость, у пользователя просят массу информации, превращая быстрый заказ в «медленный». Например, все время присутствует поле «Адрес», обязательное для заполнения, которое на самом деле совершенно не нужно, если пользователь выбирает «Самовывоз». Также запрашиваются данные в поле «Город», хотя сайт мог бы автоматически определить город и предложить его как вариант пользователю.

ul21.png

Удачные примеры

- shakart.com.ua

Простое и удобное оформление заказа, без лишних блоков, полей и лишней информации. Заполнил три поля и готово. Все быстро и понятно.

ul22.png

- korea-cosmetics.ru

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

ul23.png

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

(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Надя К.
    1
    комментарий
    0
    читателей
    Надя К.
    больше года назад
    Мария, спасибо вам за наглядные примеры!
    -
    1
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как выбрать CMS для интернет-магазина
demimurych
17
комментариев
0
читателей
Полный профиль
demimurych - Очередное волшебство, а не материал. все что ниже, сказано человеком который больше 20 лет своей жизни посвятил ковырянию исходных кодов систем. Битрикс по качеству кода и функциональности ровно такое же говно как и вордпресс. Заявить что он разрабатывается группой крутых программистов может только человек, который не знает что такое программирование. Единтсвенное отличие битрикса от вордпресса, это сертифицированнось на определенном локальном рынке. поставить Друпал в один ряд с вордпрессом, это видимо в продолжении предыдущей бугогашечки про крутых программистов в битриксе. тут важно отметить, что если битрикс и вордпресс являлись говном одного сорта весь цикл своего существования, то друпал имеет минимум 4 принципаильно разных кодовых базы. При этом даже самая примитивная из них - друпал 5 ветки, которому больше 12 лет, на голову выше текущих вп с битриксом вместе взятых. с точки зрения разработки - конечно. А не востребовтных на текущий момент плагинов. теория про разработку кода группой крутых программистов, не выдерживает никакой критики. достаточно просто оглянуться назад и увидеть, что в мире опенсорса есть как примеры эталонного говна - вордпресс, так и полная противоположность им типа РОР ставшего фактически во многом и на долго эталоном веб разработки. И это я еще ненапомнил автору о том, что есть такие вещи как питон, миникс и т.д. примеров качественного по в мире разработки открытым сообществом на порядки больше, чем наоборот. и тому есть ряд очень простых обьяснений. первое из которых, никто вам не даст просто так закомитить в ядро любой свой говнокод. даже в вордпресе. словом, информация в статье, как и ее выводы - это из области работы со своим воображением, чем с текущей ситуацией на рынке.
Ссылочное продвижение локальных сайтов: ТОП худших SEO-методов
demimurych
17
комментариев
0
читателей
Полный профиль
demimurych - о господи. это для регионального сайта? в яндексе? где у сайта по региону конкурентов меньше чем выдачи на двух страницах из которых перваш это реклама москвы? потешно ей богу. ктото чего то не понеимает.
Тест по SEO – проверь свой уровень знаний
Артем Дорофеев
8
комментариев
0
читателей
Полный профиль
Артем Дорофеев - Полный текст вопроса со скриншотом панели прикладываю. Итого, что имеем: - на скриншоте отмечено, что это фильтр МПК - сайт коммерческий - рекламы на сайте нет С вероятностью 95% это ошибка (которая уже дважды случалась в Яндексе), когда они случайно "закосили" неповинные сайты. Тогда по запросу Платону фильтр быстренько снимали. Но вопрос даже не на знание этого нюанса. В любой непонятной ситуации, прежде чем что-либо предпринимать (особенно переписывать весь контент на сайте или менять дизайн, как указано в других вариантах) - фильтр следует подтвердить. Правильный ответ: "Написать письмо в техподдержку Яндекса".
Автоматические SEO-аудиты: как напугать некорректными выводами
Trydogolik
25
комментариев
0
читателей
Полный профиль
Trydogolik - спасибо
Зачем подменять контент на сайте: разбираем инструмент и развенчиваем мифы
Trydogolik
25
комментариев
0
читателей
Полный профиль
Trydogolik - К мифу 1 добавлю Google optimize optimize.google.com Удобен для сотрудников со спец. знаниями и без них. Подмена контента настраивается за счет многих вариантов страниц и условий настроек распределения трафика. Варианты страниц можно легко создать копипастом. На мой взгляд удобно и бесплатно. Тот же Calibri и программисты в любом случае, пусть не за это, но где-то берут свою комиссию. (чисто мое мнение). В качестве цены отдаешь такой ресурс как личное время и копейки за внесение двух первоначальных изменений в html шаблон страниц. Но если ваша digital-кампания имеет совесть то оплата максимум час, а то и бесплатно. Интернет-маркетолог сам должен уметь это делать. Все просто + подробную инструкцию прилагают на языке пользователя. + за поддомены платить не надо, они вообще не нужны. + взаимодействие с: - Google Ads; - Google Tag; - Google Analytics просто прекрасно отслеживается по всем вариантам параллельно. Это помогает до деталей нарисовать профиль ЦА по любому "кредиту - отдельно на машину и отдельно на бизнес". Что с аналитикой у Calibri на этот счет? Сам с Calibri не разу не работал, всегда работаю с первоисточником. + к мифу 3 в том что это и есть детище поисковой системы и рекламного инструмента. Яша тоже спокоен будет так как сам везде навязывает Турбо-страницы (считаю их не удобными).- Как "-" (минус) вижу то, что может повлиять на скорость загрузки сайта. Но если у вас не конструктор, а темболее Landing Page, то о скорости можно не волноваться. Но это чисто мое мнение. В остальном согласен с автором.
Монетизируйте свой сайт вместе с VIZTROM
VIZTROM
3
комментария
0
читателей
Полный профиль
VIZTROM - Добрый день! Так как мы сейчас работаем в приватном режиме, Вы врятли можете объективно оценить нашу рекламную площадку. У нас будет официальный запуск 3 марта для вебмастеров. Приглашаем Вас присоединиться к нам и лично посмотреть наш функционал.
100+ ресурсов по SEO для изучения поисковой оптимизации с нуля
Марина Ибушева
59
комментариев
0
читателей
Полный профиль
Марина Ибушева - Спасибо за добавление. Мы уже работаем над отдельным материалом про курсы, потому что одной статьи мало, чтобы охватить все крутое по обучению)
7 способов увеличить авторитетность сайта «в глазах» поисковых систем
Юлия Гуща
1
комментарий
0
читателей
Полный профиль
Юлия Гуща - Спасибо за статью, особенно за пункт про разнообразие использования ключевых слов. А какие инструменты можете порекомендовать для анализа ключевых слов? Я чаще всего использую Ahrefs и sitechecker.pro/ru/. И нужно ли добавлять ключи в хлебные крошки?
Digital-разговор: Михаил Шакин про SEO, Google и заработок в интернете
Анна Макарова
371
комментарий
0
читателей
Полный профиль
Анна Макарова - Подготовим ) Пока предлагаю почитать интервью с Денисом Нарижным из той же серии. Там стенограмма =) www.seonews.ru/interviews/digital-razgovor-denis-narizhnyy-pro-ukhod-iz-seo-i-zarabotok-na-partnerkakh/
Почему вы торгуетесь за показы, даже если платите за клики
Константин Требунских
3
комментария
0
читателей
Полный профиль
Константин Требунских - Дмитрий, спасибо за комментарий, хорошие замечания!) 1. "Какая-то подмена понятий. CPM у “Original Works” взлетает не от того, что у них РАВНАЯ цена клика, а оттого, что вы "с потолка" поставили ему CPC в 2 раза выше, чем был. Логично, что и CPM в 2 раза увеличился (см. формулу выше). Если бы вместо 5 вы всем решили поставить 2 или 1.5, то он бы наоборот уменьшился." Вы правы, что CPM уменьшился бы. В первой и второй табличке берем одинаковое количество показов (именно за них мы платим сначала) и считаем данные, в том числе CPC. Мы поставили рекламодателей в одинаковые условия и посмотрели их эффективность в разрезе цены клика при одинаковом количестве показов. А затем изменился аукцион, и, взяв получившиеся данные по кликам и CTR, мы поставили рекламодателей тоже в одинаковое положение, но уже по цене клика, ведь мы теперь за него платим. Посчитали эффективность в разрезе уже CPM. Тут если и есть подмена понятий, то она точно не моя, а рекламных систем, потому и обозначена, как "ход конем" :) 2. "Ок, смотрим таблички "как оно было" и "как оно стало". Было: система суммарно за 2 000 денег показала рекламу 4 000 раз. Стало: система суммарно за 2 000 денег показала рекламу 13 500 раз. Сомнительный профит для системы." Вы правы, именно поэтому для рекламодателей с низким CTR ставка будет выше, чем для рекламодателей с высоким CTR. Просто чтобы система окупилась. Потому что, системе выгодно продавать показы тем, у кого кликов будет больше (ведь они платят за клик). По факту реальные цены за клик в аукционе будут как в таблице 2. Но ранжирование системы проводят по таблице 5.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
371
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
139
Комментариев
121
Комментариев
111
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
86
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
59
Комментариев
57

Отправьте отзыв!
Отправьте отзыв!