Задача
Бриф: сайт к
Проблема текущего сайта названа в брифе: биография и программа живут двумя отдельными лентами, и пользователь не понимает, при чём тут Альтшуллер.
Сначала поведение, потом бриф
До брифа я прошёл по сайтам похожего жанра: афиша, кинотеатр, архив Стива Джобса. Записывал не «красиво или нет», а маршрут: куда нажал, что искал, где запутался. Получились три запроса посетителя: «когда?», «про что?» и «кто это?». Каждому нужен свой вход.
Тем же способом разобрал старый сайт юбилея. Слово, которое записал: «мешанина». Три параллельные ленты, связь между ними не читается.
Первое противоречие
Прежде чем формулировать проблему, я полез в материалы, потому что не понимал природу связи. Ответ: связь смысловая, а не календарная. Эпизод 1974 года и вебинар
- Если выстроить сайт по времени, пользователь решит, что дата мероприятия связана с датой эпизода. Это неправда.
- Если выстроить по смыслу, связь читается верно, но ломается хронология, и тот, кто пришёл за ближайшим событием, теряется.
Первым пришло в голову «три режима под типы пользователей». Я его отбраковал: это перекладывает работу на посетителя. Единицей сайта стала связь — сцепка «эпизод ↔ мероприятие».
Настоящая проблема: 10 из 26
На групповой сессии мы вышли на то, что лежало глубже: у 10 из 26 эпизодов нет пары в программе. В этих точках связь обрывается.
- Если переход из биографии в программу есть везде, поведение последовательное, но из 10 эпизодов некуда приземлиться.
- Если переход есть только у связанных эпизодов, приземление всегда точное, но в 10 точках интерфейс ведёт себя иначе.
Решение, от которого я отказался
Моё первое решение было убрать эпизоды без пары: нет пары — нет вопроса «почему пусто». Оно выглядело аккуратно, но обходило проблему, а не решало её. Из биографии выпадало 40%, а исходная жалоба оставалась без ответа.
У Альтшуллера есть фраза об этом: «Изобретение — это разрешение противоречия. Не компромисс».
Три разделения
ТРИЗ разводит противоречие во времени, в пространстве и в отношениях. Я развёл саму связь:
- Время. Связь молчит, пока ты к ней не обратился. Она включается в момент, когда эпизод доезжает до линии.
- Пространство. Биография — ось, мероприятия примыкают к ней вплотную. Связанное никогда не стоит далеко.
- Отношения. Связь несимметрична: биография ведёт, программа отзывается. Мероприятия без эпизода не бывает, а эпизод без мероприятия бывает, значит, пропуски только с одной стороны.
По ходу поймал ошибку у себя: я с первого дня держал в голове «две колонки» и прогонял через них каждое решение. Форма застыла раньше, чем закончился анализ. Пришлось её отпустить и дать родиться из разделений.
Как это стало интерфейсом
- Управляющая линия. Горизонтальная линия на середине экрана. Эпизод доезжает до неё, и рядом появляется его мероприятие. Связь читается через соседство, без стрелок и линий.
- Эпизоды без пары остались, и у них своё поведение. Они едут второй колонкой правее, на ступень мельче. Когда такой заголовок налезает на основной эпизод, он отъезжает в сторону. Основной эпизод замирает на линии, пока его соседи проезжают, и только если они у него есть.
- Логотип показывает режим. Пока выбора нет, он в центре. Выбрал биографию — уезжает влево, мероприятия — вправо. Навигация без отдельной навигации.
- Заголовок отвечает на то, что ты читаешь. В нём стоит «2026». Доезжаешь до эпизода 1950 года, и цифры перебираются в «1950», а потом возвращаются.
- В календаре связи выключаются. Когда нужна дата, описания исчезают, мероприятия сходятся, биография перестаёт откликаться. Человек листает быстро, и мигающие связи только мешали бы. Связь здесь объект с выключателем — значит, она спроектирована, а не нарисована.
- Моноширинный шрифт и перебор букв. ТРИЗ придумали инженеры для инженеров. Текст, который пересобирается посимвольно, отсылает к чертёжным, где метод рождался.
Реализация
Сайт я свёрстал сам с нуля с помощью AI: HTML, CSS и JavaScript, собственная физика скролла, без библиотек и конструкторов. Desktop, планшет и mobile. Около 75 раундов правок, каждый записан в спецификацию.
Что я вынес
Глубокую проблему клиенту не показывают, ему показывают разницу. Решение, которое обходит проблему, оставляет сайт двумя лентами в разных комнатах. Решение, которое её снимает, делает так, что все 26 эпизодов работают на одну идею.
