UXART

Кто мы?

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

Работали с ТЕХНОНИКОЛЬ, ЕВРАЗ, РОСГОССТРАХ, РИВ ГОШ, СБЕР и многими другими. Сейчас активно занимаемся редизайном своего сайта, но с частью кейсов вы можете ознакомиться на текущей версии (да, это небольшой анонс скорого редизайна, вы первые узнали об этом)

Что за проект?

«Бизнес-симулятор» или «ТЕХНОМАТРИЦА» от ТЕХНОНИКОЛЬ (далее ТН) — проект, в котором вам нужно будет вжиться в роль менеджера по продажам ТН и от лица сотрудника компании отвечать на вопросы заказчиков. Концепция идеально подходит тем, кто хочет прокачать свои знания и навыки в общении с клиентами.

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

Основной акцент поставлен на игровой формат взаимодействия пользователей и NPC (они же non-player character или же неигровые персонажи). Пользователи в ходе игры могут научиться общаться с клиентами и лучше понимать специфические запросы, которые нужно решить.

Для тех, кого пугает большое количество букв — можете посмотреть видос, в котором мы постарались рассказать всю информацию о ТЕХНОМАТРИЦЕ с монтажиком, вставками и прочим:

Задача

В первую очередь ТЕХНОМАТРИЦА создавалась для менеджеров по продажам ТЕХНОНИКОЛЬ. Поэтому нам нужно было придумать и реализовать проект, который с первых секунд заинтересует юзеров и будет мотивировать их продолжать пользоваться сервисом.

Мы решили воспользоваться форматом геймификации и воплотить его, как новый формат обучения. Во время работы над проектом нам нужно было разработать сложный интерфейс для ТЕХНОМАТРИЦЫ, который был бы понятен каждому, прост в управлении и имел мотивационную систему.

Работа над проектом

Работу поделили на 5 основных этапов:

— Аналитика

— Высокоуровневые прототипы

— Детализированные прототипы

— Итоговый дизайн хаба «ТЕХНОМАТРИЦЫ»

— Итоговый дизайн второстепенного функционала «ТЕХНОМАТРИЦЫ»

О каждом подробнее ниже.

Аналитика

В начале мы разработали майндмап, на котором показали пользовательский путь потенциального игрока. По задумке после регистрации юзера встречает главное меню, которое и является ключевым в данном проекте. Это место, которое далее мы будем называть «хаб», переводит игрока на активные события в ТЕХНОМАТРИЦЕ.

Например:

— Карта это основная игровая зона, где происходит непосредственный диалог с «заказчиком»

— Компьютер имеет разветвление: игрок либо заходит в чат с заданиями, либо переходит в справочник для изучения материала

Далее мы начали изучать конкурентов. Выяснили, что аналогов у ТЕХНОМАТРИЦЫ в том виде, который мы хотели реализовать, нет. Поэтому мы решили пойти другим путем — проанализировать игровую индустрию и механики, которые используют разработчики для мотивации игроков оставаться в проекте.

Мы выбирали между RPG (role-play game) и Visual novel.

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

Второй проще как в реализации, так и в понимании пользователя. Системы уровней и улучшения персонажа нет. Остается только сюжет, на который игрок влияет. Здесь упор идет именно на диалоги с персонажами и сотнями рутов (вариантов ответвлений основной истории).

В нашем случае ТЕХНОМАТРИЦА — обучение сотрудников и простых пользователей информации о продуктах ТЕХНОНИКОЛЬ. Поэтому жанр RPG попросту не подходит. Сделали выбор в пользу визуальных новелл.

После выбора начали изучать игровые механики и выделили основные паттерны:

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

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

— Каждый ответ влияет на финал диалога/игры.

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

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

Так и в ТЕХНОМАТРИЦЕ, если игрок ошибется и проиграет, всегда есть возможность перепройти уровень.

— По мере прохождения герой получает валюту/одежду/навыки. Мы решили остановиться на двух типах валюты — деньги и рейтинг.

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

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

За систему удержания выбрали подарки и рейтинг игроков. За победу участники получают баллы и валюту:

— Баллы отвечают за положение игроков в таблице лидеров

— За валюту пользователи могут купить косметические предметы в свой хаб (он же офис)

Предусмотрели возможность обновления как деталей элемента (кресло, стол, декор и т.д.), так и смены помещения в целом — переехать из хрущевки в «Москва-Сити». Суммарно задизайнили 4 варианта главного экрана. Пользователь может переехать в новый офис, если заработает достаточное количество валюты.

«ТЕХНОМАТРИЦА» делится на две большие составляющие — главный экран, который представляет основной геймплей для пользователей и второстепенный функционал, отвечающий за косметическую составляющую.

Так как акцент поставлен именно на игровой процесс, в первую очередь мы решили прототипировать «хаб» и вытекающие игровые элементы.

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

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

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

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

Концепция «хаба» на этапе высокоуровневых прототипов заключалась в следующем:

— В центре пользователь видит монитор с новыми заданиями

— В левой части игрового поля находится справочник с полезной информацией

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

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

В профиле игроки заполняют свою личную информацию (ФИО, телефон, email), могут изменять аватарку и рамку, а также отслеживать «статус».

На этом этапе мы начали тестировать разные гипотезы и выстраивать общую стилистику для ТЕХНОМАТРИЦЫ. Решили, что перейдя в «монитор» пользователь сначала выходит на карту заданий, где сможет найти понравившийся заказ и перейти в чат.

Все взаимодействие с заказчиком будет проходить именно в этом чате.

Справочник — место, где пользователи могут выучить основную информацию о продукции и материалах ТЕХНОНИКОЛЬ. Так как в первую очередь ТЕХНОМАТРИЦА — про обучение, мы постарались составить удобный и понятный справочник с возможностью поиска.

С диалоговым меню поступили просто — взяли привычные паттерны социальных сетей и реализовали его во внутреннем функционале ТЕХНОМАТРИЦЫ. Таким образом слева пользователи видят все чаты, а также балл, который был получен за задание. А при клике на собеседника открывается полный диалог с возможностью общения.

И вот как в совокупности выглядел главный экран:

После реализовали кликабельный прототип, в котором показали основной функционал «ТЕХНОМАТРИЦЫ» и продемонстрировали игровую часть. Если вам интересно попробовать этот прототип, пишите в комментарии и мы оставим ссылку.

Итоговый дизайн «ТЕХНОМАТРИЦЫ»

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

Например, ранее мы предполагали оставить справочник в хабе, но в итоге переместили его в отдельное меню для оптимизации «рабочего места».

Обсудим основной игровой процесс «ТЕХНОМАТРИЦЫ»:

Перед началом игры пользователь должен перейти на карту и выбрать задание. Они имеют три уровня сложности: «низкий», «средний», «трудный». Отличаются как вопросами заказчика, так и валютой/рейтингом, который пользователь получит после успешного выполнения задания.

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

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

Рабочая переписка выполнена в формате мессенджера. В левой части список всех чатов, в правой — диалог с конкретным заказчиком.

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

А общаться с заказчиком можно при помощи заранее прописанных вариантов ответа.

Однако, стоит помнить, что «ТЕХНОМАТРИЦА» похожа на визуальные новеллы. А значит, что вы можете выбрать не тот вариант, из-за чего потеряете деньги и рейтинг. К каждому ответу стоит подходить ответственно и не отвечать лишь для того, чтобы ответить)

Также сделали обучение по канонам любых игр. В начале игрока приветствует гид, который рассказывает о том, как играть в «ТЕХНОМАТРИЦУ».

Итоговый дизайн второстепенного функционала «ТЕХНОМАТРИЦЫ»

Второстепенный функционал — экраны, которые напрямую никак не влияют на игровой процесс ТЕХНОМАТРИЦЫ. К ним относятся:

— Рейтинг — здесь пользователь может увидеть суммарное количество баллов и отследить свою позицию

— История баланса и достижения — отслеживание времени, денег и рейтинга по завершенным проектам

— Профиль — личная информация пользователя. В магазине игроки могут купить и изменить свою аватарку

— Справочник — основная информация по категориям ТЕХНОНИКОЛЬ

— Магазин — одна из главных косметических функций. Здесь пользователи могут полностью обновить свое «рабочее пространство», начиная от стульев до переезда в «Москва-сити»

А также отрисовали более 40 наград в 3D и 15+ аватарок в 2D.

Также во время работы над проектом, отрисовали Лендинг и рассылки для менеджеров.

А если вы сами хотите попробовать себя в роли сотрудника ТН и поиграть в ТЕХНОМАТРИЦУ, вот ссылочка: https://academy.tn.ru/tnmatrix/ . Для игры нужно будет зарегаться на сайте, но это, я думаю, вы и сами понимаете)

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

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

И вот теперь точно заканчиваем. По классике VC, советуем подписаться на наш телеграм канал, где мы выпускаем много контента по дизайну и не только: https://t.me/konakov_blog

Всем спасибо, с вами был редактор UXART, до скорых встреч!

P.s. Это первый кейс нашего редактора, так что поддержите его в комментариях, если статья понравилась вам. Давайте сделаем его день приятнее)

Всем привет, на связи студия интерфейсов UXART, где мы ежедневно делаем интернет удобнее.

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

Поэтому предлагаем прочитать статью до конца. За клавиатурой — постоянный редактор UXART. Если захотите прочитать инфу про редактуру и прочее, велком ин май ченнел, ну а мы начинаем :)

Типографская раскладка

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

По сути, это небольшой чит, который позволяет вам печатать специальные символы, используя комбинации клавиш. Например, многие знают, что “” и «» — это два разных типа кавычек. Мы в UXART чаще всего используем именно «».

Почему эти кавычки правильные, а “” нет — можно почитать в интернете. Но это сейчас не так важно. Важно то, что такие кавычки делаются при сочетании клавиш «r.alt+б» и «r.alt+ю».

Кроме того, в раскладке Ильи Бирмана есть и другие специальные символы, которые помогут вам при создании правильных текстов.

Скачать раскладку можно тут

Название проекта и обложка

Поскольку это наш гайд и он в первую очередь разрабатывался для внутренних работ, некоторые главы статьи будут посвящены локальным правилам. Правильны они или нет — судить сложно. Но мы работаем так, и это устраивает нас, Артёма Юрьевича (нашего CEO) и, что самое главное, заказчиков.

Мы не утверждаем, что вам обязательно нужно делать всё именно так. Но посмотреть, подумать и решить, применять ли эти знания, — пожалуйста.

Итак, здесь у нас 4 важных пункта.

Внутренние файлы

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

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

• логотип заказчика,

• название проекта,

• метка «внутренний» или «релиз»,

• логотип UXART,

• тэг (проектирование, дизайн или аналитика).

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

Клиентские файлы (продакшн)

Клиентам открывается доступ к таким файлам для просмотра. В них необходимо соблюдать порядок и не хранить множество устаревших версий макетов.

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

Как задать обложку проекту?

• Поместить фрейм рядом сUI-kit (о нем поговорим ниже) нужного проекта.

• ПКМ по фрейму, выбрать пункт «Set as thumbnail».

  Названия файлов

Файлы фигмы следует называть по следующему принципу:

Название компании. Название проекта. Внутренний (если файл не клиентский)

Если для одной компании делается несколько проектов, стоит соблюдать стиль написания названия компании (с большой или маленькой буквы, с сокращениями или без).

Закономерный вопрос, который может возникнуть: зачем мне это использовать?

Ответ прост — так вы сможете систематизировать все свои работы. При правильном нейминге файлов в будущем у вас не возникнет ситуации: «А где и когда я делал именно этот проект?».

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

Или из наболевшего — многие дизайнеры в своих портфолио оставляют «Untitled» файлы. Что это и зачем оно нужно — нам не понять.

Любая ваша работа может быть использована повторно в будущем. Чтобы не тратить время на её поиски, называйте файлы правильно.

Компоненты

Что надо компонентить?

Любые элементы, которые повторяются минимум на двух страницах проекта (сайта или приложения), либо более 3 раз на одной странице. Кнопки, иконки, карточки, переключатели, инпуты и т.д.

Текстовые элементы отдельно в компоненты не добавляем, для них используются стили.

Как компонентить?

Простые компоненты

Если элемент никак не изменяется на протяжении всего проекта (одинаковый цвет, размер, набор элементов внутри), то просто нажми сочетание клавиш ctrl(cmd)+alt+k.

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

Компоненты со множеством состояний

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

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

Фигма имеет возможность создания компонентов с параметром true/false. Такую функцию можно использовать для быстрого скрытия или отображения какого-либо элемента в компоненте.

Например, создадим компонент кнопки с двумя вариантами: один с иконкой, другой без.

Название первого варианта: Property 1=fill, Right_icon=True

Название второго варианта: Property 1=fill, Right_icon=False

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

В результате мы сможем «включать» или «выключать» иконку в кнопке простым переключателем:

Важно! Иконка в кнопке так же должна быть множественным компонентом, чтобы её можно было менять на любую другую.

Таких переключателей для одного компонента можно добавить несколько (например, иконки слева и справа).

Текстовые стили

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

Основные правила

Важно не создавать множество стилей, которые имеют минимальные отличия (например, 1 pt в размере кегля). Для большинства проектов достаточно 4-5 стилей заголовков и 4-5 стилей основного текста.

Так же не стоит использовать большое количество разных значений интерлиньяжа. Для большинства проектов хватает двух значений — 130% для небольшого по объему текста и 150% для крупных абзацев.

Как создавать стили

Названия для стилей стоит задавать следующим образом: «Headers / H1», «Headers / H2», «Text / 18_150», «Text / 18_130» и т.д. Указывая названия через слэш, мы получаем папки, в которых удобно искать нужный стиль.

Все текстовые стили должны быть представлены в UI-kit и цветовых стилях.

Цветовые стили

Названия для цветовых стилей следует задавать следующим образом: «ui / green», «ui / red», «ui / grey», «text / black», «text / gray». Задавая названия через слэш, мы получаем папки, в которых удобно находить нужный цветовой стиль.

UI-kit

Что это такое

В UIi-kit мы собираем все элементы, которые повторяются как минимум на двух страницах проекта. Шапка, подвал, кнопки, иконки, карточки и т.д.

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

Как собрать кита 🐳

UI-kit создаётся на первой странице в файле фигмы. Весь дизайн или прототипы располагаются ниже.

Элементы в UI-kit добавляются постепенно, по ходу работы над дизайном. После утверждения главной страницы проекта обычно сразу можно вынести основные составляющие (цвета, типографика, кнопки ...).

При этом стоит группировать элементы относительно их функционала:

• цветовая палитра (основные и вспомогательные цвета);

• типографика (набор стилей для заголовков и основного текста);

• элементы управления (кнопки, контролы, переключатели, табы ...);

• формы (инпуты, выпадающие списки, области загрузки файлов ...);

• иконки;

• элементы страниц (карточки, блоки меню, таблица ...);

• и т.д.

Для каждой группы элементов создаётся свой фрейм.

Порядок в проекте

Названия фреймов и групп

Важно задавать актуальные названия. На странице не должно быть групп с названием «Group 34243».

Внутри фрейма названия групп и других фреймов пишутся на английском языке с маленькой буквы (прокачивай свой английский 🙂).

Названия страниц пишутся на русском языке, чтобы клиентам было удобнее ориентироваться.

Структура проекта

Для большинства проектов в фигме мы используем следующую структуру:

• UI-kit

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

• 🗄️ Архив. На эту страницу помещаются устаревшие варианты дизайна страниц. В этом разделе так же важно хранить порядок. Варианты дизайна, которые относятся к одной странице или разделу, необходимо располагать рядом.

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

Подписывайтесь на наш телеграм-канал, чтобы не потерять нас на просторах интернета.

С вами был редактор прекрасной студии интерфейсов UXART, до скорых встреч!

В роли ведущего выступал Артем Конаков, CEO UXART и Сорокин Никита, редактор UXART

В роли приглашенного гостя — Богдан Гончаренко, основатель spreent.academy

Высшее образование — круто

Получилось так, что у меня когда-то появился компьютер.

Я что-то разбирался, ковырялся в нем и подумал — буду программистом

И соответственно пошел на информационные системы. Учился в колледже и закончил его за 3 года. Вышку так и не получил, так как рано пришлось начать работать.

Но сейчас я считаю, что это ошибка выжившего

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

Я рассуждал на эту тему и вот что понял. У меня были примеры знакомых, которые учились по обмену в западных институтах. И, соответственно, когда я получил 5 год опыта работы, они все еще учились.

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

И дальше им намного проще расти. Поэтому, если есть вариант пойти на вышку — то идите.

Совмещал учебу и фриланс

После первого курса попал на стажировку в азиатский газопровод. Зарплату мне платил из кармана директор департамента, т.к. официально не мог (Богдану на тот момент было 15 лет).

И дальше они меня взяли, я рисовал в фотошопе аватарки, баннеры и прочее. В определенный момент они мне говорят:

«Нам надо сделать дизайн, ты же дизайнер?»

А я ни**ра не дизайнер. У меня из опыта — 100$ на 3D модели, пара аватарок за копейки и прочее. И это был мой первый опыт. Он начался с интранета.

Мы сделали в фотошопе дизайн интранета. Абсолютно у***щный, страшный, всратый

И тогда я понял, что стать программистом у меня вряд ли получится, а вот дизайнером, в принципе, можно.

Из дизайнера в официанты

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

К нам в кафе приходили иностранцы, люди с МИД и бизнесмены

На вопрос «почему из дизайнера я стал официантом» ответ простой — сложная жизненная ситуация и необходимость в заработке. А искать работу дизайнером, будучи щеглом без опыта — проблематично.

Признаюсь, я не хотел идти работать официантом, но это хороший опыт

В этот момент я параллельно искал новую работу, параллельно фрилансил.

Были периоды, когда смена начиналась в 7, а заканчивалась в час ночи. Около месяца я так проработал, чуть коньки не отбросил. Поэтому поставил график 2/2 и большая часть времени была свободна.

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

Это еще этапы таких зарплат мизерных. Сейчас я не понимаю, как я жил на эти деньги.

Чтоб ты понимал, если переводить в доллары, то я получал 50$ в месяц

Работает ли наружная реклама?

Когда как — многое зависит от самого дизайна. Допустим, я не понимаю, почему многие дизайнеры до сих пор делают светящиеся буквы синим цветом.

Дизайнер банально не знает про длину волн и что синий в ночи — просто пи**ец

А про эстетику… Я оттуда и ушел, из-за того, что там нет эстетики.

Приходит дядя Ибрагим и говорит — мне нужна курица гриль, огонь, повар в своей херне и усы

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

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

Как баннеры с гифками, которые нас бесят. А вот маркетологи считают, что они работают

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

Уволился с 300$

Проработал в рекламном агентстве около года. Потихоньку начал копить деньги, чтобы уволиться. И я смог накопить долларов 300-400. Прихожу к начальству и говорю, что хочу уйти.

Там начали повышать количество обязанностей, без повышения ЗП, как это обычно бывает

И уволился в никуда. Денег мне должно было хватить на месяц. Но я поставил цель — найти работу за 2 недели. И у меня получилось.

Устроился в местное локальное агентство, которое ныне уже не существует. Мы начали делать сайты для завода, окон и прочие мелкие заказы. Отсюда я начал расти и развиваться.

Мой вам совет — не уходите в никуда. Особенно, если нет какой-то подушки безопасности

Мне очень повезло. По факту, что у меня было из опыта — без наставников, с нулевой базой и прочим. Несмотря на то, что это был мой 3 год опыта, если перевести его в опыт нормальной компании, то вышло бы 3 месяца.

Я рекомендую найти 1, 2, 3, оффера и только потом уходить. Чем больше офферов, тем лучше

Тут я сразу стал артдиром. И это тупо — максимально дурацкая история.

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

Это отстойная ситуация, но за годы я по локальным меркам вырос до сеньора. Я сильно обесцениваю свой путь в 5-6 лет. И если бы мог, то «перепрошел» бы его.

Начальник саентолог

Одна из причин моего ухода — саентология. Фаундер начал верить в какие-то медитативные практики и прочее.

Он приходил в офис, начинал дыхательные практики, сажал нас в кружок — тяните визуально пространство из-за угла, расширяйте, заполняйте пространство собой и прочее

Разница менталитетов

Большая часть интерфейсов, которые делают на западе — за**па

Эстетики практически нет.

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

А еще не найдется ни одного человека, который назовет интервью кастдевом)

Я работал со многими западными ребятами — индийцы, американцы, европейцы и так далее.

Американцы, если говорят тебе что-то около нейтральное, то скорее всего все плохо

Но ты можешь договориться с ними о прямолинейном фидбеке, тогда они будут тебе его давать. Мягко, объясняя все, но они не любят, когда кто-то тупит.

Поэтому я не понимаю, как они работают с индийцами. Потому что они часто тупят и не переспрашивают

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

Мне в плане менталитета понравилось работать с бразильцами — темпераментные, открытые люди, португальцы — примерно тоже самое.

Мне понравился американский и британский менеджмент.

Это чуваки с хорошей академкой, понимают, что им нужно, очень круто видят овервью продукта

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

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

Один из показательных моментов разницы менталитетов — моё собеседование на работу.

Я проходил собеседование с американцем и мне пришел фидбек в духе «ты выглядишь уставшим и загруженным»

А я думаю, ну это моё обычное лицо

Продукт для поиска и задержания преступников

Social Links — один из крайних крупных проектов, над которым мне удалось поработать. Это open source intelligence домен, продукт для B2B. Им пользуются Интерпол, полиция, частные сыщики, расследователи, следователи и так далее.

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

Например, одни из кейсов — благодаря продукту поймали педофила в Мексике, остановили наркотрафик, поймали интернет-сталкера Роналду и так далее.

Я так проработал недолго — примерно полгода. За это время удалось и дизайн стратегию сделать, и дизайн радикально обновить.

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

Да и сам продукт называется Crime Wall — буквально как в фильмах, когда чувак пытается объяснить что-то у доски, а изображения красными нитками переплетены)

Но в итоге я уволился, т.к. мне казалось, что я должен немного отдохнуть.

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

Его вы можете посмотреть на Ютубе:

И на отечественных платформах: Рутуб, Дзен, Вк Видео

Спасибо, что читаете наши статьи, смотрите наши видосы на Ютубе и подписаны на телеграм. Вы же подписаны?

А ведь там постится самый интересный и эксклюзивный контент UXART абсолютно бесплатно без смс и регистраций. Так что и на него подписывайтесь :)

https://t.me/konakov_blog

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

К сожалению или к счастью, во время разбора мы нашли критическое количество багов и неприятных моментов, из-за которых ни RuTube, ни VK Видео не смогли запасть в наше сердечко. И для тех, кому интересно прочитать разборы самостоятельно, ссылки будут ниже:

Про Рутуб и ВК

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

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

Поэтому сегодня посмотрим оба сервиса, сделаем выводы по их удобству и решим, стоит ли уходить с Ютуба или лучше поискать надежный вп…

Дзен и его история

В отличие от прошлых статей этой серии, сегодня сходу решил начать с истории сервиса. Но если вам не хочется узнавать путь Дзена, то предлагаю пропустить эту часть. Тем более, она будет тезисной.

А для всех, кто остался, начнем.

• Разработка собственно ИИ и рекомендация для Яндекса начали реализовывать еще в 1997 году. Технология, которая в будущем будет называться ZEN использовалась во внутренних сервисах компании.

• В 2009 году Яндекс внедряет новый метод машинного обучения — «Матрикснет». Особенность этого метода заключалась в устойчивости к переобучению:

• Эта система позволила учитывать множество факторов ранжирования — и при этом не увеличивать количество оценок асессоров и не опасаться, что машина найдет несуществующие закономерности

• Первый сервис, в котором появилась технология рекомендаций — «Яндекс.Музыка», затем «Яндекс.Маркет» и «Яндекс.Радио». И уже в 2015 году в бета-режиме запускается отдельный сервис под именем «Яндекс.Дзен»

• Дзен анализировал как историю браузера, так и активность пользователя в самом сервисе. При желании, юзеры могли выбирать «интересный» контент и убирать из ленты «неинтересный»

• В 2017 правила игры меняются. Теперь пользователи могут самостоятельно публиковать свой контент на Дзен. Раньше сервис работал в формате дистрибуции контента с других площадок. В том же году Яндекс объявил, что потратит 1 млн долларов на спонсорскую программу для лучших авторов.

• В 2019 пользователи смогли загружать ролики хронометражем до 15 минут, а в 2020 до 60 минут.

• И в 2021 правила снова меняются. Теперь Дзен начинает ориентироваться на блогеров и их видео-контент. В апреле 21 прекращается обмен трафиком с медиасервисами и просмотры у многих медиа резко падают.

• В августе 2021 в Дзене появляются «Ролики» — вертикальный формат видосов длительностью до 1 минуты (который вскоре увеличат до 2-х минут).

• В августе 2022 года Дзен меняется визуально. VK объявляет о приобретение сервисов «Дзен» и «Дзен. Новости». Теперь при посещении главной Яндекса, пользователя автоматически переадресовывает на страницу dzen.ru

И вот теперь можно начать разбирать сам сервис. И, к сожалению, без проблем тут не обошлось.

Главная страница

Если вы помните, как я отреагировал на главную Рутуба, то можете предположить, что я скажу сейчас. Даже Рутуб на главной не показывает настолько много, как это делает сервис от Яндекса. И с одной стороны это понятно, ведь Дзен это не только видеохостинг, но еще и некий статейный ресурс с интегрированной новостной лентой.

Но это первый экран среди аналогов Ютуба, на моей памяти, который вызывает настолько неприятные эмоции.

Начнем с того, сама страница с «видео» спрятана в левой части экрана среди категорий. И мы обязательно перейдем в неё, но для начала мой любимый эксперимент с бесконечной лентой:

Из минусов, которые сходу показывает нам сервис — поп-апы с предложением авторизоваться и просьбой оценить ленту сходу. Я даже толком не успел рассмотреть, что мне предлагает сервис, а он уже хочет получить какую-то оценку.

Сама же лента — да, она бесконечная. Но проблема та же, что и на Рутубе. О ней я частично упоминал выше. Дзен это сборная солянка из всего контента, который представлен на платформе, а именно — видосов, роликов, новостей и статей.

Если вас, как и меня, смущает название «ролики», то, напомню, это вертикальный формат, который назвать как-то уникально не хватило фантазии.

Но на этом странные функции не заканчиваются. У Дзена есть 2 вида поиска — классический «в интернете по вашему запросу» и внутри сервиса по контенту.

Разница заключается в том, что для поиска по контенту пользователю обязательно нужно проскролить страницу вниз. И в отличие от Ютуба, ВК и Рутуба это непривычный паттерн, который может смутить пользователей на старте.

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

Есть 3 основных типа — по 1 под видосы и статьи и одна под вертикальный формат.

Отличие видео и статей заключается в двух аспектах:

• У статей в карточке добавляется описание под заголовком

• У видосов в нижней правой части визуала указан тайминг, либо «подборка», если видео в карточке несколько

Сами карточки расположены по 4 в ряд, однако, даже с включенным Adblock вам с легкостью может показать рекламу. Я, конечно, не против Jetour Dashing 1.5 MT, но зачем мне видеть этот автомобиль 2024 года в карточках, посвященных видео? Или рекламу Мегамаркета.

Все круто, но почему не пойти по пути того же Ютуба с рекламой в роликах? Почему на главной странице я действительно словно на рынок попадаю, где мне и контент предлагают, и рекламой сверху посыпают?

Но если вы думаете, что Ютуб в этом плане не показывает рекламу пользователям, то спешу вас огорчить. Если вы живете в России, то не увидите её. Но как только мы включаем ВПН и выключаем adblock, то на главной сразу появляются объявления:

Отличается сам подход к рекламе, как таковой:

• Во-первых, есть вариант рекламы с измененным визуалом. Так пользователь понимает, что это не видео из его ленты рекомендаций, а именно рекламный видос

• Во-вторых, у рекламы Ютуба акцентнее выделяется само слово «реклама». Его не прячут в карточку мелким шрифтом, а контрасно показывают на странице

Карточки с «роликами» сильно отличаются от предыдущих — как минимум, форматом показа. Здесь 8 карточек, на каждой из которых мы видим заголовок, ник пользователя и количество просмотров.

Сама структура контента на главной циклична. Он чередуется по формуле — 12 карточек статей, 12 карточек видосов, 8 карточек роликов. И так по кругу, пока пользователь не устанет скролить вниз. И за стабильность в структуре можно поставить плюс.

Разделы

В этой статье нас интересует 3 основных раздела. И если вы подумали про статьи, видео и ролики, то вы правы лишь частично. По какой-то неведомой причине, у Дзена есть две подкатегории, которые расположены под основными — «Видеоигры» и «Детям».

Что в первой, что во второй пользователям все также показывают полномасштабные ролики, но подробнее о них чуть позже. Итак, переходим в «видео».

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

Под поиском расположились категории видосов. Давайте же кликнем на одну из них:

И тут произошло оно — нас выбросили с раздела видео и переадресовало на «тему» технологии.

С одной стороны, это кажется интересным решением. Мол, пользователь может заинтересоваться не только видосами по теме, но и прочим контентом.

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

Мы можем повторно перейти на видео, уже в рамках этой темы, но это лишние клики, которые тратят моё время.

Но огромная плашка с «технологиями» никуда не исчезает. Вы все еще можете отскролить страницу, но зачем пользователю делать такое количество лишних действий?

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

Но вот сам поиск работает по модели ВК, когда сервис подбирает видео одновременно с вводимым запросом. Из-за этого во время поиска «Baldur`s Gate 3» я сначала увидел КС, потом МК и только после ввода «bald» попал в нужный проект.

Сходу еще одна недоработка сервиса. Почему-то в категории вторых Врат Балдура мне показывают футажи последней игры от Larian. Выбирают ли категорию люди или сам сервис — вопрос на который мы ответим после просмотра творческой студии.

А вот раздел «Детям» выглядит интереснее всего:

Хотя и сразу видно, что «темы» сверху никак не относятся к разделу и в целом не нужны здесь. Но, допустим…

Тут все делится на нестандартные для сервиса карточки. Нестандартные они за счет микро анимации, которая воспроизводится при наведении. Ну разве не прелесть?

А в самих карточках все поделено на плейлисты.

И вот теперь можно переходить к главному — плееру.

Плеер

Раз мы остановились на детском разделе, давайте заодно и посмотрим, как выглядят плейлисты:

Ничего не напоминает? (вспомните Ютуб)

На деле же, дьявол кроется в деталях. Несмотря на то, что плейлист и плеер практически полностью копирует Ютубовский дизайн, мы видим важные отличия. А именно — расположение кнопок!

Это, конечно, шутка, но в отличие от Рутба и VK Видео, здесь дизайн почти полностью повторяет Ютуб. Хорошо это или плохо — не мне судить, но факт остается фактом.

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

Рекомендательная система справа также копирует Ютуб. Но сами рекомендации вызывают вопросы. Если это детский раздел, то, пожалуйста, ограничьте рекомендации детским контентом.

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

Ну и да, снова реклама. Особенно позабивала маркировка 16+ в ads, которая показывается под мультом из детского раздела))

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

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

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

Но даже тут снова реклама, которой, честно говоря, слишком много на сервисе.

И напоследок, вы же помните поиск по «темам», который расположен в верхней части экрана? И наверняка вы думаете, что работает он, как привычный поиск — ты вбиваешь запрос и тебе выдаются результаты?

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

Канал пользователя

Сам Дзен выделяет несколько блогеров, которые выпускают эксклюзивный контент для этой платформы. Поэтому предлагаю рассмотреть один из таких каналов — Куплинова.

На главной странице канала пользователя все идет в строгом порядке:

• Подборки автора

• Ролики (вертикальные видосы)

• Статьи

• Видео

Оформление канала стандартное — в верхней части обложка канала, ниже логотип, ник, количество подписчиков и описание, а справа кнопка подписаться.

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

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

Творческая студия

И она снова плоха, особенно, если сравнивать с Ютубом. Здесь нет практически никакой полезной статистики для авторов. Но для начала давайте про «главную»

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

Моя гипотеза заключается в том, что до достижения этих 4 шагов вашего канала для Дзена не существует. И на протяжении 2-х месяцев я это доказывал самому себе. Ни статьи, ни видео не рекомендуется пользователям и, видимо, даже не высвечиваются в ленте.

И проверить это достаточно просто — вбиваем точный запрос и видим, что нужная статья не выдается в поиске первой. Сначала мы видим тему «Галактика», потом видос по С# и только после нашу статью. Крайне странная система, которая не продвигает новичков.

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

В статистике мы видим 5 основных пунктов:

• Подписчики

• Публикации

• Почасовая статистика

• Доход

• Аудитория

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

И здесь, в отличие от того же VK Видео, есть теги, которые хоть немного, но должны продвигать ваши видео через поиск. Работают они или нет — вопрос другой. Но как минимум, эту функцию редактор предлагает.

И перед тем, как смотреть на Платформу, хочу сделать лирическое отступление:

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

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

Другая проблема — агрессивный маркетинг и покупка некоторых Ютуберов, которые для этих платформ делают эксклюзивные видосы. Тут нет вины блогеров, на мой взгляд, это дополнительный заработок, который на Ютубе отключили еще в августе. Но тот же Куплинов для Дзена делал эксклюзивные видосы по конкретным играм, а на VK с недавних пор выкладывает видосы на три дня раньше, чем на Ютубе.

И вот с одной стороны может показаться, что это круто — смотреть его видосы раньше остальных на ВК ВИДЕО! Но по настроению в комментариях под видосами на Ютубе, у людей идет отторжение от отечественных платформ.

Мало того, что пользователей насильно хотят увести от Ютуба, посредством замедления платформы, так еще и блогеров выкупают, уводя на неудобные сервисы. Это огромная проблема, с которой нужно бороться, а не способствовать её развитию.

А теперь можно и на платформу посмотреть.

Платформа

Будем честны, платформа сейчас это темная лошадка среди мира видеохостингов. Этот сервис неизвестен большинству людей. И да, проект сейчас в бете. Как следствие, при первом посещении сайта я увидел это:

Либо нулевые просмотры на ГЛАВНОЙ странице, либо минимальные. И вот как мне относиться к сервису, который при моем первом посещении не может вывести в реки видео, с хоть какими-то просмотрами?

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

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

Вернемся к главной. Здесь сходу несколько отличий от Ютуба:

• Под поиском расположились категории контента, а сам поиск занимает большую часть экрана

• Карточки видосов по 4 в ряд

• В левой части «Навигатор», который частично копируют категории под поиском

P.s. остальные категории выглядят аналогично главной, так что говорить про них отдельно не имеет смысла.

P.s.s. лента здесь бесконечная, так же, как и у Дзена, но никакого восторга от неё сейчас я не испытываю.

Плеер и система рекомендаций в правой части экрана выглядят практически идентично:

Из различий — расположение и количество функций в самом плеере. Так, например, у платформы нет:

• Субтитров — ни добавленных автором, ни сгенерированных автоматически

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

Из интересного — первые несколько видео в рекомендация практически всегда от автора, которого вы смотрите прямо сейчас. Интересное на этом заканчивается.

Описание и комментарии также схожи с Ютубовскими. Из недобавленного — в игровом разделе нет упоминания и возможности перейти на другие видосы по конкретной игре. Остальное по классике.

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

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

Из-за чего общее впечатление от сервиса не «вау, это такой приятный клон, мне не придется привыкать к новому сервису», а «ну и зачем мне полная копирка Ютуба, которая не вызывает ничего, кроме смеха?».

В этом суть платформы прямо сейчас. Клон Ютуба, но с нашими технологиями! Только вопрос, а будет ли этим хоть кто-то пользоваться?

Даже сравнивая с Рутубом, Вк и Дзеном, кто выберет платформу, если Ютуб смогут заблокировать, без возможсноти обхода?

Но это все лирика. Что там по каналу автора и творческой студии?

Канал автора

Снова 2 скрина — один с Ютуба, другой с Платформы:

И тут мы видим сходства: сверху обложка канала, ниже лого, ник, кол-во подписчиков, кол-во видео, описание, рядом кнопка «подписаться».

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

Под разделами закрепленное автором видео, а ниже — видосы.

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

Творческая студия

И вот где появляются значительные отличия:

На весь экран у нас три основных показателя — аналитика по каналу (со сводными данными), новые подписчики (которые на Ютубе указаны в маленьком окошке снизу) и новые комментарии (аналогично).

А снизу у нас подсказки для новых авторов.

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

Вкладка «Контент на канале» полностью пытается копировать Ютубовский дизайн.

И вот где действительно есть отличия, так это во вкладке с аналитикой. Но как и во всех сервисах до этого, отличия лишь в худшую сторону. Тут нет практически ничего важного:

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

И да, загрузка видео снова пытается повторить Ютуб.

Спустя час видос так и не загрузился. Ждать дольше не имеет смысла, т.к. час на 5-секундный видос это очень много.

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

И главный вопрос, который не покидает мою голову после 3-х статей — а зачем нам эти сервисы?

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

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

Помимо очевидных проблем в удобстве самих платформ, у нас есть проблемы с количеством контента и людьми, которые не захотят уходить от Ютуба, который им стал родным.

Но если вдруг и нужно будет делать выбор, если Ютуба не останется, то какие у нас есть варианты?

• Рутуб, который выглядит, как рынок, а качество контента и сервиса оставляет желать лучшего?

• Вк с их бесконечными ботами, неработающими адекватно плейлистами и 18+ контентом?

• Дзен, который в целом ни рыба, ни мясо — хочет собрать у себя весь контент, но из-за этого непонятно, для чего вообще этот сервис?

• Или Платформа, которая полностью скопировала дизайн Ютуба, но сделала это криво?

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

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

Спасибо каждому за прочтение этой статьи. С вами был редактор UXART, не забывайте подписываться на наш телеграм-канал. Там мы обсуждаем дизайн, внутрянку и экспериментируем с контентом — https://t.me/konakov_blog

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

Но перед началом, давайте знакомиться)

С вами UXART, где мы ежедневно делаем интернет удобнее. За 6 лет сделали более 250 проектов для крупных корпораций и входим в топы рейтингов. На Тэглайне поднялись на 19 место среди всех дизайн-студий России, а на RUWARD получили серебро за самую лучшую студию со штатом до 30-ти человек.

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

Концепция приложения

Все построено на системе заданий и их выполнения, аналогично проектам в Jira. 

Родители ставят главную цель, разделяя её на маленькие задачки. За каждую можно получить внутриигровые баллы. А при выполнении всех задач, закрывается общая цель, которая может быть привязана к «вознаграждению».

Этим призом может быть все, что смогли придумать родители. Давайте на простом примере попробуем воспроизвести механику Могучи.

Родители решили, что стоит привить ребенку любовь к уборке. Для этого один из родителей создает цель «Научиться убирать за собой». В этой цели он ставит задачи, например:

1. Мыть за собой посуду после каждого приема пищи

2. Каждое утро застилать за собой кровать

3. Раз в 3 дня выбрасывать мусор, который накопился в комнате

4. Помогать маме со стиркой…

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

Они отправляют задания ребенку и он начинает выполнять их. Как только выполнит все — родителям придет уведомление и они подарят сыну/дочери то, что он заработал.

Другой вопрос — а будут ли родители покупать ребенку велосипед, но это уже на совести старших…

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

Как тебе в голову пришла идея создания «Могучи»?

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

При этом достаточно часто встречается контекст, когда задачи ребенка привязаны к какой-то цели/результату, из серии «закончишь четверть на пятерки — будет велосипед». 

Так появилась идея облегчить выполнение этой задачи в подобном контексте, а именно — постановка целей и критериев достижения в простой и доступной форме для ребенка. Что-то типа OKR для детей. :-) 

Первые шаги и аналитика

В начале было сообщение в телеграме с одним простым, но таким приятным вопросом — «Можете реализовать мою идею?». Тогда мы еще не до конца понимали будущий продукт, но решили попробовать себя в чем-то новом.

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

Дальше был брейншторм, мы укомплектовали все идеи в отдельный док, отдали Кириллу финальную концепцию и приступили к запуску MVP.

Почему именно «Могучи»?

Звучит созвучно Тамагочи, отсылка к моему детству. :-) 

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

Во время аналитики разделили аудиторию на 2 основные группы:

1. Школьники от 6 до 13 лет

2. Родители

Каждой группе присвоили боли и возможные пути решения. Так, например, дошкольники (6-7 лет) чаще всего: 

• Познают мир через игру

• Мало кто умеет читать и лучше воспринимает картинки

• Плохо фокусируют внимание, поэтому нужны интерактивы, несамостоятельны.

Для этого приложение должно отвечать следующим критериям:

• Нужна визуализация и интерактив, иначе ребенку будет неинтересно

• Максимально простой и понятный функционал

• Максимально простые формулировки

• Ограничение функционала, иначе ребенок начнет «тыкать» не туда

Помимо дошкольников выделили группу «младшие школьники» (7-11 лет) и «средние школьники» (12-13 лет), также выделили боли и предложили пути решения:

С родителями все получилось и проще, и сложнее одновременно. 

Во-первых, возрастную группу ограничили от 30 до 45 лет. 

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

На основе этих выводов вывели 3 гипотезы:

Среди приложений конкурентов отсмотрели 4 наиболее интересных в плане подхода к работе приложения:

Каждое приложение следует одному четкому паттерну: 

1. Вход и онбординг (пользователей знакомят с приложением)

2. Этап после онбординга (перевод на пустую страницу с возможностью создать задачу)

3. Добавить задачу (ключевое меню, которое должны быть достаточно функциональным для точного выбора своей цели), редактировать, удалить задачу

4. Выполнение задачи и общий балл

5. Переключение между списками задач

Главное отличие этих приложений от Могучи заключается в том, что в прочих ТуДуИстах пользователь сам отвечает за свои достижения/невыполнение задач. Поэтому мы решили не останавливаться и поискать ТуДу для детской аудитории. 

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

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

Основной функционал Могучи и высокоуровневые прототипы

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

1. Вход и онбординг — два варианта входа в приложение.

1.1. Приложение одно, вход отдельный для родителя и ребенка: по qr-коду, паролю, рисунку и т.д.

1.2. Один аккаунт на родителя и ребенка с возможностью переключения на родительский контроль при помощи пароля. (этот вариант выбрали в итоге)

2. Онбординг — несколько приветственных экранов с преимуществами приложения (можно пропустить). Далее ввод основной информации о пользователях

3. Добавление ребенка — имя, фотография/заглушка в виде иллюстраций, создание пароля, кнопка «добавить еще ребенка». Добавлять другую инфу показалось бессмысленной идеей, зачем родителям вписывать фамилию, возраст и т.д.

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

5.. Добавление задач к цели — это та история с велосипедом, о которой мы говорили в начале. Тут родитель может выбрать периодичность (ежедневно, еженедельно, ежемесячно и т.д.). Создавать задачи и цели могут только родитель

6. Скоринг — также два варианта:

6.1. Разделение на «легко», «средне», «сложно», за каждый уровень свое кол-во баллов. Например, 1, 2 и 3. Минус в том, что при таком подходе сложно рассчитать стоимость приза, т.к. ценность задач и глобальная цель должна быть нормально измеримой. Как, например, накопить 50 баллов, если все задачи под уровнем «легко»?

6.2. Более очевидный вариант — давать конкретной задаче конкретное количество баллов. За эту математику нужно отвечать родителям. Например, цель — накопить 100 баллов, а за одну задачу ты получаешь 5. Так легче посчитать и родителю, и ребенку, что является для нас ключевым.

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

8. Возможности ребенка — отмечать выполнение задачи и следить за общим прогрессом

P.s. прямо сейчас Могучи активно разрабатывается и обрастает новым функционал. На сегодняшний день взаимодействие родителя и ребенка происходит в рамках одного приложения на телефоне. Для смены аккаунта использовали систему родительского контроля с пин-кодом.

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

Дизайн 

Далее пошла самая интересная работа — совместить простой и понятный «детский» визуал с удобным функционалом для родителей. Основной функционал приложения уже был описан выше, но во время дизайна мы изменили некоторые части Могучи, о которых расскажем ниже.

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

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

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

В самих задачах постарались сделать интуитивно понятный функционал. В основу каждой задачи входит её название и стоимость в баллах. Если родители хотят «поиграть» со временем задачи, то их перенесет в отдельное меню. Здесь можно выбрать повторение задачи:

1. Каждый день

2. Несколько раз в неделю

3. Несколько раз в месяц

И конкретные даты, в которые задачу нужно повторить, например, в среду, пятницу и воскресенье.

Также можно выбрать дату завершения повторения задачи по принципу:

1. Никогда

2. В определенную дату

3. После нескольких повторений

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

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

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

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

Для переключения на родительский аккаунт, нужно ввести пароль. Если пароль по каким-то причинам был забыт, есть опция восстановления через почту.

По сути своей, «Могучи» выполняет функции различных таск-менеджеров. Что ты думаешь насчет этого тезиса и какие сильные/отличительные стороны «Могучи» мог бы назвать?

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

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

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

Иллюстрации и онбординг

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

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

Планируешь ли монетизировать проект? И каким образом эта монетизация бы выглядела?

Зависит от того, будет ли продукт расти. Самая «дружелюбная» модель — фримиум, с возможностью подписки за доп плюшки. 

Результат

Из простых мокапов и черновой идеи мы довели Могучи до полноценно работающего приложения с приятным дизайном. 

На наш взгляд, у нас получилось совместить «детское» настроение с «серьезным» подходом. И мы надеемся, что приложение поможет научить ваших детей ответственности)

Бонус для наших читателей: Если вы захотите самостоятельно протестировать приложение, то напишите Кириллу в личные сообщения и вы сможете стать бета-тестером)

Кем/чем вдохновлялся при разработке концепции «Могучи»?

OKR подходом из моей работы в крупных компаниях. :-)

Идеи на будущее

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

Планируешь ли развивать проект в перспективе? Почему на данном этапе взаимодействие ограничено одним экраном?

Все просто — ресурсы ограничены, мы разрабатываем это скромной командой в свободное от работы время, пока решили начать с андроида. Далее — будем смотреть за метриками и удовлетворенностью родителей и их начинающих достигаторов. :-) 

Авторское послесловие

А теперь немного личной истории. С вами Никита — редактор UXART и примерно 10 лет назад родители сказали мне — «если ты закончишь год отличником, то мы купим тебе PSP». Естественно, после этой фразы глаза мои горели ярче Сириуса и мотивация учиться поднялась до небес.

Я стал отличником, но вот к концу года родители забыли про своё обещание и PSP так и осталась чем-то далеким.

Я это к чему, проект Могучи стал бы для меня в те годы спасательным кругом. Родители не на словах бы пообещали PSP, а могли поставить мне цель, которую на протяжении года я бы пытался закрыть. 

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

И это крутой способ и повысить мотивацию, и научить ребенка ответственности.

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

Если у вас есть крутая идея, но вы не знаете как её реализовать — обязательно пишите нам на почту или в телеграм. Да и просто подписывайтесь на наш тг-канал. Мы там много всякой внутрянки показываем)

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

Всем привет, на связи UXART, где мы ежедневно делаем интернет удобнее. Этот выпуск патруля отличается от привычных, потому что мы писали его вместе с разработчиками из Лиги А. Ребята закрывают полный цикл разработки и вообще делают всё — от простых лендингов до сложных сервисов. Кроме того, мы провели внутренний эксперимент и позвали наших дизайнеров, чтобы они посмотрели на проблемы своим экспертным взглядом.

Мы заранее нашли баги на сайте, составили их в доке на 16 страниц и передали дизайнерам.

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

Дисклеймер:

UX-патруль — описание личного пользовательского опыта. Без официальных метрик и исследований, только те, что разработчики Лиги достали с помощью Lighthouse — автоматического инструмента, который позволяет анализировать веб-страницы.

Проблемы начинаются на главной с отступом карточек

Казалось бы, ключевое, что есть на сайте по покупке и аренде недвижимости — главная страница. Здесь пользователь сходу должен найти интересный вариант квартиры. Да и в целом главная страница должна мотивировать продолжать пользоваться сайтом. С точки зрения UI дизайн Циан по-своему хорош.

Акцентный синий подчеркивает ключевые разделы сайта, а иллюстрации разбавляют страницы своим видом

Но здесь же мы обнаруживаем первый косяк, который сильно режет глаз. И вот в чем он заключается — карточки изображений квартиры расположены в карусели неравномерно. Из-за чего мы можем наблюдать, как скачет расположение текста и наш внутренний перфекционист страдает:

P.s. дизайнерам мы задали два вопроса по каждой проблеме:

• Почему Циан по нашему предположению сделали именно так?

• Как можно это улучшить с точки зрения дизайна?

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

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

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

Катя, дизайнер UXART

Сделали так потому что в некоторых карточках есть отметка с метро, а в некоторых нет. Но скачущий контент — это неправильно. Так быть не должно.

Как можно было сделать?

1. Перестроить саму карточку. Например, метро вынести отдельно

2. Подравнивать размер этих белых карточек по высоте максимальной в ряду. Да, так у карточки с минимальным размером будет внизу белое пространство, но в любом случае когда инфа на одном уровне — она легче считывается пользователем

Мария, дизайнер UXART

1. Непонятно на самом деле, может быть боятся такой ситуации как на 3 карточке, хотя в этом ничего плохого нет.

2. Из вариантов решения, можно подтягивать автобусные остановки (2 карточка) если метро рядом нет, можно подтягивать интересные места (парки/кофе/скверы) если пользователь ищет съем квартиры посуточно.

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

Иван, дизайнер UXART

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

2. Компонент должен иметь четкую структуру — размер фото (в данном случае на всех карточках он будет одинаковый, чтобы плитка смотрелась аккуратно). Отступы между фото и заглавным шрифтом — одинаковые. Сам текст и статусы в одном лейауте.

При этом, если у нас, например, не будет статуса

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

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

Елизавета, дизайнер UXART

Смещение страницы в личном кабинете

Здесь проблема не столько в дизайне, сколько в разработке. К тому же, встретить её можно не во всех браузерах и системах. Редактору не повезло, из-за чего он мог наблюдать танец маленьких утят в исполнении личного кабинета Циан.

Если открыть «Кошелек», вся страница слегка смещается влево.

На мой взгляд, от таких проблем стоит избавляться и не пропускать их мимо глаз

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

От разработчиков: это нативная история

На этой странице мы видим, что навигационный список не помещается на страницу. Поэтому, когда мы нажимаем на какую-то карточку, сбоку появляется скроллбар. Он явно занимает сколько-то пикселей — это нативная история.

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

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

Неравномерное разрешение фото

Проблема схожа с той, что мы описывали в самом начале. Только на этот раз появляется она не на главной, а после этапа «поиска». По каким-то причинам, разные объявления имеют разное разрешение фотографий. Из-за этого часть объявлений смещается влево и портит общую структуру сайта:

Чуваки не научились делать одну часть фиксированной и растягивать 1 фотку по всей заданной области.

Катя

Сделать контейнер одинаковой ширины под все фотки, чтобы фотографии подстраивались под него:

Мария

Такая же история, как с карточками, опять отступы, контент прыгает, настройки контента и фото.

Опять же делаем компонент, который может адаптироваться под неидеальное разрешение фото или отсутствие каких-то пунктов в объявлении, или к размеру описания в объявлении:

Елизавета

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

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

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

Неровная вёрстка не связана с фронтендом, поэтому продумать её можно только на этапе дизайна)

Циан играет с пользователями в «угадай смысл точек»

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

В начале может показаться, что дело в том, что незакрашенные точки уже были просмотрены с аккаунта. Для чистоты эксперимента я зашел на ЦИАН с нового браузера + попросил дизайнеров проверить, как страница выглядит у них. Результат тот же, какие-то точки закрашены, а какие-то нет.

Вообще неочевидно, но это фильтрация Сейчас у нас выбран город и область.

Если убрать Питер или Ленинградскую область, то все станет голубым. (скрин 1)

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

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

Можно также сделать сами точки голубыми, но дизейбленными

Было бы понятно, что часть которую мы отфильтровали — на карте яркая, а остальное осталось вне поиска

Катя

Интуитивно непонятно, чем отличаются эти кружочки. Явно хотели подчеркнуть отличия одних квартир от других, но вот в чем конкретно эти отличия просто по цвету кружочков не понять.

Я предполагаю, что синие — квартиры в городе, белые — в области, но не уверена.Как решить?

Добавить какое-то обозначение для пользователей

Мария

Естественно, это не все проблемы Циан и багов там еще множество. Мы решили рассмотреть именно те, с которыми пользователи с наибольшим шансом могут столкнуться и сразу показать, как их можно решить. Дизайнеры по-разному подошли к одинаковым проблемам и считаю, что заслужили лайка и хорошего комментария об их работе.

Ну а теперь про самый базовый пользовательский сценарий, с которым тоже все не так просто.

Давайте попробуем снять квартиру в Питере с бюджетом 25 000 рублей

Представим, что пользователь впервые зашел на Циан. Он хочет снять себе квартиру в Питере, с ограниченным бюджетом в 25 000 рублей и котом в руке. Поэтому нужно искать квартиру, в которую пустят с животными. К тому же, желательно найти что-то не очень далекое от метро.

📌 Сразу заметили, что нет фильтрации

Первое, с чем сталкивается пользователь, который ранее мог не пользоваться Циан — отсутствие фильтрации на первом этапе поиска. Здесь мы можем указать лишь «тип» помещения, кол-во комнат, цену и район.

📌 Фильтрация открывается на следующем шаге

Но сходу найти её на экране может быть проблематично, так как на фильтрах нет акцентов. Зато акцентно синим выделяется «регионы», «район», «метро» и «найти».

📌 После выбора фильтров, страница поиска обновляется

Но на кнопке «еще фильтры» показывается оранжевая точка. Она используется на Циан в качестве уведомления о чем-то новом. Поэтому некоторое время я ломал голову, что не так я сделал и почему эта точка не исчезает. В итоге так и не понял, зачем она нужна. Если это показывает на «доп. фильтры», то зачем их выводить ниже с возможностью отключения.

А что разработчики нашли под капотом с фильтрами?

Логика фильтров сложная, но реализация простая

Циан выдаёт какое-то количество результатов, но не продолжает бомбить бэкенд запросами.

Другими словами, сайт следит за тем, как мы листаем список. Вот он выдал нам несколько объявлений и ждёт, пока мы долистаем их до конца. Как только мы это делаем, Циан догружает нам остальную информацию — появляется пагинация.

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

Как мы поняли, у Циан есть своя база

Они не берут объявления со сторонних сайтов, как, например, сайт Авиасейлс. Там пользователь видит варианты билетов, информация о которых берётся с Победы, Аэрофлота и других. Поэтому Циану нет необходимости постоянно отправлять запросы на сервер.

📌 Вылезают подводные камни

Циан не указывает в предпросмотре полную стоимость квартиры. Для этого пользователю нужно зайти в карточку и весьма мелким шрифтом найти информацию об оплате ЖКХ + залоге + комиссии.

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

🤔 Еще из интересного

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

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

Порой (редко, но бывает) Циан выдает объявления, которых уже не существует на площадке, из-за чего пользователь ловит своеобразную 404.

🔥 Аренда по оценке Циан — прикольная функция

Но она скорее смущает, чем дает какую-то полезную инфу. Практически каждое объявление по цене выше, чем оценивает Циан. Зачем выводить эту информацию собственнику?

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

Смотрим на поиск по карте 🗺

📌 Первое, что смущает — разные по цвету точки

Одни закрашены, другие нет. Почему? Наверное, из-за того, что часть объявлений уже была просмотрена? Так нет, никуда специально не кликал, поэтому просто странный подход.

📌 С показом объявлений на карте — слишком мало инфы про квартиру

Вспоминаем, что итоговая цена не указывается в объявлении, к тому же не сказано, от собственника это объявление или нет.

📌 Когда пользователь нашел квартиру, ему нужно как-то связаться с собственником

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

🤔 А где-то вообще нельзя позвонить и написать

Например, нашел объявление, где пользователь может лишь назначить просмотр. И вот это очень странное решение. Если вас заинтересует такая квартира, то вы будете заполнять мини-анкету. Не понимаю, почему это нельзя решить в переписке или звонке, но допустим.

📌 При закрытии мессенджера, ты не сможешь открыть его повторно

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

Если ты отправил сообщение случайно, как это сделал я, удалить его ты не сможешь. Грустно.

Что с метриками? 📊

Скорость загрузки сайта

С производительностью Циана всё окей. Это огромный сайт, который постоянно взаимодействует с сервером и собирает кучу аналитики. Поэтому можно считать, что показатели из Lighthouse не говорят о чём-то плохом, но мы всё равно на них посмотрим и разберём, что можно улучшить.

На сайте картинка отдаётся пользователю не сразу же, а через 5,9 секунд

Дело скорее всего в том, что она тяжёлая. Циан устроен так — сначала у него подрубается геолокация, а потом под неё подбирается нужный контент и показывается пользователю.

То есть, тормозит рекомендация по региону. Сначала сайт вычисляет ID региона, а потом с ним ещё закидывает запрос на получение рекомендаций. Из-за этого пользователь ждёт целых полсекунды.

Залезаем в код и видим, что картинки весят ужасно много

Ещё и все в формате png, хотя можно использовать более современный формат svg.

Мало того, что все картинки в png, так ещё и весят по пол мегабайта. Вот такая обычная декоративная картинка весит 300 килобайт…

А вот ещё один пример. Обычная декоративная картинка на фоне очень тяжёлая — можно было бы сделать размер намного меньше, но Циан оставили 2880 на 1400. Вдобавок решили наложить на неё оверлей. Поэтому её 100% можно было сделать поменьше качеством.

В общем, ребятам из команды Циан стоит заняться оптимизацией и тогда время загрузки страницы сократится. Даже если будет работать геолокация.

Доступность сайта

Здесь Lighthouse помогает нам определить:

• насколько удобно пользователям работать с сайтом,

• хорошо ли сайт структурирован,

• верен ли семантически код.

🤔 Заметили, что на сайте есть места, где кнопка или картинка не имеют специального атрибута alt

Поисковик не понимает, что перед ним находится, поэтому не может это прочитать вслух текст или картинку.

На сайтах сидят не только пользователи с хорошим зрением, некоторые пользуются Скринридером — это специальная программа, которая озвучивает всё, что происходит на экране. Без атрибута alt эта программа не может прочитать на сайте картинку или кнопку.

Лучше прописывать атрибут у каждой кнопки и картинки

Делать заметный текст, который чётко описывает место назначения, цель, функцию или действие и является заметным, уникальным и фокусируемым.

Оптимальные методы

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

На эти показатели, в основном, влияют виджеты сайта. На удивление, на Циане есть минимум разных подключенных сервисов — аналитика, безопасность и прочее. То есть, с точки зрения фронтенда он вообще легковесный.

SEO-оптимизация

Страница на 83% следует основным рекомендациям по поисковой оптимизации и хорошо ранжируется поисковиками.

В целом, метрики сайта хорошие. Поддерживать такой большой проект сложно, даже для большой команды Циана с дизайнерами и разработчиками. Единственное, можно:

• Оптимизировать картинки, особенно те, которые висят на сайте как декоративные и не влияют на пользователя.

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

Такой вот нестандартный выпуск UX-патруля у нас получился. Перед финальным словом хочу спросить вас — как вам такой формат? Стоит ли чаще рассматривать пользовательский путь, чем описывать проблемы в вакууме?

А теперь — спасибо каждому за прочтение этой статьи. С вами была команда UXART и разработчики из Лиги А.

Расскажите, часто ли сталкиваетесь с проблемами на Циан? Какой самый неприятный опыт был у вас?

Подписывайтесь на наши телеграм каналы, чтобы таких статей выходило больше)

Канал Артёма Конакова

Канал Лиги А.

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

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

В той же статье пообещали разобрать еще 2 отечественных сервиса:

• Ребрендинговый VK ВИДЕО

• И пережиток Яндекса под названием Дзен

И продолжить решили именно с ВК, так как сервис за последние годы стал и выглядеть, и ощущаться гораздо лучше.

Смог ли Вк под руководством генерального директора компании — Владимира Кириенко, стать прямым и качественным конкурентом YouTube или он повторит историю Рутуба? Сегодня и узнаем.

Главный экран

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

Если вы подумали про разные рекомендации или что-то другое, то вы, увы, не правы. Точнее, правы, но лишь частично. Меня смутил другой момент, а именно — url.

Почему-то у Вк есть два разных адреса, которые ведут на один и тот же сервис, а именно: «https://vk.ru/video», «https://vk.com/video». Какие у них отличия, кроме домена — вопрос открытый, не совсем придирка, но непонимание явно присутствует.

Но что по главной-то! А тут все хорошо, как мне кажется, сравнивая с тем же Rutube, например:

Сервис встречает нас классическим набором видосов на разные темы. Здесь нет акцентных видосов, как это было у Rutube. Весь контент равномерно распределен по странице — по 4 видоса в ряд.

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

Под поиском выведены категории, давайте попробуем нажать на «музыку»:

И хоть я не совсем согласен, что интервью ВПИСКА с Mellstroy подходит под определение музыки, в остальном контент действительно музыкальный.

Это либо подкасты с артистами, либо клипы, либо концерты. А что самое главное, в отличие от Rutube, нам в эти категории разрешают переходить без авторизации.

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

Я считаю, что подход Ютуба в этом плане сильно лучше. Сервис о вас ничего не знает (ну или не говорит об этом напрямую), поэтому сформирует вашу ленту после просмотра конкретного видоса.

Тогда как VK Видео сходу предлагает мне посмотреть ½ финала по Гандболу между Швецией и Францией. Мне такого не нужно, спасибо. Хотя главная страница, еще раз отмечу, мне здесь нравится.

А знаете, что нравится мне еще больше — бесконечная лента. Есть ли она на VK Видео?

В начале мне казалось, что мою фантазию осуществили — бесконечная лента контента!

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

Из плюсов, которых, к слову, не было на Rutube. ВК после скроллинга добавляет кнопку «наверх», чтобы оптимизировать время пользователя. Удобно.

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

Краткая история

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

Несмотря на то, что альфа-версия ВК была запущена еще летом 2006, видео контент пользователям пришлось ждать еще долгих 2 года.

В марте 2008 заканчивается тестирование нового сервиса поиска по видео — «ВКадре.ру». И на момент реализации этого сервиса, ВК уже содержал более 20 миллионов видео от пользователей.

Еще через 2 года появляется возможность добавлять в свои видеоальбомы ролики из других хостингов — YouTube, Rutube и прочих.

В 2017 году добавляют прямые эфиры через основное приложение ВК. Ранее эта функция работала только на мобильных устройствах через приложение «VK Live», а некоторые «счастливчики» могли опробовать стримы в рамках закрытого тестирования на декстопе.

В том же 2017 году разрабатывается новый сервис. Администраторы сообществ могли зарегистрироваться на платформе «Ruform», после чего получить доступ к плееру «Pladform». Так они могли выбирать видео из каталога и размещать их в своем сообществе, получая за просмотры деньги.

В 2020 появляется «убийца TikTok», а за первый месяц «клипы» собрирают более 3 млрд просмотров.

В 2021 году обновляется раздел VK Видео, который объединил в себе ролики и стримы с ВК, ОК и прочих платформ под брендом VK. Именно этот сервис на момент выхода стал самым популярным среди российских конкурентов. Аудитория проекта насчитывала 40+ млн пользователей.

В марте 2022 года сервис выстреливает — число просмотров выростает на 40%, становится в 2 раза больше загрузок коротких вертикальных видео. А 8 марта сервис достиг отметок в 1.75 млрд просмотров полномасштабных видео и 600 млн просмотров клипов в сутки.

Кроме того, ежедневная аудитория выросла на 300к пользователей и компания запустила «крупнейшую в истории компании программу поддержки авторов». Таким образом авторы получали 100% дохода от показа рекламы на платформе.

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

И вот вроде звучит все круто — в отличие от того же Rutube, мы видим, что владельцы площадки действительно заботятся о своем продукте. Постоянные новости от пресс-службы ВК, новые рекорды по просмотрам сервиса, новый функционал и прочее.

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

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

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

Разделы

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

P.s. На Ютубе такой проблемы нет.

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

На деле это субъективная оценка, но кажется, что VK Видео банально не хватает воздуха. Либо же автор сильно привык к Ютубу и ему кажется, что там все лучше.

Детский раздел

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

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

Тут сходу 2 минуса:

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

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

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

«Трансляции», «Спорт» и «киберспорт и игры» выглядят идентично. Единственное ключевое отличие, почему-то последний раздел обделили и внутренней фильтрации (которая под поиском) здесь нет. Хотя, как мне кажется, можно было бы вывести банальное «популярное» и несколько жанров/тематик.

Похожая ситуация с последними разделами. Выглядят идентично разделу «Детям». Карточки шоу/фильмов/сериалов с указанием названия, таймингов и кол-ву серий.

Странное решение связано с поиском. В отличие от прочих платформ, ВК старается прямо во время запроса выдавать вам результаты.

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

Например, во время запроса Baldurs Gate 3, я нашел какой-то эротический видос. Стоит поставить какой-то фильтр на 18+, что ли. Мне то уже далеко не 18, но вряд ли подросткам норм выдавать такие результаты)

Еще один минус, хотя это может быть связано с малым количеством просмотров. Наш канал в VK Видео называется «UXART | Студия интерфейсов», да-да, мы завели здесь аккаунт для репостинга.

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

Ни-че-го. Видосы от других каналов, которые никак не связаны с нами. За исключением «НЕОЧПОП», в котором мы принимали участие. Странно, грустно и обидно. VK, пожалуйста, начните высвечивать нас в поиске)

Плеер

А теперь про главное, как там поживает плеер ВК:

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

• Включать/паузить видос

• Менять громкость

• Включать/убирать сабы (не везде работает, например, сериалы и фильмы не поддерживают эту функцию)

• Менять качество и скорость видео

• В верхней части можно поставить лайк, репостнуть, переместить видос в «посмотреть позже» и «добавить себе» (создать плейлист).

P.s. на деле оказалось, что в 2023 году плеер все-таки обновили

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

Функционал верхнего меню также переместили под плеер. Здесь же находится название видоса, просмотры, лайки и описание. Еще ниже — комментарии. И вот давайте немного про них.

Внимание, кто кому и когда ответил?

Алексей написал Дмитрию в 3:03, но где Дмитрий в этой ветке комментариев? Правильно, вы его не найдете, так как он остался за кадром.

Я это к чему — у Вк если не худшая система комментариев, то одна из худших точно. Здесь нет базовой вещи, которая сейчас существует практически на всех ресурасах — веток.

Мы не знаем, почему и на что ответили Дмитрию и вряд ли узнаем, если не нажмем на «ответил Дмитрию» или собственноручно не перейдем к первому комменту.

Почему в 2024 году в редизайнутом сервисе нет такой банальной функции? Неужели комментарии здесь абсолютно не имеют смысла? Или просто кому-то было лень? Столько вопросов и ни одного ответа.

Переходим дальше — в правой части вы могли заметить рекомендательную систему. Она делится на две части — «Для вас» и «Другие видео».

Первый раздел пытается по вашей активности найти видосы, которые могут вам понравится. А со вторым все сложнее. Изначально мне показалось, что это «другие видео автора». Если я смотрю SG, следовательно, видосы от SG и так далее. Но спустившись чуть ниже я увидел «натальную карту». Что бы это ни было, но как оно относится к SG?

А дальше еще интереснее. Если вы нажмете на любой видос из этой подборки, то плеер изменится.

Теперь он шире, а раздел «Для вас» так и вовсе исчезает.

Канал пользователя

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

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

Видосы добавляются через отдельную вкладку:

А редактор видосов, ну, это и просто, и странно.

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

Сам редактор тоже не выделяется обилием функицй. И вот это мне кажется плохим решением. Что мы можем настроить в ВК:

• Название

• Описание

• Обложку

• Добавить видос в плейлист

• Назначить время публикации

• Дополнительный функционал (улучшение качества, скрыть сабы и зациклить видос)

Чувствуете, что чего-то не хватает? Да, здесь нет ни разделов, к которым относится ваш видос, ни тегов. Из-за этого в голове возникает вопрос — а как этот видос в теории может попасться по системе рекомендаций (вы упоминаете о ней отдельно) человеку, который интересуется тематикой?

И это мне кажется глобальной проблемой для новых (нулевых) авторов. Сколько угодно можно говорить о том, что теги Ютуба не работают так, как это было несколько лет назад, но все же. Маленькие каналы могли залетать в реки и делали это частенько. А что у наших хостингов?

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

…количестве видео, плейлистах, подписчиках и просмотрах, странах, популярных видосах и городах! Выкуси Ютуб, вот она, нужная статистика!

Без шуток, уже просто обидно становится за то, что мы не можем получить нормальную статистику. Мне как автору что дадут эти данные? Ровным счетом ни…

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

В разделе «Мои видео» находится та же инфа, но мы можем опуститься ниже и узнать пол/возраст, страну и платформу, с которой смотрели видео.

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

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

Вместо тысячи символов, вот информация с аналитики, которая действительно может помочь авторам:

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

Внезапный новый редизайн

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

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

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

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

• Нужно было найти раздел «история просмотров», но на главном экране его нет

• Чтобы его отыскать, нужно открыть «Мои видео»

• Пролистнуть в самый низ

• Перейти в соответствующий раздел

• Найти по дате видео, которое вы смотрели

• И только после этого продолжить просмотр

Появилась возможность добавить видос в категорию «смотреть позже», тоже база, притом до этого редизайна на декстопе эта функция у меня уже была. Может это A/B тест, а может на ПК она и так была до этого.

А вот следующая функция заинтересовала меня больше всего. Редизайн раздела «Подписки».

Хоть и не акцентно, но блок «подписки» виден сходу. Находится в верхней левой части экрана. Все удобно и понятно. А что с ВК?

Если вы подумали, что за подписки отвечают человечки или самая нижняя иконка, то вы не правы. Подписки у ВК это отзеркаленная иконка Wi-fi соединения. Почему, а главное зачем было выдумывать велосипед? На этот вопрос, как и на многие из этой статья, я не смогу дать адекватного ответа.

Кроме непонятной иконки, вопрос в расположении иконки. Сам я редко переходил в раздел «подписки» даже на Ютубе, но мне кажется, что размещать её в нижней части экрана — крайне странное решение.

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

А вот при входе можете удивиться. Хоть и ненадолго.

Все дело в том, что VK Видео входит в общую экосистему VK. Именно поэтому сервис автоматически подпишет вас на все каналы, сообщества которых выкладывали видео. Я лично забыл, что подписан на большую часть этих групп, но пусть будет так.

И мне кажется, что это хоть и странное, но весьма интересное решение.

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

Интересное потому что вам не придется искать каналы, которые в теории вам могут быть интересны.

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

Редизайн закончился, спасибо за внимание.

P.s. отдельно можно было бы разобрать и VK Play Live, как отечественный аналог Twitch. Но последний пока еще не замедляют, так что оставим эти сравнения до лучших (худших) времен.

И здесь мы плавно возвращаемся к проблеме, которая была у Rutube, есть у ВК и будет у Дзена с прочими аналогами Ютуба — контент. Сколько бы людей не заливало видосы, мы никогда не достигнем того количества, которое залили пользователи Ютуба за многие годы.

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

Ютуб это не просто платформа с видосами про игры, образование, путешествия и прочее. Это огромный ресурс практически со всем, что может понадобиться вам в случайный момент жизни. Сломался холодильник? Посмотрите гайд и почините. Не можете открыть Warcraft 3 2002 года? Посмотрите, как включить его на современных устройствах. И так далее.

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

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

Стоит отметить, что ВК во многих аспектах опережает Rutube. Однако, этого все равно мало для того, чтобы стать убийцей YouTube. Хороший ли сервис ВК Video? Скорее да, чем нет. Многие проблемы не такие серьезные, как у того же Rutube, а с ботами хоть и неприятно, но это не главный минус платформы.

Главный минус, кроме отсутствия такого количества контента, в том, что выбирая между YouTube и VK Видео, мало кто обратиться к отечественному ресурсу. Такова жизнь, мы привыкли к удобству Ютуба и смысла уходить от него попросту нет.

А также не забывайте подписываться на наш телеграм-канал. Там мы обсуждаем дизайн, внутрянку и экспериментируем с контентом: https://t.me/konakov_blog

Но перед началом — работа Rutube в одной картинке. Я запостил это в свой тг-канал, где подписчики знатно посмеялись над ситуацией:

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

К сожалению, сейчас ситуация изменилась. Ютуб замедляют, каждый день перебои случаются все чаще, а многие обходы и VPN уже не могут гарантировать качественный просмотр новых видосов Влада А4.

Как обойти эти замедления мы не расскажем, ибо сам РКН просит этого не делать, а мы не сильно хотим с ним проблем. Но найти гайды вы можете по первой ссылке в Гугле. Который, к слову, по многим инсайдам тоже скоро заблокируют.

И что делать нам — пользователям и авторам, которые ежедневно пользовались этой платформой? У нас есть два пути:

— Попрощаться, выйти на балкон и вспоминать прекрасное прошлое, пытаясь найти адекватный аналог

— Пытаться обходить замедление.

В сегодняшней статье мы рассмотрим главный российский аналог. Но в будущем планируем сделать 3 полноценные статьи про:

1. Великий и ужасный Rutube

2. Ребрендинговый VK ВИДЕО

3. И пережиток Яндекса под названием Дзен

В первую очередь рассмотрим сервисы в плане удобства для пользователей и авторов, а уже потом, если статья не станет огромной, попробуем поискать ошибки с точки зрения UX/UI. Присаживайтесь поудобнее, заварите чайку и обязательно дочитайте до конца. Быть может, выводы вас удивят.

Итак, великий и ужасный Rutube. По мнению создателей это —

«Ведущий российский видеопортал, предлагающий к просмотру тв онлайн, кинофильмы, сериалы, мультфильмы и пользовательское видео. Смотри. Создавай. Загружай.»

Информация взята из SEO описания главной странички, так что не удивляйтесь.

Лирическое отступление: вся статья пропитана болью автора, который много лет потратил на Ютуб, поэтому некоторые моменты статьи будут субъективными. Просьба понять и простить, если в некоторых моментах Никита будет перегибать.

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

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

Ниже «Для вас» — для кого «вас», если пользователь впервые зашел на сайт? Почему вы так уверены, что мне понравится гайд по скачиванию «ВПС офиса», «ЭЧПОЧМАКИ» и «Русская рыбалка 3.99»?

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

А вот Рутуб так не думает, он просто слегка увеличил превью видосов, но кол-во контента на экране оставил прежним.

Но погодите, сверху еще какие-то категории, а что будет, если мы нажмем на них?

Для того чтобы узнать ответ на этот вопрос, нужно авторизоваться или создать аккаунт. И работает это с каждой категорией. Это можно обосновать желанием повысить конверсию в регистрации, Rutube, как ни как, бизнес. Но если мы сравниваем подходы Ютуба и Рутуба, то видно, что на первом сервисе таких «квестов» с регистрацией нет.

Но на главной ведь мир клином не сошелся, пользователи заходят на видеохостинги ради просмотра видосов. А значит, что самое главное на таких сервисах сами ролики. Мы привыкли, что Ютуб это бесконечная лента, где рано или поздно, но ты сможешь найти нужный контент. А что происходит на Рутубе?

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

А лента Рутуба представляет собой сборку этих самых категорий)

Здесь есть все — и выборка самого сервиса и «ТОП-5 видосов» (которые выбираются, видимо, наугад, у третьего видоса и просмотров, и лайков больше, но ладно), и внезапные ТВ-каналы.

Все это выглядит, как огромный рынок, на который ты случайно попал и не знаешь, что делать дальше. Ну и сама лента, естественно, из-за такого подхода, быстро заканчивается. Из грустного — быстрый скроллинг страницы ломает ваши ФПС и превращает сайт в слайд шоу.

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

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

Конкуренция это круто. Развитие отечественных видеохостингов — круто. Но когда тебя вынуждают переходить от хорошего сервиса к не самому хорошему, у тебя сразу возникают вопросы. Быть может это проблема привычки — Ютубом то мы пользуемся много лет, а о наших сервисах лишь слышали от кого-то другого, но все же. Рутубом чисто по главной странице не хочется пользоваться ни на постоянке, ни в качестве временной замены.

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

И вот здесь идеальное место для исторической справки. Если вам не хочется знать, как вообще появился Рутуб и как менялся его дизайн за почти 20 лет, предлагаю скипнуть эту часть)

Краткая история

В 2006 году Олег Волобуев и Михаил Паулкин решили создать свой отечественный видеохостинг. И уже в 2007 сервис заинтересовывает частных инвесторов в лице фонда Mangrove Capital Parnters и, что самое интересное — холдинга «Газпром-медиа» (далее ГМ).

Судя по статье Коммерсантъ, датируемой 2007 годом, ГМ на тот момент входило на рынок интернета с большим опозданием, поэтому переплачивает, покупая раскрученные ресурсы. В этой же сводке говорится, что ГМ рассматривает возможность выкупа Rutub под 90% от уставного капитала компании и по стоимости им бы это обошлось в $5-10 млн.

Для лучшего понимания, именно так выглядел Rutube в 2006 году. Ежедневное кол-во пользователей — 150 тысяч человек, а число загрузок видео до 20 млн в месяц.

При этом, по словам экспертов тех лет, ценник в 5-10 млн долларов сильно завышен. А пресс-секреталь «Финама» Владислав Кочетков так и вообще говорил — «Если покупать одного пользователя по среднерыночной цене $10, то получается $1,5 млн. Ничего уникального в RuTube нет, достаточно нанять программистов на пару месяцев, и они вам сделают все то же самое.»

Тем не менее, к 2008 году ГМ приобретает контрольный пакет акций RUTUBE. Сама платформа на тот момент продолжила работу в трех направлениях: видеосервис, видеохостинг и медиа-площадка.

При этом, планировались новые суббренды — RuTube movie, RuTube спорт, RuTube music, RuTube news, RuTube юмор. А.К.А Ютубовским сервисам. Однако, на сегодняшний день это не отдельные сервисы, а категории на основном Rutube.

На протяжении своей жизни Rutube получал разные обновы и добавлял новые сервисы с покупкой лицензионного контента:

— В 2011 появляется контент от Sony Pictures, The Walt Disney Company, Warner Bros., Playboy, Lionsgate, BBC, MTV и Nickelodeon.

— В 2012 изменился логотип и позиционирование, чтобы отличаться от своего западного брата

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

— В 2015 Rutube становится партнером детской поисковой системы «Спутник.Дети», тем самым предоставив контент из безопасного детского раздела в поиске.

— Летом 19 появляется новый проект List — без рекламы, но для получения доступа нужно было пройти опрос и авторизоваться через систему Pass.Media.

— И в апреле 2021 и апреле 2022 было проведено два глобальных редизайна.

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

Хотя, конечно, последний тоже можно бесконечно ругать за разного рода странные решения. Например, за удаление каналов без суда и следствия или за блокировки видосов из-за наличия N-word и прочего.

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

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

P.s. Был один интересный случай, который произошел с Rutube весной 2011. РПЦ освятило сервера Rutube — сделано это было с целью «одухотворения человеческой деятельности». Зачем, почему и прочие вопросы задавать не будем.

А теперь пора вернуться к современным проблемам.

Каталог

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

— Зачем выводить ТАКИЕ огромные карточки?

— Почему «Фильмы» так ярко выделяется на фоне остальных разделов?

— Что за странные 3D иллюстрации? Зачем они, почему нельзя это было сделать не таким монструозным?

— Кстати, это не вопрос, а минус — каталог растягивается чуть ли не на полноценный скроллинг.

Как это можно решить: просто сделать категории списком, ну или же, если вам нравятся 3D иллюстрации, расположить их равномерно на странице.

Мы зашли в соответствующий раздел. Видеоигры — выглядит абсолютно так же, как и главная. И содержит те же проблемы. Какие-то видео выводятся в верхнюю часть страницы, почему-то в Топе видосы не по кол-ву просмотров, а по магии Рутуба, да и в целом все выглядит как рынок. Все снова перемешано.

И да, почему ближе к нижней части вы выводите уже отдельно блогеров?

Единственный раздел, который имеет существенные изменения — «В топе». Здесь мы наконец-то встречаем бесконечную ленту, которую, правда, нужно прогружать вручную… и видосы от разных пользователей.

О том, что в верхней части выделены популярные каналы уже не хочется говорить. При всем уважении к Дмитрию Пучкову, зачем мне знать, что он 4-й по популярности и обгоняет канал «Стас Ай, как просто!»?

И вот к плееру у меня, как у пользователя, вопросов нет. Насколько я знаю, раньше не было таймкодов и веток комментариев (это когда пользователи общаются друг с другом и открывается ветка). Сейчас это есть, поэтому тут точно могу сказать — молодцы. Все удобно. Единственное пожелание — добавьте субтитры.

Это вообще база инклюзивности, которая должна быть везде — есть же люди с проблемами с частичной или полной потерей слуха, даже на телевизорах есть сгенерированные субтитры передач, а на Рутубе от этого решили отказаться в пользу… чего?

А, ну и Yappy, который внезапно появился, смущает.

Rutube Studio

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

Далее — а где посмотреть просмотры последнего ролика? Инфа о подписчиках, хорошо, недавно загруженные ролики (сомнительно, но окей) и настройка описания канала — серьезно?

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

Но наверняка вся инфа во вкладке видео?

Ан нет, здесь мы видим только просмотры, дату загрузки и видео, которые находятся на модерации/выпущены/отклонены. Из интересного, верхние 5 шортсов находятся на модерации уже 7 часов.

А что будет, если мы нажмем на нужный видос?

Аналитика находится в отдельной вкладке. Но содержит она примерно 0 полезной информации. Для того, чтобы открыть всю инфу (ну, которую Рутуб дает) нужно переключаться на другие вкладки.

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

Давайте просто для сравнения вспомним, как выглядит аналитика на Ютубе.

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

А еще есть вкладки «контент», «аудитория» и «идеи для видео» с дополнительной инфой в расширенном режиме.

Буквально все, что может быть вам интересно находится в одном удобном месте. Тогда как Рутуб пока что выглядит, как демо-версия на фоне своего старшего брата.

Но стоит отдать должное, на Рутубе есть своя киллер-фича — перенос видосов с Ютуба. Аплодирую стоя, это действительно то, что нужно пользователям сейчас.

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

На скрине видно, что видео отклонено модерацией. Но почему? Вместо того чтобы указать конкретный пункт, нам высылают пользовательское соглашение, которое без преувеличения занимает 65 страниц, 13 713 слов или 116 387 символов. Вот и сиди, гадай, в каком пункте у тебя была ошибка.

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

Пишите в тг Артему Юрьевичу, будет быстро, недорого, а сервис станет сильно удобнее как для пользователей, так и для авторов: https://t.me/konakovart

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

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

Однако, главный минус Рутуба, от которого он никогда, при всем желании, не сможет избавиться — сам контент. Вспоминаем, что запущен сервис был почти 20 лет назад — в 2006 году.

В 2024 году среднее количество пользователей в день составило 4.4. миллиона человек. И цифра это звучит хорошо.
Даже, несмотря на то, что по исследованию 2024 года Ютубом в РФ пользовались 90+ млн.

Ютуб открылся годом ранее — в 2005 году. Пользователей больше, а значит, что и авторов больше. Платформа активно развивалась все эти годы и совершенствовалась.

Сама притягивала автором системой монетизации (которую, к слову, 12 июня в России отключили полностью).

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

И даже если бы инфа по количеству видосов на Рутубе была в открытом доступе (может мы мало искали), то цифра была бы значительно ниже.

И как бы Рутуб не совершенствовался, как бы ни добавлял новых функций, не избавлялся от старых, не закупал рекламу и т.д… Ему просто не догнать Ютуб.

Контента всегда будет меньше. Ютуб сейчас это огромная библиотека видео пользователей из 100 стран мира. На разные тематики, с разным мнением, разным отношением к тем или иным вещам. И из этого списка больше всего прельщает именно наличие видосов от авторов из разных стран. На Рутубе же всегда будем только мы — люди из СНГ. Это не плохо, это просто факт.

Мы не сможем собрать такую же огромную библиотеку видосов, просто потому, что вспомнили об этой площадке все только сейчас.

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

Если бы Рутуб развивался все эти 18 лет, у многих не было бы проблем с переходом на отечественную площадку. Да, она все равно бы отличалась от Ютуба. Но наверняка была бы сильно лучше того, что мы видим сейчас.

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

Перейдете ли вы на Рутуб или будете искать обходные пути доступа к Ютубу? Пишите об этом в комментариях. А также дайте совет нашему сервису — что бы вы хотели видеть на Рутубе?

А также не забывайте подписываться на наш телеграм-канал. Там мы обсуждаем дизайн, внутрянку и экспериментируем с контентом — https://t.me/konakov_blog