Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Но если для интернет-магазина, разработанного 3–4 года назад «современные» ошибки вполне простительны потому что перед разработчиками «в те далекие времена» не стояло таких задач, то в магазинах, сделанных за последний год, это уже выглядит странно.
Перечислю 6 основных.
1. Нет адаптивного дизайна
Первое — это, конечно, отсутствие адаптивного дизайна. В некоторых интернет-магазинах бывает 20-30% мобильного трафика, но при этом адаптивной версии нет. В десктопной версии навигация по каталогу товаров реализована не самым удобным для тач-устройств образом. Если у таких магазинов посмотреть в Я.метрике показатели отказов, глубину просмотров и другие важные параметры, они будут заметно меньше, чем на десктопе, что неудивительно. Бывают магазины, в которых хоть и нет адаптивного дизайна, но навигация на тач-устройствах вполне удобная. Но такое редкость.
Под «адаптивностью» подразумевают шаблон, который подстраивается под основные, заранее заданные диапазоны разрешений экрана. Но есть еще «респонсив», который, если в двух словах, объединяет в себе адаптив и «резиновую» верстку. Это более продвинутый вариант адаптивного дизайна. Не путайтесь в терминологии, особенно при составлении ТЗ :-)
2. Не продуманный адаптивный дизайн
Второе — это продолжение предыдущего пункта — не продуманный адаптивный дизайн. Иногда кажется уж лучше бы его совсем не было, чем такой. В десктопной версии — отличный сайт, с неплохо продуманным юзабилити. Но открываем его со смартфона или уменьшаем экран браузера до разрешения смартфона и получаем адаптивную версию, сделанную по остаточному принципу — лишь бы было, или чтобы формально соответствовать новым требованиям Гугла. Видит Гугл что сайт адаптирован под мобильные устройства, тест проходит на отлично и, вроде как, основная задача решена – мобильные устройства поддерживаются и сеошник доволен.
Но если подумать о пользователе, то все не так хорошо. Когда в мобильном отображении сайта не продумана навигация по каталогу, например, каталог товаров в три уровня, а вменяемой навигации по нему в адаптивном дизайне не предусмотрено, пользователь, который зашел к вам в интернет-магазин со смартфона, будет ломать голову как ему перейти в нужный раздел.
Нередко в адаптивном дизайне забывают продумать переход в корзину. Например, если в десктопном отображении интернет-магазина малая корзина плавает и при скролле страницы всегда приклеена к верхней части окна браузера, то в адаптивном отображении перейти в корзину для оформления заказа бывает не так просто. Обычная ситуация в непродуманных адаптивных версиях — накидал покупатель в корзину товаров, а корзину найти не может. Оказывается, для того чтобы ее найти, нужно вернуться в самое начало страницы и там «тапнуть» едва заметную пиктограммку с отображением корзины.
Получается что затруднена часть главных целевых действий, которые должен совершить клиент — выбор товара и оформление заказа. Стоит ли удивляться что конверсия с мобильных устройств ощутимо ниже?
И если в мобильных версиях сайта, принято оставлять возможность перехода на полноценную версию, то в адаптивных дизайнах эта возможность в большинстве случаев почему-то отсутствует. Хочешь — не хочешь — используй наш кривой адаптивный дизайн, мы же не зря для тебя старались. На такие магазинах думаешь, уж лучше бы совсем не было этого дурацкого адаптива.
Интернет-магазин продает не поисковым работам, а обычным людям. И даже если сайт будет хорошо искаться в мобильной поисковой выдаче, то кроме дополнительных посетителей это ничего не даст.
3. Нет поддержки мониторов с высоким разрешением
Другая частая ошибка, которой в сайтах, сделанных за последние 2 года, быть не должно — не поддерживаются мониторы с высоким разрешением (правильнее будет сказать с высоким ppi), например, дисплеи «Ретина». Отсутствие такой поддержки выражается, как «размытость в изображениях» — логотипе, пиктограммках (иконках) если они сделаны картинками. Даже качественные изображения выглядят не так хорошо как могли бы.
4. Фильтр, который говорит «ничего не найдено»
Другая частая недоработка интернет-магазинов — фильтр по товарам, где выбранные параметры не применяются автоматически. Кроме дополнительного клика на кнопке «Применить фильтр», такая реализация фильтра делает возможным получить нулевой результат — когда пользователь видит сообщение «По этим параметрам ничего не найдено». Говорить посетителю магазина, что нет товара, который ему нужен — неправильно. Еще 2-3 года назад такие фильтры были номой, сейчас это уже устаревшая технология. Ее применение можно оправдать разве что очень большим каталогом товаров.
Лучше, когда при каждом выборе нового параметра, фильтр, во-первых, применяется автоматически (без необходимости нажимать отдельную кнопку) и, во-вторых, отключается возможность выбирать те параметры, по которым результат заведомо нулевой. Например, если посетитель, выбирая на сайте кроссовки, последовательно выберет параметры: сначала размер – «41», потом бренд — «Рибок», следом укажет диапазон цен «до 5 т. р.», то перед тем, как он решит указать еще и цвет в параметрах фильтра будут доступны только кроссовки тех цветов, которые соответствуют уже ранее выбранным параметрам (размер, бренд, цена). И если нет синих кроссовок Рибок 41 размера по цене до 5 т. р. то в параметрах фильтра цвет «синий» должен быть не активен. Пример такого фильтра можно посмотреть в магазине М-Видео.
5. Первобытная пагинация
Неудобная, незаметная пагинация — частая ошибка во многих интернет-магазинах.
Удивительно, но этому важному элементу интерфейса дизайнеры уделяют мало внимания. Оттого насколько хорошо продуман этот элемент зависит глубина просмотра списка товаров. Если пагинация реализована по принципу «есть и ладно», «у всех так» или «для поисковика», то вероятность что посетитель интернет-магазина перейдет дальше первой страницы — сильно снижается. Это значит, что посетитель увидит меньше товаров и меньше шансов, что он что-то купит. Сейчас есть много вариантов как реализовать пагинацию, чтобы было удобнее пользователям и количество просмотренных товаров и глубина просмотров увеличивались.
Прекрасный пример современного пагинатора — главная страница Litress.ru или каталог товаров на Апорте. Поскрольте страницу вниз, посмотрите как происходит подгрузка новых товаров, как появляется плавающий пагинатор, как автоматом меняется URL (адрес) страницы по мере подгрузки новых страниц товаров. Такой подход не только увеличит количество просмотренных товаров (если сравнивать с обычной пагинацией) но и поднимет среднее количество просмотренных страниц.
6. «Скукота»
21 век на дворе, никто уже не пользуется кнопочными телефонами. Есть целое поколение взрослых людей, до рождения которых интернет стал массовым явлением (к слову, многие из них заняты в веб-разработке). У всех в руках планшеты, смартфоны, все видят их прекрасные интерфейсы. Непонятно откуда в дизайне современных интернет-магазинов такая «скукота»? На первый взгляд к юзабилити скукота не относится, потому что это дело вкуса. Другое частое возражение: «задачу решает — значит, хорошо работает». Все это верно, но речь совсем не о вращающемся логотипе, «вырвиглазовых» цветах и прочей флеш-анимации, и даже не о скучности дизайна, хотя это и вынесено в заголовок. Речь про неумелое использование эффектов в интерфейсе.
Сейчас есть много возможностей, как за счет небольших, почти незаметных, но полезных «фич» сделать удобнее интерфейс или визуально акцентировать внимание на нужном целевом действии, или дать пользователю ненавязчивую подсказку.
Например, при добавлении товара в корзину, кнопка на секунду меняет цвет на зеленый, а картинка с товаром улетает в корзину, тем самым наглядно показывая, что товар в корзину добавлен, и где эту корзину искать, когда понадобится. Хорошо об этом сказано на Хабре в статье о микровзаимодействиях или в блоге Сибирикса.
Краткий вывод
Конечно, ошибок в юзабилити, которые встречаются во многих магазинах сильно больше чем здесь перечислено. Позже будет отдельная подробная статья (подписывайтесь на рассылку). В этом посте я хотел показать только самые популярные (по моей версии) ошибки/недоработки, которые стали такими в последние несколько лет, а ранее были вполне стандартными, общепринятыми решениями или про них никто не думал (как об мобильных версиях сайтов или адаптивном шаблоне).