Кращі інструменти для UX прототипування

У процесі створення будь-якого продукту, важливу роль відіграє етап прототипування. Детальніше про те що це і навіщо потрібно ми писали в статтях "UX прототипування стартапів" і "UX проектування корпоративних SaaS продуктів - чим відрізняється від стартапів". У цій статті ми детально зупинимося на інструментах прототипування, які використовуємо в своїй роботі.

Axure – універсальний комбайн

За допомогою програмного забезпечення Axure, єдиного в своєму роді, можна повністю відтворити функціонал сервісу/сайту/продукту. Прототип, отриманий у результаті, повністю клікабельний, дозволяє зробити адаптивку, вводити глобальні змінні, спроектувати і перевірити на ділі різні user flow для зареєстрованого і не зареєстрованого користувача.

Дане ПО дозволяє створити прототипи різних продуктів, навіть онлайн-калькулятора на сайті. У нього також є додаткові переваги:

• можливість створити анотації для багатьох елементів інтерфейсу;
• можливість створити прототипи в форматах HTML і .chm;
• можливість створювати проекти для одночасної роботи над одним прототипом кількох учасників;
• можливість швидко створювати прототипи і швидко вносити в них зміни, а також безліч інших переваг.

Однак у системи є також і недоліки:

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

InVision – потужна система

У порівнянні з Axure InVision – простий сервіс, що дозволяє завантажити вже намальовані в іншій програмі екрани та розставити необхідні лінки. Сервіс працює на основі інтерфейсу типу drag-n-drop, а також пакету інструментів для швидкої обробки й роботи в самому браузері.

Найчастіше ми використовуємо InVision для прототипування мобільних додатків, в зв'язці з Adobe Illustrator. Серед головних переваг системи – інтуїтивний сучасний дизайн сервісу, можливість робити прості анімації-переходи екранів, а також багато інших:

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

У програми також є відчутні недоліки:

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

Figma – сервис, яким ми користумося найчастіше

Відмінний сервіс, яким ми користуємося майже постійно. Він складається з трьох основних функцій: дизайн, прототипування, перегляд css коду і дає можливість робити клікабельні прототипи, на які можна давати посилання клієнтам, розробникам. Також в Figma є можливість організувати спільну роботу всіх фахівців у режимі реального часу.

Сервіс працює на хмарі, без оффлайн-версії, багатоплатформовий, що якісно виділяє його серед найближчих конкурентів. А головне, ми використовуємо його для прототипування великих і складних проектів і дизайн-систем, що не завжди можливо на інших платформах.

Ключові переваги Figma:

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

Щоб бути повністю чесними, вкажемо також деякі недоліки продукту:

• немає можливості створювати прототипи для складних сервісів і продуктів – банально не вистачає функціоналу;
• робота можлива тільки за наявності інтернету;
• зміна розміру тексту може зміщувати його межі;
• імпортовані файли не завжди відповідають оригіналу, розвалюються. Макет на Figma краще створювати з нуля.

Такі основні UX prototiping tools, якими користуємося ми в Evergreen, разом із їх перевагами і недоліками, з якими ми навчилися справлятися, щоб досягати кращого результату при проектуванні вашого продукту.

Потрібно створити дизайн стартапу, невеликого проекту, повноцінного SaaS-порталу, мобільного додатку або будь-якого іншого онлайн-продукту? Звертайтеся до нас, створимо продукт вашої мрії. І почнемо з UX прототипу, якому позаздрять конкуренти.

Зображення, використані в статті, були взяті з відкритих джерел і використовуються як ілюстрації.

Хочете обговорити ваш проект або замовити розробку? Дякуємо за заявку. Ми зв'яжемося з вами найближчим часом

Надіслати