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

לפני כחצי שנה העליתי את אתר "הצלליות של סבתא שרה", שהציג לעולם את תאטרון הצלליות של סבתא שלי. את ההצגות שסבתא שלי הציגה היא הכינה בשנות ה-40 של המאה שעברה, והציגה במשך 65 שנה לכל בני המשפחה ולחבריהם לגן ולכיתה. אבי והדודים שלי, בני הדודים שלי וגם ילדיהם, 3 דורות, נהנו מההצגות של סבתא שרה.

אתמול התפרסם סיפור הצלליות, המשפחה והאתר במוסף סגנון של מעריב, בכתבה של נגה משל. החל מהיום, 22/7, מוצגות הצלליות המקוריות והאתר שהקמתי במוזיאון של המרכז לתאטרון בובות בחולון, כחלק מפסטיבל לתאטרון וסרטי בובות. התרגשות גדולה! הפסטיבל יימשך עד יום שבת, ה-25/7.

קונספט עיצוב וממשק

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

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

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

אם אתם לא רואים את האתר כאן למטה, זה אולי בגלל שאתם קוראים את הפוסט עם קורא RSS או באימייל. צפו בפוסט בתוך הבלוג.

ניווט – התפריט

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

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

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

2. היא שוברת את האמינות של האתר כחפץ אמיתי בעולם. היה לי חשוב לתת למשתמשים באתר את ההרגשה שהם מול אובייקט אמיתי.

צפיה בהצגות

הצפיה בהצגות היא לב ליבו של האתר. לא מעט שאלות עלו בזמן תכנון הממשק שלהן.

תפריטים בזמן ההצגות

מה עושים עם התפריטים כשצופים בהצגות?

התפריט בדרכו החוצה לפני הצגה

מצד אחד, רציתי עקביות בממשק, אחד מהעקרונות החשובים שמציין נילסן (consistency and standards). קיום עקרון זה היה עשוי לאלץ אותי להשאיר את התפריט גם בזמן הצפיה בהצגות. בנוסף, יש את השאיפה לממשק ללא מצבים (modeless), כדי להמנע משגיאות מצבים (mode errors). מצד שני, רציתי חווייה קרובה ככל האפשר למציאות, להצגות האמיתיות של סבתא שלי – ובסופו של דבר עקרון זה ניצח. החלטתי להסתיר את התפריט בזמן הצפיה בהצגות.

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

התמודדות עם Control Freaks

כחלק מהרצון לתת חווייה אמיתית, לא רציתי לתת בהתחלה אפשרות לעצור או לצאת מההצגה. מישהו מכם הצליח לעצור סבתא? בטח לא את הסבתא שלי :-) אבל הנילסן הזה, לא קל איתו. אחד העקרונות האחרים שהוא מציין מדבר על תחושת השליטה שחשוב להעניק למשתמש (User control and freedom). גם בלי נילסן, לא היה צריך יותר ממשתמש אחד או שניים שניסו את האתר ככה, כדי להבין שאנשים רוצים את החופש לטייל באתר כרצונם, בלי לראות את כל ההצגות עד הסוף. לאנשים אין זמן ואין סבלנות.

הפעולות בזמן הצגה

לא הייתי בטוח מה לשים במקום התפריט בזמן הצגה. צריך לתת אפשרות לצאת מההצגה ובחזרה לתפריט ולשאר האתר, אבל איזה אפשרויות שליטה לתת על ההצגה עצמה? אם ללכת על האנלוגיה הברורה לוידאו, היה צריך לתת אפשרות לשלוט על הווליום, לעצור ולהמשיך, לזוז קדימה ואחורה ולהציג את המיקום היחסי בתוך ההצגה. היכולת האחרונה גם עונה על העקרון של הצגת מצב המערכת (visibility of system status) – איפה המשתמש נמצא בתוך ההצגה, או כמו ששואלים בטיולים, "מתי נגיע?" או "הלכנו יותר משנלך או שנלך יותר משהלכנו?"

ההחלטה שקיבלתי בסוף היתה לתת רק לעצור או להמשיך את הסרט, או לחזור לתפריט. המחשבה מאחורי ההחלטה היתה שזה חלק מהקסם של ההצגות של סבתא שלי – היא גרמה לנו לעצור, לפנות כמה דקות זמן, ולשקוע במשהו חדש ולא מוכר (או מוכר מאוד – לבני המשפחה…). מי שאין לו זמן לצפות, יכול לחזור לתפריט הראשי או פשוט לצאת מהאתר. מי שבדיוק צלצל לו הטלפון יוכל לעצור ולהמשיך אחר-כך. מאחר וההצגות הן של כמה דקות בודדות, לא חשבתי שאנשים באמת ירצו לעצור כדי לחזור אחר-כך ולהמשיך לצפות מאותה הנקודה בהזדמנות אחרת. בנוסף, רציתי להשאיר את הממשק פשוט ככל האפשר. התוצאה – כאן בצד.

התלבטויות על ממשק עברי

לאן חוזרים?

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

• האייקון של כפתור ה"חזור" או "חזרה", כמו back בדפדפן, אם יש כזה: האם הוא יצביע לכיוון תחילת השורה, ימינה, או בכיוון שמשתמשים רגילים אליו מהממשק באנגלית, שמאלה? (שאלה קשה)
• ליישר את האייקונים בתפריט או ב-toolbar לימין או לשמאל?  (כמעט תמיד בימין)
• האם להקפיד על מיקום הגלילה (scroll bar) שיהיה בסוף שורת הטקסט, בצד שמאל, או לתת לו להשאר בצד ימין? (משתדל להקפיד על שמאל)
• למקם את בר תפריט אנכי בצד ימין או בצד שמאל? (כמעט תמיד בימין)

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

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

מיקום כפתור ה-pause

החלק התחתון מכוסה בתפאורה

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

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

מבחני משתמשים

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

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

תפריט? מה עושים עם זה?

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

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

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

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

השינוי הזה פתר את הבעיה. המשתמשים כבר הסתדרו בעצמם מכאן.

סיכום

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

עוד על סבתא שרה, הצלליות והאתר

אפשר לקרוא בכתבה ממוסף "סגנון" במעריב:

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