תכנון עיצובים שמישים

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

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

באתר הנ”ל יצרו Design Patterns לכ-20 צרכים שעלולים לצוץ בזמן שיוצרים אתר אינטרנט, לדוגמה: הרשמה זריזה, מדידת חוזק סיסמה, עורך WYSIWYG, דפדוף. חשוב להדגיש: הנושא של Design Patterns מטפל בתחום התאורטי בלבד – הוא מנסה לסייע למתכנן או למתכנת להתגבר על המכשול ההתחלתי של אופן הגישה לבעיה, ואופן מציאת הפתרון. הדגם (pattern) אינו דוגמה מעשית של יישום, אלא רשימת הנחיות – אילו נסיבות יוצרות את הצורך בפתרון, למה יש לשים לב כאשר מפתחים את הפתרון, ומדוע. באתר הנ”ל, כל דגם מחולק לתת-נושאים הבאים: סיכום הבעיה; דוגמה ויזואלית; מתי להשתמש בזה; תאור הפתרון; הסבר הרציונל שמאחורי הפתרון.
הדגמים באתר הזה נראים לי טובים מאד- הבעיות אכן לקוחות מחיי היום-יום של מפתחי אתרים, ודרכי הפתרון המוצעות כתובות בצורה רצינית ומקיפה.

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

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

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