מדריך לעיצוב חוויות אינטרנט עבור רשתות איטיות ואופליין.
המאמר הזה כולל הנחיות עיצוב שיעזרו לכם ליצור חוויה מעולה ברשתות איטיות ובמצב אופליין.
איכות החיבור לרשת יכולה להיות מושפעת מכמה גורמים, כגון:
- כיסוי מצומצם של ספק.
- תנאי מזג אוויר קיצוניים.
- הפסקות חשמל.
- כניסה ל'אזורים מתים' קבועים, למשל בבניינים עם קירות שחוסמים את החיבורים לרשת.
- כניסה ל'אזורים מתים' זמניים, למשל בזמן נסיעה ברכבת או מעבר במנהרה.
- חיבורי אינטרנט לפי קופסת זמן, למשל כאלה בנמלי תעופה או במלונות.
- נהלים תרבותיים המחייבים גישה מוגבלת לאינטרנט בשעות או בימים ספציפיים, או ללא גישה לאינטרנט.
המטרה היא לספק חוויה טובה שמפחיתה את ההשפעה של שינויים בקישוריות.
החלט מה להציג למשתמשים כשהחיבור שלהם לרשת חלש
השאלה הראשונה שצריך לשאול היא איך נראים הצלחה או כישלון בחיבור לרשת? חיבור מוצלח הוא החוויה הרגילה של האפליקציה באינטרנט. עם זאת, כשל בחיבור יכול להעיד גם על מצב האופליין של האפליקציה וגם על התנהגות האפליקציה כשהרשת חלשה.
כשאתם חושבים על הצלחה או כישלון של חיבור לרשת, אתם צריכים לשאול את עצמכם את השאלות החשובות הבאות לגבי חוויית המשתמש:
- כמה זמן אתם מחכים לקבוע אם החיבור הצליח או נכשל?
- מה אפשר לעשות בזמן שקובעים אם הצלחת או כישלון?
- מה צריך לעשות במקרה של כשל?
- איך מיידעים את המשתמש על כך?
הודעה למשתמשים על המצב הנוכחי ועל שינוי המצב שלהם
צריך לעדכן את המשתמשים על הפעולות שהם עדיין יכולים לבצע כשיש תקלה ברשת וגם במצב הנוכחי של האפליקציה. לדוגמה, ההתראה יכולה לכתוב:
נראה שהחיבור שלך לרשת חלש. אין מה לדאוג! ההודעות יישלחו כשהרשת תשוחזר.
הצגת הודעה למשתמשים כשהחיבור לרשת משתפר או משוחזר
האופן שבו מודיעים למשתמש על השיפור בחיבור לרשת תלוי באפליקציה. אפליקציות כמו אפליקציית שוק מניות שמתעדפות מידע עדכני צריכות להתעדכן באופן אוטומטי ולהודיע למשתמש על כך בהקדם האפשרי.
מומלץ ליידע את המשתמש שאפליקציית האינטרנט שלכם עודכנה "ברקע" באמצעות סימון חזותי, כמו למשל רכיב טוסט של עיצוב חדשני תלת-ממדי. האימות כולל זיהוי הנוכחות של קובץ שירות (service worker) ועדכון של התוכן המנוהל שלו. אפשר לראות כאן דוגמה לקוד של הפונקציה הזו בעבודה.
דוגמה למצב כזה היא סטטוס הפלטפורמה של Chrome ששולח הערה למשתמש אחרי שהאפליקציה מתעדכנת.
במקום בולט, אפשר גם להציג במקום בולט מתי הפעם האחרונה שבה האפליקציה עודכנה. זה יכול להיות שימושי לאפליקציה להמרת מטבעות, לדוגמה.
אפליקציות כמו אפליקציות של חדשות יכולות להציג התראה פשוטה של 'הקש לעדכון', כדי לעדכן את המשתמשים לגבי תוכן חדש. עדכון אוטומטי עלול לגרום למשתמשים לאבד את המקום שלהם.
עדכון ממשק המשתמש כך שישקף את מצב ההקשר הנוכחי
לכל קטע ממשק משתמש יכולים להיות הקשר ופונקציונליות משלו שישתנו בהתאם לנדרש חיבור מוצלח. דוגמה אחת היא אתר מסחר אלקטרוני שאפשר לגלוש בו אופליין. הלחצן 'קנייה' והתמחור יושבתו עד שהחיבור יחודש.
צורות אחרות של מצבים לפי הקשר יכולות לכלול נתונים. לדוגמה, האפליקציה הפיננסית Robinwood מאפשרת למשתמשים לקנות מניות ומשתמשת בצבעים ובגרפיקה כדי להודיע למשתמשים מתי השוק פתוח. כל הממשק הופך ללבן ואז מופיע באפור כשהשוק נסגר. כשערך המניה עולה או יורד, כל ווידג'ט של מניות הופך לירוק או לאדום בהתאם למצב שלו.
הדרכת המשתמש כך שיבינו מהו מודל האופליין
מצב אופליין הוא מודל מנטלי חדש לכולם. צריך להסביר למשתמשים אילו שינויים יתרחשו כשלא יהיה להם חיבור. כדאי לעדכן אותם איפה נשמרים כמות גדולה של נתונים ולתת להם הגדרות לשנות את התנהגות ברירת המחדל. חשוב להקפיד להשתמש במספר רכיבי עיצוב של ממשק המשתמש, כמו שפה אינפורמטיבית, סמלים, התראות, צבעים ותמונות כדי להעביר את הרעיונות האלה באופן קולקטיבי, במקום להסתמך על בחירת עיצוב אחת בלבד, כמו סמל בפני עצמו, כדי לספר את כל הסיפור.
מספקים חוויה אופליין כברירת מחדל
אם לאפליקציה לא נדרש הרבה נתונים, כדאי לשמור את הנתונים במטמון כברירת מחדל. המשתמשים עלולים להיות מתוסכלים יותר אם הם יכולים לגשת לנתונים שלהם רק באמצעות חיבור לרשת. נסו ליצור חוויה יציבה ככל האפשר. חיבור לא יציב יגרום לאפליקציה להרגיש לא אמינה, כאשר אפליקציה שמפחיתה את ההשפעה של כשל ברשת תהיה קסומה למשתמש.
אתרי חדשות יכולים להפיק תועלת מהורדה אוטומטית ושמירה אוטומטית של החדשות האחרונות, כדי משתמש יוכל לקרוא את החדשות של היום ללא חיבור לאינטרנט, למשל להוריד את הטקסט ללא התמונות של המאמר. כמו כן, יש להתאים את פעילות המשתמש להתנהגות המשתמש. לדוגמה, אם קטע הספורט הוא מה שהם רואים בדרך כלל, כדאי להגדיר את ההורדה בעדיפות גבוהה.
הודעה למשתמש כאשר האפליקציה מוכנה לצריכה במצב אופליין
כאשר אפליקציית אינטרנט נטענת לראשונה, צריך לציין למשתמש אם היא מוכנה לשימוש במצב אופליין. ניתן לעשות זאת באמצעות ווידג'ט שמספק משוב קצר על פעולה באמצעות הודעה שמוצגת בתחתית המסך, למשל, בזמן סנכרון קטע או הורדה של קובץ נתונים.
חשבו שוב על השפה שבה אתם משתמשים כדי לוודא שהיא מתאימה לקהל שלכם. חשוב לוודא שהעברת ההודעות זהה בכל המקרים שבהם משתמשים בה. בדרך כלל, קהל לא טכני לא מבין את המונח אופליין, ולכן כדאי להשתמש בשפה מבוססת-פעולה שהקהל יכול להתחבר אליה.
הפוך את האפשרות 'שמור למצב לא מקוון' לחלק מובן מאליו בממשק עבור אפליקציות עתירות נתונים
אם האפליקציה משתמשת כמויות גדולות של נתונים, חשוב לוודא שיש מתג או הצמדה להוספת פריט לשימוש במצב אופליין, במקום הורדה אוטומטית, אלא אם משתמש ביקש זאת באופן ספציפי באמצעות תפריט ההגדרות. חשוב לוודא שרכיבי ממשק המשתמש האחרים לא מסתירים את ממשק המשתמש של ההצמדה או ההורדה, ושהתכונה ברורה למשתמש.
למשל, נגן מוזיקה שדורש קובצי נתונים גדולים. המשתמש מודע לעלות הנתונים המשויכת, אבל ייתכן שהוא ירצה גם להשתמש בנגן במצב אופליין. הורדת מוזיקה לשימוש מאוחר יותר מחייבת את המשתמשים לתכנן מראש, ולכן יכול להיות שתצטרכו ללמוד על כך במהלך ההצטרפות.
מתן הסבר על התכונות שזמינות אופליין
חשוב שתגדירו לעצמכם את האפשרות שאתם מציעים. ייתכן שתצטרכו להציג כרטיסייה או הגדרה שמציגות 'ספרייה אופליין' או אינדקס תוכן, כדי שהמשתמש יוכל לראות בקלות מה הוא אחסן בטלפון ומה צריך לשמור. חשוב לוודא שההגדרות תמציתיות וברורות איפה הנתונים יאוחסנו ולמי יש גישה אליהם.
הצגת העלות בפועל של פעולה
משתמשים רבים משווים בין יכולת אופליין לבין 'הורדה'. משתמשים במדינות שבהן חיבורי רשתות נכשלים באופן קבוע או שאינם זמינים, בדרך כלל משתפים תוכן עם משתמשים אחרים, או שומרים תוכן לשימוש במצב אופליין כשיש להם קישוריות.
משתמשים בחבילות גלישה יכולים להימנע מהורדה של קבצים גדולים בגלל חשש לעלות, ולכן כדאי גם להציג עלות משויכת כדי שהמשתמשים יוכלו לבצע השוואה פעילה בין קובץ ספציפי או משימה ספציפית. לדוגמה, אם אפליקציית המוזיקה שלמעלה יכולה לזהות אם המשתמש רשום בחבילת גלישה, ולהציג את גודל הקובץ כדי שהמשתמשים יוכלו לראות את העלות של קובץ.
מניעת חוויות של פריצה
לעיתים קרובות משתמשים פורסים חוויה מסוימת בלי להיות מודעים לכך שהם עושים אותה. לדוגמה, לפני אפליקציות אינטרנט מבוססות-ענן לשיתוף קבצים, משתמשים נהגו לשמור קבצים גדולים ולצרף אותם לאימיילים, כדי שיוכלו להמשיך לערוך ממכשיר אחר. חשוב לא להיסחף לחוויית הפריצה שלהם, אלא לראות מה הם מנסים להשיג. במילים אחרות, במקום לחשוב איך צירוף קובץ גדול יהיה ידידותי יותר למשתמש, כדאי לפתור את הבעיה של שיתוף קבצים גדולים בין מספר מכשירים.
איך להעביר את החוויות בין מכשירים
כשאתם עובדים עם רשתות רעות, נסו לסנכרן ברגע שהחיבור ישתפר כדי שניתן יהיה להעביר את החוויה. לדוגמה, נניח שאפליקציית נסיעות מאבדת את החיבור לרשת באמצע ביצוע ההזמנה. כשהחיבור יחודש, האפליקציה תסונכרן עם החשבון של המשתמש. כך הוא יוכל להמשיך בהזמנה במחשב. אי היכולת להעביר חוויות יכולה להטריד את המשתמשים.
מיידעים את המשתמשים על המצב הנוכחי של הנתונים שלהם. לדוגמה, אפשר להראות אם האפליקציה הסתנכרנה. למדו אותם במידת האפשר, אך השתדלו לא להעמיס עליהם יותר מדי מסרים.
יוצרים חוויות עיצוב שמעודדות את קבלת האחר
כשמתכננים שינויים, הם נועדו לכלול מכשירים בעלי משמעות, שפה פשוטה, איקונוגרפיה סטנדרטית ותמונות משמעותיות, כדי להנחות את המשתמשים להשלים את הפעולה או המשימה במקום להפריע להתקדמות.
השימוש בשפה פשוטה ותמציתית
חוויית משתמש טובה היא לא רק ממשק מתוכנן היטב. היא כוללת את הנתיב שהמשתמשים עוברים ואת המילים שמשתמשים בהם באפליקציה. חשוב להימנע משימוש במונחים טכנולוגיים כשהסברים את מצב האפליקציה או רכיבים ספציפיים בממשק המשתמש. ייתכן שהביטוי 'אפליקציה במצב אופליין' לא מעביר למשתמש את המצב הנוכחי של האפליקציה.
שימוש במכשירים מרובים ליצירת חוויות משתמש נגישות
שימוש בשפה, בצבע וברכיבים חזותיים כדי להדגים שינוי במצב או בסטטוס הנוכחי. יכול להיות שהמשתמשים לא יבחינו רק בצבע לציון המצב, וייתכן שהם לא יהיו נגישים למשתמשים עם מוגבלויות ראייה. בנוסף, האינסטינקטים של מעצבים היא להשתמש בממשק משתמש אפור כדי לייצג אופליין, אבל יכולה להיות לכך משמעות באינטרנט. גם ממשק משתמש אפור, כמו רכיבי קלט בטופס, מציין שרכיב מסוים מושבת. הדבר עלול לגרום לבלבול אם אתם משתמשים רק בצבע לתיאור המצב.
כדי למנוע אי-הבנות, כדאי לציין למשתמש מצבים שונים בכמה דרכים, למשל באמצעות צבע, תוויות ורכיבי ממשק משתמש.
שימוש בסמלים שמעבירים משמעות
ודאו שהמידע מועבר בצורה נכונה באמצעות תוויות טקסט בעלות משמעות וסמלים. סמלים בלבד יכולים להיות בעייתיים, כי המושג 'אופליין' באינטרנט הוא חדש יחסית. המשתמשים עשויים להבין בצורה שגויה סמלים שבהם נעשה שימוש בעצמם. לדוגמה, לדור מבוגר יותר קל להשתמש בדיסק תקליטונים לשמירה, אך המטאפורה עלולה לבלבל משתמשים צעירים שמעולם לא ראו תקליטון. בדומה לכך, סמל התפריט 'המבורגר' ידוע כמבלבל משתמשים כאשר הוא מוצג ללא תווית.
כשמשיקים סמל של מצב אופליין, כדאי לשמור על עקביות עם הרכיבים החזותיים המקובלים בתחום (כשהם קיימים), וגם עם תווית טקסט ותיאור. לדוגמה, שמירה למצב אופליין יכולה להיות סמל הורדה אופייני, או סמל סנכרון אם הפעולה כוללת סנכרון. פעולות מסוימות עשויות להתפרש כשמירה למצב אופליין במקום הדגמת הסטטוס של רשת. כדאי לחשוב על הפעולה שרוצים להעביר ולא להציג למשתמשים קונספט מופשט. לדוגמה, שמירה או הורדה של נתונים תהיה מבוססת-פעולה.
למצב אופליין יכולות להיות כמה דברים, בהתאם להקשר, כמו הורדה, ייצוא, סיכה וכו'. כדי לקבל השראה נוספת, אפשר לעיין בהגדרת הסמל של Material Design.
שימוש בפריסות שלד עם מנגנוני משוב אחרים
פריסת שלד היא למעשה גרסת שרטוט של האפליקציה, שמוצגת בזמן טעינת התוכן. כך ניתן להמחיש למשתמש שהתוכן עומד להיטען. כדאי לשקול גם להשתמש גם בממשק המשתמש של הטוען מראש, עם תווית טקסט שמודיעה למשתמש שהאפליקציה נטענת. אחת הדוגמאות היא להבהב את התוכן של ה-wireframe, כך שהאפליקציה תרגיש שהיא חיה ונטענת. כך המשתמשים יכולים לדעת שמשהו קורה, ולמנוע שליחה מחדש של האפליקציה או רענון שלה.
לא לחסום תוכן
באפליקציות מסוימות, משתמש עשוי להפעיל פעולה כגון יצירת מסמך חדש. אפליקציות מסוימות ינסו להתחבר לשרת כדי לסנכרן את המסמך החדש ולהדגים זאת, הן מציגות תיבת דו-שיח מודאלית שמונעת את הטעינה, שמכסה את כל המסך. זה יכול לעבוד בצורה תקינה אם למשתמש יש חיבור יציב לרשת, אבל אם הרשת לא יציבה, הוא לא יוכל לברוח מהפעולה הזו וממשק המשתמש מונע ממנו לבצע פעולות אחרות. יש להימנע מבקשות ברשת שחוסמות תוכן. המשתמשים יכולים להמשיך לעיין במשימות של האפליקציה והתור, שיבוצעו ויסונכרנו ברגע שהחיבור ישתפר.
הציגו את המצב של פעולה באמצעות משוב למשתמשים. לדוגמה, אם משתמש עורך מסמך, כדאי לשנות את עיצוב המשוב כדי שהוא יהיה שונה מאשר במצב אונליין, אבל עדיין יראה שהקובץ נשמר "נשמר" ויסתנכרן כשיהיה חיבור לרשת. כך המשתמשים יקבלו מידע על המצבים השונים הזמינים עבורם, ותוכלו להבטיח שהמשימה או הפעולה שלהם נשמרו. כך יש יתרון נוסף: המשתמשים יכולים להיות בטוחים יותר בשימוש באפליקציה.
עיצוב שמותאם למיליארד הבא
באזורים רבים מכשירים פשוטים הם נפוצים, הקישוריות לא מהימנה, והמשתמשים לא יכולים לקבל גישה לנתונים. תצטרכו לרכוש את אמון המשתמשים על ידי התנהלות שקופה וחסכונית בנתונים. נסו לחשוב על דרכים שיעזרו למשתמשים עם חיבורים איטיים והממשק שלהם יהיה פשוט יותר, כדי לזרז את המשימות. כדאי תמיד לשאול את המשתמשים לפני הורדת תוכן עתיר נתונים.
הציעו אפשרויות לרוחב פס נמוך למשתמשים בחיבורים בעלי עיכוב. לכן, אם החיבור לרשת איטי, ספקו נכסים קטנים. מאפשרים לבחור נכסים באיכות גבוהה או באיכות נמוכה.
סיכום
השכלה היא חלק חשוב בחוויית המשתמש אופליין, כי המשתמשים לא מכירים את המושגים האלה. נסו ליצור שיוכים לדברים המוכרים לכם.למשל, הורדה לשימוש מאוחר יותר זהה להורדה של נתונים למצב אופליין.
כשמתכננים חיבורי רשת לא יציבים, חשוב לזכור את ההנחיות הבאות:
- עיצוב שיבטיח הצלחה, כישלון וחוסר יציבות בחיבור לרשת.
- הנתונים עשויים להיות יקרים, לכן צריך להתחשב במשתמשים.
- עבור רוב המשתמשים ברחבי העולם, הסביבה הטכנית היא כמעט בלעדית לנייד.
- מכשירים פשוטים הם דבר נפוץ. נפח האחסון, הזיכרון ועוצמת העיבוד מוגבלים, והם כוללים צגים קטנים ואיכות מסך מגע נמוכה יותר. ודאו שהביצועים הם חלק מתהליך העיצוב שלכם.
- אפשר למשתמשים לדפדף באפליקציה כשהם במצב אופליין.
- צריך ליידע את המשתמשים לגבי המצב הנוכחי שלהם ולגבי שינויים במצבים.
- אם האפליקציה לא צריכה נתונים רבים, כדאי לנסות לספק נתונים במצב אופליין כברירת מחדל.
- אם האפליקציה עמוסה בנתונים, אפשר להסביר למשתמשים איך הם יכולים להוריד אותם לשימוש במצב אופליין.
- חשוב לאפשר למשתמשים להעביר את החוויות בין מכשירים.
- השתמשו בשפה, בסמלים, בתמונות, בטיפוגרפיה ובצבע יחד כדי לבטא רעיונות למשתמשים.
- לספק תחושת ביטחון ומשוב כדי לעזור למשתמש.