UX аудит новостного портала №1 в Казахстане

Одно из первых СМИ в казнете. С чтения новостей, комментариев, интервью, авторских колонок на Tengrinews.kz начинается (и зачастую продолжается) день у большей части казахстанских пользователей.

Мы провели блиц-аудит проекта в короткие сроки, выявили основные проблемы, как оказалось лежащие на поверхности и предложили конструктивные решения.

Дали толчок редизайну :-)

0 User Interface

Общий обзор интерфейса с точки зрения восприятия пользователем

0.1 Пространство

Первое, что бросается в глаза - явный перегруз информацией. Образно говоря, на сайте слишком много контента приходится на каждый пиксель. При подобной загрузке контентом внимание привлекает одновременно все и ничего.

0.2 Цвет

Цветовая схема подобрана разумно: легкие светлые фоновые оттенки и зеленые акценты приятны глазу. Но из-за общего перегруза цветовое решение перестает работать должным образом.

0.3 Типографика

Типографика оставляет желать лучшего. Невооруженным взглядом наблюдается запредельное количество начертаний, стилей текста и как минимум 2 разные гарнитуры, использованные необоснованно.

0.4 Иерархия

Видно, что иерархия контента, возможно, разрабатывалась вполне логично и структура сайта как новостного портала пользователю вполне знакома, но, снова, заложенная идея и реализация сильно отличаются. Постоянный пользователь, возможно, превосходно ориентируется в иерархии, а вот новый с легкостью может запутаться, что вынуждает потреблять материалы неосознанно, “в слепую”.

0.5 Стили

Стили компонентов интерфейса имеют место быть в 2018 году как классический Flat Design. Тем не менее, с ними нужно поработать таким образом, чтобы везде стало больше воздуха и меньше топорности. Обращу внимание, что сейчас повсюду внедряется Semi Flat Design как компромисс между скевоморфизмом и Flat. Наиболее удачным примером является дизайн-система Material от Google – на данный момент наиболее современный кастомизируемый инструмент для создания интерфейса. Возможно, это решение поможет освежить интерфейс. Если вкратце: плоский дизайн становится более живым благодаря, например, небольшому объему в качестве теней.

1 Главная страница

Детальный разбор компонентов интерфейса с точки зрения восприятия и юзабилити. Включает в себя общие и локальные проблемы, для которых предложены решения

1.0 Общая оценка

1. Основные проблемы вытекают из перечисленных выше проблем с UI. Сомнительные иерархия и типографика создают визуальную и логическую путаницу, что влияет как на восприятие так и на удобство использования сайта. В данный момент ситуация похожа на такую: пользователь может кликнуть в любое место и попадет в ту или иную статью. Если это решает задачу страницы – проблемы нет. Если же присутствует потребность к тому, чтобы пользователь потреблял контент осознанно, оставался довольным и лояльным, необходимо решить подобные проблемы: отсутствующие акценты, неочевидная с первого взгляда иерархия, затруднительная навигация.

Решение:

Полностью переработать типографику и более явным образом визуально выделить смысловые блоки страницы. В частности, не помешает общее укрупнение контента: большие фото и крупные шрифты, чтобы разделить самое главное и второстепенное.

2. Некоторые компоненты и элементы страницы не работают и не выглядят так, как от них этого ожидает пользователь. В современном мире вполне обоснована тенденция к стандартизации интерфейсов: эпоха Web 1.0 далеко позади и все привыкли, что те или иные компоненты (условно, поиск, выпадающие меню, слайдеры, кнопки) выглядят определенным образом. Поэтому, когда что-то на сайте выглядит не так, работает не так, как привык пользователь, или не работает вообще, безусловно, это вызывает негатив и отталкивает.

Решение:

Привести все комопненты к единой и современной дизайн-системе, опираясь на опыт крупных компаний. Пересмотреть расположение компонентов в макете страницы и выбрать наиболее удобное для пользователя.

1.1 Шапка

Общая оценка

1. Некоторые компоненты находятся не на своих общепринятых местах. Кроме того, почему-то, визуально контент шапки прижат к левой границе, в то время как в правой пусто и отсутствуют элементы, логически закрывающие этот блок. Это негативно влияет на восприятие. Шапка слишком растянута в высоту в то время как она свободно могла бы уместиться в 1-2 строки, чтобы оставить больше пространства для основного контента

Решение:

Перекомпоновать составляющие таким образом, чтобы сократить высоту шапки и привести их к более логичному расположению. Например, слева направо: лого, поиск, языки выпадающим списком, телефоны и кнопка CTA. Курсы валют выгоднее было бы просто опустить на вторую строку, а не занимать такое пространство для них.

2. Некоторые компоненты работают неочевидно, например, иконка календаря рядом со строкой поиска.

Решение:

Пересмотреть и исправить юзабилити элементов. Детально об этом описано ниже в разборе каждого компонента.

Верхняя навигация

В первую очередь возникает вопрос: почему верхние ссылки на тематические страницы визуально больше основной навигации? Это может быть сделано намеренно, но по логике они не должны бросаться в глаза так явно и в навигации фокус должен быть на основных компонентах интерфейса. Хаоса добавляют разношерстные иконки, которые не стилизованы и не приведены к одному виду. И в конце концов, на этом месте, где сейчас располагаются верхние ссылки, ожидается основное меню сайта.

Проблемы:

1. Акцент с основной навигации снят и направлен на тематические проекты.
2. Отсутствует стандартизация в оформлении.
3. Навигация занимает место основного меню сайта.

Решения:

1. Визуально приглушить ссылки на тематические страницы.
2. Использовать иконки в одном стиле и цвете.
3. Скрыть навигацию в выпадающее меню как сейчас сделано с основной, основную же вынести на это место.

Лого

С точки зрения юзабилити это простой элемент и нет смысла рассматривать его функционал. Что касается восприятия - здесь есть над чем поработать. Логотип занимает слишком высокое пространство, делая шапку неоправданно высокой, что отвлекает пользователя от основного контента. Подпись “актуальные новости” плохо различима и нечитабельна. В 2018 году логотипы обязаны быть адаптивными, чтобы не возникало лишних проблем на разных устройствах и платформах.

Проблема:

Лого слишком громоздкий и перегруженный.

Решение:

Использовать современные варианты компоновки адаптивных логотипов, а именно:

1. Оставить только знак.
2. Оставить знак и название, но знак уменьшить, а надпись сделать в одну строку.
3. Использовать знак, название и подпись, немного увеличив размер шрифта последней.

Языки

Это плюс, что смена языка доступна по одному клику, но из-за этого также приходится делать шапку высокой. В данном случае стоит расставить приоритеты.

Проблема:

При условии, что делаем шапку более узкой для более комфортного просмотра контента, выбор языков, расположенный в колонку, является громоздким для такого решения.

Решение:

Скрыть в выпадающий список - как наиболее распространенный и привычный пользователю вариант.

CTA + Телефоны

Здесь снова вопрос с расположением и ситуация двоякая. Возможно, в данной нестандартной компоновке шапки эти элементы привлекают внимание, находясь по центру. С другой стороны, любые контакты и подобные кнопки в большинстве случаев располагаются и ожидаются в правой части шапки, закрывая ее таким образом.

Проблема:

Кнопка и номера телефонов располагаются не на своем ожидаемом месте.

Решение:

Расположить компоненты в правой части шапки.

Поиск

Поиск критично неудобный в силу как дизайна, так и логики функционала. Во-первых, он очень маленький. Крошечные иконки, размер шрифта, размер поля. Это доставляет дискомфорт.

Функицонал выпадающего списка, позволяющего производить поиск в поисковых системах, работаем таким образом, что при выборе всех трех параметров, ни один из них не возвращается в исходное положение при повторном клике. С точки зрения пользовательского опыта такое отображение нельзя назвать корректным.

Иконка календаря справа имеет стрелочку рядом с собой, что подразумевает функционал выпадающего списка. При нажатии обнаруживается, что это – ссылка на другую страницу, что не соответствует ожиданиям. Сам облик иконок также оставляет желать лучшего в силу своего маленького размера.

Проблемы:

1. Все элементы слишком маленькие, что вызывает проблемы в восприятии и удобстве использования.
2. Меню поиска по Яндекс и Google некорректно отображается при выборе всех параметров.
3. Иконка календаря подана как выпадающий список, хотя им не является.

Решения:

1. Сделать крупнее поле, шрифт и иконки. Ориентируясь на поле, как минимум сделать его выше в полтора-два раза. В случае перекомпоновки шапки, о которой речь шла выше, поиск может занимать значительное место по центру, или же быть скрыт в иконку и крупно выведен при нажатии.
2. Когда, пункт поиска по Яндекс, например, выбран, при повторном нажатии галочка должна пропадать и параметр снова становиться неактивным, пребывая в исходном положении.
3. Убрать стрелку рядом с иконкой календаря.

Курсы валют

Это – явно один из тех элементов шапки, который увеличивает высоту шапки, скрадывая полезное пространство. Наиболее устоявшийся вариант – расположение курсов в одну строку.

1.2 Меню

В целом этот компонент работает исправно, и критичных проблем не было обнаружено. Было замечено, что с главной страницы основное меню пропало, и это вносит некоторое смятение в паттерн пользования сайтом. Необходимо взвесить оправданность такого шага, если это было сделано намеренно.

Кроме того, как было замечено ранее, меню ожидается в шапке, в развернутом виде или в гамбургере, как сейчас.

1.3 Основной блок новостей

Общая оценка

Структура этого блока построена вполне логично. Заглавная новость – действительно крупный элемент, которых на сайте хотелось бы видеть больше. Контент в такой подаче раскрывается великолепно и цепляет глаз. Разумеется, в этом замечании не исключается иерархия контента. Замечания в этом блоке в основном касаются мелких элементов и типографики. Именно настолько мелкие элементы создают множество проблем в мобильной версии. Рекумендуем при редизайне проекта уделить внимание мобильной версии.

Главная новость

Единственное, что действительно режет глаза – слишком мелкие показатели просмотров и комментариев. Иконки рядом с ними из-за этого тоже сильно страдают. Если используется такой размер, необходимо подбирать специальные маленькие иконки, которые не страдают в качестве от такого размера. В них должно быть минимум деталей.

Проблема:

Мелкие показатели просмотров и комментариев.

Решение:

Увеличение размера шрифта на 1-2 пункта. Подбор иконок, которые адекватно будут смотреться в таком размере. Для их информативности они должны иметь минимум деталей, но сохранять узнаваемые формы.

Плитки новостей

Расположение, иерархия, типографика относительно комфортные, но здесь есть, куда расти. Что касается иерархии: дата и время как правило располагаются под заголовком и ожидаются именно там, а не над ним. Заголовок – первая и главная структурная единица, все остальные идут после него. Кроме того, тут присутствует сомнительный момент с акцентном, который относится и ко всему сайту в целом. Дело в том, что акцентный цвет – зеленый в нашем случае, – задается только для самых значимых и, как правило, интерактивных компонентов и элементов сайта. По правилу восприятия акцент должен составлять не более 10% от всего ресурса – тогда он будет выполнять свою прямую функцию, привлекать внимание к самым главным действиям. В данный же момент ситуация такая, что из-за неграмотной расстановки акцентов во многих местах сайт просто пестрит в глазах. В основном это замечание касается общего восприятия и сложно моментально оценить улучшение качества поведения пользователей на сайте, но изначально исправление этой ошибки сформировало бы о ресурсе совершенно другое впечатление.

Общая компоновка новостей выглядит слишком набитой, в ней не остается свободного пространства. Решением может послужить вынос списка новостей в правый сайдбар, тем самым увеличив пространство для маневра. Еще одно элегантное, но более тяжело внедряемое решение – начать использовать отдельную карточку для каждой отдельной новости. Это будет немного похоже на блок из четырех карточек «путешествия», «блоги и мнения» и т.п. Карточки позволят легко маневрировать пространством и задавать для каждой новости наиболее выгодное расположение с меньшими трудозатратами. Кроме того, с ними легче будет построить адаптивную мобильную версию. Они идеальны как для разработки, так и для использования и восприятия.

Проблемы:

1. Дата и время занимают сомнительное место в контентной иерархии.
2. Акценты не обоснованы.
3. Слишком мало пространства для комфортного восприятия.

Решения:

1. Расположить дату и время под заголовком.
2. Убрать зеленый акцент и по-другому построить выделение конкретно этого элемента: интенсивностью серого цвета или шрифтовым начертанием.
3. Выиграть пространство засчет перекомпоновки смысловых блоков или внедрения карточек новостей.

Список новостей

Иконки видов контента – фото или видео, – так же слишком малы, как и многие другие элементы сайта. Они едва различимы. Такой размер иконок был приемлем около 15 лет назад, когда были маленькие экраны. Сейчас нет причин так сильно экономить пространство и заставлять пользователей вглядываться в содержание.

Другой вопрос вызывает формат, когда используется фото вместе с текстом. Это, безусловно, хорошее решение. Но оно выбивается из текущего контекста и эффективней бы было стандартизировать список, использую только один вид подачи контента: или только текст, или фото + текст.

Справедливы и вышеперечисленные замечания об иерархии и пространстве.

Проблемы:

1. Виды контента не стандартизированы.
2. Иконки о фото и видео контенте воспринимаются очевидно плохо.

Решения:

1. Привести контент к единому стилю и стандарту.
2. Следует сказать наперед, проблемы с иконками практически везде: где-то они играют сомнительную роль, где-то исполнены криво, где- то едва различимы. Этот момент необходимо также привести к общему знаменателю. Иконка должна взаимодействовать с пользователем или подсказывать ему и делать это внятно. Они должны быть несколько больше и исполнены в едином читаемом, улавливаемом стиле.

1.4 Статьи

Блок с плитками статей похож на блок с плитками новостей, но воспринимается несколько лучше. Стоит обратить внимание на жирные заголовки – это действительно лучше, чем заголовки в начертании Regular. К юзабилити в основном нет вопросов – тут все прозрачно. В целом к этому блоку справедливы комментарии о пространстве к плиткам новостей.

1.5 4 мини-блока

В целом карточки спроектированы оптимально и вряд ли вызывают проблемы. Единственные нарекания вызывает карточка «Блоги и мнения», а именно отсутствие явных акцентов на ней. Приведем пример: в плитках с новостями присутствуют кликабельные заголовок и фото, что логично. В карточке мнений кликабельны название раздела, имя автора, заголовок, фото автора. Сам этот факт нормален, но проблема в том, что отсутствует акцент на ключевом элементе, который обязан захватить пользователя. Не ясно, куда пользователь должен уйти – в сам раздел, на страничку автора или к, собственно, публикации? Скорее всего, наибольший вес здесь представляет публикация, но дизайн построен таким образом, что это – неочевидно.

Как и во многих случаях на сайте, на карточке неграмотно используется пространство. В этот раз его слишком много относительно всего контента. Фото автора могло бы быть больше, заголовок статьи определенно должен быть больше, к тому же, очевидно в карточке просится тематическая картинка как и везде.

1.6 Рубрики

К этому разделу относятся все остальные комментарии, которые касаются плиток новостей. Хочется подчеркнуть исключительно один элемент, который относится к UI. Оформление названий рубрик выполнено довольно топорно. Есть предположение, что это было внедрено после создания основной концепции дизайна. Выравнивание по центру диссонирует с выравниваем по левому краю даты и заголовка, а шрифт с засечками, который используется в основном в названиях карточек, подобран не совсем корректно.

Проблема:

Форматирование названий рубрик не совпадает с форматированием остального контента плитки каждой отдельной статьи.

Решение:

Стиллизовать элемент по-иному. Это может быть шрифт начертания Sans Serif с выравниваем по левому краю. Чаще всего в таких случаях используют маленькую подпись сверху в прямоугольнике – этот вариант более привычен для большинства.

1.7 Фотогалерея

Приятный в использовании блок. Следует сказать, что спроектированных подобным образом блоков должно быть больше на сайте в целях вовлечения посетителя. Из плюсов можно отметить простоту, логическую обоснованность использования, крупные переключатели, возможность оперировать впечатляющим контентом. Этот блок стоит в противовес остальным со скупым пространством. Стоит задуматься о том, чтобы поместить его выше, чем сейчас.

1.8 Сайдбар

Справедливы замечания о пространстве, типографике, иерархии и акцентах, приводившиеся ранее. Отдельно стоит выделить список новостей с двумя табами. Это – великолепный пример того, что упоминалось про зеленый акцентный цвет. В этом блоке однозначно все рябит, на него просто неприятно смотреть. При переключении верхних табов пропадает перегородка между ними – проблемы в разработке. Присутствие нижних табов само по себе вводит в заблуждение: то есть необходимо пройти 2 уровня выбора, чтобы добраться до нужного контента.

Решением проблемы может послужить пересмотр акцентов, во- первых. Во-вторых, разбиение разделов «Читают» и «Обсуждают» на две разные смысловые единицы. Как альтернатива – оставить как есть, но изменить логику нижних табов, чтобы многоуровневость не вводила в заблуждение новых пользователей.

1.9 Подвал

UX незамысловатый и корректный, не нуждается в комментариях. Что касается восприятия – проблема, похожая на проблему с шапкой. Теперь пространства слишком много и белый пробел посередине просто смущает. Здесь представляется возможным перекомпоновать информацию таким образом, чтобы все стояло на своих местах. Например, меню совершенно точно не ожидается в этом месте. Навигация как правило располагается слева направо, а не в правом углу. Во-вторых, почему бы приложения не выделить специальными бейджами? Это попросту информативнее и приятнее для пользователя, чем подача ссылками.

2 Страница интервью

Разбор основных компонентов интерфейса с точки зрения восприятия и юзабилити. Включает в себя общие проблемы, для которых предложены решения. Все замечания справедливы для страницы статей

2.0 Блок интервью

В UI ничего нового, чего не было на главной странице. Замечания касаются аналогичных вещей: работа с пространством, отсутпами, типографикой, иконками. Отдельного внимания требует отсутствие стандартизации высоты фотографии для каждого интервью — зачастую наблюдается «лесенка» в расположении фото, и это вносит ненужный беспорядок в структуру и сетку элементов.

С точки зрения пользовательского опыта затрагивается диллема пагинации и скроллинга. В данный момент реализована пагинация, но не секрет, что большое количество пользователей могут предпочитать ей скроллинг. У каждого способа просмотра контента есть свои плюсы и минусы. Сложно однозначно сказать, что может быть эффективней на конкретно этом ресурсе, но в то же время имеет смысл попробовать оба варианта. Одним из решений может быть одновременное использование: страница может скроллиться бесконечно, но в то же время пагинация всегда остается на месте.

3 Блоги и мнения

Разбор основных компонентов интерфейса с точки зрения восприятия и юзабилити. Включает в себя общие проблемы, для которых предложены решения

3.0 Блок блогов и мнений

В целом информация подана хаотично, слабо ощущаются границы между смысловыми блоками информационной структуры. Скорее всего это происходит из-за некорректного распределения пустого пространства: в данный момент его слишком много. Решением служит реструктуризация контента и грамотная расстановка акцентов. К примеру, сейчас имя автора и заголовок статьи одинаковых размеров, но для глубины необходимо разграничить главное и второстепенное, выделив что-то одно.

Имя автора при наведении становится красным — это сомнительный опыт. Не находится причин, почему hover должен быть именно таким, он выделяется из общей массы. Часто красный может отпугивать. В этом контексте подошел бы стандартный hover сайта или же зеленый цвет.

4 Новость

Разбор основных компонентов интерфейса с точки зрения восприятия и юзабилити. Включает в себя общие проблемы, для которых предложены решения. Все замечания справедливы для других текстовых страниц

4.0 Текстовый блок

Было выявлено 2 основных спорных момента в подаче контента на текстовой странице. Во-первых, не было замечено детально проработанной типографики. Основной текст читается и воспринимается вполне нормально, но иногда как правило требуются дополнительные разделители смысловых блоков. Речь идет о подзаголовках первого и второго уровней.

Во-вторых, в материалах с большим количеством фотографий становится тяжело воспринимать информацию. Проблема в том, что последовательно располагается большое количество фото с однострочными или двустрочными подписями между ними. В таком случае не получается определиться, на чем фокусироваться — на фотоконтенте или на тексте.

Решением этого вопроса служит как первый вариант — использование специально отведенной карточки для фотографии, под которой будет располагаться подпись. Подпись не должна быть реализована тем же шрифтом, что и основной текст. Другой распространенный вариант подачи такой информации — отведенный блок сразу под несколько фотографий, который по размеру будет занимать приблизительно столько, сколько занимает сейчас одна. Фотографии можно листать и увеличивать — это гораздо более комфортное решение.

Последний блок «Читайте также» удобнее бы воспринимался в качестве отдельного блока в подобном формате, как реализовано на главной странице, или же отдельными карточками внизу. Простая истина «картинка + текст» значительно увеличивает шансы перехода на следующую статью, нежели когда информация подается исключительно в текстовом виде.

4.1 Левая навигация

Ссылки по теме и другие новости рубрики реализованы относительно удобно, но, как и в большинстве случаев на ресурсе, не хватает дополнительного смыслового разграничения: возможно это — увеличение отступов, возможно — более явное ненавящивое обрамление.

4.2 Комментарии

1. Правилом хорошего тона является заранее заготовленное текстовое поле для написания комментария. Сейчас пользователь совершает больше лишних действий, чтобы написать его.
2. Замечание: по клику на кнопку «Добавить комментарий» ничего не происходит.
3. Нет смысла рассредоточивать все функциональные элементы комментария по всем углам. Дата по центру обескураживает — она будет на своем месте справа от имени комментатора. Основные действия такие как ответ и оценка комментария вынесены далеко от левого края. Создается впечатление, что за ними нужно специально «тянуться», чтобы начать взаимодействие. Система комментариев YouTube, реализованная в данный момент в дизайн-системе Material и имеющая практически те же функции, может послужить добрым ориентиром (но не панацеей).
4. О табах (старые – новые – лучшие) уже шла речь на главной странице, они оставляют желать лучшего. Плюсом ко всему сказанном при тестировании страницы этот функциональный элемент никаким образом не реагировал визуально на взаимодействие с ним. Пользователь должен понимать, какой из пунктов выбран, но при проверке взаимодействия табы оставались неизменны таким образом, что не было ясно, какой выбран, а какой — нет.

5 Автор

Разбор основных компонентов интерфейса с точки зрения восприятия и юзабилити. Включает в себя общие проблемы, для которых предложены решения.

5.0 Блок автора

Приятно реализован блок заголовка с автором. Тем не менее, один нюанс может испортить опыт — слишком маленькая фотография автора. Исправит впечатление размещение фото в высоту, равную расстоянию от начала имени автора, до конца списка соцсетей.

В целом заметно, что фотографии на сайте, особенно относящиеся к авторам, совершенно не стандартизированы. В настоящее время, в большей степени под влиянием mobile first дизайна, фотографии людей в подобных случаях как правило имеют соотношение сторон 1:1 и помещаются в круг, что приятнее для глаза. Иногда этот вариант может не подойти, но стоит поэкспериментировать, чтобы привести все к стандартному виду.

Не является очевидным расположение даты выше заголовка — как правило она ставится ниже.

6 Теги

Разбор основных компонентов интерфейса с точки зрения восприятия и юзабилити. Включает в себя общие проблемы, для которых предложены решения.

6.0 Список тегов

1. При таком количестве тегов сразу же напрашивается поиск по ним.
2. Более того, без поиска в общей массе теги совершенно не читаются. Необходимо решать проблему подачи информации. Решением может выступить создание для каждого тега своей рамки с отступами, что увеличит общее пространство между друг другом. Разумеется, высота самой страницы значительно увеличится, но нужный тег будет проще найти в общем списке. В Material Design есть похожий на это элемент, который называется чипом.

6.1 Выдача по тегу

В первую очередь в глаза бросается отсутствие стандартизации подобных списков контента. Похожий по смыслу блок со статьями есть и на странице автора, но выглядит он немного иначе. Как минимум, по-иному реализована логика расположения и типографика, а это сбивает столку. Стандартизация похожих компонентов интерфейса необходима для комфортного времяпровождения на сайте.

Как раз в заголовке блока, где указывается тег, подошли бы чипы, о которых говорилось выше. На данной странице напрашивается возможность вводить, добавлять теги, искать по ним, фильтровать и удалять ненужные, просматривать релевантные предложения по другим тегам формата «Люди также ищут Tag1, Tag2», не уходя с нее обратно к большому списку тегов. Подобный функционал сделал бы работу с тегами гораздо комфортней, а сейчас он реализован довольно скомканно.

7 Законы Казахстана страница

Разбор основных компонентов интерфейса с точки зрения восприятия и юзабилити. Включает в себя общие проблемы, для которых предложены решения.

7.0 Расширенный поиск

Цветовая схема подбрана неудачно и напоминает больше на сайты начала 2000-х годов. Непонятно, почему категорически отсутствует привязка по стилям форм, типографики, цветов к основному сайту. Если это создавалось с целью обратить внимание на то, что это отдельный ресурс, то эту цель можно достичь несколько иначе. Для подобных официальных серьезных тем идеально подходят белый, светлые оттенки серого и синие акценты, но никак не пастельные разноцветные поверхности для контента. Разумеется, идеально было бы использовать зеленый корпоративный цвет.

Собственно, функционал расширенного поиска также организован неуместно. Три одинаковых по способу работы компонентов представляется возможным выстроить друг за другом в колонку. Не стоит показывать сразу все содержимое всех компонентов. В итоге, можно получить 3 полосы с заголовками (тип документа, орган издатель, отрасль права), каждая из которых раскрывается только после действия пользователя. В раскрытом варианте следует расположить чекбоксы не в одну колонку, т.к. это прибавит много бесполезного пустого пространства, а в 2-3 колонки, тем самым получится отказаться и от скролла внутри каждого компонента: все пункты будут видны сразу в компактно оформленном виде. Таким образом, этот функционал станет гораздо дружелюбней и не будет пугать пользователя своей громоздкостью, а главное, станет привычным.

В дате принятия просится всплывающий календарь после начала взаимодействия с полем. Это будет особенно полезно в мобильной версии.

7.1 Поисковая выдача

Самое грубое нарушение: отсутствие реакции пункта выдачи на наведение курсора. При первом посещении сложилось твердое впечатление, что на странице находится лишь текст, с которым невозможно взаимодействовать.

7.2 Текст закона

Очевидно, типографика недружелюбна и нечитабельна. Возможно, у законов свои нормы оформления, но повсюду бросаются в глаза несоблюдение даже очевидных правил выравнивания текста, которые должны соблюдаться как само собой разумеющееся понятие. В любом случае, рекомендуется избегать таких грубых нарушений как сплошной текст заглавными буквами или полное отсутствие оформления таблиц.