Мобильная версия интернет-магазина: 10 практических советов

На основе материала 10 Mobile Web Design Best PracticesЕсли в вашем плане развития интернет-магазина на этот год есть пункт «Создание мобильной версии», внимательно прочтите этот материал, добавьте в закладки и (на всякий случай) лайкните его. Здесь собраны самые ценные и дельные рекомендации из недавно опубликованного труда компании Mobify “50 Ways to Please Your Customers: A Guide to Mobile Web Design Best Practices” («50 способов удовлетворения ваших клиентов: лучшие решения для мобильного веба»). Для справки: Mobify – один из ведущих сервисов, позволяющих быстро и просто создать мобильную версию практически любого сайта.

Ссылка на полную версию

Не запирайте пользователя в тесной комнате мобильной версии. Покажите ему возможный выход – ссылку на полную версию сайта. Значительная часть посетителей наверняка поблагодарит вас за такую щедрость, ведь далеко не все хотят тратить время и силы на то, чтобы разобраться с выбранными вами оригинальными интерфейсными решениями, которыми изобилует мобильная версия интернет-магазина.

Заголовки – короче короткого

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

Размещение пояснения прямо в поле

Многие формы не требуют развернутых пояснений – логин, пароль, поиск, адрес. Краткие подсказки, в одно-два слова, можно вставлять непосредственно в само поле, используя ставший стандартным для таких целей светло-серый шрифт.

Размещение пояснений над полем

Если поместить подсказку в само поле невозможно, размещайте ее над ним. При таком подходе пользователь не потеряет пояснение из виду при приближении (zoom in) самого поля. Если подсказка находится под полем, в результате «зума» она может оказаться вне видимой области.

Все, что всплывает…

Попапы и прочие всплывающие и накладывающиеся блоки выглядит в мобильной версии несуразно и могут не работать вовсе. А вставка видео с YouTube или схемы проезда с карт Google – натуральный саботаж, так как во многих случаях нажатие на такой элемент приведет к вызову нативного приложения этих сервисов. Результат – пользователь покидает ваш интернет-магазин. Ищите альтернативные варианты.

Использование иконок из шрифтовых наборов

Красивые спрайтовые иконки – замечательная вещь, но в мобильном вебе их применение далеко не всегда является лучшим решением. Разные возможности и разрешения экранов устройств усугубляют эту проблему. Хорошая альтернатива – иконки из шрифтовых наборов, например Font Awesome; glyphish; iconsweets; symbolset.

Обоснованный выбор элементов

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

Размер шрифта – 14 px

Думаете, это перебор? Вовсе нет. Использовать меньший размер (12 px, никак не меньше) можно только в пояснениях к формам, которые содержат более двух-трех слов.

Толстые пальцы и трясущиеся руки

Ловкость рук присуща далеко не всем вашим посетителям. Каждый владелец устройства с сенсорным экраном хотя бы раз промахивался мимо объекта, на который он хотел нажать. Ну а у кого-то просто пальцы толстые, и они могут одним махом попасть сразу в несколько рядом стоящих ссылок. Учитывайте это, и делайте все кнопки, на которые можно нажать, крупными (рекомендованный размер – 40 на 40 px). И не собирайте их в одну кучу, оставляйте вокруг каждого важного объекта по 10 px пустого пространства.

Использование API

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

Автор: Vyacheslav Vityuk

Подписаться на новости

Читайте также

31 октября / Комментарии

Создание эффективной маркетинговой команды в e-commerce

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

далее →

14 сентября / Комментарии

Каких специалистов не хватает рынку e-commerce?

Развитие рынка e-commerce требует квалифицированных кадров. SHOPOLOG провел опрос, чтобы выяснить – каких же специалистов не хватает. И вот что говорят эксперты и участники рынка

далее →

Чем запомнится ECOM Expo`16

25-26 мая в Москве в пятый раз прошла крупнейшая в России и Восточной Европе выставка технологий для e-commerce -  ECOM Expo`16. Свои сервисы для интернет-магазинов под крышей двух смежных павильонов КВЦ "Сокольники" представили более 200 экспонентов, среди которых - Сбербанк, 1C, "Яндекс.Маркет" и многие другие. Выставку посетили за два дня более 6 тысяч владельцев интернет-магазинов и специалистов в области интернет-торговли.

далее →

Мошенники в сети: как распознать фальшивый интернет-магазин

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

далее →

11 февраля / Комментарии

ТОП 30 публикаций за 2015 год

За 2015 год в нашем издании было опубликовано более 500 статей на совершенно разные тематики: от сугубо отраслевых, до тем касающихся общих аспектов ведения бизнеса. На самом деле выбрать и выделить из них наиболее лучшие сложно, поскольку каждая несёт ценность для своего читателя, но мы все же постарались.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook