Как создать идеальный лендинг для технологического стартапа, который будет привлекать клиентов, а не отпугивать их перегруженным интерфейсом? Ведущий Y Combinator Эйн Эпштейн и руководитель отдела дизайна Stripe Кэти Дилл (ранее возглавлявшая дизайн в Lyft и Airbnb) провели подробный аудит сайтов нескольких молодых компаний. На практических примерах эксперты разобрали типичные UX/UI-ошибки начинающих фаундеров, объяснили, почему не стоит злоупотреблять анимацией, и как правильно выстраивать визуальную иерархию для ИТ-продуктов.
🩺 Meo Health: баланс между сторителлингом и конверсией 0:53
Первый участник обзора — проект Meo Health (в транскрипте упомянут как Meo), предлагающий персонализированный анализ крови и рекомендации для долголетия. Первое впечатление Кэти Дилл от главного экрана оказалось неоднозначным: по её мнению, общая атмосфера сайта ощущается скорее тревожной и гнетущей, нежели вдохновляющей, что может негативно влиять на восприятие бренда медицинской направленности.
Главной UX-проблемой страницы эксперты назвали избыточный сторителлинг в ущерб информативности. Вместо четкого ценностного предложения пользователю предлагают интерактивную команду «скрольте для изучения», после чего запускается масштабная видео-презентация, буквально захватывающая экран.
Кэти Дилл и Эйн Эпштейн сформулировали ключевые тактические рекомендации для оптимизации интерфейса:
- Откажитесь от «скролл-джакинга» (scroll hijacking). Принудительное управление прокруткой пользователя раздражает. По мнению Дилл, у современных посетителей слишком клиповое мышление (эффект TikTok), чтобы тратить время на затянутые анимации.
- Выносите суть выше первого экрана. Полноценное описание продукта («Анализы крови и персональные инсайты, которые помогут жить дольше и здоровее») спрятано глубоко внизу. Эксперты сошлись во мнении, что сайт должен был начинаться именно с этой фразы.
- Соблюдайте логику в описании процессов. Блок «Как это работает» содержит шаги: заказать тест, получить результаты, составить план действий и пройти тест заново. Эпштейн заметил, что авторы упустили самый логичный шаг — «сдать сам тест», из-за чего нарушается причинно-следственная связь.
- Контролируйте фокус целевой аудитории. На скриншоте личного кабинета указан возраст пользователя 21 год, в то время как на других изображениях сайта фигурирует пожилой мужчина. Дилл рекомендует тщательно выверять графические элементы, чтобы потенциальный клиент сразу понимал, для кого создан продукт.
📊 Signoz: как презентовать сложный технический ИТ-продукт 5:23
Стартап Signoz разрабатывает комплексный инструмент для обсервабилити (логи, метрики и трассировка в одном окне) на базе OpenTelemetry. Эксперты похвалили компанию за сильный и понятный первый экран: ценностное предложение сформулировано четко, а качественный скриншот продукта сразу дает разработчикам понимание интерфейса. Блок с логотипами известных компаний-клиентов также эффективно работает на повышение доверия.
Однако при детальном разборе Кэти Дилл и Эйн Эпштейн выявили несколько критических зон роста. Основная сложность заключается в специфике B2B-продукта: разработчики пытаются показать на скриншотах реальные логи и фрагменты кода, которые содержат много мелкого текста. Этот текст начинает визуально конкурировать с основными маркетинговыми тезисами лендинга. Кэти Дилл посоветовала уменьшать или абстрагировать (упрощать) графику интерфейсов на скриншотах, чтобы разгрузить страницу.
Дополнительные замечания по дизайну Signoz:
- Избыток шрифтовых размеров. На странице используется слишком много разных кеглей, что усложняет сканирование текста глазами.
- Концепция «каждый пиксель должен работать». Текстовая плашка «Этим компаниям доверяют» перед блоком логотипов избыточна — пользователи и так считывают этот контекст визуально.
- Двусмысленный копирайтинг. Слоган «Построено для разработчиков, создано людьми» (Build for developers, crafted by humans) вызвал улыбку у экспертов. По мнению Дилл, это звучит так, будто сами разработчики людьми не являются.
Отвечая на вопрос фаундеров о том, как повысить конверсию кнопки «Попробовать Signoz Cloud», Кэти Дилл порекомендовала шире смотреть на проблему и составить карту пути пользователя (User Journey Map). Дизайнер отметила, что падение конверсии часто связано не с качеством самой кнопки на сайте, а с несоответствием контекста: например, если обещание в рекламном объявлении не совпадает с реальным заголовком лендинга.
📺 Taive: борьба с визуальным шумом и важность микротипографики 10:29
Сервис Taive помогает ресторанам монетизировать прямые трансляции на телевизорах, увеличивая их выручку. По заявлению создателей, их средний партнер зарабатывает около 2 000 долларов с одной локации в год. Несмотря на понятную бизнес-модель, дизайн интерфейса оказался перегружен лишними декоративными элементами.
На главном экране присутствуют светящиеся неоновые кнопки, хаотичные стрелки вверх и вниз, а также динамическое видео на заднем плане. По мнению Кэти Дилл, обилие этих элементов не создает добавленной стоимости, а лишь рассеивает внимание потенциального клиента. Единственным однозначным плюсом сайта эксперты назвали хорошую адаптивность под мобильные устройства, что критично для ресторанного бизнеса.
Основные тактические ошибки Taive, снижающие доверие профессиональной аудитории:
- Слабый заголовок. Фраза «Дайте вашему ТВ суперсилы» абстрактна. Субзаголовок про увеличение выручки ресторанов гораздо эффективнее. Кэти советует фаундерам напрямую спрашивать действующих клиентов, как они описывают продукт, и использовать их точные формулировки в качестве хедлайнеров.
- Хаос в регистрах текста (Casing). Разработчики смешали разные стили: фраза «Give your TV superpowers» содержит капитализацию слова в середине предложения, кнопка «Get Started» написана в стиле Title Case (каждое слово с большой буквы), а соседняя «Learn more» — в стиле Sentence Case. Кэти Дилл подчеркнула, что подобные небрежности в микротипографике подсознательно разрушают доверие клиентов к качеству самого ИТ-продукта.
- Неудачный логотип. Иконка Taive изображает телевизор, разрезанный пополам. По оценке Кэти, это вызывает негативные ассоциации со сломанной техникой. Кроме того, название бренда визуально смещено вниз относительно знака, создавая ощущение дисбаланса.
🧬 Metroport: анимация ради анимации и иерархия интерфейса 14:12
Компания Metroport создает универсальный API для агрегации медицинских данных. Главный тренд, который Эйн Эпштейн и Кэти Дилл раскритиковали на этом сайте — использование популярных сегодня абстрактных движущихся «анимаций-блобов» (жидких капель) на фоне.
По мнению руководителя отдела дизайна Stripe, эстетика важна, но любые динамические элементы обязаны транслировать ценности бренда. В Stripe, например, используют яркие цвета для передачи ощущения оптимизма, прогресса и позитивного взгляда на мир. В случае с Metroport абстрактная анимация не несет смысловой нагрузки, к тому же визуально обрывается краями невидимого контейнера, демонстрируя техническую небрежность.
Проблемы UX-архитектуры Metroport:
- Неэффективные кнопки-карточки. В блоке описания продуктов (Medical API и Dashboard) кнопки «Узнать больше» сделаны настолько массивными и яркими, что они полностью перетягивают на себя внимание с главного целевого действия — «Забронировать демо». Кэти Дилл порекомендовала сделать ссылки на второстепенные продуктовые страницы менее агрессивными.
- Бесполезные скриншоты для видео. Превью-заглушка видеоролика на сайте полностью дублирует интерфейс, который пользователь только что видел выше. Если видео не запущено, этот блок не дает посетителю никакой новой информации.
При этом эксперты признали, что с точки зрения копирайтинга ценностное предложение Metroport («Получите комплексные медицинские данные пациента за секунды, а не недели») сформулировано идеально и понятно с первых секунд.
🧪 Amino Analytica: допустим ли стиль B2C в суровом B2B? 17:27
Фаундеры компании Amino Analytica, занимающейся ускоренным дизайном белков, задали экспертам фундаментальный вопрос: может ли B2B-сайт глубоко технологичной компании выглядеть фаново, ярко и персонализировано (в стиле B2C), или это делает бренд несерьезным в глазах корпоративных клиентов?
Кэти Дилл ответила на этот вопрос категорично: добавлять элементы фана и эстетики в сложные B2B-интерфейсы не просто можно, а нужно. Корпоративные клиенты — это тоже люди, которые ценят красивый дизайн и интерфейсную радость. Однако в погоне за ярким стилем Amino Analytica полностью пожертвовали базовым юзабилити. Из-за обилия радиальных шрифтов, хаотичного движения элементов и прыгающих размеров букв («adaptation» крупнее, чем «accelerated») сайт стало банально трудно читать.
Ключевые ошибки проектирования Amino Analytica:
- Принуждение к клику вместо скролла. На главной странице практически нет полезной информации, пользователю приходится нажимать на кнопки, чтобы узнать хоть какие-то детали о компании. Кэти Дилл напомнила базовое правило веб-дизайна: пользователи гораздо охотнее прокручивают страницу вниз, чем кликают по внутренним ссылкам.
- Отсутствие четкого призыва к действию (CTA). В подвале сайта нет формы захвата или кнопки регистрации, а вместо этого стоит ссылка на платформу Launch YC, уводящая трафик с ресурса.
- Акцент на негативных тезисах при сканировании. При быстром просмотре страницы (скимминге) взгляд цепляется только за выделенные жирным шрифтом словосочетания. Из-за ошибок верстки на сайте Amino Analytica ярче всего подсвечены негативные фразы: «метод проб и ошибок» (trial and error) и «случайные мутации» (random mutations). Эксперты рекомендуют выделять жирным исключительно маркеры ценности продукта.
