5 советов по созданию иконок

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

1) Всегда создавайте подписи к иконкам

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

Всплывающее окно поясняет функцию кнопки

2) Отображайте на  иконке и объект и действие

Чтобы сделать иконку максимально интуитивной и понятной, следует всегда отображать на ней и объект и действие, которое с ним совершится при нажатии кнопки.  Удачный пример – кнопка отправки письма, на которой изображён летящий бумажный самолетик. Бумага, из которой сделан самолет, символизирует письмо, а его полет – отправку.

3) Всегда группируйте похожие иконки вместе

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

4) Сохраняйте порядок и месторасположение кнопок

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

Дизайн иконок изменился, но расположение осталось прежним

5) Не перегружайте рисунок излишними деталями

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

Надеемся, эти простые советы помогут вам в создании удобного интерфейса на вашем сайте.

[via]
Похожие материалы:

Навигация на сайте: горизонтальная или левосторонняя
5 ошибок в usability при проектировании карусели