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

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

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

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


30,7%
посещают
Web сайты
С мобильных
устройств

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

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


Плагины к CMS
•
•
•
•
•
•
•
•
•

Mobify

1C-Битрикс
UMI CMS
Netcat
Amiro
WordPress
Drupal
Joomla
Magento

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


DIY

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


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

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

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

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

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

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

Сайт должен загружаться быстро
Используйте геолокационные
возможности
Мобильный сайт и большой палец –
лучшие друзья!

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

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


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


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

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


31%

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

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


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


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


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


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


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


Область клика
Apple: 44pts = 6.875x6.875мм
Microsoft: 9x9мм,
7x7мм - минимум
Nokia: 7x7мм для указательного
пальца, 8x8мм для большого


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


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


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


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


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


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


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


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


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


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


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

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


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


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


Ввод данных


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


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

Не спрашивайте тип
кредитной карты
Если карта начинается с
4 – это Visa
51-55 – это MasterCard
34 или 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 787-63-37
info@mobikit.ru
http://mobikit.ru

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

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

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

More from Yandex

More from Yandex (20)

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