Как лучше расположить поле непрозрачности: слева или справа и почему?

Что проверяют

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

Как отвечать

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

• связь с управляемым значением: прозрачность уточняет цвет, поэтому стоит после него. В привычных графических редакторах строка заливки читается как «образец, цвет, прозрачность», и пользователь переносит эту привычку на ваш интерфейс;
• направление чтения: в LTR взгляд идёт слева направо, сначала основное значение, потом уточнение. В RTL порядок должен зеркалиться;
• порядок фокуса: визуальный порядок совпадает с порядком в DOM, иначе Tab прыгает непредсказуемо, а скринридер читает поля не в той последовательности;
• ширина: поле процентов узкое, справа от широкого поля цвета оно не ломает выравнивание колонки подписей.

Вывод: в LTR справа от цвета, потому что это вторичный параметр той же сущности. Сверстайте через flex или grid и логические свойства (margin-inline-start, padding-inline-end, inset-inline-end), тогда при dir="rtl" раскладка развернётся сама. Само поле делайте с видимой подписью или aria-label, единицей измерения и ограничением ввода от 0 до 100.

Если решение спорное, проверьте его: юзабилити-тест на пяти пользователях быстро покажет, находят ли поле. A/B-тест для такой мелочи обычно избыточен.

Где спотыкаются

Отвечают «мне так больше нравится» или «справа красивее». Без аргумента про пользователя это вкус, а не решение.

Меняют порядок только визуально через order или flex-direction: row-reverse. Глазами всё верно, а клавиатура и скринридер идут по DOM.

Верстают через margin-left и left, а потом для RTL пишут второй набор стилей. Логические свойства решают это из коробки.