Как привлекать и направлять внимание пользователя? Если взять все тексты на эту тему и вытянуть их в одну линию... То, наверное, этими текстами можно будет выложить орбиту Плутона. Подбросим в эту копилочку ещё немного.
Зачем нужно управлять вниманием пользователя? Вариантов много: понравиться, продать, вовлечь, подвести к какой-то мысли.
Но мы говорим об эргономике интерфейсов, а значит, на первом месте - удобство и благо нашего пользователя. Мы влияем на его внимание с простой целью: помогаем быстро сориентироваться, увидеть главное, понять возможности интерфейса.
Как мы это делаем? Создаём контраст. Это четвёртый фундаментальный принцип проектирования интерфейсов. Его можно сформулировать так:
Пример
Чтобы размяться, давайте возьмём маленький текст и попробуем применить к нему принцип контраста.
Шаг 1. Смотрим исходный материал
У нас есть краткое описание линейки продуктов. Допустим, мы хотим сделать макет флаера. Вот материал, который надо разместить.
Давайте разберёмся, из каких частей состоит этот текст:
Шаг 2. Выделим главное и сгруппируем информацию.
А заодно сделаем кое-какие мелкие преобразования:
- Слоган уберём наверх;
- Заголовок - покрупнее и пожирнее;
- Суть линейки оформим как подзаголовок;
- Описание линейки выделим интервалами;
- Увеличим интервалы между продуктами линейки;
- Контакты перенесём вниз и сделаем мельче и тоньше, чем весь остальной текст. Серым выделим место для QR-кода
Шаг 3. Добавим цветового контраста
А заодно сделаем кое-какие мелкие преобразования:
- Слоган, подзаголовок и контакты напишем белыми буквами на тёмно-синем фоне.
- Заголовок тоже сделаем тёмно-синим.
- Тем же самым тёмно-синим выделим название каждого продукта в линейке.
Что мы получили?
1. Глаз мгновенно улавливает структуру флаера.
2. Невозможно пропустить название линейки и её суть.
Что не так?
- Слоган выглядит почти так же, как подзаголовок. Но не совсем одинаково. С одной стороны, он привлекает внимание, с другой стороны, конфликтует с подзаголовком.
- Слабо считывается разделение между описанием линейки и списком продуктов.
Шаг 4. Добавим контрастов в шрифтах
Учли выявленные недочёты и внесли кое-какие коррективы:
1. Убрали синюю подложку у слогана. Вместо этого:
- написали слоган другим шрифтом. Это шрифт Source Code Pro: он более рубленный, вытянутый вверх;
- добавили тоненькую отбивку: тонкая синяя линяя контрастирует с широкой синей подложкой подзаголовка. Она, с одной стороны, облегчает шапку, с другой стороны, хорошо визуально отделяет слоган от всего остального.
2. Для заголовка и подзаголовка взяли более мягкий и даже немного игривый шрифт с начертанием Bold и Regular, соответсвенно. Этот шрифт называется Ubuntu.
3. Краткое описание системы мы написали универсальным, нейтральным шрифтом без засечек. Это - IBM Plex Sans с начертанием Regular. И тоже добавили тоненькую отбивку.
4. Для списка продуктов мы использовали тот же IBM Plex Sans, но с начертанием Light
Шаг 5. Стоп.
На этом можно остановиться.
- Мы уже увидели, что такое контраст, зачем его применять и как он помогает пользователю увидеть главное и сориентироваться в контенте.
- Мы выделили блоки и наметили, где необходимо обеспечить заметный контраст.
Дальнейшая работа по превращению этого макета в красивый флаер - это работа дизайнера, оформителя.
Разница между макетом и итоговым результатом может быть подобна пропасти. Давайте посмотрим, во что превратился этот макет в руках оформителя:
Дизайнер добавил айдентику, декор, поэтому акценты и контрасты пришлось выражать иначе.
Но блоки и структура макета в основном, сохранены. Считывается она так же легко.
Что если нарушить принцип контраста?
Принцип контраста (как и три предыдущих) кажется таким очевидным и таким естественным. Но он то и дело нарушается. Вы можете столкнутья с нарушениями в любом месте, в любой момент. Например, в кино:
И уж, конечно, обязательно, в интерфейсах.
Не хочется грузить вас длинными текстами и процессами. Устроим блиц. Будем просто рассматривать картинки и быстро называть проблемы.
1. Посмотрите на эту картинку. Что здесь не так?
Очень плохо видны поля для ввода логина и пароля.
2. А на этой картинке где не хватает контраста?
В правом нижнем углу есть три ссылки (по ним переключаются картинки в карусели) - заметили их?
3. А вот ещё пара примеров
Белый текст на белом фоне. В карусели крутятся изображения. И в какой-то момент белые буквы становятся невидмыми.
А вот мелкие тонкие чёрные буквы на фоне мелких тонких чёрных линий. Прочитать-то можно. Но это дело небыстрое.
Примеры 1-3 объединяет общая беда: не хватает контраста между фоном и контентом.
Продолжаем смотреть и подмечать. Заглянем в гости к нашим старым знакомым.
4. Портал "Работа в России" - уж очень глубоко врезался он в память автора
Мы уже исправляли эту проблему в своём ревью. И обратим на неё внимание ещё раз: трудно понять, какой фильтр выбран, потому что чёрный цвет не контрастирует с тёмно-синим. Без сомнения, он отличается, но это отличие не бросается в глаза. И нам требуется время, чтобы вглядеться и всё понять.
5. Ещё один пример - один из множества геопорталов
Взгляните на панель справа: на ней перечислены виды объектов, относящихся к группе "Природа и экология".
Там используется подложка-зебра. Это паттерн, при котором цвет фона под соседними элементами в списке или в таблице незначительно отличаются.
Получается, что все нечётные элементы/строки расположены на белом фоне, а все чётные, например, на светло-светло-сером. Различие между фонами не бросается в глаза, но помогает различать объекты в длинном списке или таблице. Подложка-зебра - это хороший паттерн и здесь он реализован правильно, к нему никаких претензий.
Тогда что же?
Посмотрите на пункт "Места (площадки) накопления ТКО". Зебра подсказываем нам, что фон под этим пунктом должен быть белым, но он серый. И этот серый цвет отличается от серого фона подложки.
Оказывается, что так выглядит пункт списка при наведении.
С одной стороны, новый оттенок серого конфликтует со всем своим окружением! Он выбивается по тону.
С другой стороны, он не даёт достаточно хорошего контраста.
6. И ещё один геопортал
Посмотрите на ссылки:
Обратите внимание, как слабо отличается ссылка, на которую навели курсор: МГИС Красноярского района от всех остальных.
Примеры 4-6 - объединяет одна общая черта:
один и тот же элемент в разных состояниях выглядит почти одинаково: нужно напрячься, чтобы уловить различия.
Ещё немного и будем закругляться.
7. Одна форма поиска
На этой форме есть поля, в которых заданы какие-то значения. И есть поля, в которых значения пока не заданы. Найдите 10 отличий между ними.
8. Покусимся на святое и немного покритикуем Яндекс
Вот так выглядит форма настройки нашего канала в яндекс.дзен
С одной стороны, Яндекс сложно упрекнуть в отсутствии стиля. Стиль-то у него есть. И он един для огромного количества сервисов. Но форма настройки канала выглядит откровенно неряшливо.
Неряшливость возникает из-за множества подписей, которые отличаются
- друг от друга чуть-чуть;
- немного разный шрифт;
- немного разный кегль;
- немного разный цвет;
- немного разное начертание;
- немного разный регистр...
Всё вместе - складывается в "дезигн вырвиглаз".
В примере 7 контраста в нужном месте нет вовсе.
А в примере 8 слишком много недостаточно явных отличий. Из-за этого возникает визуальный шум.
Вывод
На этом, пожалуй, остановимся сегодня. И повторим ещё раз принцип контраста:
Где ещё порядок с контрастами?
- d-russia.ru - все новости о цифровизации;
- rgis.mosreg.ru- геопортал Подмосковья;
- docs.cntd.ru - электронный фонд актуальных правовых и нормативно-технических документов.
Где можно поработать с контрастами?
Да вот, хотя бы на геопортале Ярославской области.
Наше ревью и новая статья будут здесь на следующей неделе.
#it скиллы, #время учиться, #ux дизайн, #интерфейсы, #ui дизайн
Автор: Светлана Хомякова