3 способи протестувати значок програми перед релізом поради професійних дизайнерів іконок

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

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

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

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

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

1 спосіб: тестування "вручну"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---