09.12.2025 09:01
melnik909 1 2700 Источник

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

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

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

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

Давайте посмотрим, что я вам подготовил.

Отображайте цифровую клавиатуру с маленькими цифрами при вводе платежа

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

Обычно оплата происходит с помощью QR-кода. Это достаточно надёжный процесс, в котором мы можем сделать что-то плохое. Но есть сценарии, где используются альтернативы. Например, поля для ввода суммы перевода. Вот здесь мы развернёмся!

Я предлагаю использовать виртуальную клавиатуру, с помощью которой будет сложно заполнять цифры на смартфоне. Для этого достаточно использовать атрибут type со значением text. Или вообще можно не указывать сам атрибут. Значение text браузеры используют по умолчанию.

У нас уже есть коллеги, которые реализовали мою задумку.

<body>
  <!-- другие элементы --->
  <input role="textbox" data-testid="money-input" obi-typo="tsCompact500Medium" class="ob-input svelte-hya3j6 hide" autocomplete="off" id="input___Vlk-7kv" autofocus="" data-hydrated="">
  <!-- другие элементы --->
</body>

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

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

Расположите в разметке наиболее приоритетные интерактивные элементы за менее важными

Есть определённая группа пользователей, которые взаимодействуют с интерфейсом только через клавиатуру. Для переключения между элементами они используют клавишу Tab, чтобы перейти к следующему интерактивному элементу, или сочетание клавиш Shift + Tab для возврата к предыдущему.

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

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

Я уже ввёл свою электронную почту и пароль.

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

Опа! Я вообще ушёл на ссылку «Восстановить пароль». И сразу думаешь: а что теперь делать? В голове хаос, и жмёшь клавишу Tab. В итоге после второго нажатия я попал на нужный чекбокс.

Давайте посмотрим код формы.

<body>
  <!-- другие элементы --->
  <div class="form-group login-group-space">

    <!-- здесь ссылка поле «Пароль» ---> 
    <label for="password" class="control-label">Пароль</label>
    <div class="form-input toggler-password__position">
      <input id="password" name="password" type="password" tabindex="0" class="form-control" value="" placeholder="Введите пароль" data-parsley-required="true" data-parsley-required-message="Введите пароль" maxlength="100" autocomplete="current-password" data-parsley-id="6">
    </div>
  </div>
  <div class="form-group">
    <div class="form-link__recovery">
      
      <!-- здесь ссылка «Восстановить пароль» ---> 
      <div id="recoveryEnter" class="text-right bc-recovery-url">
        <a href="/sps/recovery">Восстановить пароль</a>
      </div>      
      <div class="form-toggle__checkbox-parent form-toggle__parent--split" data-js="form-toggle-password-parent">
        
        <!-- здесь чекбокс «Показать пароль» --->
        <label class="form-toggle__checkbox" data-js="form-toggle-password">
          <input type="checkbox" id="toggle-password-password-1764607761509" data-password-inputs="password">
          <span class="form-toggle__checkmark"></span>Показать пароль
        </label>
      </div>
    </div>
  </div>
  <!-- другие элементы --->
</body>

У нас идёт элемент input для ввода пароля. Следующий интерактивный элемент в разметке — элемент a. А уже после него идёт элемент input для чекбокса. Как я говорил раньше, браузеры переключаются по интерактивным элементам по порядку, указанному в разметке. Вот разработчики сайта сделали великолепную ловушку!

В нашем примере визуальный порядок элементов не соответствует порядку в разметке. Это порождает ложные ожидания пользователя, а следовательно — раздражение, когда он начинает взаимодействовать. «Прекрасный» трюк!

Отключите возможность масштабировать страницу

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

Видели бы вы её возмущение, когда она поняла, что так нельзя. Сначала она несколько раз попыталась призумить. Потом перезагрузила страницу. А потом начала очень сильно ворчать.

Что сделали разработчики? Они отключили масштабирование с помощью ключевого слова maximum-scale со значением 1.0.

<head>
  <!-- другие элементы --->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
  <!-- другие элементы --->
</head>

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

Так что, скорее всего, то, что вы отключите масштабирование страницы, заметят через несколько лет. И то не факт.

Дублируйте в атрибут alt текст, находящийся рядом с изображением

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

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

<body>
  <!-- другие элементы --->
  <a data-v-db0fef7a="" class="link" href="https://effect.habr.com/a/rm4o1-QwTmRMiAnj2jcOCr4Bz1mN6HPD-SJ3sTPVSLKqQ0pjeBVI4hiZsQWPOj0a0SvH8JcetqQ71HQdEEMvDdRTA8NTOsdzkvcwQR8pIONBKDVJ-EtPjX7h5gfF2yNqRygRgS0QBCDh573rYHmHyL65-OIXFdLjAOPw_DdI6g" rel="noopener" target="_blank">
    
    <img data-v-db0fef7a="" alt="Они летят в космос" class="icon" height="20" src="https://effect.habr.com/a/0m9i2kEPHItlAEVqrs3uTbi9iJwP5k14ggHXngKJdZEt81Wjua-JcHHm_dWLyZ7bYQcv9GF2_sYkEc5qr1AAWNHKM42myVpPwRjCP3oTKM0yXiYjJV4SYOAjF5xGPWQOF1T3dgEZ0ZDDr5M1PePYpyGKjlr1iM6AOzhXhANLmkmaocl8FzaHGH2x6gM642uncTd-9zyucpfxFayNGXQBp21n6SBOpV82" width="20">

    Они летят в космос
  </a>
  <!-- другие элементы --->
</body>

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

Пользователям скринридера точно такое не понравится. Вот что сказал мой незрячий знакомый Илья:

«Я думаю, что это бессмысленный элемент. У меня весь день работает скринридер. Бл��же к вечеру уже голова пухнет, поэтому такие элементы только мешают и раздражают. Их я отбрасываю».

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

Используйте текстовые символы для декоративных задач

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

Когда скринридер попадает на такой символ, то озвучивает альтернативный текст к нему. Покажу на примере. Я нашёл его перед текстом, призывающим оценить компанию.

<body>
  <!-- другие элементы --->
  <div class="text">
    <p>
      ✏️ <b>Поставьте оценку компании RUVDS.com и расскажите, как вам там работается</b>. Можно ругать, можно хвалить, но главное — оценивать честно! Оценка останется анонимной.
    </p>
  </div>
  <!-- другие элементы --->
</body>

Скринридер NVDA скажет: «Карандаш. Поставьте оценку компании RUVDS.com и расскажите, как вам там работается». Эта фраза сто процентов будет резать слух пользователей скринридера. Они будут думать, какой смысл спрятан в слове карандаш в этом случае.

Ещё один пример расположен под текстом. Там есть ссылка «Оценить компанию». А перед ней находит символ «Стрелка вправо».

<body>
  <!-- другие элементы --->
  <p>→ <a href="https://career.habr.com/profile/company_ratings/new?company=ruvds" rel="nofollow" target="_blank">Оценить компанию</a></p></div>
  <!-- другие элементы --->
</body>

Скринридер озвучивает этот элемент так: «Стрелка вправо. Ссылка. Оценить компанию».

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

Заключение

Подведём итог. В этой статье я поделился с вами вредными советами. Вот они:

  • Старайтесь расположить в разметке интерактивные элементы так, чтобы первостепенные были за второстепенными.

  • Масштабирование страницы должно быть отключено.

  • При вводе суммы платежа пользователь должен это делать с помощью виртуальной клавиатуры с маленькими цифрами.

  • Продублируйте рядом стоящий текст в атрибут alt для декоративных изображений.

  • Используйте текстовые символы в интерфейсах, такие как стрелки, смайлики и так далее.

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

Но давайте начистоту. Вам действительно это надо? Вы правда хотите, чтобы люди страдали от ваших интерфейсов?

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

На этом всё. Спасибо за чтение!

P.S. Помогаю фронтендерам больше узнать про хорошие интерфейсы в своём ТГ-канале UX + Dev = a11y. Присоединяйтесь. Ссылка в профиле.

© 2025 ООО «МТ ФИНАНС»

Комментарии (1)


  1. LAutour
    09.12.2025 10:46
    #29227878

    Массово: сделайте для пользователей ПК дизайн как для для мобильных устройств.