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

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

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

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

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

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

далее →

30 марта / Комментарии

Как лучше всего заканчивать запрос отзыва? Результаты исследования

Есть такой старый короткий анекдот: «"Документы на стол! - закричал Штирлиц и врезал Мюллеру в ухо. - Кстати, Мюллер, не найдется ли у Вас канцелярских скрепок?" Голос за кадром: Штирлиц знал, что лучше всего запоминается последняя фраза, и если Мюллера спросят, зачем приходил Штирлиц, тот ответит: "За канцелярскими скрепками"». Оказывается, в этом анекдоте есть доля истины. Email-сервис Boomerang изучил 350.000 писем и выяснил, какие фразы в завершении послания лучше всего стимулируют получателя всё-таки дать свой ответ.

далее →

27 марта / Комментарии

Реалити-шоу пришло в eCommerce. Невозможное возможно

Недавно коллеги из CS-Cart публично объявили о своей готовности уже в ближайшее время запустить уникальный проект - eCommerce реалити шоу. Эксперт в области электронной торговли на ваших глазах запустит с нуля интернет-магазин и выведет его в прибыль всего за 3 месяца.

далее →

23 марта / Комментарии

Основные события 2016 года в российском e-commerce

О своем взгляде на события, определившие облик российского рынка интернет-торговли в 2016 году рассказывают: партнер исследовательского агентства Data Insight Федор Вирин, президент Национальной ассоциации дистанционной торговли Александр Иванов, генеральный директор Ozon Доставка Зоя Ли, директор по маркетингу компании «Аудиомания» Тимофей Шиколенков, глава PR в компании Avito Андрей Барковский, генеральный директор Pick Point Надежда Романова.

далее →

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

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

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

далее →

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