Дизайн одного элемента системы или «можно ли улучшить карточку публикации?»
Сейчас очень много разнообразных курсов по дизайну: 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 и т. д.). Исходя из интервью, пользователи делятся ссылками на статьи в рабочих чатах
Заключение
Учебные проекты и предлагаемые на курсах алгоритмы — это неплохо, они частично создают фундамент. Но реальность такова, что задачи намного разнообразнее, и шаблон тут не поможет. Нужно понимать: что делаешь, для чего , подбирать верные инструменты, которые сделают твою работу ценной. Хочу отметить один важный навык — способность оценивать собственные ресурсы сил и времени. На данном примере я взяла улучшение всего одного элемента системы, что заняло достаточно времени и сил. А что было бы, если взялась за редизайн всей площадки? Скорее всего, не стала бы делать такого исследования с интервью, просто сделала бы очередной новый клон более популярного ресурса, что не имело бы такой ценности.
"Дату публикации заменила на срок, не будем заставлять пользователя самостоятельно его вычислять"
Опубликовано 781 день назад.
Это какой год? Я знаю, что последняя версия фреймворка вышла в 2020м.
Когда хочется сделать не удобней, а просто не так, как было раньше - получается плохо. Ненавижу инстаграм за это. Смотришь фотки - а там 65 недель назад. Месяц-то это какой?
"Убрала полностью блок со статистикой в карточке, так как при интервью с вариантами пользователи говорили, что на него не смотрят"
Очень удобно глянуть, что статья болтается давно, но ее никто не читает, не комментит и два минуса стоят - значит не стоит даже описание читать.
Это ваш опыт взаимодействия, который важен в контексте того продукта, для которого являетесь ЦА.
Про указание срока вместо даты. Я полностью не описывала, как этот функционал должен отрабатывать, так как эта не цель данной статьи. Тут можно отдельное исследование проводить и строить предположения о том, как лучше его указывать (первое, что пришло на ум):
- указывает срок только в днях
- указываем срок по принципу: прошло лет, месяцев, дней
- указываем для интервала до месяца в днях, а в остальных случаях указываем дату публикации
Рассуждать можно долго, но лучше всего показывать варианты и смотреть, как они отрабатывают на ЦА, фиксировать результаты и на их основе принимать решения.
По дате соглашусь. Лучше писать число, когда было опубликовано.