نمونه اولیه شما با کاربران خود صادق نیست (و در اینجا نحوه رفع آن آورده شده است) – مجله Smashing

تقریباً در هر جلسه قابلیت استفاده، لحظه‌ای وجود دارد که یک شرکت‌کننده در صفحه ورود می‌ایستد، چیزی را وارد می‌کند و به بالا نگاه می‌کند: بررسی می‌کند که آیا «این کار را درست انجام می‌دهد یا خیر». این مکث نشانه واضحی است. آنها قبلاً ثابت کرده اند که این یک برنامه واقعی نیست و هر نقطه داده جمع آوری شده پس از آن نقطه از طریق آن آگاهی فیلتر می شود.

هنگام آزمایش محصولات مالی، مشکل حادتر است. کاربران مالی آموزش دیده اند که متوجه شوند وقتی چیزی اشتباه است: تعادلی که جمع نمی شود، زمینه ای که همه چیز را می پذیرد. وقتی یک نمونه اولیه بانکی احراز هویت واقعی را دور می زند، شرکت کنندگان فقط قفل نمی شوند. آنها در اواسط جلسه متوقف می شوند تا آن را علامت گذاری کنند. این تیم با یافته هایی که نشان دهنده نحوه رفتار کاربران در یک نسخه نمایشی به جای یک محصول واقعی است، کنار می رود.

راه حل باریک تر از چیزی است که فکر می کنید. لحظه ای را که اعتماد شرکت کنندگان ایجاد می شود شناسایی کنید و آن تعامل را واقعی کنید. در برنامه بانکی، این لحظه ورود است.

این آموزش آن را ایجاد می‌کند: اعتبارنامه‌هایی که تأیید می‌کنند، وضعیت خطای بلادرنگ، و انیمیشن بیومتریک که طبیعی به نظر می‌رسد – بدون نیاز به کد.

چیزی که ما در حال ساخت آن هستیم: ورودی که مانند یک محصول ارسال شده رفتار می کند

جریان ورود به سیستم ساخته شده در اطراف Pie Bank، یک نمونه اولیه بانکداری تلفن همراه، شامل ورودی متن کاربردی، یک فیلد رمز عبور پوشانده شده، اعتبارسنجی اعتبار، وضعیت خطای زنده، و یک انیمیشن Face ID است که به گونه‌ای است که از iOS قابل تشخیص نیست.

آنچه شما نیاز خواهید داشت:

• ورود به سیستم از Figma (یا دیگر ابزار طراحی پشتیبانی شده)
• ProtoPie Studio – رایگان برای شروع، همه چیز در این آموزش بر روی طرح رایگان کار می کند
• فایل Lottie برای انیمیشن Face ID (ما از این یکی استفاده کردیم)
• نمونه اولیه بانک پای تمام شده – آن را دانلود کنید تا دنبال کنید، یا بعد از ساخت از آن به عنوان مرجع استفاده کنید

مرحله 1: وارد کردن از Figma یک صحنه را انتخاب کنید، نه یک صحنه صاف

در Figma پلاگین ProtoPie را با کادر ورودی انتخاب شده باز کنید و انتخاب کنید صحنه هنگام صادرات Flattened همه چیز را در یک تصویر جمع می کند. Scene سلسله مراتب لایه شما را حفظ می کند، بنابراین هر عنصر به عنوان یک لایه هدف جداگانه به ProtoPie می رسد.

قبل از ادامه: نام هر لایه را بطور معناداری تغییر دهید. “نام کاربری را وارد کنید” نه “مستطیل 14”. شما این نام ها را در فرمول ها مشخص خواهید کرد: نام های مبهم در اتلاف زمان واقعی ترکیب می شوند.

مرحله 2: فیلدهای استاتیک را با ورودی هایی که در واقع متن را می پذیرند تعویض کنید

در ProtoPie متولد شد وارد شوید لایه ورودی واقعی صفحه کلید را می پذیرد: شرکت کنندگان متن واقعی را تایپ می کنند، نه ظرفی را لمس می کنند. برو به Text → Input، یک لایه ورودی را روی بوم خود بکشید و آن را در گروه فیلد نام کاربری خود قرار دهید. آن را به صورت بصری وصل کنید: متن ذخیره شده نام کاربری، پر کردن پس زمینه و فونت متناسب با طرح شما.

شات را مرور کنید. روی فیلد کلیک کنید. تایپ کنید. این نمونه اولیه است که به جای رندر کردن، مانند یک برنامه عمل می کند.

این لایه را تغییر نام دهید یک نام کاربری وارد کنید، آن را کپی کنید و کپی را در گروه فیلد رمز عبور خود قرار دهید.

مرحله 3: یک تغییر مالکیت رمز عبور را پنهان می کند

در لایه تکراری، متن ظرف را به تغییر دهید رمز عبور و تنظیم کنید تایپ کنید به رمز عبور متنی. ProtoPie پوشاندن را کنترل می کند: نیازی به منطق سفارشی نیست.

دو قسمت را مرور کنید: نام کاربری متن را نشان می دهد، رمز عبور نقطه ها را نشان می دهد. از قبل واقعی به نظر می رسد، و شما حتی یک شرط هم ننوشته اید.

مرحله 4: قبل از سیم کشی ناوبری صحنه مورد نظر را بسازید

یک صحنه جدید، حتی یک صحنه خالی اضافه کنید. رایج ترین خطای توالی یابی در ProtoPie تلاش برای اتصال یک پاسخ ناوبری قبل از وجود مقصد است. ابتدا آن را ایجاد کنید.

مرحله 5: دکمه را وصل کنید: کار می کند، اما همچنان به همه اجازه می دهد

انتخاب کنید وارد کنید، a اضافه کنید لمس کنید ماشه، تنظیم پاسخ به پرش، صحنه خود را به تابلو هدایت کنید، انتقال انگشت خود را از راست به چپ بکشید.

مرور کنید و ضربه بزنید. پیمایش می کند: اما برای هر ورودی، از جمله هیچ چیز. نمونه اولیه هنوز در اطراف است. دو مرحله بعدی تصحیح است.

مرحله 6: متغیرهایی را اضافه کنید تا نمونه اولیه آنچه وارد شده را به خاطر بسپارد

در گوشه سمت چپ پایین ProtoPie، دو عدد اضافه کنید متن متغیرهای نوع: username و password. هر کدام را با یک فرمول به لایه ورودی خود وصل کنید:

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

فعال کردن نمادهای اشکال زدایی: همپوشانی های سبز مقادیر متغیر فعال را در حین تایپ نشان می دهند. هنگامی که می بینید که ضربه های کلید خود را در زمان واقعی ظاهر می کنید، صحافی تایید می شود.

مرحله 7: یک شرط اضافه کنید تا فقط اعتبارنامه های معتبر منتقل شوند

بازگشت به لمس کنید ماشه روی دکمه ورود به سیستم. a اضافه کنید وضعیت با دو قانون هر دو باید درست باشند:

• username برابر alex.c@gmail.com
• password برابر ABC123

حرکت کنید پرش پاسخ در این حالت اعتبارنامه اشتباه، فیلدهای خالی، فرمت اشتباه: هیچ کدام از آنها عبور نمی کند. اکنون شرکت کنندگان باید در واقع وارد شوند. این محدودیت واحد، بافت هر جلسه آزمون بعدی را تغییر می دهد.

مرحله 8: حالت خطا را ایجاد کنید، تعاملی که اکثر نمونه های اولیه آن را از دست می دهند

لایه پیام خطای خود را پیدا کنید، نام آن را تغییر دهید متن خطا، یک کدورت اولیه را تنظیم کنید 0. یک شرط دوم (برعکس شرط اول) اضافه کنید و داخل آن a تغییر مالکیت تنظیم پاسخ متن خطا کدورت به 100.

اعتبار نامعتبر: خطایی رخ می دهد. اعتبارنامه صحیح: داشبورد. دو نتیجه: که این را قابل آزمایش می کند، نه فقط قابل اثبات.

مرحله 9: انیمیشن Face ID را اضافه کنید، جزئیاتی که آزمایش‌کنندگان را وادار می‌کند بپرسند “آیا این واقعی است”

برو به رسانه ها، a را بکشید لوتی لایه روی بوم، فایل Face ID خود را بارگیری کرده و آن را در خارج از صفحه بالای قاب آیفون قرار دهید. روی مال شما با Face ID وارد شوید را فشار دهید، a اضافه کنید لمس کنید ماشه (تغییر نام آن روی Face ID ضربه بزنید) با چهار پاسخ متوالی:

• حرکت کنید: کانتینر لوتی به Y: 60
• پخش: جستجو: زمان 0s (بازنشانی می شود تا همیشه از ابتدا پخش شود)
• پخش: پخش: فایل لاتی
• پرش: به داشبورد

مرحله 10: زمان را کنار بگذارید، این چیزی است که باعث می شود احساس طبیعی داشته باشید

بدون معطلی، هر چهار پاسخ به یکباره شلیک می شوند و صحنه قبل از پخش انیمیشن می پرد. اضافه کردن افست:

فعال کنید بازنشانی صحنه های انتخاب شده در پرش: بدون آن، پیمایش به عقب باعث می‌شود انیمیشن گیر کند Y: 60.

نمایش: شناسه چهره، انیمیشن، پخش، انتقال صفحه را لمس کنید. ورود بیومتریک، غیر قابل تشخیص از چیز واقعی.

این ورود واقعی آنچه را که می توانید از نمونه اولیه خود یاد بگیرید تغییر می دهد

وقتی احراز هویت واقعاً کار می‌کند، حالت خطا به یک نقطه تماس واقعی تحقیقاتی تبدیل می‌شود: آیا کاربران پیام را دریافت می‌کنند، آیا دوباره تلاش می‌کنند، آیا به جای آن به سراغ Face ID می‌روند؟ اینها سوالاتی هستند که لاگین جعلی نمی تواند به آنها پاسخ دهد.

در بررسی های ذینفعان، جریان برای خود صحبت می کند. در تحویل مهندسی، پانل تعامل رفتار (منطق شرطی، اتصال متغیر، زمان‌بندی) را مستند می‌کند تا مهندسان هدف را ببینند، نه تفسیر را.

به همین دلیل است که تیم‌های فین‌تک روی وفاداری ورود سرمایه‌گذاری می‌کنند، حتی زمانی که ورود به سیستم عملکردی در حال آزمایش نیست. اینجاست که اعتماد شرکت کنندگان ایجاد می شود. درست انجام دهید و همه چیز در پایین دست سیگنال بهتری تولید می کند.

این آموزش بخشی از سری FinTech Prototyping with ProtoPie در وبلاگ ProtoPie است. مجموعه پای بانک را از ابتدا در چهار فصل می سازد که داشبورد، منطق انتقال پول و ادغام دوربین را پوشش می دهد. اگر این آموزش مفید بود، بقیه سری به جلوتر می روند.

(mnj, il)