Дизайн одного элемента системы или «можно ли улучшить карточку публикации?»
Сейчас очень много разнообразных курсов по дизайну: 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 и т. д.). Исходя из интервью, пользователи делятся ссылками на статьи в рабочих чатах
Заключение
Учебные проекты и предлагаемые на курсах алгоритмы — это неплохо, они частично создают фундамент. Но реальность такова, что задачи намного разнообразнее, и шаблон тут не поможет. Нужно понимать: что делаешь, для чего , подбирать верные инструменты, которые сделают твою работу ценной. Хочу отметить один важный навык — способность оценивать собственные ресурсы сил и времени. На данном примере я взяла улучшение всего одного элемента системы, что заняло достаточно времени и сил. А что было бы, если взялась за редизайн всей площадки? Скорее всего, не стала бы делать такого исследования с интервью, просто сделала бы очередной новый клон более популярного ресурса, что не имело бы такой ценности.