Как и почему иконки могут улучшить веб-сайт?

Иконки поддерживают содержание

Обычно нам не составляет труда отличить хороший сайт от плохого.

Однако нам трудно сказать, почему одно лучше, а другое хуже. Часто бывает так, что дьявол кроется в деталях.

Когда мы рассматриваем содержание веб-сайта, все сводится к его читабельности.

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

Как вы можете легко добиться читабельности и улучшить свой сайт?

С помощью правильных иконок, которые могут помочь нам несколькими способами:

1. Они соберут весь контент в одну легкую для восприятия таблетку.
2. Они привлекут внимание пользователей.
3. Они повысят общую читабельность вашего контента.

Давайте теперь подробнее остановимся на каждом пункте.

1. Иконки собирают весь текст в единую мысль

С помощью пиктограмм можно быстро подытожить, о чем весь текст.

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

Помните, что к иконам нужно подходить так же, как к метафорам.

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

Например:

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

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

Хорошим примером является описание возможностей платформы Brand24:

2. Иконки привлекают внимание пользователей

Как я уже говорил ранее, одна фотография может стоить "тысячи слов". То же самое относится и к иконкам.

В наше время сайты без иконок и графики могут показаться нам очень скучными и некрасивыми.

Представьте себе простую газету, в которой есть только текст - никаких картинок или баннеров. Скучно.

Помимо броских заголовков, наше внимание привлекают красочные картинки, графики или иконки.

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

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

Недостаточно выбрать несколько бесплатных иконок и просто разместить их на своем сайте.

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

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

Иногда интернет-магазины используют одинаковые или похожие значки в разных местах.

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

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

Здесь мы уже входим в мир UX / UI, и я не могу не упомянуть принцип близости.

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

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

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

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

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

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

3. Значки повышают общую читабельность вашего контента

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

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

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

Существует очень мало икон, которые могут существовать сами по себе

Неопытным пользователям Интернета бывает очень трудно понять и различить разные значки.

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

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

Для меня, как веб-разработчика, все значки очевидны, но если у вас интернет-магазин, то, как вы сами увидите, многие ваши клиенты не поймут, почему тег Google map имеет такую форму, плюс он размещается там, где находится ваш физический адрес.

Простым решением этой проблемы может быть сочетание иконки и текста.

Таким образом, пользователи могут прочитать текст и запомнить, что означает значок.

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

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

Как и почему иконки могут улучшить веб-сайт - резюме

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

Иконки могут быть отличным способом выделить и сделать видимой основную часть текста.

Кроме того, они являются отличным "захватчиком внимания" в эпоху так называемого сканирования контента.

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