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