10 עקרונות לעיצוב אתר אינטרנט אפקטיבי

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

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

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

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

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

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

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

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

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

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

מבקרים עוקבים אחר האינטואיציה. ברב המקרים המבקרים ,מתבוססים" באתר במקום לקרוא את המידע שהמעצב הגדיר. סטיב קרוג, מחבר הספר don't make me think, הסיבה העיקרית לכך היא שלמבקרים פשוט לא אכפת. "אם אנחנו מוצאים משהו שעובד, אנחנו ממשיכים איתו. זה לא משנה לנו אם אנחנו מבינים איך הדברים עובדים כל עוד אנחנו יכולים להשתמש בהם. אם הקהל שלך עומד לפעול בדרך בה עיצבת את לוח המודעות שלך, אז עצב לוח מודעות מדהים".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. חתרו לחשיפת שלבים
ישנה ביקורת על אתרי אינטרנט מודרניים אשר מכוונים את המבקרים באמצעות ויזואלים מושכים: צעדי 1-2-3, כפתורים גדולים עם אפקטים וכד'. אך בהיבט העיצובי אלמנטים אלו אינם רעים. נהפוך הוא – קווים מנחים אלו הם אפקטיביים ביותר בעודם מובילים את המבקר דרך התוכן באתר בדרך פשוטה וידידותית.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10. בחנו מוקדם, בחנו לעיתים קרובות
עיקרון teto (Test early, test often) ואמור להיות מיושם בכל עיצוב אתר באופן מתמיד על מנת לספק תובנות לבעיות משמעותיות שעלולות להיווצר כתוצאה מהמבנה המוצג.

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

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

שורה תחתונה: אם אתם רוצה אתר מעולה – אתם חייבים לבחון. 

המאמר תורגם מהאתר Smahing Magazine באישור עורך המגזין.