অফলাইন UX ডিজাইন নির্দেশিকা

ধীর নেটওয়ার্ক এবং অফলাইনের জন্য ওয়েব অভিজ্ঞতা ডিজাইন করার জন্য একটি নির্দেশিকা৷

এই নিবন্ধটি কীভাবে ধীরগতির নেটওয়ার্ক এবং অফলাইন উভয় ক্ষেত্রেই একটি দুর্দান্ত অভিজ্ঞতা তৈরি করতে হয় তার ডিজাইন নির্দেশিকা প্রদান করে৷

একটি নেটওয়ার্ক সংযোগের গুণমান বিভিন্ন কারণের দ্বারা প্রভাবিত হতে পারে যেমন:

  • একটি প্রদানকারীর দরিদ্র কভারেজ.
  • চরম আবহাওয়া পরিস্থিতি।
  • বিদ্যুৎ বিভ্রাটের.
  • স্থায়ী "মৃত অঞ্চলে" প্রবেশ করা যেমন নেটওয়ার্ক সংযোগগুলিকে ব্লক করে এমন প্রাচীর সহ বিল্ডিংগুলিতে।
  • অস্থায়ী "মৃত অঞ্চলে" প্রবেশ করা যেমন ট্রেনে ভ্রমণ করার সময় এবং একটি টানেলের মধ্য দিয়ে যাওয়ার সময়।
  • টাইম-বক্সযুক্ত ইন্টারনেট সংযোগ যেমন বিমানবন্দর বা হোটেলে।
  • সাংস্কৃতিক অনুশীলনের জন্য নির্দিষ্ট সময় বা দিনে সীমিত বা কোনো ইন্টারনেট অ্যাক্সেস প্রয়োজন।

আপনার লক্ষ্য হল একটি ভাল অভিজ্ঞতা প্রদান করা যা সংযোগের পরিবর্তনের প্রভাবকে কম করে।

আপনার ব্যবহারকারীদের নেটওয়ার্ক সংযোগ খারাপ থাকলে তাদের কী দেখাবেন তা স্থির করুন৷

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

একটি নেটওয়ার্ক সংযোগের সাফল্য বা ব্যর্থতা সম্পর্কে চিন্তা করার সময় আপনাকে এই গুরুত্বপূর্ণ UX প্রশ্নগুলি জিজ্ঞাসা করতে হবে:

  • একটি সংযোগের সাফল্য বা ব্যর্থতা নির্ধারণ করতে আপনি কতক্ষণ অপেক্ষা করেন?
  • সাফল্য বা ব্যর্থতা নির্ধারণ করা হচ্ছে যখন আপনি কি করতে পারেন?
  • ব্যর্থতার ক্ষেত্রে আপনার কি করা উচিত?
  • আপনি কিভাবে উপরের ব্যবহারকারীকে অবহিত করবেন?

ব্যবহারকারীদের তাদের বর্তমান অবস্থা এবং অবস্থার পরিবর্তন সম্পর্কে অবহিত করুন

ব্যবহারকারীদের নেটওয়ার্ক ব্যর্থতা এবং অ্যাপ্লিকেশনের বর্তমান অবস্থার সময় তারা এখনও যে পদক্ষেপগুলি নিতে পারে সে সম্পর্কে ব্যবহারকারীকে জানান। উদাহরণস্বরূপ, একটি বিজ্ঞপ্তি বলতে পারে:

আপনার একটি খারাপ নেটওয়ার্ক সংযোগ আছে বলে মনে হচ্ছে. চিন্তার কিছু নেই! নেটওয়ার্ক পুনরুদ্ধার করা হলে বার্তা পাঠানো হবে।

ইমোজয় ইমোজি মেসেজিং অ্যাপ ব্যবহারকারীকে অবহিত করে যখন অবস্থার পরিবর্তন ঘটে।
যত তাড়াতাড়ি সম্ভব অবস্থার পরিবর্তন ঘটলে ব্যবহারকারীকে স্পষ্টভাবে জানান।
I/O 2016 অ্যাপ্লিকেশানটি ব্যবহারকারীকে অবহিত করে যখন অবস্থার পরিবর্তন ঘটে।
Google I/O অ্যাপ একটি "টোস্ট" ব্যবহার করে ব্যবহারকারীকে জানাতে যে তারা অফলাইনে ছিল।

নেটওয়ার্ক সংযোগের উন্নতি হলে বা পুনরুদ্ধার করা হলে ব্যবহারকারীদের জানান

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

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

এর একটি উদাহরণ হবে ক্রোম প্ল্যাটফর্ম স্ট্যাটাস যা অ্যাপ আপডেট করা হলে ব্যবহারকারীর কাছে একটি নোট পোস্ট করে।

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

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

ম্যাটেরিয়াল মানি অ্যাপটি পুরানো।
ম্যাটেরিয়াল মানি ক্যাশে রেট...
উপাদান অর্থ আপডেট করা হয়েছে
…এবং অ্যাপ আপডেট করা হলে ব্যবহারকারীকে অবহিত করে।

নিউজ অ্যাপের মতো অ্যাপ্লিকেশানগুলি ব্যবহারকারীকে নতুন বিষয়বস্তু সম্পর্কে অবহিত করে একটি সহজ ট্যাপ-টু-আপডেট বিজ্ঞপ্তি দেখাতে পারে। স্বতঃ-আপডেট ব্যবহারকারীদের তাদের জায়গা হারাতে হবে।

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

বর্তমান প্রাসঙ্গিক অবস্থা প্রতিফলিত করতে UI আপডেট করুন

UI এর প্রতিটি বিটের নিজস্ব প্রসঙ্গ এবং কার্যকারিতা থাকতে পারে যা সফল সংযোগের প্রয়োজন হলে তার উপর নির্ভর করে পরিবর্তিত হবে। একটি উদাহরণ হল একটি ই-কমার্স সাইট যা অফলাইনে ব্রাউজ করা যায়। একটি সংযোগ পুনঃস্থাপিত না হওয়া পর্যন্ত কিনুন বোতাম এবং মূল্য নিষ্ক্রিয় করা হবে।

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

ব্যবহারকারীকে শিক্ষিত করুন যাতে তারা বুঝতে পারে অফলাইন মডেল কী৷

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

ডিফল্টরূপে একটি অফলাইন অভিজ্ঞতা প্রদান করুন

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

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

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

অ্যাপটি অফলাইন ব্যবহারের জন্য প্রস্তুত হলে ব্যবহারকারীকে জানান

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

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

I/O অ্যাপ অফলাইন।
অ্যাপটি অফলাইন ব্যবহারের জন্য প্রস্তুত হলে Google I/O 2016 অ্যাপ ব্যবহারকারীকে জানিয়ে দেয়...
ক্রোম স্ট্যাটাস সাইট অফলাইন।
…এবং তাই ক্রোম প্ল্যাটফর্ম স্ট্যাটাস সাইট, যা দখলকৃত সঞ্চয়স্থান সম্পর্কে তথ্য অন্তর্ভুক্ত করে।

ডেটা-ভারী অ্যাপগুলির জন্য ইন্টারফেসের একটি সুস্পষ্ট অংশ 'অফলাইনের জন্য সংরক্ষণ করুন' করুন৷

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

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

অফলাইনে কি পাওয়া যায় তা স্পষ্ট করুন

আপনি যে বিকল্পটি প্রদান করছেন সে সম্পর্কে পরিষ্কার হন। আপনাকে একটি ট্যাব বা সেটিং দেখাতে হতে পারে যা একটি "অফলাইন লাইব্রেরি" বা বিষয়বস্তু সূচী দেখায়, যাতে ব্যবহারকারী সহজেই দেখতে পারে তারা তাদের ফোনে কী সঞ্চয় করেছে এবং কী সংরক্ষণ করা দরকার৷ সেটিংস সংক্ষিপ্ত এবং ডেটা কোথায় সংরক্ষণ করা হবে এবং কার এতে অ্যাক্সেস আছে তা পরিষ্কার করে নিন।

একটি কর্মের প্রকৃত মূল্য দেখান

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

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

হ্যাক অভিজ্ঞতা প্রতিরোধ করতে সাহায্য করুন

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

এক ডিভাইস থেকে অন্য ডিভাইসে অভিজ্ঞতা হস্তান্তরযোগ্য করুন

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

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

অন্তর্ভুক্তিমূলক ডিজাইন অভিজ্ঞতা তৈরি করুন

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

সহজ, সংক্ষিপ্ত ভাষা ব্যবহার করুন

ভাল UX শুধুমাত্র একটি ভাল ডিজাইন করা ইন্টারফেস সম্পর্কে নয়। এতে ব্যবহারকারীর পথের পাশাপাশি অ্যাপে ব্যবহৃত শব্দ অন্তর্ভুক্ত থাকে। অ্যাপ বা স্বতন্ত্র UI উপাদানগুলির অবস্থা ব্যাখ্যা করার সময় প্রযুক্তিগত শব্দার্থ এড়িয়ে চলুন। বিবেচনা করুন যে "অ্যাপ অফলাইন" শব্দটি ব্যবহারকারীকে অ্যাপের বর্তমান অবস্থা জানাতে পারে না।

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

অ্যাক্সেসযোগ্য ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে একাধিক ডিজাইন ডিভাইস ব্যবহার করুন

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

ভুল বোঝাবুঝি রোধ করতে, ব্যবহারকারীর কাছে একাধিক উপায়ে বিভিন্ন অবস্থা প্রকাশ করুন, উদাহরণস্বরূপ রঙ, লেবেল এবং UI উপাদানগুলির সাথে৷

করবেন না
শুধুমাত্র রঙ ব্যবহার করে একটি খারাপ উদাহরণ।
যা ঘটছে তা বর্ণনা করার একমাত্র উপায় হিসাবে রঙ ব্যবহার করা এড়িয়ে চলুন।
করবেন
একটি ভাল উদাহরণ যা একটি ত্রুটি দেখানোর জন্য রঙ এবং পাঠ্য ব্যবহার করে।
অর্থ বোঝাতে নকশা উপাদানের মিশ্রণ ব্যবহার করুন।

অর্থ প্রকাশ করে এমন আইকন ব্যবহার করুন

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

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

বিভিন্ন আইকনের উদাহরণ যা অফলাইনে বোঝায়

অফলাইন মানে প্রেক্ষাপটের উপর নির্ভর করে অনেক কিছু বোঝাতে পারে, যেমন ডাউনলোড, এক্সপোর্ট, পিন ইত্যাদি। আরও অনুপ্রেরণার জন্য মেটেরিয়াল ডিজাইন আইকন সেটটি চেকআউট করুন।

অন্যান্য ফিডব্যাক মেকানিজমের সাথে কঙ্কাল লেআউট ব্যবহার করুন

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

একটি কঙ্কাল লেআউট উদাহরণ.
নিবন্ধটি ডাউনলোড করার সময় একটি কঙ্কাল প্লেসহোল্ডার লেআউট দেখানো হয়েছে...
একটি লোড নিবন্ধ উদাহরণ.
… যেটি ডাউনলোড শেষ হলে বাস্তব বিষয়বস্তুর সাথে প্রতিস্থাপিত হয়।

কন্টেন্ট ব্লক করবেন না

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

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

পরবর্তী বিলিয়নের জন্য ডিজাইন

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

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

উপসংহার

অফলাইন UX-এর জন্য শিক্ষা হল মূল কারণ ব্যবহারকারীরা এই ধারণাগুলির সাথে অপরিচিত। পরিচিত জিনিসগুলির সাথে সম্পর্ক তৈরি করার চেষ্টা করুন, যেমন পরবর্তীতে ব্যবহারের জন্য ডাউনলোড করা অফলাইন ডেটার মতোই।

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

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