15 советов по мобильному дизайну для увеличения продаж электронной коммерции

Знаете ли вы, что 55% всего трафика электронной коммерции сейчас приходится на мобильное устройство??


Это верно, более половины всех людей, которые смотрят на сайты покупок, находятся на своем телефоне или планшете.

Тем не менее, вот в чем проблема: 46% из 50 крупнейших розничных компаний по-прежнему не имеют адаптивного мобильного сайта. Таким образом, хотя половина всего трафика покупок происходит на мобильном телефоне, половина ритейлеров не настроена на это. Это означает, что половина покупателей сжимает, масштабирует и крутит телефон, чтобы правильно увидеть веб-сайт..

Итак, мы согласны, отзывчивый, привлекательный мобильный сайт очень важен. Но это только начало. Как и настольный сайт, вы можете настроить и оптимизировать свой мобильный сайт, чтобы он еще больше увеличил продажи. Вот как:

1. Простота

Работать с таким маленьким экраном всегда будет сложно. Вот почему простота – ваша цель номер один. Для сайтов электронной коммерции это особенно сложно, потому что есть так много контента, чтобы выжать. Как вы продвигаете все свои продукты, не загромождая маленькое место на экране??

Посмотрите, как ETQ показывает свой ассортимент обуви на своем мобильном сайте. Это красиво в своей простоте. Они оставили большую часть пространства на экране совершенно свободным, чтобы поставить свою продукцию в центр внимания. Даже цветовая палитра была выбрана в соответствии с ассортиментом. Это дает всему сайту простое, связное чувство. Хотя экран крошечный, он кажется просторным.

2. Подумайте о большом пальце!

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

отслеживание большого пальца

Имея это в виду, вы не хотите помещать какие-либо кнопки или необходимые компоненты в верхние разделы. Оставьте это только для заголовков. Поместите весь прокручиваемый контент и кнопки посередине, чтобы к нему было легко и удобно обращаться. (Не забудьте подумать о левшах! Переверните изображения выше, чтобы увидеть, как все получается для левшей).

3.… особенно большие пальцы

В дополнение к «большому пальцу», вы должны также рассмотреть «большой палец». Мы все использовали мобильный веб-сайт, где вам нужно нажать на крошечную ссылку. Это сложно и расстраивает, верно? Общее правило выбирает более крупные элементы, чем вы считаете нужным.

«Большой

Мобильный сайт Hobbycraft является хорошим примером. Прежде всего, их ссылки на большие картинки делают его очень простым для больших пальцев. Но взгляните на их значки сверху («магазины, аккаунт, корзина»). Они намного больше, чем вы обычно ожидаете. Hobbycraft думает о большом пальце, и вы должны.

4. Гамбургер навигационные меню

Одним из самых популярных трендов в дизайне последних двенадцати месяцев является меню «гамбургер». Вы можете увидеть пример на сайте Hobbycraft выше. Это три строки, которые выглядят как гамбургер – нажмите на него, и полное меню навигации раскроется.

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

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

IMG_3663

5. Выберите большой шрифт

Маленький мобильный экран заставляет нас задуматься о шрифте, который мы используем. Там нет места для маленьких, сложных шрифтов. Вместо этого думайте просто, смело и широко. Обычно шрифт без засечек чище и проще (т. Е. Ариэль лучше, чем Times New Roman).

71950dee059b803c4a7caa30dce8f5bf

Помните, что это решение также заставит вас более тщательно выбирать копию и формулировку. Используйте эту возможность, чтобы упростить и оптимизировать вашу копию. Постарайтесь донести свое сообщение максимально просто и ясно. Сделай это коротким. Быстро сделать. Это не просто сделает ваш мобильный дизайн лучше, это сделает весь ваш бизнес лучше.

6. Используйте «умный поиск»

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

Чтобы улучшить взаимодействие с пользователем, используйте поле «интеллектуального поиска». Если щелкнуть поле, дизайн должен автоматически перефокусироваться, чтобы окно поиска заполнило весь экран. Затем убедитесь, что он выполняет интеллектуальный поиск, поэтому пользователю нужно ввести только первые несколько букв..

Вы можете увидеть это в действии на сайте Europcar. Клиент начинает печатать «Norw», и сайт автоматически предлагает различные его отделения в Норвиче. просто.

IMG_4331

7. Упростите ваши формы регистрации и покупки

Мы много говорим о том, как сделать вашу регистрацию и покупку форм максимально простой и быстрой. Это ключевая часть вашей стратегии дизайна UX. Это также место, где сайты электронной коммерции теряют до 60% конверсий из-за усложнения. Если они начали процесс, клиент уже убежден. Единственный способ потерять продажу или подписку – сделать вещи слишком сложными..

Опять же, попробуйте ограничить количество набираемого текста. Используйте поля прогнозирующего типа и включите параметры автозаполнения. Например, используйте инструменты прокрутки для пользователей, чтобы выбрать параметры даты рождения. Мы знаем, что формы покупки часто требуют много информации. Тем не менее, есть способ сделать этот процесс проще.

Посмотрите, как Firebox использует систему счисления, чтобы показать пользователям, какие этапы остались в процессе. Ключевой прием UX-дизайна – дать пользователям знать, где они находятся. Как клиенты, нам нравится знать, что мы можем ожидать, и Firebox делает это умело.

img_1292-блог половина

8. Три слоя максимум

Гораздо проще «заблудиться» на мобильном сайте. В идеале вы хотите убедиться, что ваш мобильный сайт имеет только три уровня. Пример того, как это может работать на модном сайте электронной коммерции:

  1. Домашняя страница: клиент выбирает категорию: девушки
  2. Клиент выбирает «подкатегория: обувь»
  3. Клиент нажимает на странице товара.

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

9. Сделать легко вернуться на главную страницу

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

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

img_1304-блог половина

10. Нет масштабирования!

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

Яблочно-Пинч-на-зум

Есть только одно исключение, когда пинчинг полезен: изображения товара. Для клиентов по-прежнему очень полезно зажимать и увеличивать изображения продуктов. Они хотят видеть каждую мелочь перед покупкой.

11. Решить проблему “безопасности”

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

Это простой вопрос доверия. Ваша работа – сделать так, чтобы клиенты чувствовали себя безопаснее на вашем сайте. Ваш сайт электронной коммерции в идеале должен иметь сертификат безопасности SSL. Если это не так, купите один. Это то, что дает вам маленький желтый замок на панели инструментов. На своем мобильном сайте убедитесь, что вы показываете замок SSL как можно заметнее.

image18

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

12. Укладка контента

Для многих людей создание мобильного сайта просто означает выбор «отзывчивой» темы на WordPress, Shopify или любой другой платформе, которую вы используете. Хотя это хорошее начало, вы должны обратить пристальное внимание на то, как тема автоматически перетасовывает ваш контент. Не уверен, что я имею в виду? Посмотрите на эту схему ниже:

15_contentStacking

Вот как адаптивная тема может автоматически складывать содержимое для планшета (левое изображение) или смартфона (правое изображение). Тщательно продумайте, какие у вас наиболее важные части контента, и убедитесь, что они правильно сложены. Например, с правой стороны продукты (поле 5 – типы ванн) принудительно спускаются вниз по экрану. Их даже можно толкнуть ниже «сгиба».

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

13. Потерять любой Flash-контент

Flash – относительно устаревший формат на любом устройстве. (Фактически, дизайнеры борются, чтобы убить его раз и навсегда! Он поглощает ресурсы, он медленный, и это площадка для хакеров). Хотя это плохие новости на настольном сайте, еще хуже на смартфоне или планшете.

Большинство мобильных устройств вообще не воспроизводят флэш-медиа. Так что, если вы полагаетесь на это для демонстрации видео или продукта, избавьтесь от него – ваши клиенты не смогут увидеть его на мобильном телефоне. Apple заблокировала это несколько лет назад, а Android последовал их примеру вскоре после.

В качестве альтернативы убедитесь, что ваш сайт совместим с HTML5 (узнайте больше здесь) и используйте YouTube для размещения любых видео..

14. Примите ограничения!

Многие люди, с которыми я говорил, выразили разочарование по поводу ограничений мобильного сайта. Простой факт заключается в следующем: с этим ничего не поделаешь! Вместо этого, принять эти ограничения.

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

Я твердо верю, что ответ на эти вопросы делает ваш бизнес сильнее. Каждый раз, когда вы можете отогнать свое предложение, вы делаете его более мощным. И это важно для хорошего мобильного сайта.

15. Принимайте дизайнерские решения с помощью Google Analytics

Проблема с дизайном для мобильных устройств заключается в том, что нужно учитывать множество устройств. Оптимизируете ли вы свой макет и дизайн для планшетов iPad или Android? Вы оптимизируете для iPhone 5 или iPhone 6? Или Samsung Galaxy?

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

мобильные-устройства-аналитика отслеживания

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

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

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

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

Kim Martin Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map