הנחיות לעיצוב חוויית משתמש במצב אופליין

מדריך לעיצוב חוויות באינטרנט לרשתות איטיות ואופליין.

במאמר הזה מפורטות הנחיות ליצירת חוויה מעולה ברשתות איטיות ואופליין.

איכות החיבור לרשת עשויה להיות מושפעת ממספר גורמים, כמו:

• כיסוי מצומצם של ספק.
• תנאי מזג אוויר קיצוניים.
• הפסקות חשמל.
• כניסה ל'אזורים מתים' קבועים, למשל במבנים עם קירות שחוסמים את החיבורים לרשת.
• כניסה ל'אזורים מתים' זמניים, למשל: בזמן נסיעה ברכבת או מעבר במנהרה.
• חיבורי אינטרנט עם הגבלת זמן, כמו אלה שמתפרסמים בשדות תעופה או במלונות.
• נהלים תרבותיים שמחייבים גישה לאינטרנט באופן מוגבל או לא בשעות מסוימות או ימים מסוימים.

המטרה היא לספק חוויה טובה שמפחיתה את ההשפעה של שינויים בקישוריות.

החלט מה להציג למשתמשים כשיש להם חיבור חלש לרשת

השאלה הראשונה שצריך לשאול היא איך נראים הצלחה או כשלון בחיבור לרשת? חיבור מוצלח הוא החוויה הרגילה של האפליקציה שלך באינטרנט. עם זאת, הכשל בחיבור יכול להיות גם מצב האופליין של האפליקציה וגם ההתנהגות של האפליקציה כשיש חיבור חלש.

כשאתם חושבים על הצלחה או כישלון של חיבור לרשת, אתם צריכים לשאול את עצמכם את השאלות החשובות הבאות לגבי חוויית המשתמש:

• כמה זמן אתם ממתינים כדי לקבוע אם החיבור הצליח או נכשל?
• מה אפשר לעשות במצב שבו נקבעים הצלחה או כישלון?
• מה צריך לעשות במקרה של כשל?
• איך להודיע למשתמש על הפרטים שלמעלה?

הודעה למשתמשים על המצב הנוכחי שלהם ועל שינוי מצב

כדאי לעדכן את המשתמשים לגבי הפעולות שהם עדיין יכולים לבצע כשיש כשל ברשת וגם אם המצב הנוכחי של האפליקציה. לדוגמה, התראה יכולה להיות:

נראה שהחיבור שלך לרשת חלש. אין מה לדאוג! ההודעות יישלחו כשהרשת תשוחזר.

הצגת הודעה למשתמשים כשהחיבור לרשת משתפר או משוחזר

האופן שבו מודיעים למשתמשים על השיפור בחיבור לרשת משתנה בהתאם לאפליקציה. אפליקציות כמו אפליקציה של שוק מניות ש מתעדפות את המידע הנוכחי צריכות להתעדכן באופן אוטומטי ולהודיע למשתמש בהקדם האפשרי.

מומלץ ליידע את המשתמש שאפליקציית האינטרנט שלכם עודכנה "ברקע" על ידי שימוש בסימון ויזואלי כמו, למשל, רכיב "טוסט של עיצוב חדש". פעולות אלה כוללות זיהוי הנוכחות של קובץ שירות (service worker) וגם עדכון של התוכן המנוהל שלו. תוכלו לראות כאן קוד לדוגמה של הפונקציה בפעולה.

דוגמה למצב כזה היא סטטוס הפלטפורמה של Chrome, שמפרסם הערה למשתמש לאחר עדכון האפליקציה.

בנוסף, אפשר להציג במקום בולט גם את הפעם האחרונה שבה האפליקציה עודכנה. זה יכול להיות שימושי לאפליקציה להמרת מטבעות, למשל.

באפליקציות כמו אפליקציות של חדשות, יכולה להופיע התראה פשוטה של 'מצמידים ומשלמים' שתיידע את המשתמשים לגבי תוכן חדש. העדכון האוטומטי עלול לגרום למשתמשים לאבד את המקום שלהם.

עדכון ממשק המשתמש כך שישקף את מצב ההקשר הנוכחי

לכל חלק בממשק המשתמש יכולים להיות הקשר ופונקציונליות משלו, שישתנו בהתאם אם נדרש חיבור מוצלח. דוגמה אחת לכך היא אתר מסחר אלקטרוני שאפשר לגלוש בו ללא חיבור לאינטרנט. הלחצן 'קנייה' והתמחור יושבתו עד לחידוש החיבור.

צורות אחרות של מצבי הקשר יכולות לכלול נתונים. לדוגמה, האפליקציה הפיננסית Robinhood מאפשרת למשתמשים לקנות מניה ומשתמשת בצבע ובגרפיקה כדי להודיע למשתמשים מתי השוק פתוח. הממשק כולו הופך ללבן ולאחר מכן מופיע באפור כשהשוק נסגר. כשערך המלאי עולה או יורד, כל ווידג'ט של מלאי משתנה לירוק או לאדום, בהתאם למצב.

הדרכת המשתמש כדי שיבינו מהו המודל אופליין

מצב אופליין הוא מודל מנטלי חדש לכולם. עליך ליידע את המשתמשים לגבי השינויים שיתרחשו כאשר לא יהיה להם חיבור. כדאי לעדכן אותם איפה נשמרים נתונים גדולים ולתת להם הגדרות לשנות את התנהגות ברירת המחדל. חשוב להשתמש במספר רכיבי עיצוב של ממשק המשתמש, כמו שפה אינפורמטיבית, סמלים, התראות, צבעים ותמונות, כדי להעביר את הרעיונות האלה יחד, במקום להסתמך על אפשרות עיצוב אחת בלבד (למשל סמל בלבד), כדי לספר את כל הסיפור.

מספקים חוויה אופליין כברירת מחדל

אם לאפליקציה לא נדרש הרבה נתונים, יש לשמור את הנתונים במטמון כברירת מחדל. המשתמשים יכולים להרגיש מתוסכלים יותר אם הם יכולים לגשת לנתונים שלהם רק דרך חיבור לרשת. נסו ליצור חוויה יציבה ככל האפשר. חיבור לא יציב יגרום לאפליקציה להרגיש לא מהימנה, כאשר אפליקציה שמפחיתה את ההשפעה של כשל ברשת יכולה ליצור עבור המשתמש קסם.

אתרי חדשות יכולים להפיק תועלת מהורדה אוטומטית של החדשות האחרונות ומשמירה אוטומטית של החדשות האחרונות. כך, משתמש יוכל לקרוא את החדשות של היום ללא חיבור לאינטרנט, ואפילו להוריד את הטקסט ללא התמונות של הכתבה. כמו כן, יש להתאים את פעילות המשתמשים להתנהגות המשתמש. לדוגמה, אם מדור הספורט הוא מה שהם רואים בדרך כלל, כדאי להגדיר את ההורדה בעדיפות גבוהה.

הודעה למשתמש כאשר האפליקציה מוכנה לצריכה במצב אופליין

כאשר אפליקציית אינטרנט נטענת לראשונה, עליכם להודיע למשתמש אם היא מוכנה לשימוש במצב אופליין. תוכלו לעשות זאת באמצעות ווידג'ט שמספק משוב קצר על פעולה באמצעות הודעה בתחתית המסך, כמו לדוגמה, לאחר סנכרון קטע או הורדה של קובץ נתונים.

נסו לחשוב שוב על השפה שבה אתם משתמשים כדי לוודא שהיא מתאימה לקהל שלכם. חשוב לוודא שהעברת ההודעות זהה בכל המקרים שבהם משתמשים בה. הקהל בדרך כלל לא יבין את המונח אופליין בצורה שגויה, לכן כדאי להשתמש בניסוחים מבוססי-פעולות שהקהל שלכם יוכל להתחבר אליו.

הפוך את האפשרות 'שמירה למצב אופליין' לחלק ברור בממשק עבור אפליקציות עתירות נתונים

אם באפליקציה יש כמויות גדולות של נתונים, חשוב לוודא שיש מתג או הצמדה להוספת הפריט לשימוש במצב אופליין, ולא להורדה אוטומטית, אלא אם המשתמש ביקש זאת באופן מפורש דרך תפריט ההגדרות. מוודאים שממשק המשתמש של ההצמדה או ההורדה לא מוסתר על ידי רכיבים אחרים בממשק המשתמש, ושהתכונה מוצגת למשתמש.

דוגמה לנגן מוזיקה שדורש קובצי נתונים גדולים. המשתמש מודע לעלות הנתונים המשויכת לו, אבל יכול להיות שהוא גם ירצה להשתמש בנגן במצב אופליין. כדי להוריד מוזיקה לשימוש מאוחר יותר, המשתמשים יצטרכו לתכנן מראש, ולכן יהיה צורך ללמוד על כך במהלך ההצטרפות.

הבהרה לגבי תכנים שזמינים במצב אופליין

חשוב שתגדירו בצורה ברורה את האפשרות שאתם מציעים. ייתכן שתצטרכו להציג כרטיסייה או הגדרה שמציגות 'ספרייה אופליין' או אינדקס תוכן, כדי שהמשתמשים יוכלו לראות בקלות מה מאוחסן בטלפון ומה צריך לשמור. חשוב לוודא שההגדרות תמציתיות וברורות איפה הנתונים יאוחסנו ולמי יש גישה אליהם.

הצגת העלות בפועל של פעולה

משתמשים רבים משווים בין יכולת אופליין לבין 'הורדה'. משתמשים במדינות שבהן חיבורי רשתות נכשלים באופן קבוע או שאינם זמינים, בדרך כלל משתפים תוכן עם משתמשים אחרים או שומרים תוכן לשימוש במצב אופליין כשיש להם קישוריות.

משתמשים בתוכניות נתונים עשויים להימנע מהורדה של קבצים גדולים בשל חשש לעלות, ולכן כדאי גם להציג עלות משויכת כדי שהמשתמשים יוכלו לבצע השוואה פעילה לקובץ או למשימה ספציפיים. לדוגמה, אם אפליקציית המוזיקה שלמעלה יכולה לזהות אם המשתמש רשום בחבילת גלישה, ולהציג את גודל הקובץ כדי שהמשתמשים יוכלו לראות את העלות של קובץ.

איך למנוע פריצה

הרבה פעמים משתמשים פורצים לחוויה מסוימת בלי שהם מודעים לכך. לדוגמה, לפני אפליקציות אינטרנט מבוססות-ענן לשיתוף קבצים, משתמשים היו נפוצים לשמור קבצים גדולים ולצרף אותם לאימיילים, כדי שיוכלו להמשיך לערוך ממכשיר אחר. חשוב לא להתנסות בפריצה, אלא לבדוק מה הם מנסים להשיג. במילים אחרות, במקום לחשוב איך לצרף קובץ גדול בצורה ידידותית יותר למשתמש, כדאי לפתור את הבעיה של שיתוף קבצים גדולים בין מכשירים שונים.

איך לוודא שהחוויות ניתנות להעברה ממכשיר אחד לאחר

כשאתם בונים רשתות לא רועשות, כדאי לנסות לסנכרן ברגע שהחיבור משתפר, כדי שהחוויה תהיה ניתנת להעברה. לדוגמה, נניח שאפליקציית נסיעות מאבדת חיבור לרשת באמצע ביצוע הזמנה. כשהחיבור מתחדש, האפליקציה מסתנכרנת עם החשבון של המשתמש וכך היא יכולה להמשיך בביצוע ההזמנה במחשב. חוסר היכולת להעביר חוויות יכול להיות בעייתי מאוד.

מעדכנים את המשתמשים לגבי המצב הנוכחי של הנתונים. לדוגמה, אפשר להציג אם האפליקציה הסתנכרנה. כדאי להדריך אותם ככל האפשר, אבל לא להעמיס עליהם מסרים.

יוצרים חוויות עיצוב שמעודדות את קבלת האחר

כשמתכננים את התוכן, רוצים לכלול אותו על ידי הצגת מכשירים בעלי משמעות, שפה פשוטה, איקונוגרפיה סטנדרטית ותמונות משמעותיות, שינחו את המשתמשים להשלים את הפעולה או המשימה במקום שיפריעו להתקדמות שלהם.

שימוש בשפה פשוטה ותמציתית

חוויית משתמש טובה היא לא רק ממשק מתוכנן היטב. היא כוללת את הנתיב של המשתמש ואת המילים שבהן נעשה שימוש באפליקציה. יש להימנע מז'רגון טכני שמסביר את מצב האפליקציה או רכיבים ספציפיים בממשק המשתמש. ייתכן שהביטוי 'אפליקציה במצב אופליין' לא מעביר למשתמש את המצב הנוכחי של האפליקציה.

שימוש במספר מכשירים שנועדו ליצור חוויות משתמש נגישות

השתמשו בשפה, בצבע וברכיבים חזותיים כדי להדגים שינוי במצב או בסטטוס הנוכחי. אם משתמשים רק בצבע כדי להדגים את המצב, יכול להיות שהמשתמשים לא יבחינו בכך, ולמשתמשים עם ליקויי ראייה לא תהיה גישה אליהם. בנוסף, האינסטינקט של המעצבים הוא להשתמש בממשק משתמש אפור כדי לייצג את המצב אופליין, אבל יכולה להיות לכך משמעות באינטרנט. גם ממשק משתמש באפור, כמו רכיבי קלט בטופס, מציין שרכיב מסוים מושבת. הדבר עלול לגרום לבלבול אם אתם משתמשים רק בצבע כדי לתאר את המצב.

כדי למנוע אי-הבנות, מומלץ להבהיר למשתמש מצבים שונים בכמה דרכים. למשל, באמצעות צבע, תוויות ורכיבי ממשק המשתמש.

שימוש בסמלים שמעבירים משמעות

ודאו שהמידע מועבר בצורה נכונה באמצעות תוויות טקסט בעלות משמעות וסמלים. שימוש בסמלים בלבד יכול להיות בעייתי, כי הקונספט של 'אופליין' באינטרנט הוא חדש יחסית. המשתמשים עשויים להבין לא נכון סמלים שנעשה בהם שימוש בעצמם. לדוגמה, גם דור מבוגר יותר הגיוני להשתמש בתקליטון להצלה, אך המטאפורה עלולה לבלבל משתמשים צעירים שמעולם לא ראו תקליטון. בדומה לכך, סמל התפריט 'המבורגר' ידוע אצל המשתמשים מבלבל משתמשים כאשר מוצג ללא תווית.

אם אתם מציגים סמל של מצב אופליין, השתדלו לשמור על עקביות ברכיבים החזותיים המקובלים בתחום (אם הם קיימים), וכן השתמשו בתווית טקסט ובתיאור. לדוגמה, שמירה למצב אופליין יכולה להיות סמל הורדה אופייני, או אם הפעולה כוללת סנכרון, היא יכולה להיות סמל סנכרון. פעולות מסוימות עשויות להתפרש כשמירה למצב אופליין במקום להדגים סטטוס של רשת. חשוב על הפעולה שאתם מנסים להעביר במקום להציג בפני המשתמש קונספט מופשט. לדוגמה, שמירה או הורדה של נתונים תהיה מבוססת על פעולה.

למצב אופליין יכולות להיות כמה משמעויות בהתאם להקשר, כמו הורדה, ייצוא, הצמדה וכו'. כדי לקבל השראה נוספת, אפשר לעיין בסמל של עיצוב חדשני תלת-ממדי.

שימוש בפריסות שלד עם מנגנוני משוב אחרים

פריסת שלד היא למעשה גרסת Wi-Fi של האפליקציה שמוצגת בזמן טעינת התוכן. כך ניתן להמחיש למשתמש שהתוכן עומד להיטען. כדאי גם להשתמש בממשק משתמש של טעינה מראש, עם תווית טקסט שמודיעה למשתמש שהאפליקציה נטענת. דוגמה אחת היא להבהב את תוכן ה-Wi-frame, ולתת לאפליקציה הרגשה שהיא חיה ונטענת. כך המשתמשים יכולים לדעת שמשהו קורה, ולמנוע שליחה מחדש של האפליקציה או רענון שלה.

לא לחסום תוכן

באפליקציות מסוימות, משתמש עשוי להפעיל פעולה כמו יצירת מסמך חדש. חלק מהאפליקציות ינסו להתחבר לשרת כדי לסנכרן את המסמך החדש וכדי להדגים זאת, תוצג תיבת דו-שיח מודאלית שמפריעה לטעינה, שמכסה את כל המסך. זה עשוי לעבוד בצורה תקינה אם למשתמש יש חיבור יציב לרשת, אבל אם הרשת לא יציבה, הוא לא יוכל לצאת מהפעולה וממשק המשתמש חוסם בפועל את האפשרות שלו לבצע כל פעולה אחרת. יש להימנע מבקשות רשת שחוסמות תוכן. המשתמש יוכל להמשיך לעיין במשימות באפליקציה ובתור, שיבוצעו ויסונכרנו לאחר שיפור החיבור.

ניתן לשלוח למשתמשים משוב כדי להמחיש את מצב הפעולה. לדוגמה, אם משתמש עורך מסמך, כדאי לשנות את עיצוב המשוב כך שייראה שונה בזמן הגלישה באינטרנט, אבל עדיין יראה שהקובץ "נשמר" והוא יסונכרן כשהוא יהיה מחובר לרשת. כך המשתמשים יקבלו מידע לגבי המצבים השונים הזמינים, והם יובטחו שהמשימה או הפעולה שלהם נשמרו. יתרון נוסף הוא שהביטחון של המשתמש באפליקציה יגדל.

תכנון לקראת המיליארד הבאים

באזורים רבים מכשירים פשוטים הם שגרתיים, הקישוריות לא אמינה והנתונים לא שווים, למשתמשים רבים. תצטרכו לרכוש את אמון המשתמשים על ידי התנהלות שקופה וחסכונית בשימוש בנתונים. נסו לחשוב על דרכים לעזור למשתמשים עם חיבורים חלשים ולפשט את הממשק כדי לזרז את המשימות. כדאי תמיד לשאול את המשתמשים לפני הורדת תוכן שיש בו הרבה נתונים.

מציעים אפשרויות רוחב פס נמוכות למשתמשים בחיבורים איטיים. כך שאם החיבור לרשת איטי, עליכם לספק נכסים קטנים. האפשרות לבחור נכסים באיכות גבוהה או נמוכה.

סיכום

השכלה היא אחד הגורמים החשובים ביותר לחוויית משתמש אופליין, כי המשתמשים לא מכירים את העקרונות האלה. נסו ליצור שיוכים למידע מוכר.למשל, הורדה של נתונים לשימוש מאוחר יותר זהה להורדת הנתונים למצב אופליין.

כשמעצבים חיבורי רשת לא יציבים, חשוב לזכור את ההנחיות הבאות:

• תכנון להשגת הצלחה, כישלון ואי יציבות בחיבור לרשת.
• הנתונים יכולים להיות יקרים ולכן צריך להתחשב במשתמשים.
• עבור רוב המשתמשים ברחבי העולם, הסביבה הטכנית היא כמעט ניידת בלבד.
• מכשירים פשוטים הם שגרתיים, עם נפח אחסון, זיכרון וכוח עיבוד מוגבלים, צגים קטנים ואיכות מסך מגע נמוכה יותר. ודאו שהביצועים הם חלק מתהליך העיצוב שלכם.
• מתן אפשרות למשתמשים לעיין באפליקציה כשהם במצב אופליין.
• יש להודיע למשתמשים על המצב הנוכחי שלהם ועל שינויים במדינות.
• אם לא נדרש הרבה נתונים לאפליקציה, כדאי להשתמש בחבילת הגלישה כברירת מחדל.
• אם האפליקציה עמוסה בנתונים, תוכלו ללמוד איך להוריד את האפליקציה לשימוש אופליין.
• ודאו שהחוויות ניתנות להעברה בין מכשירים.
• ניתן להשתמש בשפה, בסמלים, בתמונות, בטיפוגרפיה ובצבע יחד כדי להביע רעיונות למשתמשים.
• לספק תחושת ביטחון ומשוב כדי לעזור למשתמש.