Интерфейсы *

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

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

Мы будем делать схематичную анимацию фейерверков и конфетти по нажатию на кнопку при помощи JS. Изученные принципы универсальны для любого ЯП. Нам понадобится немного знаний ООП, тригонометрии, физики и совсем чуть-чуть геометрии. Вот что получится в итоге:

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

Снова, снова и снова, речь пойдет о утерянной технологии древних Pan-N-Scan. 

Оставлю прелюдии на потом. Чё делать то? 

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

Доступность интерфейсов в web3 и финтех-проектах по-прежнему редко рассматривается как обязательная часть архитектуры. Чаще всего внимание уделяется визуальной составляющей и функциональности, тогда как сценарии использования без мыши или без экрана остаются вне фокуса. В этом разборе я анализирую доступность Moni с точки зрения незрячего пользователя (сам являюсь им) и параллельно даю конкретные технические рекомендации, которые могут улучшить удобство использования интерфейса в целом.

Привет, Хабр! На связи Дима Мандельштам, мобильный разработчик в core‑команде Яндекс 360, и Лёша Карпенко, руководитель команды дизайн‑системы. Дизайн — часть повседневной работы наших команд, и он не живёт отдельно. Поэтому сегодня в статье мы вместе поговорим о том, как мы собирали компонент List‑item.

Мобильные разработчики в этой статье найдут метод, с которым можно достичь баланса между гибкостью кода и простотой поддержки. Мы расскажем, как применили data‑driven‑подход к рефакторингу UI: написали анализатор AST для поиска реальных паттернов использования и вывели математическую метрику сложности API. А ещё расскажем о том, как аргументировать и провести масштабную переработку legacy‑кода, не останавливая продуктовую разработку.

Продуктовым дизайнерам будет интересен альтернативный взгляд на проектирование List‑item в дизайн‑системе. Мы разберём, как собирать List‑item — как универсальный компонент с максимальной гибкостью или как набор семантических шаблонов под конкретные сценарии.

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

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

Всем привет! Написал сервис для проектирования интерфейсов с возможностью импорта и экспорта Vue шаблонов.

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

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

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

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

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

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

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

Контекст здесь тоже играет решающую роль:

Что делать проектировщику пользовательского интерфейса, чтобы не выглядеть белой вороной в глазах бизнеса, когда требуется выявить, показать и обосновать объективную сложность (масштаб) интерфейса цифровых продуктов B2B?

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

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

Цель материала — показать работающие решения, которые уже используются в крупных интернет-магазинах, и помочь командам e-commerce ориентироваться в актуальных UX-подходах при развитии своих проектов.

Всем привет, меня зовут Паша и я Head of QA. Ну… был им до недавнего времени. Мы оказались в банальной ситуации: проект пришлось приостановить по независящим от нас причинам — и я снова оказался «в поиске интересных возможностей».

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

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

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

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

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

Если хотите — вот сайт: pavel.rocks (для полного погружения лучше смотреть с десктопа, под мобилу я постарался адаптировать на современный лад).

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

Редизайн сайта Артемия Лебедева – каждый раз, когда я заходил на сайт tema.ru мне становилось интересно, а как можно его обновить. И вот однажды идея появилась, а потом проросла в моей голове. Сайты умираю, ИИ развивается и нам нужен принципиально новый формат. Шалость удалась — с радостью делюсь с вам получившимся результатом.

Задача. Сделать редизайн сайта.

Важно. Это не коммерческий заказ, a просто моё упражнение и развлечение для души и мозга.

Привет, Хабр! Меня зовут Данила Максишко, я руковожу отделом продуктовых исследований и клиентского опыта в hh.ru. В статье я хочу поделиться историей ресёрча, который многое дал компании. Речь пойдёт о главной странице hh.ru для работодателей, которую мы успешно обновили с помощью исследователей.

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

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

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

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

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

Но на самом деле – о другом: кто должен нести бремя неопределённости – человек или система?

Привет! Меня зовут Сергей Федоричев, я младший проектировщик интерфейсов в Selectel. Когда я был студентом, у меня, как и у многих, было довольно романтизированное представление о работе UX-дизайнера в IT. Казалось, что главное — уметь проектировать интерфейсы, знать паттерны и аккуратно работать с макетами.

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

Инновациям нужно не только «своё время», как Sega Channel и Motorola Ирмдиум, но и своё место. Когда тебе отказывают 99 процентов потенциальных партнёров и крупные игроки, ты стартуешь как придаток для обновлений довольно местечкового проекта, чтобы вырастить потом из этого всепожирающего монстра. Дядя Габен не даст соврать. И пока ребята из VK неторопливо, сквозь фильтр процессов бюрократии, ресеча и верификации, внедряют мои идеи, я, будучи не скованным формальными обязательствами, иду туда, где лучшие решения могут случиться.

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

А потом мой заказ выбросили в мусор (но это неточно, может быть, всё-таки съели).

Субботним днём я решил заказать родителям к воскресному обеду что-нибудь вкусное, зашел в Яндекс.Еду, выбрал их адрес из сохраненных закладок, набрал всякого в корзину, оформил заказ, предупредил папу и забыл об этом. В воскресенье звонит папа и рассказывает, что курьер попросил его открыть шлагбаум (которого отродясь не было), а после некоторого обсуждения выяснилось, что заказ приехал несколько в другую точку Большой Москвы, и привезти по нужному адресу его никак не смогут, а деньги оставят себе. Конечно, я написал в поддержку, где несколько подряд сотрудников уверяли меня в том, что заказ был оформлен на неверный адрес, и в таких случаях деньги не возвращаются, а идут на компенсацию расходов поставщику (читай – в лучшем случае сотрудники разберут по домам то, что ты заказал, в худшем – выкинут в помойку). Было полное ощущение разговора слепого с глухим: правильный  адрес в заказе, а привезли куда-то не туда.

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

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

Автор блога XacPC Dev Labs Павел Осадчук вспоминает, как Microsoft неоднократно пыталась решить одну и ту же проблему пользовательского интерфейса с 1997 года, связанную с виджетами. Он насчитал шесть попыток реализаций такого интерфейса за 30 лет. 

Добро пожаловать в будущее, где болезнь — это не приговор, а повод купить очередной гаджет. Вы только посмотрите на этот документ! Университет Колорадо, при поддержке Пентагона (DARPA) и Национальных институтов здоровья (NIH), предлагает нам лечить рассеянный склероз и прочие тяжелейшие неврологические заболевания с помощью... наушника. Да-да, вы не ослышались.