Круглые иконки, вкладки, схемы и ещё 89 приёмов для оформления контента на сайте
1. Как сделать тексты простыми для восприятия?
Структурируйте контент. Читать сплошной текст — тяжело и долго. А пробежать глазами по заголовкам, посмотреть картинки — это легко и приятно. Поэтому любой кусок монолитного текста разбивайте на информационные блоки. Напишите о преимуществах продукта, его характеристиках, приведите факты о компании и её достижениях. Визуально отделите все инфоблоки друг от друга при помощи фона, ярких иллюстраций и свободного пространства вокруг элементов.
Текст о компании на сайте «ТрансКапиталБанка» поделён на несколько информационных блоков.
На странице о компании на сайте «БКС Брокер» выделено четыре больших инфоблока: преимущества, история, финансовые показатели, руководители.
Информационные блоки на странице услуг «Тинькофф Банка» визуально разделены при помощи свободного пространства и горизонтальных линий.
Текст на странице о возможностях «Битрикс 24» поделён на небольшие блоки, в каждом из которых есть картинка. Инфоблоки разделены горизонтальными линиями.
Страница о компании на сайте «Инвестторгбанка» поделена на три крупных инфоблока: текст о банке, его миссии и ссылки на другие страницы.
Страница о кукурузе на сайте «Авангард-Агро» визуально поделена на блоки о характеристиках, сортах, географии выращивания и другие.
Превращайте тексты в списки. Самый быстрый способ облегчить тексты для восприятия — написать их в виде списков. Такой формат избавляет от необходимости сочинять лишние смысловые связки и переходы в тексте. В каждом пункте списка останется только самая важная информация.
Все тексты на странице кредитной программы на сайте «ТКБ Банка» представлены в виде списков.
Нумерованный список на сайте «БКС Брокер» показывает последовательность действий персонального брокера.
Каждый пункт в списке преимуществ на сайте «Тинькофф Банка» подсвечивается при наведении мыши.
Длинная таблица станет удобнее, если в ней закрепить верхнюю строку при прокрутке страницы. Так будет понятно, что означают данные в каждом столбце.
Каталог финансовых продуктов компании «БКС Брокер» оформлен в виде таблицы. Продукты удобно сортировать и сравнивать между собой.
Подробная информация о каждом продукте разворачивается по нажатию на его название. Строку с названиями столбцов всегда видно при прокрутке таблицы.
Информация об управляющих компаниях выложена в форме таблицы на городском портале Якутска. Показаны только первые пять строк из пятидесяти трёх. Остальные строки можно развернуть, если нажать на кнопку «Показать больше».
Данные о сборе сельхозкультур на сайте «Авангард-Агро» занесены в таблицу. Если передвигать бегунок вверху таблицы, то буду отображаться данные за выбранный год. Таким образом, таблица остаётся компактной и занимает на странице немного места.
Строки в таблице о продукции «Авангард-Агро» подсвечиваются при наведении. Ссылка на подробную информацию о каждом растении появляется при нажатии на строку.
Столбцы в таблице с тарифами на сайте «Битрикс 24» подсвечиваются при наведении.
Даже если кажется, что все действия очевидны и совсем не сложно оформить заказ в интернет-магазине или записаться на тест-драйв в автосалоне, всё равно напишите инструкцию. Для новых пользователей она незаменима, а старым клиентам поможет лишний раз убедиться, что они всё делают правильно.
На сайте «Тинькофф Страхование» выложена инструкция для клиентов, у которых произошёл страховой случай.
Инструкция по горячим клавишам, которые доступны при звонке в «ТКБ Банк», экономит время клиентов. Теперь можно не вслушиваться в голос автоответчика, а сразу нажать нужную кнопку на телефоне.
На сайте «БКС Брокер» есть краткая инструкция по обмену валюты.
Инструкция по инвестированию на сайте «БКС Брокер» состоит из шести пунктов. Название каждого пункта подписано внизу инструкции, а подробное содержание можно листать при помощи стрелок.
На сайте «БКС Брокер» выложена подробная пошаговая инструкция для новичков в интернет-трейдинге.
Инструкция для предпринимателей от «Тинькофф Банка» объясняет, как открыть расчётный счёт за четыре шага.
На сайте «Тинькофф Страхование» есть краткая инструкция по покупке страховки.
Рисуйте схемы. Графические схемы помогают лучше понять сложные товары и услуги. При помощи изображений и условных обозначений покажите, из каких частей состоит продукт и как эти части взаимосвязаны между собой.
Факторинг в «ТрансКапиталБанке» представлен в виде схемы. Действия банка, покупателя и поставщика обозначены цифрами и расшифрованы под схемой.
Схема работы бонусной системы в «Тинькофф Банке» показывает как накопить и использовать баллы.
Действие беспроцентного периода по кредитной карте «Тинькофф Банка» продемонстрировано на интерактивной схеме.
Оформляйте цифры. Благодаря цифрам сайт компании становится честнее. Блок с числами уместен на любой странице. Покажите количество клиентов, сотрудников, выполненных проектов, проданных единиц товара, оборот или выручку за последний год. И люди сами сделают выводы о том, насколько они могут доверять данной компании.
Цифры на главной странице сайта «БКС Брокер» говорят об обороте компании, количестве клиентов и сотрудников.
На странице о компании на сайте «БКС Брокер» приведены финансовые показатели.
«Битрикс24» показывает количество клиентов и задач, которые они решили с помощью продуктов компании.
Цифры на главной странице «One click Yakutsk» подтверждают, что портал работает и решает проблемы жителей Якутска.
На странице о портале «One click Yakutsk» приведена краткая статистика обращений.
«Авангард-Агро» показывает статистику о ситуации на полях.
На сайте «Авангард-Агро» вместо традиционных текстов о компании выложен большой блок с цифрами.
2. Как привлечь внимание к контенту на сайте?
Попробуйте кратко сформулировать главные характеристики продукта. Какие задачи он решает, в чём его достоинства? Какие преимущества получит клиент от сотрудничества с компанией? Напишите основной вывод, который должен сделать пользователь после изучения контента на сайте. Для оформления заголовков и важных мыслей используйте качественные фотографии, цветные рамки, крупный шрифт.
Страница о страховании путешествий в «Тинькофф Страхование» начинается с расслабляющего заголовка и знакомой туристам фотографии из кафе аэропорта.
Укусы животных, травмы и госпитализация — это неотъемлемая часть услуг по страхованию жизни и здоровья. Но у «Тинькофф Страхования» раздел начинается не со страшилок, а с эмоционального заголовка, который позволяет взглянуть на страхование здоровья под другим углом.
Раздел о мониторинге проблем на городском портале Якутска начинается с описания того, чем полезен сервис для жителей города.
Главные мысли в новостях на сайте «МДМ Банка» размещены в рамке и выделены жирным шрифтом.
Баннер в начале страницы о «Тинькофф Банке» привлекает внимание к мысли о том, что это надёжный современный банк с большим количеством клиентов.
«Бонусные мили на карте» — слова знакомые, но не очень ясно, какая от них польза. А фраза «летать в отпуск бесплатно каждый год» звучит более конкретно и заставляет прокрутить страницу о кредитной карте «Тинькофф Банка» дальше.
Раздел об интернет-трейдинге в «БКС Брокер» начинается с описания сущности услуги в формате призыва к действию.
Баннер на странице о торговых стратегиях в «БКС Брокер» привлекает внимание к основной выгоде клиентов — возможности заработать деньги без стресса и переплат.
Практически в любой контент на сайте можно добавить иконки — схематичные изображения маленького размера. AIC считает, что качественные иконки обеспечивают правильный визуальный контакт с пользователем. Нарисуйте собственные иконки, например, для товаров в каталоге, названий разделов в меню и контактов подразделений компании.
Информация о каждом акционере сопровождается диаграммой, которая показывает его долю в капитале «ТКБ Банка».
В разделе о кредитовании в «ТрансКапиталБанке» используются анимированные иллюстрации для оформления преимуществ.
Преимущества компании «БКС Брокер» проиллюстрированы иконками.
Инструменты интернет-трейдинга в «БКС Брокер» обозначены иконками.
О безопасности в «Тинькофф Банке» рассказано при помощи небольшого текста и пиктограмм.
К каждому из четырёх преимуществ компании «Тинькофф Страхование» подобраны пиктограммы.
Процесс выращивания сельскохозяйственных культур на сайте «Авангард-Агро» показан при помощи фотографий. Изображения сменяют друг друга по нажатию на название фазы роста растения.
Интерактивная картинка показывает долю полей «Авангард-Агро», которые заняты разными сельхозкультурами.
Интерактивная иллюстрация на сайте «Тинькофф Банка» показывает, как выглядит процесс накопления денег на отдельных счетах в интернет-банке.
Интерактивная иллюстрация показывает долю каждого направления деятельности в структуре холдинга «Ротек».
Интерактивная иллюстрация во всплывающем окошке показывает, какие виды объектов можно защитить в компании «Тинькофф Страхование».
Возможности городского портала Якутска показаны при помощи иконок.
Каждый инструмент для работы в «Битрикс24» обозначен своей пиктограммой.
Преимущества «Тинькофф Банка» обозначены иконками. Выгодные условия сотрудничества продемонстрированы при помощи анимированных картинок.
Иллюстрации на сайте «Инвестторгбанка» созданы на основе первой буквы в названии раздела и фотографий людей. Преимущества кредита поделены на короткие пункты и обозначены пиктограммами.
Преимущества компании «КИТ Финанс Брокер» обозначены иконками.
При помощи промоблоков можно делать ссылки на похожие товары, статьи по теме, а также рекламировать мероприятия. Например, в статье о правилах скалолазания будет уместен промоблок со ссылкой на каталог альпинистского снаряжения в интернет-магазине. А тем, кто выбирает квартиру на сайте застройщика, дайте ссылку на страницу о рассрочке.
В конце страницы об ипотечном кредитовании в «ТрансКапиталБанке» есть промо-блок со ссылками на другие услуги.
Промоблок с фотографией и крупным текстом на странице об услугах «БКС Брокер» привлекает внимание к бесплатному вебинару.
Промо-блок в конце страницы о «Тинькофф Банке» ведёт в разделы о картах и вкладах.
Яркий баннер приглашает узнать подробную информацию о страховании путешествий в «Тинькофф Страхование».
Рисунок с холодильником на сером фоне привлекает внимание к подбору рецепта на сайте «Foodkultur».
Яркие картинки во всплывающих окошках привлекают внимание к разделам сайта «Авангард-Агро».
Промоблок в разделе для бизнеса на сайте «Тинькофф Банка» приглашает скачать мобильное приложение.
Блок с виджетами на главной странице сайта «КИТ Финанс Брокер» привлекает внимание к разделам с информацией о состоянии фондового рынка.
3. Как сэкономить время пользователя на изучении контента?
Облегчайте выбор продуктов. Подбор продукта позволяет быстро найти нужную вещь на сайте. Этот инструмент заменяет необходимость читать и сравнивать описания десятков товаров.
Вместо текстов о разных видах кредитов для малого бизнеса на сайте «ТКБ Банка» размещён подбор кредитной программы в зависимости от потребностей клиента.
На сайте «БКС Брокер» есть подбор персонального решения по инвестированию.
Пользователи перетаскивают продукты в кастрюлю и подбирают рецепты блюд на сайте «Foodkultur».
Разбивайте информацию на вкладки. Объёмная страница на сайте станет короче, если разделить информацию на несколько вкладок. Это такие подразделы в рамках одной страницы, которые изначально скрыты. Пользователь сам включает нужный ему раздел. При этом не происходит перезагрузка сайта. Вкладки позволяют выводить на экран меньше текста, поэтому экономят время на вертикальной прокрутке страницы.
Разные версии логотипа «Тинькофф Банка» спрятаны во вкладках.
Информация о руководстве и акционерах «ТКБ Банка» находится в переключающихся вкладках.
На странице о кредитах в «ТКБ Банке» переключаются две вкладки: требования к заёмщику и список документов.
На главной странице сайта «Инвестторгбанка» переключаются блоки с финансовыми решениями и каталогом услуг. При этом не происходит перезагрузка страницы.
На сайте «БКС Брокера» переключаются вкладки с тарифами.
Ответы на вопросы на сайте «БКС Брокера» расположены во вкладках.
Информация об акциях, фьючерсах и валюте на сайте «БКС Брокера» находится во вкладках.
Видеоролики «БКС Брокера» располагаются во вкладках.
Преимущества карты «Тинькофф Банка» и калькулятор начисления миль находятся в двух вкладках.
Информация о трейдинге на сайте «КИТ Финанс Брокер» находится во вкладках, которые переключаются без перезагрузки страницы. Длинные тексты на странице спрятаны. Подробную информацию можно развернуть, если нажать на ссылку «Узнать больше».
Краткое и подробное меню на сайте «КИТ Финанс Брокер» располагается в двух вкладках.
Повторяющиеся или похожие друг на друга тексты удобно прятать в отдельных блоках. А посетители сайта сами раскроют необходимый им контент.
Краткое описание услуг «БКС Брокер» разворачивается по клику на название услуги.
Краткое описание офисных кресел в интернет-магазине «Herman Miller Shop» разворачивается по клику на товар.
По клику на название продукции «Авангард-Агро» появляется подробное описание в раскрывающемся блоке.
Содержание вакансий «Авангард-Агро» появляется в раскрывающемся блоке.
Полный список продуктов компании «БКС Брокер» изначально скрыт на странице. Названия продуктов можно развернуть, нажав на иконку с плюсом.
Ответы на популярные вопросы на сайте «Тинькофф Страхование» выводятся в раскрывающихся блоках.
Раздел «Вопрос-ответ» на сайте «КИТ Финанс Брокер» состоит из раскрывающихся блоков.
Длинные тексты о социальной ответственности «ТКБ Банка» спрятаны внутри разворачивающихся блоков.
Информационные блоки об общих условиях кредита в «ТКБ Банке» и о материнском капитале можно сворачивать и разворачивать.
Список документов по финансовой отчётности «Тинькофф Банка» за каждый предшествующий год раскрывается в отдельном блоке.
Описание операций по кредитной карте «Тинькофф Банка» разбито на три раскрывающихся блока.
Полный текст статьи читайте на CMS Magazine
