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

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

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

Где можно остановиться на ночлег?

Почему мы так любим значки?

Потому что у них есть ряд преимуществ:

• Они бросаются в глаза;
• Они быстро передают информацию;
• Они запоминаются;
• Они экономят место;
• Они понятны на любом языке.

Иконки интерфейсов имеют еще ряд преимуществ:

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

Но главное, чем должна обладать любая иконка — это ЯСНОСТЬ.
Если пользователь не поймет значение иконки, он либо будет ее избегать, либо путаться.

С мороженым — нельзя, с сигаретой — нельзя, с единорогом — можно

Чтобы решить проблему с ясностью иконки, можно пойти несколькими путями:

1. Объяснять новую иконку текстом, давать подсказки, учить юзера использовать ее правильно

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

Пользователей пытались научить новому значку

Источник изображения

Сегодня иконку отправки личных сообщений поменяли на более ясную.

Можно сделать вывод, что этот путь не всегда приносит ожидаемый результат

Поэтому рассмотрим 2-ой вариант.

2. Бороться за ясность, создавать иконки максимально понятные пользователю
И именно о том, как это сделать и не ошибиться в выборе, пойдет речь далее.

Почему иконки интерфейсов не всегда понятны пользователям?
Давайте разбираться в причинах.

10 ошибок в дизайне иконок интерфейсов

1. Неточность дизайна образа иконки

Для начала проведем небольшой тест.

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

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

Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!»  🙂 

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

2. Неясность ассоциации

В отличие от первой причины, в этом случае обычно сам образ передан правильно, но пользователю не ясно, почему использована именно эта иконка и что она означает.
Посмотрите еще раз на пример со старой иконкой для отправки личных сообщений в Instagram. Образ вполне уловим — изображен ящик. Но с чем у вас ассоциируется ящик? Сохранить? Входящие? Добавить новый файл? Ассоциация слишком тонкая, пользователю нужно думать, значит образ подобран неудачно.

Вот еще один наглядный пример того, как меня запутал интерфейс.

Это крест, без сомнения

Как потом выяснилось, при наведении курсора на иконку всплывает подсказка.

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

Гораздо яснее для пользователя в этом случае был бы образ мусорного бака.
Кроме того, здесь интерфейс позволяет разместить слова “Удалить аккаунт”, и в этом случае использование текста вместо иконки выглядело бы оправдано.
Вот еще один пример, когда возникает диссонанс значения иконки и ее образа:

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

Источник изображения

3. Похожие иконки в интерфейсе

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

Несогласованность дизайна иконок в интерфейсе

Источник изображения 

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

До сих пор путаюсь, какая из этих стрелок возвращает назад к другим письмам Gmail, а какая приводит к написанию ответа на письмо

Вот еще один пример:

Значок проверки орфографии можно спутать со значком перезагрузки

Источник изображения

4. Не учтен предыдущий пользовательский опыт

Вы помните, как в Viber при отправке сообщения рядом висела иконка с изображением стрелки?

Что это за стрелка?

Многие новые пользователи путались, считая, что стрела имеет значение “Отправить сообщение”. Почему? Потому что многие новые пользователи пришли в Viber из Skype и других мессенджеров, где стрелка означала именно отправку сообщения и располагалась в том же месте.

Иконка для отправки сообщения в Skype

Стрела в интерфейсе Viber означала отправку данных геолокации. Не удивительно, почему все мои друзья в то время были в курсе, где я;)
Сейчас интерфейс Viber выглядит иначе:

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

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

5. Не учтены ментальные особенности ЦА

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

Например, эта иконка может быть понята совершенно по-разному в США и Италии

Вот так по-разному трактуют жесты в разных странах

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

Хотя, признаться, их не так уж и много. Сейчас среди них можно назвать изображение принтера (печать), дома (возврат на главную страницу), лупы (поиск) и практически все. Иконка, обозначающая меню-гамбургер, вскоре тоже может стать универсальной. Однако, некоторые тесты показывают, что пользователям привычнее видеть кнопку с надписью “Menu”, чем 3 горизонтальные полоски.

Если ваше приложение ориентировано на целевую аудиторию конкретной страны, учитывайте ее особенности восприятия.
Так, например, для жителей США более привычной будет иконка с тележкой супермаркета (shopping cart) для обозначения покупки (Источник).

Изображение тележки супермаркета на американском сайте

Для жителей Великобритании в пользовательском интерфейсе привычнее видеть корзину (basket) или сумку (bag).

Так выглядит иконка для совершения покупок на британском сайте Next

6. Неправильный посыл

Дизайн иконок может повлиять на поведение пользователя.
Так при выборе иконки для действия “Добавить товар в корзину” следует ориентироваться не только на ментальное восприятие, но и на подтекст, который они несут.
Тележка супермаркета подразумевает, что пользователь может в любое время, как положить товар в корзину, так и передумать, и выложить его. Т.е. в этом случае вы не давите на будущего покупателя и мягко склоняете к покупке.
Пакет или сумка гораздо больше влияет на сознание пользователя, призывая его именно к покупке, а не складыванию товара в корзину. Мы привыкли складывать вещи в свою сумку уже после оплаты их на кассе, т.е. эта иконка более настойчиво призывает именно к покупке.

Разница между восприятием иконок для обозначения покупки товара

Источник изображения

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

7. Устаревшие образы

Здесь нужно быть предельно аккуратным. Иконки стареют, как и люди.

Это вполне всем знакомый значок “Сохранить”

Поймет ли новое поколение эту иконку, если оно никогда не держало дискету в руках?

Уже давно ведутся споры о необходимости замены устаревших иконок на новые

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

Эволюция иконок телефонного звонка

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

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

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

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

8. Перегруженный дизайн

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

Лишние элементы перегружают образ и он становится неясным

Сейчас эта проблема менее актуальна, чем она была до появления трендов плоского и чистого дизайна. Плоские иконки гораздо легче воспринимаются, чем сложные 3D объекты. и это одна из причин, почему они так популярны. Однако в руках умелого дизайнера и объемную иконку можно сделать узнаваемой в любом размере.

9. Использование текста или его отсутствие

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

10. Скалирование иконок

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

При скалировании ясность иконки теряется и пользователь не может отличить похожие образы

Поэтому всегда просите дизайнера прорисовывать элементы вручную при создании новых размеров.

Выводы

Почему мы выделили именно эти 10 ошибок, а остальные, не менее важные оставили без внимания? Потому что эти ошибки влияют на ЯСНОСТЬ иконки, вызывают недоумение, запутывают пользователей и могут повлиять на конверсию.
Как видите из примеров, одна лишь неверно подобранная иконка может заставить пользователя удалить аккаунт, отказаться от покупки или от использования неудобного приложения.
Так что, выбирайте правильные иконки и лучше доверьте это профессионалам.

Читайте также:

100 лучших IOS иконок со всего мира, в которые легко влюбиться с первого взгляда 10 ошибок дизайна лендинга или как отвлечь пользователя от главной цели Где взять примеры качественных иконок: 9 сайтов с примерами о которых вы должны знать Как протестировать иконку приложения перед релизом: 3 совета от профессиональных дизайнеров иконок