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