Роман Радионов - Мобильная версия интернет-магазина: как избежать типичных ошибок и опередить конкурентов

Мобильная версия интернет-магазина

Как избежать типичных ошибок и опередить конкурентов

16 ноября 2013 года

Радионов РоманМобильная кухня


Немного статистики


30,7%посещают

Web сайты С мобильных

устройств

В 2013 году мобильная версия должна быть!


Как мобилизироваться?


Плагины к CMS Mobify• 1C-Битрикс

• UMI CMS

• Netcat

• Amiro

• WordPress

• Drupal

• Joomla

• Magento

•

Специализированные CMS

MoAction

DIY


Технические рекомендации


Изучите своего мобильного пользователя

Фокусируйтесь на целевых действиях

Упрощайте навигацию

Сайт должен загружаться быстро

Используйте геолокационные возможности

Мобильный сайт и большой палец –лучшие друзья!

Сохраняйте целостность с web сайтом

Все важное должно быть видно без прокрутки

Используйте редирект на мобильную версию

Учитывайте разнообразие мобильных устройств

Собирайте статистику, анализируйте, экспериментируйте

Интегрируйтесь в социальные сети


Что должно быть на мобильной версии


Продуктовый каталог должен бытьэквивалентен основной версии

Ожидают увидеть полный каталог

Только популярные товары

Специальный каталог (для mobile)

25%

44%

31%


Все ссылки на мобильной версии должны вести на мобильные

страницы


Один сайт – один товарный каталог

• Это куртки из всех магазинов или только выбранного?

• Когда я искал куртку или просматривал категории, они относились ко всем маркам или только к выбранной?

• Это один мультибрендовый сайт или несколько разных сайтов?


Кликабельность и читабельность


Давайте кнопкам корректные и осмысленные названияЗабудьте о «далее» и «продолжить»


Оставляйте достаточно расстояния между кликабельными элементами


Иконки должны быть кликабельны


Область клика

Apple: 44pts = 6.875x6.875мм

Microsoft: 9x9мм,

7x7мм - минимум

Nokia: 7x7мм для указательного

пальца, 8x8мм для большого


Избегайте создания нескольких кликабельныхобластей в одном визуальном элементе


Размер шрифта


На основании выбора пользователя скрывайте все неактуальные элементы


Устанавливайте значения по умолчанию на основе предыдущего пользовательского выбора



Направляйте пользователя


Позаботьтесь о возможности корректно вернуться на предыдущую страницу


Главная кнопка должна быть уникальной


Всегда делайте ссылку на полную версию сайта


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


Вынесите ссылки на страницы доставки и возврата в футер или контент каждой продуктовой страницы


Встраивайте продвижение приложения осторожно:

• Объясняйте чем отличается

• Если пользователь отказался – больше не показывайте


Предлагайте тематический поиск или мастер поиска


Внимательно относитесь к реализации карусели


Ввод данных


Скрывайте поля форм в зависимости от предыдущеговыбора пользователя

Заполняйте поля автоматически


Не спрашивайте тип кредитной карты

Если карта начинается с

4 – это Visa51-55 – это MasterCard34 или 37 - Amex


Не заставляйте указывать имя и фамилию отдельно


Размещайте названия полей форм сверху, а не слева


Интерфейс для ввода дат должен содержать информацию о дне недели.

Ввод даты вручную?!



Валидация E-mail

Или запретите автоматическую вставку

Или не используйте вообще


Используйте GPS для получения адресаИспользуйте автодополнение вместо длинных выпадающих списков


Всегда поясняйте, чего вы хотите от пользователя

• Аббревиатуры• Отраслевые термины• Сокращения


Не используйте названия полей в полях


Всегда указывайте ожидаемый формат ввода, или форматируйте автоматически


Старайтесь не разделять поля ввода без необходимости


Отключайте автокоррекцию там, где она может ошибаться

<input type="text" autocorrect="off" />


Показывайте удобную раскладку клавиатуры

<input type="tel" />

<input type="text" pattern="\d*" />

<input type="email" />


Отключайте auto-capitalization там, где это необходимо

<input type="text" autocapitalize="off" />

<input type="email" autocapitalize="off" />


Проверяйте корректность заполнения форм на front-end


Производительность


• Минификация JS и CSS• Объединение JS и CSS• GZIP сжатие• Кэширование• «Самый быстрый HTTP запрос – тот, который не был

сделан»• Загрузка JS без блокировки страницы• Ускоряйте страницы после загрузки:• задавайте width и height• Используйте, где это возможно, CSS анимацию и

преобразования, вместо JS


Если что-то работает медленно, всегда показывайте индикатор загрузки


Технические ошибки


Если что-то пошло не так, не заставляйте пользователявводить информацию повторно.Например, используйте LocalStorage для временного хранения пользовательских данных.


Избегайте неинформативных страниц об ошибке


Старайтесь не использовать текст на картинках


Автопрокрутка

Спасибо за внимание!

+7 495 [email protected]://mobikit.ru

Documents

Роман Радионов - Мобильная версия интернет-магазина: как избежать типичных ошибок и опередить конкурентов