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