Как интервалы работают в интерфейсе
Условие задачи
Региональные власти размещают на своём портале информацию об инвестиционных проектах. Как правило это - большие стройки, реконструкции и преобразования, которые невозможно выполнить исключительно за бюджетные средства. Поэтому власти стараются привлечь к финансированию представителей крупного бизнеса.
Есть страница, на которой размещается перечень инвестиционных проектов региона. Для каждого региона есть карточка-миниатюра, которая по клику переводит на страницу с полным описанием проекта.
Заказчик планирует редизайн портала и просит сделать что-то со страницей инвест-проектов. Она перестала ему нравиться.
Задача
Сделать страницу более удобной.
Шаг 1. Формулируем проблему
1. Очень трудно разобрать, что написано в описании инвестиционного проекта. Название параметра сливается со его значением.
2. Трудно прочитать заголовок карточки. Сверху он придавлен изображением, снизу он "испачкан" описанием проекта.
3. Заголовок написан полностью заглавными буквами. Это утомляет, потому что такие буквы труднее читать. Заголовок, написанный жирными большими буквами создаёт визуальный шум.
Шаг 2. Устраняем проблему
Сначала возьмём одну карточку и структурируем информацию на ней так, чтобы устранить вышеописанные проблемы. Процесс преображения смотрите в галерее.
Шаг 3. Смотрим результат в комплексе
Мы переделали карточку и теперь можем взглянуть, как это повлияет на эргономику всей страницы.
А было вот так:
Шаг 4. Думаем ещё немного и подводим итоги
Наша страничка стала немного удобнее и аккуратнее, но она далека от совершенства. Навскидку можно сказать, что:
1. Карточки инвестиционных проектов можно было бы отделить друг от друга более явно (например, разместить их на плашках и добавить небольшую тень);
2. Возможно, стоит подумать о том, чтобы размещать карточки по две в ряду;
3. Мы слабо проработали граничные случаи. Что, если краткое описание получилось слишком коротким? А если слишком длинным? А что, если каких-то данных вообще нет? Как тогда будет выглядет форма?
4. Всё ещё остаётся много работы для дизайнера: от подбора шрифтов до графических элементов. Но мы и не ставим цели сделать красивую картинку. Наша задача - понять, за счёт чего повышается эргономика.
Мы успешно применили один из базовых принципов дизайна и получили неплохой результат.
Повторим принцип расстановки интервалов ещё раз
Связанные друг с другом элементы должны быть плотно сгруппированы и расположены в порядке, удобном для восприятия.