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

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

דברים קטנים אבל מעצבנים

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

הנה דוגמה לתבנית לא סלחנית מתוך המערכת flex הישראלית לניהול חשבונות:

flex. לא סולחת ולא שוכחת.

למקרה שלא הבנתם את הודעת השגיאה, הייתי צריך להקליד כאן 11/03/2010 ולא 11/3/2010. ברור, לא? כמה היה עולה לתכנת שדה שיודע להבין גם 11/3/2010 ולא רק 11/03/2010? שלא לדבר על 11-3-10 או 11.3.10. במקרה של flex הטעות חמורה אפילו יותר, כי יש כאן מקום להזנת תאריך, אבל אי אפשר לבחור מלוח שנה כמקובל בשדות תאריך. כך שכל מי שרוצה להזין תאריך לעשות את זה לפי איך שהמתכנת של השדה הזה הסכים לקבל תאריכים – his way or the highway.

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

גם טדי קולק ז"ל היה מסתדר עם המפות של גוגל, יוּרשלים

תאריכים סלחניים

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

• 17-3-2010
• 17/3/2010
• 17.03.2010

אני יכול להשתמש בתאריך מקוצר:

• 17/3
• 17

וגם ביום:

• Wednesday
• Wed

אפשר גם ברביעי הבא:

• Wed Week
• Wed W

וכן הלאה. כמה זה מסובך לתכנן ולתכנת את זה? לא מאוד. וזה יכול לעבוד בכל שדה תאריך.

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

• Dinner with John tonight at 19:00
• Dinner at 19:00 with John
• 7pm dinner with John

הוספה מהירה בלוח השנה של גוגל

עמודי נחיתה סולחים בקלות

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

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

טופס בעמוד נחיתה שאוכל הכל (כמעט)

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

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

לבחור קידומת טלפון מרשימה? למה?

יש עמודי נחיתה שעושים את זה פחות טוב:

למה צריך לבחור את הקידומת מרשימה?

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

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

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

תבנית סלחנית – דפוס עיצוב

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

• ב-Quince
• ב-UI-Patterns
• ב-Designing Interfaces (האתר של הספר)
• ב-UXI עוד אין, אבל יהיה בקרוב… ויש שם גם כמה דפוסי עיצוב אחרים.

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

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

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

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

אתרי דפוסי עיצוב שהוזכרו בפרק

יש בסוף גם כמה שלא הוזכרו… בונוס!

• Quince
• Welie
• Essential Controls
• Yahoo Design Pattern Library
• PatternTap
• Konigi
• UI-Patterns
• UI Pattern Factory

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

0:40 קצת על UXI
2:20 מה זה דפוסי עיצוב או Design Patterns? לפרק בעיות מורכבות לבעיות פשוטות יותר.
4:20 איך דפוס עיצוב נולד?
6:20 כפתור מול ניווט לפעולות בפייסבוק
8:30 בדפוס עיצוב יש מגוון
9:30 פתרונות שונים לבעיה אחת: גלילה – Scrolling, חלוקה לדפים – Pagination
16:30 תרגום בלייב של דפוס העיצוב "חלוקה לדפים" מאתר Quince (קווינסי)
22:45 PatternTap – נותן הרבה דוגמאות ויזואליות לכל דפוסי העיצוב
23:00 שובל פירורי לחם – Breadcrumb Trail והנזקים של מימוש דפוס עיצוב שגוי.
25:35 טבלת הסינון של זאפ – דפוס עיצוב מאוד אפקטיבי
28:00 האתרים שאנחנו מעדיפים לדפוסי עיצוב, וטיפים לכל מי שמתעניין בהם

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

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

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

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

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

החווייה שלי

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

רכיב הדירוג של Outbrain בפעולה

כוכבי הדירוג מופיעים בסוף כל פוסט, לפני התגובות. משמאל אפשר לראות את שלושת המצבים העיקריים של הרכיב. יש עוד שני מצבים שלא מוצגים פה:
1. מיד אחרי שמדרגים מופיע הכיתוב "תודה…" אחרי הכוכבים.
2. אחרי שניה או שתיים נוספות כתוב "דורג 4.0 על ידך" (או כל דירוג אחר שבחרתם).

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

• כשיש כבר דירוג, לא ברור אם אפשר להוסיף דירוג משלך. עד שהעכבר מרחף מעל הכוכבים, אין שום אינדיקציה לזה שאפשר להשפיע על הדירוג. מצד אחד יש כאן תמציתיות ויזואלית ראויה לשבח, יהיה קשה לצמצם את הממשק עוד יותר. מצד שני, האם השימוש בו באמת ברור לכל אחד כשהוא בצורה כזו? האם ברור בכלל שאפשר להקליק עליו? האם הוא מזמין הקלקה – כלומר האם בכוכב יש כזה affordance? מעניין מה בדיקות השמישות של Outbrain אומרות בעניין.חבר לעבודה אמר שצורת הדירוג הזו זהה לזו של YouTube. זה נכון. חשבתי על זה שלמרות שאני צופה ב-YouTube הרבה, מעולם לא ניסיתי לדרג משהו, ואני נוטה להאמין שזה בגלל שהצורה הזו של דירוג לא מניעה מספיק לפעולה. אבל אולי זה קשור לאופי שלי, אני בדרך לא מדרג, גם באתרים אחרים. Outbrain ו-YouTube לא ייחודיים במערכת הדירוג שלהם, זו תבנית עיצוב (Design Pattern) מוכרת ודי סטנדרטית, בספריה של Yahoo היא זהה לגמרי.המקום היחיד שבו דירגתי על בסיס קבוע היה בזמן הסרה של אפליקציה באייפון. שם כחלק מתהליך ה-Uninstall אתה נדרש לדרג את האפליקציה. בהתחלה חשבתי שזה סתם מציק, אבל בדיעבד הבנתי שזו דרך מצויינת לחסל מהר אפליקציות בעייתיות, כאלה שיש להן באגים, תוכן פוגעני וכו'. שם דירגתי כל אפליקציה שהסרתי.
• כשהעכבר מעל הכוכבים, הדירוג הנוכחי נעלם. אמנם הדירוג צריך להיות רק שלך (לא להציץ בתשובות של אחרים!), אבל העלמת הדירוג הנוכחי יוצרת בלבול ברגע הראשון שהעכבר מעל הכוכבים. אפשר גם להזיז את העכבר מחוץ לאיזור הכוכבים ולראות שוב את הדירוג הקיים, אבל הייתי מעדיף, כמעצב וכמשתמש, לוותר על הרגע הזה של אי-הנוחות והבלבול בשימוש הראשון.

מה דעתכם?

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

תבניות-עיצוב, Design Patterns,  הן פתרונות מוּכּרים לבעיות נפוצות. זה מושג שמוכר בדרך-כלל בעולם הנדסת התוכנה, ובשנים האחרונות החלו לקום אתרים שמגדירים כאלה גם עבור ממשק המשתמש. הם מציגים תבניות-עיצוב כמו פרורי לחם  – breadcrumbs (כמה מוזרים התרגומים לעברית), אשפים – wizards, דירוג – rating, עצים ואחרים. את התבניות צריך להתאים בדרך-כלל לכל יישום, אבל הן יכולות לשמש גם כהתחלה טובה, בסיס לממשק, וגם כהשראה לרעיונות חדשים.

Smashing Magazine הוא כמעט תמיד מקור מעולה לידע וקישורים. אתמול התפרסם שם מאמר עם סקירה מקיפה של תבניות-עיצוב לממשק משתמש. במאמר יש גם קישורים למקורות מידע מצויינים על שימושיות וממשק ברשת, שביניהם בלטו בחסרונם המגזין A List Apart, הפורום העצום של IXDA, איגוד השימושיות UPA והמגזין שהוא מפרסם – User Experience. אם יש לכם עוד קישורים, אתם מוזמנים להוסיף בתגובות.

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

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

40+ Helpful Resources On User Interface Design Patterns

או כאן

http://tinyurl.com/designp

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