Статті
#экспертиза
Сайт Министерства охраны здоровья Украины
26 декабря, 2017
avatar
Сементий Лобач
Руководитель Projector.Odessa,
 куратор курсов графического дизайна
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

В рубрике #экспертиза мы анализируем дизайн-продукты и просим экспертов в своей сфере дать им оценку. Недавно Министерство охраны здоровья Украины обновило веб-сайт. Мы попросили Сементия Лобача, руководителя Projector.Odessa и специалиста в графическом и веб-дизайне, описать свои впечатления от использования сайта министерства.

Итак, сайт Министерства Охраны Здоровья Украины. Странички государственных организаций — отдельная прелесть.

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

Но это лирика, давайте по существу. Тут у нас госучреждение, и это нам не шутки шутить. Разберем же по косточкам. Открываем сайт на Маке в Chrome и подробно изучаем. На первый взгляд, пристойно. Давайте углубимся в детали.

Сразу бросается в глаза выедающая глаза типографика. С ней на ресурсе беда.

Гельветика — прекрасный интерфейсный шрифт, он распознаётся довольно быстро и легко. Но только на указателях, пунктах менюшек, в заголовках (и то, недлинных). Связный текст, набранный гельветикой, — мучение для читателя. Из-за очень закрытых апертур читается он никак, от слова совсем. Буква «с» скорее напоминает «о» при быстром чтении. Всё ломается.

Источник изображения: Pinterest

Заходим в раздел «Громадянам», натыкаемся на статью «Как питаться хорошо и жить подольше». Самое оно. Интерлиньяж ничего так, здесь дизайнер молодец. Хорошо разнес строки. Но только в текстовых блоках. Отступы между текстами и заголовками отсутствуют местами. Интро наклонной Гельветикой (курсива у неё нет, вот и применили, что могли) — грусть и печаль:

Заголовок второго уровня, который крупнее заголовка статьи, — это что-то новенькое. Два балла з забороною писати й малювати (с) команде проекта за такое.

Выравнивание текста в блоках: везде в связных текстах используется выключка по формату (на всю ширину, без правого «флага»). Это очередная жесть, так как пробелы в строках разной величины. Короче, надо учить матчасть.

Еще один камешек в огород повелителя шрифтов и хэдеров проекта — это списки и неразрывные пробелы. Про nbsp тут явно никто не слышал, в том числе про то, что предлоги-артикли надо переносить на вторую строку. Висячей пунктуации в маркерах списков нет в принципе. Это ломает компоновку. По науке они должны «свисать» за левую вертикаль текста. Можно списать на сложности верстки и управления контентом, но лично мне глаз режет.

Вот, вроде, и правильная сетка, но меню «упрыгало» вправо.

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

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

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

Компоновка элементов и удобство пользования. Тоже горе горькое, вообще-то.

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

Телефон горячей линии можно было лаконичнее написать, но ок. По поводу форматов номеров, то тут уже все смешалось. Никто особо не следит, но я бы дефис после «0» и после «800» заменил на пробелы. 0 800 801-333. Дань традиции, что ли.

Кнопку «Для людей с ограничениями зрения» я поначалу принял за поле и пытался там ввести поисковый запрос. Не надо так. Заодно выравнивание иконки и строки надо бы соблюдать. Сейчас око всевидящее упрыгало вниз, а текст вверх. Глаз на пиксель-два вверх подвинуть бы, а текст на пиксель вниз — и прекрасно было бы. Сама по себе эта кнопка ничего не дает, только увеличивает текст и ломает композицию. Она же дублируется слева кнопкой с такой же функцией, к которой добавлены функции сделать все черно-белым или синим (зачем?!).

 

Дальше — иконки соцсетей. Здесь тоже есть косячок. Иконки разного размера. Например, у YouTube вроде ж есть уменьшенная версия. С ней было бы стройнее.

И еще адрес аккаунта в YouTube. Вроде, и не дизайнерский вопрос, но при наведении выглядит забавно.

🙂

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

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

При скролле шапка уменьшается по высоте. Но это происходит настолько резко, что очень раздражает. Плавнее бы. 2017 год на дворе, сайт явно не в Internet Explorer’е открыт.

 

Меню слева и подменю. При клике на пункт со стрелкой предполагаешь, что она просто развернет список подразделов, без перезагрузки страницы. Но нет. «Я что-то нажала и всё исчезло». Сразу переходим в корень подраздела. Тоже не очень обоснованно, происходит внезапно.

 

На скрине повыше фотография в статье огромная для превью текстовой страницы. При том, что особого смысла не несет (полистав ленту, тоже это заметите). Еще и находится у блока в левой «подмышке», тем самым отбивает маленький заголовок  от текста и ссылки. Я рекомендовал бы заголовок увеличить, текст поставить слева, а фотку — справа.

Контент-менеджмент — бессмысленный и беспощадный:

И это не при наведении, а просто так, ни с того ни с сего. Всем видно, что наклонная Гельветика читается еще хуже обычного начертания?

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

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

Элементы, не связанные по смыслу, находятся дальше друг от друга, чем объекты в одном и том же блоке. Расстояние между текстом и превью из блока другой новости соразмерно с пробелом в тексте, (см. скрин выше). На главной есть подобный блок, кстати.

Навигация в фотогалерее заставляет задуматься. Ссылка условий использования явно должна бы быть в другом месте:

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

Крестик в слайдере, который просто его скрывает. Поиск, который дублирует поиск в шапке.

 

Есть здесь и алфавитный указатель. Для меня его целесообразность овеяна тайной дальних морей. Количество статей по всем буквам не так уж велико. Разве что, кто-то будет искать через него информацию о Северо- Атлантическом Альянсе. (Привет, плавающие кнопочки смены цветовой гаммы сайта).

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

Ссылка тяжелее заголовка. Так не стоит делать.

Я еще и в поле подписки на рассылку ткнул. Сноска, вместо которой можно было дать строчку текста под заголовком, детектед.

Ну, вот такой у нас получился обзор. Общее впечатление напоминает слова героев хорошего кино: «Небо темное, но когда-то на нем не было звезд, а сейчас есть. So the light is winning», кажется, так.

Хорошая новость — сайт гораздо эстетичнее, чем он мог бы быть. Страшно вспомнить, что делалось в этой сфере лет 10 назад. И это, конечно, шаг вперед по сравнению с былым мракобесием.

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

avatar
Сементий Лобач
Руководитель Projector.Odessa,
 куратор курсов графического дизайна
Колонка

У нас есть еще кое-что для вас

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: