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