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

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

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

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

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

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

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

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

устройств

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

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

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

• UMI CMS

• Netcat

• Amiro

• WordPress

• Drupal

• Joomla

• Magento

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

MoAction

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

страницы

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

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

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

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

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

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

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

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

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

Apple: 44pts = 6.875x6.875мм

Microsoft: 9x9мм,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ввод данных

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

+7 495 787-63-37info@mobikit.ruhttp://mobikit.ru

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

Documents

5 типичных ошибок продвижения B2B-компаний в социальных сетях

КТО Я Радионов А.В. КГУ

Анализ исполнения регламентов и типичных ошибок в АИС «Образование кемеровской области»

Методические рекомендацииmezpk.ru/files/uploads/files/metodicheskie_rekomendacii_po_pravila… · Приложение 3. Памятка о типичных

практика итог ?'6^уоирбит.рф/docs/2020_06_29...Радионов Максим Артемович Фомина Ольга Сергеевна Чащин Данил

ПОЧВЕННЫЕ МИКРОМИЦЕТЫ ТИПИЧНЫХ …...3.2.1. Сектор Нам Кат Тьен (Национальный парк Донг Най)..... 3.2.2. Лесной

7 типичных ошибок рекламы во ВКонтакте

10 типичных причин неудачной разработки интернет-проектов

как опередить конкурентов (UIDG 4 Site2009)

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

Управление качеством в Agile. Как опередить баги

Anton Stoliar SQADays2012 Управление качеством в Agile. Как опередить баги

Методические рекомендацииdist.iv-edu.ru/files/pdd/metodicheskie-rekomendacii...Приложение 3. Памятка о типичных ошибках при

Команда и Заказчик: 5 типичных ошибок при переносе сроков проекта

Разработка сценария электронного курса. Разбор типичных ошибок

Химия элементов и иХ соединений · 1. ХИМИЯ s-ЭЛЕМЕНТОВ От лития и натрия (типичных элементов), калия,

10 типичных причин неудачной разработки интернет проектов

радионов Mmconf 2012_маленькие сайты - большие возможности

20+ типичных ошибок при проектировании процесса чекаута

Управление тестированием. Анализ типичных проблем