На прошлой неделе мы познакомились с четвёртым фундаментальным принципом проектирования интерфейсов: с принципом контраста.
И решили взять на ревью геопортал Ярославской области: найти нарушения принципа контраста и придумать быстрый способ это исправить.
Оговоримся: на этом портале можно найти нарушения всех четырёх принципов проектирования. Проблемы есть и с выравниванием, и с повторением, и с интервалами, и с контрастами.
Да и вообще, само графическое решение выглядит немного устаревшим. Видно, что этот ресурс появился не вчера. Видно, что этот геопортал — рабочая лошадка. Этакий трудяга, который красотой не блещет, но своё дело знает.
Сегодня мы не будем закапываться в интерфейс слишком глубоко. А проведём блиц-ревью. Просто найдём несколько самых очевидных нарушений принципа контраста. И сформулируем решение. И даже не будем ничего перерисовывать.
Поехали! Будем отмечать проблемы и предлагать решение
Проблема 1. Если нажать на кнопку "Найти", то надпись на ней станет чёрной. Чёрной на серо-коричневом фоне.
Решение. Подобрать другой цвет.
Проблема 2. В меню слева находятся иконки. Каждая из них соответствует группе объектов определённого типа. Если навести на пункт меню, то появится баббл. А в нём будет написано, какие объекты относятся к этому типу. Заголовок баббла выделен: он написан курсивом. Но всё равно слабо отличается от остального списка.
Решение. Выделять заголовок кеглем и цветом.
Проблема 3. Если найти что-нибудь с помощью поиска, то справа появится список результатов. В списке есть название каждого объекта и его координаты.
Решение. Найти иной цвет для координат. Например, сделать координатные подписи голубыми, как кнопка "Сбросить поиск".
И сделать их активным элементом. Например, чтобы при нажатии на координаты выполнялось центрирование на объекте.
Или при нажатии копировать их в буфер обмена.
Во-первых, это полезная функциональность.
Во-вторых, голубой цвет, одинаковый у кнопки и у координат, намекал бы пользователю, что с координатами можно что-то делать. Что они — активны (сработал бы принцип повторения).
Проблема 4.
Когда кто-то наводит мышь на элемент списка, то цвет фона элемента меняется. Но изменения почти незаметны.
Если мышь наведели на нечётный (серый) элемент, то разницу в оттенках тяжело уловить.
А если мышь над чётным (белым элементом), то получается три почти одинаковых серых элемента подряд.
Решение. Делать фон контрастным.
Проблема 5.
Та же самая проблема в меню слева. Только серый цвет чуть-чуть насыщеннее, и зебра другая.
Тут наоборот: нечётный элемент светлый, а чётный — тёмный.
Решение. Такое же, как и в проблеме 4.
Только надо позаботиться, чтобы зебра там и там была одинаковой.
И цвет фона при наведении тоже должен быть одинакового цвета. А не как сейчас.
На этом, пожалуй, остановимся
Короткому ревью — короткие выводы.
- Усиление контраста улучшает эргономику. Интерфейс с контрастами в нужных местах становится более отзывчивым. Не нужно тратить лишние силы на распознавание элементов.
- Элементы, разные по назначению и значимости, должны отличаться друг от друга.
- Один и тот же элемент в разных состояниях должен выглядеть по-разному.
- Контраст должен быть достаточно явным.
#it скиллы, #время учиться, #ux дизайн, #интерфейсы, #ui дизайн
Автор: Светлана Хомякова
