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

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

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

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

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

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

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

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
  • Надя К.
    1
    комментарий
    0
    читателей
    Надя К.
    6 месяцев назад
    Мария, спасибо вам за наглядные примеры!
    -
    1
    +
    Ответить
    Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
SEOnews и Serpstat запускают конкурс для интернет-маркетологов
Анна Ольяная
4
комментария
0
читателей
Полный профиль
Анна Ольяная - благодарю :)
Как построить качественную ссылочную массу сайта
Айрат Рахимзянов
39
комментариев
0
читателей
Полный профиль
Айрат Рахимзянов - Спасибо Кирилл. Сейчас восстановилась работа сервиса: take.ms/ttXrw
«Я оптимизировал сайт, а он не в ТОП! Что делать?»
Павел Горбунов
7
комментариев
0
читателей
Полный профиль
Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
Екатерина Иванова
1
комментарий
0
читателей
Полный профиль
Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
Мир глазами поисковых систем
Александр Рунов
4
комментария
0
читателей
Полный профиль
Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
Google.ru внесли в реестр запрещенных сайтов
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
SEMrush: факторы ранжирования в Google в 2017 году
Анна Макарова
292
комментария
0
читателей
Полный профиль
Анна Макарова - Уважаемый S1, я тоже понимаю, что есть такие люди, которые заметив допущенную неточность несутся на всех парусах продемонстрировать "силу" своего ума. Спасибо вам за пристальное внимание. Это поможет нам быть лучше.
Монетизация сайта. Как, когда, сколько?
Ruslan Baybekov
2
комментария
0
читателей
Полный профиль
Ruslan Baybekov - Максим, добавили возможность вывода дохода на Яндекс Деньги и WMR.
Интеграция call tracking и CRM: углубленный анализ данных о звонках и продажах
Денис
2
комментария
0
читателей
Полный профиль
Денис - Какой смысл вообще в облачных CRM, обрезанный фугкционал, свое дописать невозможно, слив клиентов другим компаниям. Серверные бесплатные CRM куда надежней и кастамизируй как хочешь.
Дашборд Метрика 2.0 – мониторинг проблем на сайте в режиме реального времени
Константин Сокол
24
комментария
0
читателей
Полный профиль
Константин Сокол - Есть динамика трафика по разделам. Этот виджет показывает некоторые фильтры, в результате которых с поиска выпадают целые разделы.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
292
Комментариев
262
Комментариев
219
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
55
Комментариев
52
Комментариев
48
Комментариев
45

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