כפתורים וירטואליים וכפתורים אמיתיים: כתבה שנייה בסדרה

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

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

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

צורה ופונקציה

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

תמונה: אתר האינטרנט של חברת האסברו

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

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

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

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

מה ניתן ללמוד מהצעצוע הפשוט הזה?

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

דון נורמן בספרו "The design of everyday things" מקשר בין המושג affordance (מזמינות) המתאר את תכונותיו החומריות של אוביקט המסבירות באופן אינטואיטיבי את השימוש בו, לבין עולם עיצוב הממשקים. כאשר בעולם החומרי, כמו גם בעולם עיצוב הממשקים, העיצוב צריך להזמין לפעולה ספציפית. לדוגמה, העובדה שכפתור בולט מעל פני השטח מרמזת על פעולת לחיצה.

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

Lusoimages – fotolia.com ©

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

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

תמונה: מגאזין  WIRED

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

תמונה: www.kioskkeypad.com

 

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

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

 

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

© Kadmy – Fotolia.com

 

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

 

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

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

David Wood – Fotolia.com ©

 

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

 

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

תמונה: אתר תמי 4

 

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

Flickr.com, cc by nglynn

 

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

באייפון הכיתוב מציג את מצב המתג הנוכחי. הזזה של המתג חושפת כיתוב אחר. אותי זה תמיד מבלבל: האם ON הכוונה "לחץ כאן בכדי להעביר למצב ON" או "כרגע אני ב ON"? יצא לי גם כמה פעמים לגשת עם האצבע לאזור הכחול עם הכיתוב ולנסות להזיז אותו. Windows Phone7  מציג את המצב הנוכחי בטקסט מחוץ לאזור המתג וההפעלה של המתג נסמכת על הקונוונציה: ימין זה ON שמאל זה OFF. באנדרואיד החליטו לשבור את הקונבנציה: צ'קבוקס מסומן בירוק=מופעל, צ'קבוקס מסומן באפור =כבוי.

סיכום

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

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