30 вкусных фич ВкусВилла
Как компания делает опыт пользователей приложения удобнее, а покупки – увлекательнее?
Из года в год ВкусВилл остается для меня источником интересных идей и решений: ребята идут своим путем и не боятся экспериментировать. Поэтому в их приложении есть много фич и механик, которые редко или вовсе не встретишь у конкурентов.
Сегодня мы разберем 30 моментов, которые делают опыт клиента удобнее, а покупки – увлекательнее. Как и в предыдущих статьях из цикла, я остановлюсь именно на 30 пунктах, но если вам будет что добавить, добро пожаловать в комменты.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
Сегодня мы разберем 30 моментов, которые делают опыт клиента удобнее, а покупки – увлекательнее. Как и в предыдущих статьях из цикла, я остановлюсь именно на 30 пунктах, но если вам будет что добавить, добро пожаловать в комменты.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
Слайдер с фото и галерея
Х замечаний
Затемнение экрана при зуме фото
При увеличении фото из карточки товара с помощью разведения пальцев (pinch action) затемнение фонового экрана происходит резко и прерывисто.
Затемнение можно реализовать более плавным и привязать к уровню разведения пальцев. Так проявление затемненного экрана будет более консистентным с его выцветанием.
Затемнение можно реализовать более плавным и привязать к уровню разведения пальцев. Так проявление затемненного экрана будет более консистентным с его выцветанием.
Таббар и хедер при зуме
При увеличении фото из карточки таббар и хедер со строкой поиска остаются видимыми, суммарно перекрывая собой почти четверть фото, хотя в данном контексте полезность их близка к нулю.
Исчезновение фото при зуме
По непонятным причинам иногда при зуме фото из карточки товара оно попросту пропадает, причем такой баг далеко не единичный и ловится довольно часто.
Реакция на зажатие фото
Если зажать фото товара в карточке, его становится возможным куда-то перетащить. Но куда – непонятно. Если вы знаете ответ на этот вопрос, напишите в комментах.
Качество иллюстраций AR-функции
Сама возможность примерить товар в комнате – это плюс, так как позволяет лучше управлять ожиданиями клиента. А вот иллюстрацию к функции можно было бы сделать и не пикселящей.
Запуск видео в галерее
Видео о товаре можно посмотреть только в слайдере с фото внутри карточки, но не в галерее. Причина такой неконсистентности не совсем понятна.
Зум двойным тапом в галерее
Увеличение фото в галерее с помощью быстрого двойного тапа в Amazon не реализовано, хотя это привычный паттерн, который часто встречается в наших e-com приложениях.
Выход из состояния зума
Если вы приблизили фото, раздвинув пальцы и уже уточнили все интересующие детали, вам придется отдельно сдвигать пальцы, чтобы вернуться в изначальное состояние 100% зума, хотя это можно было бы сделать автоматически.
Блокировка вертикального скролла в галерее
Далеко не все из нас обладают хорошо развитыми навыками концентрации, и бывает так, что вы можете отвлечься и выйти из приложения, а потом вернуться в него, чтобы продолжить покупки.
Если вы сделаете это, находясь в галерее, блокировка вертикального скролла при переключении между фото отключается, и вы можете стать свидетелем того, что запечатлено на видео.
Если вы сделаете это, находясь в галерее, блокировка вертикального скролла при переключении между фото отключается, и вы можете стать свидетелем того, что запечатлено на видео.
Закрытие галереи через смахивание
Галерею с фото нельзя закрыть через смахивание вниз, хотя это давно прижившийся и удобный паттерн во многих e-com приложениях.
Расположение кнопки закрытия галереи
Чтобы закрыть галерею, нужно нажать на кнопку, расположенную в максимальном удалении от большого пальца правой руки – в левом верхнем углу.
Как минимум эту кнопку можно было бы расположить в верхнем правом углу. Тянуться до неё придется, но не настолько далеко, как в текущей реализации.
Как минимум эту кнопку можно было бы расположить в верхнем правом углу. Тянуться до неё придется, но не настолько далеко, как в текущей реализации.
Рейтинг и отзывы
Х замечаний
Расположение рейтинга товара
Переход к общему списку отзывов при тапе по рейтингу в карточке – привычный паттерн, и многие к этому привыкли. Но у Amazon нужно будет напрячься: рейтинг разместили в самом верху экрана.
Необходимость авторизации
Чтобы ознакомиться с общим списком отзывов, необходимо войти в свой личный кабинет: без авторизации отзывы посмотреть нельзя. Уж чего-чего, а такого я практически нигде не встречал.
Кнопки полезности отзывов
Кнопки, позволяющие клиенту сообщить о том, что отзыв полезен, выполнены в текстовом формате, хотя иконки лайков были бы интуитивно понятны и при этом визуально разгрузили бы интерфейс.
Текст счетчика полезности отзыва
Мы уже давно живем в мире соцсетей, поэтому в случае замены кнопки Helpful на лайк и текст счетчика можно было бы сократить лишь до числа рядом с лайком. Это, опять же, облегчит интерфейс.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
Текст кнопки шеринга
Продолжаем «расчищать» карточки отзывов: если в самой карточке товара кнопка шеринга приводится без текста «share», значит, разработчик считает её интуитивной.
Но возникает резонный вопрос: зачем тогда в карточках отзывов сопровождать ровно такую же иконку ещё и текстом? Незачем. Можно удалить без потери смысла.
Но возникает резонный вопрос: зачем тогда в карточках отзывов сопровождать ровно такую же иконку ещё и текстом? Незачем. Можно удалить без потери смысла.
Скорость шеринга отзыва
При нажатии на кнопку «поделиться отзывом» система, перед тем как показать стандартный экран шеринга, реагирует с заметной задержкой.
Какие вычисления в этот момент происходят, не совсем понятно, но, опираясь на практику наших приложений, верю, что эту задержку все-таки можно устранить.
Какие вычисления в этот момент происходят, не совсем понятно, но, опираясь на практику наших приложений, верю, что эту задержку все-таки можно устранить.
Флаги vs. текст
В карточках отзывов подсвечивается, из каких стран клиенты, которые их оставили. В итоге мы текст практически на всю длину строки.
Слово reviewed можно убрать, как избыточное, а названия стран заменить на флаги. Это сделает карточки отзывов станут менее перегруженными.
Слово reviewed можно убрать, как избыточное, а названия стран заменить на флаги. Это сделает карточки отзывов станут менее перегруженными.
Обводки в rating summary
При тапе по рейтингу в карточке товара и переходе к списку отзывов rating summary выделяется рамкой, которая затем пропадает. Зачем? Непонятно.
Прочие моменты
Х замечаний
Индикатор невозможности доставки
Если доставка по выбранному адресу недоступна, текст, который оповещает клиента об этом, выполнен зеленым цветом, создавая тем самым ощущение, что всё хорошо и расслабляя внимание.
Отсутствие спецпредложений
Если по товару нет никаких спецпредложений, в карточках товаров так и говорится, что их нет. Но зачем в явной форме подсвечивать негативный факт – вопрос.