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

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

1. בהתהוות - נגה עמית היא כותבת מאוד מוכשרת, מוכשרת עד כדי כך שגם כשהיא כותבת על מיסטיקה (ואני לא טיפוס מיסטי במיוחד) היא מאוד מעניינת. החיסרון היחיד הוא הנטייה שלה להזניח את הבלוג האומלל. אני מקווה שההמלצה הזו (ועוד כמוה) יעודדו אותה לטפל במסכן טוב יותר.
2. טלוויזיה = מציאות - מאיה שובל (מבלוג קבוצות הדיון) בבלוג טרי על תוכניות ריאליטי והחיים שמחקים אותן (או שלא).
3. תעשו לט גו - בלוג משותף של ניב קלדרון ולוטם חיון על רווקות, זוגיות ומערכות יחסים.
4. דברים קטנים - כתיבה צינית (ומצויינת) על טכנולוגיה והחיים בכלל.
5. הבלוג של עמותת אס.או.אס. חיות אשקלון - (זהירות: קידום חסר בושה לפניך!) אני מנהל את הבלוג הזה, למרות ששאר חברי העמותה לא ממש מבינים עדיין למה צריך בלוג בכלל. יש לו הרבה לאן להתפתח, ואשמח להערות או תרומות (תוכן או כסף).

אז איך אתם מחליטים על אילו בלוגים להמליץ?

 

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

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

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

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

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

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

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

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

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

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

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

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

ועוד

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

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

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

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

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

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

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

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

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

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

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

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

 

שילוב באמצעים אלו יוכל לשמש לבניית תצוגה היררכית.

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

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

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

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

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

 

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

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

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

סיכום:

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

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

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

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

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

 

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

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

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

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

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

• נקראים מהר


• לא מרתיעים

כמה קצר?

• משפט - לכל היותר 20 מילים


• פסקה - עד 6 משפטים

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

• כל מסך


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


• כל פיסקה

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

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

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

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

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

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

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

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


• כתבו טקסט קצר שמחולק לפסקאות קצרות.


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


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


• צרו קישורים בעלי משמעות כך שברור במבט אחד לאן מוביל הקישור.

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

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

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