זהו המאמר החמישי בסדרה על עיצוב ממשק משתמש מאת רן לירון

ממשק אפקטיבי
באמצעות תכנון והצגת היררכיה / רן לירון

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

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

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

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

תצוגה היררכית - המטרה

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

תהליך העבודה בבניית תצוגה היררכית.

שלב ראשון: זיהוי הצרכים של הלקוח.

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

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

ועוד

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

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

שלב שני: זיהוי צרכי המערכת.

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

שלב שלישי: גיבוש רשימה מתועדפת אחת.

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

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

שלב רביעי: תכנון פריסה גראפית אפקטיבית

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

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

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

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

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

תוצאות החיפוש של Google.

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

באתר Doctors, לעומת זאת, קשה לדעת מה חשוב יותר ומה פחות:

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

סיכום:

בשביל לאפשר למשתמש לאתר בדיוק מה שהוא צריך, במינימום זמן ובמינימום מאמץ, חיוני:

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

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

יש לשמור על צמצום ופשטות, כי לפעמים פחות זה יותר, ויותר – זה פחות.

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

 

כתיבה אפקטיבית של טקסט לרשת / רן לירון

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

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

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

הנחיה 1: שורות קצרות פסקאות קצרות
טקסטים קצרים:

• נקראים מהר
• לא מרתיעים

 

כמה קצר?

• משפט - לכל היותר 20 מילים
• פסקה - עד 6 משפטים

 

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

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

 

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

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

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

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

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

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

המשתמשים סורקים את הטקסט במקום לקרוא אותו, ולכן:

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

 

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

כמו תמיד - פניות, הערות ושאלות יתקבלו בברכה!

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

ממשק חדשני מול ממשק קונבנציונאלי /  רן לירון

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

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

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

לממשק חדשני שלוש יתרונות מרכזיים:

1. ערך השיווקי של חווית המשתמש:

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

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

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

 

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

2. ייעול תהליכי העבודה:

המוסכמות המקובלות של מבנה ממשק ותהליכי עבודה מגבילות את האפשרויות העומדות לרשותנו. לא פעם מערכות משמרות מוסכמות מיושנות לאורך שנים, גם כשמוסכמות אלו כבר לא רלוונטיות לדרישות העדכניות. לעיתים, כשמבקשים להציע ערך מוסף אמיתי (להבדיל מעטפת שיווקית בלבד) ניתן לעשות זאת רק באמצעות פריצת המוסכמות המקובלות של עיצוב ממשק. האתר go2web20, לדוגמה, מציג קישורים לאתרי web 2.0. האתר ביקש להציג הפניה לאתרים רבים מאוד. הפתרון המקובל של רשימות טקסטואליות של קישורים מגביל מאוד את כמות הקישורים שניתן להציג באופן ברור במסך אחד. גופן קטן לא יהיה קריא, גופן גדול יתפוס הרבה מקום. הפתרון של go2web20 – הצגת רשת של איקונים  גדולים, ללא כל טקסט. האתר מצליח להציג במסך אחד ללא גלילה קישורים ליותר מ-40 אתרים שונים (פי 3 ויותר מ-Google) ועם זאת להראות בבירור לאן יוביל כל קישור. 
דוגמה נוספת היא תוכנת Picasa של Google. ברוב התוכנות הגישה לקבצים מתבצעת דרך המבנה הסטנדארטי של עץ הספריות. הדבר מקשה על עיון בתמונות שמפוזרות בספריות רבות.ב- Picasa פתרו את הבעיה בצורה פשוטה אבל לא קונבנציונאלית. התוכנה מאפשרת לראות ברצף את כל התמונות במחשב, ולמיין אותן במגוון צורות בלי קשר לתיקיות בהן יושבות התמונות.  

3. ניצול יעיל של טכנולוגיות חדשות:

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

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

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

מספר יתרונות נוספים לממשק קונבנציונאלי שיש לקחת בחשבון:

1. קל ללמוד ממשק קונוונציונאלי:

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

2. קל וזול לתכנן ולעצב מערכות קונוונציונאליות:

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

3. קונבנציונאלי = בדוק ומוכח:

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

סיכום:

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

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

• אתם מוגבלים בזמן ובמשאבים ורוצים כמה שיותר מהר “לעלות לאוויר”
• חשוב לכם העביר מסר של ביטחון ורצינות
• חשוב לכם להקטין למינימום את הסיכון שמשתמשים יתקשו להשתמש במערכת שלכם.

כדאי להשקיע בממשק חדשני כאשר:

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

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

כמו תמיד – אתם מוזמנים לשלוח שאלות, בקשות והערות, לכתובת: 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

רן לירון הוא מעצב ממשק בכיר בחברת מטריקס, מרצה לעיצוב ממשק ושימושיות בג’ון ברייס ומורה לאיקידו בבית הספר “רונדו”

מאמר זה פורסם לראשונה במסגרת המידעון  סודות השיווק 

פוסט אורח: ממשק שימושי ככלי שיווקי / רן לירון

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

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

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

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

כלל מספר אחד לעיצוב ממשק אפקטיבי : הקפד על פשטות. (חוק KISS).

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

איך עושים את זה?

: google

דוגמה טובה בולטת

הנחיה 2: פישוט תהליכים - מינימום clicks לכל משימה

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

   

הנחיה 3: שמירה על ריווח (White Spaces) בין רכיבים

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

   

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

 

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