Рекламные кампании для вашего бизнеса
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

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

Россия +7 (495) 960-65-87
Шрифт:
1 10268

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

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

Анализ проводился на мобильном телефоне 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

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

internet-dlya-biznesa

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
  • Надя К.
    1
    комментарий
    0
    читателей
    Надя К.
    3 месяца назад
    Мария, спасибо вам за наглядные примеры!
    -
    0
    +
    Ответить
    Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
23 действительно эффективных совета по продвижению интернет-магазина
Гость - Троль Гуру паНгинации - Что такое паНгинация?))))
Конкурс: угадайте пятерку лидеров рейтинга «SEO глазами клиентов 2016»
Марина
1
комментарий
0
читателей
Полный профиль
Марина - Ingate i-Media SEO.RU Netpeak 1PS.RU
Анализ ссылок: сравнение многофункциональных платформ по размеру их баз
Михаил - Хватит пениться на каждый аргументированный отзыв. Это не придает вашей компании чести.
Как создать интернет-магазин: сколько стоит открытие?
Гость - да у битрикса что ни обновление - то сплошные баги. недавно знакомый обновился на лицензии интернет-магазина, про***лись заказы за последнюю неделю, слетели все связи по складам. одним словом, жопа. при этом обновился на сразу, а спустя месяц после выкатывания, надеялся, успеют все поправить
Как упростить продвижение вечными ссылками?
Coursh - Зарегестрировался. Накинули 1100 рубликов за пополнение на 10к. Очень неплохо!
Вопрос недели: почему сайт хорошо ранжируется в Google и не интересует Яндекс?
Nina S.Dzh. - У вас достаточно конкурентная тематика для рунета и по главной странице домена расположена англоязычная версия. Полагаю, в этих двух фактах вся проблема. Поскольку Яндекс в данном случае считает английскую версию сайта приоритетной, а среди ваших конкурентов в выдаче достаточно много хороших русскоязычных сайтов, то он и не ранжирует ваш сайт высоко. Грубо говоря, ему есть что предложить пользователю и без вашего сайта. На мой взгляд, в данном случае версии нужно разводить по разным доменам, русскую вешать на RU и продвигать там.
Кому и зачем нужен маркетплейс от Яндекса
Дарья Калинская
203
комментария
0
читателей
Полный профиль
Дарья Калинская - Максим, спасибо, рада, что статья оказалась полезной )
Конкурс: угадай победителя рейтинга «Известность бренда SEO-компаний»
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Оптимизм Дэмис Кокос Ашманов и Партнеры Раш эдженси
ТОП-10 автоматизированных сервисов контекстной рекламы
Жанна Рожкова
155
комментариев
0
читателей
Полный профиль
Жанна Рожкова - Научитесь отличать рекламу от PR-активности. Если следовать вашей логике, на этом сайте (и на всех остальных информационных ресурсах в принципе) кроме рекламы ничего и нет. Так что насчет статьи от понимающего эксперта? Будем рады, если подготовите
Тест: Продвинь сайт в Google с одной попытки
Гость15 - Спасибо)
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
285
Комментариев
262
Комментариев
203
Комментариев
171
Комментариев
155
Комментариев
137
Комментариев
123
Комментариев
97
Комментариев
97
Комментариев
93
Комментариев
80
Комментариев
70
Комментариев
67
Комментариев
60
Комментариев
55
Комментариев
52
Комментариев
49
Комментариев
45
Комментариев
44

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