Редизайн kod.ru, или как сделать сайт действительно интересным

by Степан Попов
Редизайн kod.ru, или как сделать сайт действительно интересным

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

Но в последнее время всё происходит совсем не так. Людям удобнее читать новости в социальных сетях, и основная функция сайтов СМИ - это публикация лонгридов и перекидывание пользователя на них из своих аккаунтов на других площадках.

Почему людям нравится читать новости в социальных сетях?

  • Источники перемешиваются, что делает чтение ленты интереснее
  • Кто бы что ни публиковал - дизайн всех постов единый. Это приятно для глаза
  • Для пропуска новости нужен не один свайп, а два-полтора (ещё разберем)
  • Новость можно быстро отправить друзьям или на стену

Так как же переменить людей залипать на kod.ru, а не в соц. сетях?

Оформление главной

Сейчас основная страница сайта выглядит так:

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

Большое место в превью новости занимает картинка, которая далеко не всегда информативна.

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

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

Почему так?

  • Все посты одной ширины, поэтому текст легко и последовательно читается.
  • На экран не вмещаются две новости одновременно, поэтому пользователь легче концентрируется на статье и не перепрыгивает её, если увидел более интересную
  • Шрифты с засечками, как у других изданий, не нужны. Они используются, чтобы закосить под СМИ оффлайн-эпохи (газеты и журналы), потому что такое оформление устоялось в головах людей как правдиво-официальное. Но молодежному интернет-изданию это не нужно, поэтому лучше использовать современный шрифт San Francisco.
  • Так как все новости на главной новые, им не нужно подписывать дату. Человек понимает, что это произошло просто недавно, и этого достаточно практически для всех новостей.
  • Иллюстрации отделены от новостей для того, чтобы полные статьи и их превьюшки не отличались по стилю, и четко делили страницу на важную и опциональную информацию. Важная в данном случае - текстовое превью, а опциональная - постер к новости, который легко воспринимается боковым зрением.

Последний пункт поможет нам в будущем, когда пользователь зайдет в статью полностью.

Оформление статьи

Сейчас статья выглядит так:


Есть два сценария взаимодействия с этой страницей:

  • Пользователю не нравится статья. В этом случае он начинает отвлекаться, глаз начинает искать на странице ещё что-нибудь интересное, но там только текст статьи - нет ни одной интересной возможности. В этом случае пользователь может закрыть сайт полностью, не долистав статью до конца.
  • Пользователю нравится статья. Он долистывает до конца, и видит немного рекомендаций, который может отправить читателя либо на одну из последних новостей, либо в список новостей.

Вот только проблема в том, что многие могут просто не долистать до этого места, потому что между новостью и рекомендациями огромное ненужное пространство:

Я считаю, что комментарии и авторство не нужны - это совершенно ненужная информация.

Как исправить страницу

Вот так:

Блоки "Рекомендуем" и "Поделиться" фиксированные.

Теперь два сценария нам не в убыток:

  • Если статья не нравится, то сбоку всегда есть небольшая подборка новостей - можно почитать её.
  • Если статья понравилась, то сбоку всегда есть небольшая подборка новостей - можно почитать её.

Новости внизу - две по теме (раз уж человек дочитал, это тоже может ему понравиться), и бесконечная лента других новостей.



А еще сайту нужен поиск.

По глобальным изменениям - пока всё. Но только пока. :)

May 20, 2018
by Степан Попов
Сайты