Въведение

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

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

Целта е да се създаде входен поток за мобилно банково приложение, наречено Pie Bank, който включва:

• Функционални текстови полета
• Маскирано поле за парола
• Валидиране на данни за вход
• Живи състояния на грешки
• Анимация за Face ID

Необходими инструменти:

• UI за вход от Figma
• ProtoPie Studio – безплатен за стартиране
• Lottie файл за анимацията на Face ID
• Завършен файл на прототипа Pie Bank

Стъпка 1: Импорт от Figma

Изберете сцената, а не плоския слой, за да запазите иерархията на слоевете. Преименувайте всеки слой с ясни имена, за да избегнете загуба на време при референции.

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

Използвайте Input слоя на ProtoPie, за да позволите на потребителите да въвеждат реален текст. Създайте полета за потребителско име и парола.

Стъпка 3: Маскирайте паролата

Променете типа на полето за парола на Text Password, за да се показват точки вместо текст.

Стъпка 4: Създайте целевата сцена

Добавете нова сцена, преди да свържете навигацията, за да избегнете грешки в последователността.

Стъпка 5: Свържете бутона за вход

Добавете тригер за Tap на бутона за вход и задайте отговор на Jump към таблото за управление.

Стъпка 6: Добавете променливи

Създайте две текстови променливи за потребителското име и паролата, за да запомните какво е било въведено.

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

Задайте условия, при които само валидни данни за вход да преминават. Това ще накара потребителите да се опитат да влязат с правилните данни.

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

Добавете съобщение за грешка, което да се показва при неправилни данни за вход.

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

Интегрирайте Lottie анимация за Face ID, която да се активира при натискане на бутона за вход с Face ID.

Стъпка 10: Степенувайте времето на отговорите

Добавете закъснения на отговорите, за да направите анимацията по-естествена и реалистична.

Заключение

Когато входът работи реалистично, той става важна точка за изследване. Потребителите могат да взаимодействат с приложението по-естествено, а резултатите от тестовете стават по-надеждни. Инвестирането в реалистичен вход е ключово за изграждането на доверие у потребителите и за успешното тестване на приложения.