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