דפוסי עיצוב (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 ולהוריד את הפרקים אוטומאטית ברגע שהם מתפרסמים.

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

Adaptive Path הם אחד מהמקומות המעניינים יותר בעולם ה-User Experience. עזבו את הסטטיסטיקות והחוקים של נילסן, ב-Adaptive Path עוסקים באנשים. זו כבר השנה החמישית שהם מארגנים את כנס ה-UX Week, כנס שבכל שנה מצליח להביא עושר רב של הרצאות מרתקות, ואת כולן אפשר לראות ברשת. כן, כן, הם משתפים את כולם בעושר הזה. גם המצגות זמינות ברשת. צעד מאוד נבון שיווקית, אם אתם שואלים אותי.

אם יש לכם 50 דקות פנויות, אני ממליץ בחום על ההרצאה The State of User Experience של Jesse James Garrett – אחד מהמקימים של Adaptive Path. גארט נותן מבט מרענן, הוליסטי, על התחום של חוויית המשתמש ולאן הוא עשוי ללכת. יש עוד שפע של הרצאות אחרות לצלול אליהן באתר של הכנס.

אם יש לכם רק 6 דקות, אתם מוזמנים לשמוע כמה מילים מ-Jeff Veen. הוא נואם מרתק; ראיתי אותו לראשונה בכנס אחר עם ההרצאה Designing for Big Data (מומלץ גם, 20 דקות). במיני-הרצאה ב-UX Week הוא דיבר על איך העתקה וחיקוי בעיצוב. כל אומן או מעצב מחקים אחרים; זה חלק לגיטימי מתהליך העיצוב. השאלה היא איך עושים את זה. בתור מי היה שותף לתהליך כזה לא מעט פעמים, התחברתי לזה מאוד. מקווה שגם אתם.

Jeffrey Veen | UX Week 2009 | Adaptive Path מתוך Adaptive Path on Vimeo.

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

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

גירסא מקוצרת של הפוסט התפרסמה היום ב-Ynet, והוא מובא פה בגירסתו המלאה ("גירסת הבמאי").

עמוד הבית: יורים לכל הכיוונים

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

אנטואן דה סנט אקזופרי, מי שכתב את "הנסיך הקטן", ניסח את זה יפה:

"נראה ששלמות אינה מושגת כשאין יותר מה להוסיף, אלא כשאין יותר מה להסיר".

בעמוד הבית של המוסד לביטוח לאומי נראה שיש דווקא הרבה מה להסיר.

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

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

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

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

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

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

ניווט שטח

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

בנוסף, עיצובו של עמוד הבית די מיושן. הוא מותאם למסכים של 800×60 פיקסלים, למרות שבינואר 2009 96% ממשתמשי האינטרנט בכל העולם כבר עברו ל-1024×768 או יותר. אפשר גם לדבר על האסטתיקה שלו, למשל על השימוש בפונט דמוי כתב יד לכותרת הראשית. פונט כתב-היד משדר משהו חופשי, אישי, כייפי, שלא מתאים ולא קשור למוסד ממשלתי כזה.

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

המובטל יגאל

הפסקת עבודה או עבודות בכביש?

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

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

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

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

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

היה בקלות אפשר להציג את אותו הדבר כרשימה:

• דמי לידה – תשלום בעד הארכת חופשת הלידה, פיצול חופשת הלידה – בעקבות לידה רב-עוברית או אשפוז;
• ילד נכה
• הבטחת הכנסה
• שירותים מיוחדים לנכים
• נכות
• שיקום מקצועי

כך או כך, יגאל מצליח למצוא די בקלות את "אבטלה" תחת "פיטורין/התפטרות".

יצאת זכאי?

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

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

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

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

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

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

כסף כסף תרדוף

התשובה לשאלה של המובטל יגאל "כמה כסף מגיע לי" היא מורכבת הרבה יותר. הנה הטבלה שמסבירה:

ואם לא הבנתם, יש גם טבלה עם דוגמא לחישוב:

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

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

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

ניקוד

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

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

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

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

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

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

סיכום

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

איזור שלם שלא יכולתי לבדוק הוא "שירות אישי", כי הוא מחייב קבלת סיסמא במשרדי הביטוח הלאומי, ולשמחתי אני לא מבקר בהם – בינתיים.

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

אוסף מקורות מהרשת ומחוץ לה על עיצוב חוויית משתמש – User Experience Design – למתחילים: אתרים, בלוגים, כנסים, ספרים. כנסו כנסו כנסו.

http://tinyurl.com/ln88sm

תבניות-עיצוב, 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

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