Хабр·Russia·Tuesday, September 29, 2026 at 09:01 AM

HTML и CSS помогут вам сделать ужасный интерфейс для пользователя

Translate

melnik90913 минут назад

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

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

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

Маскируйте обычный текст под ссылку

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

Вот для разработчиков, которые хотят помучить пользователей, я нашёл отличный пример. Давайте посмотрим на текст «Ещё информация по запросу "Ламин Ямаль"».

Как думаете, мы смотрим на ссылку? Я думал, что да, но давайте попробуем вызвать контекстное меню на тексте.

Оно отличается от варианта, когда используется ссылка. Нет пунктов «Открыть в новой вкладке», «Открыть в новом окне», «Открыть в приватном окне» и других. Проще говоря, перед нами совсем не ссылка.

Давайте посмотрим, каким элементом размечен текст.

<body>
  <div class="AkyxZ VDgVie imso-loa" jscontroller="HoZvlf" role="link" tabindex="0" jsaction="x8IMsf">
    <!-- здесь иконка -->
    Ещё информация по запросу "Ламин Ямаль"
  </div>
</body>

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

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

Используйте иностранные слова для альтернативного текста у атрибута alt

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

Давайте рассмотрим блок со статьёй.

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

<body>

  <a class="comment-count material-1117377750" href="https://www.sports.ru/football/blogs/3504260.html#comments">
    
    <img class="comment-count__icon" src=" https://photobooth.cdn.sports.ru/preset/legacy/fire-yellow.svg " alt="fire">
    <span class="link link_size_small link_color_blue comment-count__value">23</span>
    
  </a>

</body>

В атрибуте указано слово «fire». У меня нет слов, чтобы описать моё восхищение. Это прекрасный трюк для ужасных интерфейсов!

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

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

Заставляйте вводить цифровой код для авторизации с помощью маленьких клавиш цифровой клавиатуры

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

Недавно моя мама травмировала кисть руки. Пока происходит восстановление, ей сложно банально резать продукты. Если она это сделает, то кисть будет болеть весь день от напряжения. Вот так бывает после падения на руку.

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

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

Смотрю и вижу, что нужно ввести код из пуш-уведомления для авторизации.

Интерфейс отображает клавиатуру не для ввода цифр, а стандартную. У неё размер клавиш с цифрами маленький, и поэтому по ним нужно целиться.

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

Давайте посмотрим, как разработчики реализовали такое превосходное решение.

<body>

  <input type="text" class="c0i5_5_3-a7 tsHeadline700XLarge">
</body>

Всё просто. Разработчики используют элемент input вместе с атрибутом type и значением text. Именно оно говорит браузерам использовать стандартную цифровую клавиатуру на мобильных устройствах.

Отключайте отправку данных заполненных форм с помощью клавиши Enter

Готовя пример из предыдущего раздела, я случайно нашёл ещё один полезный совет для ужасных интерфейсов. Когда я ввёл номер телефона, по привычке нажал клавишу Enter, ожидая, что интерфейс отправит введённые данные.

Но, как вы видите, ничего не произошло. Я находился в том же поле ввода телефона. Подумав, что я не нажал клавишу Enter, конечно же, я нажал клавишу ещё раз. И ещё раз.

В общем, форма не отправлялась. Я полез в код выяснять причину.

<body>
  <div data-widget="loginOrRegistration" class="sm6_30">
    <div class="s6m_30">
      <div class="n4m_30 t5m_30">
        <!-- здесь логотип OzonID -->
      </div> 
      <div class="bq03_9_2-a">
        <span class="tsHeadline600Large c65_4_2-a5">Введите номер телефона</span>
      </div>    
      <div class="ms9_30">
        <span>Мы отправим код или позвоним. Отвечать на звонок не нужно. Код может прийти на почту или в СМС</span> 
      </div>  
      <div class="mt8_30">
        <div>
          <div class="z3l_30">
            <div class="c85_4_2-a">
              <label class="c85_4_2-a0">
                <div class="f5_4_3-a f5_4_3-a7 f5_4_3-b6 f5_4_3-b7 lz4_30"> 
                  <div class="f5_4_3-b0"> 
                    <input autocomplete="off" type="tel" name="autocomplete" autofocus="autofocus" class="d5_4_4-a d5_4_4-a3 l4z_30"> 
                  </div>
                </div>
              </label> 
            </div> 
            <div class="e35_4_5-a e35_4_5-b5 l2z_30 zl4_30">
              <!-- здесь выпадающий список с кодом страны -->
            </div>
            <div>
              <button type="submit" class="b25_9_5-a b25_9_5-b7 b25_9_5-b5 b25_9_5-b">
                <div class="b25_9_5-a7">
                  <div class="b25_9_5-a2 tsCompactControl500Medium">Войти</div>
                </div>
              </button> 
              <div class="t6m_30">
                <!-- здесь альтернативные методы авторизации -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>  
</body>

А разработчики не используют элемент form. Какие же они молодцы!

Ловко меня обдурачили. Больше всего меня позабавило, что они к элементу button добавили атрибут type со значением submit. Как будто так форма отправится.

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

Портите обводку интерактивных элементов с помощью свойства overflow

Скорее всего, вы слышали, что нельзя убирать обводку у интерактивных элементов, которая создаётся с помощью свойства outline. Если вы объявите его со значением 0 или none, то вам скажут: «Нельзя так!».

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

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

А теперь посмотрим, почему обводка отобразилась таким образом.

Мы видим, что у родительского элемента установлено свойство overflow со значением hidden. Обводка вокруг ссылки выходит за границы, и поэтому она обрезается. Гениальный трюк!

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

Заключение

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

не используйте элемент a для текста, который выглядит как ссылка;
для смайликов, размеченных элементом img, добавляйте альтернативный текст, который будет сбивать с толку пользователей скринридера;
используйте иностранные слова для альтернативного текста;
при авторизации в приложении используйте стандартную цифровую клавиатуру при вводе цифрового кода;
не используйте элемент form, чтобы пользователь не мог отправить данные с помощью клавиши Enter;
обрезайте обводку вокруг интерактивных элементов с помощью свойства overflow со значением hidden.

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

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

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

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

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих ТГ‑каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

View the original on Хабр →

KioskNews shows a cleaned-up reading view extracted from the publisher’s page — the original always lives on their site, not ours.