Увидели скриншот интерфейса — и сразу захотелось вставить свои пять копеек? Не спешите с критикой.

Вот один из комментариев к моему редизайну интерфейса для радиоприёмника:

— Как говорится, а теперь сравните размер шрифта, контрастность и читаемость в исходном интерфейсе и в новом. Учитывайте мелкий размер экрана. Да, новый интерфейс "красивее", но экран монитора и дисплей устройства — это две большие разницы (с).

А вот другой — от друга, которому я показывал концепт за неделю до публикации:

— Ну у меня всё ещё вытекают глаза, но стало лучше.

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

Для начала немножко контекста. Меня зовут Егор Камелев, я проектирую интерфейсы с 2006 года. Работал в агентствах, внутри компаний, на аутсорсе. Основал Проекторат. Специализируюсь на сложных информационных системах. До сих пор в деле. Вроде, всё. Теперь поехали!

Только сначала ещё один момент. Хотя статья вообще не о моём дизайне, но вот вам скриншот того, о чём я писал во вступлении (всё равно ведь будете искать):

Какие параметры устройства?

На каком устройстве комментатор рассматривает скриншот дизайна? А на каких устройствах будет использоваться сам дизайн? От этого будет зависеть оценка.

1. Какой размер экрана?

Это не разрешение, а именно габариты экрана в сантиметрах или дюймах. Два экрана с одинаковым разрешением (например, 1920х1080) могут быть кардинально разными по восприятию, если один из них — это дисплей смартфона, а второй — настольный монитор (или экран на приборной панели).

Размер напрямую влияет на то, насколько крупно выглядят элементы интерфейса:

• То, что на 24-дюймовом экране кажется хорошо читаемым, на 3,5-дюймовом может быть крошечным;

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

2. Какая у него яркость?

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

• На ярком солнце тёмный интерфейс с низкой яркостью становится абсолютно нечитаем;

• При слабой подсветке яркий фон может буквально «слепить» пользователя (включали телефон ночью спросонья?);

• Яркость влияет на контраст восприятия: один и тот же макет может выглядеть бледным или, наоборот, кричащим — в зависимости от яркости устройства.

3. Какая плотность пикселей (PPI) и физическое разрешение?

PPI (pixels per inch) — сколько пикселей помещается в одном дюйме. Чем выше значение, тем «чище» и чётче выглядит текст.

• Интерфейсы, рассчитанные на дисплеи с высоким PPI, могут выглядеть размытыми или пиксельными на дисплеях с низкой плотностью;

• Слишком тонкий шрифт может «рассыпаться» на дисплеях с маленьким PPI;

• От этого зависит ощущение аккуратности и премиальности дизайна.

4. Какое программное разрешение, масштаб?

Большинство современных ОС масштабируют интерфейсы для дисплеев с высокой плотностью пикселей (HiDPI). Например:

• Windows на 4K экранах автоматически включает 150–200%;

• macOS использует своё масштабирование по Retina;

• Linux — зависит от окружения (Gnome, KDE и т.д.).

Если макет делается «вплотную» к пиксельной сетке, а потом масштабируется — шрифты, иконки и границы могут отображаться размыто или с визуальными артефактами.

Последствия:

• Нарушение визуального ритма;

• Размытые надписи и иконки (особенно SVG и PNG с фиксированным размером);

• Ломается выравнивание (например, baseline текста относительно иконок).

5. Какая цветовая температура и калибровка?

Цветовая температура — это визуальное ощущение «теплоты» или «холода» белого цвета на экране. Она измеряется в кельвинах:

• 6500К — условно «нейтральное» белое (обычно у калиброванных мониторов);

• 5000К — тёплое, желтоватое;

• 7500К и выше — холодное, синеватое.

Даже если макет «по цифрам» контрастный и сбалансированный, восприятие может кардинально отличаться на разных устройствах:

• Тёмно-синий текст может сливаться с фоном на холодных экранах;

• Светло-жёлтый интерфейс будет казаться грязно-серым на «тёплом» дисплее.

На что влияет:

• Читаемость при дневном и вечернем освещении;

• Восприятие яркости и «вес» визуальных акцентов.

6. Какая подсветка, углы обзора, есть ли отражения и блики?

Зависимость восприятия изображения от положения глаз относительно экрана и внешнего освещения.

• TN-матрицы сильно теряют контраст и насыщенность под углом;

• Некоторые экраны выцветают при взгляде сбоку;

• Стеклянные поверхности бликуют — яркое пятно может «съесть» важный элемент интерфейса;

• Это особенно критично для интерфейсов, где цвет несёт смысловую нагрузку (например, красный = авария).

Особенно хорошо разницу между показателями физических устройств и их пользователей понимают разработчики шутеров. Помните этот экран настройки?

Какой контекст использования интерфейса?

7. Какое освещение?

Насколько освещена окружающая среда — дневной свет, тусклый кабинет, тёмная улица, фонарик на каске.

• Интерфейс, идеально сбалансированный под офисный монитор, может стать бесполезным в темноте или на солнце;

• Высокий контраст может быть хорош для улицы, но слепить в темноте;

• Цветовая гамма может меняться в зависимости от цветопередачи окружающего света (тёплая лампа, холодный неон и т.д.).

8. Какое расстояние от глаз до устройства?

Насколько близко пользователь взаимодействует с экраном — 30 см или 1,5 метра.

• Крупные элементы на приборной панели могут выглядеть неестественно большими при приближённом просмотре;

• Мелкий текст, который читается с ноутбука, будет нечитаем на устройстве, стоящем в полуметре;

• Это особенно важно при проектировании интерфейсов для терминалов, киосков, приборов, автомобилей и т.д.

9. Темп взаимодействия: спокойный или в движении

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

• В движении мозг хуже различает тонкие детали, полутона, нюансы верстки;

• Элементы должны быть крупнее, проще, ярче;

• Промах по элементу в спокойной обстановке — не беда, а в дороге — риск.

10. Интерфейс для широкой публики или для профессиональных повторяющихся задач?

Интерфейс рассчитан на новичков или на опытных пользователей, которые 1000 раз повторяют одни и те же действия?

• Профессиональные интерфейсы могут позволить себе мелкий текст, узкие кнопки, шорткаты, потому что пользователь «на автомате»;

• Для массовой аудитории интерфейс должен быть более снисходительным, «дуракоустойчивым», читаемым, понятным с первого взгляда;

• Те же параметры читаемости и доступности нужно интерпретировать по-разному.

Это скриншот, а не пользовательский опыт!

Когда мы оцениваем интерфейс по картинке — мы не взаимодействуем с ним. Мы не кликаем, не наводим, не ждём реакцию, не видим поведения интерфейса в динамике. Это как оценивать приложение по иконке или судить фильм по стоп-кадру.

• Нет состояний — мы не видим, как элементы выглядят при наведении, нажатии, фокусе, в режиме ошибки, при загрузке и т.д.;

• Нет поведения — мы не знаем, появляются ли подсказки, всплывающие окна, переходы, анимации, загрузка и т.п.;

• Нет взаимодействия — мы не ощущаем скорость отклика, плавность навигации, как работает ввод с клавиатуры, как ведёт себя интерфейс на разных экранах;

• Нет контекста — скриншот может быть сделан в промежуточном состоянии: например, при недозагруженном списке, частично заполненной форме, незавершённой настройке;

• Нет ощущения ритма — мы не видим, как работает интерфейс «в потоке»: как пользователь переходит между экранами, как интерфейс помогает или мешает в реальных задачах.

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

Какие выводы?

На самом деле… никаких. Если знаешь базу — просто не позволяешь себе делать преждевременных выводов без дополнительных вопросов.

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

Достаточно придерживаться WCAG AA (Web Content Accessibility Guidelines — международный стандарт доступности веб-контента) — и всё будет в порядке.

Что я сам делаю со всеми этими знаниями? Когда ко мне обращаются с просьбой дать обратную связь по внешнему виду или эстетической составляющей того или иного интерфейса, я начинаю с того, что объясняю, с какого устройства на него смотрю. И задаю дополнительные вопросы про устройства конечных пользователей.

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

Разумеется, картинки на них отличаются разительно. И я чаще всего ориентируюсь на показатели именно игрового монитора, у которого отклик и частота в порядке, а остальные параметры — не очень. И если на нём всё будет выглядеть неплохо, то на других мониторах — и подавно.

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

Полезные ссылки:

• Статья про редизайн интерфейса приёмника (отсюда ноги растут, спасибо комментатору за идею);

• Web Content Accessibility Guidelines (WCAG) 2.1 (официальный стандарт доступности интерфейсов);

• Мой Телеграм-канал (пишу про проектирование интерфейсов и жизнь на фрилансе).