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

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

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

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

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

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

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

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

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

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

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

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

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

Habr

Хорошо:

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

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

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

VC.ru

Хорошо:

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

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

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

Medium

Хорошо:

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

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

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

Pikabu

Хорошо:

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

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

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

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

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

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

Habr

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

VC.ru

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

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

Medium

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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