Як протестувати значок програми перед релізом - AppTractor

Навіщо тестувати значок перед релізом? А уявіть, що буде, якщо розробник заллє на продакшн код, який перед цим не протестує QA. Тестування іконки це як техогляд перед гонкою.

Навіщо тестувати іконку перед релізом? А уявіть, що буде, якщо розробник заллє на продакшн код, який перед цим не протестує QA. Тестування іконки це як техогляд перед гонкою. Краще витратити кілька хвилин на перевірку до старту, ніж потім витрачати багато часу і грошей на виправлення помилок. IconDesignLAB.com розповідає про те, як найефективніше протестувати іконку програми до релізу та які інструменти вам допоможуть провести прості тести за 2-3 секунди.

Щоб створити ефективну іконку програми, яка буде не просто якісно виглядати серед конкурентів, а й збільшувати конверсію, її потрібно піддати двом етапам тестування:

технічне тестування;
тестування аудиторії.

Технічне тестування іконки можна розділити на етапи:

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

Тестування "вручну"

Це найбільш трудомісткий і час витратний спосіб, але ним все одно користуються деякі наші дизайнери. Наприкінці статті ви дізнаєтесь чому.

Ось його суть: привласнюємо готову іконку якійсь порожній програмі або папці, і проходимо всі етапи технічного тестування.

Наприклад, на комп'ютері це можна зробити, якщо натиснути на порожню папку, і поміняти іконку в розділі “Властивості”. Далі потрібно перевірити, як відображається ця папка у всіх можливих розмірах та місцезнаходженнях.

Поміщаємо її на робочий стіл та міняємо фон: білий, чорний, кольоровий та ін.
Перевірте, як виглядає папка з іконкою, якщо її перемістити до іншої папки.
Перевірте, як виглядає іконка на панелі завдань. Для цього наші дизайнери використовують найпростішу програму, яку ми написали самі. Але можна зробити і по-іншому: зробіть скріншот панелі завдань, помістіть туди іконку та оцініть результат, знову розгорнувши її на екрані.
Для Mac варто перевірити іконку ще на панелі для запуску додатків Dock. Це панель з найпоширенішими програмами внизу екрана. Для цього можна зробити скріншот і вставити іконку у фотошопі, а можна скористатися спеціальним додатком (про який йтиметься далі).

Ось як це все виглядає на прикладі:

Тестування іконки на Маку: в Dock внизу екрана, при збільшенні під час наведення мишкою, в папці та в описі

Три варіанти іконок, представлені замовнику серед конкурентів у Google Play.

Цей спосіб тестування видається дуже довгим і трудомістким, але, як показала практика, одним із найефективніших.

Тестування за допомогою професійних програм

Робота над іконкою та синхронізація за допомогою Skala

Це безкоштовний додаток для iPhone, iPad і Mac, за допомогою якого можна перевірити, як виглядатиме iOS іконка в різних розмірах і на різному тлі. Але протестувати іконку середконкурентів або у Доці можливості немає.

Коротко про принцип роботи програми

Результатами тестування можна поділитися за допомогою пошти, Facebook або Twitter.

Icon Tester

Ця програма покаже, як виглядає iOS іконка у Доці. Ось такий мінімалістичний, але потрібний для тестування функціонал.

Icon Strike

Завантажуєте іконку, вводите 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.
Більшість онлайн-сервісів і програм не вимагають точних розмірів іконки, тому їх результати не зможуть допомогти відловити такі проблеми як "замиленість" або "піксель", що поїхав, а дають лише зразкове уявлення про те, як виглядатиме додаток в оточенні стора.