МОБАЙЛ vs. ДЕСКТОП: чем должны отличаться версии вашего сайта?

8 сентября 2017 г.

Сокращать сайт в мобильной версии или нет? Что лучше оставить, а лучше убрать? Рассмотрим исследование Baymard Institute.

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


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


Рассмотрим данные исследования, чтобы обозначить критерии идеального UX для мобильной версии e-commerce сайта.


1. Различия в контенте

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

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


Пример о сокращенном каталоге продукции:

Рассматривался сайт H&M с неполным каталогом товаров. Итог — сокращение мобильной версии привело к дополнительным действиям, таким как объяснение пользователям, что каталог представлен не полностью, почему так сделано и где найти скрытые товары.

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

Также, если поиск по ключевым словам не выводил результатов, пользователи думали, что товара вовсе нет, а не что во всем виновата сокращенная версия сайта.


Пример о странице вопросов и ответов:

При испытании мобильной версии с сокращениями были оставлены только общие вопросы и вопросы, касающиеся работы сайта на смартфонах.

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


2. Различия в функционале

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


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


Несмотря на неопределенность в данном вопросе, есть приемы, использовать которые не рекомендуется — например, “анимированная карусель” на главной странице десктопной версии сайта работает хорошо, в мобильной же мешает восприятию контента.


Также есть функции, которые следует добавить именно в мобильную версию — определение местоположения, например.


3. Различия в дизайне

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


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


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


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


Итог

Шаг 1 — проанализируйте, что именно вам (как пользователю) нравится и не нравится в мобильных версиях интернет-магазинов, которыми вы когда-либо пользовались.

Шаг 2 — разработайте сайт на основе наблюдений и исследования, описанного в этой статье.

Шаг 3 — крайне желательно протестировать получившийся сайт на фокус-группе для доработок.

Шаг 4 — поздравляем, вы готовы к приросту количества пользователей, потому что только что создали еще одну удобную площадку для продажи ваших продуктов!