המראה של הבלוק מספק רמזים חשובים לגבי האופן שבו צריך להשתמש בו. ריכזנו כאן כמה דברים שכדאי לקחת בחשבון כשאתם מעצבים בלוקים משלכם.
שימוש בגבולות גלויים
בשנות ה-2000, הסגנון 'Aqua' היה פופולרי וכל אובייקט במסך היה מקושט בהדגשה ובצללים. בשנות ה-2010, הסגנון של Material Design נכנס לשימוש, וכל אובייקט במסך פשוט לצורך יצירת צורה נקייה, שטוחה וללא גבולות. ברוב סביבות התכנות באמצעות בלוקים יש הדגשה וצללים סביב כל בלוק, ולכן כשמעצבים גרפיים רואים את זה, הם תמיד מסירים את הקישוטים המיושנים האלה.
כפי שאפשר לראות בדוגמה שלמעלה עם חמישה בלוקים (מ-scriptr.io), 'הקישוט המיושן' הזה חיוני כדי להבדיל בין בלוקים מחוברים באותו צבע.
המלצה: אם אתם משנים את העיצוב של Blockly, אל תתנו לטרנדים של היום לשבור את האפליקציה.
הוספת חצים למיקום
משוב מילדים בארה"ב (אבל באופן מעניין לא ממדינות אחרות) חשף בלבול נרחב בין ימין לבין שמאל. הבעיה נפתרה באמצעות הוספת החצים. אם הכיוון הוא יחסי (למשל, ביחס לדמות, אווטר), חשוב להקפיד על סגנון החץ. חץ ישר → או חץ פנייה ↱ יכולים לבלבל כשהאווטאר פונה לכיוון ההפוך. האפשרות הכי מועילה היא להשתמש בחץ עגול ⟳, גם במקרים שבהם הזווית שהפניתם קטנה יותר מהחץ מציין.
המלצה: מומלץ להוסיף סמלי Unicode לטקסט היכן שאפשר.
שימוש במחברים אופקיים ואנכיים שונים
ב-Blockly יש שני סוגים שונים של חיבורים: צורות הפאזל האופקיות והחריצים האנכיים. בממשק משתמש טוב, צריך לשאוף למזער את מספר רכיבי העיצוב. לכן, מעצבים רבים מנסים ליצור מראה זהה לשני סוגי החיבורים (כפי שמוצג בהמשך).
כתוצאה מכך, משתמשים חדשים מתקשים למצוא דרכים לסובב את הבלוק כדי שיתאימו לחיבורים לא תואמים. ב-Blockly, רכיבי התכנות חזותיים ומוחשיים, לכן חשוב להיזהר שלא להציע בטעות אינטראקציות של משתמשים שאין להן תמיכה.
בהתאם, ב-Blockly נעשה שימוש בצורת פאזל צפופה לחיבורי ערכים, ובחריץ יישור בולט מבחינה ויזואלית כדי לאפשר יצירת ערימה של הצהרות.
המלצה: אם אתם משנים את העיצוב של Blockly, חשוב לוודא שהחיבורים האופקיים והאנכיים נראים שונים.
הצגה של הצטברות של הצהרות עץ
בלוקים בצורת C תמיד כוללים מחבר בחלק הפנימי העליון, אבל בסביבות מסוימות יש גם מחבר בחלק הפנימי התחתון (למשל, Wonder Workshop), ובסביבות אחרות אין מחבר כזה (למשל, Blockly ו-Scratch). מכיוון שרוב הבלוקים של ההצהרות כוללים מחבר למעלה ולמטה, משתמשים מסוימים לא רואים באופן מיידי שהצהרות יכולות להיכנס ל-'C' שאין לו מחבר למטה.
אחרי שהמשתמשים מבינים שבלוק אחד של הצהרה נכנס לתוך 'C', הם צריכים להבין שגם יותר מהצהרה אחת יכולה להיכנס. בסביבות מסוימות, החיבור התחתון של ההצהרה הראשונה מוטמע בחלק התחתון של האות 'C' (למשל, Wonder Workshop ו-Scratch), ואילו בסביבות אחרות נשאר רווח קטן (למשל, Blockly). כשהבלוקים מונחים בצורה נוחה, לא רואים שאפשר להוסיף עוד בלוקים.
שתי הבעיות האלה פועלות זו נגד זו. אם יש מחבר בחלק התחתון הפנימי (Wonder Workshop), החיבור של ההצהרה הראשונית יהפוך לברור יותר, אבל על חשבון היכולת לזהות ערימות. אם אין מחבר בחלק התחתון (Blockly), החיבור של ההצהרה הראשונית לא ברור, אבל אפשר לזהות את האפשרות של יצירת סטאק. האפשרות עם החיבור התחתון הפנימי והחיבור התחתון של ההצהרה בתוך קוד (Scratch) זכתה לניקוד הנמוך ביותר במדד הגילוי במהלך הבדיקה עם Blockly.
מהניסיון שלנו, החיבור של ההצהרה הראשונית הוא אתגר קטן יותר למשתמשים מאשר גילוי העריכה. אחרי שמגלים את האפשרות הראשונה, אי אפשר לשכוח אותה, אבל כדי לזכור את האפשרות השנייה צריך תזכורת. ב-Blockly ניסו את הגישה של Wonder Workshop וגם את הגישה של Scratch, עד שיום אחד התרחשה באגת רינדור שגרמה לפערים הקטנים. בגלל הבאג הזה, ראינו שיפור משמעותי במחקרים על משתמשים ב-Blockly (עכשיו זה 'תכונה' שאנחנו גאים בה).
המלצה: אם אתם משנים את העיצוב של Blockly, כדאי להשאיר את ממשק המשתמש הקיים של העריכה ב-Stacking.