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

প্রকাশিত: ১০ নভেম্বর, ২০১৬

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

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

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

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

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

সংযোগ ব্যর্থতা কীভাবে মোকাবেলা করবেন তা নির্ধারণ করতে, নিজেকে এই গুরুত্বপূর্ণ UX প্রশ্নগুলি জিজ্ঞাসা করুন:

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

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

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

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

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

সংযোগের উন্নতি সম্পর্কে ব্যবহারকারীদের অবহিত করুন

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

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

এর একটি উদাহরণ হল Chrome Platform Status , যা অ্যাপটি আপডেট হওয়ার পরে ব্যবহারকারীকে একটি নোট পোস্ট করে।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

I/O অ্যাপ অফলাইন।
গুগল আই/ও ২০১৬ অ্যাপটি অফলাইনে ব্যবহারের জন্য প্রস্তুত হলে ব্যবহারকারীকে অবহিত করেছিল...
Chrome স্ট্যাটাস সাইটটি অফলাইনে আছে।
…এবং ক্রোম প্ল্যাটফর্ম স্ট্যাটাস সাইটটিও তাই, যেখানে দখলকৃত স্টোরেজ সম্পর্কে তথ্য রয়েছে।

ইন্টারফেসে 'অফলাইনের জন্য সংরক্ষণ করুন' স্পষ্ট করে তুলুন

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

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

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

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

কোনও কাজের প্রকৃত খরচ দেখান

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

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

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

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

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

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

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

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

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

সরল, স্পষ্ট ভাষা ব্যবহার করুন

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

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

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

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

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

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

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

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

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

অফলাইনে বোঝাতে বিভিন্ন আইকনের উদাহরণ
কিছু আইকন যার অর্থ 'অফলাইন' হতে পারে।

আরও অনুপ্রেরণার জন্য, মেটেরিয়াল ডিজাইন আইকন সেটটি দেখুন।

কঙ্কাল লেআউট এবং অন্যান্য প্রতিক্রিয়া প্রক্রিয়া ব্যবহার করুন

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

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

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

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

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

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

পরবর্তী বিলিয়নের জন্য নকশা করুন

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

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

উপসংহার

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

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

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