Платёж в приложении Ozon Банка, инициированный пользователем из вкладки льготного периода, уходит в другую часть задолженности, несмотря на очевидную контекстную логику. Результат — начисление процентов, утрата льгот, разочарование, недоверие.

Недавно попал в ситуацию, которая может случиться с любым пользователем Ozon Банка. У меня был льготный платёж: до 1 июля нужно было внести 1 140 ₽, чтобы не пошли проценты. Я зашёл во вкладку “Льготный период”, увидел: 0 из 1140 ₽ внесено и ниже — кнопка "Внести платёж". Всё логично, нажимаю — плачу.

Что происходит дальше? Платёж уходит в другую рассрочку, льготный платёж остаётся не закрыт, и после 1 июля начнут капать проценты.

Поддержка объяснила:💬 "У вас 26 число — дата обязательного платежа по другой рассрочке. Сначала деньги идут туда, а только потом — на льготный."💬 "Вернуть или перенаправить платёж невозможно".

То есть:

• Даже если ты вошёл во вкладку ЛЬГОТНОГО платежа

• Даже если видишь надпись "0 из 1140 ₽"

• Даже если нажимаешь кнопку “Внести платёж” именно в этом окне

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

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

А здесь — вроде бы крупный банк, удобный интерфейс, всё красиво. А внутри — такая "очерёдность", которая не даёт клиенту контролировать, что он гасит.

Где UX-провал?

Контекстное ожидание пользователя нарушено

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

• Мы же видим статус ("0 из 1140 ₽"); читаем описание ("всё, что внесёте до 1 июля, уменьшит платёж"); Нажимаем кнопку в этой же зоне и она уводит деньги в другое русло.

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

🧩 Вывод:

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

Надеюсь, эта информация кому-то сэкономит деньги и нервы.Если вы тоже попадали в такую ситуацию — напишите об этом в комментариях. Я уверен, таких немало.

В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.

Решение проблемы с помощью JavaScript

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

// Перенос висячих слов

document.addEventListener('DOMContentLoaded', function () {

// 1. Находим все текстовые элементы, которые нужно обработать

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

// 2. Список предлогов и союзов, которые нельзя переносить

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

// 3. Функция для обработки каждого элемента

textElements.forEach(element => {

// Получаем все текстовые узлы внутри элемента

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

const textNodes = [];

while (walker.nextNode()) {

textNodes.push(walker.currentNode);

}

// Обрабатываем каждый текстовый узел

textNodes.forEach(textNode => {

let text = textNode.nodeValue;

// Заменяем пробелы после коротких слов на неразрывные пробелы

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

// Проверяем, есть ли слово в списке предлогов

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

return match;

});

// Обновляем содержимое текстового узла

textNode.nodeValue = text;

});

});

});

Разбор кода по частям

1. Инициализация скрипта

document.addEventListener('DOMContentLoaded', function () {

Код выполняется после полной загрузки DOM-дерева страницы. Это гарантирует, что все элементы будут доступны для обработки.

2. Поиск текстовых элементов

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

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

3. Список коротких слов

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

Массив содержит наиболее распространённые предлоги, союзы и другие служебные слова русского языка, после которых нежелательны переносы.

4. Обход текстовых узлов

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

TreeWalker позволяет пройти по всем текстовым узлам внутри элемента, включая вложенные теги. Это важно, так как текст может содержать форматирование (, и т.д.).

5. Регулярное выражение для замены

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

Регулярное выражение ищет:
· (^|\s) — начало строки или пробел (группа 1);
· ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2);
· \s — пробел после слова;
· Флаги gi означают глобальный поиск без учёта регистра.

6. Условная замена

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

Если найденное короткое слово есть в списке предлогов, обычный пробел заменяется на неразрывный пробел (\u00A0). Это предотвращает разрыв строки между предлогом и следующим словом.

Результат работы

После выполнения скрипта текст “Я иду в магазин” не будет разорван на строки как “Я иду в” и “магазин”. Предлог “в” всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.

Настройка скрипта

Вы можете легко адаптировать скрипт под свои нужды:
· Добавить новые селекторы в querySelectorAll() для обработки других элементов;
· Расширить список слов в массиве prepositions;
· Изменить длину слов в регулярном выражении с {1,2} на другое значение;
· Добавить обработку других языков, изменив диапазон символов в регулярном выражении.

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

P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.

Разработчики, а как вы решаете вопрос переноса «висячих» слов?

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

по работе иногда надо закинуть чо-нить на яндекс диск, у меня там есть корпоративный аккаунт, но я захожу на него через ГУГЛ. понятно что можно было бы куда-то в закладки запихнуть, но главные закладки захламлены уже работой, в "другие закладки" все забываю, и не так часто нужно. просто интересна аналитика поведения пользователя самого яндекса. ща же все стремятся все упростить до 1-2 кликов.

сценарий попадания в яндекс.диск через гугл следующий:
1) набрать в строке браузера "яндекс диск"
2) нажать первую ссылку которую выдал гугл
3) я оказываюсь в своем яндекс диске

теперь посмотрим сценарий, при котором с яндекса можно попасть в яндекс.диск
1) зайти на яндекс
2) выделить мышкой строку поиска
3) в выпавшем меню нажать кнопку "еще"
4) оказаться на странице со всеми приложениями яндекса и среди трех десятков иконок найти диск и нажать на него
5) я в своем яндекс диске
чот как-то долго очень получается и муторно, интересно как отдел ux к этому пришел, попробуем иначе

1) зайти на яндекс
2) нажать на строку поиска
3) в выпадающем меню выбрать ПОЧТА
4) в почте увидить кнопочку ДИСК и нажать на нее
5) оказаться в своем яндекс диске.
не бля, все равно очень много действий

...аааааа... наверное я понял, у меняж в браузере гугл по умолчанию, а надо наверн яндекс, тогда вводя "диск" в окне адреса, я буду получать то что нужно?
1)итак ищем яндекс диск через яндекс...
и видим сразу три ссылки которые нашел яндекс

как думаете куда они все ведут. на яндекс диск? а вот и хуй, они ведут на лэндинг, РЕКЛАМИРУЮЩИЙ яндес диск с предложением КУПИТЬ подписку, при том что у меня уже там диск на 2тб

Ну ладно, может мне в браузере ввести просто ДИСК и тогда мне из истории всплывет ссылка на мой яндекс диск? нет, там недавно скачанные файлы гугл диск выдает)))

У меня большой вопрос к UX команде яндекса, а так же официальный вопрос почему через гугл зайти на яндекс.диск проще, чем через яндекс? @Yandex

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

В чем разница?

Сегодня в кредит под 600% на год, а завтра самому забрать из ближайшего логистического центра? Или сегодня в бирюзовой банке, а завтра в лазуревой?

Ладно, думаю, доберусь по компа с него закажу. Там как правило понятней. А там ...

Да, так гораздо понятней. И при наведении мышкой никаких хинтов и подсказок.

Пошел на wildberries после такого.

И там сразу нашел то же самое не за 900+ одна банка, а за 1400+, но две банки. Хорошо что есть конкуренция и иногда она проигрывается из за сущей фигни.