Мобильная версия интернет-магазина: 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

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

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

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

Отношения на расстоянии: пять советов по работе с удаленными сотрудниками

По прогнозам исследовательской компании J'son & Partners Consulting, к 2020 году пятая часть россиян будет работать удаленно. О том, как управлять такой «виртуальной армией», как мотивировать удаленный персонал на результат и выстроить слаженную команду из людей, находящихся в разных точках города, страны или даже мира, рассказывает директор по маркетингу компании 2can Петр Марков.

далее →

25 января / Комментарии

Яндекс и Mail.Group монополизируют рынок онлайн-агрегаторов: как выжить под натиском гигантов и не продаться?

В единственном сервисе доставки еды «Хочу-Поесть», который не продается, рассказывают, как выжить на конкурентном рынке, действительно ли он конкурентный и почему огромные инвестиции не могут помочь даже таким гигантам, как Uber...

далее →

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

Краткий гид по крупнейшей конференции в России для Интернет-торговли

На «Электронная торговля-2017» легко потеряться. Два дня, сотня лучших кейсов и 1 000 профессионалов в одном месте — сразу и не сориентируешься. Чтобы было легче, мы разложили всё вкусное по полочкам и делимся с вами этой полезной структурой. 5 потоков "Электронной торговли" - что внутри?

далее →

29 мая 2017 / Комментарии

20 вредных советов для интернет-магазинов

Все в детстве читали «Вредные советы» Григория Остера. А что если переложить их по взрослому на ecommerce-бизнес?
InteractiveCenter решил собрать у своих клиентов и друзей интернет-магазинщиков мнения о том, чего не следует делать в ecommerce, чтобы ни в коем случае не получить еще больше прибыли.)

далее →

11 апреля 2017 / Комментарии

Александр Гельман о крокодилах в ecommerce и почему их нужно оставить в покое

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

далее →

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