পার্ট ১: Mobile-First E-commerce Product Page: মোবাইল-ফার্স্ট প্রোডাক্ট পেজ লেআউট

অধিকাংশ লোকাল এবং গ্লোবাল ই-কমার্স ব্র্যান্ড তাদের ট্রাফিকের ৮০% এর বেশি পায় মোবাইল ডিভাইস (Mobile traffic) থেকে। ফেসবুক বা ইনস্টাগ্রামের কোনো এড দেখে যখন ইউজার কোনো ই-কমার্স সাইটে ল্যান্ড করে, তখন সে ল্যান্ড করে মোবাইল স্ক্রিনেই।

কিন্তু দুর্ভাগ্যজনকভাবে, বেশির ভাগ ডিজাইনার এখনও তাদের ল্যাপটপের বড় স্ক্রিনে ডেক্সটপ ভার্সন (Desktop layout) ডিজাইন করার পর স্রেফ কোনো রেসপন্সিভ গ্রিড বা প্লাগইন দিয়ে টেনেটুনে মোবাইল লেআউট তৈরি করে। এর ফলে প্রোডাক্ট পেজের ওপরে মোবাইল স্ক্রিনে কন্টেন্টগুলো এত ছড়ানো-ছিটানো থাকে যে ইউজারের চোখে প্রোডাক্টের মূল ইমেজ আর দাম ছাড়া আর কিছুই পড়ে না। ইউজার কাস্টমাইজেশন বুঝতে না পেরে বাটন খুঁজে না পেয়ে বাউন্স (Bounce) করে চলে যায়।

আজকে আমরা আলোচনা করব কীভাবে একটি হাই-কনভার্টিং মোবাইল-ফার্স্ট ই-কমার্স প্রোডাক্ট পেজ (Product Detail Page - PDP) ডিজাইন করবেন।

১. লুপ হোল: অদৃশ্য কল-টু-অ্যাকশন (CTA) এবং ভ্যারিয়েন্ট ট্র্যাপ

আমি বছর দেড়েক আগে বাংলাদেশের একটি বড় অনলাইন ফ্যাশন ব্র্যান্ডের ডিজাইন অডিট করছিলাম। তাদের মোবাইল সাইটে প্রোডাক্ট পেজে ঢুকে নিচে স্ক্রল না করলে মূল "Buy Now" বা "Add to Cart" বাটনটি দেখাই যাচ্ছিল না। কারণ ইমেজটি ছিল অনেক লম্বা, আর তার নিচে সাইজ ও কালার সিলেক্ট করার বিশাল বক্স বসানো ছিল।

মোবাইল স্ক্রিনের নিচের দিকে যাওয়ার আগেই ইউজারেরা সাইট ছেড়ে দিচ্ছিল, যার ফলে তাদের অ্যাড টু কার্ট রেট ছিল মাত্র ১.৫%।

মোবাইল ই-কমার্স ডিজাইনে গোল্ডেন রুল হলো: মূল CTA বাটনটি স্ক্রিনের ১ম ভিউপোর্টেই (Above the fold) থাকতে হবে বা ইউজারের চোখের সামনে সবসময় অ্যাক্সেসিবল হতে হবে।

২. স্টিকি অ্যাকশন বাটন এবং থাম্ব জোন (Sticky CTA & Thumb Zone)

মোবাইলে ওয়ান-হ্যান্ডেড ব্যবহারের ক্ষেত্রে ইউজারের বৃদ্ধাঙ্গুল বা থাম্ব স্ক্রিনের নিচের অংশে সবচেয়ে সহজে রিচ করতে পারে (Thumb Zone Design)।

• স্টিকি বটম বার (Sticky Bottom Bar):

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

• ভ্যারিয়েন্ট সিলেক্টর (Variant Picker Layout):

সাইজ বা কালার সিলেক্ট করার জন্য বড় ড্রপডাউন মেনু ব্যবহার করা পরিহার করুন। মোবাইলে ড্রপডাউন ওপেন করা মানে ইউজারের একটি এক্সট্রা ট্যাপের ফ্রিকশন। এর পরিবর্তে সরাসরি ক্লিকেবল পিল বা চিপস (Chips layout) ব্যবহার করুন, যাতে ইউজার এক পলকেই দেখতে পায় কোন কোন সাইজ এভেইলএবল আছে।

৩. ইমেজ ও মিডিয়া গ্যালারি অপটিমাইজেশন (Media Gallery)

মোবাইলে ইউজারেরা প্রোডাক্ট বোঝার জন্য ইমেজের ওপর শতভাগ নির্ভর করে।

• মোবাইল ক্যারোসেল (Swipe Gestures):

প্রোডাক্টের মাল্টিপল ইমেজ দেখানোর জন্য নিচ থেকে স্ক্রল করার থাম্বনেইল লেআউট মোবাইলে কাজ করে না। তার বদলে হরাইজন্টাল সোয়াইপ ক্যারোসেল ব্যবহার করুন এবং নিচের দিকে ছোট্ট ক্যারোসেল ডটস (Pagination dots) দিন, যাতে ইউজার বুঝতে পারে আরও ইমেজ আছে।

• ভিডিও রিচনেস (Product Videos):

ইউজারকে ডিরেক্ট ৩ডি রোটেশন বা ১০ সেকেন্ডের কুইক ডেমো ভিডিও ইমেজের ২য় স্লাইডেই দেখানোর চেষ্টা করুন। মোবাইল ডেটা স্পিড অপটিমাইজ করে ভিডিও সাইজ কম্প্রেসড করে রাখতে হবে।

৪. রিভিউ ও সোশ্যাল প্রুফ লেআউট (Ratings Placement)

ইউজার প্রোডাক্টের নিচে যাওয়ার আগে প্রথমে চেক করে প্রোডাক্টটি ট্রাস্টেড কি না।

• টাইটেলের ঠিক নিচে রেটিং:

প্রোডাক্টের টাইটেলের ঠিক নিচে গোল্ডেন স্টার রেটিং (যেমন: ★ 4.8 (120 reviews)) হাইলাইট করুন। রেটিংয়ে ক্লিক করলে পেজ স্ক্রল করে সরাসরি কাস্টমার রিভিউর জোনে নিয়ে যাবে। এটি মোবাইলে ইউজারের ডিসিশন মেকিং প্রসেসকে কয়েক গুণ ফাস্ট করে দেয়।

পরবর্তী পর্বে আমরা দেখব কীভাবে জটিল কার্ট ফ্লো পরিহার করে একটি ফ্রিকশনলেস ওয়ান-পেজ চেকআউট (One-Page Checkout UX) ডিজাইন করবেন।

ধন্যবাদ সবাইকে।