বিকল্প ইন-অ্যাপ বিলিং সিস্টেমের জন্য অন্তর্বর্তীকালীন UX নির্দেশিকা

সংক্ষিপ্ত বিবরণ

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

তথ্য স্ক্রিন এবং বিলিং পছন্দ স্ক্রিনের UI নির্দেশিকা

ব্যবহারকারীদের জন্য তথ্য

তথ্য স্ক্রিনটি ব্যবহারকারীদের পরিবর্তনের প্রেক্ষাপট বুঝতে সাহায্য করে এবং একটি সুচিন্তিত সিদ্ধান্ত নেওয়ার জন্য আরও তথ্য প্রদান করে।

কখন প্রদর্শন করতে হবে

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

কখন মূল্য প্রদর্শন করতে হবে

ব্যবহারকারীদের তথ্য স্ক্রিন বা বিলিং পছন্দের স্ক্রিন দেখানোর আগেই ক্রয়মূল্যটি তাদের কাছে দৃশ্যমান ও সুস্পষ্ট হওয়া উচিত।

কীভাবে প্রদর্শন করবেন

তথ্য স্ক্রিনটি একটি মোডাল বটম শীটে প্রদর্শিত হওয়া উচিত। একটি মোডাল বটম শীট অনেকটা মোডাল ডায়ালগের মতো, যা স্ক্রিনের নিচ থেকে অ্যানিমেট করে উপরে উঠে আসে এবং সেখানেই স্থির থাকে। এটি নিচের স্ক্রিনের সমস্ত UI এলিমেন্টের উপরে অবস্থান করে। নিচের স্ক্রিনটি একটি কালো স্ক্রিমের আড়ালে ঢাকা থাকে, যা নির্দেশ করে যে এটি ব্যবহারকারীর ইন্টারঅ্যাকশনে সাড়া দেবে না।

মোডাল বটম শীটের ডিজাইনবাস্তবায়ন সম্পর্কে আরও তথ্যের জন্য গুগল ম্যাটেরিয়াল ডিজাইন দেখুন।

ব্যবহারকারীর কার্যকলাপ

যখন কোনো ব্যবহারকারী আপনার অ্যাপের কোনো বাটন বা অন্য কোনো UI এলিমেন্টে ট্যাপ করে কেনাকাটা শুরু করেন, তখন বটম শীটটি চালু হওয়া উচিত। ব্যবহারকারী ইনফরমেশন স্ক্রিন থেকে তিনটি সম্ভাব্য পদক্ষেপ নিতে পারেন:

চালিয়ে যান

“চালিয়ে যান” বোতামে ট্যাপ করলে তথ্য স্ক্রিনটি বন্ধ হয়ে যায় এবং বিলিং পছন্দের স্ক্রিনটি চালু হয়।

আরও জানুন

“আরও জানুন” বোতামটি ট্যাপ করলে ওয়েব ব্রাউজারে গুগল হেল্প সেন্টারের একটি আর্টিকেল চালু হয়।

খারিজ করুন

যদি ব্যবহারকারীরা বটম শীটটি বাতিল করে মূল স্ক্রিনে ফিরে যেতে চান, তাহলে তারা নিম্নলিখিত উপায়ে বটম শীটটি বাতিল করতে পারেন:

  • নিচের শিট কন্টেইনারের বাইরের দিকে টোকা দেওয়া
  • অ্যান্ড্রয়েড সিস্টেমের 'ব্যাক' বোতামে ট্যাপ করা

তথ্য স্ক্রিনটি বাতিল করার পর অথবা ব্যবহারকারী “চালিয়ে যান” ট্যাপ করার পর, সেটি পুনরায় প্রদর্শন করার প্রয়োজন নেই।

উদাহরণ: ব্যবহারকারী কেনাকাটা শুরু করার আগেই ক্রয়মূল্য স্পষ্টভাবে প্রদর্শিত হয়। “এখনই যোগ দিন” বোতামে ট্যাপ করলে তথ্য স্ক্রিনটি চালু হয়।

ব্যবহারকারীর তথ্য স্ক্রিন

নকশার স্পেসিফিকেশন

তথ্য স্ক্রিনটি তিনটি অংশে বিভক্ত: শিরোনাম, বার্তা এবং বাটন। এই তিনটি অংশই আবশ্যক এবং এগুলোতে অবশ্যই এই নির্দেশিকায় সংজ্ঞায়িত সঠিক টেক্সট এবং UI উপাদান থাকতে হবে। এই স্ক্রিনে কোনো অতিরিক্ত টেক্সট বা ছবি যোগ করবেন না, তবে আপনি অন্যান্য স্ক্রিনে অতিরিক্ত টেক্সট এবং ছবি যোগ করতে পারেন।

চেকআউট বিকল্প স্ক্রিন যেখানে প্রয়োজনীয় উপাদানগুলির অবস্থান দেখানো হচ্ছে

  1. শিরোনাম
  2. বার্তা
  3. বোতাম
  4. নিচের চাদর
  5. পটভূমির স্ক্রিম

শিরোনাম

পাঠ্য আপনার চেকআউট বিকল্পগুলিতে পরিবর্তন
ফন্ট রোবোটো (সকল ফন্টে প্রযোজ্য)
ফন্টের আকার ১৮এসপি
ফন্টের রঙ #২০২১২৪

বার্তা

পাঠ্য ১ দক্ষিণ কোরিয়ার সাম্প্রতিক নিয়ন্ত্রক পরিবর্তনের কারণে, এখন চেকআউটের সময় আপনার কাছে আরও বিকল্প রয়েছে। আপনার পছন্দই নির্ধারণ করবে:
  • কে আপনার কেনাকাটা সুরক্ষিত করে, আপনার অর্থপ্রদান প্রক্রিয়া করে এবং যেকোনো অর্থপ্রদানের তথ্য সংরক্ষণ করে।
  • ক্রয়ের জন্য গ্রাহক সহায়তা কে প্রদান করে
  • আপনি কোন ধরনের অর্থপ্রদান ব্যবহার করতে পারেন
  • আপনার ক্রয়ের সাথে কোন সুবিধাগুলো পাওয়া যাবে
ফন্টের আকার ১৪এসপি
লাইনের উচ্চতা ২০
ফন্টের রঙ #5F6368
পাঠ্য ২ শুধুমাত্র গুগল প্লে-এর মাধ্যমে করা কেনাকাটাই গুগল দ্বারা সুরক্ষিত। প্লে গিফট কার্ড, প্লে পয়েন্টস, ক্রয় নিয়ন্ত্রণ এবং সাবস্ক্রিপশন ব্যবস্থাপনার মতো প্লে-এর ফিচারগুলো কেবল তখনই পাওয়া যায়, যখন আপনি চেকআউটের সময় গুগল প্লে বেছে নেন।
ফন্টের আকার ১২এসপি
লাইনের উচ্চতা ১৬
ফন্টের রঙ #5F6368

বোতাম ১

পাঠ্য আরও জানুন
পাঠ্য সারিবদ্ধকরণ কেন্দ্রিক
ফন্টের আকার ১৪এসপি
ফন্টের ওজন মাঝারি
ফন্টের রঙ #01875F
পটভূমির রঙ #FFFFFF
মাত্রা উচ্চতা: ৩৬, প্রস্থ: কন্টেইনার অনুযায়ী পরিবর্তনযোগ্য
কোণার ব্যাসার্ধ ৪ডিপি
রূপরেখা 1dp, #DADCE0
লিঙ্ক গুগল প্লে হেল্প আর্টিকেলের লিঙ্ক

বোতাম ২

পাঠ্য চালিয়ে যান
পাঠ্য সারিবদ্ধকরণ কেন্দ্রিক
ফন্টের আকার ১৪এসপি
ফন্টের ওজন মাঝারি
ফন্টের রঙ #FFFFFF
পটভূমির রঙ #01875F
মাত্রা উচ্চতা: ৩৬, প্রস্থ: কন্টেইনার অনুযায়ী পরিবর্তনযোগ্য
কোণার ব্যাসার্ধ ৪ডিপি
লিঙ্ক বিলিং পছন্দের স্ক্রিনের লিঙ্ক

নিচের চাদর

মাত্রা উচ্চতা: পরিবর্তনশীল, প্রস্থ: ১০০%
কোণার ব্যাসার্ধ ৮ডিপি, ৮ডিপি, ০, ০
পটভূমি #FFFFFF
ভিতরের প্যাডিং বাম: ২৪ডিপি, ডান: ২৪ডিপি, উপরে: ৩২ডিপি, নিচে: ২৪ডিপি
উচ্চতা ৮ডিপি

ভূদৃশ্য

ল্যান্ডস্কেপ ভিউতে বটম শিটটি পোর্ট্রেট ভিউয়ের চেয়ে চওড়া, কিন্তু এছাড়া এর ডিজাইন ও কার্যকারিতা একই থাকে।

ল্যান্ডস্কেপ মোডে চেকআউট বিকল্প স্ক্রিন

নিচের চাদর প্রস্থ: সর্বোচ্চ ৫০০ডিপি, ভেতরের প্যাডিং: ২৪ডিপি
শিরোনাম পোর্ট্রেট ভিউয়ের মতোই
বার্তা পোর্ট্রেট ভিউয়ের মতোই
বোতাম উচ্চতা: ৩৬, প্রস্থ: কন্টেইনার অনুযায়ী পরিবর্তনযোগ্য

বিলিং পছন্দের স্ক্রিন

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

কখন প্রদর্শন করতে হবে

যদি ব্যবহারকারী ইতিমধ্যেই তথ্য স্ক্রিনটি দেখে থাকেন, তাহলে কেনাকাটা শুরু করার জন্য সুস্পষ্ট পদক্ষেপ নেওয়ার ঠিক পরেই বিলিং পছন্দের স্ক্রিনটি প্রদর্শিত হওয়া উচিত।

কীভাবে প্রদর্শন করবেন

বিলিং পছন্দের স্ক্রিনটি একটি মোডাল বটম শীটে প্রদর্শিত হওয়া উচিত এবং তথ্য স্ক্রিনের মতোই একই স্পেসিফিকেশন অনুসরণ করা উচিত।

সমান চাক্ষুষ উপস্থাপনা

অতিরিক্ত ইন-অ্যাপ বিলিং পরিষেবা এবং গুগল প্লে-এর বিলিং পরিষেবার বাটনগুলো ন্যায্য ও সমানভাবে উপস্থাপন করা উচিত। এর মধ্যে অন্তর্ভুক্ত কিন্তু সীমাবদ্ধ নয়: বাটনের সমান আকার, লেখার আকার/শৈলী, ট্যাপ টার্গেট এবং আইকনের আকার। অনুগ্রহ করে এই নির্দেশিকায় সংজ্ঞায়িত নয় এমন কোনো অতিরিক্ত লেখা, ছবি বা শৈলীর পরিবর্তন যোগ করবেন না।

উদাহরণ: “এখনই যোগ দিন” বোতামে ট্যাপ করলে বিলিং পছন্দের স্ক্রিনটি চালু হয়।

বিলিং পছন্দের স্ক্রিন যেখানে প্রতিটি বিলিং বিকল্পের সমান প্রতিনিধিত্ব রয়েছে

নকশার স্পেসিফিকেশন

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

গুগল প্লে-এর ভিজ্যুয়াল অ্যাসেট এবং পেমেন্ট আইকনগুলো নিচে দেওয়া লিঙ্কগুলোর মাধ্যমে পাওয়া যাবে।

উদাহরণস্বরূপ: পোর্ট্রেট ভিউতে, বটম শীটটি স্ক্রিনের মোট প্রস্থের ১০০% জুড়ে থাকবে।

প্রয়োজনীয় উপাদানগুলির অবস্থান দেখানো বটম শীট

  1. শিরোনাম
  2. বর্ণনা
  3. ডেভেলপার বোতাম
  4. গুগল প্লে বোতাম
  5. নিচের চাদর
  6. পটভূমির স্ক্রিম

শিরোনাম

পাঠ্য কীভাবে চেক আউট করবেন তা বেছে নিন
ফন্ট রোবোটো (সকল ফন্টে প্রযোজ্য)
ফন্টের আকার ১৮এসপি
ফন্টের রঙ #২০২১২৪

বর্ণনা

পাঠ্য আপনার পেমেন্ট সুরক্ষিত ও প্রক্রিয়া করবে এবং গ্রাহক পরিষেবা প্রদান করবে এমন কাউকে বেছে নিন। সুবিধাসমূহ এবং উপলব্ধ অর্থপ্রদানের পদ্ধতি ভিন্ন হতে পারে।
ফন্টের আকার ১৪এসপি
ফন্টের রঙ #5F6368
টেক্সট লিঙ্ক আরও জানুন
লিঙ্ক গন্তব্য লিঙ্ক
ফন্টের আকার ১৪এসপি
সাজসজ্জা আন্ডারলাইন
ফন্টের রঙ #5F6368

ডেভেলপার বোতাম

ডেভেলপার বাটনের জন্য UI প্রয়োজনীয়তা

  1. অ্যাপ আইকন
  2. অ্যাপের নাম
  3. পেমেন্ট পদ্ধতির আইকন

ডেভেলপার বোতামের জন্য অতিরিক্ত বিকল্প

    পেমেন্ট পদ্ধতির আইকন

  1. পেমেন্ট পদ্ধতির আইকনের সর্বোচ্চ সংখ্যা
  2. আইকনের পরিবর্তে পেমেন্ট পদ্ধতির নাম
  3. স্ক্রিনের প্রস্থ অনুযায়ী স্কেল করুন

  4. ৩৬০ডিপি প্রস্থ
  5. ৪৮০ডিপি প্রস্থ

বোতাম ধারক

রূপরেখা ১ পয়েন্ট, #DADCE0
কোণার ব্যাসার্ধ ৪ডিপি
ভিতরের প্যাডিং ১৬ডিপি, ১৬ডিপি, ১৬ডিপি, ১৬ডিপি,

অ্যাপ আইকন

মাত্রা উচ্চতা: ২৪ দশমিক স্থান, প্রস্থ: পরিবর্তনশীল

শিরোনাম

পাঠ্য {অ্যাপের নাম}
ফন্টের আকার ১৪এসপি
ফন্টের রঙ #২০২১২৪

অর্থপ্রদানের পদ্ধতি

মাত্রা ৩২ডিপি X ২০ডিপি
কোণার ব্যাসার্ধ
পরিমাণ সর্বোচ্চ ৫টি, ৫টির বেশি উপলব্ধ থাকলে অতিরিক্ত সূচক প্রদর্শন করুন।
অতিরিক্ত সূচক আরও (সংকীর্ণ স্ক্রিনে পরবর্তী লাইনে চলে যায়)
ফন্টের আকার ১২এসপি
ফন্টের রঙ #5F6368

গুগল প্লে বোতাম

গুগল প্লে বোতাম

  1. আইকন
  2. শিরোনাম
  3. গৃহীত অর্থপ্রদানের পদ্ধতি
  4. অতিরিক্ত সূচক

বোতাম ধারক

রূপরেখা ১ পয়েন্ট, #DADCE0
কোণার ব্যাসার্ধ ৪ডিপি
ভিতরের প্যাডিং ১৬ডিপি, ১৬ডিপি, ১৬ডিপি, ১৬ডিপি,

অ্যাপ আইকন

ছবির সম্পদ গুগল প্লে প্রিজম
মাত্রা ২৪ডিপি X ২৪ডিপি

শিরোনাম

পাঠ্য গুগল প্লে
ফন্টের আকার ১৪এসপি
ফন্টের রঙ #২০২১২৪

অর্থপ্রদানের পদ্ধতি

ছবির সম্পদ লিঙ্ক
অতিরিক্ত সূচক আরও
ফন্টের আকার ১২এসপি
ফন্টের রঙ #5F6368

ভূদৃশ্য

উদাহরণস্বরূপ: ল্যান্ডস্কেপ ভিউতে বটম শিটটি পোর্ট্রেট ভিউয়ের চেয়ে চওড়া হয়, কিন্তু এছাড়া এটি একই ডিজাইন স্পেসিফিকেশন এবং কার্যকারিতা অনুসরণ করে।

ল্যান্ডস্কেপ মোডে বটম শীট

নিচের চাদর প্রস্থ: সর্বোচ্চ ৫০০ডিপি, ভেতরের প্যাডিং: ২৪ডিপি
শিরোনাম পোর্ট্রেট ভিউয়ের মতোই
বার্তা পোর্ট্রেট ভিউয়ের মতোই
বোতাম পোর্ট্রেট ভিউয়ের মতোই