Зачем тестировать иконку перед релизом? А вы представьте, что будет, если разработчик зальет на продакшн код, который перед этим не протестирует QA. Тестирование иконки — это как техосмотр перед гонкой. Лучше потратить несколько минут на проверку до старта, чем потом тратить уйму времени и денег на исправление ошибок. IconDesignLAB.com рассказывает о том, как наиболее эффективно протестировать иконку приложения до релиза и какие инструменты вам помогут провести простые тесты за 2-3 секунды.
Чтобы создать эффективную иконку приложения, которая будет не просто качественно смотреться среди конкурентов, а и увеличивать конверсию, ее нужно подвергнуть двум этапам тестирования:
- техническое тестирование;
- тестирование на аудитории.
Техническое тестирование иконки можно разделить на этапы:
- тестирование на различных девайсах (смотрим, как иконка выглядит на экранах разных размеров);
- тестирование в разных размерах (смотрим, как выглядит иконка от самого маленького до самого большого своего размера);
- тестирование на разных вариантах фона (тестируем иконку на белом, черном, сером и других фонах и обоях);
- тестирование среди конкурентов (проверяем, как смотрится иконка среди других приложений в сторах).
Тестирование “вручную”
Это самый трудоемкий и времязатратный способ, но им все равно пользуются некоторые наши дизайнеры. В конце статьи вы узнаете, почему.
Вот его суть: присваиваем готовую иконку какой-нибудь пустой программе или папке, и проходим все этапы технического тестирования.
Например, на компьютере это можно сделать, если кликнуть на пустую папку, и поменять иконку в разделе “Свойства”. Далее нужно проверить, как отображается эта папка во всех возможных размерах и местонахождениях.
- Помещаем ее на рабочий стол и меняем фон: белый, черный, цветной и др.
- Проверьте, как выглядит папка с иконкой, если ее переместить в другую папку.
- Проверьте, как смотрится иконка на панели задач. Для этого наши дизайнеры используют простую программу, которую мы написали сами. Но можно поступить и по-другому: сделайте скриншот панели задач, поместите туда иконку и оцените результат, снова развернув ее на экране.
- Для Mac стоит проверить иконку еще и на панели для запуска приложений Dock. Это панель с распространенными программами внизу экрана. Для этого можно сделать скриншот и вставить иконку в фотошопе, а можно воспользоваться специальным приложением (о котором речь пойдет далее).
Вот, как это все выглядит на примере:
Тестирование иконки на Маке: в Dock внизу экрана, при увеличении во время наведения мышкой, в папке и в описании
- Не забудьте протестировать, как смотрится иконка приложения среди конкурентов. Для этого найдите по ключевому слову приложения-аналоги, сделайте скриншот и воспользуйтесь графическим редактором, чтобы разместить тестируемые иконки на одной странице с главными конкурентами.
Три варианта иконок, представленные заказчику среди конкурентов в Google play.
Для тестирования иконки на Android или iOS “вручную” поступаем аналогично. Присваиваем иконку пустому тестовому приложению. Либо делаем скриншот экрана телефона, добавляем иконку в редакторе и снова открываем скриншот на весь экран мобильного.
Этот способ тестирования кажется очень долгим и трудоемким, но, как показала практика, одним из наиболее эффективных.
Тестирование с помощью профессиональных программ
Skala
Эта программа удобна прежде всего дизайнерам. Она подключается к Photoshop и “транслирует” дизайн-макет на телефон. Соответственно, можно вносить правки и сразу смотреть на “живом телефоне”, на что повлияли изменения. Это удобно, т.к., если возникнет какая-то дисгармония с общим фоном, дизайнер увидит это сразу.
Работа над иконкой и синхронизация с помощью Skala
Ikonica
Это бесплатное приложение для iPhone, iPad и Mac, помощью которого можно проверить, как будет смотреться iOS иконка в различных размерах и на разном фоне. Но протестировать иконку среди конкурентов или в Доке возможности нет.
Кратко о принципе работы приложения
Результатами тестирования можно поделиться, используя почту, Facebook или Twitter.
Icon Tester
Это приложение покажет, как выглядит iOS иконка в Доке. Вот такой вот минималистичный, но нужный для тестирования функционал.
Icon Strike
Это специальная функция от Flinto (инструмента для дизайнеров, который помогает в создании прототипов). С ее помощью вы сможете увидеть, как новая iOS иконка будет смотреться на экране смартфона.
Загружаете иконку, вводите email и получаете на почту ссылку на графический файл с имитацией главного экрана с вашей иконкой на нем.
Вот так мы протестировали одну из наших иконок с помощью Icon Strike.
Существуют и другие подобные программы, которыми пользуются дизайнеры иконок, но которые вряд ли будут удобны вам, если вы далеки от дизайна. Поэтому не будем долго останавливаться на этом способе и перейдем к более простым вариантам тестирования.
Тестирование с помощью онлайн-сервисов
Такое тестирование занимает всего несколько секунд и невероятно удобно для тех, кто ищет быстрый способ проверить, как будет смотреться иконка в различных ее размерах и на разных вариантах фона.
Мы собрали список из нескольких бесплатных сервисов, которые помогут вам осуществить такой тест.
Icontester — бесплатная и простая онлайн-программа, которая поможет вам увидеть, как ваша иконка под iOS или Android будет смотреться в App Store, Google Play и на различных гаджетах. Все, что нужно сделать, это загрузить ее и нажать на кнопку “View Icon”. Программа генерирует preview загруженной иконки в десяти разных ситуациях, где она может быть использована: сторы, экраны гаджетов, фоны.
Созданная в нашей студии иконка загружена в Icontester для проверки.
А вот 2 из 10 вариантов, которые будут показаны вам в результате.
Полный результат тестирования вы можете посмотреть тут. Как видите, результатами можно легко поделиться.
AppSparky — аналогичная бесплатная онлайн-программа, которая поможет протестировать иконку на различных гаджетах. Вам будет показано чуть больше вариантов, чем в предыдущем тестировании (13, а не 10), но проверить этим сервисом можно только iOS иконку. Линком на результаты также легко поделиться и получить фидбэк от коллег.
Принцип работы аналогичен: просто перетаскиваете иконку или загружаете одним кликом. И вам покажут 13 вариантов того, как будет смотреться иконка на различных девайсах, в разных размерах и среди других приложений в сторе. Вот пример, что вы получите в результате:
Тестирования iOS иконки, созданной в нашей студии.
Весь результат тестирования тут.
Минус двух этих программ в том, что иконка отображается не в оригинальном размере, а как картинка на автоматически сгенерированных скриншотах. В результате на такой картинке не увидишь смазанные пиксели, замыливание, если они есть на иконке, или мелкие огрехи, которые видны в оригинальном размере, но не видны при уменьшении. Учитывайте это при тестировании и воспользуйтесь дополнительно программой, которая требует загрузки иконок в определенных размерах или способом проверки “вручную”.
Appicontest — еще одна бесплатная программа для тестирования iOS иконок. Но тут уже нужно загружать иконки только в строго указанных размерах, перетащив их на поле. Далее вводите название своего приложения и нажимаете “Generate”.
Все максимально просто и детально расписано.
Далее вы открываете ссылки и смотрите, как смотрится иконка.
Результаты такого тестирования будут храниться не более 7 дней.
А это вы увидите в результате.
Неудобство этой программы в том, что загружать иконки нужно в строго указанных размерах, а функции заключаются лишь в том, чтобы продемонстрировать, как смотрится иконка приложения на экране iPhone и iPad. На этом все. Среди конкурентов, в Доке и в сторах, вам придется тестировать иконку другими способами.
Какой вариант тестирования наиболее эффективный
Все варианты имеют свои преимущества и недостатки, но есть среди них бесспорный лидер — техническое тестирование “вручную”. Оно занимает больше времени, чем другие способы, но только с его помощью можно проверить иконку в полном объеме. И вот почему:
- Ни один из онлайн-сервисов и программ пока не может протестировать, как смотрится иконка приложения среди своих реальных конкурентов. Поэтому это тестирование необходимо сделать вручную, путем поиска конкурентов по ключевым словам и создания скриншота с иконкой в Photoshop.
- Не существует универсальной программы, которая бы проверила иконку во всех ее размерах и вариантах использования.
- Для Android-иконки сервисов мало, основная масса существующих инструментов облегчают тестирование иконки только для iOS.
- Большинство онлайн-сервисов и программ не требуют точных размеров иконки, поэтому их результаты не смогут помочь отловить такие проблемы как “замыленность” или “поехавший пиксель”, а дают лишь примерное представление о том, как будет смотреться приложение в окружении стора.
Поэтому все перечисленные сервисы и программы мы рекомендуем использовать лишь в процессе обсуждения вариантов дизайна, когда нужно быстро проверить, как будет выглядеть иконка в целом. Когда же дизайнер представляет вам окончательную версию иконки, требуйте от него полное поэтапное техническое тестирование, чтобы предупредить ошибки дизайна до релиза. И обязательно просите показать наглядно, как новый дизайн иконки будет выглядеть среди реальных конкурентов.
Техническое тестирование — это лишь первый этап проверки иконки приложения. О том, как тестировать иконку на аудитории, читайте в нашей следующей статье.