বিকাশকারীদের শক্তিশালী, ইনস্টলযোগ্য ওয়েব অ্যাপ তৈরি করতে সহায়তা করা

ভূমিকা

2020-এর শুরুতে, মোবাইল এবং ডেস্কটপ জুড়ে Chrome টিম ইনস্টল করা ওয়েব অ্যাপগুলির আবিষ্কার এবং ব্যস্ততা উন্নত করার জন্য একটি পরিকল্পনা তৈরি করেছে। আমাদের কাজ PWA ইনস্টলেশন এবং ব্যস্ততায় 100% এর বেশি বৃদ্ধির দিকে পরিচালিত করেছে। আমরা বিদ্যমান বৈশিষ্ট্যগুলি নিয়ে গবেষণা করে, ব্যবহারকারীদের উপলব্ধি এবং প্রত্যাশাগুলির অন্তর্দৃষ্টি পেতে A/B পরীক্ষা পরীক্ষা চালিয়ে এবং ব্যবহারকারীর সাক্ষাত্কারের মাধ্যমে এটি অর্জন করেছি। এই নিবন্ধটি আমরা সেখানে কিভাবে পৌঁছেছি তা কভার করে।

ইউনিফাইড ইনস্টল ভাষা

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

2019 সালে শ্রেণীবিন্যাস সংক্রান্ত আরও একটি গবেষণায় কোনও পার্থক্য পাওয়া যায়নি, এবং তাই দলটি PWA ইনস্টল করার অভিজ্ঞতাকে একীভূত করতে চায়, Android এ ইনস্টল করার জন্য লেবেলটি আপডেট করার সিদ্ধান্ত নিয়েছে। 2021 সালে আরও একটি সমীক্ষা, ভাষা, ইনস্টল , পান এবং ডাউনলোডের তুলনা করে এবং আমরা দেখতে পেয়েছি যে ব্যবহারকারীরা যে প্রক্রিয়াটি ঘটছিল তা হিসাবে ইনস্টলকে বোঝে। ব্যবহারকারীরা অনুভব করেছিলেন যে গেট লেবেল সহ একটি বোতামে ট্যাপ করলে ব্যবহারকারীকে একটি ওয়েবসাইটে পাঠাবে এবং ডাউনলোডের সাথে তারা অনুমান করেছিল যে একটি ফাইল তাদের ডাউনলোড ফোল্ডারে বা সমতুল্য হবে।

এই সমস্ত কিছু মাথায় রেখে, আমরা উপসংহারে পৌঁছেছি যে ইন্সটল লেবেলটি পিডব্লিউএ-এর সাথে সবচেয়ে উপযুক্ত। আমরা ওয়েব প্ল্যাটফর্ম জুড়ে ডেভেলপারদের পছন্দের স্ট্রিং হিসাবে ইনস্টল গ্রহণ করার পরামর্শ দিই।

ডেস্কটপে আইকন ইনস্টল করুন

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

আসল ইনস্টল প্লাস আইকন।
আসল ইনস্টল প্লাস আইকন।

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

জুম ও ইনস্টল আইকন সহ অম্নিবক্স বাগ উপস্থিত।
জুম ও ইনস্টল আইকন সহ অম্নিবক্স বাগ উপস্থিত।

আমি আমাদের ব্যবহারকারীর উপলব্ধি তদন্ত করার সিদ্ধান্ত নিয়েছি, কারণ বেশিরভাগ প্রতিক্রিয়াই ঘটনাগত ছিল৷ আমাদের UX গবেষকদের সাথে কাজ করে, আমরা ইউএসএ এবং ইন্দোনেশিয়ার 10,000 জন ব্যবহারকারীর সাথে একটি অধ্যয়ন চালিয়েছি যাতে ব্যবহারকারীদের ইনস্টল আইকনোগ্রাফি বোঝার বিষয়টি নির্ধারণ করা হয়। আমরা বিদ্যমান একটি সহ পাঁচটি ভিন্ন ডিজাইন পরীক্ষা করেছি এবং ব্যবহারকারীদের জিজ্ঞাসা করেছি "ইনস্টল" এর অর্থ কী৷ আমরা আবিষ্কার করেছি যে বর্তমান আইকন, প্লাস প্রতীক, আমাদের ব্যবহারকারীদের কাছে সবচেয়ে বিভ্রান্তিকর। অনেকে প্রতীকটিকে "ঔষধ", "প্রাথমিক চিকিৎসা" এবং "ব্যাটারি" দিয়ে বিভ্রান্ত করেছেন।

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

মেটেরিয়াল ডিজাইন আইকন সেট থেকে আইকন ভেরিয়েন্ট ইনস্টল করুন।
আমাদের ইন্সটল আইকনোগ্রাফির ভেরিয়েন্ট যা আপনি আমাদের মেটেরিয়াল ডিজাইন আইকন সেট থেকে ডাউনলোড করতে পারেন।

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

অবশ্যই, একটি একক আইকন বিশ্বকে পরিবর্তন করবে না, যা আমাদের পরবর্তী বৈশিষ্ট্যে নিয়ে যায়।

ইন-প্রোডাক্ট সহায়তা

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

ইন-প্রোডাক্ট সাহায্য বুদ্বুদ.
ইন-প্রোডাক্ট সহায়তা টুলটিপ বাবল যা ব্যবহারকারীদের বৈশিষ্ট্য সম্পর্কে শিক্ষিত করে।

যখন একজন ব্যবহারকারী নিয়মিত একটি ওয়েবসাইট পরিদর্শন করেন, তখন Chrome সাইট এনগেজমেন্ট নামে পরিচিত একটি পরিষেবা ব্যবহার করে। এটি একটি সাইটের সাথে একজন ব্যবহারকারী কতটা জড়িত সে সম্পর্কে তথ্য প্রদান করে। chrome://site-engagement/ পরিদর্শন করে, আপনি যে সাইটগুলির সাথে নিয়মিত যুক্ত হচ্ছেন সেগুলি দেখতে পারেন৷ এই স্কোরগুলি ব্যবহার করে, আমরা নির্ধারণ করতে পারি যে একজন ব্যবহারকারী একটি ওয়েবসাইটে আগ্রহী কিনা। যদি সাইটটি একটি PWA হয় এবং ব্যবহারকারী জড়িত থাকে তাহলে আমরা তাদের ইন-প্রোডাক্ট হেল্প UI ইন্সটল করতাম। এর মানে হল যে আমরা শুধুমাত্র নিযুক্ত ব্যবহারকারীদের উপর ফোকাস করেছি এবং এমন ব্যবহারকারীদের বিরক্ত করি না যারা একবার সাইট ভিজিট করতে পারে।

ডেস্কটপে ইন-প্রোডাক্ট সহায়তা ব্যবহার করে, আমরা PWA ইনস্টলেশনে 100%-এর বেশি বৃদ্ধি দেখেছি, যা দেখায় যে নিযুক্ত ব্যবহারকারীদের উপর ফোকাস করা ওয়েব অ্যাপের ইনস্টলেবিলিটি উন্নত করেছে।

সমৃদ্ধ ইন্সটল UI

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

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

সমৃদ্ধ UI ইনস্টল করুন।
আরও সমৃদ্ধ ইন্সটল UI, সঙ্কুচিত এবং প্রসারিত অবস্থা।

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

উপসংহার

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