Hacker News Digest

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

Автор делится личным опытом, включая примеры из своей работы, такие как дизайн экрана статистики для игры YOYOZO и планирование интерфейса для утилиты sfxr. Он подчеркивает, что электронные таблицы позволяют быстро организовывать контент и планировать макеты с точностью до пикселя, что особенно полезно при работе с сетками.

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

Этот подход позволяет сосредоточиться на фундаментальных аспектах дизайна, таких как структура и компоновка, без необходимости в сложном программном обеспечении.

• Обсуждение вращается вокруг того, что визуальные прототипы (Figma, Balsamiq и т.д.) могут отвлекать от функциональности, в то время как таблицы и презентации позволяют сосредоточиться на логике и структуре интерфейса.
• Участники делятся опытом использования различных инструментов для создания макетов: от Excel и Google Sheets до Excalidraw, Figma, Balsamiq и OmniGraffle.
• Некоторые подчеркивают, что высоко-фидельные мокапы могут вводить в заблуждение разработчиков и отвлекать их от создания MVP.
• Обсуждается, что такие инструменты как Figma и Balsamiq могут быть полезны для визуального прототипирования, но стоит помнить, что они не заменяют собой обсуждение и планирование функциональности.

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

Использование готовых библиотек компонентов, таких как 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.