Разбираем сайт умных колонок ВК вместе с дизайнерами busy studio: смотрим на классные фичи, странные решения и метрики

Привет, это Лиза из Лиги А.! Мы вернулись с любимым форматом «Разборка» — взяли продуктовый сайт ВК, посмотрели на их главную страницу и разделы с колонками. Привлекли дизайнеров и разработчиков, чтобы разобрать фичи, решения и метрики. Рассказываем, что понравилось, а что не очень.

Это уже четвёртый выпуск, где мы разбираем сайты с интересными анимациями/фичами/задумками, которые нас зацепили. Смотрим на него как пользователи, а потом — как разработчики. Оцениваем метрики сайта и разбираемся, как его улучшить. На этот раз, мы взяли сайт с умными колонками от ВК.

У нас есть и прошлые выпуски, которые стоит глянуть. Смотрите, как мы разбирали:

— Сайт пива с анимациями

— Авиасейлс и его классные фичи вместе с Bauns

— Странные решения Циан вместе с UXART

Небольшой оффтоп и сразу начнем разбор

Мы тут задумались, что у других ребят из студий есть прикольные проекты и названия для них. Если следите за диджитал-рынком, вам должны быть знакомы такие слова как: «Качалка», «Смотрины», «UX-патруль» и прочее. Чтобы выделяться, решили придумать и для наших разборов название…

✨Разборка✨

Пишите в комментариях насколько из 10 оценивайте нейминговые способности нашего редактора Леры. А мы пока начнём.

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

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

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

В целом, виден эпловский подход — мало пишешь, много показываешь. Продаешь не продукт, а лайфстайл: «Я хочу так жить». Технологично, умно, стильно. Apple также напоминает шрифт-гротеск, минималистичная верстка.

🔥 Лендинг выделяют визуализации и фотостиль

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

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

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

На экране с преимуществами кажется непоследовательная мысль внутри карточек. Читаю как «Динамика 3 → кристально чистые верхние ноты и глубокие басы».

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

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

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

👍 Отдельно хочется отметить экран с фичами

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

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

Из симпатичного на странице есть:

Страница выглядит в разы проще, чем Нео — понятная, но не тёплая. Есть нескладные места, например, картинки и подписи к ним не подходят по смыслу.

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

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

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

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

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

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

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

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

Скорее всего, решение с видео приняли осознанно, чтобы первый блок на странице был красивым и презентабельным. Можно ли ещё оптимизировать видео? Определённо да. Стоит ли снижать качество контента в угоду метрике — спорно, но скорее нет.

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

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

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

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

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

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

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

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

Также заметили неверную структуру заголовков

В разработке делают так: идут от заголовка первого уровня до заголовка шестого уровня. В таком порядке они должны оставаться до конца и не меняться местами. Например, H1, H2, H3, H4, H5 и H6. По сути, они помогают отделить более важную информацию от менее важной. Поэтому когда их нет — «важность» блоков теряется.

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

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

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

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

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

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