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

এক নজরে

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

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

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

তথ্য স্ক্রিন ব্যবহারকারীদের পরিবর্তনের প্রসঙ্গ বুঝতে সাহায্য করে এবং তাদের একটি তথ্যপূর্ণ পছন্দ করতে সাহায্য করার জন্য আরও তথ্য দেয়।

কখন দেখাতে হবে

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

দাম কখন দেখাতে হবে

ব্যবহারকারীকে তথ্য স্ক্রিন বা বিলিং সংক্রান্ত পছন্দের স্ক্রিন দেখানোর আগে কেনাকাটার দাম স্পষ্টভাবে দেখাতে হবে।

কীভাবে ডিসপ্লে করতে হয়

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

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

ব্যবহারকারীর অ্যাকশন

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

চালিয়ে যান

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

আরও জানুন

"আরও জানুন" বোতামে ট্যাপ করলে ওয়েব ব্রাউজারে Google সহায়তা কেন্দ্রের একটি নিবন্ধ খুলে যায়।

খারিজ করুন

ব্যবহারকারী স্ক্রিনের নিচে অ্যাটাচ করা শিট বাতিল করে আগের স্ক্রিনে ফিরে যেতে চাইলে, তিনি স্ক্রিনের নিচে অ্যাটাচ করা শিট বাতিল করতে পারবেন:

  • স্ক্রিনের নিচে অ্যাটাচ করা শিট কন্টেনারের বাইরে ট্যাপ করা
  • Android সিস্টেমের "ফিরে যান" বোতামে ট্যাপ করা

তথ্য স্ক্রিন বাতিল করার পরে বা ব্যবহারকারী "চালিয়ে যান" বিকল্পে ট্যাপ করার পরে, এটি আবার দেখানোর প্রয়োজন নেই।

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

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

ডিজাইন স্পেসিফিকেশন

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

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

  1. শীর্ষক
  2. মেসেজ
  3. বোতাম
  4. স্ক্রিনের নিচে অ্যাটাচ করা শিট
  5. ব্যাকগ্রাউন্ড স্ক্রিম

শীর্ষক

টেক্সট চেক-আউট করার বিকল্পে করা পরিবর্তন
ফন্ট Roboto (সব ফন্টে প্রয়োগ করুন)
ফন্ট সাইজ 18sp
ফন্টের রঙ #202124

মেসেজ

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

বোতাম ১

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

বোতাম ২

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

স্ক্রিনের নিচে অ্যাটাচ করা শিট

ডাইমেনশন উচ্চতা: পরিবর্তনশীল, প্রস্থ: ১০০%
কোণার ব্যাসার্ধ 8dp, 8dp, 0, 0
ব্যাকগ্রাউন্ড #FFFFFF
ইনার প্যাডিং বাঁদিকে:২৪ডিপি, ডানদিকে:২৪ডিপি, উপরে:৩২ডিপি, নিচে: ২৪ডিপি
উচ্চতা ৮ডিপি

ল্যান্ডস্কেপ

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

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

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

বিলিংয়ের বিভিন্ন বিকল্পের স্ক্রিন

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

কখন দেখাতে হবে

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

কীভাবে ডিসপ্লে করতে হয়

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

সমান ভিজ্যুয়াল উপস্থাপনা

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

যেমন: "এখনই যোগ দিন" বোতামে ট্যাপ করলে বিলিংয়ের বিকল্প সংক্রান্ত স্ক্রিন ট্রিগার হয়।

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

ডিজাইন স্পেসিফিকেশন

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

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

যেমন: পোর্ট্রেট ভিউতে, স্ক্রিনের নিচে অ্যাটাচ করা শিটটি স্ক্রিনের মোট প্রস্থের ১০০% জুড়ে থাকা উচিত।

স্ক্রিনের নিচে অ্যাটাচ করা শিটে প্রয়োজনীয় এলিমেন্টের পজিশন দেখানো হচ্ছে

  1. শীর্ষক
  2. বর্ণনা
  3. ডেভেলপার বোতাম
  4. Google Play বোতাম
  5. স্ক্রিনের নিচে অ্যাটাচ করা শিট
  6. ব্যাকগ্রাউন্ড স্ক্রিম

শীর্ষক

টেক্সট কোন পদ্ধতি ব্যবহার করে চেক-আউট করবেন তা বেছে নিন
ফন্ট Roboto (সব ফন্টে প্রয়োগ করুন)
ফন্ট সাইজ 18sp
ফন্টের রঙ #202124

বর্ণনা

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

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

ডেভেলপার বোতামের জন্য UI সংক্রান্ত প্রয়োজনীয়তা

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

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

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

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

  4. ৩৬০ডিপি প্রস্থ
  5. 480dp প্রস্থ

বোতাম কন্টেনার

আউটলাইন 1pt, #DADCE0
কোণার ব্যাসার্ধ ৪ডিপি
ইনার প্যাডিং ১৬ডিপি, ১৬ডিপি, ১৬ডিপি, ১৬ডিপি,

অ্যাপ আইকন

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

শীর্ষক

টেক্সট {App Name}
ফন্ট সাইজ ১৪sp
ফন্টের রঙ #202124

পেমেন্ট পদ্ধতি

ডাইমেনশন ৩২ডিপি X ২০ডিপি
কোণার ব্যাসার্ধ 2
পরিমাণ সর্বাধিক ৫টি, >৫টি উপলভ্য থাকলে অতিরিক্ত ইন্ডিকেটর দেখান
অতিরিক্ত ইন্ডিকেটর + more (wraps to next line on narrow screens)
ফন্ট সাইজ 12sp
ফন্টের রঙ #5F6368

Google Play বোতাম

Google Play বোতাম

  1. আইকন
  2. শীর্ষক
  3. গৃহীত পেমেন্ট পদ্ধতি
  4. অতিরিক্ত ইন্ডিকেটর

বোতাম কন্টেনার

আউটলাইন 1pt, #DADCE0
কোণার ব্যাসার্ধ ৪ডিপি
ইনার প্যাডিং ১৬ডিপি, ১৬ডিপি, ১৬ডিপি, ১৬ডিপি,

অ্যাপ আইকন

ছবি অ্যাসেট Google Play prism
ডাইমেনশন ২৪ডিপি X ২৪ডিপি

শীর্ষক

টেক্সট Google Play
ফন্ট সাইজ ১৪sp
ফন্টের রঙ #202124

পেমেন্ট পদ্ধতি

ছবি অ্যাসেট লিঙ্ক
অতিরিক্ত ইন্ডিকেটর +আরও
ফন্ট সাইজ 12sp
ফন্টের রঙ #5F6368

ল্যান্ডস্কেপ

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

ল্যান্ডস্কেপ মোডে স্ক্রিনের নিচে অ্যাটাচ করা শিট

স্ক্রিনের নিচে অ্যাটাচ করা শিট প্রস্থ: সর্বাধিক ৫০০ডিপি, ইনার প্যাডিং: ২৪ডিপি
শীর্ষক পোর্ট্রেট ভিউয়ের মতো একই
মেসেজ পোর্ট্রেট ভিউয়ের মতো একই
বোতাম পোর্ট্রেট ভিউয়ের মতো একই