Проектування та дизайн додатків деталі та хитрощі - AppTractor

Після створення User Story розробник отримує чітке уявлення про свою цільову аудиторію і кілька сценаріїв користувача для майбутнього додаток. Все це – основа створення навігаційної карти.

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

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

Для створення навігаційної схеми потрібні:

Портрет користувача;
Завдання користувача;
Контекст використання;
Сценарій використання;

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

Як… (опис представника ЦА, його роль у додатку),він отримує..(дії в додатку)для… (мети його дій у додатку).

Для створення навігаційної карти всі ці сценарії потрібно спростити та подати у вигляді послідовних дій:

Повинен бути
Повинен бути
Може бути
Міг би бути

Головна: Політика, Економіка, Суспільство, Культура, Меню, Пошук, Оновити, Вибране, Налаштування, Обговорити.

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

Структурно, навігаційна схема складається з блоків, з'єднаних між собою горизонтальними та вертикальними зв'язками. Горизонтально пов'язані блоки мають на увазі контент одного рівня, навігація яким не передбачає відкриття нового вікна. Вертикальні блоки мають на увазі перехід користувача на інший рівень контенту програми. Подібна ієрархічна модель навігації передбачає послідовне надання інформації користувачам. Відмінний приклад такої навігації – додатки новин. У них основний акцент зроблено на розділи та головні новини дня. Щоб ознайомитися з порядком денним минулого тижня, потрібно перейти по певній вкладці. А прочитання новини має на увазі ще один перехід. У такій ієрархії потрібно розподілити блоки всередині навігаційної карти.

Після створення навігаційної карти слід ще раз повернутися до портрета своєї цільової аудиторії та ролей користувачів у додатку. На прикладах цих ролей слід знову пройти всі етапинавігації всередині програми, приділивши особливу увагу функціоналу. Зрештою, метою користування будь-яким додатком є отримання інформації. У зв'язку з цим ключова складова кожного додатка – це контент у вигляді текстово-графічної інформації та функціоналу. І якщо тексти та графіку приводять у відповідність до цілей програми на етапі розробки і після нього, то функціонал необхідно продумати заздалегідь. В основі ідеально організованої функціональності програми лежать чотири золоті правила:

Пару слів про дизайн

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

Контент. Інтерфейс покликаний допомагати користувачам, спрямовувати їх, а не відволікати.
Чіткість. Легкий для сприйняття тексту, прості іконки, функціональний дизайн.
Глибина. Візуальний поділ інформації.

Решта корисної інформації міститься в гайдлайнах сторін. Причому слідувати їм потрібно обов'язково, інакше є можливість взагалі не потрапити в стор. Після відмальовування та затвердження всіх макетів їх слід перелінкувати для розуміння логіки переходів. По суті, перелінковані макети – це вже перший робочий прототип майбутнього додатку. На цьому етапі слід ще раз перевіряти ще раз навігаційну карту і пройтися по всіх розділах програми, використовуючи сценарії з User Story. Після адаптації макетів до всіх необхідних розширень екранів, всі матеріали передаються на розробку.