melnik909 6 мая в 12:01

Как фронтендеру сделать интерфейс дружелюбнее к пользователю. Коллекция HTML/CSS лайфхаков

Средний

6 мин

14K

Блог компании RUVDS.comCSS*HTML*Веб-разработка*Интерфейсы*

Обзор

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

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

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

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

▍ Шрифт по умолчанию тоже может быть красивым

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

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

body {
  font-family: "Roboto", sans-serif;
}

Если шрифт Roboto не загрузится, то браузеры применят шрифт из указанного семейства. Чаще всего, это шрифт Arial. Он некрасивый. Так что чаще всего текст будет выглядеть плохо. Я хочу предложить другой подход.

В CSS есть ключевое слово system-ui. Оно позволяет нам использовать для веб-контента шрифт, который встроен в операционную систему. В большинстве случаев он будет намного красивее.

Начать использовать ключевое слово system-ui очень просто. Нужно его добавить вторым значением для свойства font-family.

body {
  font-family: "Roboto", system-ui, sans-serif;
}

Поддержка ключевого слова system-ui очень хорошая. Это позволяет оставить только его, убрав ключевое слово sans-serif.

body {
  font-family: "Roboto", system-ui;
}

Но это я уже оставляю на ваше усмотрение. Главное, вы теперь знаете, как улучшить типографику на вашем проекте.

▍ Улучшаем отображение заголовков

В типографике есть термин «вдовы». Под ним понимается ситуация, когда в блоке с текстом на последней строке остаётся одно слово. В вебе данное явление можно увидеть в заголовках. Я сразу покажу пример.

<body>
  <main class="content">
    <h1>Овечкин продолжает забивать! Но «Вашингтон» проиграл первый кубок в этом году</h1>
    <p>
      «Вашингтон» ждал приезда «Коламбуса» с особыми чувствами.
      <!-- здесь оставшиеся текст -->
    </p>
  </main>
</body>

Заголовок на 3 строки. Ниже отображается блок с текстом

На последней строке осталось одно слово «году». Вот такое отображение текста называется «вдовы». Согласитесь, выглядит некрасиво.

Для исправления ситуации мы можем использовать значение balance для свойства text-wrap. Таким образом браузеры начнут анализировать текст и будут его равномерно распределять по строкам. В итоге заголовки будут выглядеть лучше.

Давайте это проверим с помощью нашего примера.

h1 {
  text-wrap: balance;
}

Текст заголовка визуально распределился равномерно на 3 строки. На первой 3 слова, на второй 3 слова, на третьей 5 слов. Первая строка самая широкая. Вторая и третья примерно одинаковой ширины

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

▍ Можно подобрать более подходящую надпись для кнопки «Перейти» на виртуальной клавиатуре

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

Сделаю я это сразу на примере. Мы посмотрим на виртуальную клавиатуру при заполнении формы авторизации.

<body>
  <form>
    <label for="un">Логин</label>
    <input type="text" id="un">
    <label for="pw">Пароль</label>
    <input type="password" id="pw">	
    <button>Отправить</button>
  </form>
</body>

Мне отображается клавиатура для ввода текста на смартфоне

Обратите внимание на правый нижний угол. Там находится клавиша с надписью «Перейти». Вот мы можем её изменить. Это поможет нам сделать атрибут enterkeyhint.

Например, я задам значение send для поля ввода пароля.

<body>
  <form>
    <label for="un">Логин</label>
    <input type="text" id="un">
    <label for="pw">Пароль</label>
    <input type="password" id="pw" enterkeyhint="send">	
    <button>Отправить</button>
  </form>
</body>

Теперь мы видим сокращённое слово «Отправ.». На английском языке будет надписано «Send». Вот так атрибут помог использовать более подходящую надпись.

Когда я только узнал про атрибут, подумал, что можно задать любую надпись. Это не так. В качестве значения нам предоставляется ограниченный список. Всего есть 7 значений, а именно: enter, done, go, next, previous, search и send.

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

▍ Делаем удобный ввод цифрового кода при авторизации

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

Я хочу обратить ваше внимание на клавиатуру, которая появляется на смартфонах при вводе. Если мы используем элемент <input>, то она будет содержать буквы и цифры сразу. Но для ввода цифрового кода буквы явно не пригодятся. Нам нужны только цифры!

И так можно сделать. Я нашёл отличный пример.

Для достижения такого результата разработчики добавили атрибут inputmode со значением numeric.

В инструментах разработчика я выделил атрибут

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

▍ Выделение текста может быть разным

Подбирая темы для этой статьи, я сомневался, стоит ли включать псевдо-элемент ::selection. Мне казалось, что его знают все. В таких случаях я делаю опрос среди своих подписчиков. Оказалось, что большая часть моей аудитории его не знает.

А зря. Этот псевдо-элемент поможет вам изменить стандартное выделение текста. Например, я так сделал для Хабра.

::selection {
  background-color: #fce4ec;
}

Видите, браузеры используют более красивое выделение. Классно же! Вот так просто вы можете сделать выделения текста в фирменном стиле сайта.

▍ Добавить тёмную тему очень просто

В прошлом году Яндекс провёл исследование о настройках доступности в Яндекс Браузере для iOS и Android. Оказывается, 27% пользователей, или примерно 11 миллионов людей, используют тёмную тему. Супер популярная функция!

Хорошо, что CSS позволяет просто её реализовать. Медиа-функция prefers-color-scheme сделает всю работу. Лично я использую её вместе с пользовательскими CSS-свойствами.

/* определяю цвета для светлой темы */
:root {
  --main-mode-color: #fcfcfc;
  --accent-mode-color: #222;
}

@media (prefers-color-scheme: dark) {

  /* определяю цвета для тёмной темы */
  :root {
    --main-mode-color: #1e2229;
    --accent-mode-color: #ebecef;
  } 
}

body {
  color: var(--accent-mode-color);
  background-color: var(--main-mode-color);
}

Вот и всё. Таким способом вы позволите своим пользователям использовать тёмную тему. Просто же. Надеюсь, вы её добавите в свои проекты.

▍ Расширяем кликабельную область с помощью псевдо-элементов

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

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

Реализовать такое решение можно с помощью псевдо-классов ::before или ::after. Я просто буду расширять их размеры так, чтобы они выходили за пределы родительского элемента. В итоге визуально элементы остались бы тех же размеров, а их область станет больше.

Покажу реализацию на примере кнопки размером шестнадцать на шестнадцать пикселей.

.button {
  width: 16px;
  height: 16px;
  position: relative;
  isolation: isolate;
}

.button::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
}

Вся фишка заключается в свойстве inset. Именно оно расширяет интерактивную область элемента. В нашем примере я это сделал на 10px с каждой стороны. В итоге кликабельная область стала размером 36px на 36px.

В инструментах разработчика показывается область элемента

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

.ha-clickable-area {
  --_ha-clickable-area-expandable-ratio: var(--ha-clickable-area-expandable-ratio, 6px);
   position: var(--ha-clickable-area-position, relative);
  isolation: isolate;
}

.ha-clickable-area::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--_ha-clickable-area-expandable-ratio));
  z-index: -1;
}

/* здесь объявляю значение для конкретного элемента */
.button {
  --ha-clickable-area-expandable-ratio: 10px;

  width: 16px;
  height: 16px; 
}

▍ Заключение

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

использование ключевого слова system-ui в качестве объявления шрифта по умолчанию;
значение balance для свойства text-wrap для улучшения отображения заголовков;
атрибут enterkeyhint, позволяющий лучше адаптировать виртуальную клавиатуру под контекст использования;
как атрибут inputmode со значением numeric делает ввод цифрового кода проще;
псевдо-элемент ::selection для стилизации выделенного текста в фирменном цвете;
создание тёмной темы с помощью медиа-функции prefers-color-scheme;
сниппет для расширения кликабельной области.

Будете использовать эти лайфхаки в своих проектах? Или я зря написал эту статью? Делитесь своим мнением в комментариях. Спасибо за чтение!

P.S. Помогаю больше узнать про CSS в своём ТГ-канале CSS isn't magic. Присоединяйтесь. Ссылка в профиле.

Telegram-канал со скидками, розыгрышами призов и новостями IT 💻

Хабы: