Клиентский интерфейс сайта или приложения должен быть интуитивно понятным и удобным для использования. Но это всё бла-бла. Сейчас покажу 6 реальных примеров с комментариями: как простые решения упрощают клиентам жизнь.
Почему мы об этом пишем?
Наша специализация – высоконагруженные порталы, интернет-магазины, мобильные приложения и интеграции по API. Мы – это ITFactory, веб-продакшн. Разрабатываем проекты для Якитории, Сбербанка и других компаний.
Дальше покажу 6 примеров из нашего опыта, как проработать клиентский интерфейс, чтобы пользователям было удобно (и они бы вам об этом говорили).
Портал для экспертов недвижимости в Сочи
Кроме Авито и Циана, в регионах есть и другие интересные проекты в сфере недвижимости.
Мы прекрасно понимали, что у федеральных игроков больше бюджеты, крупнее команды разработки и больше накопленной аналитики. С другой стороны, те, кто сталкивался с разработкой в крупных компаниях, знают, что просто передвинуть кнопку левее может потребовать месяц согласований.
Поэтому мы без страха взялись за проект.
Серьезно изучили клиентский опыт в различных классифайдов (сайты и приложения с объявлениями), собрали Mindmap с 49 идеями. Под каждую идею нарисовали интерактивный прототип и дали попробовать агентам.
И вот на этом моменте пользователи (агенты) реально кричали нам в переписке от восторга (в паре голосовых сообщений).
Что сделали:
1. Клиент может прислать агенту параметры объект. Агент собирает подборку и отправляет клиенту персональную ссылку со списком объектов и своими контактами. Например вот - Новостройки - Бизнес класс
2. Клиент может задать фильтр поиска, сохранить его. Если появляется новый объект с заданными параметрами, то придет Push-уведомление о новинке.
3. Внутренняя аналитика для агентов: показывает статистику по ценам и продажам.
И еще несколько функций, но формат короткой статьи не позволяет рассказать подробно обо всём.Кондитерская фабрика «Победа»
Сайт-каталог интернет-магазина – стандартный каталог. Казалось бы, что здесь можно улучшить?
Но после того, как мы вникли в тему, оказалось, что покупателям уже недостаточно просто бродить по каталогу и выбирать по картинкам.
Изучили тему в сервисе подбора ключевиков Яндекса и выяснили, что помимо уже ставшим традиционным поиска “без сахара”, покупатели также:
- Ищут веганское и вегетарианское.
- Ищут продукты, пригодные во время поста (халяльные кстати тоже ищут, но мы пока не включили такой фильтр).
- Ищут продукты с высоким содержанием какао (горький шоколад).
На основе запросов разработали фильтры с этими параметрами:
Фильтр всегда раскрыт на странице, и покупатели активно им пользуются.
Сайт-аукцион для китайских оптовиков
Проект под NDA, поэтому текстом, без картинок.
Сначала признаюсь в нашей ошибке – с первой версией мы облажались. Вот буквально.
Проделали большую работу: продумали логику, нарисовали и согласовали прототипы, разработали дизайн. Дизайн был классный, мы считали его улучшенным вариантом страшных китайских сайтов. Вы наверняка видели дизайны китайских сайтов, они обычно публикуются в рунете с тегами типа #юмор и #какойпздцбожемой .
Компании-заказчику все понравилось, мы начали подготовку к разработке.
Одновременно с этим отправили дизайн китайцам, текущим клиентам портала, и… они ничего не поняли.
Самые простые юзкейсы не смогли реализовать, потерялись в нашем дизайне, несмотря на огромное количество интуитивных подсказок. То есть мало сделать дизайн логичным, его всё-таки надо адаптировать под привычные паттерны другой культуры.
И тогда мы приняли решение все перерисовать. Естественно, за наш счет.
И в этот раз попросили китайского поставщика почаще взаимодействовать с нами. Пришлось предложить ему взаимовыгодные условия (кто с китайцами работал, тот знает, переговорщики они жесткие), но результат был отличный. Наши идеи по интерфейсу “попали” в клиентские боли.
Так что мы для себя зафиксировали: если работаешь с новым рынком или другой культурой, полезно как можно быстрее показывать результаты и получать обратную связь.
Что сделали:
- Собрали в единую систему разные аукционы: раньше аукционы начинались в разное время и на разных площадках, это вызывало много путаницы, приходилось вести какие-то календари чуть ли не на коленке. Мы свели в единый портал с учетом разницы во времени, чтобы продавцы и покупатели не путались, в какое время будут торги.
- Сделали интеграцию c wechat (китайский мессенджер all-in-one): настроили уведомления, если появляется аукцион на определенную категорию, и еще одно уведомление приходит в день торгов.
Отзывы покупателей – отличные.
Компания по прокладке труб и бурению
Сайт был максимально понятный и простой, было много трафика с контекстной рекламы и классификаторов, но с заявками было как-то не очень. При этом конкуренты с похожими сайтами хвастались в разы большей конверсией. И это не было историей “раз сосед говорит, что может 10 раз, вы тоже говорите”, это действительно так и было.
Мы пошли путем изучения аудитории. Вот многие ругают Яндекс за жадность и кривые продукты, а всё-таки они были первыми в мире (насколько я знаю, из крупных игроков), кто сделал Вебвизор бесплатной частью своей Яндекс.Метрики. Спасибо им за это.
Изучили трафик, рекламу, посмотрели ЦА. Сюрприз! Возраст покупателей услуги – 55+.
Уточнили у клиента по реальным покупателям, клиент подтвердил, что большинство покупателей – люди в возрасте. Когда с этой информацией мы посмотрели на сайты конкурентов, то заметили, что у них действительно шрифты крупнее.
Что сделали:
- Максимально простой сайт с крупными шрифтами как в веб-версии, так и на мобильных.
- Меню продублировали в левом сайдбаре. Теперь не заблудиться.
Результат: сайт стал более понятным, конверсия в заявки ощутимо подросла.
Медиа о поэзии
Кейс, похожий на предыдущий.
Большой процент посетителей имеет плохое зрение. В связи с этим мы решили укрупнить все шрифты сайта.
Можете проверить – шрифты действительно КРУПНЫЕ.
Ейский морской порт
Сайт-новинка.
Вот сайт до http://www.yeiskport.ru/
А вот после http://eiskport.itfactory.site/
Неискушенный читатель может подумать, что основная фишка нового сайта в красивой 3D-картинке. И ошибётся! Потому что такими 3D-картинками уже никого не удивишь, их дизайнеры умеют рисовать уже много лет.
Основная задача, которую нам удалось решить – наглядно отобразить информацию по возможностям порта.
Что сделали:
- Убрали с главного экрана всё, кроме главного визуала – карты порта.
- Вывели на главную гиперссылками пять возможностей порта для клиентов: зерновой терминал, нефтяной терминал, тарно-штучные грузы, угольный терминал, пищевой налив.
- Сделали заметный переключатель Ru-Eng: порт международный.