UX-патруль

UX-патруль, выпуск одиннадцатый: Новый редактор DSGNERS и сравнение с VC

DSGNERS — аналог VC, платформа от дизайнеров и для дизайнеров. Недавно ребята обновили свой редактор, чтобы аудитория чаще выпускала статьи. Но стал ли сайт от этого лучше или VC так и останется победителем среди статейных ресурсов? В сегодняшнем патруле обсудим это и раз и навсегда выберем победителя.

This browser does not support the video element.

Всем привет, на связи UXART, где мы ежедневно делаем интернет удобнее. Давние читатели нашего аккаунта знают, что наша главная рубрика — UX-патруль. Но для начала небольшой дисклеймер: UX-патруль — описание личного пользовательского опыта. Без метрик, исследований, т.к. доступа к ним у нас нет. Просто обратная связь и гипотезы по интерфейсам)

И этот выпуск стал по-своему уникальным. Раньше мы долго собирали инфу, рассматривали все детали в интерфейсах и проходили по пользовательским сценариям, после чего собирали статью и сразу постили её на VC.

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

Для начала, а что такое DSGNERS и почему они решили изменить редактор статей?

DSGNERS, судя по результатам выдачи в поиске — онлайн-платформа для дизайнеров, которые идут в ногу со временем — дизайнерс, дизигнерс. (если что, плагин выдал именно такое описание, мы ничего не меняли и не добавляли)

DSGNERS — классический статейный ресурс. Но главное отличие от того же VC заключается в том, что здесь собрана конкретная аудитория дизайнеров. Именно они наполняют портал контентом, общаются в комментах и ищут себе единомышленников.

А как публиковать все эти материалы?

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

Сейчас мы находимся на VC — таком же статейном ресурсе, но с большей аудиторией. И в отличие от DSGNERS здесь нет четкой ЦА дизайнеров. Этой платформой мы пользуемся на ежедневной основе и успели изучить все её плюсы и минусы)

Поэтому давайте сравним два статейных сервиса, на которых люди выпускают контент и посмотрим, кто лучше реализовал свой функционал.

Главная

Цель главной страницы на любом статейном ресурсе заключается в том, чтобы читатель в первые секунды заинтересовался контентом, который ему предлагают. Это может быть выполнено разными способами, но в основном это реализуется засчет «умной ленты», которая учитывает ваши интересы.

Насколько мы понимаем, основной упор на VC и DSGNERS направлен на популярные статьи, которые «прямо сейчас» лайкают и обсуждают большое количество аудитории. Плюс это или минус сказать трудно, это скорее один из способов вовлечения новой аудитории.

Также важно указывать категории контента, чтобы люди точечно смогли выбрать то, что им точно понравится. Например, на VC это выводится в верхний левый угол статьи и называется «подсайтом», на DSGNERS категории выводятся тегами в нижней левой части статьи.

И работает это не только со статейными сервисами, так что запомните и используйте)

Что мы видим на главной VC?

В центре экрана два основных блока — самые популярные статьи за выбранную дату и популярные статьи прямо сейчас.

В правой — комментарии, они обновляются в режиме реального времени, а слева — выбор категории и аккаунты, на которые вы подписаны. Если они, конечно есть)

В верхней левой части по классике расположился логотип, а в центральной — поиск и не самая заметная кнопка «+ Создать».

И вот это может быть моей личной болью, но когда я впервые зашел на VC, просто не обратил внимание на эту кнопку. Поэтому раз за разом переходил в аккаунт и создавал статьи там. Кто-нибудь еще сталкивался с такой проблемой? Напишите об этом в комментариях.

P.s. У автора статьи до сих пор старый дизайн VC, поэтому многие моменты в редизайне могли измениться. Как только мы получим доступ к редизайну, сделаем UX-патруль нового VC

А как же выглядит DSGNERS?

Центральная часть в той или иной степени похожа на VC. Только вот сверху мы видим не «популярные», а «свежие» статьи.

Слева пустое пространство, а справа еще одна реклама и комменты в режиме реального времени.

Сверху категории и яркая кнопка «+ Добавить», которая сильно контрастирует на фоне главного экрана.

И вот мы, как авторы, решаемся создать статью на этих ресурсах и нас сходу переносят в редактор. Или нет?

Пред редакторное меню

До этапа написания своего мега-популярного текста остается совсем чуть-чуть. Вы нажимаете на кнопку «добавить»/«создать» и вас перемещает… а никуда вас не перемещает.

Что на VC, что на DSGNERS пользователю предлагают выбрать, что же он захочет сделать дальше.

Здесь у нас выбор между «объявлением» и «записью». И если последнее это привычная статья, которая в действительности перемещает вас в редактор, то первое у нас просто не работает. Сколько бы мы не кликали на эту кнопку, просто ничего не происходит.

Может, эта проблема возникает только у нас, но в момент написания первой версии статьи (март) «объявления» также не работали. Что, на самом деле, грустно.

This browser does not support the video element.

Старый DSGNERS

DSGNERS, напротив, решил что одной-двух категорий будет недостаточно. Поэтому нам предлагают неплохой такой список вариантов.

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

Но есть одно большое НО. Вы же не думаете, что эти типы контента номинальны и не имеют разные критерии для постинга?

На простом примере:

(Слева чеклист статьи, а справа — новости)

Этот чеклист находится в правой части редактора. И может показаться, что он советует вам, как правильно оформить статью. Но на самом деле это внутреннее ограничение редактора)

Ваш материал просто не пропустят, если вы не выполните все условия.

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

Вот почему я не могу написать новость в общем редакторе и в нем же указать, что этот материал относится к блоку «Журнал—новость»?

В случае с VC пользователь сходу может написать статью и выпустить её. Все процессы выбора вшиты в сам редактор (здесь речь о подсайте).

У DSGNERS есть выбор типа контента, но какую роль он играет на стартовом экране? Гораздо удобнее было бы вшить это в сам редактор, чтобы пользователь не совершал лишние клики до написания своей работы.

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

Редактор

Это краеугольный камень сегодняшней статьи. Именно этот блок мы передали ребятам из DSGNERS до постинга статьи. Поэтому кроме сравнения нынешнего редактора с VCшным мы еще и глянем, что было до нашего текста и как ребята справились.

Пустой редактор

Старый DSGNERS

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

Ниже вы вписываете название статьи и выбираете темы (до 3-х), после чего можете приступить к написанию материала. И так выглядит оформленная статья.

Новый DSGNERS

Единственное изменение, которое мы заметили — новый блок с возможностью выбрать «лэйбл» статьи. Не музыкальный, а скилловый. Если вы понимаете, что статья подойдет экспертам, то выбирайте соответствующий пункт.

Но зачем и кто это будет проверять? Модерация? Или эта возможность держится на честном слове? Странное решение, словно легче выбрать «всем» и не думать о том, кому этот материал будет полезен.

Также вопрос, а будет ли как-то ограничиваться показ этой статьи «не-экспертам»?)

На VC пустой редактор больше похож на чистый лист. Единственное, что видит пользователь — заголовок, который ему нужно придумать и прописать.

И так выглядит оформленная статья:

И вам может показаться, что здесь нет никаких проблем. Но Дьявол, как известно, кроется в деталях. У новых пользователей могут возникнуть проблемы как с VC, так и DSGNERS. Давайте сразу разберем эти функциональные недостатки:

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

This browser does not support the video element.

Оказывается, что можно нажать на Enter и тебя перенесет в основной текстовый блок. Или же кликнуть на него мышкой. Это не самый большой минус платформы, но вот DSGNERS гораздо понятнее указали базовые интерактивные области.

На самом деле, можно всего лишь изменить одну деталь, которая сделает редактор интуитивно понятнее — слово «текст» с полупрозрачностью, как это сделано на DSGNERS.

Не все поле ввода в редакторе VC кликабельно. Вы можете нажать на центральную часть, уйти чуть влево и вправо. Но если будете нажимать мышкой ниже, то редактор перестанет воспринимать ваши клики.

This browser does not support the video element.

Старый DSGNERS

Ты не можешь перейти от заголовка в основной текстовый блок по нажатию на Enter. В старом редакторе Tab работал через раз.

Здесь даже не нужно добавлять видео. Это просто не работает. Вместо перехода в нижнюю панель, мы добавляем абзац к заголовку. Лучше дать пользователям возможность перейти на быструю клавишу, чем просить их кликать мышкой. В случае добавления нового абзаца всегда можно использовать комбинацию «shift+enter».

Update: в новой версии переход от заголовка к тексту по нажатию «enter» все также не работает. Теперь при нажатии на Tab вас сначала перекинет к выбору «аудитории», после редактор чуть-чуть зависнет и только потом вы перейдете в основной блок.

Обложка

Старый DSGNERS

Давайте еще раз взглянем на пустой редактор DSGNERS:

Если приглядеться, можно заметить, что блок с обложкой содержит четкую формулировку:

Оптимальные размеры 725 x 322px, 1450 х 644px, 2900 х 1288px

Важно здесь слово «оптимальные». Не «строгие», не «обязательные», именно «оптимальные». Разберемся с этим термином, воспользовавшись гуглом.

Наиболее благоприятный, но не строгий или обязательный, правильно? Однако, на самом деле, если пользователь решит добавить «не оптимальное» изображение, редактор просто не пропустит его и выдаст одну из нескольких ошибок, например:

А значит, что существует проблема с формулировкой, из-за которой пользователь обязательно совершит несколько лишний действий.

Исправить это можно двумя способами:

Заменить формулировку с «оптимальный» на «обязательный» или же вовсе отказаться от термина;
Позволить пользователям загружать изображения с их разрешением, оставив формулировку прежней.

Первый вариант выглядит проще как для пользователей, так и для самого DSGNERS.

Во втором случае картинка все равно будет масштабироваться до разрешения платформы, поэтому пользователям также придется совершать лишние клики. Но тут они будут чувствовать свободу и «сами будут виноваты», если «забудут» прочитать рекомендацию.

Новый DSGNERS

Нас услышали)

Формулировка изменена, теперь пользователям говорят о «минимальном разрешении», а оптимальное вынесено за скобки.

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

Давайте также попробуем поставить на обложку два изображения:

Неподходящее по минимальным размерам:

Неподходящее по оптимальным размерам:

Все работает как часы. Теперь перейдем к другим визуалам.

VC, конечно, сильно опережает DSGNERS в плане обложек. Во-первых, вы можете поставить все, что вашей душе угодно, а во-вторых, на обложку можно поставить видос файлом, ссылку на видос с Ютуба или Гифку.

This browser does not support the video element.

Но есть у VC и минусы в этой «свободе». Чтобы узнать какой формат изображения и размер встанет адекватно в статью, приходится гуглить или пробовать самому загружать визуалы и смотреть, как это выглядит.

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

В итоге мы выяснили, что VC не может включать на автоплее видосы с градиентом. Мы поменяли цвет на статичный фиолетовый и все заработало.

P.s. Эту проблему до сих пор не пофиксили

This browser does not support the video element.

Также у новых пользователей может возникнуть проблемы с тем, как вывести изображение на обложку. Если на DSGNERS этому уделен отдельный блок, то на VC пользователю нужно выбрать визуал и отметить его «звездочкой».

This browser does not support the video element.

Фото, видео и GIF

Старый DSGNERS

Какая статья считается хорошей? Та, где текст написан понятным языком и попадает под целевую аудиторию. Ну и конечно есть фоточки и видосы, которые дополняют сторителлинг.

И если с первым пунктом автор DSGNERS может справиться, то на этапе добавления фото и видео могут возникнуть проблемы.

Чтобы добавить фото, вам нужно создать дополнительный блок и выглядит он так:

Здесь не написаны рекомендации, а значит, вы вольны загружать любое изображение или гифку, верно? Не совсем.

Фотографии разного разрешения действительно загружаются и масштабируются по формату самого редактора. Это огромный плюс и стоит отдать должное разработчикам.

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

А что с размером файла?

Да, вы все правильно поняли. Та же проблема, что и c обложками.

Только в этом случае мы заранее не знаем «оптимальную» размер у)

Если вы захотите загрузить гифку или изображение больше 5 мб вам не преждевременно, но скажут уменьшить её вес. Почему не сказать об этом заранее? Вот и у нас тот же вопрос.

Новый DSGNERS

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

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

Но как это работает? Ответ одновременно простой и странный. Во время выбора блока черным по белому сказано «Изображение или GIF», но последняя часть в самом редакторе просто пропадает)

С VC таких проблем нет. Ради эксперимента взял гифку весом в 10 и 85 мегабайт. Первая загрузилась почти моментально, вторая грузится прямо сейчас (примерно 2 минуты прошло)

(спустя еще 3 минуты большая гифка загрузилась. 5 минут и 85 мегабайт в вашей статье)

— Но зачем нам гиф, если мы можем загружать видео! — скажет умный пользователь интернета.

Видео

Старый DSGNERS

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

This browser does not support the video element.

Здесь может быть только одно решение — добавить возможность загружать видео напрямую. Его также можно ограничить, как это уже сделано с обложкой и статикой, но перед этим стоит поменять формулировку)

Новый DSGNERS

Ничего не изменилось, видосы все также нельзя загружать напрямую

А теперь попробуем взять классику Never Gonna Give U Up. Получится ли у нас загрузить 3,5 минуты качественно контента?

This browser does not support the video element.

Да, да и еще раз, да. Но стоит отметить, что периодически VC просто вылетает на этом этапе и останавливает загрузку.

Ну и если вы не хотите загружать видос напрямую, так же, как и на DSGNERS вы можете просто вставить ссылку.

Как добавить фото или GIF без блоков?

Эта функция есть на VC и на многих других популярных статейных форумах. Но как это работает?

Ты просто выбираешь фото/gif и перетягиваешь в редактор. Он сам добавляет фото-блок и масштабирует изображение:

This browser does not support the video element.

Старый DSGNERS

И как это происходит на DSGNERS?

This browser does not support the video element.

(правильно, никак:( )

На новом DSGNERSничего не изменилось(

Мелкие баги

Ну и как же без маленьких, но порой сильно раздражающих багов)

Давайте сходу — с момента нашего написания DSGNERS ни один из них не пофиксили, поэтому вот списочек с видосами, а потом глянем, как это работает на VC.

Интересный баг, вы можете создать два текстовых поля подряд. И если вы сможете повторить этот сценарий, эти блоки будут недоступны. Фиксится удалением одного из полей или попыткой добавить новый между «склеенными»

This browser does not support the video element.

При нажатии на «Enter» создается новый текстовый блок, а страница слегка лагает

This browser does not support the video element.

При быстром создании нескольких текстовых блоков подряд, редактор ломается и созданный текст нельзя редактировать или удалять. Также нельзя добавлять новые блоки между «сломанными» элементами.

This browser does not support the video element.

При нажатии «Enter» в блоке «цитаты» создается новый абзац, а пользователя не переходит на «автора цитаты» (Через «Tab» работает с переменным успехом)

This browser does not support the video element.

В опросах «Enter» вообще не работает. Ни перехода, ни абзаца (Через «Tab» работает с переменным успехом)

This browser does not support the video element.

Текстовые блоки добавляются до бесконечности и не ломаются

This browser does not support the video element.

Страница при добавлении нового блока не лагает

This browser does not support the video element.

Ничего не ломается

(а тут даже и показывать нечего)

Цитаты работают с Enter, если вы не ввели текст в первый блок, но даже так можете нажать Tab и вас без проблем перенесет на автора. Опросы работают и с введенным и без введенного текста

This browser does not support the video element.

И на этом предлагаем заканчивать сегодняшний UX-патруль. Изначально хотели сравнить оба сервиса по всем функциям, которые могут быть интересны пользователям, но поняли, что один лишь редактор по тексту вышел в 2500+ слов)

Если вам интересно и вы бы хотели прочитать все отличия DSGNERS и VC, пишите об этом в комментариях и мы сделаем полноценный разбор.

Да, DSGNERS это относительно новая платформа, которая прямо сейчас активно развивается. Но без таких текстов это развитие будет проходить сильно медленнее.

Поэтому надеемся, что сегодняшнюю статью увидят топы DSGNERS и сделают свой сервис лучше.

И, кстати, некоторые пользователи уже начали получать доступ к новому дизайну VC и как только мы попадем в бета-тестирование, напишем UX-патруль на нашу любимую платформу)

Подписывайтесь на наш тг-канал, там много полезного и развлекательного контента, так что точно не заскучаете, пока ждете новую статью)