Правила создания успешной иконки для мобильного приложения

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

Основные цели при дизайне иконки приложения:

• выделиться среди конкурентов;
• запомниться как бренд;
• раскрыть суть предложения;
• привлечь внимание пользователя (чтобы он захотел больше узнать о приложении и продукте);
• повысить количество скачиваний. 

Успех иконки зависит от: 

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

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

В первую очередь, стоит обратить внимание на целевую аудиторию и её интересы. Ответить на вопросы: «Что цепляет и интересует моих пользователей? Что им нужно, чтобы решить их повседневную задачу или проблему?»

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

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

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

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

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

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

Важный пункт — изучить требование руководств маркетов Google Material Design и Human Interface Guidelines. У руководств строгие требования к иконкам. Тот же Google Play автоматически скругляет края иконки на 20% от размера иконки. Нужно обращать внимание и учитывать скругление, чтобы ключевые моменты изображения не обрезались и не выглядели странно. 

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

При выборе символа не стоит использовать сложные ассоциативные ряды. Символ должен быть узнаваем и однозначен.

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

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

Бейджи о скидках, например ярлыки «FREE» или  «-20%» на некоторых приложениях, скорее всего будут незаметны, и при масштабировании будут выглядеть плохо или переставать считываться. 

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

Примеры неудачных инонок:

На какие иконки люди охотнее кликают при поиске приложения в сторе

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

Какие показатели бизнеса можно увеличить за счет только иконки приложения

1. Успешная иконка увеличивает количество загрузок и повышает узнаваемость бренда
2. Она способна обратить внимание потенциальных пользователей, которые увидели и еще не решили нужно ли им приложение.
3. Лучше запоминается, поэтому пользователь скорее вспомнит вас и порекомендует друзьям.

Как строится работа с заказчиком при создании иконки мобильного приложения

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

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

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

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

Тестирование иконки мобильного приложения

Тестирование иконки проходит в два этапа.

Первичное — работа самого дизайнера. Что он должен учесть: 

• посмотреть, как готовая иконка смотрится на экранах разных размеров;
• протестировать большой и маленький вариант и посмотреть, как она смотрится в разных масштабах;
• посмотреть, как она смотрится на черном, белом и цветном фонах.

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

Второй этап — A/B тестирование, при помощи которого оценивается реакция аудитории на различные версии иконки. 

Тренды и цветовые решения

При создании дизайна иконки важно оставаться в тренде; смотреть, что популярно. Я вдохновляюсь работами петербургского диджитал-агентства Cuberto и калифорнийского UI/UX дизайн-агентства Ramotion. Последние новости о трендах всегда можно найти на Behance. 

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

Важно уделять внимание цвету, так как он влияет на решение пользователя и на его настроение. Можно использовать современные исследования о цвете.

С окончательным цветовым решением лучше определиться после A/B тестирования и тестирование иконки на различных фонах экранов. 

В последнее время стало модно добавлять на иконки ситуативные праздничные элементы. Например, крупные продуктовые компании, «Перекрёсток» и «Лента», в преддверии Нового Года украшают свои иконки соответствующей символикой. Так приложение становится ближе к пользователю. Но тут главное не переусердствовать и не менять иконку под каждый незначительный праздник.