دستورالعمل های طراحی UX آفلاین

راهنمای طراحی تجربیات وب برای شبکه های کند و آفلاین.

مصطفی کورتولدو
مصطفی کورتولدو
توماس اشتاینر
توماس اشتاینر

این مقاله دستورالعمل‌های طراحی را در مورد چگونگی ایجاد یک تجربه عالی در شبکه‌های کند و آفلاین ارائه می‌کند.

کیفیت اتصال شبکه می تواند تحت تأثیر عوامل متعددی از جمله:

  • پوشش ضعیف ارائه دهنده
  • شرایط آب و هوایی شدید.
  • قطع برق.
  • ورود به "مناطق مرده" دائمی مانند ساختمانهایی با دیوارهایی که اتصالات شبکه را مسدود می کنند.
  • ورود به "مناطق مرده" موقت مانند هنگام سفر با قطار و عبور از تونل.
  • اتصالات اینترنتی با جعبه زمانی مانند اتصالات در فرودگاه ها یا هتل ها.
  • اقدامات فرهنگی که نیاز به دسترسی محدود یا بدون دسترسی به اینترنت در زمان ها یا روزهای خاص دارند.

هدف شما ارائه یک تجربه خوب است که تاثیر تغییرات در اتصال را کاهش دهد.

تصمیم بگیرید که در صورت داشتن اتصال شبکه بد به کاربران خود چه چیزی را نشان دهید

اولین سوالی که باید پرسیده شود این است که موفقیت و شکست یک اتصال شبکه چگونه است؟ یک اتصال موفق، تجربه آنلاین عادی برنامه شما است. با این حال، شکست یک اتصال می‌تواند هم وضعیت آفلاین برنامه شما باشد و هم نحوه عملکرد برنامه در هنگام وجود یک شبکه تاخیری.

هنگامی که به موفقیت یا شکست یک اتصال شبکه فکر می کنید، باید این سوالات مهم UX را از خود بپرسید:

  • چه مدت برای تعیین موفقیت یا شکست یک اتصال صبر می کنید؟
  • وقتی موفقیت یا شکست مشخص می شود چه کاری می توانید انجام دهید؟
  • در صورت شکست چه باید کرد؟
  • چگونه کاربر را از موارد فوق مطلع می کنید؟

کاربران را از وضعیت فعلی و تغییر وضعیت خود مطلع کنید

کاربر را از اقداماتی که در صورت خرابی شبکه هنوز می تواند انجام دهد و وضعیت فعلی برنامه را مطلع کنید. به عنوان مثال، یک اعلان می تواند بگوید:

به نظر می رسد اتصال شبکه بدی دارید. نگران نباشید! پس از بازیابی شبکه پیام ها ارسال می شود.

برنامه پیام‌رسانی Emojoy به کاربر اطلاع می‌دهد که در حالت تغییر حالت رخ می‌دهد.
هنگامی که تغییری در وضعیت رخ می دهد در اسرع وقت به کاربر اطلاع دهید.
برنامه I/O 2016 به کاربر اطلاع می دهد که چه زمانی تغییری در حالت رخ می دهد.
برنامه Google I/O از یک «نان تست» استفاده کرد تا به کاربر اطلاع دهد که چه زمانی آفلاین است.

در صورت بهبود یا بازیابی اتصال شبکه به کاربران اطلاع دهید

اینکه چگونه به کاربر اطلاع دهید که اتصال شبکه او بهبود یافته است به برنامه شما بستگی دارد. برنامه‌هایی مانند اپلیکیشن بازار سهام که اطلاعات فعلی را در اولویت قرار می‌دهند باید در اسرع وقت به‌روزرسانی خودکار شوند و به کاربر اطلاع دهند.

توصیه می شود با استفاده از یک نشانه بصری مانند، برای مثال، یک عنصر نان تست طراحی مواد، به کاربر اطلاع دهید که برنامه وب شما "در پس زمینه" به روز شده است. این شامل تشخیص حضور یک سرویس دهنده و به روز رسانی محتوای مدیریت شده آن است. می توانید یک نمونه کد از این عملکرد در محل کار را اینجا ببینید.

یکی از نمونه‌های آن وضعیت پلتفرم کروم است که وقتی برنامه به‌روزرسانی شد، یادداشتی را برای کاربر ارسال می‌کند.

یک نمونه برنامه آب و هوا
برخی از برنامه ها، مانند برنامه هواشناسی، نیاز به به روز رسانی خودکار دارند زیرا داده های قدیمی مفید نیستند.
وضعیت Chrome از یک نان تست استفاده می کند
برنامه‌هایی مانند وضعیت Chrome به کاربر اطلاع می‌دهند که محتوا از طریق نان تست به‌روزرسانی شده است.

همچنین می‌توانید آخرین باری که برنامه به‌روزرسانی شده است را همیشه در یک فضای برجسته نشان دهید. به عنوان مثال، این برای یک برنامه مبدل ارز مفید خواهد بود.

برنامه Material Money قدیمی است.
نرخ‌های ذخایر پول مواد…
پول مادی به روز شده است
... و هنگامی که برنامه به روز شد به کاربر اطلاع می دهد.

برنامه‌هایی مانند برنامه‌های خبری می‌توانند یک اعلان ساده برای به‌روزرسانی نشان دهند که کاربر را از محتوای جدید مطلع می‌کند. به‌روزرسانی خودکار باعث می‌شود کاربران جایگاه خود را از دست بدهند.

یک نمونه برنامه خبری، Tailpiece در حالت عادی خود
Tailpiece، یک روزنامه آنلاین، به طور خودکار آخرین اخبار را دانلود می کند…
نمونه برنامه خبری، Tailpiece وقتی آماده به‌روزرسانی است
...اما به کاربران اجازه دهید به صورت دستی بازخوانی کنند تا جایگاه خود را در یک مقاله از دست ندهند.

رابط کاربری را به‌روزرسانی کنید تا وضعیت متنی فعلی را منعکس کند

هر بیت از UI ممکن است زمینه و عملکرد خاص خود را داشته باشد که بسته به اینکه آیا نیاز به اتصال موفق داشته باشد تغییر می کند. یک مثال می تواند یک سایت تجارت الکترونیکی باشد که می تواند به صورت آفلاین مرور شود. دکمه خرید و قیمت گذاری تا زمانی که اتصال مجدد برقرار شود غیرفعال می شود.

سایر اشکال حالت های متنی می تواند شامل داده ها باشد. به عنوان مثال، برنامه مالی Robinhood به کاربران امکان خرید سهام را می دهد و از رنگ و گرافیک استفاده می کند تا در زمان باز بودن بازار به کاربر اطلاع دهد. وقتی بازار بسته می شود، کل رابط سفید می شود و سپس خاکستری می شود. هنگامی که ارزش سهام افزایش یا کاهش می یابد، هر ویجت سهام جداگانه بسته به وضعیت خود سبز یا قرمز می شود.

به کاربر آموزش دهید تا بفهمد مدل آفلاین چیست

آفلاین یک مدل ذهنی جدید برای همه است. شما باید به کاربران خود در مورد تغییراتی که در صورت عدم اتصال به آنها رخ می دهد آموزش دهید. آنها را از محل ذخیره داده های بزرگ مطلع کنید و تنظیماتی را برای تغییر رفتار پیش فرض به آنها بدهید. اطمینان حاصل کنید که از چندین مؤلفه طراحی رابط کاربری مانند زبان آموزنده، نمادها، اعلان ها، رنگ ها و تصاویر برای انتقال این ایده ها به طور جمعی به جای تکیه بر یک انتخاب طراحی واحد، مانند یک نماد به تنهایی، برای بیان کل داستان استفاده می کنید.

به طور پیش فرض یک تجربه آفلاین ارائه دهید

اگر برنامه شما به داده های زیادی نیاز ندارد، آن داده ها را به طور پیش فرض کش کنید. اگر کاربران فقط با اتصال شبکه به داده های خود دسترسی داشته باشند، می توانند به طور فزاینده ای ناامید شوند. سعی کنید تجربه را تا حد امکان پایدار کنید. یک اتصال ناپایدار باعث می شود برنامه شما غیرقابل اعتماد باشد، جایی که برنامه ای که تأثیر خرابی شبکه را کاهش می دهد برای کاربر احساس جادویی می کند.

سایت های خبری می توانند از دانلود خودکار و ذخیره خودکار آخرین اخبار بهره مند شوند تا کاربر بتواند اخبار امروز را بدون اتصال بخواند، شاید متن را بدون تصاویر مقاله دانلود کند. همچنین با رفتار کاربر سازگار شوید. به عنوان مثال، اگر بخش ورزشی همان چیزی است که آنها معمولاً مشاهده می کنند، آن را در اولویت دانلود قرار دهید.

Tailpiece به کاربر اطلاع می دهد که با ویجت های طراحی مختلف آفلاین است.
اگر دستگاه آفلاین باشد، Tailpiece با یک پیام وضعیت به کاربر اطلاع می‌دهد…
Tailpiece دارای یک نشانگر بصری است که نشان می دهد چه بخش هایی برای استفاده آفلاین آماده هستند.
... به آنها اطلاع دهید که می توانند حداقل تا حدی هنوز از برنامه استفاده کنند.

زمانی که برنامه برای مصرف آفلاین آماده است به کاربر اطلاع دهید

هنگامی که یک برنامه وب برای اولین بار بارگیری می شود، باید به کاربر نشان دهید که آیا برای استفاده آفلاین آماده است یا خیر. این کار را با ویجتی انجام دهید که بازخورد مختصری درباره یک عملیات از طریق پیامی در پایین صفحه ارائه می‌کند ، مثلاً زمانی که یک بخش همگام‌سازی شده یا یک فایل داده دانلود شده است.

دوباره به زبانی که استفاده می کنید فکر کنید تا مطمئن شوید که برای مخاطبان شما مناسب است. اطمینان حاصل کنید که پیام در همه مواردی که از آن استفاده می شود یکسان است. اصطلاح آفلاین معمولاً توسط مخاطبان غیر فنی اشتباه درک می شود، بنابراین از زبانی مبتنی بر عمل استفاده کنید که مخاطب شما بتواند با آن ارتباط برقرار کند.

برنامه ورودی/خروجی آفلاین
برنامه Google I/O 2016 زمانی که برنامه برای استفاده آفلاین آماده است به کاربر اطلاع می دهد…
سایت وضعیت کروم آفلاین است.
...و همچنین سایت وضعیت پلتفرم Chrome، که شامل اطلاعاتی در مورد فضای ذخیره‌سازی اشغال شده است.

«ذخیره برای آفلاین» را به بخشی واضح از رابط برنامه‌های پر داده تبدیل کنید

اگر برنامه‌ای از مقادیر زیادی داده استفاده می‌کند، مطمئن شوید که یک سوئیچ یا پین برای اضافه کردن یک مورد برای استفاده آفلاین به جای دانلود خودکار وجود دارد، مگر اینکه کاربر به طور خاص از طریق منوی تنظیمات این رفتار را درخواست کرده باشد. اطمینان حاصل کنید که پین ​​یا رابط کاربری دانلود توسط سایر عناصر رابط کاربری مبهم نیست و این ویژگی برای کاربر واضح است.

یک مثال می تواند پخش کننده موسیقی باشد که به فایل های داده بزرگ نیاز دارد. کاربر از هزینه داده مربوطه آگاه است، اما ممکن است بخواهد از پخش کننده به صورت آفلاین نیز استفاده کند. برای دانلود موسیقی برای استفاده بعدی، کاربر باید از قبل برنامه‌ریزی کند، بنابراین ممکن است در حین ورود به سیستم، آموزش در مورد آن لازم باشد.

آنچه را که به صورت آفلاین در دسترس است مشخص کنید

در مورد گزینه ای که ارائه می کنید شفاف باشید. ممکن است لازم باشد برگه یا تنظیماتی را نشان دهید که «کتابخانه آفلاین» یا فهرست محتوا را نشان می‌دهد، بنابراین کاربر به راحتی می‌تواند آنچه را در تلفن خود ذخیره کرده است و آنچه باید ذخیره شود، ببیند. مطمئن شوید که تنظیمات مختصر هستند و مشخص است که داده‌ها در کجا ذخیره می‌شوند و چه کسی به آن دسترسی دارد.

هزینه واقعی یک اقدام را نشان دهید

بسیاری از کاربران قابلیت آفلاین را معادل «دانلود» می دانند. کاربران در کشورهایی که اتصالات شبکه به طور مرتب قطع می‌شود یا در دسترس نیستند، اغلب محتوا را با سایر کاربران به اشتراک می‌گذارند یا در صورت داشتن اتصال، محتوا را برای استفاده آفلاین ذخیره می‌کنند.

کاربران در طرح های داده ممکن است به دلیل ترس از هزینه از دانلود فایل های بزرگ اجتناب کنند، بنابراین ممکن است بخواهید هزینه مربوطه را نیز نمایش دهید تا کاربران بتوانند یک مقایسه فعال برای یک فایل یا کار خاص انجام دهند. به عنوان مثال، اگر برنامه موسیقی بالا بتواند تشخیص دهد که آیا کاربر در یک طرح داده است یا خیر و اندازه فایل را نشان دهد تا کاربران بتوانند هزینه یک فایل را ببینند.

به جلوگیری از تجارب هک شده کمک کنید

اغلب کاربران بدون اینکه متوجه شوند در حال انجام آن هستند یک تجربه را هک می کنند. به عنوان مثال، قبل از برنامه‌های وب اشتراک‌گذاری فایل مبتنی بر ابر، معمول بود که کاربران فایل‌های بزرگ را ذخیره می‌کردند و آنها را به ایمیل‌ها پیوست می‌کردند تا بتوانند ویرایش را از دستگاه دیگری ادامه دهند. مهم است که به تجربه هک شده آنها کشیده نشوید، بلکه به آنچه که آنها در تلاش برای رسیدن به آن هستند نگاه کنید. به عبارت دیگر، به جای اینکه به این فکر کنید که چگونه می‌توانید پیوست کردن یک فایل بزرگ را کاربرپسندتر کنید، مشکل اشتراک‌گذاری فایل‌های بزرگ در چندین دستگاه را حل کنید.

تجربیات را از یک دستگاه به دستگاه دیگر منتقل کنید

هنگام ساختن شبکه‌های پوسته پوسته، سعی کنید به محض بهبود اتصال، همگام‌سازی کنید تا تجربه قابل انتقال باشد. به عنوان مثال، تصور کنید یک اپلیکیشن مسافرتی در اواسط رزرو، اتصال شبکه خود را از دست داده است. هنگامی که اتصال دوباره برقرار می شود، برنامه با حساب کاربر همگام می شود و به آنها اجازه می دهد رزرو خود را در دستگاه دسکتاپ خود ادامه دهند. ناتوانی در انتقال تجربیات می تواند برای کاربران بسیار آزاردهنده باشد.

کاربر را از وضعیت فعلی داده های خود مطلع کنید. برای مثال، می‌توانید نشان دهید که آیا برنامه همگام‌سازی شده است یا خیر. در صورت امکان به آنها آموزش دهید، اما سعی کنید آنها را با پیام رسانی سنگین نکنید.

تجارب طراحی فراگیر ایجاد کنید

هنگام طراحی سعی کنید با ارائه ابزارهای طراحی معنادار، زبان ساده، نماد نگاری استاندارد و تصاویر معنادار که کاربر را برای تکمیل عمل یا کار به جای جلوگیری از پیشرفت آنها راهنمایی کند، فراگیر باشید.

از زبان ساده و مختصر استفاده کنید

UX خوب فقط به یک رابط کاربری خوب طراحی شده نیست. این شامل مسیری است که کاربر طی می کند و همچنین کلمات استفاده شده در برنامه. هنگام توضیح وضعیت برنامه یا اجزای UI فردی از اصطلاحات فنی خودداری کنید. در نظر بگیرید که عبارت "برنامه آفلاین" ممکن است وضعیت فعلی برنامه را به کاربر منتقل نکند.

نکن
نماد کارگر خدمات نمونه بدی است.
از عباراتی که برای کاربران غیر فنی قابل درک نیست اجتناب کنید.
انجام دادن
نماد دانلود نمونه خوبی است.
از زبان و تصاویری استفاده کنید که عمل را توصیف می کند.

از چندین دستگاه طراحی برای ایجاد تجربیات کاربر در دسترس استفاده کنید

از زبان، رنگ و اجزای بصری برای نشان دادن تغییر وضعیت یا وضعیت فعلی استفاده کنید. صرفاً استفاده از رنگ برای نشان دادن وضعیت ممکن است مورد توجه کاربر قرار نگیرد و برای کاربران دارای ناتوانی بینایی غیرقابل دسترسی باشد. همچنین، غریزه طراحان استفاده از رابط کاربری خاکستری برای نشان دادن آفلاین است، اما این می تواند معنای بارگذاری شده ای در وب داشته باشد. UI خاکستری مانند عناصر ورودی در فرم نیز به این معنی است که یک عنصر غیرفعال است. اگر فقط از رنگ برای به تصویر کشیدن حالت استفاده کنید، ممکن است باعث سردرگمی شود.

برای جلوگیری از سوء تفاهم، حالت های مختلف را به روش های مختلف به کاربر بیان کنید، به عنوان مثال با رنگ، برچسب ها و اجزای رابط کاربری.

نکن
یک مثال بد فقط با استفاده از رنگ.
از استفاده از رنگ به عنوان تنها وسیله برای توصیف آنچه در حال رخ دادن است اجتناب کنید.
انجام دادن
یک مثال خوب که از رنگ و متن برای نشان دادن خطا استفاده می کند.
از ترکیبی از عناصر طراحی برای انتقال معنا استفاده کنید.

از نمادهایی استفاده کنید که معنی را منتقل می کنند

اطمینان حاصل کنید که اطلاعات با برچسب های متنی معنی دار و همچنین نمادها به درستی منتقل می شود. آیکون ها به تنهایی می توانند مشکل ساز باشند، زیرا مفهوم آفلاین در وب نسبتاً جدید است. کاربران ممکن است آیکون های مورد استفاده خود را به اشتباه درک کنند. برای مثال، استفاده از فلاپی دیسک برای ذخیره برای نسل قدیمی‌تر منطقی است، اما کاربران جوانی که هرگز فلاپی دیسک را ندیده‌اند ممکن است با این استعاره گیج شوند. به همین ترتیب، نماد منوی 'همبرگر' زمانی که بدون برچسب ارائه می شود باعث سردرگمی کاربران می شود.

هنگام معرفی یک نماد آفلاین، سعی کنید با تصاویر استاندارد صنعت (در صورت وجود آنها) و همچنین ارائه یک برچسب متنی و توضیحات سازگار باقی بمانید. به عنوان مثال، ذخیره کردن برای آفلاین ممکن است یک نماد دانلود معمولی باشد یا شاید اگر عمل شامل همگام‌سازی باشد، می‌تواند یک نماد همگام‌سازی باشد. برخی از اقدامات ممکن است به عنوان ذخیره برای آفلاین به جای نشان دادن وضعیت شبکه تفسیر شود. به جای ارائه یک مفهوم انتزاعی به کاربر، به عملی که می‌خواهید منتقل کنید فکر کنید. برای مثال، ذخیره یا دانلود داده‌ها مبتنی بر اقدام است.

نمونه آیکون های مختلف که به صورت آفلاین منتقل می شوند

آفلاین می‌تواند به معنای چند چیز بسته به زمینه باشد، مانند دانلود، صادرات، پین، و غیره. برای الهام بیشتر مجموعه نماد طراحی مواد را بررسی کنید.

از طرح بندی های اسکلت با مکانیسم های بازخورد دیگر استفاده کنید

طرح بندی اسکلت در اصل یک نسخه سیمی از برنامه شما است که در حین بارگذاری محتوا نمایش داده می شود. این به کاربر نشان می دهد که محتوا در شرف بارگیری است. همچنین استفاده از رابط کاربری پیش بارگذاری کننده را نیز در نظر بگیرید، با یک برچسب متنی که به کاربر اطلاع می دهد که برنامه در حال بارگیری است. یک مثال می تواند ضربان محتوای Wireframe باشد که به برنامه این احساس را می دهد که زنده و در حال بارگذاری است. این به کاربر اطمینان می دهد که چیزی در حال رخ دادن است و به جلوگیری از ارسال مجدد یا به روز رسانی برنامه شما کمک می کند.

نمونه طرح اسکلت.
در حین بارگیری مقاله، یک چیدمان مکان‌دار اسکلت نشان داده می‌شود…
نمونه مقاله بارگذاری شده
... که پس از پایان دانلود با محتوای واقعی جایگزین می شود.

محتوا را مسدود نکنید

در برخی از برنامه‌ها، کاربر ممکن است اقدامی مانند ایجاد یک سند جدید را آغاز کند. برخی از برنامه‌ها سعی می‌کنند به یک سرور متصل شوند تا سند جدید را همگام‌سازی کنند و برای نشان دادن این موضوع، یک گفتگوی مدال بارگیری مزاحم را نمایش می‌دهند که کل صفحه را پوشش می‌دهد. اگر کاربر اتصال شبکه پایداری داشته باشد، ممکن است به خوبی کار کند، اما اگر شبکه ناپایدار باشد، نمی‌تواند از این عمل فرار کند و رابط کاربر عملاً او را از انجام هر کار دیگری مسدود می‌کند. از درخواست های شبکه ای که محتوا را مسدود می کنند باید اجتناب شود. به کاربر اجازه دهید به مرور برنامه شما و کارهای صفی که پس از بهبود اتصال انجام و همگام‌سازی می‌شوند، ادامه دهد.

وضعیت یک اقدام را با ارائه بازخورد به کاربران خود نشان دهید. به عنوان مثال، اگر کاربر در حال ویرایش یک سند است، طراحی بازخورد را تغییر دهید تا کاملاً با زمانی که آنلاین است متفاوت باشد، اما همچنان نشان دهد که فایل او "ذخیره" شده است و زمانی که به شبکه متصل است همگام می شود. این به کاربر در مورد وضعیت های مختلف موجود آموزش می دهد و به او اطمینان می دهد که وظیفه یا عملکرد آنها ذخیره شده است. این مزیت بیشتری برای افزایش اعتماد به نفس کاربر با استفاده از برنامه شما دارد.

طراحی برای میلیارد بعدی

در بسیاری از مناطق، دستگاه‌های ارزان‌قیمت رایج هستند، اتصال غیرقابل اعتماد است و برای بسیاری از کاربران، داده‌ها مقرون به صرفه نیستند. شما باید با شفاف بودن و صرفه جویی در داده ها اعتماد کاربران را به دست آورید. در مورد راه هایی برای کمک به کاربران در اتصالات ضعیف و ساده سازی رابط برای کمک به سرعت بخشیدن به وظایف فکر کنید. همیشه سعی کنید قبل از دانلود محتوای پر داده از کاربران سوال کنید.

گزینه های پهنای باند کم را برای کاربران در اتصالات تاخیری ارائه دهید. بنابراین اگر اتصال شبکه کند است، دارایی های کوچک را ارائه دهید. گزینه ای برای انتخاب دارایی های با کیفیت بالا یا پایین ارائه دهید.

نتیجه

آموزش کلید UX آفلاین است زیرا کاربران با این مفاهیم آشنا نیستند. سعی کنید با چیزهایی که آشنا هستند ارتباط ایجاد کنید، به عنوان مثال دانلود برای استفاده بعدی مانند داده های آفلاین است.

هنگام طراحی برای اتصالات شبکه ناپایدار، این دستورالعمل ها را به خاطر بسپارید:

  • طراحی برای موفقیت، شکست و ناپایداری یک اتصال شبکه.
  • داده ها ممکن است گران باشند، بنابراین مراقب کاربر باشید.
  • برای اکثر کاربران در سطح جهان، محیط فناوری تقریباً منحصراً موبایل است.
  • دستگاه‌های ارزان‌قیمت با حافظه، حافظه و قدرت پردازش محدود و نمایشگرهای کوچک و کیفیت صفحه لمسی پایین‌تر معمولی هستند. اطمینان حاصل کنید که عملکرد بخشی از فرآیند طراحی شما است.
  • به کاربران اجازه دهید زمانی که آفلاین هستند برنامه شما را مرور کنند.
  • کاربران را از وضعیت فعلی و تغییرات وضعیت ها آگاه کنید.
  • اگر برنامه شما به داده زیادی نیاز ندارد، سعی کنید به صورت پیش فرض آفلاین را ارائه دهید.
  • اگر برنامه دارای داده سنگین است، به کاربران آموزش دهید که چگونه می توانند برای استفاده آفلاین بارگیری کنند.
  • تجارب را بین دستگاه ها قابل انتقال کنید.
  • از زبان، نمادها، تصاویر، تایپوگرافی و رنگ با هم برای بیان ایده ها به کاربر استفاده کنید.
  • برای کمک به کاربر، اطمینان خاطر و بازخورد ارائه دهید.