2020: время хороших интерфейсов. Базовое руководство

Анна Селезнёва

Рассказываю очевидные вещи с 2011 года

Быстрый или удобный?

Вопрос

Вы бы перестали пользоваться любимым сайтом,
если бы он стал грузиться на 100ms дольше?

200ms?

500ms?

Быстрый или удобный?

— Быстрый!

— Удобный!

The Great Divide

Опрос

Разработчик интерфейсов

2011

А как же интерфейс?

Этого не было в дизайне

В дизайне может не быть

• Ховеров для ссылок
• Ошибок для элементов формы
• Оповещений об успешной отправке
• Отсутствующих результатов
• Адаптивности

У дизайнера тоже могут быть причины

🤷Не было задачи или времени

🤷Недостаточно опыта или инструментов

🤷Его нет

Инициатива не наказуема

Есть дизайнер? Спроси

Нет дизайнера? Сделай сам

Действуй!

Это было в дизайне

В дизайне могут быть

• Кастомные скроллы
• Кастомные селекты
• Формы в модальных окнах
• Модальные окна в модальных окнах
• Адаптивные таблицы

Работай головой, а не руками

Неудобно? Сложно? Спроси

Не согласен с решением? Спорь

Найди компромисс

Сайт продукт

Статистика интернет-пользователей *

В 2020 году более 80% людей
пользуются интернетом

* — в развитых странах

Пользователи — не разработчики

Интерфейс от разработчика

Pixel Perfect

Отзывчивость

Отзывчивая область просмотра

      <meta
  name="viewport"
  content="width=device-width, initial-scale=1"
>
    

Важно! Не отключайте возможность масштабирования:

user-scalable=yes

Макет в пикселях

270x240

          .block {
  width: 270px;
  height: 240px;
}
        

Единица измерения rem

          
.block {
  width: 270px;
  height: 240px;
}
        

          /* 1rem = 16px */
.block {
  width: 16.875rem;
  height: 15rem;
}
        

Минимальная адаптивность

      html {
  font-size: 16px; /* по умолчанию */
}
@media (max-width: 1280px) {
  html {
    font-size: 12px;
  }
}
    

Минимальная адаптивность

Жесткие контрольные точкиПроблема

1440

?

1024

?

768

Гибкая типографикаРешение

      html {
  font-size: calc($min_font_size +
    ($max_font_size - $min_font_size) *
    ((100vw - $min_viewport_width) /
    ($max_viewport_width - $min_viewport_width))
  );
}
    

© MadeByMike

Отзывчивость всего

Lorem ipsum

В копилку

Cat ipsum

This cat happen now, it was too purr-fect!!! Trip owner up in kitchen i want food make meme, make cute face for where is my slave?

В копилку

Hipster ipsum

Paleo tousled snackwave, tumeric selvage XOXO lomo. Microdosing kickstarter shabby chic raw denim craft beer woke keffiyeh umami yr pug pitchfork.

В копилку

Fillerama

Bender, we're trying our best. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! No!

Язык тоже важен

fish-text.ru

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

«Зимний дизайн не работает летом»

Было:

Стало:

Ничего не найдено

Интернационализация

Длинные слова Проблема

Sozialversicherungsfachangestelltenauszubildender (49 букв)

Cтажер помощника социального страхового брокера

Длинные слова Решение 1

          word-break: break-all;
        

Длинные слова Решение 2

            text-overflow: ellipsis;
overflow: hidden;
          

Фиксированная ширина Проблема

Фиксированная ширина Решение 1

      <svg viewBox="0 0 150 20">
  <text x="0" y="15">Добавить в корзину</text>
</svg>
    

svg {
  width: 100%;
}

Фиксированная ширина Решение 2

elem.style.fontSize =`${
  (elem.clientWidth / elem.innerText.length) * K
}rem`
/*
K = X / W
где W — средняя ширина буквы в пикселях при размере шрифта X
*/

      
    

Картинка в макете

Картинка на сайте

Картинка произвольного размера Проблема

Картинка произвольного размера Решение

Пропорционально центрировать:

          img {
  max-height:100%;
  max-width: 100%;
  object-fit: contain;
}
        

Отсутствие аватара Проблема

Отсутствие аватара Неправильное Решение

Отсутствие аватара Правильное Решение

Ссылка Проблема

Пример:

Ссылка Проблема

Пример:

Ссылка Решение

Просто:

      a {
  text-decoration: underline;
}
    

Ссылка Решение

Гибко:

      a {
  background-image: linear-gradient(currentColor,currentColor);
  background-position: center bottom .25rem;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
    

Реакция на наведение Памятка

Подробнее

Подробнее

Хотя бы так:

          a:hover {
  opacity: .75;
}
          
        

Реакция на наведение Памятка

Подробнее

Подробнее

Подробнее

А лучше так:

          a:hover {
  color: darken($color, 10%);
  /* или */
  color: lighten($color, 10%);
}
          
        

Кликабельные области

Кликабельные области

Кликабельные области Проблема

Кликабельные области Решение

          button::after {
  content: ;
}         
        

Поле ввода Проблема

Что надо?

Поле ввода Решение

• — Введи сюда e-mail

• — А сюда много текста

Поле ввода Решение

• 

  — Ты находишься здесь

• — Сюда вводить нельзя

• Неверный e-mail

  — Что-то пошло не так

Заголовок поля ввода Проблема

      <input name="email" type="email" placeholder="E-mail">
    

Что здесь?

Заголовок поля ввода Решение

          
input:placeholder-shown ~ label {
  opacity: 0;
}
        

Заголовок поля ввода Проблема

      
<label>E-mail</label>
<input name="email" type="email">
      
    

Чей я?

E-mail

Заголовок поля ввода Решение

      
<label for="email-unique-id">E-mail</label>
<input id="email-unique-id" name="email" type="email">
      
    

Заголовок поля ввода Решение

      <label>
  <span>E-mail</span>
  <input name="email" type="email">
</label>
      
    

+50 к доступности

Заголовок поля ввода Бонус

• E-mail *

  — Сюда обязательно нужно что-то ввести

Фокус Проблема

        outline: none
      

Фокус Решение 1

          button:focus {
  outline: none;
  box-shadow: 0 0 0 .25em white,
              0 0 0 .375em tomato;
}         
        

Фокус Решение 2

Оставить выделение для навигации с клавиатуры:

        button:focus:not(:focus-visible) {
  outline: none;
}       
      

drafts.csswg.org/selectors-4/#focus-visible-pseudo

Фокус Решение 2

Полифил: github.com/WICG/focus-visible

        [data-js-focus-visible]
button:focus:not([data-focus-visible-added] {
  outline: none;
}       
      

Оповещения

• Успех

  Данные успешно сохранены

• Ошибка

  При отправке произошла ошибка

• Информация

  Всё будет хорошо, я проверяла

Действие по клику

• Предложение Отправить
• Загрузка
• Успех Отправлено
• Ошибка Ошибка

UI kit

CSS-фреймворки

• Bootstrap
• Materialize CSS
• Tailwind CSS
• Foundation
• Semantic UI

и ещё 10 вариантов

Естественность

          @keyframes shake {
  10%,90% { transform: translateX(-.25rem); }
  20%,80% { transform: translateX(.25rem); }
  30%,50%,70% { transform: translateX(-.5rem); }
  40%,60% { transform: translateX(.5rem); }
}
        

animation:
  shake .75s cubic-bezier(.36,.07,.19,.97);

Плавность анимации

https://easings.net

Скорость анимации

The ultimate guide to proper use of animation in UX

Анимация + загрузка Проблема

Принудительное замедление Решение

          Promise.all([
  loadData(),
  timeOut()
])
.then(...)
        

Длительная загрузкаПроблема

Длительная загрузкаРешение

Благодарности

• 
  Артём Поликарпов
• 
  Александр Ковальский
• 
  Прохор Маклаков
• 
  Роман Шамин

Итоги

• Не забывайте, что вашим продуктом пользуются живые
  и очень разные люди
• Смиритесь с тем, что фронтенд – это в том числе
  и разработка интерфейсов
• Сделайте всё возможное, чтобы эту тему не пришлось поднимать
  через 10 лет