Доля мобильного трафика в интернете становится все существеннее с каждым годом, полугодием и даже месяцем. Все больше пользователей заходят на сайты с мобильных телефонов. Все важнее становится для компании наличие версии сайта, которая адаптируется под мобильный телефон, сохраняя полноту информации и удобство для пользователя.
Поэтому данный обзор мы решили посвятить анализу основных проблем в интерфейсе мобильных сайтов. Мы рассмотрели практически все сайты, заявки на которые были отправлены, за исключением тех сайтов, у которых отсутствовала мобильная версия.
Анализ проводился на мобильном телефоне Lenovo A536 с разрешением дисплея 854x480, с системой Android 4.4.2, в браузере Google Chrome.
Телефон на сайте
Как часто бывало, что вам нужно срочно найти номер телефона какой-либо компании, медицинского центра, магазина или чего-то другого, а под рукой был только телефон. Тогда вы начинали искать сайт искомого заведения в интернете, чтобы узнать номер телефона. Когда, наконец, номер находился, оказывалось, что на него нельзя просто нажать и сразу позвонить, его нужно копировать или и того хуже, запоминать и по частям набирать на телефоне, чтобы позвонить.
Итак, что стоит сказать о номере телефона на мобильной версии сайта? Он чрезвычайно важен. Ведь человек заходит на сайт именно с телефона, с которого потом будет звонить. Рассмотрим, каким же критериям должен соответствовать номер на сайте:
- Телефон должно быть легко найти, хорошо, если он находится в шапке или где-то вверху экрана.
- По клику на номер телефона пользователя нужно переводить в экран совершения звонка, откуда он может сразу позвонить по номеру телефона компании без необходимости запоминать или копировать номер. Для этого телефон нужно оформить с помощью тега .
- Номер обязательно должен начинаться с +7 или 8, так как это является обязательным условием для успешного совершения звонка.
- Хорошо, если есть бесплатный номер по РФ «8 800»
Рассмотрим сначала три неудачных примера:
- bergarchitects.ru
Здесь при клике на номер телефона вместо того, чтобы сразу перейти на экран набора номера открывается дополнительная информация, которая, к сожалению, также некликабельна и вообще представлена в виде картинки. Поэтому связаться с компанией очень затруднительно.
- massm.ru
Телефона вообще нет ни в шапке, ни на главной странице.
- nebosvod.ru
Номер телефона виден, только если развернуть меню. По номеру можно кликнуть, но перехода к звонку не происходит. Но в этом случае телефон хотя бы можно скопировать.
Удачные примеры:
- gopro-shop.by
Номер телефона расположен в самом верху страницы, кликабелен, но указан мелким кеглем.
- sharkart.com.ua
Номера телефона находятся вверху страницы и являются кликабельныи. Как недостаток можно отметить только их небольшой размер и не очень высокую контрастность (зеленый на черном).Чтобы сделать телефоны заметнее, можно перекрасить их в белый цвет.
Удобное мобильное меню
Второй немаловажный параметр после номера телефона – это удобство меню сайта. К нему есть следующие требования:
- Меню должно быть на всех страницах.
- Меню должно выглядеть так, чтобы было понятно, что это меню, и его должно быть легко найти.
- Кегль шрифта пунктов меню должен быть достаточно большим, а расстояние между пунктами таким, чтобы пользователь мог легко попасть по нужному пункту и не промахнуться, независимо от размеров его пальцев.
- При этом меню должно быть компактным, чтобы не занимать много пространства, которое на экране мобильного телефона и так ограничено.
Рассмотрим несколько удачных и неудачных решений.
Неудачные примеры:
- gree.kiev.ua
Главное меню сайта находится на каждом экране вверху в раскрытом виде. С одной стороны, меню сразу видно, с другой стороны, оно занимает слишком много места. При выборе какого-либо пункта меню и переходе на соответствующую страницу пользователь просто не видит, что он куда-то перешел, так как верхняя часть экрана не меняется.
- a24mag.ru
На сайте нет как такового меню каталога товаров. Все товарные группы представлены на главной странице. При клике на категорию происходит переход внутрь нее, но одновременно с этим на долю секунды открывается меню с подкатегориями, которое быстро пропадает. Такое интерфейсное решение будет вызывать у пользователей большое количество вопросов.
Паджинация на сайте вообще вытягивается по высоте страницы и занимает очень много пространства.
Удачные примеры:
- sharkart.com.ua
Меню сразу заметно, оно подписано, попасть пальцем по нему очень легко, пункты меню написаны достаточно крупно и по ним легко кликнуть и не промахнуться.
- korea-cosmetircs.ru
Меню находится в правом верхнем углу, оно не подписано, а изображено в виде трех линий. Скорее всего, такое условное обозначение будет понятно пользователям, хотя данное оформление в удобстве все-таки уступает предыдущему примеру.
- swlux.ru
Главное меню и меню каталога сделаны достаточно удачно, единственное, что можно посоветовать, так это переименовать слово «Категории» в «Каталог», чтобы пользователям было понятнее, также стоит выровнять слово «Меню» по левому краю.
Тексты на сайте
Оформление текстов на мобильной версии сайта играет не последнюю роль. С одной стороны, люди часто торопятся, когда пользуются сайтами с сотовых телефонов. С другой стороны, иногда, особенно в транспорте или в очереди, у пользователей есть время «почитать». Поэтому при удачном оформлении текстов они будут не против узнать что-нибудь полезное. Однако стоит отметить, что в любом случае на мобильной версии сайта пользователи будут читать меньше, чем на полной.
К оформлению текста есть несколько требований:
- Читабельный шрифт, не очень мелкий, контрастный.
- Разбивка текста на небольшие абзацы и выделение заголовков.
- Использование инфографики в тексте (небольших иконок, изображений).
- Использование разных элементов оформления – фона, таблиц, списков и т.п.
- Выравнивание текста по левому краю.
- Тексты «по делу» без лишней «воды».
Сначала рассмотрим неудачные примеры:
- nebosvod.su
В целом на сайте достаточно много с трудом читаемых текстов. Это обусловлено тем, что для объемных блоков текста используется выравнивание по центру, которое, как правило, применяется только для заголовков. Для основной массы текста используется выравнивание по ширине, которое оставляет большие пробелы между словами, из-за чего текст кажется рваным и нечитабельным. Большие блоки текста, не разбитого на достаточное количество абзацев, также сложны для восприятия. Все это делает тексты практически не читабельными с мобильных устройств.
- massm.ru
На сайте представлен не совсем удачный вариант оформления текстов в описании товаров. Шрифт достаточно мелкий и слабо контрастный, поэтому читается с трудом. Хотя текст и выравнен по левому краю, ширина отведенной под него области ограничена, поскольку слева остается увеличенный отступ. Отдельные слова в тексте выделены подчеркиванием, поэтому пользователи могут подумать, что они являются ссылками, хотя данные текстовые элементы на самом деле не кликабельны.
Удачные примеры:
- tender-spc.ru
Тексты на этом сайте можно считать достаточно удачным примером оформления. Они выравниваются по левому краю, разбиваются на абзацы с заголовками, сопровождаются различными элементами оформления, дают информацию только «по делу».
Корректная верстка страниц
Страницы сайта должны корректно отображаться на разных телефонах с разными разрешениями экрана и помещаться на них целиком.
Неудачные примеры
- massm.ru
На странице «корзины» много информации попадает за пределы экрана, не помещаясь целиком. Чтобы увидеть ее полностью, пользователю приходится прокручивать экран по горизонтали, что весьма неудобно.
- shakart.com.ua
В новостях, содержащих фотографии, изображения не адаптируются под размер страницы, отображаясь целиком, отчего для их просмотра нужно сильно уменьшать масштаб.
- nebosvod.su
На сайте подвесных потолков «Небосвод» на страницах некоторых услуг присутствуют таблицы. Они целиком не помещаются в ширину экрана, что создает пользователям проблемы при их изучении.
- bergarchitects.ru
На самой важной странице сайта – оформлении заказа – названия полей не помещаются целиком по ширине в экран и при этом прокрутка страницы по горизонтали, чтобы посмотреть названия полей, заблокирована. Таким образом, часть пользователей, которые сталкиваются с данной проблемой, могут вообще отказаться от оформления заказа на сайте.
Лаконичность содержания
Пользователи, заходящие на сайты с мобильных телефонов, хотят не просто получить информацию, но получить ее концентрат без лишней «воды» и сделать то, что им нужно как можно быстрее. Однако многие сайты изобилуют избытком данных, часто излишних на мобильной версии. Желательно такую информацию либо вообще убирать, либо скрывать в сворачивающихся блоках.
Неудачные примеры:
- nebosvod.su
При входе на страницу «Цены - Расчет цены с установкой “под ключ”» пользователь сразу ожидает увидеть некое подобие калькулятора, который позволит ему посчитать стоимость потолка. Но вместо этого он видит очень длинную страницу, которая называется не «калькулятор» или «расчет», а «Купить натяжные потолки у производителя – недорого, с установкой и без». Вверху страницы представлены примеры потолков «под ключ» и текст, который пользователь не будет читать, т.к. он ищет калькулятор.
- massm.ru
Страница оформления заказа должна быть как можно проще и понятнее пользователю, а процесс оформления – как можно быстрее и короче. На странице оформления заказа, особенно на мобильном телефоне, не должно быть большого количества полей, лишних блоков, ненужных регистраций. Однако на сайте MassMarket на странице оформления заказа есть вариант заказа с регистрацией и заказа в качестве гостя. При выборе быстрого оформления заказа, как гость, у пользователя просят массу информации, превращая быстрый заказ в «медленный». Например, все время присутствует поле «Адрес», обязательное для заполнения, которое на самом деле совершенно не нужно, если пользователь выбирает «Самовывоз». Также запрашиваются данные в поле «Город», хотя сайт мог бы автоматически определить город и предложить его как вариант пользователю.
Удачные примеры
- shakart.com.ua
Простое и удобное оформление заказа, без лишних блоков, полей и лишней информации. Заполнил три поля и готово. Все быстро и понятно.
- korea-cosmetics.ru
На сайте корейской косметики при оформлении заказа указано необходимо минимальное количество полей для доставки почтой и часть этих полей сразу заполнена автоматически, например: «Страна» и «Город». Поле «Индекс», который пользователи очень часто не помнят или даже не знают, определяется автоматически, что сильно облегчает взаимодействие с сайтом и повышает конверсию.
В данном обзоре мы рассмотрели самые основные аспекты интерфейса мобильного сайта, и в дальнейших выпусках «Юзабилити-лаборатории» еще вернемся к этой теме. Надеемся, данный аудит будет вам полезен, и при создании своего мобильного сайта вы обойдете грабли, на которые уже наступали другие.