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