Ux

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

UX и UI — это не одно и то же. Это разные роли, задачи и этапы в процессе создания продукта. Знание различий между ними поможет не только дизайнерам, но и предпринимателям, разработчикам, продакт-менеджерам и всем, кто вовлечён в разработку IT-продуктов.

Что такое UX — пользовательский опыт

UX (от англ. User Experience) переводится как пользовательский опыт. Это всё, что человек ощущает и переживает при взаимодействии с цифровым продуктом: как он заходит на сайт, как ищет нужную информацию, насколько просто сделать заказ, зарегистрироваться или отменить подписку.

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

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

Что такое UI — пользовательский интерфейс

UI (User Interface) — это всё, что видит пользователь на экране. Шрифты, кнопки, поля, цвета, иконки, отступы, анимации и даже звуки — всё это элементы пользовательского интерфейса. UI-дизайнер отвечает за то, чтобы интерфейс выглядел красиво, современно и визуально помогал ориентироваться.

Главная задача UI — не просто сделать «красиво». Интерфейс должен быть визуально понятным. Хорошо подобранный UI делает использование продукта интуитивным: пользователь «видит», куда нажать, не задумываясь. Например, кнопка «Оформить заказ» должна быть заметной и находиться в ожидаемом месте.

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

Простое сравнение UX и UI

Один из лучших способов объяснить разницу — это аналогия с автомобилем:

• UX — это механика машины: как плавно она едет, легко ли поворачивает руль, удобно ли переключать передачи.

• UI — это внешний и внутренний вид: приборная панель, форма руля, подсветка, материалы сидений.

Другой пример — ресторан:

• UX — это логика работы: как быстро вас обслуживают, как просто сделать заказ, где стоят столы.

• UI — это оформление: посуда, скатерти, цвета стен, музыка и подача блюд.

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

Почему важно понимать разницу

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

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

Зная различия, вы сможете управлять ожиданиями и называть вещи своими именами: не требовать от UI-дизайнера глубокого анализа поведения пользователей, и не просить UX-дизайнера сделать дизайн "поприкольнее".

Как UX и UI работают вместе

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

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

Хороший продукт — это когда UX и UI не конкурируют, а дополняют друг друга.

UX и UI важны не только для дизайнеров

Если вы разработчик, предприниматель, продакт или даже маркетолог — понимание UX и UI поможет вам делать свою работу лучше. Вы научитесь видеть интерфейс глазами пользователя, понимать его трудности и принимать более взвешенные решения.

Например, продакт сможет правильно формулировать гипотезы: "Пользователи теряются на экране регистрации" — это вопрос UX. "Кнопка незаметная" — это уже UI. Разработчик, в свою очередь, сможет предложить технически удобные решения без ухудшения пользовательского опыта.

Эти знания позволяют команде говорить на одном языке и двигаться быстрее.

Заключение

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

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

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

Сервис eruz.zakupki.gov

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

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

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

И теперь я должен "прочитать" 252 сообщения.
И я смотрю на это, и пытаюсь подобрать слова.
Но я не могу. Моего русского матерного не хватает.

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

OZON, я надеюсь, вы увидите этот материал и что-то с этим сделаете.

Про курс конкретно говорить не буду, только про юзабилити, интерфейс и другие нюансы.

Прошла вводный урок из нескольких слайдов. Так выглядит последний слайд. Кнопка "Далее" заблокирована, кнопки "Перейти к обучению" или чего-то подобного нет. Угадайте, кликабельны ли ссылки на соцсети (спойлер: нет).

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

Оказывается, надо нажать малюсенькую кнопку Меню, чтобы увидеть список всех уроков! Продуктолог (или кто этим занимался в OZON), тебе огромный минус.

Или поправьте меня, если я настолько слепошарый пользователь - с первого раза не нашла, куда ткнуть.

Прошла следующий урок. В конце точно такой же экран, но опыт уже имеется!

Перешла на следующий урок через Меню, но...

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

Ладно, едем дальше. Для кого написан этот абзац?

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

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

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

Если вам всё понятно с первого раза - вы огромные молодцы, кстати.

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

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

Упомяну, что я не ищу ошибки специально. Я просто прохожу урок. Однако они бросаются в глаза.

Следующие слайды. Прочитайте предложение. Вы тоже думаете, что здесь подзабили на редактуру?

Молю, поменяйте копирайтера, OZON! Он соединил 2 сложноподчинённых предложения в одно, что недопустимо в принципе. А потом по этому материалу ещё и тестирование проходить господи...

Нет, я не душнила, я хочу ПОНЯТЬ МАТЕРИАЛ. И это я даже не пишу про пунктуационные ошибки, коих там достаточно.

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

Повторение - мать учения!

Смотрю слайд с примером аналитики рекламной кампании. В примере описаны платья. На картинке справа стулья. Могли ли сделать релевантную инфографику для наглядности? Могли. Могли ли сделать только текст, разбив его по абзацам для упрощения восприятия? Могли. Сделали в итоге херню? Да.

Ну тут вообще каждый заметит проёб, не только душнилы:

Ребят, у вас данные поехали...

Я всё. Глаза устали смотреть на этот беспредел. Наверное, я слишком всё идеализирую, но это же официальная презентация на сайта OZON... Говорю про этот курс. Может, его починят.

Если дочитали и не умерли от кринжа и скуки, это хорошо.

Платёж в приложении 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 ооо нашел таки возможность изменить порядок сортировки, но оно делается через отдельное всплывающее меню, а не кликом по пиктограмме в списке, и порядок не запоминается при переходе в другие папки. ну ладно. до этого еще дойдем)))