{"id":13586,"url":"\/distributions\/13586\/click?bit=1&hash=d51248b864fc2536881ecff329f016f361fa84fdd76d6e9aaa5b17f1b9fefbb0","title":"\u0417\u0432\u043e\u043d\u0438\u0442\u044c \u0438\u0437 \u041a\u0430\u043b\u0438\u043d\u0438\u043d\u0433\u0440\u0430\u0434\u0430 \u0432 \u042f\u043a\u0443\u0442\u0438\u044e \u043f\u043e \u0432\u0438\u0434\u0435\u043e \u0431\u0435\u0437 \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a","buttonText":"\u0410\u043b\u043b\u043e!","imageUuid":"bc8e606b-9a50-5550-a16e-3fed09971ed5","isPaidAndBannersEnabled":false}
Alexandra Freydlin

Дизайн одного элемента системы или «можно ли улучшить карточку публикации?»

Сейчас очень много разнообразных курсов по дизайну: UI/UX, продукта и т.д. На каждом из них преподают алгоритм, по которому следует делать проект: ЦА, персоны, сценарии, конкуренты, их решения, референсы и ваше решение на основе собранной информации. Но как этот алгоритм применить в реальности?

Дизайнеры не всегда работают над проектом с нуля, не всегда это лендинг или сайт под ключ. А если это продукт или система, которая уже работает? У нее есть свой стиль, функционал, история. Дизайнеру приходится вливаться в команду, в систему, в процессы и решать поставленные задачи.

Возьмем популярные свободные площадки для публикации: Habr, Medium, VC.ru, Pikabu. Переделывать эти площадки с нуля — никто не будет, у них достаточно большая история существования и есть свои фанаты. Тогда рассмотрим такой вопрос: как улучшить карточку публикации для основной ленты новостей Habr. Выбор пал на Habr, так как у площадки одна из длительных историй существования (c 2006 года). Прежде чем предлагать варианты и переделывать карточку до неузнаваемости, проведем небольшое исследование.

Элемент на платформе и «что у конкурентов?»

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

Карточки публикаций на разных площадках

Параметры карточки

В ходе анализа карточек были выделены обязательные параметры (встречаются практически в любой карточке на любой площадке) и дополнительные (не на всех площадках используют)

Обязательные параметры:

  • Заголовок
  • Автор
  • Дата публикации или «прошло времени с публикации»
  • Категории материала
  • Краткое описание (порой скрывают)

Дополнительные параметры:

  • Рейтинг
  • Количество просмотров
  • Количество комментариев
  • Время на чтение
  • Эмоциональная оценка

Функции карточки. Основная — перейти в публикацию, но есть дополнительные:

  • Поделиться публикацией
  • Сохранить в закладках (избранное)
  • Сделать репост
  • Поставить рейтинг
  • Подписаться на автора
  • Показывать меньше подобного контента
  • Оставить эмоциональную оценку

Теперь посмотрим на карточки и опишем: что хорошо, какие бы улучшения могли предложить. Побывав на всех площадках, заметила, что для ПК версии в ленте выделяют два типа карточки публикации: полная и краткая.

Полные карточки

Habr

Карточка Habr

Хорошо:

  • Изображение привлекает основное внимание пользователя, то есть автору нужно уделить время на подбор или создание правильной концепции изображения
  • Выделение новых комментариев, хорошо привлекает внимание к оживленным темам

Что можно улучшить:

  • Увеличить заголовок, чтобы контраст заголовка на фоне описания был сильнее
  • Сделать иконки понятнее. Как думаете: что значит первая ромбовидная иконка? Это кристаллы — рейтинг (другие пользователи могут оценить публикацию положительно или отрицательно; это параметр, отражающий интерес сообщества к публикации пользователя на ресурсе)
  • Сделать всю область кликабельной для перехода в публикацию, а не искать кнопку «Читать далее»
  • Указана дата публикации и время, хотя лучше указывать «прошло времени». Пользователям важна свежесть материала. Если на площадке указывают дату публикации, то пользователь вынужден вспомнить какое сегодня число, посмотреть на время, потом оценить с датой и временем публикации. Проще посмотреть сразу на параметр: 2 часа назад

VC.ru

Карточка VC.ru

Хорошо:

  • Хороший контраст заголовка
  • Изображение привлекает основное внимание пользователя, то есть автору нужно уделить время на подбор или создание правильной концепции изображения
  • Вместо даты публикации, используют параметр «Прошло с даты публикации»
  • Первенство категории материала, а не авторство. Категориями нам проще оперировать, чем помнить ник автора
  • Вся область карточки кликабельная
  • Анимация добавления новых комментариев и обновления материала статьи

Что можно улучшить:

  • В карточке сразу можно поставить рейтинг статье, хотя по ней сложно определить насколько качественный и хороший материал в публикации
  • Не все иконки понятны. Две стрелочки в круг — репост (напоминает Обновить), а стрелочка вверх — поделиться (напоминает Скачать)

Medium

Карточка Medium

Хорошо:

  • Один вариант карточки, меньше затрат на его проектирование и поддержание с точки зрения бизнеса
  • Самое контрастное и главное — заголовок. По нему пользователь принимает решение: читать или нет
  • Вместо даты публикации, используют параметр «Прошло с даты публикации»
  • Указано время на прочтение материала, пользователь сразу может понять: а стоит ли открывать и читать лонгрид?
  • Вся область карточки кликабельная
  • Система дизлайка (не показывать пользователю материал с подобным контентом)

Что можно улучшить:

  • Присваивается одна категория материала, когда лучше сделать основную категорию и смежные тематики в виде тегов. Такой механизм позволит поиску по всем публикациям площадки выдавать более предсказуемый для пользователя результат, а также ему будет проще оценить свою заинтересованность в нем
  • Иконка не очевидна. Круг с минусом обозначает функцию дизлайк (если пользователь применит этот функционал к публикации, то система в ленте не будет выдавать подобные публикации, то есть сформирует контент специально для него)

Pikabu

Карточка Pikabu

Хорошо:

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

Что можно улучшить:

  • Сделать более явную иерархию заголовка над контентом
  • Сделать весь блок кликабельным, сейчас только заголовок и кнопка

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

Разбор по контрасту карточек публикаций

Краткие карточки

Большинство кратких карточек по набору параметров схожи с полными, главные отличия:

  • Показываем или убираем описание публикации
  • Убираем ли изображение

Habr

Краткая карточка Habr

Хорошо, что заголовок контрастный и сразу считывается, но сложно только по заголовку принимать решение о прочтении

VC.ru

Краткая карточка VC.ru

Данная карточка содержит все основные элементы для принятия решения о прочтении:

  • Контрастный заголовок
  • Краткое описание

Medium

Карточка Medium

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

Как и для больших карточек, сделала контрастную зарисовку материалов карточки, чтобы лучше понимать вес элементов, насколько они привлекают внимание. Лучший вариант с точки зрения потребления контента: оцениваем заголовок и принимаем решение — карточка VC.ru, где самый контрастный заголовок.

Разбор по контрасту кратких карточек публикаций

Давайте уже переделывать, у конкурентов столько крутых фич!

Пока еще рано, но можем сформулировать предположения по улучшению:

  • Сделать заголовок крупнее, подчеркнем его контраст, так как он участвует в решении о прочтении
  • Расположить заголовок рядом с кратким описанием, чтобы принятие решения о прочтении стало более оперативным
  • Заменить иконку «Поделиться» на более узнаваемую, добавить выпадающее меню с вариантами: ссылка, соцсети и т. д.
  • Рейтинг сделать больше, с более интуитивными иконками: плюс, минус
  • Определиться в важности отображения статистики: количество комментариев, просмотров
  • Добавить эмоциональную окраску оценки статьи
  • Заменить дату публикации на «Прошло с даты публикации»

Обычный сценарий на этом этапе: идем пилить макеты на основе наших предположений.

Вас остановлю, сначала нужно проверить наши суждения, насколько они верны для ЦА. Для этих целей я решила провести интервью с аудиторией Harb, которая преимущественно формируется из разработчиков (при создании площадка позиционировала себя для этой аудитории), но сейчас публикации скорее подходят под более широкий профиль: ИТ-специалисты, цифровизация, технологии, дизайн.

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

  • Ищут ли материал через Ленту публикаций
  • Какой контент важен, как принимают решение: достоин ли материал прочтения
  • В какой ситуации и как попадают пользователи на площадку

Интервью было проведено с разработчиком, с руководителем разработки, DevOps-инженером, руководителем продукта и администратором SQL. Итоги:

  • Разработчики — основные потребители контента. Специалисты сферы ИТ, но не связанные напрямую с разработкой, редко посещают этот ресурс или вообще не заходят
  • Через Ленту ищут материал единицы. В основном заходят на статьи по рекомендации рабочих чатов
  • Пользователи только читают контент, не видят смысла в регистрации
  • Основное время чтения: перерывы в рабочем процессе
  • Самый лучший контент — переведенные зарубежные статьи, оригинального контента хорошего качества очень мало
  • Решение принимается на основе заголовков и первых абзацев
  • Для получения контента по рабочей специфике используют телеграм-каналы профильных специалистов (по большей части зарубежные)
  • Части респондентов важна публикация от компании, так как они наблюдают за ее деятельностью

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

Да когда макеты уже будут?

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

Варианты обновленных карточек

Выбрала 4 разных варианта, которые показались наиболее удачными. Провела интервью, показывая варианты карточек. Целью было по каждому варианту выяснить: что нравится, а что нет, какой из вариантов наиболее удачный. Несколько интересных заключений по итогу:

  • Рейтинг, количество комментариев и просмотров — бестолковая информация, пользователь на нее не смотрит
  • Часть пользователей раздражало изображение, которое доходило до краев карточки
  • У части пользователей обнаружился привычный паттерн расположения контента: заголовок, картинка, текст — другой вариант расположения им не нравился

Жизнь — тлен?

Нет, нужен еще один подход. Теперь есть дополнительная информация, которую применим к карточке товара, чтобы ее переработать. В итоге остановилась на таком варианте карточки, показываю в разрезе: было-стало.

Итог: было, стало

Почему именно так:

  • Наверху разместила только заголовок, интервью показало его первым критерием принятия решения о прочтении публикации. Увеличила шрифт заголовка для контраста
  • Хотела после заголовка разместить сразу текст, но при тестировании вариантов карточек выяснилось, что такой порядок привычен для тех, кто ориентирован на визуальную коммуникацию, а кому важен контент — есть режим краткой карточки
  • Сократила описание. Площадка специализируется на лонгридах, то есть пользователь в любом случае зайдет прочесть, если понравится заголовок и первое описание. Нет смысла давать более обширный текст
  • Добавлено название основного раздела статьи. Этот параметр больше носит бизнес-функцию, так как площадка сейчас позиционируется себя для ИТ-специалистов, но пользоваться ей в основном продолжают разработчики. Это разделение поможет лучше ориентироваться другим категориям пользователей, особенно если пользователь выбирает предпочтение тем. Еще параметр поможет в будущем формировать персонализированные рекомендации для постоянных читателей
  • Контрастный тег «Перевод», так как в интервью указали, что интересны статьи переводные, а остальные теги не так часто смотрят, больше ориентируются по заголовку
  • Дату публикации заменила на срок, не будем заставлять пользователя самостоятельно его вычислять
  • Рядом с автором закрепила место для обозначения компании, так как некоторые обращают на нее внимание, а раньше компания указывалась в общем пуле тегов
  • Убрала полностью блок со статистикой в карточке, так как при интервью с вариантами пользователи говорили, что на него не смотрят
  • Оставила две функциональные кнопки: «Добавить в избранное» и «Поделиться». Кнопка «Поделиться» теперь одна, но с расширенным функционалом (скопировать, соцсети, Telegram и т. д.). Исходя из интервью, пользователи делятся ссылками на статьи в рабочих чатах

Заключение

Учебные проекты и предлагаемые на курсах алгоритмы — это неплохо, они частично создают фундамент. Но реальность такова, что задачи намного разнообразнее, и шаблон тут не поможет. Нужно понимать: что делаешь, для чего , подбирать верные инструменты, которые сделают твою работу ценной. Хочу отметить один важный навык — способность оценивать собственные ресурсы сил и времени. На данном примере я взяла улучшение всего одного элемента системы, что заняло достаточно времени и сил. А что было бы, если взялась за редизайн всей площадки? Скорее всего, не стала бы делать такого исследования с интервью, просто сделала бы очередной новый клон более популярного ресурса, что не имело бы такой ценности.

0
4 комментария
Пуганный Аноним

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

Опубликовано 781 день назад.
Это какой год? Я знаю, что последняя версия фреймворка вышла в 2020м.

Когда хочется сделать не удобней, а просто не так, как было раньше - получается плохо. Ненавижу инстаграм за это. Смотришь фотки - а там 65 недель назад. Месяц-то это какой?

"Убрала полностью блок со статистикой в карточке, так как при интервью с вариантами пользователи говорили, что на него не смотрят"

Очень удобно глянуть, что статья болтается давно, но ее никто не читает, не комментит и два минуса стоят - значит не стоит даже описание читать.

Ответить
Развернуть ветку
Alexandra Freydlin
Автор

Это ваш опыт взаимодействия, который важен в контексте того продукта, для которого являетесь ЦА.
Про указание срока вместо даты. Я полностью не описывала, как этот функционал должен отрабатывать, так как эта не цель данной статьи. Тут можно отдельное исследование проводить и строить предположения о том, как лучше его указывать (первое, что пришло на ум):
- указывает срок только в днях
- указываем срок по принципу: прошло лет, месяцев, дней
- указываем для интервала до месяца в днях, а в остальных случаях указываем дату публикации
Рассуждать можно долго, но лучше всего показывать варианты и смотреть, как они отрабатывают на ЦА, фиксировать результаты и на их основе принимать решения.

Ответить
Развернуть ветку
Пуганный Аноним

Нет, это все разговоры в пользу бедных. Ничего лучше, чем конкретная дата еще никто не придумал. Я помню, что я делал первого января 2022года, но я понятия не имею че было 195 дней назад.

В результате опросов 80% россиян поддерживают войну. Не уверен, что даже 5% из них, совершили что-то ужасней кражи сухариков в школьной столовой, при этом все эти люди каждый день видят кадры с убитыми детьми и говорят - "так им, фашистам". Наверняка 80% из поддерживающих вообще насрать что поддерживать и как жить, дата там показывается, месяц или таймстамп в миллисекундах, во дворе толчок или дома.

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

Ответить
Развернуть ветку
Olga Kostyanaya

По дате соглашусь. Лучше писать число, когда было опубликовано.

Ответить
Развернуть ветку
Читать все 4 комментария
null