Как легко подать сложную информацию в дизайне сайта

Как легко подать сложную информацию в дизайне сайта

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

 

 

 

Почему так важно визуализировать данные?

 

 

 

Изображения запоминаются нами чаще, чем текст. Результаты исследования Джона Медина, которые он привел в своей книге «Мозговые правила», показали: из услышанной или увиденной информации через 3 дня мы будем помнить лишь 10%. Но если она будет сопровождаться какой-то визуальной составляющей, то ее запоминаемость достигнет 65%. 

 

В чем еще преимущество использования дополнительных изобразительных средств?

 

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

 

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

 

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

 

 

 

 

Основные принципы визуализации

 

 

 

Чтобы визуализация была действительно эффективной, нужно руководствоваться несколькими базовыми правилами. И вот что считает важным Джон Швебиш, специалист по визуализации данных и презентациям:

 

 

 

1. Понятность исходной информации

 

 

 

Графики, схемы, инфографика, картинки – все это должно передавать информацию. Как правило, это цифры, имена, даты, сложные явления, процессы и т.д. Так вот, не стоит перегружать визуальные объекты сразу всеми данными, что у вас есть. Лучше взять какой-то минимум информации, зато она будет точной, проверенной, достоверной и доступной.

 

 

 

2. Избегайте визуального шума

 

 

 

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

 

 

 

3. Визуальный элемент и текст – едины

 

 

 

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

 

 

 

Виды визуального контента

 

 

 

Итак, приступим к самому главному: чем же можно разнообразить скучный и сложный текст, как подать его интересно и понятно?

 

 

 

1. Изображения

 

 

 

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

 

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

 

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

 

  • Бесплатные изображения

 

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

 

 

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

 

  • Платные изображения

 

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

 

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

 

  • Свои фотографии

 

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

 

 

2. Видео

 

 

Еще один популярный тип визуального контента – видео. Как говорится, лучше один раз увидеть, чем сто раз услышать или прочитать. Даже если в ролике дублируется информация, которая есть на вашем сайте в текстовом варианте, это очень хорошо! Так вы увеличиваете охват своей аудитории: кто-то прочитает, а кто-то посмотрит.

 

 

https://preview-kidsclub.ucraft.site/

 

 

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

 

 

3. Цитаты

 

 

Как ни странно, но элементарное цитирование тоже может здорово «оживить» скучный и сложный текст. А еще это добавит ему убедительности и правдоподобности. Если эту цитату оформить в виде картинки, она сможет сделать акцент в нужной части статьи.

 

 

 

 

Таким образом, вы убьете сразу двух зайцев: создадите качественный авторитетный текст и привлечете внимание важной фразой по теме, которую выбрали в качестве цитаты.

 

 

4. Инфографика 

 

 

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

 

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

 

Весьма необычный, но показательный пример – интерактивная статья, выполненная в стиле инфографики на сайте РИА Новости, посвященная проблеме алкоголизма в России. 

 

 

 

 

5. Кнопки призыва к действию

 

 

Еще один многофункциональный элемент, который не только провоцирует пользователей на определенное действие, но и позволяет сделать акцент в нужном моменте текста, разбавить его. А еще это сигнал: владелец сайта написал все это с такой целью… Он ждет от тебя этого… И все это призыв: «Подпишись», «Скачай книгу», «Оставь отзыв», «Зарегистрируйся на сайте», «Закажи». 

 

 

https://preview-fashionlab.ucraft.site/

 

 

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

 

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

 

 

6. Диаграммы

 

 

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

 

 

 

 

 

7. Карты

 

 

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

 

Кроме непосредственно карт, есть еще и картограммы. Что это такое? Карты показывают положение определенных точек на местности, а вот картограмма – интенсивность определенных показателей в рамках единой территории (обычно она показана контрастным цветом). Благодаря картограмме, можно передать практически любые данные: от плотности населения до частоты проведения концертов какой-нибудь звезды в каждом регионе страны.

 

По этому принципу, например, сделан сайт, отслеживающий распространение коронавируса в реальном времени.

 

 

 

 

8. Типографика

 

 

Благодаря типографике, можно не только красиво оформить текст, но и упростить восприятие сложного материала аудиторией. Типографика вполне может стать дополнительным визуальным элементом, акцентирующим внимание пользователя на главном. Так, например, оформлен сайт дизайнера и проектировщика зданий Tennen Brown:

 

 

 

 

Чтобы визуальный типографический контент выглядел эффектно, нужно соблюдать несколько простых правил:

 

  • Цвета. Текст должен гармонировать с фоном сайта и другими элементами дизайна, быть акцентом, привлекающим внимание. Обычно надписи контрастного оттенка.

 

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

 

  • Мысль. Если вы хотите сделать акцент на типографике, то она должна выражать важную мысль, цепляющую фразу или слово. Что-то цепкое, емкое, нестандартное, что сразу бросится в глаза.

 

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

 

 

 

Рекомендации по размещению визуального контента

 

 

 

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

 

  • Помните о свободном пространстве. Не нужно нагромождать элементы друг на друга. И без того сложная информация будет казаться еще объемнее, что отпугнет пользователя. Оставляйте немного «воздуха».

 

  • Больше текста – больше визуальных элементов. Чем сложнее и объемнее информация, тем, соответственно, должно быть больше различных объектов, которые облегчат восприятие и понимание.

 

  • Пользователи просматривают сайт отрывочно. Именно поэтому важно разделить страницу на смысловые блоки, равномерно распределив в них текст и другие элементы контента. Так вы сможете максимально захватить внимание аудитории.

 

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

 

 

 

 

02.04.2020

Поделиться:

Получайте полезные статьи сразу на ваш e-mail