বাংলাদেশি সুপার অ্যাপের card design প্যাটার্ন

বাংলাদেশি সুপার অ্যাপে card design এক ধরনের গোলাকার বাক্স নয়; কাজভেদে এর তথ্য, গুরুত্ব ও অ্যাকশন বদলাতে হয়। Pathao-ধাঁচের পরিবহন, খাবার ও ডেলিভারিতে দ্রুত পুনরারম্ভ জরুরি, Shohoz-ধাঁচের বুকিংয়ে সময়-আসন জরুরি, আর Chaldal-ধাঁচের গ্রোসারিতে BDT মূল্য, পরিমাণ, স্টক ও ডেলিভারি-স্লট জরুরি।

মূল বিষয়গুলো

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

এই পাতায় যা আছে

• •কার্ড ফ্যামিলি: একই শেল, আলাদা কাজ
• •প্যাটার্ন গ্যালারি: কখন কোন কার্ড ব্যবহার করবেন
• •গ্রোসারি ও পেমেন্ট কার্ডে তথ্যের অগ্রাধিকার
• •মোবাইল স্ক্রিনে কার্ডের ক্রম ও floow.design হ্যান্ডঅফ

কার্ড ফ্যামিলি: একই শেল, আলাদা কাজ

একটি বাংলাদেশি সুপার অ্যাপের dashboard design-এ কার্ডকে কাজের ভিত্তিতে ভাগ করুন: প্রচার, সার্ভিস-শর্টকাট, চলমান অর্ডার বা ট্রিপ, পেমেন্ট এবং পণ্য। এতে ব্যবহারকারী বুঝতে পারেন কোন কার্ডে ট্যাপ করলে নতুন কাজ শুরু হবে, আর কোনটি শুধু বর্তমান কাজের অবস্থা জানাচ্ছে।

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

ভিজ্যুয়াল টোকেন—রেডিয়াস, ছায়া, ভেতরের প্যাডিং ও বোতামের ধরন—এক রাখুন। কিন্তু কার্ডের শিরোনাম, মেটাডেটা, স্ট্যাটাস রং এবং প্রধান অ্যাকশন কাজ অনুযায়ী বদলান। এটিই একটি সামঞ্জস্যপূর্ণ কার্ড ফ্যামিলি, একঘেয়ে কম্পোনেন্ট লাইব্রেরি নয়।

প্যাটার্ন গ্যালারি: কখন কোন কার্ড ব্যবহার করবেন

১. প্রচার কার্ড — নতুন অফার, মৌসুমি ক্যাম্পেইন বা একটি নির্দিষ্ট সার্ভিসে প্রবেশ করাতে ব্যবহার করুন। একটি প্রধান বার্তা, মেয়াদ থাকলে তার ইঙ্গিত, এবং একটি পরিষ্কার কল-টু-অ্যাকশন যথেষ্ট। দীর্ঘ শর্ত কার্ডের ভেতরে ঢোকাবেন না।

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

৩. বুকিং কার্ড — Shohoz বাংলাদেশভিত্তিক বুকিং প্ল্যাটফর্ম হিসেবে বাস, ট্রেন, সিনেমা ও ইভেন্ট-সংক্রান্ত যাত্রার পরিস্থিতি দেখায়। বাস বা ট্রেন কার্ডে রুট, তারিখ, ছাড়ার সময় ও আসন-সংক্রান্ত তথ্য; সিনেমা বা ইভেন্ট কার্ডে ভেন্যু, শো-টাইম ও টিকিটের অবস্থা আগে রাখুন। বুকিংয়ের ধরন বদলালেও স্ক্যানযোগ্য তথ্যক্রম বজায় রাখুন।

৪. অর্ডার-স্ট্যাটাস কার্ড — ‘প্রস্তুত হচ্ছে’, ‘চালক পথে’ বা ‘ডেলিভারি সম্পন্ন’-এর মতো বর্তমান অবস্থাকে সবচেয়ে চোখে পড়ার মতো করুন। এরপর আনুমানিক সময়, অর্ডার পরিচিতি এবং ট্র্যাক/সাহায্য/পুনরায় অর্ডারের একটি প্রাসঙ্গিক অ্যাকশন দিন।

গ্রোসারি ও পেমেন্ট কার্ডে তথ্যের অগ্রাধিকার

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

পরিমাণ নিয়ন্ত্রণে ‘−’ ও ‘+’ বোতাম আলাদা ও সহজে চাপা যায় এমন রাখুন। মূল্য ছাড় থাকলে বর্তমান BDT মূল্যকে প্রধান করুন এবং আগের মূল্যকে গৌণভাবে দেখান; অস্পষ্ট ‘সাশ্রয়’ ট্যাগ দিয়ে গণনা লুকাবেন না। ডেলিভারি-স্লট কার্ডে নির্বাচিত দিন, সময়সীমা এবং স্লট পাওয়া যাচ্ছে কি না স্পষ্ট করুন।

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

মোবাইল স্ক্রিনে কার্ডের ক্রম ও floow.design হ্যান্ডঅফ

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

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

floow.design-এ আপনার সার্ভিস ক্যাটাগরি—যেমন রাইড, খাবার, পার্সেল, বাস, ট্রেন, সিনেমা, ইভেন্ট, গ্রোসারি ও পেমেন্ট—দিয়ে প্রম্পট করুন, যাতে বাংলাদেশ-কেন্দ্রিক সুপার অ্যাপের জন্য একীভূত কিন্তু কাজভেদে পৃথক card family তৈরি হয়।

বাংলাদেশি সুপার অ্যাপের কার্ড-প্যাটার্ন রেফারেন্স

সাধারণ ভুলগুলো

সব কার্ডে একই বড় ছবি, একই দুইটি বোতাম এবং একই উচ্চতা ব্যবহার করা।

কার্ডের উদ্দেশ্য নির্ধারণ করুন। প্রচারে ছবি ও একটি অ্যাকশন, স্ট্যাটাসে অবস্থা ও ট্র্যাকিং, আর শর্টকাটে দ্রুত ট্যাপকে অগ্রাধিকার দিন।

গ্রোসারি কার্ডে শুধু ছবি ও নাম দেখিয়ে মূল্য, পরিমাণ বা স্টক পরে দেখানো।

Chaldal-ধাঁচের সিদ্ধান্ত উপাদান—BDT মূল্য, পরিমাণ, স্টক এবং প্রাসঙ্গিক ডেলিভারি-স্লট—দৃশ্যমান ক্রমে রাখুন।

বুকিং কার্ডে সিনেমা, বাস ও ট্রেনের তথ্যক্রম একেবারে একই রাখা।

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

চলমান অর্ডারের বদলে হোম স্ক্রিনের প্রথম জায়গা সবসময় অফারকে দেওয়া।

সক্রিয় রাইড, ডেলিভারি বা বুকিং থাকলে অর্ডার-স্ট্যাটাস কার্ডকে উপরে আনুন; এটি ব্যবহারকারীর তাৎক্ষণিক কাজকে সমর্থন করে।

সচরাচর জিজ্ঞাসিত প্রশ্ন

মোবাইল অ্যাপে card design কত ধরনের হওয়া উচিত?

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

অফার কার্ড আর সার্ভিস কার্ডের পার্থক্য কী?

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

বাংলাদেশি সুপার অ্যাপের জন্য কার্ডে কোন তথ্য জরুরি?

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

অর্ডার-স্ট্যাটাস কার্ড কখন হোম স্ক্রিনের উপরে থাকবে?

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

শেষ কথা

ভালো কার্ড ফ্যামিলি দেখতে একরকম হলেও কাজের সময় একরকম আচরণ করে না। প্রচারকে আবিষ্কারের জন্য, শর্টকাটকে শুরু করার জন্য, স্ট্যাটাসকে চলমান কাজের জন্য এবং পণ্য বা পেমেন্টকে সিদ্ধান্ত নেওয়ার জন্য ডিজাইন করুন। এরপর floow.design-এ সার্ভিস ক্যাটাগরিগুলো দিয়ে বাংলাদেশ-কেন্দ্রিক card family তৈরি করুন।

---

আগে স্ক্রিনগুলো ডিজাইন করুন

সহজ ভাষায় আপনার অ্যাপের বর্ণনা দিন—floow.design আপনার জন্য iOS ও Android স্ক্রিন তৈরি করে দেবে, যা আপনি পরে আরও পরিমার্জন করে হ্যান্ডঅফ করতে পারবেন।

বিনামূল্যে ডিজাইন শুরু করুন →

---

সূত্র

• •Pathao-এর অফিসিয়াল ওয়েবসাইট
• •Shohoz-এর অফিসিয়াল ওয়েবসাইট
• •Chaldal-এর অফিসিয়াল ওয়েবসাইট