Как да създадете автентичен вход в банков прототип с ProtoPie без писане на код

Тестове на потребителска употреба: Автентичен вход в приложение с ProtoPie

Тази статия е спонсорирана от ProtoPie и разглежда ключовия момент при тестване на потребителската употреба – входът в приложение (login). Почти във всяка сесия за тестване на използваемост, участникът спира на екрана за вход, въвежда нещо и повдига поглед, сякаш проверява дали „прави всичко правилно“. Този кратък момент показва, че потребителят осъзнава, че това не е реално приложение, а прототип. От този момент нататък всички данни се интерпретират през тази призма, което влияе на достоверността на резултатите.

При финансовите продукти този проблем е още по-осезаем, тъй като потребителите на финансови услуги са обучени да забелязват несъответствия – например баланс, който не излиза, или поле, което приема всякакви данни. При фалшив прототип за банкиране, който пропуска реална автентикация, участниците не просто загубват интерес, а спират сесията, за да сигнализират нередността. Екипът получава обратна връзка, която отразява поведението им по време на демонстрация, а не в работещ продукт. Това изкривява изводите и влияе негативно на качеството на продукта.

Решението е по-просто, отколкото мнозина си мислят. Необходимо е да се идентифицира моментът на изграждане на доверието у участника и именно той да бъде направен реален и функционален. В банковото приложение този момент е входът. Този урок показва как да се създаде автентична логика за вход с валидиращи идентификационни данни, реално показване на грешки и анимация с биометрично разпознаване, без писане на код.

Какво ще изградим: Вход, който се държи като истинско приложение

Входният поток, изграден на базата на Pie Bank – мобилен банков прототип, включва функционални текстови полета, маскирано поле за парола, проверка на идентификатори, визуална индикация за грешки и анимация за Face ID, синхронизирана така, че да изглежда автентично, наподобявайки iOS.

• UI дизайн на екрана за вход от Figma или друг поддържан дизайнерски инструмент
• ProtoPie Studio (безплатна версия е достатъчна)
• Файл с Lottie анимация за Face ID (можете да използвате същия, който е предоставен)
• Финалния файл на Pie Bank прототипа, който може да бъде изтеглен за справка или по време на изграждането

Стъпка 1: Импорт от Figma – изберете "Scene", а не "Flattened"

Във Figma отворете ProtoPie плъгина с избран ваш login frame и изберете опцията „Scene“ при експортиране. Опция “Flattened” слепва всички елементи в едно изображение, докато „Scene“ запазва йерархията на слоевете, което позволява всеки елемент да бъде отделно адресиран в ProtoPie.

Много важно е още тук да преименувате смислено всеки слой – например „Input Username“, а не „Rectangle 14“, защото по-късно в логиката ще реферирате именно към тези имена, а неразбираемите наименования причиняват загуба на време и объркване.

Стъпка 2: Замяна на статичните полета с реални Input компоненти

Native слой Input в ProtoPie позволява реално въвеждане чрез клавиатура, не само кликване по полето. Отидете в менюто Text → Input, създайте Input слой, плъзнете го в групата с потребителско име и го стилизирайте според дизайна (със същия placeholder „Username“, фон, шрифт).

Тествайте с Preview – кликайте полето и пишете текст, което вече го кара да се държи като истинско приложение. След това дублирайте Input слоя и го позиционирайте в групата за парола.

Стъпка 3: Маскиране на паролата с една промяна в свойството

В дублирания Input слой сменете placeholder на „Password“ и променете Type на „Text Password“. ProtoPie автоматично маскира въведения текст със символи за защита на паролата, без нужда от допълнителна логика.

Отново прегледайте – полето за потребителско име показва какво пишете, а полето за парола – скрити точки. Толкова е лесно, а усещането за автентичност нараства.

Стъпка 4: Подгответе дестинационната сцена, преди да се свързва навигация

Създайте нова сцена, дори празна, която ще служи като Dashboard или последващ екран. Най-често срещаната грешка е да се опитате да свържете бутон за навигация, преди да създадете целевата сцена.

Стъпка 5: Въвеждане на навигация чрез бутон, но още без валидиране

Изберете бутона за вход, добавете Tap trigger с действие Jump към Dashboard сцената с преход Slide in от дясно наляво. Тествайте – връзката работи, но все още позволява да се влезе с всякакви или без данни. Прототипът все още „лъже“.

Стъпка 6: Въвеждане на променливи, които помнят въведеното

В долния ляв ъгъл на ProtoPie създайте две променливи от тип Text – username и password. Свържете ги с текстовите полета чрез формули:

input("Input Username").text
input("Input Password").text

Включете debug икони – зелените наслагвания ще показват реалните стойности, докато пишете, което доказва, че връзката е успешна.

Стъпка 7: Добавяне на условие за валидни идентификационни данни

Отидете на Tap тригера на бутона и добавете условие с две правила, и двете трябва да са верни:

• username е „[email protected]“
• password е „ABC123“

Преместете действието Jump в рамките на това условие, за да се случва само при валидни данни.

Стъпка 8: Реализиране на състояние на грешка

Намерете слоя с грешка, преименувайте го на „Error Text“ и задайте начална непрозрачност (opacity) 0. Добавете второ условие – обратното на първото – в което задайте opacity на 100 на „Error Text“. Така при грешни данни се показва съобщение за грешка, при правилни – се навигира към Dashboard. Това прави тестването смислено и реално.

Стъпка 9: Добавяне на анимация Face ID за реализъм

Добавете Lottie слой, заредете файла с Face ID анимацията и го позиционирайте извън екрана, над iPhone рамката. Към бутона за Face ID добавете Tap trigger с последователност от действия:

1. Преместване на Lottie към позиция Y: 60
2. Playback seek (връщане в начало)
3. Playback play (пускане на анимацията)
4. Jump към Dashboard

Стъпка 10: Установете подходящи забавяния, за да изглежда естествено

Без забавяния всичко се случва едновременно и преходът става преди анимацията да се визуализира. Добавете интервали:

• Move – 0s
• Seek – 0s
• Play – 0.5s
• Jump – 1s

Включете Reset on Jump, за да се рестартира сцената при връщане и анимацията да не стои в позиция Y:60.

Защо автентичен вход променя резултатите от тестването?

Когато автентикацията е реална, състоянието на грешка се превръща в важна точка за изследване – дали потребителите разбират съобщението, опитват ли отново или избират биометрично влизане. Чисто симулираният вход не дава отговори на тези въпроси.

В ревюта с заинтересовани страни този поток говори сам за себе си. При предаване на задачата към разработчиците, интерактивните панели подробно документират логиката, свързването на променливи и тайминга. Така инженерите получават ясно виждане за намерението, а не предположения.

Затова екипите във FinTech влагат усилия в перфектния login, дори когато входът сам по себе си не е главният обект на тестване. Той изгражда доверието на участника и грамотността на прототипа – ключ към по-добри и по-надеждни резултати след това.

Този урок е част от серията „FinTech прототипиране с ProtoPie“ в блога на ProtoPie, където се конструира Pie Bank от основата в четири глави, разглеждащи Dashboard, логика за трансфери и интеграция с камера. Ако този урок ви е бил полезен, останалите части предлагат още по-задълбочени знания и техники.