16 Apr 2008
פוסט אורח: ממשק שימושי ככלי שיווקי / רן לירון
על מנת שהמערכת, התוכנה או האתר שלכם יהיו אפקטיביים, חיוני לספק למשתמש ממשק נוח, ברור ושימושי. במאמר הקודם דנתי בחשיבות השמירה על פשטות בעיצוב, במבנה ובפונקציונאליות, ככלי ליצרית ממשק אפקטיבי. בעקבות המאמר, פנו אלי מספר קוראים בשאלות. חלק מהדוגמאות שאציג במאמר זה נגזרו מהאתרים של הפונים (בהסכמה כמובן). פניות נוספות יתקבלו בשמחה.
במאמר זה אדון בעוד אחד מהיסודות המרכזיים של עיצוב ממשק אפקטיבי: יצרת ממשק עקבי (קונסיסטנטי). ניתן לסכם כלל זה בהנחיה פשוטה:
ממשק טוב חייב להיות עקבי.
למה זה חשוב ?
ממשק עקבי מחייב את המשתמש לפחות מאמץ. הוא פשוט יותר ללימוד, קל יותר להשתמש בו ונחסכות טעויות מיותרות. החוויה הכללית שממשק עקבי משאיר היא של מערכת מקצועית. לעומת זאת, ממשק שמתאמץ להיות חדשני, מתוחכם ומתחכם, ולא מקפיד על עקביות, עשוי לתסכל משתמשים ולהגדיל את הסיכוי לטעויות ולנטישת המערכת.
איך עושים את זה ?
נושא העקביות נבחן במספר רמות:
- האם הממשק עקבי למה שהמשתמש מכיר ומקובל בעולם?
- האם נשמרת עקביות פנימית של הממשק באתר ?
- האם נשמרת עקביות פונקציונאלית ?
- האם נשמרת עקביות צורנית ?
כלל מספר 1 : יש לשמור על עקביות למוסכמות מקובלות.
משתמשים מגיעים למערכת עם ניסיון קודם ועולם מושגים מגובש. הם למדו לצפות למוסכמות , (קונוונציות) הצגה מסוימות. המערכת צריכה להתאים למוסכמות הללו. יש מוסכמות כלליות, שרוב המשתמשים יצפו להן, ויש מוסכמות שנגזרות מהרקע הספציפי של משתמשי המערכת שלכם.
דוגמה למוסכמות שרוב המשתמשים מכירים – ניווט ראשי מסרגל עליון במסך, הצגת “חיפוש” במקום בולט בעמוד הבית, קישור מלוגו האתר אל העמוד הראשי, ייצוג קישור באמצעות טקסט כחול (או סגול) עם קו מתחתו ועוד. הבה נבדוק, לדוגמה, את נושא הצגת הקישורים:
כיום, כמעט כל משתמש שרואה טקסט כחול או סגול , יניח שמדובר בקישור, ויצפה מהטקסט לפעולה ומשוב האופייניים לקישור. כשהמשתמש יצביע על הטקסט באמצעות העכבר,הוא מצפה שהסמן של העכבר ישתנה ל”יד” (”hand / pointer”) וכשהוא לוחץ על הטקסט הזה, מצפה המשתמש שיופעל ניווט לעמוד אחר.
כל סטייה מהדגם הזה תבלבל משתמשים. בלבול שכזה יכול להיווצר כשקישור לא מוצג באמצעות טקסט כחול או סגול, כשאין קוו מתחת לטקסט של הקישור, כשבמעבר עכבר לא משתנה הסמן ליד – או כשלוחצים על טקסט כחול שמסומן בקו – ולא מופעל ניווט. בלבול דומה נוצר במצב ההפוך – כשמוצג טרסט צבעוני או טקסט מודגש בקו, שאיננו קישור, או כשהסמן משתנה ליד במקום שלא משמש כקישור (כפי שקורה לא פעם בקבצי Flash, לדוגמה). בכדי להימנע מלהטעות ולתסכל את המשתמש חשוב לוודא שקישורים יראו כפי שהוא מצפה, ומה שאיננו קישור – שלא יוצג בקונבנציה השמורה לקישורים.
כלל מספר 2 : יש לשמור על עקביות פנימית.
כשמשתמש נתקל בייצוג לפונקציונאליות כלשהי במערכת, הוא יצפה שאותה פונקציונאליות תיוצג באותה צורה בשאר המערכת. אם לדוגמה, בעמוד הראשי של המערכת יש קישורים בצבע כתום, שמשתמש למד לזהות ולהשתמש בהם, הוא לא יצפה שבעמודים הבאים של האתר ייוצג קישור ע”י טקסט בצבע אפור. אם במסך מספר 2 במערכת בניווט ממוקם בצד ימין של המסך, המשתמש יצפה שגם במסך 3 ו-4 הניווט ימוקם באותו מקום ויפעל באותה צורה.
כלל מספר 3 : יש לשמור על עקביות פונקציונאלית
אם, לדוגמה, במקום אחד במערכת לחיצה על האיקון לשמירה מבצעת שמירה ויציאה, המשתמש יצפה שבכל מקום במערכת, לחיצה על “שמירה” תבצע גם יציאה. במידה והמשתמש ילחץ על “שמירה” ולא תתבצע גם יציאה, כפי שהוא מצפה, הוא יניח שהייה פספוס כלשהו. הוא עשוי ללחוץ שוב ושוב על כפתור השמירה, במקום לחפש את כפתור היציאה הנפרד. עד שהוא יבין שהניסיונות החוזרים שלו לבצע יציאה מכפתור השמירה לא נושאים פרי, עשויות להצטבר אצלו תחושות בלבול, תסכול וכעס – לא חווית שימוש חיובית במיוחד.
כלל מספר 4 : יש לשמור על עקביות צורנית.
ברוב האתרים אין הצדקה אמיתית לעבוד עם מגוון רחב מאוד של עיצובים לפקדים ותוכן. אין צורך אמיתי ביותר מסוג אחד או שניים של כפתורים, יותר מסוג אחד או שניים של גופנים (Fonts). הטקסט צריך להיות מוצג לכל היותר ב- 3-4 גדלים שונים (כותרת ראשית, כותרת משנית, טקסט רץ, ואם מאוד חיוני “אותיות קטנות” לטקסט מוצנע). הרי מגופן אחד + 4 גדלי טקסט + אופציה לטקסט מעובה (Bold) ניתן לייצר 8 וארציות של הטקסט. נוסיף לכך טקסט בצבע כחול לקישורים ואולי טקסט בצבע אדום להודעות שגיאה, וקיבלנו, יחד אם הגדרת גודל הטקסט ואופציה לטקסט מעובה, קרוב ל-20 עיצובים שונים לטקסט (!),שכולם נגזרו מגופן אחד בלבד, ב- 3-4 גדלים.
רק על רקע עיצוב אחיד של רוב התוכן, ניתן להשיג הבלטה אפקטיבית של מה שחשוב באמת (קישורים, כותרות וכו’). אם נתבונן בדוגמה הבאה, מתוך האתר “כובע“, נוכל לראות איזה בלגן נוצר בעין כשמערבבים על שטח קטן לא פחות מ- 10עיצובים שונים של טקסט, חלקם קרובים (כגון 4 ו-8) וחלקם שונים מאוד (כגון 1 ו-5).
כמעט כל אובייקט בקטע מסך זה מציג עיצוב שונה.
חוסר אחידות כזה בעיצוב מבלבל את המשתמש, מקשה על זיהוי הנושאים החשובים, יוצר תחושה של מערכת לא מאורגנת ולא אמינה ומקשה על זיהוי הפונקציונאליות.
חידה:
די ברור שטקסט 7 הוא קישור מכיוון שהוא מעוצב בהתאם לכללים המקובלים לקישור.
האם טקסט 5 (”מחפשת כיסוי ראש ? חשוב לך להיות מקורית? ) הוא קישור ?
ומה בנוגע לטקסט 8 (” בהשראת הינומה צחורה ונפלאה ” ) – האם הוא קישור?
בעיצוב כזה, קשה לנחש.
(תשובה – בסוף המאמר)
לסיכום:
צריך להקפיד שהממשק יהיה עקבי עם המוסכמות מהעולם שמשתמש מכיר (לדוגמה לא להציג לסוכני בורסה “קניה” בצבע אדום ו”מכירה” בירוק) ועקבי עם עצמו. אם השתמשתם באתר בטקסט כחול כהה להצגת טקסט – אל תשתמשו בצבע דומה להצגת קישור.
ממשק עקבי פשוט יותר להבנה ולימוד ממשק לא עקבי. שככל שהמערכת שלכם תהיה עקבית יותר, כך תשתפר האפקטיביות של המשתמשים בשימוש בה כמו גם יכולת המערכת לקדם את השגת המטרות המרכזיות שתגדירו לה.
איך משיגים ממשק עקבי ?
ממשק עקבי מחייב תכנון מקדים של המערכת, קביעת קווים מנחים לעיצוב ושמירה קפדנית עליהם.
למסמך האפיון שמשמש לניהול העקבי של הממשק קוראים style guide – אבל על כך אצטרך להרחיב במסגרת מאמר נפרד.
במידעונים הבאים אציג חוקים ודרכים נוספות ליצירת ממשק אפקטיבי.
(התשובה לחידה: שני הטקסטים אינם קישורים)
אתם מוזמנים לשלוח שאלות, בקשות והערות, לכתובת: RanL at matrix.co.il
רן לירון הוא מעצב ממשק בכיר בחברת מטריקס, מרצה לעיצוב ממשק ושימושיות בג’ון ברייס ומורה לאיקידו בבית הספר “רונדו”
מאמר זה פורסם לראשונה במסגרת המידעון סודות השיווק
על מנת שהמערכת, התוכנה או האתר שלכם יהיו אפקטיביים, חיוני לספק למשתמש ממשק נוח, ברור ושימושי. במאמר הקודם דנתי בחשיבות השמירה על פשטות בעיצוב, במבנה ובפונקציונאליות, ככלי ליצרית ממשק אפקטיבי. בעקבות המאמר, פנו אלי מספר קוראים בשאלות. חלק מהדוגמאות שאציג במאמר זה נגזרו מהאתרים של הפונים (בהסכמה כמובן). פניות נוספות יתקבלו בשמחה.
במאמר זה אדון בעוד אחד מהיסודות המרכזיים של עיצוב ממשק אפקטיבי: יצרת ממשק עקבי (קונסיסטנטי). ניתן לסכם כלל זה בהנחיה פשוטה:
ממשק טוב חייב להיות עקבי.
למה זה חשוב ?
ממשק עקבי מחייב את המשתמש לפחות מאמץ. הוא פשוט יותר ללימוד, קל יותר להשתמש בו ונחסכות טעויות מיותרות. החוויה הכללית שממשק עקבי משאיר היא של מערכת מקצועית. לעומת זאת, ממשק שמתאמץ להיות חדשני, מתוחכם ומתחכם, ולא מקפיד על עקביות, עשוי לתסכל משתמשים ולהגדיל את הסיכוי לטעויות ולנטישת המערכת.
איך עושים את זה ?
נושא העקביות נבחן במספר רמות:
- האם הממשק עקבי למה שהמשתמש מכיר ומקובל בעולם?
- האם נשמרת עקביות פנימית של הממשק באתר ?
- האם נשמרת עקביות פונקציונאלית ?
- האם נשמרת עקביות צורנית ?
כלל מספר 1 : יש לשמור על עקביות למוסכמות מקובלות.
משתמשים מגיעים למערכת עם ניסיון קודם ועולם מושגים מגובש. הם למדו לצפות למוסכמות , (קונוונציות) הצגה מסוימות. המערכת צריכה להתאים למוסכמות הללו. יש מוסכמות כלליות, שרוב המשתמשים יצפו להן, ויש מוסכמות שנגזרות מהרקע הספציפי של משתמשי המערכת שלכם.
דוגמה למוסכמות שרוב המשתמשים מכירים – ניווט ראשי מסרגל עליון במסך, הצגת “חיפוש” במקום בולט בעמוד הבית, קישור מלוגו האתר אל העמוד הראשי, ייצוג קישור באמצעות טקסט כחול (או סגול) עם קו מתחתו ועוד. הבה נבדוק, לדוגמה, את נושא הצגת הקישורים:
כיום, כמעט כל משתמש שרואה טקסט כחול או סגול , יניח שמדובר בקישור, ויצפה מהטקסט לפעולה ומשוב האופייניים לקישור. כשהמשתמש יצביע על הטקסט באמצעות העכבר,הוא מצפה שהסמן של העכבר ישתנה ל”יד” (”hand / pointer”) וכשהוא לוחץ על הטקסט הזה, מצפה המשתמש שיופעל ניווט לעמוד אחר.
כל סטייה מהדגם הזה תבלבל משתמשים. בלבול שכזה יכול להיווצר כשקישור לא מוצג באמצעות טקסט כחול או סגול, כשאין קוו מתחת לטקסט של הקישור, כשבמעבר עכבר לא משתנה הסמן ליד – או כשלוחצים על טקסט כחול שמסומן בקו – ולא מופעל ניווט. בלבול דומה נוצר במצב ההפוך – כשמוצג טרסט צבעוני או טקסט מודגש בקו, שאיננו קישור, או כשהסמן משתנה ליד במקום שלא משמש כקישור (כפי שקורה לא פעם בקבצי Flash, לדוגמה). בכדי להימנע מלהטעות ולתסכל את המשתמש חשוב לוודא שקישורים יראו כפי שהוא מצפה, ומה שאיננו קישור – שלא יוצג בקונבנציה השמורה לקישורים.
כלל מספר 2 : יש לשמור על עקביות פנימית.
כשמשתמש נתקל בייצוג לפונקציונאליות כלשהי במערכת, הוא יצפה שאותה פונקציונאליות תיוצג באותה צורה בשאר המערכת. אם לדוגמה, בעמוד הראשי של המערכת יש קישורים בצבע כתום, שמשתמש למד לזהות ולהשתמש בהם, הוא לא יצפה שבעמודים הבאים של האתר ייוצג קישור ע”י טקסט בצבע אפור. אם במסך מספר 2 במערכת בניווט ממוקם בצד ימין של המסך, המשתמש יצפה שגם במסך 3 ו-4 הניווט ימוקם באותו מקום ויפעל באותה צורה.
כלל מספר 3 : יש לשמור על עקביות פונקציונאלית
אם, לדוגמה, במקום אחד במערכת לחיצה על האיקון לשמירה מבצעת שמירה ויציאה, המשתמש יצפה שבכל מקום במערכת, לחיצה על “שמירה” תבצע גם יציאה. במידה והמשתמש ילחץ על “שמירה” ולא תתבצע גם יציאה, כפי שהוא מצפה, הוא יניח שהייה פספוס כלשהו. הוא עשוי ללחוץ שוב ושוב על כפתור השמירה, במקום לחפש את כפתור היציאה הנפרד. עד שהוא יבין שהניסיונות החוזרים שלו לבצע יציאה מכפתור השמירה לא נושאים פרי, עשויות להצטבר אצלו תחושות בלבול, תסכול וכעס – לא חווית שימוש חיובית במיוחד.
כלל מספר 4 : יש לשמור על עקביות צורנית.
ברוב האתרים אין הצדקה אמיתית לעבוד עם מגוון רחב מאוד של עיצובים לפקדים ותוכן. אין צורך אמיתי ביותר מסוג אחד או שניים של כפתורים, יותר מסוג אחד או שניים של גופנים (Fonts). הטקסט צריך להיות מוצג לכל היותר ב- 3-4 גדלים שונים (כותרת ראשית, כותרת משנית, טקסט רץ, ואם מאוד חיוני “אותיות קטנות” לטקסט מוצנע). הרי מגופן אחד + 4 גדלי טקסט + אופציה לטקסט מעובה (Bold) ניתן לייצר 8 וארציות של הטקסט. נוסיף לכך טקסט בצבע כחול לקישורים ואולי טקסט בצבע אדום להודעות שגיאה, וקיבלנו, יחד אם הגדרת גודל הטקסט ואופציה לטקסט מעובה, קרוב ל-20 עיצובים שונים לטקסט (!),שכולם נגזרו מגופן אחד בלבד, ב- 3-4 גדלים.
רק על רקע עיצוב אחיד של רוב התוכן, ניתן להשיג הבלטה אפקטיבית של מה שחשוב באמת (קישורים, כותרות וכו’). אם נתבונן בדוגמה הבאה, מתוך האתר “כובע“, נוכל לראות איזה בלגן נוצר בעין כשמערבבים על שטח קטן לא פחות מ- 10עיצובים שונים של טקסט, חלקם קרובים (כגון 4 ו-8) וחלקם שונים מאוד (כגון 1 ו-5).
כמעט כל אובייקט בקטע מסך זה מציג עיצוב שונה.
חוסר אחידות כזה בעיצוב מבלבל את המשתמש, מקשה על זיהוי הנושאים החשובים, יוצר תחושה של מערכת לא מאורגנת ולא אמינה ומקשה על זיהוי הפונקציונאליות.
חידה:
די ברור שטקסט 7 הוא קישור מכיוון שהוא מעוצב בהתאם לכללים המקובלים לקישור.
האם טקסט 5 (”מחפשת כיסוי ראש ? חשוב לך להיות מקורית? ) הוא קישור ?
ומה בנוגע לטקסט 8 (” בהשראת הינומה צחורה ונפלאה ” ) – האם הוא קישור?
בעיצוב כזה, קשה לנחש.
(תשובה – בסוף המאמר)
לסיכום:
צריך להקפיד שהממשק יהיה עקבי עם המוסכמות מהעולם שמשתמש מכיר (לדוגמה לא להציג לסוכני בורסה “קניה” בצבע אדום ו”מכירה” בירוק) ועקבי עם עצמו. אם השתמשתם באתר בטקסט כחול כהה להצגת טקסט – אל תשתמשו בצבע דומה להצגת קישור.
ממשק עקבי פשוט יותר להבנה ולימוד ממשק לא עקבי. שככל שהמערכת שלכם תהיה עקבית יותר, כך תשתפר האפקטיביות של המשתמשים בשימוש בה כמו גם יכולת המערכת לקדם את השגת המטרות המרכזיות שתגדירו לה.
איך משיגים ממשק עקבי ?
ממשק עקבי מחייב תכנון מקדים של המערכת, קביעת קווים מנחים לעיצוב ושמירה קפדנית עליהם.
למסמך האפיון שמשמש לניהול העקבי של הממשק קוראים style guide – אבל על כך אצטרך להרחיב במסגרת מאמר נפרד.
במידעונים הבאים אציג חוקים ודרכים נוספות ליצירת ממשק אפקטיבי.
(התשובה לחידה: שני הטקסטים אינם קישורים)
אתם מוזמנים לשלוח שאלות, בקשות והערות, לכתובת: RanL at matrix.co.il
רן לירון הוא מעצב ממשק בכיר בחברת מטריקס, מרצה לעיצוב ממשק ושימושיות בג’ון ברייס ומורה לאיקידו בבית הספר “רונדו”
מאמר זה פורסם לראשונה במסגרת המידעון סודות השיווק
מאת admin נושאים 
ממשק משתמש 
Comments
