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