Hacker News Digest

Каждый раз, когда я открываю новый сайт, я «краду» оттуда кнопку — элемент пользовательского интерфейса, который меня привлекает. Так я собрал собственный архив «Stolen Buttons», который разместил на своём сайте. Для автоматизации я создал небольшое приложение‑расширение «Button Stealer», которое собирает кнопки в реальном времени и сохраняет их в персональную галерею. Главная идея — превратить обычные элементы пользовательского интерфейса в объект коллекционирования, подчёркивая их визуальную ценность и скрытую историю.

За несколько месяцев я «украл» более 300 разных кнопок, от простых «Submit» до креативных иконок с анимацией. Цитата из проекта звучит так: «Каждый сайт — это набор визуальных решений, а кнопка — его самая маленькая, но самая заметная деталь». Проект служит одновременно экспериментом в сфере дизайна и комментарием на тему копирования в интернете. Галерея представлена в виде скроллируемого каталога, где каждую кнопку можно открыть и увидеть её оригинальный контекст, делая проект не только визуальным, но и образовательным. Сайт регулярно пополняется новыми находками, а проект получил отклик от дизайнеров, которые используют его как источник вдохновения и как пример критической игры с визуальными элементами.

Тред обсуждает эволюцию и проблемы дизайна кнопок: участники сходятся во мнении, что кнопки должны быть простыми, интуитивными и обеспечивать чёткую обратную связь, но современные версии часто лишены визуальной выразительности и интерактивности. В спорах предлагают разные подходы — анимацию, hover-эффекты, отказ от плоского дизайна в пользу более реалистичных элементов. Рекомендуют ресурсы uiverse.io и component.gallery для вдохновения и сбора кнопок, отмечая, что такие коллекции помогают создавать удобные и привлекательные интерфейсы.

Разработчик делится простой системой для создания красивых интерфейсов без глубоких знаний дизайна: ключ в фокусе на выравнивании и консистентности, а не на оптимизации каждой мелочи. Он обнаружил, что его старые интерфейсы страдали от мелких несоответствий — например, иконки были не выровнены, а кнопки располагались хаотично, что создавало визуальный шум и ухудшало опыт.

Использование готовых библиотек компонентов, таких как HeroUI, помогает сохранять единообразие. Важно применять их "как есть", без кастомизации, и ограничивать набор стилей, чтобы избежать беспорядка. Такой подход экономит усилия и делает интерфейс целостным, даже если отдельные элементы не идеальны.

• Подчёркивается важность фундаментальных принципов дизайна (таких как гештальт), которые не зависят от технологий, в отличие от фреймворков и паттернов.
• Критикуется подход, ставящий эстетику выше функциональности и удобства использования; акцент делается на юзабилити, логику и чёткую структуру интерфейса.
• Обсуждается ценность глобальной консистентности и использования готовых библиотек компонентов против кастомных, но часто неудачных решений.
• Отмечается, что хороший дизайн начинается с глубокого понимания пользователя, а не просто со следования набору правил или созданию "красивого" интерфейса.
• Упоминаются конкретные ресурсы для обучения (книги вроде "The Design of Everyday Things", "Refactoring UI") и критика их дороговизны или поверхностного применения.

Почему PostHog стал похож на ОС
Мы устали от типичных сайтов: бесконтентные скроллы, одинаковые вкладки, пустое пространство. Новый PostHog.com работает как ОС в браузере: окна «прилипают», есть горячие клавиши, закладки, можно читать новости, смотреть демо и играть одновременно.

Что внутри

• Проводник Windows для магазина мерча
• Продуктовые страницы в стиле PowerPoint
• Редактор документов с возможностью правки
• Форумы как Outlook Express
• Плеер QuickTime, таблицы вместо дизайна, скринсейвер и обои
• 50+ горячих клавиш

Техника
Контент отделён от визуального слоя: продукты описаны в JSON, темы и цветовые схемы настраиваются, клиентские цитаты и логотипы хранятся в одном месте и подтягиваются автоматически. Всё собрано в прод-ветке на Tailwind + TypeScript.

• Сайт PostHog выглядит как десктоп ОС в браузере: окна, таски, «окна в окнах».
• Кому-то нравится визуальный стиль и ностальгия по 90-м, но почти все жалуются на тормоза, жрущий CPU JS и поломанные привычные хоткеи/кнопки.
• Пользователи теряются: непонятно, где контент, как начать читать и что вообще продаёт компания.
• Критика сводится к «изобретаю заново мой менеджер окон», «ломает SEO и accessibility», «не работает Back, не скроллится, на мобиле ужасно».
• Некоторые считают это крутым маркетинг-ходом и «growth-hack», но сомневаются, что кто-то будет реально пользоваться.

Анимации не всегда нужны

Хорошая анимация делает интерфейс предсказуемым и живым, плохая — раздражает и снижает доверие.
Перед добавлением спроси себя: зачем она нужна?

• Объясняет (как на linear.app/ai) — ок.
• Подтверждает действие (кнопка слегка уменьшается) — ок.
• Просто «красиво» — допустимо, если пользователь видит это редко.

Частота использования
Если элемент открывают сотни раз в день (Raycast, список команд), анимации быть не должно — они только тормозят.
Клавиатурные переходы никогда не анимируются.

Скорость
Всё, что дольше 300 мс, воспринимается как лаг.
Спиннеры быстрее = кажется, что грузит быстрее.
Тултипу нужна задержка при первом появлении, но при наведении на соседние — мгновенно и без анимации.

Итог
Добавляй анимацию, если она:

1. решает задачу,
2. видна редко,
3. длится < 300 мс.
   Иначе — не добавляй.

• Большинство участников сходятся: анимация должна быть почти невидимой (<150 мс) или вовсе отключаться, иначе она превращается в тормоз.
• Главный критерий целесообразности — объясняет ли анимация изменение состояния; если пользователь ждёт её окончания, чтобы продолжить, значит, она лишняя.
• «Делайт» и «восторг» нужны в основном самим дизайнерам; обычные пользователи после третьего раза хотят выключить всё, что мешает работать.
• Частые повторяющиеся действия (разблокировка, чекаут, корпоративные формы) требуют минимума анимации; для единичных экранов-онбордингов допустима более заметная, но быстрая подсказка.
• Практически каждый советует добавлять системную настройку «отключить анимацию» и уважать prefers-reduced-motion.