Коронавирус, простуда, грипп: как отличить?

Игорь Штанг у себя в блоге показал проблемную вёрстку одной из официальных таблиц по коронавирусу Роспотребнадзора и запустил конкурс среди дизайнеров (и не только), кто лучше её исправит.

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

Вот она, исходная картинка

Можно бесконечно описывать, что с ней не так, вместо этого давайте просто начнём постепенно перерабатывать её.

Прорабатываем «шапку» 🎩

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

Оригинал:

ОСНОВНЫЕ РАЗЛИЧИЯ МЕЖДУ СИМПТОМАМИ КОРОНАВИРУСА COVID-19, ПРОСТУДНЫХ ЗАБОЛЕВАНИЙ И ГРИППА

Для начала убираем к чёртовой матери КАПС, потому что это зло снижает читаемость:

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

Стало лучше, но как-то длинновато и запутано, упрощаем (чем короче и проще — тем быстрее считывается информация):

Различия между симптомами коронавируса, простуды и гриппа.

1. «COVID-19» дублировать в заголовке нет смысла, он и так присутствует в виде логотипа.
2. «Простудные заболевания» люди называют «простудой».
3. А «основные» — просто лишнее слово для подстраховки. Если это основные различия, то какие не основные? И вообще сам факт наличия основных и второстепенных различий важен? Для кого и зачем эта таблица?

Отлично, так мы подошли к задачам и целевой аудитории таблицы.

Определяем задачи и целевую аудиторию 🎯

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

Желательно не перегружать медицину избыточными обращениями.

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

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

Так что главная задача — позволить пациенту прикинуть самостоятельно, болен ли он опасным коронавирусом или у него обычная простуда / грипп. Понять, стоит ли беспокоиться и вызывать врача, либо пока достаточно сесть на карантин.

Здоровым людям таблица должна помочь дистанцироваться от тех, кто потенциально может быть болен ковидом и отправить их в больницу / на карантин.

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

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

Итого, шапка превращается в:

Потому что в этом основной смысл и польза таблицы для пользователя. Коротко и ясно.

Коронавирус ставим первым словом, ведь он здесь главный, табличка на самом деле не про грипп или простуду, она про коронавирус. Беглый взгляд на плакат в больнице или картинку в интернете — и сразу понимаешь, о чём речь.

Действие усиливаем, превращая в глагол «отличить», для ускорения считывания информации.

Красная плашка COVID-19 в качестве логотипа — хорошая идея, сразу понятно, о каком коронавирусе речь + дополнительная визуальная идентификация. Оставляем.

«Роспотребнадзор» здесь — информация десятого уровня важности, выпиливаем из шапки.

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

Таблица: Разбираемся с визуальной частью 🤡

1. Для начала сжигаем на костре КАПС.
2. Выпиливаем чересстрочное выделение фоном (Игорь объяснял, почему).
3. Подбираем менее слепленную гарнитуру шрифта.
4. Добавляем воздуха между строками, дабы разлепить эту однородную массу.
5. Делаем весь шрифт одним размером (разные не нужны).
6. Снова превращаем длинные «простудные заболевания» в короткую «простуду» (проще считывается, уходит лишняя строка в шапке таблицы).
7. Избавляемся от красного в заголовках таблицы, он вносит смысловую путаницу, ведь красным в таблице выделено слово «часто».
8. Заголовочную часть таблицы отделяем чуть большим отступом и начертанием пожирнее (выбрали medium, этого достаточно), это работает лучше размера шрифта и жирности в оригинале

Прорабатываем частоту симптомов 🌡️

Таблицу уже можно читать, но есть вопросы к частоте симптомов:

1. Что такое «часто», «редко», «иногда»?
   К примеру, 25% случаев — это часто, иногда или редко? Врачам, наверное, всё понятно, но простым людям — нет.
   
   Добавляем разъяснение под таблицу: часто — это > 40% случаев, иногда — 10−40%, редко — < 10%.
   
   Чтобы не дублировать три раза слово «случаев», указываем его только в начале, дальше всё понятно.
   
2. Приправляем данные цветовым кодированием.
   «Часто» выделяем красным, именно на них люди будут ориентироваться и пытаться запомнить.
   
   «Иногда», «Редко» и «Нет» — делаем серым, но с разной светлостью.

С частотой разобрались, добиваем визуал 💄

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

Таблица: Докапываемся до данных 🧬

Окей, визуально стало хорошо, теперь займёмся данными (дизайн не только про оформление, но и про смысл в первую очередь). Образовываемся, работаем с сайтом ВОЗ, ЦКЗ, Библиотекой Кокрейн и даже с Википедией.

1. Повышенная температура.
   Во-первых, длинновато: не влезает в одну строку, создаёт дыру и ухудшает читаемость. Иногда в похожих таблицах можно встретить сокращённый вариант «температура», он уже влезает в одну строку, но не является корректным.
   
   Во-вторых, повышенная температура — это сколько?
   
   Вникаем, убиваем двух зайцев: «Температура > 37.2°».
2. Усталость.
   В таблице роспотребнадзора усталость наступает «иногда», но ВОЗ и ЦКЗ пишут «часто» (44−70% случаев).
   
   Решаем больше доверять тем, кто специализируется на заболеваниях и меняем на «часто».
3. Кашель.
   Крайне интересный и важный симптом, с ним целая история!
   
   Во-первых, у коронавируса и гриппа Роспотребнадзора он строго сухой, ЦКЗ говорит, что бывает и мокрый. Окей, но как написать коротко и ясно? Пишем «Чаще сухой», при этом, оставляя выделение красным цветом. Получается одновременно и «Часто» и «Чаще сухой, чем мокрый».
   
   Во-вторых, выяснилось, что кашель при простуде — весьма нередкое явление. Бывает в 30% случаев, а это уже «Иногда».
4. Диарея.
   Не нашли подтверждения тому, что при гриппе у детей бывает диарея и тем более, в 10−40% случаев. Бывает при кишечном гриппе, но здесь же речь не о нём? Не хочется провоцировать вызовы скорой помощи на каждую неоформленную массу в горшке. Мамочки склонны паниковать, а мы не хотим провоцировать их непроверенными данными.
   
   Опять же, коронавирус у детей протекает сильно иначе, чем у взрослых, с высокой вероятностью без симптомов или почти. Скорее всего, таблица будет использоваться не для детей.

☝ Очень старались, читали, вникали, но всё же мы — не врачи. Если вы специалист, а мы где-то допустили ошибку или выявили не все неточности оригинала — пожалуйста, сообщите, исправимся!

Добавляем полезную информацию ➕

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

Помогаем понять, когда вызывать врача 🩺

Одной таблицы симптомов мало, всё ещё непонятно, нужно ли вызывать врача прямо сейчас? С одной стороны, паники много, как и вызовов «на всякий случай» (что плохо для всех). С другой — встречаются и запоздалые обращения. А ещё, информация в интернете противоречивая.

Почитали рекомендации ВОЗ, сформулировали лаконично и добавили памятку после таблицы.

Обращаться надо, когда есть повышенная температура и / или кашель в сочетании с одним или несколькими дополнительными симптомами.

Чтобы не перегружать текст, все «и / или» заменили на «/», группы разделили плюсиком (жирным, для большего акцента).

Ещё раз напоминаем, как защитить себя и других 🛡️

Иллюстрацию будут смотреть и здоровые люди, которым важно не заразиться. И пусть о мерах предосторожности вещают из каждого утюга, из нашего тоже будет. Добавляем про маски, антисептики, социальную дистанцию — вот это вот всё.

Потребляем, надзираем? 👁️‍🗨️

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

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

На чудесном сайте Роспотребнадзора, однако, номер значится как «ЕДИНЫЙ КОНСУЛЬТАЦИОННЫЙ ЦЕНТР РОСПОТРЕБНАДЗОРА». Что это значит? Видимо, это просто какой-то общий номер, вставленный вместе с логотипом. По-хорошему, надо его заменить на правильный номер, по которому можно получить тематическую консультацию.

Сотрудники Роспотребнадзора, если вы это читаете — помогите разобраться, пожалуйста!

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

Не перегружаем оформлением ⚫

Иллюстрация может использоваться как плакат в оффлайне (например, где-то в больницах) или на сайтах. Мы не знаем, какой будет у неё контекст, окружение.

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

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

Итоговый макет:

Лучше смотреть его в PDF, ибо он векторный.

Если вы хотите использовать иллюстрацию в оффлайне — используйте на здоровье, ограничений нет. Если в онлайне — поставьте, пожалуйста, ссылку на этот пост 🙏

Дизайн спасёт мир!

2020.05.19