যখন আমি আমার প্রথম ওয়েবসাইট তৈরির কাজ শুরু করলাম, উত্তেজনা ছিল প্রবল। আমি ভেবেছিলাম কঠিন কাজ হবে কোডিং শেখা—ট্যাগ মুখস্থ করা, ফাংশন বোঝা, সিনট্যাক্স ঠিক করা। আমি ভুল ছিলাম। কোড লেখাটা আসলে সহজ অংশ ছিল। আসল চ্যালেঞ্জ ছিল সেই লাইনগুলোকে এমন কিছুতে রূপান্তর করা যা মানুষ কোনো বিভ্রান্তি বা বিরক্তি ছাড়াই ব্যবহার করতে পারে। সেই প্রথম প্রজেক্টটি আমাকে শিখিয়েছিল যে ডেভেলপমেন্ট মানে শুধু একা একা টাইপ করা নয়, বরং এমন মানুষের সমস্যা সমাধান করা যাদের আপনার টেক স্ট্যাক (stack) নিয়ে কোনো মাথাব্যথা নেই। আমি এমন কিছু ভুল করেছিলাম যার কারণে আমার সময়, ঘুম এবং শুরুর দিকের ব্যবহারকারী—সবই হারিয়েছিল। তার মধ্যে পাঁচটি ভুল সবচেয়ে বেশি চোখে পড়ার মতো ছিল।
রিলিজ করার আগে নিখুঁত করার পেছনে ছোটা
আমি নিখুঁত হওয়ার ফাঁদে পড়ে গিয়েছিলাম, এমনকি কোনো কিছুকে নিখুঁত বলার যোগ্যতা অর্জন করার অনেক আগেই। আমি পুরো বিকেল কাটিয়ে দিতাম হেক্স কোড (hex codes) সামান্য পরিবর্তন করতে, বর্ডার-রেডিয়াস (border-radius) ভ্যালু আট পিক্সেল থেকে দশ পিক্সেল করা বা আবার আগের অবস্থায় ফিরিয়ে আনা, এবং একজন ভিজিটর পেজটি দেখার আগেই হেডলাইন কপি পাঁচবার নতুন করে লেখা। আমি নিজেকে বলতাম যে আমি কাজটিকে আরও উন্নত করছি, কিন্তু আসলে আমি গুণমানের দোহাই দিয়ে কাজ পিছিয়ে দিচ্ছিলাম। ফলাফল? আমি তিন সপ্তাহ দেরিতে লঞ্চ করলাম। যখন সাইটটি অবশেষে লাইভ হলো, বাটনটি কতটা বাঁকানো বা কার্ভ হয়েছে তা নিয়ে একজন ব্যবহারকারীও মন্তব্য করেননি। তারা শুধু এটা দেখতে চেয়েছিল যে ফর্মটি ক্র্যাশ না করে সাবমিট হচ্ছে কি না।
শিক্ষাটি মনে গেঁথে গেল: আগে কাজ রিলিজ করুন। আপনি সেই ফিডব্যাক নিয়ে কাজ করতে পারবেন না যা আপনি পাননি। কাঠামোটি মজবুত করুন, নিশ্চিত করুন যে মূল পথটি (core path) কাজ করছে, এবং সেটি লাইভ করে দিন। পরিমার্জন বা রিফাইনমেন্ট ভার্সন ২-এর কাজ, ভার্সন ০-এর নয়। আপনার ব্যবহারকারীরাই আপনাকে বলে দেবে আসলে কী ভেঙে গেছে আর কী কেবল আপনার কাছে অপূর্ণ মনে হচ্ছে।
খুব দ্রুত অনেক বেশি কিছু তৈরি করা
আমার প্রজেক্টটি শুরু হয়েছিল বইয়ের সুপারিশ শেয়ার করার একটি সাধারণ টুল হিসেবে। এটাই ছিল মূল ধারণা। দ্বিতীয় সপ্তাহের মধ্যে আমি একটি ইউজার লগইন সিস্টেম, একটি ডাইনামিক রেটিং গ্রাফ, একটি নেস্টেড কমেন্ট সেকশন, একটি ডার্ক-মোড টগল এবং একটি ইমেল ডাইজেস্টের পরিকল্পনা করে ফেললাম। এর কোনোটিই ঠিকমতো কাজ করছিল না। লগইন প্রক্রিয়াটি অর্ধেক সময় কাজ করছিল না। গ্রাফে দেখানোর মতো কোনো আসল ডেটা ছিল না। কমেন্ট সেকশনে একই কমেন্ট বারবার করা যাচ্ছিল। এদিকে, মূল বইয়ের তালিকা দেখানোর ফিচারটি—যার জন্যই সাইটটি তৈরি করা হয়েছিল—সেটি অনেকগুলো অকেজো এবং অর্ধেক শেষ করা ফিচারের নিচে চাপা পড়ে গিয়েছিল, যা হোমপেজে আসা যে কাউকেই বিভ্রান্ত করছিল।
একটি সাধারণ সাইট যা একটি সমস্যা পরিষ্কারভাবে সমাধান করে, সেটি দশটি কাজ খারাপভাবে করা একটি জটিল সাইটের চেয়ে সবসময়ই ভালো। অন্য কোনো কোড লেখার আগে, আপনার প্রোডাক্টটি ব্যবহারকারীর জন্য কোন একটি নির্দিষ্ট কাজ করে তা নির্ধারণ করুন। সেটি তৈরি করুন। সেটি পরীক্ষা করুন। এটি নির্ভরযোগ্য না হওয়া পর্যন্ত পরিমার্জন করুন। ব্যবহারকারীরা যদি সত্যিই একটি ড্যাশবোর্ড বা সোশ্যাল ফিড চায়, তবে আপনি তখন তা যোগ করতে পারেন। ততক্ষণ পর্যন্ত, একটি ধারালো রান্নাঘরের ছুরি যখন যথেষ্ট, তখন একটি সুইস আর্মি নাইফ তৈরির প্রলোভন থেকে নিজেকে দূরে রাখুন।
দেখতে সুন্দর হওয়ার পেছনে অভিজ্ঞতাকে উপেক্ষা করা
আমি মার্জিত ফন্ট এবং স্টাইলিশ কালার প্যালেট বেছে নিতে ঘণ্টার পর ঘণ্টা ব্যয় করেছি। আমি হিরো সেকশনের (hero section) ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট নিয়ে পড়ে থাকতাম। তারপর আমি সাইটটি ব্যবহার করার অভিজ্ঞতাকে উপেক্ষা করলাম। পেজগুলো লোড হতে অনেক সময় নিচ্ছিল কারণ আমি কোনো কম্প্রেশন ছাড়াই ফুল-রেজোলিউশন PNG ফাইল ব্যবহার করছিলাম। নেভিগেশন লেবেলগুলোতে এমন চতুর শব্দ ব্যবহার করা হয়েছিল যা দেখতে সুন্দর ছিল কিন্তু মানুষ বুঝতে পারছিল না লিঙ্কটি কোথায় নিয়ে যাবে। বাটনগুলো ছিল পাতলা এবং স্টাইলিশ কিন্তু ফোনের স্ক্রিনে ট্যাপ করার জন্য খুব ছোট ছিল।
আমি কঠিন অভিজ্ঞতার মাধ্যমে শিখেছি যে ভিজ্যুয়াল ডিজাইন এবং ইউজার এক্সপেরিয়েন্স (UX) এক জিনিস নয়। একটি সুন্দর ইন্টারফেস ব্যর্থ হবে যদি ভিজিটররা একটি ব্যানার ইমেজ দেখার জন্য কয়েক সেকেন্ড অপেক্ষা করে, অথবা যদি তারা দুই ক্লিকের মধ্যে আপনার সাথে যোগাযোগ করার উপায় খুঁজে না পায়। প্রতিটি ইন্টারঅ্যাকশন সহজ রাখুন। নেভিগেশনে সাধারণ ভাষা ব্যবহার করুন। আপনার অ্যাসেটগুলো (assets) কম্প্রেস করুন। ট্যাপ করার জায়গাগুলো যথেষ্ট বড় কি না তা পরীক্ষা করুন। গতি এবং স্পষ্টতা কোনো বোনাস নয় যা আপনি শেষে যোগ করবেন; এগুলো হলো সেই ভিত্তি যার ওপর সবকিছু দাঁড়িয়ে থাকে।
শুধুমাত্র নিজের মেশিনে পরীক্ষা করা
আমি একটি মাত্র ল্যাপটপে, একটি মাত্র ব্রাউজারে এবং একটি নির্দিষ্ট স্ক্রিন রেজোলিউশনে পুরো সাইটটি তৈরি করেছিলাম। আমার মেশিনে সবকিছু নিখুঁত দেখাচ্ছিল। তারপর একজন বন্ধু তার আইফোনে এটি খুলল। বাটনগুলো একে অপরের ওপর উঠে আসছিল। টেক্সট তার কন্টেইনার থেকে বেরিয়ে যাচ্ছিল। অন্য একজন বন্ধু ম্যাক-এ সাফারি (Safari) ব্যবহার করল, এবং পুরো একটি CSS গ্রিড লেআউট ভেঙে পড়ে একটি অগোছালো স্তূপে পরিণত হলো। আমি মনে মনে ধরে নিয়েছিলাম যে যদি এটি আমার জন্য কাজ করে, তবে এটি সবার জন্য কাজ করবে। সেই ধারণাটির কারণে আমাকে একটি সপ্তাহান্ত জুড়ে পাগলের মতো ত্রুটি সংশোধন (hotfixes) করতে হয়েছিল এবং লজ্জাজনক ক্ষমা চাইতে হয়েছিল।
আমার ভুলটি পুনরাবৃত্তি করবেন না। পাবলিশ করার আগে আপনার সাইটটি ক্রোম (Chrome), ফায়ারফক্স (Firefox), সাফারি (Safari) এবং এজ (Edge)-এ চালিয়ে দেখুন। বিভিন্ন প্রস্থের ফোন, ট্যাবলেট এবং ল্যাপটপ সিমুলেট করতে আপনার ব্রাউজারের ডেভেলপার টুলস ব্যবহার করুন। প্রতিটি লিঙ্ক ক্লিক করুন। প্রতিটি ফর্ম সাবমিট করুন। উইন্ডোটিকে বারবার ছোট-বড় করে দেখুন। আপনি টেস্টিংয়ের সময় যে বাগগুলো (bugs) ধরবেন, সেগুলো প্রোডাকশনে ব্যবহারকারীরা খুঁজে পাওয়ার চেয়ে অনেক বেশি সাশ্রয়ী।
ফিডব্যাককে ব্যক্তিগত আক্রমণ হিসেবে দেখা
প্রজেক্টটি শেয়ার করতে গিয়ে আমি বেশ নার্ভাস বোধ করছিলাম। যদি মানুষ এটি অপছন্দ করে? যখন একজন সহকর্মী এমন একটি ফিচার বাদ দেওয়ার পরামর্শ দিলেন যার পেছনে আমি ব্যয় করেছিলাম