منتشر شده: ۱۰ نوامبر ۲۰۱۶
کیفیت اتصال شبکه می‌تواند تحت تأثیر عوامل مختلفی باشد، از جمله:
- پوشش ضعیف ارائه دهنده شبکه.
- شرایط آب و هوایی شدید.
- قطعی برق.
- ورود به «مناطق مرده» دائمی، مانند ساختمان‌هایی که دیوارهایی دارند که اتصالات شبکه را مسدود می‌کنند.
- ورود به «مناطق مرده» موقت، مانند هنگام سفر با قطار و عبور از تونل.
- اتصال‌های اینترنتی با محدودیت زمانی، مانند اتصال‌های اینترنتی در فرودگاه‌ها یا هتل‌ها.
- رویه‌های فرهنگی که نیاز به دسترسی محدود یا عدم دسترسی به اینترنت در زمان‌ها یا روزهای خاص دارند.
هدف شما به عنوان یک توسعه‌دهنده، ارائه یک تجربه خوب است که تأثیر تغییرات در اتصال را کاهش دهد.
تصمیم بگیرید که وقتی اتصال شبکه‌ی کاربرانتان ضعیف است، چه چیزی به آنها نشان دهید
اولین سوالی که باید بپرسید این است که موفقیت و شکست اتصال شبکه برای برنامه شما چگونه است. یک اتصال موفق، تجربه آنلاین عادی برنامه شماست. شکست اتصال شامل نحوه رفتار برنامه شما در حالت آفلاین و در شبکه‌های دارای کندی است.
برای تعیین نحوه مدیریت خرابی اتصال، این سوالات مهم UX را از خود بپرسید:
- چقدر صبر می‌کنید تا موفقیت یا شکست یک ارتباط را مشخص کنید؟
- در حالی که موفقیت یا شکست شما مشخص می‌شود، چه کاری می‌توانید انجام دهید؟
- اگر اتصال برقرار نشد، چه باید کرد؟
- چطور به کاربر می‌گویید که چه اتفاقی دارد می‌افتد؟
به کاربران ایالتی اطلاع دهید
به کاربر هم وضعیت برنامه و هم اقداماتی که می‌تواند در صورت بروز مشکل در شبکه انجام دهد را اطلاع دهید. برای مثال، یک اعلان ممکن است موارد زیر را بگوید:
به نظر می‌رسد اتصال شبکه شما ضعیف است. نگران نباشید! به محض برقراری مجدد شبکه، پیام‌ها ارسال خواهند شد.
کاربران را از بهبود اتصال مطلع کنید
اینکه چگونه به کاربر اطلاع دهید اتصال شبکه‌اش بهبود یافته است، به برنامه شما بستگی دارد. برنامه‌هایی که اطلاعات جاری را در اولویت قرار می‌دهند، مانند ردیاب‌های آب و هوا یا بازار سهام، باید به صورت خودکار به‌روزرسانی شوند و در اسرع وقت به کاربر اطلاع دهند.
توصیه می‌کنیم با استفاده از یک نشانه بصری مانند یک عنصر تست طراحی متریال، به کاربر اطلاع دهید که برنامه وب شما "در پس‌زمینه" به‌روزرسانی شده است. این شامل تشخیص حضور یک سرویس ورکر و همچنین به‌روزرسانی محتوای مدیریت‌شده آن است. می‌توانید نمونه کد این تابع را در اینجا مشاهده کنید.
یک نمونه از این موارد، وضعیت پلتفرم کروم است که هنگام به‌روزرسانی برنامه، یادداشتی را برای کاربر ارسال می‌کند.
بعضی از برنامه‌ها همیشه می‌توانند آخرین زمان به‌روزرسانی خود را نشان دهند. برای مثال، این قابلیت مخصوصاً برای برنامه‌های تبدیل ارز مفید است.
برنامه‌های خبری می‌توانند با نمایش اعلانی که با لمس صفحه نمایش داده می‌شود، کاربر را از محتوای جدید مطلع کنند. به‌روزرسانی خودکار یک مقاله باعث می‌شود کاربران جایگاه خود را از دست بدهند.
رابط کاربری را به‌روزرسانی کنید تا وضعیت زمینه‌ای فعلی را منعکس کند
هر عنصر رابط کاربری می‌تواند زمینه و رفتار خاص خود را داشته باشد که بسته به نیاز به اتصال موفق تغییر می‌کند. به عنوان مثال، یک سایت تجارت الکترونیک را می‌توان در نظر گرفت که می‌توان آن را به صورت آفلاین مرور کرد، اما قیمت‌گذاری و دکمه خرید را تا زمان برقراری مجدد اتصال غیرفعال می‌کند.
اشکال دیگر حالت‌های زمینه‌ای می‌توانند شامل داده‌ها باشند. به عنوان مثال، برنامه مالی Robinhood از رنگ و گرافیک برای اطلاع‌رسانی به کاربر در مورد زمان باز بودن بازار سهام استفاده می‌کند. کل رابط کاربری سفید می‌شود و سپس با بسته شدن بازار خاکستری می‌شود. وقتی ارزش یک سهام افزایش یا کاهش می‌یابد، هر ویجت سهام بسته به وضعیت آن سبز یا قرمز می‌شود.
کاربر را آموزش دهید تا بفهمد مدل آفلاین چیست
بیشتر کاربران عادت دارند همیشه به شبکه متصل باشند. شما باید به آنها آموزش دهید که وقتی اتصال شبکه ندارند، چه تغییراتی در برنامه شما ایجاد می‌شود. به آنها بگویید که داده‌های حجیم کجا ذخیره می‌شوند و تنظیماتی را برای تغییر رفتار پیش‌فرض در اختیارشان قرار دهید. به جای تکیه بر یک انتخاب طراحی واحد، مانند یک آیکون به تنهایی، برای بیان کل داستان، از چندین مؤلفه طراحی رابط کاربری (مانند زبان آموزنده، آیکون‌ها، اعلان‌ها، رنگ و تصاویر) در کنار هم برای انتقال این ایده‌ها استفاده کنید.
ارائه تجربه آفلاین به صورت پیش‌فرض
اگر برنامه شما به داده زیادی نیاز ندارد، آن داده‌ها را به طور پیش‌فرض در حافظه پنهان (cache) ذخیره کنید. اگر کاربران فقط بتوانند از طریق اتصال به شبکه به داده‌های خود دسترسی داشته باشند، می‌توانند به طور فزاینده‌ای ناامید شوند.
سعی کنید تا حد امکان این تجربه را پایدار کنید. اتصال ناپایدار باعث می‌شود برنامه شما غیرقابل اعتماد به نظر برسد. برنامه‌ای که تأثیر خرابی شبکه را کاهش می‌دهد، کاربران خود را خوشحال می‌کند .
سایت‌های خبری می‌توانند از دانلود و ذخیره خودکار آخرین اخبار بهره‌مند شوند، شاید با دانلود فقط متن، داده‌ها را ذخیره کنند تا کاربر بتواند اخبار امروز را بدون اتصال اینترنت بخواند. شما می‌توانید با اولویت‌بندی دانلود دسته‌های خبری که کاربر بیشتر مشاهده می‌کند، این رفتار را با رفتار کاربر تطبیق دهید.
اطلاع رسانی به کاربر هنگام آفلاین شدن برنامه
وقتی یک برنامه وب برای اولین بار بارگذاری می‌شود، باید به کاربر نشان دهد که آیا برای استفاده آفلاین آماده است یا خیر. این کار را با یک ویجت انجام دهید که از طریق پیامی در پایین صفحه، بازخورد مختصری در مورد یک عملیات ارائه می‌دهد ، مثلاً وقتی یک بخش همگام‌سازی شده یا یک فایل دانلود شده است.
مطمئن شوید زبانی که استفاده می‌کنید با مخاطبانتان متناسب است و در همه مواردی که لازم است از همان عبارت‌بندی استفاده کنید. مخاطبان غیرفنی اغلب کلمه «آفلاین» را اشتباه متوجه می‌شوند، بنابراین در عوض از زبانی مبتنی بر عمل استفاده کنید که مخاطبانتان بتوانند با آن ارتباط برقرار کنند.
«ذخیره برای حالت آفلاین» را در رابط کاربری واضح کنید
اگر یک برنامه از داده زیادی استفاده می‌کند، مطمئن شوید که یک سوئیچ یا پین برای اضافه کردن یک مورد برای استفاده آفلاین وجود دارد. دانلود خودکار فایل‌ها فقط در صورتی امکان‌پذیر است که کاربر به‌طور خاص از طریق منوی تنظیمات درخواست این رفتار را کرده باشد. مطمئن شوید که پین یا رابط کاربری دانلود برای کاربر واضح است و توسط سایر عناصر رابط کاربری پنهان نشده است.
یک مثال از این مورد، پخش‌کننده موسیقی است که به فایل‌های حجیم نیاز دارد. کاربر از هزینه داده مرتبط آگاه است، اما ممکن است بخواهد از پخش‌کننده به صورت آفلاین نیز استفاده کند. دانلود موسیقی برای استفاده‌های بعدی نیاز به برنامه‌ریزی قبلی توسط کاربر دارد، بنابراین احتمالاً می‌خواهید در طول فرآیند آشنایی اولیه، کاربر را در این مورد آموزش دهید.
مشخص کنید چه چیزهایی به صورت آفلاین در دسترس هستند
در مورد گزینه‌هایی که ارائه می‌دهید، شفاف باشید. ممکن است لازم باشد یک تب یا تنظیمات برای «کتابخانه آفلاین» یا فهرست محتوا نشان دهید تا کاربر بتواند ببیند چه چیزی در دستگاه خود ذخیره کرده است و چه چیزی باید ذخیره شود. مطمئن شوید که تنظیمات مختصر هستند و در مورد محل ذخیره داده‌ها و اینکه چه کسی به آنها دسترسی دارد، شفاف باشید.
هزینه واقعی یک اقدام را نشان دهید
بسیاری از کاربران قابلیت آفلاین را با «دانلود» یکی می‌دانند. کاربران در کشورهایی که اتصالات شبکه مرتباً قطع می‌شود یا در دسترس نیست، اغلب محتوا را با سایر کاربران به اشتراک می‌گذارند یا در صورت اتصال، محتوا را برای استفاده آفلاین ذخیره می‌کنند.
کاربرانی که از طرح‌های داده استفاده می‌کنند، گاهی اوقات از ترس هزینه، از دانلود فایل‌های بزرگ خودداری می‌کنند، بنابراین ممکن است بخواهید هزینه مرتبط را نیز نمایش دهید تا کاربران بتوانند مقایسه فعالی برای یک فایل یا کار خاص انجام دهند. به عنوان مثال، برنامه موسیقی فوق‌الذکر می‌تواند تشخیص دهد که آیا کاربر از طرح داده استفاده می‌کند یا خیر و حجم فایل را نشان دهد تا کاربر بتواند هزینه یک فایل را ببیند.
به جلوگیری از هک شدن تجربه‌ها کمک کنید
کاربران اغلب بدون اینکه متوجه شوند، یک تجربه را هک می‌کنند. به عنوان مثال، قبل از وجود برنامه‌های وب اشتراک‌گذاری فایل مبتنی بر ابر، کاربران معمولاً فایل‌های بزرگ را ذخیره کرده و آنها را به ایمیل‌ها پیوست می‌کردند تا بتوانند ویرایش آن فایل‌ها را از دستگاه دیگری ادامه دهند. رابط کاربری خوب، مشکلی را که کاربران سعی در حل آن دارند، بدون اینکه درگیر تجربه هک شوند، حل می‌کند. به عنوان مثال، به جای اینکه پیوست کردن فایل‌های بزرگ به ایمیل‌ها را کاربرپسندتر کنید، راهی برای اشتراک‌گذاری فایل‌های بزرگ بین دستگاه‌ها ارائه دهید.
تجربیات را از یک دستگاه به دستگاه دیگر قابل انتقال کنید
هنگام ساخت شبکه‌های ناپایدار، سعی کنید به محض بهبود اتصال، همگام‌سازی را انجام دهید تا تجربه قابل انتقال باشد. به عنوان مثال، تصور کنید که یک برنامه مسافرتی در اواسط رزرو، اتصال شبکه را از دست بدهد. هنگامی که اتصال دوباره برقرار می‌شود، برنامه با حساب کاربر همگام‌سازی می‌شود و به آنها اجازه می‌دهد رزرو خود را در دستگاه دسکتاپ خود ادامه دهند و این باعث می‌شود تجربه یکپارچه‌ای داشته باشند.
به کاربر بگویید داده‌هایش در چه وضعیتی است. برای مثال، می‌توانید نشان دهید که آیا برنامه همگام‌سازی شده است یا خیر. در صورت امکان به آنها آموزش دهید، اما سعی کنید آنها را با پیام‌های زیاد سردرگم نکنید.
ایجاد تجربیات طراحی فراگیر
هنگام طراحی تجربه کاربری خود، با ارائه ابزارهای طراحی معنادار، زبان ساده، آیکونوگرافی استاندارد و تصاویر معنادار که کاربر را برای انجام عمل یا وظیفه بدون ایجاد مانع راهنمایی می‌کنند، سعی کنید فراگیر باشید.
از زبان ساده و واضح استفاده کنید
تجربه کاربری خوب فقط به طراحی رابط کاربری شما مربوط نمی‌شود. این شامل مسیری است که کاربر در برنامه شما طی می‌کند و هر چیزی که در طول مسیر با آن مواجه می‌شود، از جمله زبانی که برنامه برای توصیف آن سفر استفاده می‌کند. هنگام توضیح اجزای رابط کاربری یا وضعیت برنامه، از اصطلاحات فنی خودداری کنید. کلمه "آفلاین" اغلب به اندازه کافی واضح نیست که به کاربر بگوید برنامه شما چه کاری انجام می‌دهد.
از چندین دستگاه طراحی برای ایجاد تجربیات کاربری قابل دسترس استفاده کنید
از زبان، رنگ و اجزای بصری برای نشان دادن وضعیت یا تغییر وضعیت استفاده کنید. استفاده صرف از رنگ برای نشان دادن وضعیت می‌تواند برای کاربران دشوار باشد یا حتی برای کاربران دارای معلولیت بینایی کاملاً غیرقابل دسترس باشد. همچنین، از آنجا که طراحی وب تمایل به استفاده از رنگ خاکستری برای عناصر غیرفعال دارد، استفاده از رابط کاربری خاکستری برای نشان دادن آفلاین بودن برنامه شما می‌تواند باعث سردرگمی در مورد کارهایی شود که برنامه شما می‌تواند در حالت آفلاین انجام دهد، به خصوص اگر فقط از رنگ برای نشان دادن وضعیت استفاده کنید.
برای جلوگیری از سوءتفاهم، حالت‌های برنامه را به روش‌های مختلف، مثلاً با رنگ، برچسب‌ها و اجزای رابط کاربری، برای کاربر بیان کنید.
از آیکون‌هایی استفاده کنید که معنی را منتقل می‌کنند
مطمئن شوید که از برچسب‌های متنی معنادار در کنار آیکون‌هایتان استفاده می‌کنید. آیکون‌ها به تنهایی می‌توانند گیج‌کننده باشند، به خصوص به این دلیل که مفهوم «آفلاین» در وب نسبتاً جدید است. موارد دیگر گیج‌کننده آیکون‌ها شامل استفاده از فلاپی دیسک برای نمایش «ذخیره» است که می‌تواند برای کاربران جوان‌تر که هرگز فلاپی دیسک ندیده‌اند، بی‌معنی باشد، و همچنین آیکون منوی «همبرگر».
هنگام معرفی یک آیکون آفلاین، در صورت وجود، با استانداردهای بصری صنعت سازگار باشید و یک برچسب متنی و توضیح ارائه دهید. به عنوان مثال، می‌توانید از یک آیکون دانلود برای نشان دادن ذخیره آفلاین و از یک آیکون همگام‌سازی برای عملی که شامل همگام‌سازی می‌شود استفاده کنید. هنگام استفاده از آیکون‌ها برای نشان دادن وضعیتی که ممکن است به عنوان یک عمل ذخیره یا دانلود تعبیر شود، مراقب باشید.
برای الهام بیشتر، به مجموعه آیکون‌های طراحی متریال مراجعه کنید.
از طرح‌بندی‌های اسکلتی و سایر مکانیسم‌های بازخورد استفاده کنید
در حالی که برنامه شما در حال بارگذاری محتوا است، به کاربر نشان دهید که در حال بارگذاری است تا فکر نکند که خراب است. یک راه برای انجام این کار استفاده از طرح اسکلت ، یک نسخه قاب سیمی از برنامه شما است که هنگام بارگذاری محتوا نمایش داده می‌شود. همچنین استفاده از یک رابط کاربری پیش‌بارگذار با یک برچسب متنی که به کاربر می‌گوید برنامه در حال بارگذاری است، یا یک انیمیشن ضربان‌دار ملایم برای قاب سیمی را در نظر بگیرید تا احساس کند که زنده و در حال بارگذاری است. این به کاربر اطمینان می‌دهد که اتفاقی در حال رخ دادن است و به جلوگیری از ارسال مجدد یا به‌روزرسانی‌های غیرضروری کمک می‌کند.
با ارائه بازخورد، وضعیت یک عمل را نشان دهید. به عنوان مثال، اگر کاربری در حال ویرایش یک سند به صورت آفلاین است، تغییر طراحی بازخورد را در نظر بگیرید تا به طور قابل توجهی با زمانی که آنلاین است متفاوت باشد، اما همچنان نشان دهد که فایل او "ذخیره" شده است و وقتی به شبکه متصل شود، همگام‌سازی می‌شود. این کار به کاربر در مورد نحوه عملکرد برنامه شما آموزش می‌دهد و به او اطمینان می‌دهد که وظیفه یا اقدام او ذخیره شده است، که می‌تواند باعث شود در استفاده از برنامه شما اعتماد به نفس بیشتری داشته باشد.
محتوا را مسدود نکنید
در برخی از برنامه‌ها، کاربر ممکن است عملی مانند ایجاد یک سند جدید را آغاز کند. برخی از برنامه‌ها سعی می‌کنند برای همگام‌سازی سند جدید به یک سرور متصل شوند و برای نشان دادن این موضوع، یک پنجره محاوره‌ای بارگذاری مزاحم را نمایش می‌دهند که کل صفحه را می‌پوشاند. اگر کاربر اتصال شبکه پایداری داشته باشد، این ممکن است کار کند، اما اگر شبکه ناپایدار باشد، او نمی‌تواند از این عمل فرار کند، بنابراین رابط کاربری او را از انجام هر کار دیگری باز می‌دارد.
از درخواست‌های شبکه‌ای که محتوا را مسدود می‌کنند، خودداری کنید. به کاربر اجازه دهید به مرور برنامه شما ادامه دهد و وظایفی را که پس از بهبود اتصال انجام و همگام‌سازی می‌شوند، در صف قرار دهید.
طراحی برای یک میلیارد نفر بعدی
در بسیاری از مناطق، دستگاه‌های ارزان‌قیمت رایج هستند، اتصال غیرقابل اعتماد است و برای بسیاری از کاربران، داده‌ها بسیار گران هستند. با شفافیت و صرفه‌جویی در مصرف داده‌ها، اعتماد کاربران خود را جلب کنید. به راه‌هایی برای کمک به کاربرانی که اتصال ضعیفی دارند فکر کنید و رابط کاربری را برای سرعت بخشیدن به کارها ساده کنید. همیشه سعی کنید قبل از دانلود محتوای سنگین، از کاربران سوال کنید.
گزینه‌های پهنای باند کم را برای کاربرانی که اتصال کندی دارند ارائه دهید. منابع کوچکتری را برای اتصالات شبکه کندتر ارائه دهید، یا گزینه‌ای برای انتخاب منابع با کیفیت بالا یا پایین ارائه دهید.
نتیجه‌گیری
آموزش کلید تجربه کاربری آفلاین است زیرا کاربران با آن آشنا نیستند. برای کمک به یادگیری آنها، سعی کنید با مفاهیم آشنا ارتباط برقرار کنید، مانند توضیح اینکه دانلود برای استفاده بعدی همان ذخیره آفلاین داده‌ها است.
هنگام طراحی برای اتصالات شبکه ناپایدار، این دستورالعمل‌ها را به خاطر داشته باشید:
- طراحی برای موفقیت، شکست و بی‌ثباتی اتصال شبکه.
- داده‌ها می‌توانند گران باشند، بنابراین نسبت به کاربر ملاحظه‌کار باشید.
- برای اکثر کاربران در سطح جهان، محیط فناوری تقریباً منحصراً موبایل است.
- دستگاه‌های رده پایین با حافظه، حافظه و قدرت پردازش محدود، نمایشگرهای کوچک و کیفیت صفحه لمسی پایین‌تر، رایج هستند. مطمئن شوید که عملکرد بخشی از فرآیند طراحی شما است.
- به کاربران اجازه دهید وقتی آفلاین هستند، برنامه شما را مرور کنند.
- کاربران را از وضعیت فعلی و تغییرات وضعیتشان مطلع کنید.
- اگر برنامه شما به داده زیادی نیاز ندارد، سعی کنید به طور پیش‌فرض حالت آفلاین را ارائه دهید.
- اگر برنامه حجم زیادی از داده مصرف می‌کند، به کاربران آموزش دهید که چگونه می‌توانند آن را برای استفاده آفلاین دانلود کنند.
- تجربیات را بین دستگاه‌ها قابل انتقال کنید.
- از زبان، آیکون‌ها، تصاویر، تایپوگرافی و رنگ در کنار هم برای بیان ایده‌ها به کاربر استفاده کنید.
- برای کمک به کاربر، اطمینان خاطر و بازخورد ارائه دهید.