@from2003
Web developer

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

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

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

Первый:

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

4665eb8d7b7e33e48e8959ed14ea5688.jpg

Второй:

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

a9a3e14ca5ba834c2b1c609b30986789.jpg

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

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

Кстати забыл упомянуть, что версталось это всё в спешке и просто для того, чтобы посмотреть как это будет выглядеть, так что на некоторых браузерах flex боксы / анимация могут слетать.
  • Вопрос задан
  • 164 просмотра
Решения вопроса 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
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы