כל פריים מושלם: למה ממשק נשפט פריים אחר פריים

כל פריים מושלם

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

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

למה אמצע המעבר חשוב

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

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

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

חוסר סנכרון קטן, ספקות גדולים

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

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

הפוסט נחתם באנימציית זום "בלתי מתגרה" מאפליקציית Preview ובבקשה: שימו לב לא רק למצב ההתחלתי והסופי, אלא לכל מה שביניהם.