UI: খুব সাধারণ ভাবে বলতে গেলে ইউজার ইন্টারফেস হচ্ছে কোন একটি ওয়েব সাইট দেখতে কেমন হবে, ওয়েব সাইটটির প্রত্যেকটি অবজেক্টকে কি ভাবে ভিজিটরের কাছে উপস্থাপন করা হবে, ওয়েব সাইটটির কালার, ফন্টস, ইমেজ কম্পোজিশন কেমন হবে … ইত্যাদি ইত্যাদি।
কেন গুরুত্বপূর্ণ ?
যেকোন প্রডাক্টকে তার কাস্টমারের কাছে সুন্দর ভাবে তোলে ধরার জন্য প্রডাক্টটির মোড়ক আকর্ষণীয় হওয়া অত্যন্ত জরুরী। বাজারের নামি-দামী ব্র্যান্ড গুলোর দিকে তাকালে আমরা তাই দেখতে পাই। একই রকম ভাবে যদি রেসটোরেন্ট ব্যবসা, হোটেল ব্যবসা কিংবা শপিং মলের শপ গুলোর দিকে তাকায়, তাহলে দেখা যায় প্রত্যেকে তাদের কাস্টোমারদের আকৃষ্ট করতে প্রতিষ্ঠানটির ডেকোরেশনকে আকর্ষণীয় করে থাকে। আবার কখনো কি ব্যবসায়ীরা পণ্যের গুনগত মান অত ভাল না হলেও বা একই রকম পণ্য বিক্রির প্রতিযোগিতা বাড়াতে তাদের পণ্যের মোড়কের সুন্দর ডিজাইনের প্রতি অনেক গুরুত্ব দিয়ে থাকে। তাছাড়া কোন বস্তু বা প্রতিষ্ঠানের রুচি, কোয়ালিটি, ভাবমূর্তি ও অনেক খানি নির্ভর করে তার বাজ্যিক দিক দেখেই। কোন একটি জিনিস যদি প্রথম দেখাতেই ভাল না লাগে, তাহলে ক্রতাগন তাদের আগ্রহ হারিয়ে ফেলে। এই কারণেই বড় বড় ব্রন্ড কোম্পানি গুলো প্রোডাক্ট ও প্রোডাক্টটির মেড়োকে আকর্ষণীয় করতে মনোযোগ দিয়ে থাকেন।
ওয়েব সাইটের ক্ষেত্রেও তাই। ওয়েব সাইটি ভিজিট করার পর যদি ক্রতাগন সাইটি দেখে সতুষ্ট না হন নানা কারণে (যেমন: কালারের ব্যবহার, সঠিক তথ্য খোজে না পাওয়া, সাইটি ব্রাউজিং করেত বিরক্ত হওয়া….), তাহলে ঐ ক্রতা ওয়েব সাইটটি হতে সেবা নিতে আগ্রহ হারিয়ে ফেলে।
ওয়েব সাইটের জন্য ইউজার ইন্টারফেস (UI ) এর জন্য কোন বিষয় গুলো সবচেয়ে বেশি বিবেচনায় রাখা উচিৎ ?
লোগো:
প্রথমেই বলবো ওয়েব সাইটের লোগো। কারণ লোগোটিই আপনার ব্যবসার পরিচয় বহন করবে এবং লোগো কে বেইস ধরেই অন্যান্য ডিজাইন যেমন: ওয়েবসাইট, বিজনেস কার্ড, অন্যান্য প্রিন্ট মিডিয়ার বিষয় গুলো মাথায় রাখা হয়। সুতরাং নিচে যদি প্রফেশনাল বা মুটামুটি ভাল ডিজাইন না জানেন, তবে নিজেই ডিজাইনার হতে যাবেন না। প্রফেশনাল কারো সাহয্য নেন। প্রফেশনালদেরকে ও আপনার ব্যবসার ধরন, আইডিয়া, রেফারেন্স(যদি থাকে) জানান। লোগো ডিজাইন একটি ক্রিয়েটিভ কাজ যা কিনা ফটোশপে ছবি এডিটের মত নয়। তাই ডিজাইনারকে সময় দেন, তাতে করে ডিজাইনারের অনেক হেল্প হবে এবং আপনি ও ভাল আউটপুট পাবেন। আর যদি তার সম্ভব না হয় তবে অনলাইনে অনেক লোগো মেকার সাইট রয়েছে, ঐ সব সাইটের সাহায্য নিতে পারেন। শুধু গুগুলে সার্চ দেন “online free logo maker” OR “easy logo maker online free”.
কালার:
কালার একটি গুরুত্বপূর্ণ বিষয় যা কি যে কোন বিষয়ের স্মার্টনেস প্রকাশ করে। আপনি ওয়েব সাইট বানালেন, প্রডাক্ট ও আপলোড করলেন, ভিজিটর আনার জন্য যথেষ্ট মার্কেটিং ও করলেন….. তারপর যদি ভিজিটররা সাইটটি দেখার পর সন্তুষ্ট না থাকে, তাহলে কি সে ঐ সাইট হতে প্রডাক্ট কিনার আগ্রহ হারিয়ে ফেলবে না ! আর কালার এমই বিষয় যা একজন ইউজারকে আকৃষ্ট করে আপনার সাইটি ভিজিট করে দেখতে।
- ব্যবসার ধরনের কথা মাথায় রাখুন। যদি সাইটি হয় ফ্যাশন, লেডিস আইটেম কিংবা বাঁচ্চাদের জন্য… তাহলে সাইটটি হতে পারে কালারফুল।
- লোগো এর সাথে মিল রেখে পুরাে সাইটের কালার কম্বিনেশন করুন(যেমন, মেনু, হেডার, টেক্স, হাইলাইটেড কালার, হেডিং কালার)
- ব্যাকগ্রাউন্ড কালার যথা সম্ভব হালকা রাকার চেষ্টা করুন (কালারফুল ও হতে পারে, ব্যাকগ্রাউন্ড ইমেজ ও ব্যবহার করা যেতে পারে)
- বাটন কালার, মাউস হোবার কালার সাইটের থিম কালারের সাথে মিল রাখুন
ট্যাক্সট্ / ফন্ট
টেক্স/ফন্ট একটি সাইটের গুরুত্বপূর্ণ ইলিমেন্ট। টেক্স/ফন্ট আনার সাইটের সৌন্দর্য ৪০% বাড়িয়ে দেয়। সুতরাং সাইটের টেক্স/ফন্ট টি সুন্দর হওয়া জরুরি। ঠিক তেমনি লিখাটা যেন সকলেই পরতে পারে সহজে এমন ফন্ট নির্বাচন করা, ফন্টের সাইজ খুব বেশি ছোট বা বড় না হওয়া। বিশেষ হাইলাইটেড টেক্সগুলো সুন্দর কালার, বোল্ট, আন্ডারলাইন, ইটালিক কিংবা একটু বড় রাখা যেতে পারে।
ইমেজ
একটি সাইটের প্রাণ বা মূল ফোকাসিং এড়িয়া হলো সাইটের ইমেজ, ব্যনার ইমেজ, প্রডাক্ট ইমেজ ও এ্যাডস্ ইমেজ। একটি থিম কিনার সময়, থিমে ব্যবহৃত ইমেজ গুলো দেখলেই বুঝা যায় যে, “ইমেজ” একটি সাইট কে কত খানি প্রাণবন্ত করে থাকে। যা কিনা পরবর্তীতে সাইটের ভিজুয়াল ভিউ একই রকম দেখা যায় না। এর মূল কারণ হলো ভাল মানের ইমেজ ব্যবহার না করা জন্য। স্লাইড , ব্যানার কিংবা এ্যাডে ব্যবহার করার জন্য অনলাইনে অনেক ভাল ইমেজ সার্চ করে নিতে পারেন। Google চেয়েও অনেক ভাল ও স্পেসিফিক ইমেজ পেতে পারেন www.flickr.com হতে। হাইরেজুলেশান ইমেজ ডাউনলোডের আরও অনেক ফ্রি সাইট রয়েছে। প্রডাক্টের বিস্তারিত পেইজে, বিভিন্ন দিক হতে তুলা প্রডাক্টটের একাধিক ছবি দিন। প্ প্রডাক্ট ইমেজ কেবল মাত্র মোবাইল কিংবা ক্যামেরাতে তুলেই কাট-ছাট কের দিয়ে দিবেন না। ইমেজের ব্যাকগ্রাউন্ড, শেডও, রিফ্লেকশান, ফ্রেম, ব্রাইটনেস্, কনটেস্ট এর দিকে খেয়াল রাখুন। এতে করে প্রডাক্টটি অনেক বেশি জীবন্ত মনে হবে। এডিটিং এর সময় ইমেজটি যেন তার অাসল রেশিও না হারায়(লম্বাটে কিংবা চেপ্টা), সে দিকেও খেয়াল রাখুন। প্রয়োজনে আপনার প্রডাক্টের ধরন অনুযায়ী কিছু ভাল সাইটের প্রডাক্ট ইমেজ গুলো দেখে ধারনা নিন।
ব্যানার/ স্লাইডার
ব্যানার, এনিমেটেড স্লাইডার আপনার সাইটের সন্দৌর্য্য বাড়িয়ে থাকে। এনিমেটেড স্লাইডার যেন খুব বেশি ফাস্ট না হয়, আবার খুব স্লু ও নয়। এতে করে ভিজিটররা যেমন আপনার স্লাইডের কনটেন্ট গুলো পড়ার সুযোগ পাবে , তেমনি বিরক্ত ও হবে না। স্লাইডারে ৩-৫টি স্লাইড ব্যবহার করতে পারেন। প্রয়োজনে একাধিক স্লাইডার ব্যবহার করুন, একটি মূল স্লাইডারের(বড়) পাশাপাশি দুই-একটি প্রডাক্ট স্লাইডার, অফার স্লাইডার রাখা যেতে পারে। মাল্টিপল স্লাইডার ব্যবহারের ক্ষেত্রে স্লাইডারের টামারের দিকে খেয়াল রাখুন, যাতে সব স্লাইডার একই সাথে মুভ না করে।
ট্যাক্সট্-ইমেজ-ব্যানার কম্পোজিশন
ট্যাক্সট্ কম্পোজিশনে হেড লাইন তুলনা মূলক বড় এবং বর্ননা তুলনা মূলক ছোট রাখুন। হেডার ও পেরাগ্রাফে অালাদা অালাদা ফন্ট, কালার ব্যবহার করা যেতে পারে। কোন ভাবেই যেন মনে না হয় লিখা গুলো কে জোর করে লম্ব-ছোট করা হয়েছে। মাল্টিপল ইমেজ কম্পোজিশনে সব ইমেজের রেশিও ঠিক রাখেন। একটি মোবাইল এবং একটি লেপটপ! যেন একই সাইজের না হয়। ব্যানার কম্পোজিশনের ক্ষেত্রে খেয়াল রাখুন যেন প্রডাক্টের উপর টেক্সট এমন ভাবে না থাকে যাতে প্রডাক্টটির সৌন্দর্য্য না হারায় এবং ব্যানারটির চারপাশে কিছু খালি জায়গা রাখুন।
লেআউট
একটি ওয়েব সাইট ভিজিট করতে যত সহজ, সাইটটি ভিজিটরের নিকট তত বেশি গ্রহণযোগ্য। মানে ভিজিটর যে কারণে ভিজিট করছে তা যেন খুব সহজেই খুঁজে পাই। সাইটটি প্রথম দেখাতেই যেন সে বুঝে যায় কোথায় কি রয়েছে। একটি পরিপাটি বাড়ি দেখতে যেমন ভাল লাগে, ঠিক তেমনি ওয়েব সাইটের প্রতিটি এলিমেন্ট ও সাজানো গোছানো হওয়া চায়। যাতে করে কোন ভিজিটর প্রথমবার ভিজিটে কোন কেনাকাটা না করলেও সে যেন সাইটটি ঘুরে দেখে এবং মনে রাখে। সাইটের লেঅাউট সুন্দর রাখতে বেশ কিছু এড়িয়ে ও বিষয়ের দিকে নজর দিন, যেমন: Responsive-ডিজাইন, হেডার, ফুটার, কনটেন্ট এড়িয়ে…. ইত্যাদি।
- রেস্পনসিভ(Responsive) ডিজাইন: বর্তমানে একজন ভিজিটররা কেবল মাত্র আপনার সাইটি ল্যাপটপ কিংবা ডেস্কটপ কম্পিউটার হতে ভিজিট করে থাকে না। র্স্মাট ফোন, ও টেবলেট পিসি এর ব্যবহার বাড়ছে ব্যাপক ভাবে যা কিনা আগামী দু-এক বছরে তা হবে মোট ইন্টারনেট ব্যবহারকারী সিংহভাগই। সুতরাং আপনার সাইটিট যাতে সকল ডিভাইসে সুন্দর ভাইেব দেখতে পাই ভিজিটররা সেদিকে লক্ষ্য রাখতে হবে। রেস্পনসিভ(Responsive) ডিজাইন হচ্ছে তেমনি একটি টিকনোলজি। বর্তমানের যে সকল CMS এর থীম অনলাইনে কিনে থাকেন (যেগুলো www.themeforest.net) তার সবই Responsive ভিউ সাপোর্ট করে থাকে। শুধু আপনকে নিশ্চয় হতে হবে যে সকল ডিভাইসে আপনার সাইটি সুন্দর ভাবে দেখা যাচ্ছে । হতো অনেকে ভাবছে সব ধরেন ডিভাইস আপনার নাই তো টেস্ট করবেন কিভাবে ? এর ও সমাধান রয়েছে, আপনার মজিলা ফায়ারফক্স Browser হতে সিলেক্ট করুন: ” Tools > Web Developer > Responsive Design View” এবং বিভিন্ন স্ক্রিন সিলেক্ট করুন ও টেস্ট করুন।
সব ধরনের আপনার সাইটি চেক করতে পারেন www.browserstack.com এর মাধ্যমে আপনি সব ধরেন ব্রাউজার ও ডিভাইসে আপনার সাইটটি টেস্টের সুবিধা পাবেন। নিচে ভিডিও টি দেখতে পারেন:
- Header Area: ওয়েব সাইট ভিজিটের পর সবার প্রথমই চোখ পরে হেডার এরিয়াতে। হেডার এরিয়ার height খুব বেশি না হওয়া, মেনু, লোগো, সার্চ অপশন ও অন্যান্য ইলিমেন্ট গুলোর এলাইন্টমেন্ট ঠিক থাকা অত্যন্ত গুরুত্বপূর্ণ।
- Footer Area: ফুটার এড়িয়াতে কোম্পানির privacy, policy, copyrights তথ্যসমূহ হাইপার লিংক এর মাধ্যমে ভাল ভাবে উল্লেখ করুন। অাপনার সাইটটি অারো তথ্যবহুল করতে অারো কিছু তথ্য যোগ করুন Footer Area তে:
1. সাইট ম্যাপ
2. সার্ভিসসমূহের আইটেম লিস্ট
3. ইমেইল সাবস্ক্রিপশন
4. সোসাল আইকন
5. Go to Top বাটন ব্যবহার করতে পারেন, এতে করে ভিজিটর স্ক্রল করা ছাড়াই TOP এ পৌঁছে যেতে পারবে
- কনটেন্ট এড়িয়া: কনটেন্ট এড়িয়াতে আপনার প্রডাক্ট গুলো এমন ভাবে প্রদর্শন করুন যেন প্রতিটি প্রডাক্ট সুন্দর ভাবে ফুটে ওঠে, খুব বেশি ছোট কিংবা খুব বড় ও নয়। তিন থেকে চারটি(সর্বোচ্চ) কলাম এ প্রডাক্ট গুলো রাখতে পারেন। নতুন প্রডাক্ট, ডিসকাউন্ট প্রডাক্ট, স্পেশাল অফার প্রডাক্ট কে প্রাধান্য দিয়ে হাইলাইটেড করুন প্রয়োজন অনুযায়ী। সব চেয়ে বেশি বিক্রিত প্রডাক্ট গুলো ও প্রর্দশ করুন।
কোন বিষয় আরো গুলো অ্যাড করা যেতে পারে ?
- সোসাল মিডিয়া (Facebook, Google+, twitter, Pinterest, Dribbble, Youtube)
- লাইফ চেট ( ভিজিটর যে কোন ধরনের সাহায্য পেতে পারবে খুবই সহজেই )
- হেল্প লাইন নাম্বার
- ক্লাইন্ট লিস্ট
- কাস্টমার অথবা ক্লাইন্ট টেস্টোমোনিয়াল
- ব্লগ
- Feeback Page
- প্রডাক্ট / সার্ভিস Review
কোন বিষয় গুলো এড়িয়ে যাবেন ?
- সাইটটি খুব বেশি স্ক্রল না হওয়া
- একেক ব্যানারে এক এক রকম ফন্ট ব্যবহার না করা
- খুব বেশি পপ-আপ নোটিফিকেশন না দেয়া(যেমন: Facebook like, Email subscription ইত্যাদি)
- পণ্য অর্ডারের ক্ষেত্রে খুব বেশি ধাপ না থাকা
- ইউজার রেজিস্ট্রেশনের ক্ষেত্রেও যথা সম্ভব কম ফিল্ড রাখা
- ইমেজ ও সাইটের লোডিং টাইম যথা সম্ভব কম হওয়া
- প্রডাক্ট কিনার প্রক্রিয়াটি র্দীঘ না হওয়া ( যত সম্ভব সহজ করুন, গেস্ট হিসেবে প্রডাক্ট কিনার অপশনটি রাখতে পারেন )
Mahady Hasan
UI & Frontend Developer
লিংডইন এ আমি
Email: [email protected]
web: www.somoytech.com
17,242 total views, 4 views today