Интерфейсы *

Привет, Хабр! Меня зовут Павел Литвиненко, и я уже шесть лет как продуктовый дизайнер. Третий год работаю в «Лаборатории Касперского» в отделе 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-спрайты — лучшая из возможных альтернатив.

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

Привет! Меня зовут Альберт Геворкян, я Product Lead в МТС Финтех. Здесь поделюсь опытом, как за время моей работы радикально обновился онлайн‑банк для бизнеса, доля продаж через платформу выросла на 25 п.п., а удовлетворённость клиентов — на 50%.

Это небольшое дополнение к статье Проект по Air Quality sensor, идея, концепция, дизайн и почти: реализация. Если вы её не читали, то лучше начать с неё, будет понятна предыстория и как развивалась концепция взаимодействия с пользователем и AQ. А мы пойдем по классикам и коротко разберем, разработку проекта от потребностей до дизайна.

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

Осенью 2025 года заканчивается официальная поддержка Windows 10. Для миллионов пользователей и компаний окончание поддержки ставит вопрос о выборе дальнейшей стратегии. Наиболее очевидный путь — переход на Windows 11, однако его могут ограничивать более строгие аппаратные требования. Конечно, найдутся пользователи и организации, которые предпочтут продолжить эксплуатацию Windows 10 и после окончания официальной поддержки. У такого подхода есть свои плюсы, в первую очередь — отсутствие немедленных затрат на обновление железа или переобучение персонала. Однако минусы этого решения крайне серьезны: растущие уязвимости из-за отсутствия обновлений безопасности, потенциальная несовместимость с новым программным обеспечением и риски несоблюдения требований регуляторов, особенно для бизнеса. Таким образом, каждая стратегия требует тщательной оценки рисков и затрат.

На мой взгляд, стратегически верным шагом в данной ситуации  является миграция на Linux. Но что делать армии программистов, годами создававших приложения под экосистему Microsoft? Приложения на .NET Framework, WPF и WinForms — это кровь тысяч корпоративных и бизнес-систем. Полное переписывание их на другие технологии — это колоссальные затраты времени и денег. Однако существует элегантный и экономически выгодный путь, который не только решает проблему совместимости с Linux, но и открывает новые горизонты для разработки. Этот путь — кроссплатформенный фреймворк Avalonia UI и современная платформа .NET.

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

Картинка: prostooleh, freepik.com

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

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

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

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

Ниже будет некоторый обзор темы, после чего, мы плавно придём к ОЧЕНЬ интересной (на мой взгляд) идее, думаю, что будет интересно!

Мы видели будущее, и будущее в основном синее.

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

Дизайнеры и поклонники научной фантастики Крис Носсел и Натан Шедрофф потратили годы на сбор реальных уроков, которые дизайнеры могут, должны и уже извлекают из научной фантастики. Их книга «Make It So: Interaction Design Lessons From Science Fiction» («Сделай так: уроки дизайна взаимодействия из научной фантастики») представляет собой исчерпывающий сборник их выводов.

Это небольшое дополнение к статье https://habr.com/ru/sandbox/258638/. Если вы её не читали, то лучше начать с неё, будет понятна предыстория и как развивалась концепция взаимодействия с пользователем и AQ. А мы пойдем по классикам и коротко разберем, разработку проекта от потребностей до дизайна ):

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

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

Высокая конкуренция — это всегда стресс, но это не значит, что действовать нужно наугад в надежде, что в итоге количество перейдет в качество… может не перейти. Про графический дизайн не берусь судить, но в дизайне интерфейсов, UX/UI главная задача — сделать удобно, понятно и эстетично. Ровно эти же требования предъявляются и к хорошему портфолио т.е. умелый UX/UI дизайнер вынужден подходить к своему портфолио «юиксово», но к сожалению так бывает далеко не всегда.

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