Интерфейсы *

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

Привет! Меня зовут Даша Боровик, я руковожу командой экспертов по клиентскому опыту в RUTUBE. База юзабилити-проблем сервиса — одно из детищ нашей команды. Как и многие в индустрии, мы сталкиваемся со сложностями в управлении CX-долгом и ищем свой подход. 

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

Привет! Меня зовут Наташа, я ведущий исследователь в RUTUBE. Я изучаю поведение и потребности пользователей, чтобы помогать продуктовой команде улучшать опыт зрителей и авторов RUTUBE.

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

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

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

Существует много известных методологий оценки удобства использования веб-сайтов и приложений (UMUX, SUS и т.д.). Есть также комплексные метрики, где оценка внешнего вида является одним из измеряемых критериев (например, SUPR-Q). Но широко применимых методологий для оценивания именно визуальных характеристик интерфейса, которые подходили бы под наши задачи, нет.

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

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

В этой статье я покажу, как использовать исходный код Bootstrap (SCSS), настроить модульную структуру и подключить только те компоненты, которые действительно нужны. Результат — чистая архитектура стилей, меньший размер сборки и удобный фундамент для будущей дизайн-системы.

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

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

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

Наше исследование подтверждает, что агрегаторов в топ-10 по коммерческим запросам действительно много (Habr), но это не означает, что у сайтов сетей отелей нет шансов.

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

Почему агрегаторы действительно сильнее

1.Фактор бренда
Пользователи часто ищут агрегаторы напрямую: «Booking», «Островок» и другие. Доверие к бренду повышает кликабельность в результатах поиска и снижает показатель отказов. Значительная доля трафика по брендовым запросам обеспечивает сайтам агрегаторам высокие позиции в результатах поиска Яндекса.

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

На плате, которую я использую для примера (QMTECH Cyclone 10 Starter Kit), есть разъём HDMI, что недвусмысленно намекает нам, что к нему можно подключить дисплей соответствующим кабелем. На самом деле, разъём – это не обязательно. А вот наличие на чипе выходов, которые можно сконфигурировать как lvds, очень сильно приветствуется. Возможно, получится и без этого (просто 2 выхода, формируемые из одного инверсией), но я не пробовал, потому промолчу.

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

Мы будем работать на более низком уровне. Делать на коленке прозрачные электроды, и наклеивать поляризационные плёнки, конечно, не надо. Будем формировать видео-сигнал.

Если вы думаете, что в 2025-м году ЭЛТ мониторы и телевизоры остались в далёком прошлом, то у меня для вас есть новость: Формат сигналов внутри проводов всё ещё напоминает сигнал, который идёт на одну из сеток большой вакуумной лампы, которой, по сути и является кинескоп.

Современные интерфейсы не готовы к эпохе LLM.

Мы общаемся с самыми мощными AI-моделями через интерфейсы, спроектированные для переписки с людьми. Линейный чат, где невозможно работать с отдельными элементами ответа. Бесконечные итерации с потерянным контекстом. Копипаст вместо манипуляции объектами.

APPARAT — это концепция AI-first интерфейса, где:

Данные пользователя и ответы LLM становятся интерактивными объектами с собственными свойствами

Гранулярная работа с элементами запроса и ответа вместо монолитных текстовых блоков

Геймификация не ограничивается бейджами — весь интерфейс проектируется как «гаджет внутри гаджета»

Антропоморфизм AI объясняет различия между человеком и моделью, а не имитирует человеческое поведение

Это манифест нового подхода к проектированию интерфейсов для работы с искусственным интеллектом. От принципов эргономики до объектно-ориентированного UI. От идеи до первой концепции дизайна.

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

За 8+ лет работы над маркетплейсами, криптобиржами и Web3 продуктами я убедился, что продукт с реальной ценностью начинается с правильных исследований. 

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

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

Привет, Хабр! Меня зовут Павел Литвиненко, и я уже шесть лет как продуктовый дизайнер. Третий год работаю в «Лаборатории Касперского» в отделе Design and Research Office и с момента присоединения к компании занимаюсь созданием интерфейсов для Kaspersky NGFW вместе со своими коллегами Чечуриным Антоном, Пениной Валерией и Кузнецовым Максимом. До этого разрабатывал B2B-платформу торговли с закупщиками для производителя транспортной и потребительской упаковки, а также строительной и химической продукции. 

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

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

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

Research Vision — приглашение к дискуссии о следующем поколении человеко‑машинного взаимодействия

Уверен в том, что Вас когда‑нибудь раздражало, что ИИ объясняет «слишком подробно», когда нужен один ёмкий абзац?

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

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


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

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


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

При создании интерфейса важно проверить, как он реально выглядит. Часто это проверяют все участники процесса — от разработчиков до менеджеров. И для автоматизации и упрощения процесса визуального тестирования приложения есть специальный инструмент — golden‑тесты. Это методология тестирования, в которой текущий UI сравнивается с предварительно сгенерированным «золотым» эталоном. Если вы уже слышали про скриншот‑тесты — это примерно то же самое, но есть нюансы.

Меня зовут Даниил Липаткин, я тимлид в команде разработки курьерского приложения Яндекс Доставки. В этой статье:

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

— Напишем базовый Golden‑тест на примере стандартных инструментов библиотеки flutter_test.

— Рассмотрим пакет alchemist, который решает проблему платформозависимости flutter_test.

— Получим прикладные рекомендации по применению тестов и настройке IDE и CI.

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

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

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

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

Привет, Хабр! А вот и первый дайджест новостей дизайна этой осени. С вами снова Андрей, продуктовый дизайнер Garage Eight, и восемь новостей, которые зацепили мое внимание: 

1. Обновленный дизайн «Магнит Маркет»
2. Новый логотип и стиль Lamoda
3. Крутой сайт-портфолио
4. «Евровидение» обновило свой логотип
5. Функция отслеживания покупок и доставок в Gmail
6. Гайд по использованию Nano Banana
7. Концепт-кар от Audi
8. Prompt on canvas в Figma

Мы публиковали статью «Что нужно знать о современном CSS» в прошлом году (2024), и какое-то время я сомневался, хватит ли материала, чтобы сделать новую версию. Но время идет — и CSS развивается вместе с ним. И знаете что? В этом году новинок даже больше, чем в прошлом. Этот (пусть и немного субъективный) список можно рассматривать как подборку «возможностей, которые, по мнению Криса, стоит знать — будь то совсем новые или те, что недавно получили хорошую поддержку в браузерах».

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

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

Иконочные шрифты — лучшие!

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