3 способа протестировать иконку приложения перед релизом: советы профессиональных дизайнеров иконок

Зачем тестировать иконку перед релизом? А вы представьте, что будет, если разработчик зальет на продакшн код, который перед этим не протестирует QA. Тестирование иконки — это как техосмотр карта перед гонкой. Лучше потратить несколько минут на проверку до старта, чем потом тратить уйму времени и денег на исправление ошибок. Читайте в этой статье о том, как наиболее эффективно протестировать иконку приложения до релиза и какие инструменты вам помогут провести простые тесты за 2-3 секунды.

Чтобы создать эффективную иконку приложения, которая будет не просто качественно смотреться среди конкурентов, а и увеличивать конверсию, ее нужно подвергнуть 2ум этапам тестирования:

• техническое тестирование;
• тестирование на аудитории.

Техническое тестирование иконки можно разделить на этапы:

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

1 способ: тестирование “вручную”

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

Вот его суть:Присваиваем готовую иконку какой-нибудь пустой программе или папке, и проходим все этапы технического тестирования.Например, на компьютере это можно сделать, если кликнуть на пустую папку, и поменять иконку в разделе “Свойства”. Далее нужно проверить, как отображается эта папка во всех возможных размерах и местонахождениях.

• Помещаем ее на рабочий стол и меняем фон: белый, черный, цветной и др.
• Проверьте, как выглядит папка с иконкой, если ее переместить в другую папку.
• Проверьте, как смотрится иконка на панели задач. Для этого наши дизайнеры используют простую программу, которую мы написали сами. Но можно поступить и по-другому: сделайте скриншот панели задач, поместите туда иконку и оцените результат, снова развернув ее на экране.
• Для Mac стоит проверить иконку еще и на панели для запуска приложений Dock. Это панель с распространенными программами внизу экрана. Для этого можно сделать скриншот и вставить иконку в фотошопе, а можно воспользоваться специальным приложением (о котором речь пойдет далее).

Вот, как это все выглядит на примере:

Тестирование иконки на Маке: в Dock внизу экрана, при увеличении во время наведения мышкой, в папке и в описании

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

Три варианта иконок, представленные заказчику среди конкурентов в Google play.

Для тестирования иконки на Android или iOS “вручную” поступаем аналогично. Присваиваем иконку пустому тестовому приложению. Либо делаем скриншот экрана телефона, добавляем иконку в фотошопе и снова открываем скриншот на весь экран мобильного.

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

2 способ: тестирование с помощью профессиональных программ

• Skala

Эта программа удобна прежде всего дизайнерам. Она подключается к Photoshop и “транслирует” дизайн-макет на телефон. Соответственно, можно вносить правки и сразу смотреть на “живом телефоне”, на что повлияли изменения.Это удобно, т.к., если возникнет какая-то дисгармония с общим фоном, дизайнер увидит это сразу.

Работа над иконкой и синхронизация с помощью Skala

• Ikonica

Это бесплатное приложение для iPhone, iPad и Mac, помощью которого можно проверить, как будет смотреться iOS иконка в различных размерах и на разном фоне. Но протестировать иконку среди конкурентов или в Доке возможности нет.

Кратко о принципе работы приложения

Результатами тестирования можно поделиться, используя почту, Facebook или Twitter.

• Icon Tester

Это приложение покажет, как выглядит iOS иконка в Доке. Вот такой вот минималистичный, но нужный для тестирования функционал.

• Icon Strike

Это специальная функция от Flinto (инструмента для дизайнеров, который помогает в создании прототипов). С ее помощью вы сможете увидеть, как новая iOS иконка будет смотреться на экране смартфона.

Загружаешь иконку, вводишь email и получаешь на почту ссылку на графический файл с имитацией главного экрана с вашей иконкой на нем.

Вот так мы протестировали одну из наших иконок с помощью Icon Strike.

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

3 способ: тестирование с помощью онлайн-сервисов

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

Мы собрали список из нескольких бесплатных сервисов, которые помогут вам осуществить такой тест.

• Icontester — бесплатная и простая онлайн-программа, которая поможет вам увидеть, как ваша иконка под iOS или Android будет смотреться в App Store, Google Play и на различных гаджетах. Все, что нужно сделать, это загрузить ее и нажать на кнопку “View Icon”. Программа генерирует preview загруженной иконки в 10ти всевозможных ситуациях, где она может быть использована: сторы, экраны гаджетов, фоны.

Созданная в нашей студии иконка загружена в Icontester для проверки.

А вот 2 из 10 вариантов, которые будут показаны вам в результате.

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

• AppSparky — аналогичная бесплатная онлайн-программа, которая поможет протестировать иконку на различных гаджетах. Вам будет показано чуть больше вариантов, чем в предыдущем тестировании (13, а не 10), но проверить этим сервисом можно только iOS иконку. Линком на результаты также легко поделиться и получить фидбэк от коллег.

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

Тестирования iOS иконки, созданной в нашей студии.

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

• Appicontest — еще одна бесплатная программа для тестирования iOS иконок. Но тут уже нужно загружать иконки только в строго указанных размерах, перетащив их на поле. Далее вводите название своего приложения и нажимаете “Generate”.

Все максимально просто и детально расписано.

Далее вы открываете ссылки и смотрите, как смотрится иконка.

Результаты такого тестирования будут храниться не более 7 дней.

А это вы увидите в результате.

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

Какой вариант тестирования наиболее эффективный

Все варианты имеют свои преимущества и недостатки, но есть среди них бесспорный лидер — техническое тестирование “вручную”. Оно занимает больше времени, чем другие способы, но только с его помощью можно проверить иконку в полном объеме. И вот почему:

• Ни один из онлайн-сервисов и программ пока не может протестировать, как смотрится иконка приложения среди своих реальных конкурентов. Поэтому это тестирование необходимо сделать вручную, путем поиска конкурентов по ключевым словам и сознания скриншота с иконкой в Photoshop.
• Не существует универсальной программы, которая бы проверила иконку во всех ее размерах и вариантах использования.
• Для Android иконки сервисов мало, основная масса существующих инструментов облегчают тестирование иконки только для iOS.
• Большинство онлайн-сервисов и программ не требуют точных размеров иконки, поэтому их результаты не смогут помочь отловить такие проблемы как “замыленность” или “поехавший пиксель”, а дают лишь примерное представление о том, как будет смотреться дизайн в окружении стора.

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