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

דיברתי עם אלכסיי על הקשר בין מעצבים גרפיים למאפייני ממשק, ועל הכלים שמשמשים אותו לאפיון (בעיקר InDesign ולאחרונה גם Flash Catalyst).

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

מקווה שתהנו להאזין.

כדי להאזין לפרק (29:28 דקות)

אפשר להוריד את הפרק (12.8MB), להאזין לו באייטיונז, או באתר – בסוף הדף יש נגן כסוף.

קישורים שהוזכרו בפרק

• Unify – מערכת מסמכים לאפיון בעזרת InDesign מבית EightShapes
• Flash Catalyst – כלי חדש לעיצוב ואיפיון של מערכות, במיוחד כאלה שיהיו בסוף ב-Flash, אבל לא רק.
• גשטאלט

אינדקס נושאים וזמן בפרק

1:30 המעצב כפסיכולוג
4:30 על העבודה של מעצב עם מאפייני ממשק
6:15 החשיבות של הקשר בין מאפיין הממשק למעצב
10:15 כללים בעיצוב שכדאי למאפייני ומעצבי ממשק להכיר
15:50 הכלים שאלכסיי ממליץ עליהם לבניית wireframes
18:00 תוכנת InDesign ככלי לבניית wireframes
25:15 פלאש קטליסט Flash Catalyst

הרשמה לפודקאסט

יש לפודקאסט RSS Feed משלו וגם מקום ב-iTunes Store. אם אתם משתמשים ב-iPod או ב-iPhone תוכלו לעשות מנוי ב-iTunes ולהוריד את הפרקים אוטומאטית ברגע שהם מתפרסמים.

כדי להאזין, תלחצו כאן למטה:

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

כמה מחשבות שלי על whitespace – הריווח הזה שתופס את תשומת הלב שלנו, ועל ארגון מידע בדף.

צילום המסך השבועי לילד

כך נראה הדף של גוגל כשהוא נטען:

הממשק הנעלם: ככה הדף נטען (לחצו להגדלה)

וככה זה אחרי שהעכבר עובר עליו – העמוד שאנחנו רגילים אליו:

הממשק הנעלם: ככה הדף נראה אחרי שהעכבר עובר עליו

למרות שזה ניואנס, ההשפעה שלו על הקשב של המבקר היא משמעותית מאוד בעיני.

גימיק או שינוי אמיתי?

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

העובדה שהדף לבן למעט תיבת החיפוש מושכת את העין בצורה מאוד משמעותית. יש פה שימוש יפה של אפקט ה-whitespace על משיכת תשומת לב, כפי שהזכרתי בפוסט השערורייתי סקס!!! ואיך למשוך תשומת לב: חלק 1 מתוך 3. טוב, אולי לא כל-כך שערורייתי העובדה שאין כמעט כלום על הדף מייצרת קשב למקום שיש בו תוכן.

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

עדכון 9/12: משיכת תשומת הלב לתיבת החיפוש היא רק חצי מהעניין. אחרי שגוגל וידאו שאנחנו ממוקדים על המטרה שלנו, תיבת החיפוש, הם השתמשו ב-fade-in כדי למשוך את תשומת הלב שלנו לכל הכלים האחרים שיש על הדף. אנשים רבים לא מודעים לכלים האלה בכלל: יומן הפגישות, מפות, חיפוש וידאו ועוד אחרים. האנימציה של ה-fade-in מפעילה את האיזורים בראיה ההיקפית שלנו; אלה רגישים לתנועה, שריד לתקופה הלא מאוד רחוקה שבה היינו צריכים להתגונן מפני חיות טרף מהירות שקפצו עלינו מהשיחים בזמן שאנחנו קטפנו תותי יער או שוקולד מהעצים. תזכירו לי לא לכתוב יותר פוסטים כשאני רעב. ותודה לעליזה על ההערה.

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

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

צפוף וחמים בואלה (לחצו להגדלה)

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

אמזון - מרווח ואוורירי (לחצו להגדלה)

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

תעמדו בטור ישר

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

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

היה מעניין לשמוע, אם מישהו ב-ynet קורא את המילים האלה, מה השיקולים מאחורי ההחלטה הזו.

הצילום בראש הכתבה הוא של LWY והטיגריסים של fPat

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

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

צבע

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

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

דוגמא: thepixel

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

דוגמא: PageLime

ב-pagelime משתמשים בצבע ירוק על רקע כחול כדי להדגיש את כפתור ההרשמה לאתר, שימוש מאוד נפוץ לצבע. גם בפינה הימנית למעלה, כפתור ה-Sign Up בולט בגלל הכפתור האפור שצמוד, ובגלל הסביבה הלבנה.

צבע אדום בטפסים: לשגיאות בלבד

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

דוגמא: רישום ל-boingo

בטופס הרישום ל-boingo. הכותרות באדום, בהתאם למיתוג של החברה (ליחצו כדי להגדיל):

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

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

עיוורון צבעים

בהדגשה בעזרת צבע בממשק (ובכלל) חשוב לשים לב לעוורי צבעים. 8% מהגברים ו-0.5% מהנשים בעולם הם עוורי צבעים, רובם מתקשים להבדיל בין אדום לירוק. אחת הדרכים להתמודד עם הקושי הזה היא להשתמש בהדגשה כפולה: שימוש בצבעים מנוגדים ביחד עם גודל, או בהדגשה משולשת: גם צבע, גם גודל, וגם משקל גופן. בדוגמא מאמזון למטה אפשר לראות הדגשה מרובעת עם "Shop All Departments".

משקל גופן

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

בעולם העיצוב (ליתר דיוק – הטיפוגרפיה) יש עושר יותר גדול מאשר Bold, כתב רגיל, איטליקס והשילובים שביניהם. מה שרוב האנשים קוראים לו “פונט” או “גופן” בעברית, נקרא בעולם הטיפוגרפיה “משפחה” או “משפחת גופנים” (או “משפחת פונטים” בעברית). הם נקראים כך בגלל שבכל משפחה יש כמה “משקלים” של אותו גופן, כל משקל נראה מודגש יותר או פחות מהשני, חלקם נטויים (italics) וכו’.

דוגמא: Myriad Pro

הנה למשל דוגמא של כמה משקלים מהפונט Myriad Pro של Adobe:

השימוש במשקלים שונים עוזר למשוך את העין של הצופה לחלק החשוב של המסר. כך בסריקה מהירה אנחנו קוראים רק את מה שהמעצב כיוון אותנו לקרוא. הנה שוב ב-pagelime, המילים Free, Fast, Easy ו-Fun ממש קופצות מהדף. Free הוא במשקל “Bold” (וגם ירוק – הדגשה כפולה), Fast, Easy ו-Fun הם ב-Semibold, והשאר ב-Light.

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

גודל

זה די ברור, גדול יותר, מושך את העין יותר. בדיוק כמו בכותרת שפה מעל.

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

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

קו תחתון Underline

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

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

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

להתחרות עם עצמכם

שימוש מוגזם באמצעי הדגשה יכול להיגמר רע. הנה דוגמא ממייל שיווקי שקיבלתי:

אכן תמונות קשות. שימו לב לכמות ההדגשות:

• הכותרת (שלום ברק דנין) מודגשת בגופן במשקל כבד.
• “לחץ כאן לשמוע את ההרצאה” מודגש בצהוב בוהק, קו תחתון, גופן גדול ובמשקל כבד, בשתי הפעמים שהוא מופיע.
• הטקסט “בסיגנונו הטיפוסי…” מודגש בגופן במשקל כבד.
• הקישור להרצאה מודגש בקו תחתון ובצבע כחול – מתאים לקישור.
• "הטקסט “אם נהניתם תעבירו הלאה” מודגש בגופן במשקל כבד ובצבע אדום.

למעשה, הטקסט היחיד שלא מודגש באיזושהי דרך הוא “יש לי 4 דקות שידהימו אותך” ו”קישור להרצאה”.

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

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

אפשר לראות דוגמא יפה להיררכיה ויזואלית בציור של ברויחל (Breugel) בבלוג החדש של ישי כהן (בהצלחה, ישי!) ומממשק בבלוג "In the Woods".

מונטי פייטון הדגימו מצויין את החשיבות של ניגוד בקטע הזה מתוך הסרט “בריאן כוכב עליון” – כולם צועקים: !Yes, we’re all different, והיחיד שבולט הוא האחד שאומר – !I’m not

בפוסט הבא

בחלק הבא אזכיר את הכלים הבאים למשיכת תשומת לב:

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

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

למי שתוהה, לא, הסקס הזה לא עוסק בפוסט. להיפך.

עדכון 5/11/2009: החלק השני כאן.

ריווח

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

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

עוד על whitespace

חצים

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

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

בפרסומת שמופיעה למעלה בניו יורק טיימס (פינה ימנית עליונה), יש שימוש בחץ אדום וגדול – הוא תופס חצי משטח ההודעה!

הנה דוגמא של ממשק שעושה שימוש בחץ – תודה לרן לירון:

מסגרות

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

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

עוד על מסגרות (מעולם הדפוס, אבל רלוונטי)

ניגוד – Contrast

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

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

עוד על ניגוד (הראשון ברשימה)

ניגוד - contrast. הניגוד בצד השמאלי חזק בהרבה מזה שבצד ימין.

בפוסטים הבאים

זה הכל לחלק הזה של הסדרה. בחלקים הבאים אזכיר את הכלים הבאים:

• צבע
• משקל גופן ("bold")
• גודל
• קו תחתון
• פָּנים
• תמונות ואיורים
• אנימציה
• סאונד

ֹ