Дизайн

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

Меня зовут Антонина, я дизайнер интерфейсов ЮMoney. Мы изучили десятки исследований — от Baymard Institute до Google web.dev. Единого документа с лучшими практиками не нашлось: источники противоречили друг другу или оказывались слишком общими.

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

Привет, Хабр!

На связи Андрей, продуктовый дизайнер Garage Eight.

В июле собрал много интересного: от промышленного дизайна и громких ребрендингов до немного космических новостей от OpenAI.

В этом выпуске:

1. Награда Red Dot для техники Tuvio;

2. Микро-клавиатура для работы с Codex;

3. Возвращение Coca-Cola к истокам;

4. Обновленный Tinder;

5. Превращение Freepik в Magnific;

6. Ребрендинг Stack Overflow;

7. Новые модели GPT 5.6;

8. Библиотека дизайн-студий со всего мира;

9. Неоднозначная айдентика ФК «Родина».

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

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

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

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

От концепт-дизайна велосипедного магазина до релизной web-игры на GitHub Pages — и почему документация оказалась важнее промптов.

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

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

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

Мы уже разобрали анатомию страницы (HTML) и её визуальное оформление (CSS) (1, 2, 3). Но как увидеть это всё вживую? Как понять, почему кнопка на сайте съехала на два пикселя ниже, чем в вашем макете?

Ответ прост — инструменты разработчика (Developer Tools, или сокращённо DevTools). Это встроенный во все современные браузеры набор утилит, который позволяет в реальном времени просматривать код, стили и структуру любой веб-страницы. Для дизайнера это не просто любопытная игрушка, а незаменимый инструмент для проведения авторского надзора.

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

Этот подход плзволяет избавиться от таких проблем, как: неактуальность макетов для разработки, долгий поиск макетов и задач в фигме, протухание информации в макетах, увеличение memory usage и долгая загрузка файлов.

buildingSMART готовит новую версию открытого BIM-стандарта IFC5. Здесь, в отличие от монолитной ООП-иерархии (IFC2x3, IFC4), применяется компонентный ECS-подход (Entity Component System). То есть в IFC5 объект собирается из независимых частей (геометрия, материалы, свойства), которые можно комбинировать и пересобирать отдельно друг от друга. Разработка ведётся публично в репозитории buildingSMART/IFC5-development/ на GitHub, финальная спецификация пока не выпущена.

Однако ниже будет не про IFC5, а о том, что...

Девять чисел из научной статьи 2009 года сегодня работают у меня в четырёх местах: на HTML-странице, в canvas, в двух плагинах Figma и в чужом расширении для Chrome. Разбираю, как одна и та же матрица цветовосприятия ведёт себя в четырёх средах, где каждая среда сопротивляется по-своему — и почему честные ограничения инструмента важнее его возможностей.

Весной 2026 года Starbucks в Южной Корее запустила промо Tank Day со скидками на большие термокружки (одно из значений слова tank по-английски — резервуар для жидкости). Идея выглядела безобидной ровно до запуска. Старт пришёлся на 18 мая. В этот день в Корее вспоминают восстание в Кванджу: продемократический протест, который военные подавили танками; в результате погибли сотни людей.

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

Привет, Хабр! Меня зовут Диана Фионина, я исследователь клиентского опыта и рынка в экосистеме ит-продуктов Лукоморье. В этой статье расскажу, почему клиентский опыт часто нельзя просто «перевести» с одного рынка на другой и что стоит делать вместо перевода. На реальных кейсах, от Starbucks в Японии и WeChat в Китае до службы поддержки в трёх странах СНГ, я разбираю, как культура влияет на восприятие сервиса и как превращать культурные наблюдения в проверяемые продуктовые гипотезы.

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

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

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

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

Мне нравится создавать ASCII-арт в Vim. Я не пользуюсь никакими плагинами: в Vim уже есть множество встроенных фич, очень полезных при рисовании ASCII!

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

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

Рекомендую сначала освоить основы (например, открытие файла, переключение между режимами, сохранение и выход). Если вы новичок в Vim, то можете обучиться основам при помощи vimtutor!

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

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

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

Подробнее разобрала, почему выбрала ЙЦУКЕН, как адаптировала клавиатуру под разные типы полей, работу оператора в перчатках и ограниченное пространство 15-дюймового экрана.

На одной известной барахолке приметил необычный лот — объектив с фокусным расстоянием 50 миллиметров и необычной светосилой f/0.95 за относительно доступные деньги (10 000 руб.), под байонет любимого «Олимпуса». Не удержался от соблазна и заказал. И этот полностью механический объектив превзошёл ожидания и развеял сомнения. Оказался качественно сделанным, интересным, с характером.

Привет, на связи Alfa Research Center — исследовательский центр Альфа-Банка. Обычно мы занимаемся исследованиями банковских интерфейсов, но однажды нашим заказчиком стала Президентская академия (РАНХиГС). Они хотели понять, насколько Личный кабинет студента отвечает ожиданиям и как выглядит на фоне рынка. Проверить продукт на UX никогда не бывает лишним, ведь если вам даже кажется, что у вас все хорошо, то глубокое UX-исследование покажет может показать неожиданные результаты.

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

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

В первых двух частях (1, 2) мы разобрали, зачем дизайнеру знать основы вёрстки, и поближе познакомились с языком разметки HTML. Сегодня давайте подбробнее обсудим, как из простой разметки рождается дизайн: поговорим о CSS.

Я продуктовый дизайнер. Недавно закончил эксперимент, в котором ни разу не открыл Фигму: сайт-портфолио, где вебкамера работает основным вводом. Страница собирает отражение посетителя из частиц, всё управление через жесты. Код писал Claude Code. За мной замысел, дизайн-решения и полевые тесты.

Потрогать: https://dimbo-design.github.io/dimbo_heavy-cv (десктоп, вебкамера)
Код и история решений: https://github.com/dimbo-design/dimbo_heavy-cv

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

Меня зовут Саша Бобков, я UX-исследователь в Контур.Диадоке. Расскажу, как мы командой исследователей сыграли в «Оракл»: вытянули вслепую по пять карт, за 15 минут собрали из них продукты — местами вполне абсурдные — и защищали их друг перед другом.

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

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