מסכי טעינה עם שלד - Skeleton Screens מוסבר¶
פותחים אפליקציה כמו לינקדאין או פייסבוק, והדף לא ריק ולא מציג גלגל טעינה מסתובב. במקום זה מופיעים מלבנים אפורים בצורת כרטיסי תוכן, שנעלמים בהדרגה ומתמלאים בתמונות ובטקסט אמיתי. זה נקרא מסך שלד, וזו אחת הטריקים הפשוטים והיעילים ביותר בעולם חוויית המשתמש.
מה זה בעצם מסך שלד¶
מסך שלד הוא בעצם גרסת "רפאים" של התוכן שעומד להיטען. במקום להציג מסך ריק לגמרי או ספינר גנרי באמצע המסך, מציגים צורות אפורות שמחקות בדיוק את המבנה של התוכן האמיתי - מלבן במקום כותרת, עיגול במקום תמונת פרופיל, כמה שורות דקות במקום פסקת טקסט. כשהנתונים האמיתיים מגיעים מהשרת, הצורות האפורות מוחלפות בתוכן האמיתי במקום.
הרעיון המרכזי הוא שהמשתמש כבר רואה את "השלד" של הדף לפני שהבשר עליו, כלומר הוא כבר מבין איך הדף יראה ואיפה כל חלק יהיה ממוקם.
למה זה מרגיש מהיר יותר מספינר רגיל¶
מבחינה טכנית, שלד לא מקצר את זמן הטעינה בפועל אפילו לא במילישנייה אחת. אז למה הוא כל כך יעיל? התשובה קשורה לתפיסה האנושית של זמן, לא לזמן עצמו.
ספינר מסתובב לא נותן שום מידע על מה בדיוק נטען או כמה תוכן עומד להופיע. הוא רק אומר "משהו קורה, חכה". שלד, לעומת זאת, נותן למשתמש תחושת מבנה מיידית - הוא רואה שיהיו כאן שלוש כרטיסיות, שכל אחת תכיל תמונה וכותרת ותיאור קצר. זה יוצר תחושה של התקדמות, כאילו הדף כבר "כמעט שם", גם אם בפועל שום דבר עוד לא נטען.
בנוסף, שלד מונע את הקפיצה המפחידה של תוכן שמופיע פתאום ומזיז את כל שאר האלמנטים במסך, כי המבנה כבר תפוס מראש בגודל הנכון.
איך בונים שלד פשוט עם CSS בלבד¶
לא צריך ספרייה מיוחדת כדי לבנות שלד בסיסי. ההרכב הוא בעצם שני חלקים: קופסאות אפורות בגודל ובצורה שמחקה את התוכן האמיתי, ואנימציה עדינה שנותנת תחושת חיים.
לצורות עצמן, פשוט יוצרים div עם רקע אפור בהיר וזוויות מעוגלות, בגודל שמתאים לתוכן שהוא מייצג. לתמונת פרופיל עגולה, למשל, מספיק div עגול. לשורת טקסט, מלבן דק וארוך.
לאנימציה, הטכניקה הנפוצה ביותר היא הבהוב עדין, gradient שנע משמאל לימין ברקע של הקופסה ויוצר תחושת "נצנוץ" עובר. זה נעשה בעזרת gradient לינארי בשלושה גוונים של אפור, יחד עם אנימציית CSS שמזיזה את המיקום שלו לאורך זמן בלולאה אינסופית. אפשר גם להשתמש באפקט פועם פשוט יותר, שבו האטימות של הקופסה עולה ויורדת בעדינות. שני הפתרונות עובדים היטב, וההבדל ביניהם הוא בעיקר עניין של טעם אישי.
חשוב לשים לב שגודל וצורת קופסאות השלד צריכים להיות קרובים ככל האפשר לתוכן האמיתי שיחליף אותן. שלד שלא תואם למבנה הסופי גורם לקפיצה מכוערת ברגע שהתוכן האמיתי נטען, ומבטל חלק ניכר מהיתרון של הטכניקה.
מתי שלד שווה את המאמץ ומתי לא¶
שלד לא נדרש בכל מקום. בטעינות שאורכות פחות מכמה עשרות מילישניות, שום סוג של אינדיקציית טעינה לא באמת נחוץ, כי המשתמש כלל לא יספיק להבחין בעיכוב. במקרים כאלה, הוספת שלד רק מוסיפה מורכבות בקוד בלי תועלת אמיתית.
שלד משתלם בעיקר במקומות שבהם יש טעינה שאורכת יותר מחצי שנייה בערך, ובמיוחד כשמדובר בתוכן שיש לו מבנה חזותי ברור וחוזר - רשימת כרטיסים, פיד, טבלת נתונים. במקרים כאלה השלד באמת מציג מבנה שעוזר למשתמש להבין למה לצפות.
לעומת זאת, בפעולות קצרות וממוקדות, כמו שליחת טופס קטן, ספינר פשוט ליד הכפתור עדיף - הוא ברור, קטן, ולא דורש בניית מבנה חזותי מיוחד. הכל עניין של להתאים את כלי הטעינה לגודל ולמשך הפעולה בפועל.
הבנייה של רכיבי ממשק כאלה, כולל האנימציות שמאחוריהם, היא בדיוק הסוג של דברים שנלמדים לעומק בקורס צד לקוח, עם דגש על הבנה למה משהו עובד ולא רק איך להעתיק קוד.
לסיכום¶
מסך שלד הוא טריק פשוט שמנצל את הפסיכולוגיה של תפיסת זמן כדי לגרום לאפליקציה להרגיש מהירה יותר, גם בלי לשנות בכלל את זמן הטעינה בפועל. בנו את הצורות שיתאימו למבנה האמיתי של התוכן, הוסיפו אנימציה עדינה, ותשמרו את הטכניקה למקומות שבהם היא באמת תורמת.
אשמח לשמוע איזה סגנון שלד אתם הכי אוהבים, שתפו בדיסקורד.