9 распространённых ошибок в области мобильного UX в 2025 году

• По сравнению с 2024 годом в 2025 году значительно улучшились показатели мобильного UX в сфере электронной коммерции.
• Тем не менее большинство сайтов по-прежнему считаются «посредственными», граничащими с «плохими».
• Чтобы улучшить UX вашего сайта для мобильных устройств, избегайте 9 распространённых ошибок, описанных в этой статье.

Ключевые статистические данные

• Более 52 000 UX-элементов на более чем 150 ведущих сайтах электронной коммерции
• Более 40 000 лучших и худших примеров из практики
• Более 400 рекомендаций по UX для мобильных сайтов

Критерии оценки мобильного UX для электронной коммерции от на 2025 год, основанные на подробных результатах исследований Baymard, включают более 52 000 элементов мобильного сайта, которые были вручную проверены и оценены командой UX-исследователей.

Классифицировали более 40 000 новых примеров лучших и худших практик мобильного UX на ведущих сайтах электронной коммерции (с проверкой эффективности).

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

В следующих строках представлена сводная информация об эффективности UX по 46 темам, которые составляют общую картину эффективности мобильной электронной коммерции.

Современное состояние мобильного UX в 2025 году

Большинство сайтов оказались в тесной группе, где 81% получили «посредственные» или более низкие оценки за производительность.

Кроме того, как и в случае с бенчмарком 2024 года, ни один сайт не показал ни «хороших», ни «идеальных» результатов.

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

Далее предоставлено более подробное описание эффективности UX в мобильной электронной коммерции и конкурентной среды, а также рассказано о «пропущенных возможностях», на которые следует обратить особое внимание.

В частности, обсуждаются 9 основных ошибок в мобильном UX, о которых следует помнить при работе с 7 из 46 тем в 5 различных областях мобильного UX:

1. Мобильная главная страница и навигация по категориям: таксономия категорий
2. Мобильная главная страница и навигация по категориям: основная навигация
3. Мобильный поиск на сайте: типы поисковых запросов
4. Мобильный поиск на сайте: автозаполнение
5. Списки товаров и фильтрация: миниатюры товаров в списке
6. Страница товара: изображения страницы товара
7. Дизайн и взаимодействие на мобильных сайтах: сенсорные интерфейсы

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

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

Мобильная главная страница и навигация по категориям: таксономия категорий

Таксономия категорий лежит в основе любого сайта электронной коммерции.

Сайт может соответствовать всем требованиям, описанным в остальных темах исследования «Главная страница и навигация по категориям», но если таксономия категорий не настроена, у пользователей возникнут проблемы с поиском товаров на сайте.

Если говорить о таксономии мобильных категорий, то средний сайт показал «низкие» результаты: 50 % показали «низкие» результаты или хуже, и только 28 % показали «хорошие» результаты или лучше.

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

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

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

1) 75 % мобильных сайтов неправильно реализуют типы товаров с общими атрибутами в виде отдельных категорий

Дело в том, что разные типы холодильников в Lowe’s представлены в виде отдельных категорий (первое изображение). Пользователям, которые не могут выбрать между, скажем, «холодильниками с французской дверью» и «холодильниками Side-by-Side», будет сложно сравнить и оценить их характеристики, поскольку они не могут увидеть их вместе в одном списке (второе изображение).

Во время тестирования несколько сайтов столкнулись с чрезмерным разделением товаров на категории.

Это может быть вредным, поскольку неоправданно ограничивает возможности пользователей комбинировать различные критерии, чтобы получить именно тот список товаров, который им нужен.

Чрезмерная категоризация также мешает пользователям получить общее представление обо всех продуктах определённого типа.

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

В приложении Wayfair формы столов правильно реализованы в виде фильтров, а не подкатегорий. Это позволяет пользователям просматривать «Все столы» и легко комбинировать формы столов с помощью этих фильтров.

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

Это даёт пользователям больше возможностей для управлениясписками товаров и позволяет лучше ориентироваться в категориях и подкатегориях.

Например, пользователи, которые ищут джинсы, могут сначала выбрать «Узкие джинсы», но затем заметить в списке «Джинсы-скинни» — вариант, который они могли пропустить, если бы стили джинсов были представлены в виде категорий.

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

Например, у «диванов» есть такие атрибуты, как «количество мест», «модульность», «встроенный шезлонг» и т. д., а у «кресел» — «откидное» и «поворотное» — что оправдывает их выделение в отдельные категории.

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

Несмотря на негативное влияние этой проблемы на видимость в поиске, 75% сайтов по-прежнему неправильно используют подтипы товаров с общими атрибутами в качестве фильтров (по сравнению с 88% в 2023 году и 91% в 2024 году).

Мобильная главная страница и навигация по категориям: основная навигация

Главная мобильная навигация — самая слабая часть темы «Главная страница и навигация по категориям» для мобильных устройств. 69 % протестированных сайтов показали результат «посредственный» или хуже, и только 31 % — «хороший» или выше.

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

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

2) На 95 % мобильных сайтов текущий раздел не выделен в основной навигации

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

На мобильных устройствах обычно нет постоянно видимой основной навигации.

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

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

В American Eagle пользователи быстро понимают, какое место занимает страница товара в иерархии (первое изображение), потому что текущий раздел «Топы» чётко выделен в основной навигации (второе изображение). Это позволяет пользователям легко расширять область поиска и изучать похожие товары.

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

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

Однако как для мобильных, так и для десктопных версий основная навигация должна представлять первый уровень категорий товаров; выделение общих названий, таких как «Магазин» или «Товары», не поможет пользователям определить их фактическое местоположение в иерархии сайта.

3) На 42 % мобильных сайтов нет опции «Просмотреть все» на каждом уровне каталога товаров

«Давайте посмотрим…О боже, я и забыл, каким утомительным может быть поиск дивана. Вариантов так много. Это может обескуражить. ‘Диваны-кровати’ определённо [подходят], как и ‘Футоны и раскладные диваны’, но, похоже, мне придётся выбирать что-то одно.” Когда пользователи не могут одновременно просматривать товары из всех соответствующих подкатегорий, как в случае с участником тестирования в Raymour & Flanigan, оценка и сравнение товаров могут стать неоправданно сложными.

Пользователи, заинтересованные в красках для внутренних работ в Backdrop, могут просматривать отдельные подкатегории, такие как »Стандартная отделка» и »Полуглянцевая отделка», но у них нет доступа к просмотру всех типов красок, подходящих для внутренних работ. При нажатии на пункт меню «Интерьер» просто открываются подкатегории ниже. Это усложняет сравнение и оценку товаров.

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

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

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

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

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

«Ого, здесь так много разных браслетов! Я просто нажму на «Все браслеты»». Участница Pandora, которая покупала браслет для подруги, но не знала, какой именно браслет ей выбрать, была рада, что в меню есть опция «Просмотреть все».

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

Например, на сайте с категорией «Женщины» и подкатегориями «Одежда» и «Пальто» на каждом уровне будет кнопка «Посмотреть все» опция, например «Посмотреть все женские товары», «Посмотреть все женские товары одежды», «Посмотреть все пальто» и т. д.

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

Мобильный поиск на сайте: типы поисковых запросов

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

Несмотря на то, что 56% сайтов работают «достаточно хорошо» или лучше, у большинства из них возникают проблемы с поддержкой различных поисковых запросов, например, они не принимают или не распознают символы или сокращения.

Ниже приведена 1 связанная с этим проблема, которую можно значительно улучшить

4) 58 % мобильных сайтов не поддерживают должным образом поиск по аббревиатурам и символам

Поскольку сайт Hayneedle не распознаёт сокращение «3pc» как эквивалент «3-piece», пользователи, которые ищут с помощью этого сокращения (первое изображение, iOS), могут ошибочно полагать, что результатов всего 9. На самом деле при полном поисковом запросе «3-piece sofa» было найдено 187 товаров (второе изображение, iOS).

При поиске пользователи полагаются на широкий спектр лингвистических сокращений.

Тестирование показало, что пользователи часто используют сокращения и символы в своих запросах, например «чехол для ноутбука 13 дюймов» или «спальный мешок -5 градусов».

Среди них аббревиатуры проще всего поддерживать с технической точки зрения, поскольку для них в первую очередь требуется сопоставление эквивалентных терминов; например, «мм» соответствует «миллиметрам», а «HP» — «Hewlett-Packard».

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

Например, дефис (“-”) может обозначать знак минуса (например, «спальный мешок для -10 градусов») или диапазон (например, «свитера от 50 до 100 долларов»).

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

Кроме того, пользователи часто копируют и вставляют названия товаров из различных источников во время поиска и сравнения товаров, которые часто содержат символы (например, «Мужские зауженные джинсы Levi’s® 511™»).

Когда сокращения, символы и их полные версии сопоставляются для получения одинаковых результатов, пользователи вряд ли пропустят товары, представленные на сайте. Etsy иллюстрирует эту логику поиска, возвращая релевантные и похожие товары по запросам «чехол для ноутбука 13 дюймов», «чехол для ноутбука 13 дюймов» и «чехол для ноутбука 13 дюймов»

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

Тем не менее 58% сайтов не поддерживают даже самый базовый поиск по аббревиатурам или символам для единиц измерения, которые часто используются на сайте (например, «холодильник на 13 кубических футов» вместо «холодильник на 13 кубических футов» «3 унции» вместо «3 унции» «200 ГБ» вместо «200 гигабайт»).

Мобильный поиск на сайте: автозаполнение

Автозаполнение предложений по запросу реализовано на большинстве сайтов электронной коммерции и должно считаться «веб-стандартом» для полей поиска в электронной коммерции.

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

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

Кроме того, даже при использовании автозаполнения есть один ключевой аспект, который всё ещё нуждается в значительном улучшении:

5) 77 % мобильных сайтов не включают область категорий в предложения автозаполнения

Поиск по запросу «Оборудование» в Ace Hardware) выдает результаты по широкому спектру товаров, таких как шкафы и фурнитура для дверей сарая. Однако у пользователей нет возможности сузить результаты поиска до одной из этих категорий, не переходя в отдельный интерфейс фильтрации. Таким образом, они могут даже не знать, что доступны опции для конкретных категорий.

При поиске «куртки» в L.L.Bean (iOS) были найдены результаты в различных категориях, таких как «Мужская одежда», «Женская одежда» и «Детская одежда». Однако из-за отсутствия быстрого и заметного способа сортировки по категориям пользователи могут не заметить возможность ограничить результаты поиска и продолжить просмотр слишком широкого ассортимента товаров.

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

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

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

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

Lowe’s (iOS) предлагает варианты поиска, которые визуально отличаются друг от друга и соответствуют реальным категориям товаров, что помогает пользователям сузить область поиска.

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

Идеальное время для того, чтобы предложить пользователям выбрать область поиска, — пока они печатают, так как многие не осознают, что их запрос охватывает разные части сайта.

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

«Итак, я ввёл это, и мне предложили несколько вариантов: встраиваемая или настольная посудомоечная машина. Я просто выбрал «Встраиваемая».» Предложения по категориям в приложении Home Depot помогли участнику тестирования сузить область поиска перед отправкой запроса. Обратите внимание, что предложения по категориям выделены отступами и курсивом.

Кроме того, предложения по области поиска должны визуально отличаться от стандартных предложений по запросу. Часто это достигается за счёт отступа в предложении и добавления префикса, например «in» (например, «[запрос] в разделе «Мебель»).

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

Списки товаров и фильтрация: миниатюры товаров в списке

Если говорить об уменьшенных изображениях элементов списка на мобильных устройствах, то средняя эффективность UX составляет «посредственную», при этом 51 % сайтов находятся на «посредственном» уровне или ниже, а 21 % — на очень «низком» уровне.

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

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

6) На 70 % мобильных сайтов в списках товаров и результатах поиска отсутствуют 3 или более миниатюрных изображений товаров

«О, какая красивая! Здесь много цветов. Я провожу пальцем вправо, чтобы посмотреть, появятся ли другие картинки, но их нет! Мне нравится, когда… не нужно нажимать на картинку, чтобы увидеть другие». В Pottery Barn покупатель, заинтересовавшийся диваном, был удивлён тем, что ему не предложили дополнительные миниатюры (первое изображение), и был вынужден перейти на страницу товара, чтобы посмотреть больше изображений (второе изображение): «Но здесь их много».

«Джинсы скинни с высокой посадкой из ультраэластичного материала, мне нравится, как это звучит!» Участница UNIQLO остановилась на странице с описанием пары джинсов, которые привлекли её внимание, но, не увидев дополнительных изображений, чтобы изучить товар подробнее, продолжила просмотр, так и не вернувшись к этому товару.

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

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

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

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

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

В Kate Spade пользователи могли провести пальцем по миниатюре по умолчанию в описании товара, чтобы просмотреть 5 дополнительных изображений сумок.

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


В Williams Sonoma пользователи могли пролистать 5 дополнительных миниатюр, на которых эта эспрессо-машина была изображена с разных ракурсов, в том числе с ракурса «Размеры», показанного здесь.

Таким образом, чтобы максимально увеличить объём визуальной информации в списках товаров и результатах поиска, пользователям должен быть предоставлен доступ к как минимум 2 дополнительным миниатюрам — одного дополнительного изображения часто бывает недостаточно, а 3 и более изображений дают пользователям ещё более широкий визуальный контекст.

Для одежды и аксессуаров, где важны как эстетика, так и детали, может потребоваться 5–15 миниатюр для полноценной визуальной оценки.

Страница продукта: Изображения продукта

Учитывая, насколько важен макет страницы мобильного приложения, удивительно, что 49% сайтов работают на «посредственном» уровне или хуже, а 63% из них оцениваются как «плохие» или хуже.

Несмотря на то, что более половины сайтов получили оценку «хорошо» или выше, у среднестатистического сайта всё равно было множество проблем, из-за которых страницы с товарами выглядели перегруженными или было сложно найти нужную информацию

Ниже приведена одна из областей, в которой производительность можно значительно повысить

7) На 63% мобильных сайтов изображения из социальных сетей не добавляются на страницу товара

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


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

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

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

И IKEA (первое изображение), и Williams Sonoma (второе изображение) отбирают фотографии у пользователей, которые загружают их в аккаунты брендов в Instagram, чтобы помочь пользователям решить, подходят ли им эти товары.

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

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

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

Не рекомендуется публиковать большое количество постов из социальных сетей, размещённых за плату, поскольку обилие постов с «платным продвижением» снижает ощущение достоверности, которое должны передавать изображения.

Дизайн и взаимодействие на мобильных сайтах: сенсорные интерфейсы

Что касается сенсорных интерфейсов, то средний сайт показал «низкие» результаты: 76% сайтов получили «посредственные» или более низкие оценки, а 48% сайтов показали «очень низкие» результаты.

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

Тем не менее ниже приведены две реализации, которые сайты по-прежнему часто допускают ошибки при работе с сенсорными интерфейсами.

8) 63% мобильных сайтов не используют правильную раскладку клавиатуры для соответствующих полей

В B&H пользователям, вводящим свой адрес электронной почты, предлагается стандартная мобильная клавиатура (первое изображение). В результате им приходится постоянно переключаться между раскладками для ввода букв и символов, чтобы получить доступ к основным символам адреса, таким как «@» и «.» (второе изображение), что делает процесс неоправданно сложным.

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

Например, цифровая клавиатура для кредитных карт, раскладка для телефонных номеров или раскладка для адресов электронной почты.

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

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

Существует несколько способов активации цифровой раскладки клавиатуры, и хотя они немного отличаются на разных платформах (iOS, Android и т. д.), наиболее распространённые методы связаны с атрибутами type и pattern в HTML.

Например, для числовых полей используйте:
<input type="text" inputmode="decimal" pattern="[0-9]*" novalidate autocorrect="off" />

9) На 87 % мобильных сайтов не отключается автокоррекция мобильной клавиатуры, когда это необходимо

Во время мобильного тестирования в Walmart эта участница начала вводить первые буквы своей фамилии «Ри», но функция автозамены на её устройстве изменила их на «То», из-за чего ей пришлось удалить «исправление» и начать заново.

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

Если функция автокоррекции включена, она должна автоматически исправлять слова с ошибками по мере их ввода или отправки (например, исправлять «camra» на «camera»).

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

Функция автозамены на клавиатуре вызывала серьёзные проблемы с удобством использования на протяжении многих лет тестирования удобства использования мобильных устройств. В результате пользователи отправляли много ошибочных данных, пытаясь вручную отключить «полезную» автозамену.​‌‌‍‌‌‌‍‌‌‌‍‌‌‌‍‌‌‌‌‌‌‌‎

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

Поэтому автокоррекцию не следует отключать во всех полях

В B&H Photo (первое изображение) и Urban Outfitters (второе изображение) пользователи, вводившие данные в поле «адрес электронной почты», не сталкивались с некорректной автокоррекцией, поскольку эта функция была отключена вручную.

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

Автокоррекцию клавиатуры можно отключить, добавив атрибут autocorrect к тегу input и установив для него значение «off», например так:
<input type="text" autocorrect="off" />

Следование 9 рекомендациям по UX для мобильной электронной коммерции, описанным в этой статье, — первый шаг к улучшению пользовательского опыта на мобильных устройствах:

1. Используйте типы товаров с общими характеристиками в качестве отдельных фильтров (75 % не делают этого)
2. Выделите текущую область в основной навигации (95 % пользователей этого не делают)
3. Добавьте опцию «Просмотреть все» на каждом уровне каталога товаров (42% этого не делают)
4. Адекватно поддерживают поиск по аббревиатурам и символам (58 % не поддерживают)
5. Включайте область действия категории в предложения автозаполнения (77 % пользователей этого не делают)
6. Добавьте 3 или более миниатюр товаров в списки товаров и результаты поиска (70 % этого не делают)
7. Добавьте изображения из социальных сетей на страницу товара (63% этого не делают)
8. Используйте правильную раскладку клавиатуры для соответствующих полей (63 % пользователей этого не делают)
9. Отключайте автокоррекцию на мобильной клавиатуре, когда это уместно (в 87 % случаев этого не делают)

Обратите внимание, что это анализ средней производительности более чем 150 ведущих американских и европейских сайтов электронной коммерции.

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