এডিটর অ্যাড-অন অ্যাপস স্ক্রিপ্টের HTML পরিষেবা ব্যবহার করে ব্যবহারকারীর ইন্টারফেস (মেনু, সাইডবার এবং ডায়ালগ) তৈরি করে। যেহেতু ইন্টারফেস এইচটিএমএল এবং সিএসএসে তৈরি করা হয়েছে, সেগুলি অত্যন্ত কাস্টমাইজযোগ্য। যাইহোক, আপনার অ্যাড-অন ইন্টারফেস তৈরি করার সময় আপনাকে একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য এটি ডিজাইন করা উচিত।
সেরা অ্যাড-অনগুলি পরিচিত নিয়ন্ত্রণ এবং আচরণ ব্যবহার করে প্রতিটি সম্পাদককে স্বাভাবিকভাবে প্রসারিত করে। একটি নতুন অ্যাড-অন তৈরি করার সময়:
- আপনার HTML পরিষেবা পৃষ্ঠাগুলিতে অ্যাড-অন CSS প্যাকেজ ব্যবহার করুন।
- ডিজাইন সম্পর্কে সন্দেহ হলে, সম্পাদকে একটি অনুরূপ ডায়ালগ বা সাইডবার খুঁজুন এবং এটির সাথে মিল করুন, অথবা একটি অ্যাড-অন কুইকস্টার্ট দেখুন।
- একটি নির্বিঘ্ন অভিজ্ঞতা তৈরি করতে এই শৈলী নির্দেশিকা অনুসরণ করুন.
পাঠ্য
অ্যাড-অন নাম
আপনি যখন এটি প্রকাশ করবেন তখন আপনাকে অবশ্যই আপনার অ্যাড-অনের নাম সেট করতে হবে৷ নামটি অনেক জায়গায় দেখা যায়, যেমন অ্যাড-অন স্টোর এবং মেনুতে।
- শিরোনাম ক্ষেত্রে ব্যবহার করুন.
- যতিচিহ্ন এড়িয়ে চলুন, বিশেষ করে বন্ধনী, আপনার ব্র্যান্ডের অংশ না হলে।
- এটি সংক্ষিপ্ত রাখুন—30 বা তার কম অক্ষর সর্বোত্তম। দীর্ঘ নাম স্বয়ংক্রিয়ভাবে কাটা হতে পারে.
- অ্যাড-অনটির জন্য Google পণ্যটির নাম অন্তর্ভুক্ত করবেন না (বা Google শব্দটি ব্যবহার করুন)।
- সংস্করণ তথ্য ছেড়ে দিন।
- নিশ্চিত করুন যে অ্যাড-অনের প্রকাশিত নামটি স্ক্রিপ্ট প্রকল্পের ফাইলের নামের মতোই। প্রকল্পের নাম অনুমোদন ডায়ালগে প্রদর্শিত হবে।
| করবেন না | করবেন |
|---|---|
 |  |
লিখন শৈলী
আপনার বেশি লেখার দরকার নেই। বেশিরভাগ ক্রিয়াগুলি আইকনোগ্রাফি, লেআউট এবং ছোট লেবেলের মাধ্যমে পরিষ্কার করা উচিত। আপনি যদি আপনার অ্যাড-অনের একটি অংশ খুঁজে পান যে ছোট লেবেলগুলি সরবরাহ করতে পারে তার চেয়ে আরও বিস্তৃত ব্যাখ্যার প্রয়োজন, আপনার অ্যাড-অন বর্ণনা করে একটি পৃথক ওয়েব পৃষ্ঠা তৈরি করা এবং এটিতে লিঙ্ক করা একটি সর্বোত্তম অনুশীলন৷
UI পাঠ্য লেখার সময়:
- বাক্যের ক্ষেত্রে ব্যবহার করুন (বিশেষ করে বোতাম, লেবেল এবং মেনু আইটেমগুলির জন্য)।
- পরিভাষা বা সংক্ষিপ্ত শব্দ ছাড়া সংক্ষিপ্ত, সহজ পাঠ্য পছন্দ করুন।
| করবেন না | করবেন |
|---|---|
পোস্ট-ইনস্টল টিপ
কেউ আপনার অ্যাড-অন ইনস্টল করার পরেই আপনার পোস্ট-ইনস্টল টিপ পপ আপ হয় এবং সাহায্যে দেখায়। ব্যবহারকারীদের দ্রুত শুরু করতে সাহায্য করার জন্য আপনার কাছে কয়েকটি বাক্য রয়েছে।
- একটি কর্ম শব্দ দিয়ে শুরু করুন।
- আপনার অ্যাড-অন ব্যবহার করার প্রথম ধাপ বর্ণনা করুন।
- আপনার যদি একটি প্রধান UI থাকে, যেমন একটি সাইডবার, এটি কীভাবে খুলবেন তা ব্যাখ্যা করুন।
- এখানে আপনার অ্যাড-অন প্রচার করবেন না—এটি ইতিমধ্যেই ইনস্টল করা আছে।
| করবেন না | করবেন |
|---|---|
 |  |
মেনু আইটেম
নিয়মিত অ্যাপস স্ক্রিপ্ট প্রকল্পের বিপরীতে, অ্যাড-অনগুলি স্ক্রিপ্ট সম্পাদক বা স্ক্রিপ্ট ম্যানেজারে উপস্থিত হয় না; ব্যবহারকারীরা সরাসরি অ্যাড-অন স্ক্রিপ্ট চালাতে পারে না। পরিবর্তে, প্রতিটি অ্যাড-অন অ্যাড-অন মেনুতে একটি স্থান পায়। মেনু (এবং সম্ভবত একটি ডায়ালগ বা সাইডবার ) ব্যবহারকারীদের অ্যাড-অনের সাথে ইন্টারঅ্যাক্ট করতে দেয়।
- ব্যবহারকারীরা কীভাবে আপনার অ্যাড-অন নিয়ন্ত্রণ করেন তার একটি মূল অংশ মেনু, তাই এর গঠন এবং শব্দচয়ন সাবধানে ডিজাইন করুন।
- মেনু আইটেমগুলি এড়িয়ে চলুন যেগুলি কেবল আপনার অ্যাড-অনের নামের পুনরাবৃত্তি করে৷ পরিবর্তে, একটি কর্ম শব্দ দিয়ে শুরু করুন।
- যদি আপনার প্রধান মেনু আইটেম একটি ওয়ার্কফ্লো শুরু করে এবং এটি কী করে তা বর্ণনা করে এমন কোনো একক ক্রিয়া না থাকলে, এটিকে "স্টার্ট" বলুন। এই প্যাটার্নটি ডক্স অ্যাড-অন কুইকস্টার্টে ব্যবহৃত হয়।
- আপনার মেনুতে ছয়টির বেশি আইটেম না থাকলে সাব-মেনু ব্যবহার না করার চেষ্টা করুন। তারা চটকদার এবং নির্বাচন করা কঠিন হতে পারে।
- টাস্কটি বর্ণনা করুন, মেনু আইটেমটি যে UI উপাদানটি প্রদর্শন করে তা নয়।
| করবেন না | করবেন |
|---|---|
 |  |
ভুল বার্তা
যখন কিছু ভুল হয়ে যায়, তখন সাধারণ ভাষা ব্যবহার করা গুরুত্বপূর্ণ। ব্যবহারকারীর দৃষ্টিকোণ থেকে সমস্যাটি ব্যাখ্যা করুন এবং কীভাবে এটি ঠিক করা যায় তার পরামর্শ দিন।
- ব্যবহারকারীকে আপনার কোড থ্রো করা কোনো ব্যতিক্রম দেখতে দেবেন না। পরিবর্তে, ব্যতিক্রমগুলিকে আটকাতে
try...catchস্টেটমেন্টগুলি ব্যবহার করুন, তারপর অ্যাড-অন সিএসএস প্যাকেজ বা একটি সতর্কতা ডায়ালগ থেকেerrorশ্রেণিতে স্টাইল করা ইনলাইন পাঠ্য সহ একটি ব্যবহারকারীর জন্য উপযুক্ত ত্রুটি বার্তা প্রদর্শন করুন৷ - আপনি প্রকাশ করার আগে, আপনার অ্যাড-অন জাভাস্ক্রিপ্ট কনসোলে ডিবাগ তথ্য লগ না করে দেখে নিন; পরিবর্তে Stackdriver লগিং ব্যবহার করুন।
| করবেন না | করবেন |
|---|---|
 |  |
সাহায্য কন্টেন্ট
প্রতিটি অ্যাড-অনের মেনুতে একটি স্বয়ংক্রিয় সহায়তা ডায়ালগ অন্তর্ভুক্ত থাকে। আপনি প্রকাশ করার সময় যদি আপনি একটি সহায়তা URL প্রদান করেন, "আরো জানুন" বোতামটি সেই পৃষ্ঠায় লিঙ্ক করে। আপনার অ্যাড-অন স্ব-ব্যাখ্যামূলক না হলে, দয়া করে একটি পৃষ্ঠা প্রদান করুন যা ব্যাখ্যা করে যে এটি কীভাবে ব্যবহার করতে হয়।
- যখন সম্ভব, একটি বুলেট বা সংখ্যাযুক্ত তালিকায় নির্দেশাবলী দেখান। নামযুক্ত UI উপাদানগুলির স্পষ্ট উল্লেখ সহ ব্যবহারকারীদের শেষ ফলাফলে নিয়ে যান।
- নিশ্চিত করুন যে আপনার নির্দেশাবলী স্পষ্টভাবে কোনো প্রয়োজনীয়তা ব্যাখ্যা করে, যেমন একটি নির্দিষ্ট উপায়ে একটি স্প্রেডশীট সেট আপ করা।
- আপনার প্রধান ইউজার ইন্টারফেস থেকেও আপনার সাহায্য সামগ্রীর সাথে লিঙ্ক করতে দ্বিধা বোধ করুন৷ যদি আপনার অ্যাড-অন একটি নতুন নথি তৈরি করে, আপনি নথির মূল অংশে নির্দেশাবলীও প্রদর্শন করতে পারেন।
কাস্টম ইউজার ইন্টারফেস
কিছু সাধারণ সম্পাদক অ্যাড-অনগুলি সম্পূর্ণরূপে তাদের মেনু দ্বারা নিয়ন্ত্রিত হতে পারে, তবে বেশিরভাগই কাস্টম সামগ্রী সহ একটি সাইডবার বা ডায়ালগ প্রদর্শন করে।
- সাইডবারগুলি ক্রমাগত সরঞ্জামগুলির জন্য সেরা যা লোকেরা তাদের নথি বা স্প্রেডশীটের বিষয়বস্তু উল্লেখ করার সময় বারবার ব্যবহার করতে পারে।
- ডায়ালগগুলি একক-ব্যবহারের সরঞ্জাম, সেটিংস পৃষ্ঠা এবং গুরুত্বপূর্ণ বার্তাগুলির জন্য সেরা৷
UI পাঠ্য
যেকোন ডায়ালগ বা সাইডবারে, ধরে নিন লোকেরা শুধুমাত্র শিরোনাম এবং বোতাম লেবেল পড়ে। তারা এখনও আপনার ইন্টারফেস কি করে তা খুঁজে বের করতে পারে এবং একটি ভাল পছন্দ করতে পারে?
- একটি শিরোনাম এবং বোতাম লেবেল ব্যবহার করুন যা তাদের নিজস্বভাবে দাঁড়ায়।
- বর্ণনামূলক পাঠ্যের দীর্ঘ ব্লকগুলি এড়িয়ে চলুন।
ডায়ালগ
ডায়ালগগুলি এমন সরঞ্জামগুলির জন্য দুর্দান্ত যা লোকেরা একবার ব্যবহার করে, তারপরে এগিয়ে যান৷ উদাহরণস্বরূপ, যদি আপনার অ্যাড-অন লোকেদের একটি গ্রাফিক সন্নিবেশ করতে দেয়, তাহলে আপনি কি সন্নিবেশ করবেন তার পছন্দগুলির সাথে একটি ডায়ালগ প্রদর্শন করতে পারেন— তারপর গ্রাফিক ঢোকানো হলে ডায়ালগটি বন্ধ করুন৷ ডায়ালগগুলি আপনার অ্যাড-অনের সেটিংস প্রদর্শনের জন্য বা একটি গুরুত্বপূর্ণ বার্তা যোগাযোগের জন্যও সহায়ক।
- অন্য ডায়ালগ থেকে একটি ডায়ালগ (একটি সতর্কতা বা প্রম্পট সহ) খুলবেন না - শুধুমাত্র একবারে একটি প্রদর্শন করুন৷
- ডায়ালগ শিরোনামের জন্য, সবচেয়ে গুরুত্বপূর্ণ শব্দের সাথে অগ্রণী একটি শব্দ বা ছোট বাক্যাংশ ব্যবহার করুন।
- বোতাম লেবেলগুলি ডায়ালগ শিরোনামের সাথে সম্পর্কিত হওয়া উচিত৷
- দুটি বোতাম পছন্দ করুন, সাধারণত একটি প্রাথমিক ক্রিয়া এবং "বাতিল করুন"। বিশেষ ক্ষেত্রে যেগুলির জন্য একটি তৃতীয় বোতাম প্রয়োজন, নীচে-ডান কোণে বিবেচনা করুন।
- ডায়ালগের নীচে-বাম কোণায় বোতামগুলি রাখুন৷ নীল প্রাইমারি বোতামটি বাম দিকে থাকা উচিত, ডানদিকে যেকোনো ধূসর গৌণ বোতাম সহ।
| করবেন না | করবেন |
|---|---|
 |  |
সাইডবার
সাইডবারগুলি লোকেদের পছন্দ করার সময় তাদের নথি, স্প্রেডশীট, উপস্থাপনা বা ফর্মের দিকে ফিরে যেতে দেয়। তারা লোকেদের আপনার অ্যাড-অন বারবার ব্যবহার করতে দেয়। যখনই একটি নতুন সাইডবার খোলা হয়, আগের যেকোনো সাইডবার স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। সেগুলি অস্থায়ী মোডগুলির জন্য সর্বোত্তম যেগুলি সম্পন্ন হলে ব্যবহারকারী প্রস্থান করে।
- ব্যবহারকারীদের নিজস্ব সাইডবার সহ অন্যান্য অ্যাড-অন থাকতে পারে। যদি দুটি অ্যাড-অন একসাথে সাইডবার খোলার চেষ্টা করে, শুধুমাত্র একটি দেখানো হয়।
- একটি নথি প্রথম খোলার সময় একটি সাইডবার বা ডায়ালগ প্রদর্শন করবেন না৷
- শুধুমাত্র
AuthMode.FULLএ অপারেটিং অ্যাড-অনগুলি সাইডবার বা ডায়ালগ খুলতে পারে। আপনি একটি সাইডবার খুলতে একটি মেনু আইটেম ব্যবহার করতে পারেন কারণ এটি ব্যবহারকারীকে সম্পূর্ণ অনুমোদন প্রদানের জন্য অনুরোধ করে।
নিয়ন্ত্রণ করে
দুর্দান্ত অ্যাড-অন UI তাদের নিয়ন্ত্রণ কিছু শ্বাসকক্ষ ছেড়ে দেয়। পর্যাপ্ত মার্জিন এবং প্যাডিং অনেক দূর এগিয়ে যায়, যেখানে ঘন নিয়ন্ত্রণগুলি অপ্রতিরোধ্য বলে মনে হতে পারে। সন্দেহ হলে, সম্পাদক নিজেই থেকে একটি লেআউট ধার. উদাহরণস্বরূপ, আপনার নিজের তৈরি করার সময় Google ডক্সে বিদ্যমান ডায়ালগগুলি পর্যালোচনা করুন, যেমন ফাইল > পৃষ্ঠা সেটআপ ৷
অ্যাড-অন CSS প্যাকেজের ডকুমেন্টেশন নীচের প্রতিটি ধরনের নিয়ন্ত্রণের জন্য নমুনা মার্কআপ প্রদান করে।
বোতাম
প্লেইন লিঙ্ক বা অন্যান্য উপাদানের পরিবর্তে আপনার ব্যবহারকারী ইন্টারফেসের প্রধান ক্রিয়াগুলি নিয়ন্ত্রণ করতে বোতামগুলি ব্যবহার করুন৷
- একবারে একাধিক নীল, লাল বা সবুজ বোতাম প্রদর্শন করা এড়িয়ে চলুন। ধূসর বোতাম বারবার প্রদর্শিত হতে পারে।
- বেশিরভাগ বোতাম লেবেল বাক্যের ক্ষেত্রে হওয়া উচিত এবং একটি ক্রিয়া দিয়ে শুরু করা উচিত। লাল বোতাম, সাধারণত ক্রিয়েট অ্যাকশনের জন্য, সমস্ত ক্যাপ ব্যবহার করা উচিত।
| করবেন না | করবেন |
|---|---|
চেকবক্স এবং রেডিও বোতাম
যখন লোকেরা একাধিক বিকল্প নির্বাচন করতে পারে বা কোনও বিকল্প নেই তখন চেকবক্সগুলি ব্যবহার করুন৷ রেডিও বোতাম (বা একটি নির্বাচন মেনু) ব্যবহার করুন যখন ঠিক একটি বিকল্প নির্বাচন করতে হবে।
- রেডিও বোতাম অনুকরণ করতে চেকবক্সের আচরণ পরিবর্তন করবেন না।
- তাদের চেক করা হলে অবিলম্বে কিছু করবেন না। মানুষ ভুল করে. আপনার ব্যবহারকারীরা তাদের পছন্দ নিশ্চিত করতে একটি বোতামে ক্লিক না করা পর্যন্ত অপেক্ষা করুন।
মেনু নির্বাচন করুন
বিকল্পগুলির একটি সংক্ষিপ্ত তালিকা অফার করার জন্য নির্বাচনগুলি একটি দুর্দান্ত উপায়।
- বিকল্পগুলিকে বর্ণানুক্রমিকভাবে বা একটি যৌক্তিক স্কিম অনুসারে সাজান যা সমস্ত ব্যবহারকারী বুঝতে পারে (সপ্তাহের দিনগুলির মতো, রবিবার থেকে শুরু করে)৷
- তালিকাটি খুব দীর্ঘ হলে, একটি ভিন্ন নিয়ন্ত্রণ ব্যবহার করার কথা বিবেচনা করুন। উদাহরণস্বরূপ, আপনি মেনুটিকে আরও স্থান দিতে এবং নেভিগেট করা সহজ করতে একটি স্ক্রোলযোগ্য তালিকা প্রদর্শন করতে পারেন।
পাঠ্য অঞ্চল
লোকেদের যদি কয়েকটি শব্দের বেশি টাইপ করার প্রয়োজন হয়, একটি পাঠ্য এলাকা ব্যবহার করুন।
- পাঠ্য অঞ্চলগুলিকে কমপক্ষে দুই লাইন লম্বা করুন যাতে সেগুলি ব্যবহার করা সহজ হয় এবং পাঠ্য ক্ষেত্রের মতো না দেখায়৷
- উপরে লেবেল রাখুন।
পাঠ্য ক্ষেত্র
লোকেদের শুধুমাত্র একটি বা দুটি শব্দ টাইপ করতে হলে পাঠ্য ক্ষেত্র ব্যবহার করুন।
- একটি টেক্সট ফিল্ডের প্রস্থ আপনাকে এটিতে টাইপ করার জন্য লোকেরা কী আশা করে তা পরামর্শ দেওয়া উচিত।
- একটি লেবেল হিসাবে স্থানধারক পাঠ্য ব্যবহার করা এড়িয়ে চলুন, কারণ এটি ফোকাসে অদৃশ্য হয়ে যায়। প্লেসহোল্ডার পাঠ্য উদাহরণ বা অতিরিক্ত বিবরণ দেওয়ার জন্য দরকারী।
- উপরে লেবেলগুলি রাখুন, তবে সংক্ষিপ্ত পাঠ্য ক্ষেত্রগুলি পাশাপাশি রেখে নির্দ্বিধায় করুন৷
ব্র্যান্ডিং
আপনার অ্যাড-অনে
আপনি যদি ব্র্যান্ডিং অন্তর্ভুক্ত করতে চান তবে এটি সংক্ষিপ্ত এবং হালকা রাখুন। এটি লোকেদের আপনার UI-এ ফোকাস করতে সাহায্য করে এবং আপনার অ্যাড-অনকে সম্পাদকের অংশের মতো অনুভব করে৷
- আপনার অ্যাড-অনের সমস্ত দিক অবশ্যই ব্র্যান্ডিং নির্দেশিকা অনুসরণ করতে হবে।
- "Google" শব্দটি অন্তর্ভুক্ত করবেন না বা Google পণ্য আইকন ব্যবহার করবেন না।
- পাঠ্যটি কয়েকটি শব্দের বেশি হওয়া উচিত নয় এবং অ্যাড-অন CSS প্যাকেজ থেকে
grayশ্রেণিতে স্টাইল করা উচিত। - গ্রাফিক্স একটি সাদা ব্যাকগ্রাউন্ডে হওয়া উচিত এবং 200px × 60px এর বেশি নয়।
- ডায়ালগগুলির জন্য, ব্র্যান্ডিং নীচে-ডানদিকে কোণায় হওয়া উচিত৷
- সাইডবারগুলির জন্য, ব্র্যান্ডিং উপরের বা নীচে হতে পারে।
দোকান
একটি এডিটর অ্যাড-অন প্রকাশ করার জন্য, আপনার অনেকগুলি ইমেজ সম্পদের প্রয়োজন৷ এই সম্পদগুলি অ্যাড-অন স্টোর তালিকা তৈরি করতে ব্যবহার করা হয়।
- আপনার দোকান তালিকার সমস্ত দিক অবশ্যই ব্র্যান্ডিং নির্দেশিকা অনুসরণ করতে হবে৷
- আপনাকে যে ছবিগুলি প্রদান করতে হবে সে সম্পর্কে আরও বিশদ বিবরণের জন্য, চিত্র নির্দেশিকা দেখুন।
অ্যাক্সেসযোগ্যতা
প্রত্যেকেরই আপনার অ্যাড-অন উপভোগ করতে সক্ষম হওয়া উচিত, তারা ভিন্নভাবে রঙ দেখুক, স্ক্রিন রিডার ব্যবহার করুক বা অন্য কোনো প্রয়োজন থাকুক। অ্যাক্সেসযোগ্যতা একটি বিস্তৃত বিষয় যা এই শৈলী নির্দেশিকায় সম্পূর্ণরূপে কভার করা যাবে না। একটি সহায়ক সংস্থান হল Google অ্যাক্সেসিবিলিটি সাইট৷ কিন্তু শুরু করার জন্য এখানে কয়েকটি টিপস রয়েছে:
- নিশ্চিত করুন যে আপনি কীবোর্ড দিয়ে সমস্ত UI নিয়ন্ত্রণে নেভিগেট করতে পারেন। কাস্টম নিয়ন্ত্রণগুলিতে
tabindex=0যোগ করুন (যেমন<div>দিয়ে তৈরি) যাতে লোকেরা তাদের ট্যাব করতে পারে। অন্যান্য কীগুলিকেও সমর্থন করা উচিত কিনা তা বিবেচনা করুন, যেমন একটি তালিকার জন্য তীর। - কিছু লোক আপনার অ্যাড-অনের সাথে একটি স্ক্রিন রিডার ব্যবহার করতে পারে৷ সুতরাং, চিত্রগুলির একটি
altবৈশিষ্ট্য থাকা উচিত এবং কাস্টম নিয়ন্ত্রণগুলিতে তাদের ব্যবহার বর্ণনা করার জন্য ARIA বৈশিষ্ট্য থাকা উচিত৷ - রাষ্ট্রের সাথে যোগাযোগ করার জন্য শুধুমাত্র রঙের উপর নির্ভর করবেন না। আইকন এবং টেক্সটও ব্যবহার করুন।
আপনি যদি স্ট্যান্ডার্ড ওয়েব কন্ট্রোল ব্যবহার করেন, যেমন এই নির্দেশিকায় আগে বর্ণনা করা হয়েছে, আপনার অ্যাড-অন অ্যাক্সেসযোগ্য করা আরও সহজ।