@from2003
Web developer

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

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

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

Первый:

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

4665eb8d7b7e33e48e8959ed14ea5688.jpg

Второй:

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

a9a3e14ca5ba834c2b1c609b30986789.jpg

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

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

Кстати забыл упомянуть, что версталось это всё в спешке и просто для того, чтобы посмотреть как это будет выглядеть, так что на некоторых браузерах flex боксы / анимация могут слетать.
  • Вопрос задан
  • 420 просмотров
Решения вопроса 2
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Первый вариант вообще неработоспособный: на тачевых устройствах :hover наступает только в момент тапа, т.е. посетители не увидят названий вообще.

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

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

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

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

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

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

Ссылки по теме:
artgorbunov.ru/bb/soviet/20160316
artgorbunov.ru/bb/soviet/20160127
artgorbunov.ru/bb/soviet/20160420
artgorbunov.ru/bb/soviet/20160427
Ответ написан
goandkill
@goandkill
live slow — die old
Заголовки должны быть сразу. В новостях они важнее картинок.

При ховере лучше не убирать заголовок, а добавить например к нему лид, типа того:
91149d2fd6c14484a47a836321651c71.png
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@zhainar
Гуглю за вас
Во втором варианте убирать текст не надо, можно сделать так:

6d5d21fa8f3d4032b74fb0067b3865ae.png

И слово опубликовано лишний мусор.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы