10 правил создания мобильной версии интернет-магазина

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

мобайл мобильный
Фото: pixabay.com
1

Диффузный (размытый, расплывчатый) фон

Чтобы сделать элементы сайта и важные изображения – например, объекты продажи – выпуклее, на мобильной платформе ставится размытый фон: что-то вроде вида из окна сквозь ливень.

2

Меньше элементов – лучше

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

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

3

Большие шрифты – лучше

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

4

Бледные цвета выигрывают

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

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

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

5

Юзер-контекст – это все

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

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

6

Единый вход из социальных медиа

Аккаунт соцсети – вполне достаточные для продавца регистрационные данные покупателя. Кто не понимает этого – тот слоупок.

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

7

Умная одежда – мобайл будущего

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

8

И наоборот: отдельные большие мобильные версии для планшетов и фаблетов

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

9

Новый базовый жест – перелистывание вместо касания

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

10

Всплывающие окна ушли в прошлое

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

Перевод с английского. Оригинал: inc.comАвтор: John Lincoln