6 примеров из нашего опыта, как проработать клиентский интерфейс, чтобы пользователи кричали от восторга

Клиентский интерфейс сайта или приложения должен быть интуитивно понятным и удобным для использования. Но это всё бла-бла. Сейчас покажу 6 реальных примеров с комментариями: как простые решения упрощают клиентам жизнь.

Наша специализация – высоконагруженные порталы, интернет-магазины, мобильные приложения и интеграции по API. Мы – это ITFactory, веб-продакшн. Разрабатываем проекты для Якитории, Сбербанка и других компаний.

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

Кроме Авито и Циана, в регионах есть и другие интересные проекты в сфере недвижимости.

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

Поэтому мы без страха взялись за проект.

Серьезно изучили клиентский опыт в различных классифайдов (сайты и приложения с объявлениями), собрали Mindmap с 49 идеями. Под каждую идею нарисовали интерактивный прототип и дали попробовать агентам.

И вот на этом моменте пользователи (агенты) реально кричали нам в переписке от восторга (в паре голосовых сообщений).

Что сделали:

1. Клиент может прислать агенту параметры дома. Агент собирает подборку и отправляет клиенту персональную ссылку со списком объектов и своими контактами.

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

3. Внутренняя аналитика для агентов: показывает статистику по ценам и продажам.

И еще несколько функций, но формат короткой статьи не позволяет рассказать подробно обо всём.

Сайт-каталог интернет-магазина – стандартный каталог. Казалось бы, что здесь можно улучшить?

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

Изучили тему в сервисе подбора ключевиков Яндекса и выяснили, что помимо уже ставшим традиционным поиска “без сахара”, покупатели также:

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

На основе запросов разработали фильтры с этими параметрами:

Фильтр всегда раскрыт на странице, и покупатели активно им пользуются.

Проект под NDA, поэтому текстом, без картинок.

Сначала признаюсь в нашей ошибке – с первой версией мы облажались.

Вот буквально.

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

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

Одновременно с этим отправили дизайн китайцам, текущим клиентам портала, и… они ничего не поняли.

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

И тогда мы приняли решение все перерисовать. Естественно, за наш счет.

И в этот раз попросили китайского поставщика почаще взаимодействовать с нами. Пришлось предложить ему взаимовыгодные условия (кто с китайцами работал, тот знает, переговорщики они жесткие), но результат был отличный. Наши идеи по интерфейсу “попали” в клиентские боли.

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

Что сделали:

• Собрали в единую систему разные аукционы: раньше аукционы начинались в разное время и на разных площадках, это вызывало много путаницы, приходилось вести какие-то календари чуть ли не на коленке. Мы свели в единый портал с учетом разницы во времени, чтобы продавцы и покупатели не путались, в какое время будут торги.
• Сделали интеграцию c wechat (китайский мессенджер all-in-one): настроили уведомления, если появляется аукцион на определенную категорию, и еще одно уведомление приходит в день торгов.

Отзывы покупателей – отличные.

Сайт был максимально понятный и простой, было много трафика с контекстной рекламы и классификаторов, но с заявками было как-то не очень. При этом конкуренты с похожими сайтами хвастались в разы большей конверсией. И это не было историей “раз сосед говорит, что может 10 раз, вы тоже говорите”, это действительно так и было.

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

Изучили трафик, рекламу, посмотрели ЦА.

Сюрприз! Возраст покупателей услуги – 55+.

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

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

Что сделали:

• Максимально простой сайт с крупными шрифтами как в веб-версии, так и на мобильных.

• Меню продублировали в левом сайдбаре.Теперь не заблудиться.

Результат: сайт стал более понятным, конверсия в заявки ощутимо подросла.

Кейс, похожий на предыдущий.

Большой процент посетителей имеет плохое зрение. В связи с этим мы решили укрупнить все шрифты сайта.

Можете проверить – шрифты действительно КРУПНЫЕ.

Сайт-новинка.

Вот сайт до http://www.yeiskport.ru/

А вот после http://eiskport.itfactory.site/

Неискушенный читатель может подумать, что основная фишка нового сайта в красивой 3D-картинке.

И ошибётся! Потому что такими 3D-картинками уже никого не удивишь, их дизайнеры умеют рисовать уже много лет.

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

Что сделали:

• Убрали с главного экрана всё, кроме главного визуала – карты порта.
• Вывели на главную гиперссылками пять возможностей порта для клиентов: зерновой терминал, нефтяной терминал, тарно-штучные грузы, угольный терминал, пищевой налив.
• Сделали заметный переключатель Ru-Eng: порт международный.

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

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