Россия+7 (495) 960-65-87

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

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

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

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

Анализ проводился на мобильном телефоне 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
Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
Светлана Зубрицкая
1
комментарий
0
читателей
Полный профиль
Светлана Зубрицкая - Нужно убрать пробелы между строк и заменить кавычки на вот такие "
#SEOnews14: мы празднуем – вы получаете подарки!
Rizat Sundetov
1
комментарий
0
читателей
Полный профиль
Rizat Sundetov - 14
Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
Георгий
1
комментарий
0
читателей
Полный профиль
Георгий - Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html, оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
Война с дубликатами. Как нужно и как не нужно канонизировать URL
Ann Yaroshenko
5
комментариев
0
читателей
Полный профиль
Ann Yaroshenko - Дмитрий, добрый день! Если вы проставили на странице с автозапчастями rel=canonical ( а я вижу в коде, что не проставили) или в HTTP хедере, то бот, как правило: выберит ту страницу главной, которую вы указали в rel=canonical ссылке. Eсли же вы этого не сделали, то бот сам выберит оригинал (алгоритмы, по которым бот это делает, скрыты Googl-ом)
BDD 2019: Как перестать убивать время на сбор и обработку тонны данных для SEO-аудита
Feth
1
комментарий
0
читателей
Полный профиль
Feth - Тот момент, когда от статьи в интернете получаешь больше полезных знаний и навыков, чем от своего начальства. По статьям нетпиковцев можно учебник про SEO уже сшивать, ребята молодцы. Спасибо, что делитесь информацией.
«Аудит, чтобы ты заплакала…», или Что делать, когда получил сторонний аудит сайта
TehotdelSamara@gmail.com
4
комментария
0
читателей
Полный профиль
TehotdelSamara@gmail.com - Артур! Задели своим комментарием "за живое") Абсолютно,... целиком.... и полностью согласны с вами! А именно, с тем, что продажи клиента зависят в первую очередь от клиента, перечисленных вами выше и других факторов! А ещё с тем, что чистое SEO в классическом его понимании зачастую уже не даёт результата в виде роста продаж. Если хотим увеличить продажи - нужно бить по всем фронтам, SEO - только один из них, об этом клиент должен знать и быть предупреждён... Касательно нашей рекомендации смотреть на эффективность по тому, увеличилось ли число и качество заказов или нет - в контексте данной статьи говорится о том, что SEO бывает разное. По большому счёту, результат SEO — это именно привлекаемый поисковый трафик. И этот трафик может быть качественным, целевым или нет. Кроме того, трафик должен расти. Мы говорим о том, что если специалист хорошо проработал семантику, изучил бизнес клиента, исключил фразы с околонулевым спросом и проч., то трафик должен быть целевым, растущим, что значит рост обращений в отдел продаж клиента !при условии! , что само предложение и сайт располагают к тому, чтобы обратиться в отдел продаж клиента. Действительно, современное SEO предполагает учёт значительного количества факторов, в том числе и коммерческих. Без этого и трафика зачастую не будет. Нужно доносить всё это до клиента, включать подобные работы в стоимость по SEO или отдельно. А с "хочу все подряд за 25к в месяц" мы сталкиваемся тоже. Тут только пояснять и подсказывать, давать рекомендации заранее, чтобы клиент заранее был предупреждён о том, что ему требуется сделать параллельно с нашими работами по SEO. И в итоге вся эта деятельность должна привести к росту целевого трафика как на сайт, так и в отдел продаж.
Как построить качественный ссылочный профиль на основе конкурентов
Ирина
7
комментариев
0
читателей
Полный профиль
Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
Как улучшить репутацию сайта недвижимости с помощью крауд-маркетинга
Евгений
2
комментария
0
читателей
Полный профиль
Евгений - а у вас какое впечатление от статьи?
Как я пытался купить CRM-систему, но мне ее поленились продать
Kristina
1
комментарий
0
читателей
Полный профиль
Kristina - Очень рекомендую CRM-систему польской фирмы Firmao. Все функции настраиваются в соответствии с индивидуальным потребностям компании! Советую попробовать бесплатную демо-версию, чтобы попробовать все необходимые функции, без лишних кнопок и траты дополнительных финансов! :) Сайт: firmao.ru/info
Как вывести сайт в ТОП 10 Google в 2019 году
Анна Макарова
356
комментариев
0
читателей
Полный профиль
Анна Макарова - Сергей, в нашей отрасли много заимствований из английского, иногда с ними быстрее, проще .Но будем стараться ))
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
356
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
105
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
71
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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