ডিজাইন এবং ব্যবহারকারীর অভিজ্ঞতা

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

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

অন্তর্ভুক্তিমূলক নকশা

আমরা কীভাবে ব্যবহারকারীদের সম্ভাব্য সমস্ত চাহিদা একবারে পূরণ করতে পারি? এখানেই আসে অন্তর্ভুক্তিমূলক নকশার ধারণা। অন্তর্ভুক্তিমূলক নকশা একটি মানব-কেন্দ্রিক পদ্ধতি ব্যবহার করে, যা অন্তর্ভুক্তি, ব্যবহারযোগ্যতা এবং প্রবেশগম্যতাকে একীভূত করে।

এবং সার্বজনীন নকশার বিপরীতে, যা এমন একটি একক নকশার উপর মনোযোগ দেয় যা যত বেশি সম্ভব মানুষ ব্যবহার করতে পারে, অন্তর্ভুক্তিমূলক নকশার নীতিগুলি একটি নির্দিষ্ট ব্যক্তি বা ব্যবহারের ক্ষেত্রের জন্য নকশা করা এবং তারপর সেই নকশাটি অন্যদের জন্য প্রসারিত করার উপর কেন্দ্র করে।

প্রবেশগম্যতা-কেন্দ্রিক অন্তর্ভুক্তিমূলক নকশার সাতটি নীতি রয়েছে:

1. তুলনীয় অভিজ্ঞতা প্রদান করুন : নিশ্চিত করুন যে আপনার ইন্টারফেসটি সকলের জন্য একটি সমান অভিজ্ঞতা প্রদান করে, যাতে বিষয়বস্তুর গুণমান ক্ষুণ্ণ না করে মানুষ তাদের প্রয়োজন অনুযায়ী কাজ সম্পন্ন করতে পারে।
2. পরিস্থিতিটি বিবেচনা করুন : নিশ্চিত করুন যে আপনার ইন্টারফেসটি মানুষের পরিস্থিতি নির্বিশেষে তাদের একটি মূল্যবান অভিজ্ঞতা প্রদান করে।
3. সামঞ্জস্যপূর্ণ হোন : পরিচিত রীতি ব্যবহার করুন এবং যৌক্তিক উপায়ে তা প্রয়োগ করুন।
4. নিয়ন্ত্রণ দিন : নিশ্চিত করুন যেন মানুষ তাদের পছন্দসই উপায়ে বিষয়বস্তু দেখতে ও তার সাথে মিথস্ক্রিয়া করতে পারে।
5. পছন্দের সুযোগ দিন : মানুষকে কাজ সম্পন্ন করার জন্য বিভিন্ন উপায় দেওয়ার কথা বিবেচনা করুন, বিশেষ করে যে কাজগুলো জটিল বা গতানুগতিক নয়।
6. বিষয়বস্তুকে অগ্রাধিকার দিন : বিষয়বস্তু ও বিন্যাসের মধ্যে উপাদানগুলোকে পছন্দের ক্রমে সাজিয়ে ব্যবহারকারীদের মূল কাজ, বৈশিষ্ট্য এবং তথ্যের উপর মনোযোগ দিতে সাহায্য করুন।
7. মান বৃদ্ধি করুন : ফিচারগুলোর উদ্দেশ্য ও তাৎপর্য এবং কীভাবে সেগুলো বিভিন্ন ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে, তা বিবেচনা করুন।

ব্যক্তিত্ব

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

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

প্রতিবন্ধকতা অন্তর্ভুক্ত করুন

মানুষ সবাই আলাদা। আমি শুধু আমার অভিজ্ঞতা থেকে বলতে পারি। যখন আপনার একজন বধির ব্যক্তির সাথে দেখা হয়, তখন আপনি কেবল একজন বধির ব্যক্তির সাথেই দেখা করেছেন—আমাদের সবার সাথে নয়।

ID24-এর ' Deaf Tech: Travel Through Time from Past to Future' শীর্ষক আলোচনা থেকে মেরিল ইভান্স।

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

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

চরিত্র: জেন বেনেট

এমন একটি পার্সোনার উদাহরণ দেখুন যা নির্দিষ্ট ব্যবহারের ক্ষেত্রগুলোকে সমর্থন করে।

• নাম : জেন বেনেট
• বয়স : ৫৭ বছর
• অবস্থান : এসেক্স, যুক্তরাজ্য
• পেশা : ইউএক্স ইঞ্জিনিয়ার
• অক্ষমতা : অল্প বয়সে শুরু হওয়া পারকিনসন রোগ (YOPD) থেকে হাতের কাঁপুনি
• লক্ষ্য : স্পিচ-টু-টেক্সট ইনপুট ব্যবহার করে কোড সাজেশন যোগ করা সহজ করা; ন্যূনতম কীস্ট্রোকের মাধ্যমে অনলাইনে বাইকিং সরঞ্জাম খুঁজে বের করা।
• বিরক্তি : ওয়েবসাইটগুলিতে শুধু কিবোর্ড ব্যবহারের সুবিধার অভাব; ডিজাইনের অ্যাপগুলিতে টাচ ইন্টারঅ্যাকশনের জন্য ছোট জায়গা থাকা।

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

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

প্রতিবন্ধী সিমুলেটর

আপনার পারসোনাগুলোকে অনুকরণ বা পরিপূরক করতে অক্ষমতা সিমুলেটর ব্যবহার করার সময় অত্যন্ত সতর্কতা অবলম্বন করুন।

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

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

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

মার্ক রিক্কোবোনো , জাতীয় অন্ধ ফেডারেশনের সভাপতি।

অ্যাক্সেসিবিলিটি হিউরিস্টিকস

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

২০১৯ সালে এসে, Deque-এর ডিজাইন টিম ডিজিটাল অ্যাক্সেসিবিলিটির উপর কেন্দ্র করে এক নতুন সেট হিউরিস্টিকস তৈরি ও শেয়ার করে। তাদের গবেষণা অনুযায়ী, ডিজাইন প্রক্রিয়ার অংশ হিসেবে অ্যাক্সেসিবিলিটিকে অন্তর্ভুক্ত করলে একটি ওয়েবসাইট বা অ্যাপের সমস্ত অ্যাক্সেসিবিলিটি বাগের প্রায় ৬৭% পর্যন্ত এড়ানো সম্ভব। এটি এমন এক বিশাল প্রভাব যা এক লাইন কোড লেখার আগেই ফেলা যায়।

মূল হিউরিস্টিকস সেটের মতোই, আপনার ডিজাইন পরিকল্পনা করার সময় বিবেচনা করার মতো দশটি অ্যাক্সেসিবিলিটি হিউরিস্টিকস রয়েছে।

1. মিথস্ক্রিয়ার পদ্ধতি ও উপায়সমূহ : ব্যবহারকারীরা তাদের পছন্দমতো ইনপুট পদ্ধতি (যেমন মাউস, কিবোর্ড, টাচ ইত্যাদি) ব্যবহার করে দক্ষতার সাথে সিস্টেমের সাথে মিথস্ক্রিয়া করতে পারেন।
2. নেভিগেশন ও পথনির্দেশনা : ব্যবহারকারীরা সিস্টেমের মধ্যে যেকোনো সময় নেভিগেট করতে, কন্টেন্ট খুঁজে বের করতে এবং নিজেদের অবস্থান নির্ণয় করতে পারেন।
3. কাঠামো ও অর্থ : ব্যবহারকারীরা প্রতিটি পৃষ্ঠার বিষয়বস্তুর কাঠামো বুঝতে পারেন এবং সিস্টেমটি কীভাবে পরিচালনা করতে হয় তা উপলব্ধি করতে পারেন।
4. ত্রুটি প্রতিরোধ এবং অবস্থা : ইন্টারেক্টিভ কন্ট্রোলগুলিতে ভুল প্রতিরোধে সহায়তার জন্য স্থায়ী ও অর্থপূর্ণ নির্দেশাবলী থাকে এবং যখনই কোনো ত্রুটি দেখা দেয়, তখন ব্যবহারকারীদের স্পষ্ট ত্রুটির অবস্থা প্রদান করে, যা সমস্যাগুলো কী এবং কীভাবে তা সমাধান করতে হবে তা নির্দেশ করে।
5. বৈসাদৃশ্য ও পাঠযোগ্যতা : ব্যবহারকারীরা সহজেই লেখা এবং অন্যান্য অর্থপূর্ণ তথ্য আলাদা করে পড়তে পারেন।
6. ভাষা ও পঠনযোগ্যতা : ব্যবহারকারীরা বিষয়বস্তু সহজে পড়তে ও বুঝতে পারেন।
7. পূর্বাভাসযোগ্যতা এবং সামঞ্জস্যতা : ব্যবহারকারীরা প্রতিটি উপাদানের উদ্দেশ্য অনুমান করতে পারেন। প্রতিটি উপাদান কীভাবে সামগ্রিক সিস্টেমের সাথে সম্পর্কিত, তা সুস্পষ্ট।
8. সময় ও সংরক্ষণ : ব্যবহারকারীদের তাদের কাজ সম্পন্ন করার জন্য যথেষ্ট সময় দেওয়া হয় এবং তাদের সময় (অর্থাৎ, একটি সেশন) শেষ হয়ে গেলেও কোনো তথ্য হারিয়ে যায় না।
9. চলাচল ও ঝলকানি : ব্যবহারকারীরা পৃষ্ঠার চলমান, ঝলকানো বা অ্যানিমেটেড উপাদানগুলো থামাতে পারেন। এই উপাদানগুলোর দ্বারা ব্যবহারকারীদের মনোযোগ যেন বিঘ্নিত না হয় বা অন্য কোনোভাবে ক্ষতি না হয়।
10. দৃশ্য ও শ্রাব্য বিকল্প : ব্যবহারকারীরা তথ্য প্রদানকারী যেকোনো দৃশ্য বা শ্রাব্য বিষয়বস্তুর জন্য পাঠ্য-ভিত্তিক বিকল্প ব্যবহার করতে পারেন।

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

ন্যাভিগেশন এবং পথনির্দেশনা চেকপয়েন্টের জন্য একটি উদাহরণমূলক অ্যাক্সেসিবিলিটি হিউরিস্টিক পর্যালোচনা নিম্নলিখিতের মতো হতে পারে:

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

অ্যাক্সেসযোগ্যতা টীকা

ডেভেলপমেন্ট টিমের কাছে আপনার ডিজাইন হস্তান্তর করার আগে, অ্যাক্সেসিবিলিটি অ্যানোটেশন যোগ করার বিষয়টি বিবেচনা করা উচিত।

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

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

নিম্নলিখিত ডিজাইন ইলাস্ট্রেশনের উদাহরণগুলো Indeed.com-এর Figma-এর জন্য তৈরি অ্যাক্সেসিবিলিটি অ্যানোটেশন কিট থেকে নেওয়া হয়েছে।

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

অ্যাক্সেসিবিলিটি টীকা যোগ করার জন্য বিবেচ্য কিছু ক্ষেত্র হলো:

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