Реалізація прогресс-бара заповнення профілю для вовлечення в мобільному додатку
LinkedIn показує «Ваш профіль заповнений на 60%» — і користувач додає фото. Не тому що хоче 100%, а тому що незакритий прогрес сприймається як незавершена задача. Ефект Зейгарник у інтерфейсі.
Архітектура компонента
Прогресс-бар заповнення профілю — це не просто UIProgressView з числом. Це система з кількох частин: обчислення прогресу, відображення, список незаповнених полів, навігація на потрібний екран.
Обчислення прогресу. Кожне поле профілю має вагу. Аватар — 20%, ім'я та прізвище — 10%, телефон — 15%, bio — 15%, та так далі. Сума ваг = 100%. Альтернативно — рівні ваги: filledFields / totalFields. Логіку обчислення виносимо у окремий ProfileCompletionCalculator / UseCase, покритий unit-тестами. Перерахування при кожній зміні профілю, результат кешуємо в ViewModel.
Анімація. При відкриттю екрана показуємо прогрес з анімацією від 0 до поточного значення. На iOS — UIProgressView.setProgress(_:animated:) або кастомний CABasicAnimation на strokeEnd для круглого прогресс-бара через CAShapeLayer. У SwiftUI — withAnimation(.easeOut(duration: 0.6)) навколо зміни @State var progress. У Compose — animateFloatAsState з tween(600).
Список кроків до заповнення
Рядом з прогресс-баром — карточки або строки з незаповненими полями: «Додайте фото», «Укажіть місто», «Напишіть про себе». Кожна клікабельна та ведеть на конкретний екран або прямо до потрібного поля. Deep link усередині додатку: NavigationLink / NavController.navigate() з передачею focusField параметра, щоб поле одразу отримало фокус.
Сортування кроків: спочатку ті, що дають максимальний прирост (за вагою), або ті, що простіше всього заповнити. A/B-тест покаже, що працює краще для вашої аудиторії.
Персистентність і синхронізація
Прогрес зберігається на сервері (профіль — серверна сутність), локально кешуємо для миттєвого відображення без очікування API. UserDefaults / DataStore для кеша, інвалідуємо при отриманні оновленого профілю. Якщо користувач заповнив профіль на вебі — мобілка повинна показати актуальний прогрес при наступному відкритті.
Push-уведомлення через 24–48 годин після реєстрації, якщо профіль заповнений менше ніж на 50% — стандартна механіка вовлечення. Реалізується на стороні backend, мобілка лише приймає та відображає.
Терміни: 1 день — базовий прогресс-бар з обчисленням та анімацією. Список кроків з навігацією та серверною синхронізацією включений у стандартну оцінку завдання.