Как лучше сделать вывод новостных материалов?

Question

[Vadim Bakhtin]

Я делаю информационный сайт, вчера начал накидывать дизайн. Столкнулся с проблемой, не знаю как лучше сделать вывод новостей на главной странице, нужен совет как от опытных UX проектировщиков, так и от обычных пользователей, просто ваше мнение или профессиональный совет.

С форматом я определился на 100%, это будут квадратные блоки с картинкой, но вот как именно сделать лучше не знаю, есть 2 варианта.

Первый:

Тут картинки, при наведении на которые бэкграунд затемняется и появляется заголовок новости. Попробовать лайв версию можете тут https://bkhtn.ru/blocks/



Второй:

Тут тоже картинки, но уже затемненные, и сразу виден заголовок новости, а при наведении заголовок убирается, и Вы можете посмотреть картинку почти без затемнения. Лайв версия тут https://bkhtn.ru/blocks/index2.html



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

Жду советов :)

Кстати забыл упомянуть, что версталось это всё в спешке и просто для того, чтобы посмотреть как это будет выглядеть, так что на некоторых браузерах flex боксы / анимация могут слетать.

Answer 1

[Павел Радьков]

Первый вариант вообще неработоспособный: на тачевых устройствах :hover наступает только в момент тапа, т.е. посетители не увидят названий вообще.

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

Неплохо бы сделать модули разного размера (как плитка в Windows). Крупным размером могут отображаться главные новости, мелким — менее важные. На странице должна быть иерархия информации по важности и интересности. При неоднородной структуре ленты пользователи пролистывают страницу медленнее, останавливаются рассмотреть крупные блоки и заодно замечают мелкие вокруг.

Скрывать название новости при наведении тоже не очень. Если посетитель хочет рассмотреть картинку, пусть кликнет саму новость и рассмотрит картинку внутри.

Не знаю, о чем у вас будет сайт и какая там редакционная политика, но надо продумать дизайн новости без картинки.

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

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

Ссылки по теме:
artgorbunov.ru/bb/soviet/20160316
artgorbunov.ru/bb/soviet/20160127
artgorbunov.ru/bb/soviet/20160420
artgorbunov.ru/bb/soviet/20160427

Comments

[Нерон Лордов]

Что лучше: вертикальный список (слева картинка, справа текст - например; каждая новость друг под другом) или же плитка, как в сабже? Спрашиваю, потому что удивлён засильем плитки. Ее гораздо сложнее читать, нежели список.

[Павел Радьков]

Если хронологический порядок важен, то список.

Answer 2

[goandkill]

Заголовки должны быть сразу. В новостях они важнее картинок.

При ховере лучше не убирать заголовок, а добавить например к нему лид, типа того:

Answer 3

[Zhainar]

Во втором варианте убирать текст не надо, можно сделать так:



И слово опубликовано лишний мусор.