দ্রুত সাইন-ইন চালু করা: অবিলম্বে UI মোড UX প্যাটার্ন

Eiji Kitamura

প্রকাশিত: ৩০ সেপ্টেম্বর, ২০২৬, শেষবার আপডেট করা হয়েছে: ৭ অক্টোবর, ২০২৬

এক নজরে

তৎক্ষণিক UI মোড, নেভিগেট করে একটি নির্দিষ্ট সাইন-ইন পৃষ্ঠায় যাওয়ার ফলে হওয়া প্রসঙ্গ হারিয়ে যাওয়া ও ব্যবহারকারীর সেশন ড্রপ-অফ হওয়ার সমস্যা সমাধান করে। এটি দ্রুত সাইন-ইন করার সুবিধা দেয়, এর ফলে ব্যবহারকারীরা যে পৃষ্ঠা দেখছেন বা কাজ করছেন, সেখান থেকে না বেরিয়েই পাসকী বা সেভ করা পাসওয়ার্ড ব্যবহার করে সাইন-ইন প্রক্রিয়া সম্পূর্ণ করতে পারেন।

কন্ডিশনাল UI-এর মতো নয়, যা ব্যবহারকারী টেক্সট ইনপুট ফিল্ডে ফোকাস করলে অটোফিল সাজেশনের সুবিধা দেয়, Immediate UI মোড কোনও বোতাম বা লিঙ্কে ক্লিক করার উত্তরে সঙ্গে সঙ্গে ব্রাউজারের যাচাইকরণ ডায়ালগ খুলে দেয় (এই মুহূর্তে, uiMode শুধুমাত্র "immediate" গ্রহণ করে, তবে এটি ভবিষ্যতে পরিবর্তিত হতে পারে)।

তিনটি মূল বৈশিষ্ট্য Immediate UI মোডকে দ্রুত সাইন-ইন করার জন্য অনন্যভাবে কার্যকর করে তোলে:

  • ক্রস-ডিভাইস QR কোড এড়িয়ে যাওয়া: ডিভাইসে যদি অবিলম্বে উপলভ্য পাসকী বা সেভ করা পাসওয়ার্ড থাকে, তাহলে ব্রাউজার সঙ্গে সঙ্গে যাচাইকরণ ডায়ালগ দেখায়। কোনওটি না থাকলে, এটি অবিলম্বে স্মার্টফোনের জন্য ক্রস-ডিভাইস QR কোড স্ক্রিননা দেখিয়েই বেরিয়ে যায়। এর ফলে আপনার সাইট স্বাভাবিকভাবে এর সাধারণ ফলব্যাক নেভিগেশনে (যেমন, সাইন-ইন পৃষ্ঠায় যাওয়া) ট্রানজিট করতে পারে।
  • অ্যাকাউন্ট-কেন্দ্রিক বাছাই করার জন্য স্বজ্ঞাত UI: আলাদা আলাদাভাবে বিভিন্ন ধরনের ক্রেডেনশিয়াল তালিকাভুক্ত করার পরিবর্তে, এটি পাসকী ও পাসওয়ার্ডের মধ্যে থাকা অন্তর্নিহিত পার্থক্যকে লুকিয়ে রাখে যাতে ব্যবহারকারী কোন অ্যাকাউন্টে সাইন-ইন করতে চান সেই বিষয়ে কেন্দ্রিত একটি স্বজ্ঞাত অ্যাকাউন্ট বাছাইকারীকে উপস্থাপন করা যায়।
  • নিরাপদ প্রগ্রেসিভ এনহ্যান্সমেন্ট: এটি শুধুমাত্র Google Chrome ও Chromium ব্রাউজারে কাজ করলেও, ফিচার শনাক্তকরণ ব্যবহার করে আপনি কাজ করে এমন এনভায়রনমেন্টে ব্যবহারকারীদের দ্রুত সাইন-ইন করার সুবিধা দিতে পারেন। এর ফলে, কাজ করে না এমন ব্রাউজার (যেমন, Safari বা Firefox) বা ছদ্মবেশী মোডে ব্যবহারকারীদের জন্য আগে থেকে থাকা লগ-ইন ফ্লোতে কোনও ব্যাঘাত ঘটে না।

API কীভাবে কাজ করে এবং ফিচার ডিটেকশন কীভাবে প্রয়োগ করতে হয় সেই সম্পর্কে আরও জানতে, লগ-ইনের জন্য ইনস্ট্যান্ট UI মোড দেখুন। এই ডকুমেন্টে, আমরা সাজেস্ট করা UX প্যাটার্ন এক্সপ্লোর করি যা ইমিডিয়েট UI মোডের মাধ্যমে কনভার্সন বাড়ায়, এর সাথে এড়িয়ে যাওয়ার জন্য ডিজাইন অ্যান্টি-প্যাটার্নও দেওয়া আছে।

পৃষ্ঠা নেভিগেশনের ঠিক আগে ইন্টারসেপশন করার সময় Immediate UI মোড ব্যবহার করা সবচেয়ে কার্যকর। যখনই কোনও আনঅথেন্টিকেট করা (বা সেশন-এক্সপায়ার হয়ে যাওয়া) ব্যবহারকারী কোনও লিঙ্ক বা অ্যাকশন বোতামে ক্লিক করেন যা সাধারণত তাকে সাইন-ইন পৃষ্ঠায় নেভিগেট করে, ঠিক সেই মুহূর্তে 'ইনস্ট্যান্ট UI' মোড চালু করলে এমন একটি নিরবচ্ছিন্ন UX তৈরি হয় যা কখনও তার ওয়ার্কফ্লোতে বাধা দেয় না।

বেশিরভাগ ওয়েবসাইট স্ক্রিনের সবচেয়ে উপরে গ্লোবাল হেডারে "সাইন-ইন করুন" লিঙ্ক প্লেস করে যা ডেডিকেটেড সাইন-ইন পৃষ্ঠায় নেভিগেট করে। ব্যবহারকারী ব্রাউজ করা পৃষ্ঠায় এই লিঙ্কে ক্লিক করলে, নেভিগেশন পজ করা এবং Immediate UI মোড চালু করা হলে, ডিভাইসে ক্রেডেনশিয়াল থাকলে, ব্রাউজার বর্তমান পৃষ্ঠার ঠিক উপরে অ্যাকাউন্ট বেছে নেওয়ার ডায়ালগ দেখাতে পারে।

ব্যবহারকারী তার অ্যাকাউন্ট বেছে নিয়ে যাচাইকরণ সম্পূর্ণ করলে, হেডার আপডেট হয়ে সাইন-ইন করা অবস্থায় চলে যায়। এর জন্য কোনও পৃষ্ঠা নেভিগেট করতে হয় না। এর ফলে, ব্যবহারকারী যে পৃষ্ঠা দেখছিলেন সেটি থেকে এক পাও না সরে গিয়েই ব্রাউজ করা চালিয়ে যেতে পারেন। অন্যদিকে, ডিভাইসে কোনও ক্রেডেনশিয়াল না থাকলে, কোনও ব্রাউজার UI দেখানো হয় না এবং ব্যবহারকারী ঠিক যেভাবে প্রথমে চেয়েছিলেন সেইভাবে সাইন-ইন পৃষ্ঠায় সহজেই নেভিগেট করতে পারেন।

চেক-আউটের সময় ডায়নামিক সাইন-ইন (ই-কমার্স)

ই-কমার্স সাইটে, শপিং কার্ট থেকে চেক-আউটে ট্রানজিশন হল পৃষ্ঠা নেভিগেশন সংক্রান্ত সমস্যার কারণে কার্ট ছেড়ে বেরিয়ে যাওয়ার সবচেয়ে সাধারণ কারণগুলির মধ্যে একটি। অননুমোদিত ক্রেতা কার্ট স্ক্রিনে চেক-আউটের প্রসেস শুরু করুন বোতামে ক্লিক করার সাথে সাথেই 'ইনমিডিয়েট UI' মোড চালু হয়ে যায়। বোতামে যেখানে ক্লিক করা হয়েছে ঠিক সেখানেই অ্যাকাউন্ট বেছে নেওয়ার ডায়ালগ দেখানো হয় এবং একটি সিঙ্গেল ট্যাপের মাধ্যমে যাচাইকরণ সম্পূর্ণ করা হয়।

যাচাইকরণ সফল হলে, ক্রেতা সাইন-ইন পৃষ্ঠাটি সম্পূর্ণভাবে এড়িয়ে যান এবং সরাসরি চূড়ান্ত শিপিং ও পেমেন্ট কনফার্মেশন স্ক্রিনে (চেক-আউট পৃষ্ঠা) পৌঁছে যান, এর ফলে কেনাকাটা সম্পূর্ণ করার জন্য প্রয়োজনীয় ধাপগুলি উল্লেখযোগ্যভাবে কমে যায়। কোনও ক্রেডেনশিয়াল না থাকলে, ক্রেতা স্বাভাবিকভাবে প্রচলিত সাইন-ইন বা অতিথি হিসেবে চেক-আউট করার বিকল্প বেছে নেওয়ার স্ক্রিনে চলে যান। আপনার ব্যবসার প্রয়োজন অনুযায়ী, আপনি সাইট এমনভাবে ডিজাইন করতে পারেন যাতে অতিথি চেক-আউট করতে পারেন অথবা সাইন-ইন করতে হয়। অবিলম্বে UI মোড পুরনো গ্রাহকদের জন্য চেক-আউট সংক্রান্ত সমস্যা দূর করতে সাহায্য করে।

মাইক্রো-অ্যাকশনের জন্য ইনলাইন সাইন-ইন (লাইক, বুকমার্ক, সেভ)

ভিজিটররা সোশ্যাল ফিড, কমিউনিটি সাইট বা ই-কমার্স প্রোডাক্ট ক্যাটালগ ব্রাউজ করার সময়, প্রতিবার কোনও পোস্ট "লাইক" করতে বা কোনও আইটেম "বুকমার্ক" করতে গেলেই সাইন-ইন পৃষ্ঠায় সম্পূর্ণ পৃষ্ঠা রিডাইরেক্ট করা হলে, কিছু ব্যবহারকারী সেই অ্যাকশনটি সম্পূর্ণ নাও করতে পারেন।

সাইন-আউট করা কোনও ভিজিটর 'লাইক করুন', 'বুকমার্ক করুন' বা 'সেভ করুন'-এর মতো অ্যাকশন বোতামে ক্লিক করলে, ঠিক সেই জায়গায় একটি Immediate UI মোড ডায়ালগ দেখালে, পরিচয় যাচাইকরণ সম্পূর্ণ করা যায় এবং অবিলম্বে অ্যাকশন রেকর্ড ও UI অ্যানিমেশন (যেমন, হার্ট আইকন লাল হয়ে যাওয়া) ট্রিগার করা যায়। স্ক্রল পজিশন একটি পিক্সেল দ্বারা সরে যায় না, এর ফলে ব্রাউজিং ইমার্সন সম্পূর্ণভাবে বজায় থাকে। কোনও ক্রেডেনশিয়াল না থাকলে, সাথে সাথে নেভিগেট না করে, আপনি বর্তমান স্ক্রিনের উপরে একটি লাইটওয়েট ইনলাইন লগ-ইন মোডাল দেখাতে পারেন অথবা ব্যবহারকারীকে সাইন-ইন পৃষ্ঠায় এমনভাবে গাইড করতে পারেন যাতে সাইন-ইন করার পরে তাকে তার আসল জায়গায় ফিরিয়ে আনা যায়।

প্রকাশকের সাইটে পেওয়াল আনলক করা

খবরের মিডিয়া ও কন্টেন্ট প্ল্যাটফর্ম এমন একটি মডেল ব্যাপকভাবে গ্রহণ করে যেখানে কোনও নিবন্ধের প্রথম প্যারাগ্রাফ ফ্রিতে অ্যাক্সেস করা যায়, তবে পাঠক স্ক্রল করে অর্ধেকটা নিচে নামলে একটি সফট পেওয়াল বা শুধুমাত্র মেম্বারদের জন্য ব্লার করা অংশ দেখানো হয়।

কোনও পাঠক কোনও নিবন্ধ স্ক্রল করে পেওয়াল পর্যন্ত পৌঁছালে এবং আপনার অ্যাকাউন্ট দিয়ে পড়া চালিয়ে যান বোতামে ক্লিক করলে, 'তৎক্ষণাৎ UI মোড' চালু করা হয় এবং পাঠক যেখানে পজ করেছিলেন ঠিক সেই স্ক্রল পজিশনের উপরেই যাচাইকরণ ডায়ালগ দেখানো হয়। যাচাইকরণ সম্পূর্ণ হওয়ার সাথে সাথেই, নিবন্ধের অস্পষ্টতা ধীরে ধীরে মিলিয়ে যায় এবং পৃষ্ঠাটি রিলোড করার প্রয়োজন হয় না। এর ফলে, পাঠক যে লাইনটি দেখছিলেন সেটি হারিয়ে না ফেলে পড়া চালিয়ে যেতে পারেন। কোনও ক্রেডেনশিয়াল না থাকলে, পেওয়াল বিভাগে ইনলাইন রেজিস্ট্রেশন বা সাইন-ইন ফর্ম বড় করে দেখুন।

এড়িয়ে যেতে হবে এমন অ্যান্টি-প্যাটার্ন

পৃষ্ঠা নেভিগেশনের আগে Immediate UI মোড ব্যবহার করলে তা অনেক বেশি সুবিধা দেয়। তবে, এটি ভুল জায়গায় প্লেস করলে বা কাজ করে না এমন ফ্লোতে প্রয়োগ করলে ব্যবহারকারীর সাইন-ইন অভিজ্ঞতা খারাপ হতে পারে।

সাইন-ইন করার জন্য নির্দিষ্ট পৃষ্ঠায় সাইন-ইন বোতামে 'অবিলম্বে UI' মোড এড়িয়ে চলুন

যেহেতু 'অবিলম্বে UI' মোড একটি পরিচ্ছন্ন ডায়ালগে পাসকী ও পাসওয়ার্ড, দুটিই ম্যানেজ করে, তাই আপনার নির্দিষ্ট সাইন-ইন পৃষ্ঠায় "সাইন-ইন করুন" বোতামে এটি ব্যবহার করার জন্য প্রলুব্ধ হতে পারেন। তবে, এখানে এটি ব্যবহার করা উচিত নয়। প্রথমত, ইনস্ট্যান্ট UI মোডে ব্যবহারকারী অ্যাক্টিভেশন (যেমন ক্লিক বা ট্যাপ) কঠোরভাবে প্রয়োজন, এর ফলে সাইন-ইন পৃষ্ঠায় এটি অদ্ভুত দেখায় যেখানে ব্যবহারকারীরা পৃষ্ঠা লোড হওয়ার সময় সাইন-ইন বিকল্প সহজেই উপলভ্য থাকার আশা করতে পারেন। দ্বিতীয়ত, সাইন-ইন পৃষ্ঠা হল সেই চূড়ান্ত ডেস্টিনেশন যেখানে ব্যবহারকারীরা পৌঁছান যখন তাদের ডিভাইসে লোকাল ক্রেডেনশিয়াল থাকে না অথবা যেখানে ব্যবহারকারীরা তাদের মোবাইল ডিভাইসে পাসকী দিয়ে সাইন-ইন করতে চান (ক্রস-ডিভাইস যাচাইকরণ) অথবা "পাসকী দিয়ে সাইন-ইন করুন" বিকল্পে ক্লিক করে হার্ডওয়্যার নিরাপত্তা কী ব্যবহার করতে চান। আপনি এখানে 'অবিলম্বে UI মোড' ব্যবহার করলে, ব্রাউজার ক্রস-ডিভাইস QR কোড এবং নিরাপত্তা কী ফলব্যাক লুকিয়ে দেয় এবং ডিভাইসে কোনও লোকাল ক্রেডেনশিয়াল না পাওয়া মাত্রই বন্ধ হয়ে যায়—ব্যবহারকারীকে এমন একটি মৃত প্রান্তে আটকে দেয় যেখানে বোতামে ক্লিক করলে কোনও লাভ হয় না কারণ পৃষ্ঠাটির কোনও গন্তব্য নেই।

সাইন-ইন পৃষ্ঠায় যেখানে প্রতিটি যাচাইকরণ পদ্ধতিকে নির্ভরযোগ্যভাবে কাজ করতে হবে, সেখানে ইনপুট ফিল্ডে কন্ডিশনাল UI (অটোফিল ইন্টিগ্রেশন) কনফিগার করা হল সবচেয়ে ভাল প্র্যাক্টিস। এর ফলে লোকাল পাসকী ব্যবহার করা সহজ হয়। একই সাথে, "পাসকী দিয়ে সাইন-ইন করুন" বোতামকে স্ট্যান্ডার্ড ইনভোকেশন পদ্ধতির সাথে পেয়ার করা হয়। এর ফলে ক্রস-ডিভাইস QR কোড ও নিরাপত্তা কী বিকল্প নির্ভরযোগ্যভাবে দেখানো যায়।

স্টেপ-আপ আবার যাচাইকরণের জন্য 'অবিলম্বে UI' মোড এড়িয়ে চলুন

সাইন-ইন করা ব্যবহারকারী কোনও সংবেদনশীল অপারেশন—যেমন, পাসওয়ার্ড পরিবর্তন করা, শিপিং অ্যাড্রেস আপডেট করা, সেভ করা পেমেন্ট পদ্ধতি এডিট করা অথবা নতুন পাসকী যোগ করা—করলে, সাইটগুলি প্রায়ই ব্যবহারকারীর পরিচয় যাচাই করার জন্য স্টেপ-আপ আবার যাচাইকরণ করতে বলে। ব্যবহারকারী আগে থেকেই সাইন-ইন করে আছেন বলে, আবার যাচাইকরণ ফ্লো সাধারণত একটি ফাঁকা নয় এমন allowCredentials তালিকা পাস করে যাতে যাচাইকরণ সেই নির্দিষ্ট ব্যবহারকারীর ক্রেডেনশিয়ালের মধ্যে সীমাবদ্ধ থাকে।

তবে, আবার যাচাইকরণের জন্য 'অবিলম্বে UI' মোড ব্যবহার করবেন না। অবিলম্বে UI মোডটি শুধুমাত্র এমন অননুমোদিত সাইন-ইন ফ্লোর জন্য ডিজাইন করা হয়েছে যেখানে ব্যবহারকারীর পরিচয় এখনও জানা যায়নি। কোনও নির্ভরকারী পার্টি যদি 'ইনমিডিয়েট UI' মোডে ক্রেডেনশিয়াল আইডির একটি নির্দিষ্ট তালিকা কোয়েরি করতে পারে এবং কোনও ক্রেডেনশিয়াল আছে কিনা তা পর্যবেক্ষণ করতে পারে, তাহলে এটি অনুমান করতে পারবে যে ব্যবহারকারী আগে সাইটের সাথে ইন্টার‍্যাক্ট করেছেন কিনা এবং সেশন জুড়ে ব্যবহারকারীকে ট্র্যাক করতে পারবে। এই ক্রস-সেশন ট্র্যাকিংয়ের ঝুঁকি এড়াতে, ব্রাউজার অবিলম্বে এমন যেকোনও 'অবিলম্বে UI মোড' সংক্রান্ত অনুরোধ বাতিল করে দেয় যার মধ্যে ফাঁকা নয় এমন allowCredentials তালিকা থাকে এবং এর জন্য NotAllowedError ব্যবহার করা হয়। অন্যদিকে, আবার যাচাইকরণের সময় allowCredentials বাদ দিলেও সমস্যা হয়, কারণ ব্রাউজার আপনার সাইটের জন্য ডিভাইসে সেভ করা প্রতিটি ক্রেডেনশিয়াল দেখায়—এর ফলে ব্যবহারকারী বর্তমানে যে অ্যাকাউন্টে সাইন-ইন করে আছেন তার পরিবর্তে ভুলবশত অন্য অ্যাকাউন্ট বেছে নিতে পারেন।

যেখানে ব্যবহারকারীর পরিচয় আগে থেকেই জানা আছে, সেখানে স্টেপ-আপ আবার যাচাইকরণের জন্য, সাইন-ইন করা ব্যবহারকারীর রেজিস্টার করা ক্রেডেনশিয়াল দিয়ে allowCredentials পূরণ করা একটি সাধারণ মোডাল WebAuthn অনুরোধ (navigator.credentials.get() uiMode: 'immediate' ছাড়া) ব্যবহার করুন অথবা ব্যবহারকারীকে আপনার সাধারণ আবার যাচাইকরণ চ্যালেঞ্জ স্ক্রিনে ডাইরেক্ট করুন।

উপসংহার

সাইন-ইন পৃষ্ঠায় অপ্রয়োজনীয়ভাবে রিডাইরেক্ট করা এড়াতে এবং দ্রুত সাইন-ইন করার জন্য ইমিডিয়েট UI মোড হল একটি শক্তিশালী UX টুল। এটি কনটেক্সট বজায় রেখেই সাইন-ইন প্রসেস সম্পূর্ণ করে। ব্যবহারকারীর স্পষ্ট উদ্দেশ্য—যেমন, হেডার সাইন-ইন লিঙ্ক, চেক-আউট বোতাম, মাইক্রো-অ্যাকশন ও নিবন্ধের পেওয়াল—পৃষ্ঠা নেভিগেশন হওয়ার ঠিক আগে ইন্টারসেপ্ট করে, আপনি ড্রপ-অফ প্রতিরোধ করতে এবং একটি নিরবচ্ছিন্ন ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে পারবেন।

একই সাথে, মনে রাখবেন যে Immediate UI মোড হল পৃষ্ঠা নেভিগেশনের আগে আনঅথেন্টিকেট করা ব্যবহারকারীদের জন্য কঠোরভাবে একটি প্রগ্রেসিভ এনহ্যান্সমেন্ট। আপনার গন্তব্য সাইন-ইন পৃষ্ঠার বোতামে এটি প্রয়োগ করা এড়িয়ে চলুন যাতে আপনার ডিজাইন ক্রস-ডিভাইস (QR কোড) ব্যবহারকারীদের জন্য খোলা ও অ্যাক্সেসযোগ্য থাকে এবং allowCredentials-এর প্রয়োজন হয় এমন পুনরায় যাচাইকরণ ফ্লোর জন্য এটি ব্যবহার করা এড়িয়ে চলুন।

পাসকী প্রয়োগ করা এবং লেটেস্ট ওয়েব আইডেন্টিটি ফিচার সম্পর্কে আরও জানতে, নিম্নলিখিত রিসোর্স দেখুন: