Лига А. 
Тендеры и лиды
Информация
Kleinanzeigen — немецкая онлайн-платформа для частных и коммерческих объявлений, похожая на Авито. За всех коллег по цеху посмотрели на сервис глазами пользователей, дизайнеров и разработчиков. Дизайн актуальный и чистенький, а код внутри — на смеси старых и новых технологий. В этом разборе собрали конкретные выводы и рекомендации всем, кто работает с подобными сервисами.
Это уже восьмой выпуск, где мы разбираем сайты с интересными анимациями/фичами/задумками, которые нас зацепили. Смотрим на него как пользователи, разработчики и дизайнеры. Разбираем ключевые показатели, оцениваем пользовательский опыт и предлагаем конкретные улучшения для удобства, доступности и эффективности работы сервиса. На этот раз мы взяли немецкий Авито — сайт kleinanzeigen.
Ребята превращают бизнес-идеи в эффективные цифровые решения — делают брендинг, дизайн, разработку и поддержку сложных проектов. Подходят к проектам без лишнего пафоса, с полной отдачей и вниманием к деталям.
«Мы решили присоединиться к разбору, потому что поддерживаем любые инициативы, делающие диджитал-среду вокруг нас лучше. Особенно приятно делать это вместе с командой Лиги А., фанатами которой мы являемся с незапамятных времён.»
Нам нравится разбирать сложные сервисы и смотреть на них с нескольких сторон. Во-первых, так мы качаем свою насмотренность — видим распространённые ошибки в дизайне и реализации, которые не допускаем в будущем. Во-вторых, тренируемся делать продукты лучше с разных сторон, как сделали бы для клиента или для самих себя.
Сайты объявлений используют чистый минималистичный дизайн без лишних элементов, чтобы не смещать фокус с объявлений.
Главные функции сайтов объявлений — покупка и продажа. Поэтому компании на первой же странице делают акцент на строке поиска и call to action для размещения объявлений.
На первую страницу выводят категории товаров. Этот вариант демонстрации категорий нагляднее, чем выпадающий список:
На сайтах делают широкую контентную область, чтобы улучшить качество демонстрации товаров:
Доступен вход через гугл-аккаунты и аккаунты в соц сетях:
Крупные компании типа Ebay или Leboncoin используют более сложную структуру главной страницы. Они сразу демонстрируют товары по категориям и добавляют другие информационные блоки или call to action:
Удачные фишки
Блоки с тематическими подборками или тенденциями помогут подогреть интерес к покупкам:
👍 Понравилось
👎 Не понравилось
Почти не используется градация текста по толщине — это усложняет восприятие. Также есть нарушения в иерархии текста —например, хлебные крошки воспринимаются более значимыми, чем названия категорий.
Все основные критерии поиска находятся в одной поисковой строке — это удобно, так как пользователь все эти критерии держит в фокусе и это исключает вероятность что-то упустить.
Гипотеза: пункты поиска относятся визуально к одному элементу, поэтому ввод запроса будет восприниматься проще, как одно действие. В отличие от ситуации, когда у каждого критерия поиска своя отдельная плашка.
Но с точки зрения UI поиск надо переработать — сделать поля более понятными и интуитивными
Сейчас в строке поиска поля с тремя различными цветами текста. Это задает им различный приоритет и заставляет пользователя разбираться в том, какие поля более приоритетные или обязательные/необязательные.
Комментарий разработчика: С точки зрения интерфейса тут важна цель — сделать поиск быстрым и удобным. Сейчас он работает, но выглядит как собранный из разных кусков. Скорее всего, элементы формы (даты, пассажиры, кнопка поиска) были добавлены в разное время и не сводились в один компонент.
Из-за этого:
Для пользователя это значит: форма выглядит сложно, и её нужно «расшифровывать», а не просто заполнять. Это можно решить: объединить всё в один стандартный компонент (внутри команды это называется унификация) и навести порядок в логике взаимодействия.
Удачный вариант, когда поиск сокращен до двух основных критериев с одинаковым приоритетом:
Размышления по верхней плашке с объявлениями: контраст плашки и фона низкий, при этом формат рекламных объявлений меньше, чем формат обычных объявлений.
Например, можно выделить объявления, выбрав для них другой формат с более крупной обложкой, или сделать сильнее контраст между фоном и плашкой с этими объявлениями.
Рекламные объявления нельзя добавить в Избранное — и это неудобно. Люди не всегда принимают решение сразу: сначала они выбирают, сравнивают, откладывают интересные варианты. А тут им не дают такой возможности.
Похоже, авторы хотели, чтобы пользователь сначала открыл страницу объявления, а не просто добавил его в Избранное из общего списка. Но неясно, помогает ли это бизнесу — скорее раздражает и мешает выбирать.
Комментарий разработчика: Да, часто такие карточки «рекламы» делаются отдельно от обычных — специально, чтобы пользователь быстрее кликал. Но это не всегда удобно. Когда визуально они отличаются и нельзя взаимодействовать так же, как с остальными (например, сохранить в избранное), — это путает.
Решение простое:
Так и пользователь будет доволен (можно сохранить понравившееся), и реклама всё равно будет работать.
Фильтры
Текст выглядит одинаково — из-за этого сложно быстро просканировать страницу и найти нужное. Акценты расставлены не очевидно: например, зелёная ссылка «Alle anzeigen» привлекает внимание, хотя это второстепенный элемент. Визуальная иерархия слабая — размеры и насыщенность шрифтов почти не отличаются, и глазу не за что зацепиться. Нужно сделать заголовки заметнее, а второстепенные детали — тише.
Комментарий разработчика: Это частая проблема — когда фильтры «нарисовали», но не до конца продумали удобство. Сейчас, чтобы раскрыть, нужно попадать мышкой в маленькую иконку. Многим это просто неудобно, особенно на мобильных.
Плюс — всё выглядит одинаково: важные фильтры и второстепенные ничем не отличаются. Это путает.
Как можно улучшить:
Это мелочи, но в сумме они экономят пользователю много времени и делают фильтры интуитивно понятными.
Слабо выражена иерархия шрифтов, что тоже мешает последовательному восприятию и рассеивает внимание. Нужно сделать разницу в размерах более выраженную.
Сетка и карточки
Рабочая область узкая, фильтры занимают много места, и в итоге карточки товара получаются мелкими. Пользователю приходится вглядываться или даже открывать каждую карточку только чтобы посмотреть фотографии. Это утомляет и замедляет выбор.
Комментарий разработчика: Это техническое ограничение: страница, скорее всего, «зажата» в фиксированной ширине — например, максимум 1200 пикселей. Когда в левой части фильтры, остаётся мало места под карточки, и они становятся тесными.
Что можно сделать:
Всё это можно сделать без полного переделывания сайта — только улучшив верстку.
Для решения можно увеличить размер карточек, пересмотрев сетку и боковые отступы, или изменить формат карточек.
Если у товара есть несколько фотографий, было бы супер посмотреть их на карточке в общем каталоге без перехода на страницу товара.
Одинаковое оформление дефолтных тематических обложек поддерживает общий стиль и предлагает решение для тех, у кого нет обложки.
Опросник по оценке страницы деликатно интегрирован в раскладку объявлений. Очень полезная функция для компании, и с практической, и с имиджевой точки зрения.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13201 тендер
проведено за восемь лет работы нашего сайта.
Есть фильтры, которые надо активизировать нажатием на стрелку. Возможно, было бы удобнее, если бы они срабатывали автоматически или вариант с кнопкой, описанный в предыдущем пункте
Сейчас фотографии показываются по одной, и их приходится листать вручную
Было бы удобнее, если бы все превью фото были сразу видны — например, под основной фотографией или сбоку. Так пользователь сможет сразу перейти к интересующему ракурсу.
Комментарий разработчика: Да, сейчас карточка показывает только одну «обложку» товара. Это удобно для скорости — сайт грузится быстрее. Но если хочется больше фото, нужно заходить внутрь.
Есть хорошее решение: добавить прокрутку фото внутри карточки, но сделать её лёгкой — например, 3–4 картинки, которые появляются только при наведении (или свайпе на телефоне). Это не сильно повлияет на скорость и точно улучшит удобство.
Тут важно:
Если сделать аккуратно — пользователь сможет быстрее определяться с выбором и не будет уходить на лишние страницы.
Пример страницы товара, где показаны превью всех фотографий:
Связь с продавцом
Если пользователь не авторизован, он не всегда может написать продавцу. Это мешает задать вопросы до покупки. Стоит добавить альтернативный способ связи — например, простую форму или быстрый чат.
Рекламный баннер
Баннер вставлен прямо в середину блока с описанием товара — это сбивает с толку. Лучше показывать рекламу после основного контента: например, перед похожими объявлениями или блоком «Вас может заинтересовать». Так пользователь сначала получит всю нужную информацию, а потом увидит рекламу.
Будет удобно, если закрепить кнопки на странице товара в правой части страницы, тогда можно будет совершить действие в любом месте страницы:
Блок о возможностях финансирования, возможно, стоит поднять ближе к цене товара. Так как, не зная о таких возможностях и увидев неподходящую стоимоть, пользователь может уйти.
Лучше перенести название и стоимость товара в правую часть страницы. Там они традиционно располагаются и там пользователь будет их искать.
На сайте нет возможности войти или зарегистрироваться по аккаунту в Google или ещё какому-нибудь аккаунту.
Например, на сайте https://www.subito.it/ есть возможность зарегистрироваться через Гугл или Фейсбук-аккаунты:
Удобно, что требования к паролю ненавязчиво расположены под полем ввода пароля, и каждое требование исчезает как только пользователь выполняет его.
Хорошо, что сразу формируется ожидание по времени, которое надо затратить на регистрацию:
Если в форме есть ошибка, хорошо бы сразу показать, где именно — например, автоматически прокрутить страницу к нужному полю. Сейчас этого не происходит, и пользователь может просто не заметить, что что-то пошло не так, особенно если форма большая и он уже пролистал эти поля.
На последнем шаге регистрации было бы хорошо прописать действия на случай, если письмо не пришло.
Фичи: 4/10
Красота и удобство: 6/10
UX: 7/10
Сайт выглядит просто, но стабильно работает — для сервиса объявлений это главное. Видно, что проект существует давно: внутри используется устаревший технический стек, например jQuery (это старая библиотека для интерактивных элементов на сайте) и Hogan.js (инструмент для шаблонов, который сейчас почти не используется). Но параллельно начали внедрять более современные решения, чтобы сайт развивался и не тормозил.
Также сайт загружен разными сторонними виджетами — блоками рекламы, аналитики, сервисами партнёров. Из-за этого структура усложняется, и поддерживать всё становится непросто.
Из основных ошибок Lighthouse выделил следующие основные моменты:
На сайте смешаны старые и новые технологии — это нормально для проектов, которые развиваются постепенно
Внутри до сих пор используются устаревшие инструменты вроде jQuery и Hogan.js — это те самые «доисторические» штуки, с которых когда-то начинали делать интерактивные элементы и шаблоны. При этом видно, что сайт обновляют: подключён современный фреймворк Preact, а структура построена на Astro — решении, которое позволяет собирать сайт из отдельных модулей.
Такой подход говорит о том, что сайт не монолитный, а собран из независимых компонентов — называется микрофронтенды. Можно менять одну часть сайта, не трогая всё остальное.
Большая часть интерфейса поделена на отдельные модули (в Astro это называют «островками»). Такой подход помогает ускорить загрузку страницы: простые элементы — например, заголовки или кнопки — становятся активными раньше, чем тяжёлые вроде галерей или баннеров. Это повышает производительность и делает сайт отзывчивее.
Но внутри много лишнего. Виджеты, баннеры и сервисы отслеживания добавляют хаоса в структуру, замедляют загрузку и усложняют поддержку проекта. В таких случаях особенно важно держать архитектуру в порядке, иначе это начинает влиять на пользовательский опыт.
И тут мы подошли к важному UX-моменту — попробовали пройти базовый путь пользователя. Нашли интересный товар и хотели сохранить его в Избранное, чтобы вернуться позже. Но сайт попросил зарегистрироваться. Это сбивает с толку: вместо простого действия — клика по сердечку — пользователя уводят в форму регистрации. На таких шагах легко терять людей.
Лучше было бы дать возможность сохранять избранное без регистрации, а авторизацию запрашивать уже при покупке. Так делают многие крупные сайты, например, Авито. Без регистрации пользователь может добавлять понравившиеся товары в Избранное и всегда вернуться к ним. А вот для покупки сайт уже требует войти или зарегистрироваться.
Реализация: 7/10 — накинули баллов за тот факт, что kleinanzeigen разбавили старый легаси сайт свежими технологиями
Метрики: 8/10 — в целом, работает хорошо)
Такой проект, скорее всего, непросто поддерживать
Сайт построен на смеси старых и новых технологий — часть кода обновлена, но многое осталось «с прошлого века». Наверняка это создаёт трудности для команды: чтобы внести даже небольшие правки, приходится разбираться с устаревшими инструментами.
Фреймворк Astro помогает упростить поддержку, но полностью проблему не решает
В такой ситуации обновлять сайт становится всё сложнее и дороже — проще и эффективнее постепенно переписать его на современном стеке. Особенно если компания хочет масштабироваться и развивать продукт дальше.
Если вы дизайн-студия и читаете этот разбор — приглашаем вас разобрать какой-нибудь сайт вместе. Можете закидывать идеи сюда: @gingerliza
Подписывайтесь на наш телеграм канал — там делимся разборами сайтов, историями запусков и лайфхаками по продуктам, метрикам и UX. Всё по делу, из реальной практики.
