Застосунок для перевірки та підписання документів

Акцент на роботі з контрагентами

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

Ще один варіант без останнього документа в картці. Користувач бачить список контрагентів, обирає потрібного та переходить до папки з усіма документами: вхідними, вихідними та архівними.

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

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

Основна увага на документах

Можливо, користувачу зручніше бачити одразу документи, а не список контактів. Тому в цьому концепті ми зробили акцент саме на документах. Також ми врахували, що в одного користувача може бути кілька компаній, а застосунок при цьому один. Тому зверху додали перемикач між компаніями, а нижче показали документи, які до них належать, із зазначенням контрагента. Окремо поекспериментували з інтерфейсом. Спробували різні варіанти відображення контрагента поруч із документом, а також додали перемикач між вхідними та вихідними документами. У нижній частині екрана розмістили основну навігацію для швидкого доступу до ключових розділів.

Наступний варіант дуже схожий на перший. Користувач потрапляє на список контрагентів, і під кожним одразу бачить останній документ. Різниця в тому, що список формується не за алфавітом, а за останньою активністю по документах. Натискаючи на картку контрагента, користувач одразу відкриває документ. Тобто дістатися до нього можна всього одним кліком. Можна помітити, що текст у документі досить дрібний. Збільшити його всередині застосунку не можна, тому для зручності перегляду достатньо просто повернути телефон горизонтально. У такому форматі документ читати значно легше.

У цьому варіанті акцент зробили на типах документів. Це допомагає швидше знаходити потрібні рахунки, акти чи договори.

Концепт із попереднім переглядом документів. Користувач відкриває застосунок і одразу бачить, який перед ним документ та що в ньому. Один дотик і документ відкривається на весь екран.

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

Сценарії

Концептів було багато, але до кінця не було зрозуміло, як керівники компаній працюють із документами в реальному житті. Тому я провів кастдев.

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

У ході інтерв’ю я виділив основні дії користувачів. Саме вони лягли в основу мікросценаріїв застосунку.

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

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

Дизайн інтерфейса

Спочатку взяв стандартний iOS-фреймворк і зробив версію для iPhone. Після цього адаптував її під Android. Усі макети одразу створював в дизайні.

Готовий дизайн з зв`язками

Підписав кожен крок користувача. У кожному сценарії одразу видно, що він робить і навіщо.

Прописав усі дії користувача, включно з альтернативними сценаріями та можливими відхиленнями від основного шляху.

У застосунку є сценарій додавання нового контрагента. Користувач вводить податковий номер компанії, після чого решта реквізитів автоматично підтягується з відкритих державних реєстрів і заповнює форму. Вручну потрібно вказати лише електронну пошту. Форма доволі велика, але кнопка «Продовжити» завжди залишається на екрані.

Я наполягав, щоб кнопка залишалася неактивною, доки користувач не заповнить усі обов’язкові поля. Це поширений UX-патерн, який допомагає зрозуміти, що система все ще очікує на певні дії. У підсумку вдалося дійти згоди, і ми залишили кнопку неактивною до завершення заповнення форми. Поступово завершили версію для iOS, а потім адаптували її під Android.

Тестування