Способы улучшить UX вашего мобильного сайта электронной коммерции

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

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

Мы рекомендуем рассмотреть эти рекомендации, но также подумать о том, как ваш конкретный веб-сайт соответствует этим рекомендациям или отличается от них. Вы можете сразу же применить эти методы на своем мобильном сайте, хотя мы рекомендуем сначала их протестировать. Они не могут применяться во всех случаях. Давайте рассмотрим первую часть «Как улучшить UX мобильного сайта вашего магазина электронной коммерции?»

1. Попробуйте сначала разработать свой мобильный сайт (т. Е. Перед тем, как создавать сайт для настольных компьютеров)

Все мы знаем, как важны мобильные устройства для наших продаж. Более 50% продаж приходится на мобильные устройства. Создать сайт для мобильных устройств - нелегко и весело. Это самый разумный способ начать разработку своего сайта. Знаем почему:

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

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

2. Автоматически перенаправляйте мобильный сайт, и страницы должны быть оптимизированы для мобильных устройств.

Число мобильных пользователей продолжает расти, увеличивая количество покупателей с мобильных устройств. Люди часто делают покупки со своих мобильных телефонов и ожидают, что это будет легко. Если вы не успеваете, вы отстаете.

Чтобы не отставать, сайт электронной коммерции должен быть оптимизирован для всех устройств. Оптимизированный мобильный сайт, т. Е. Полностью адаптивный мобильный сайт, повышает удобство работы с мобильными устройствами.

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

У адаптивного сайта один и тот же URL-адрес соответствует всем платформам. Это просто означает, что для мобильных устройств не будет отдельных URL-адресов, и пользователям не придется ждать, чтобы перенаправить на эти URL-адреса. Меньше время загрузки = лучший мобильный опыт . Кроме того, все SEO идет на один URL.

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

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

3. Единый дизайн на разных платформах для более плавного взаимодействия с пользователем.

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

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

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

Вы можете избежать этой проблемы. Вот несколько рекомендаций:

А. Визуальная идентичность

Попробуйте использовать те же цвета, внешний вид, стили шрифтов, визуальные элементы и т. Д.

Б. Последовательная иконография

значки приложений и веб-сайтов должны представлять одну и ту же функциональность.

C. Формулировка

Названия кнопок, ссылок и пунктов меню должны совпадать как на мобильных, так и на обычных веб-сайтах.

D. Взаимодействие и поток

Процесс навигации для каждой функции должен быть одинаковым (например, поиск продукта или способ оплаты).

Д. Координация между дизайнерами, разработчиками и тестировщиками

У всех в команде должно быть одинаковое понимание каждой развернутой функции.

Применение этих основных концепций позволит пользователям без труда пользоваться как веб-сервисами, так и мобильными сервисами.

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

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

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

• Сколько пользователей, посетивших сайт, были из сообщества Android или iOS?
• Какая часть посетителей пользуется устройствами с экраном с низким разрешением?
• Есть ли разница в количестве посещений страниц пользователями последней версии Android и 2-летней версии?
• Сколько времени мобильные пользователи iOS проводят в магазине по сравнению с пользователями Android?
• Какой тип подключения использовался? Wi-Fi или мобильные данные?

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

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

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

5. Протестируйте мобильные версии своего сайта.

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

A. Оптимизация мобильных устройств в Google

Это простой инструмент. Вам необходимо ввести URL своего сайта, и Google сгенерирует «удобный» обзор. Обзор может быть таким:
«Этой страницей легко пользоваться на мобильном устройстве».
ИЛИ
«Страница не оптимизирована для мобильных устройств - эту страницу может быть сложно использовать на мобильном устройстве. Исправьте следующие проблемы:

• Текст слишком мелкий для чтения
• Область просмотра не установлена
• Интерактивные элементы расположены слишком близко друг к другу
• Использует несовместимые плагины ».

Б. Mobiletest. меня

В мобильном test.me вам нужно ввести URL-адрес веб-сайта, который вы хотите проверить, и выбрать устройство и операционную систему. Оттуда вы можете получить полное представление о веб-сайте на любом мобильном устройстве. Путем тестирования можно исправить ошибки перед запуском.

6. Создавайте гибкие и плавные макеты дизайна.

На сегодняшнем рынке существует множество мобильных разрешений и размеров экрана, что увеличивает усилия дизайнеров. Плотность многих устройств также различается. Вот стандартные способы описания плотности: от экрана с низкой плотностью (360 пикселей) до экрана с высокой плотностью (4K):

• Низкая плотность (ldpi)
• Средняя плотность (mdpi)
• Высокая плотность (hdpi)
• xhdpi (сверхвысокая плотность)
• xxhdpi (сверхвысокая плотность)
• xxxhdpi (сверхвысокая плотность)

Вот несколько простых терминов, связанных с плотностью

А. Резолюция

Количество пикселей на экране

Б. Независимый от плотности пиксель (DP)

Единица виртуального пикселя определяет макет пользовательского интерфейса. DP выражает размеры макета или положение независимо от плотности. DP равен 1 физическому пикселю на экране с разрешением 160 точек на дюйм.

C. Размер экрана

Размер экрана измеряется как длина диагонали экрана.

D. Плотность экрана

Количество пикселей в физической области экрана, обычно представленное в точках на дюйм.

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

7. Если вы не используете адаптивный дизайн, создайте отдельные URL-адреса для обеспечения согласованности.

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

Невосприимчивый дизайн может вызвать множество проблем, таких как неправильный размер шрифта, неработающие кнопки и т. Д. Не все, как мы, могут создавать очень отзывчивые дизайны. Но у разработчиков и дизайнеров есть альтернатива управлению адаптивным веб-дизайном. Они могут генерировать URL-адреса, которые автоматически распознают (с помощью тегов HTML) тип устройства. После обнаружения устройства контент может отображаться оптимально:

Несколько примеров сгенерированных URL-адресов:

• www.website.com (доступ к компьютеру)
• m.website.com (мобильный доступ)
• www.website.com (облегченная версия с базовым HTML) (доступ по телефону)

8. Используйте «метатег области просмотра», чтобы подогнать страницы под экраны мобильных устройств.

Согласно Google, «область просмотра может управлять способом отображения домашней страницы на мобильных устройствах». Другими словами, если дизайнеры не принимают во внимание область просмотра, пользовательский интерфейс на мобильном устройстве будет выглядеть так же, как на сайте для настольных компьютеров. В этом сценарии система адаптирует экран для мобильного использования, но обычно это не работает. В некоторых случаях изображения будут искажаться и создавать неудобства для пользователей. После применения области просмотра дизайнеры могут управлять режимом отображения и улучшать UX.

Как принять во внимание область просмотра?

Вы можете использовать тег CSS под названием «метатег области просмотра», который включен в спецификацию CSS Device Adaptation.
Этот тег имеет следующий синтаксис: <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. Приступая к разработке мобильного дизайна, определите «ядро» веб-сайта.

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

Но как определить, какие другие функции нужно включить? Подумайте о сути вашего веб-сайта. Каковы основные принципы веб-сайта? Каковы основные особенности веб-сайта? Какие функции второстепенные, но улучшают UX (например, поиск, фильтры и т. Д.)?

Давайте рассмотрим пример применения базовой концепции к сайту электронной коммерции по доставке еды. Основными столпами этого сайта будут:

• Войти и зарегистрироваться
• Поиск продуктов
• Список продуктов
• Добавить в корзину
• Проверить

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

10. Используйте простые формы и поля ввода

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

Как оптимизировать форму для мобильных устройств?

• Включите только основные поля, обязательные для ввода пользователями. Если имеется слишком много обязательных полей, пользователь с большей вероятностью откажется от процесса регистрации.
• Не разбивайте поля на слишком много полей. Например, имя / фамилия можно рассматривать как простое имя.
• Убедитесь, что цифровая клавиатура автоматически активирована для числовых полей, таких как Контактный номер. , почтовый индекс и т. д.
• Сообщения об ошибках должны быть краткими.
• Попробуйте включить автоматизацию в поля. Например, при запросе адреса пользователя используйте функцию GPS и предварительно заполните поля, такие как PIN-код, штат, город и т. Д.

Применение этих базовых концепций улучшит UX вашего мобильного сайта. Эти приложения ограничат вероятность того, что пользователи покинут форму или ваш сайт.

Заключение

На первом этапе этой серии мы рассмотрели 10 рекомендаций по улучшению UX мобильного сайта вашего магазина электронной коммерции. В Emizentech, лучшей компании по разработке электронной коммерции в Индии, мы обладаем опытом в разработке быстро реагирующих на запросы магазинов электронной коммерции. Сообщите нам свои требования.