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