4টি অনুপ্রেরণামূলক ফর্ম ডিজাইন প্যাটার্নস [ফ্রি]

হাবস্পট দ্বারা পরিচালিত একটি সমীক্ষায় দেখা গেছে যে 82% উত্তরদাতারা রিপোর্ট করেছেন যে দুর্বল বা অসম্পূর্ণ ফর্মগুলির কারণে একটি ওয়েবসাইট ক্রয় ফানেল ত্যাগ করেছেন এবং সেই 93% লোক প্রথমবার ডেস্কটপ কম্পিউটারে সেই ফর্মগুলির মুখোমুখি হয়েছিল৷

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

4টি অনুপ্রেরণামূলক ফর্ম ডিজাইন প্যাটার্নস [ফ্রি]

একটি ভাল-পরিকল্পিত ফর্ম এর উপযোগিতাকে বিঘ্নিত না করেই পুরো ডিজাইনের মূল্য যোগ করে। উপরন্তু, এই ধরনের ফর্ম অনেক ভাল সঞ্চালন। সেলসফোর্সের নতুন UI ডিজাইন ফ্রেমওয়ার্ক, লাইটনিং-এ, ছোট আকারের নকশা পরিবর্তনগুলি ফর্ম রূপান্তরকে উন্নত করতে পারে। এর মধ্যে ডুব দেওয়া যাক.

বক্স-লেস ফর্ম

বক্স-লেস ওয়েবফর্মগুলি হল ওয়েব ফর্ম যেগুলির কোনও দৃশ্যমান বাক্স বা সীমানা নেই৷ এটি ওয়েবফর্মগুলিকে আরও সমসাময়িক এবং আধুনিক দেখায় কারণ তাদের চারপাশে থাকা বাক্সগুলির সাথে ওয়েব ফর্মগুলির ঐতিহ্যগত চেহারা নেই৷ তাদের চারপাশে বাক্স সহ ঐতিহ্যগত ওয়েবফর্মগুলি তারিখ হিসাবে দেখা যেতে পারে।

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

অ্যানিমেটেড ফর্ম

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

নীচে বা পাশ থেকে স্লাইড করুন

এই ওয়েবফ্লো টেমপ্লেট ব্যবহারকারীদের সামগ্রিক চেহারা থেকে বিঘ্নিত না করে যেকোনো মুহূর্তে একটি যোগাযোগ ফর্ম জমা দিতে সক্ষম করে। আপনি ভোক্তাদের আপনার সাথে যোগাযোগ করার অনুমতি দিতে পারেন যখনই তারা প্রস্তুত থাকে সাইটের নীচে একটি যোগাযোগ বোতাম যোগ করে।

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

ফুল-স্ক্রিন ফর্ম

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

প্রাকৃতিক-ভাষা ফর্ম

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

ধাপে ধাপে (প্রক্রিয়াগত) ফর্ম ডিজাইন

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

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

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

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

উপসংহার

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