בקצרה: עיצוב אתרים מקצועי הוא עיצוב שגורם לגולש להבין תוך כמה שניות מה העסק עושה, לסמוך עליו ולדעת מה הצעד הבא. אפשר לבדוק אותו לבד בשמונה סימנים: מסר ברור, פעולה ראשית אחת, היררכיה, ריווח עקבי, מעט צבעים, התאמה אמיתית לטלפון, טקסט קריא ואתר שכל חלק בו עובד.
אחד המשפטים שבעלי עסקים אומרים הכי הרבה על האתר שלהם הוא "הוא יפה, אבל לא מתקשרים". כמעט תמיד הבעיה היא לא הטעם. הבעיה היא שהעיצוב קישט את העמוד במקום לעבוד בשבילו.
למה עיצוב יפה הוא לא בהכרח עיצוב מקצועי
עיצוב יפה נמדד בעין. עיצוב מקצועי נמדד במה שהגולש עושה: האם הוא הבין, האם הוא המשיך לגלול, האם הוא לחץ. אתר יכול להיות מלא צבעים, תמונות ותנועה ועדיין לא לעבוד, ואתר נקי ופשוט יכול להביא פניות כל שבוע.
ההבדל נמצא בעשרות החלטות קטנות שחוזרות בכל עמוד: כמה גדולה הכותרת, כמה רווח יש מעל הכפתור, איזה צבע מופיע רק פעם אחת. כל החלטה כזאת נראית שולית. ביחד הן קובעות אם האתר מרגיש מסודר ואמין, או "בערך". הגולש לא יודע להסביר את זה, אבל הוא מרגיש את זה, וזה משפיע על ההחלטה שלו לפנות.
8 סימנים לעיצוב אתר מקצועי
1. ברור תוך חמש שניות מה העסק עושה
פתחו את דף הבית, הסתכלו עליו חמש שניות וסגרו את העיניים. אתם יודעים מה העסק מציע, למי ואיפה? כותרת כמו "מצוינות ללא פשרות" לא עונה על אף אחת מהשאלות. כותרת כמו "אינסטלטור באשדוד והסביבה, מגיע באותו יום" עונה על כולן. על המסך הזה כתבתי מדריך נפרד: איך בונים את המסך הראשון באתר.
2. יש פעולה ראשית אחת
באתר מקצועי יש כפתור אחד שבולט מכל השאר: להתקשר, לשלוח וואטסאפ או לבקש הצעת מחיר. כשיש חמישה כפתורים בחמישה צבעים, הגולש לא יודע מה לבחור, ולפעמים לא בוחר כלום. איך כותבים ומעצבים את הכפתור הזה מוסבר במדריך לכפתורי הנעה לפעולה.
3. היררכיה שהעין מבינה
העין צריכה לדעת מה לקרוא קודם: כותרת גדולה, תת-כותרת, טקסט רגיל ואז כפתור. אם כל הטקסטים באותו גודל ובאותו משקל, העמוד נראה כמו מסמך Word וקשה לסרוק אותו. בדיקה מהירה: הקטינו את העמוד בדפדפן (Ctrl ומינוס) עד שכבר אי אפשר לקרוא את המילים. אם עדיין ברור איפה הכותרת ואיפה הכפתור, ההיררכיה עובדת.
4. ריווח עקבי
רווחים לא אחידים הם הסימן הבולט ביותר לעבודה חובבנית: פה צפוף, שם ריק. מעצב מקצועי עובד עם סולם קבוע של רווחים, למשל 8, 16, 24 ו-48 פיקסלים, ולא ממציא מספר חדש בכל מקטע. גם רווח ענק בין מקטעים הוא בעיה: הגולש בטלפון גולל מסך שלם של כלום ומתחיל לחשוב שהעמוד נגמר.
5. מעט צבעים, בשימוש קבוע
צבע מותג אחד או שניים, צבע אחד לכפתורים וגוונים ניטרליים לרקע ולטקסט. כשצבע הכפתור מופיע גם בכותרות ובאייקונים, הוא מפסיק לבלוט. איך בונים פלטה כזאת מהלוגו מוסבר במדריך לבחירת צבעים לאתר.
6. נבנה לטלפון, ולא רק הותאם אליו
רוב הגולשים לעסקים קטנים מגיעים מהטלפון. פתחו את האתר בטלפון ובדקו: הטקסט קריא בלי להגדיל? הכפתורים נוחים לאגודל? יש גלילה הצידה? אתר שעוצב למחשב ו"הותאם" בסוף מרגיש כך כבר במסך הראשון. ההבדל מוסבר בהרחבה במדריך לאתר רספונסיבי.
7. טקסט קריא
ניגודיות מספיקה בין טקסט לרקע, גופן לטקסט בגודל נוח (בדרך כלל לא פחות מ-16 פיקסלים בטלפון) ושורות לא ארוכות מדי במחשב. טקסט אפור בהיר על לבן נראה אלגנטי בעיני המעצב, אבל הרבה אנשים פשוט לא מצליחים לקרוא אותו, ובאור שמש בחוץ עוד פחות. ניגודיות היא גם חלק מתקן הנגישות הישראלי ת"י 5568, שמבוסס על הנחיות WCAG.
8. הכול עובד
כפתור שלא מוביל לשום מקום, טופס שלא נשלח, תמונה שבורה או קישור לעמוד שנמחק: כל אחד מאלה הורס אמון מהר יותר מכל בחירת צבע. עיצוב מקצועי כולל בדיקה של כל אלמנט, בכל רוחב מסך, לפני שהאתר עולה לאוויר.
דוגמה: אותו עסק, שני עיצובים
נניח שיש לכם קליניקה לפיזיותרפיה. בגרסה הראשונה, המסך הראשון הוא סליידר של שלוש תמונות סטוק, הכותרת היא "בריאות בתנועה" ויש שלושה כפתורים: "אודות", "שירותים" ו"צור קשר". בטלפון הסליידר תופס את כל המסך, והכפתורים נדחפים אל מתחת לקצה.
בגרסה השנייה, הכותרת היא "פיזיותרפיה לכאבי גב וברכיים בבאר שבע". מתחתיה משפט אחד על זמינות התורים, כפתור אחד בצבע בולט "לקבוע תור בוואטסאפ" ותמונה אמיתית של המטפל בחדר הטיפולים. אותו עסק ואותו תוכן. רק שבגרסה השנייה הגולש יודע תוך שנייה שהוא במקום הנכון ומה לעשות עכשיו. זה כל ההבדל בין עיצוב יפה לעיצוב מקצועי.
מה עיצוב מקצועי לא חייב להיות
- מסובך: לפעמים העיצוב הטוב ביותר הוא הפשוט ביותר.
- מלא אנימציות: תנועה עוזרת כשיש לה תפקיד ומפריעה כשהיא רק קישוט. פירוט במדריך לאנימציות באתר.
- דומה לכל השאר: עיצוב מקצועי מותאם לעסק, ולא תבנית שמתאימה לכל אחד.
איך נראה תהליך עיצוב מקצועי
עיצוב טוב לא מתחיל בצבעים. הוא מתחיל בשאלות: מי הלקוחות, מה הם מחפשים, ממה הם חוששים ומה הצעד שהם צריכים לעשות. רק אחרי שהתשובות ברורות מחליטים על מבנה העמוד, ורק אחריו על צבע, גופן ותמונות.
אחר כך מעצבים קודם את מסך הטלפון ומרחיבים למחשב. כל מקטע נבחן מול שאלה אחת: האם הוא מקרב את הגולש לפנייה? מקטע שלא עונה על זה יוצא, גם אם הוא יפה. את השלבים המלאים אפשר לראות בתהליך העבודה שלי.
דוגמה מהעבודה שלי: האתר של אפרת שכטר, מטפלת רגשית ב-NLP לילדים ונוער, עבר מאתר תבנית לאתר מותג בעיצוב אישי. מה שהשתנה הוא הסדר, ההיררכיה והאופי של כל עמוד. סיפור הפרויקט מראה את ההשוואה בין לפני לאחרי.
טעויות נפוצות כשמזמינים עיצוב
- לבחור מעצב לפי תמונות סטטיות, בלי לפתוח את האתרים החיים שלו בטלפון.
- לבקש "משהו כמו האתר של המתחרה" במקום להסביר מה הלקוחות שלכם צריכים.
- לאשר עיצוב רק על מסך מחשב גדול.
- להוסיף מקטעים "כי יש מקום", עד שהעמוד מאבד כיוון.
- לשפוט את העיצוב לפי טקסט זמני, ואז לגלות שהטקסט האמיתי ארוך פי שניים ולא נכנס.
איך משתמשים ברשימה
אם אתם בודקים אתר קיים, סמנו כל סימן שחסר. שלושה סימנים חסרים ומעלה הם בדרך כלל סיבה טובה לשקול חידוש אתר. אם אתם בוחרים מעצב, בקשו קישורים לאתרים חיים שהוא בנה ועברו עליהם עם הרשימה, במחשב ובטלפון. עוד שאלות לשלב הזה יש במדריך לבחירת בונה אתרים.
לסיכום
עיצוב אתרים מקצועי הוא סדר של החלטות קטנות שכולן משרתות מטרה אחת: שהגולש יבין ויפנה. את רוב הסימנים אפשר לבדוק לבד בחמש דקות. אני מעצב ובונה כל אתר בקוד, וכל אחד מהסימנים האלה נבדק לפני שהאתר יוצא ללקוח. דוגמאות יש בתיק העבודות, ואם רוצים לבדוק מה מתאים לעסק שלכם, אפשר לבקש הצעת מחיר לאתר תדמית.
רוצים אתר שעובד בשביל העסק?
ספרו לי מה אתם צריכים, ותקבלו כיוון ברור והצעת מחיר מסודרת.