עיצוב אתרים וחוויית משתמש – עיצוב שעוזר ללקוחות לפעול

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

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

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

מה כולל עיצוב אתר מקצועי?

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

אפיון האתר

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

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

עיצוב חוויית משתמש – UX

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

תוצר טיפוסי של שלב ה-UX הוא מפת אתר, תרשים של מסלולי המשתמש ושלדים (Wireframes) של העמודים המרכזיים.

עיצוב ממשק – UI

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

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

שפה עיצובית ורכיבים חוזרים

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

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

אפיון UX – השלב שלפני העיצוב

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

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

הבנת העסק והלקוחות

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

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

הגדרת הפעולה המרכזית

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

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

מפת אתר ומסלולי משתמש

אני בונה את מבנה העמודים ומשרטט את הדרך שבה גולש טיפוסי עובר מדף הבית לעמוד שירות ומשם לפנייה.

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

שלדים לעמודים המרכזיים

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

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

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

עיצוב בהתאמה אישית או תבנית מוכנה?

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

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

עיצוב לפי סוג האתר

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

עיצוב אתר תדמית

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

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

עיצוב חנות אינטרנטית

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

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

עיצוב דף נחיתה

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

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

אתרים עם הרבה תוכן או נתונים

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

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

עיצוב שמתחיל מהמובייל

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

כשאני מעצב למובייל אני שם לב לדברים הבאים:

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

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

איך עיצוב משפיע על אמון ועל פניות?

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

מה בונה אמון

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

מה פוגע בפניות

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

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

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

שיפור חוויית הרכישה בחנות

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

עמודי קטגוריה וחיפוש

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

עמוד המוצר

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

עגלה ותשלום

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

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

כשיש כבר אתר קיים

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

לפני שאני מציע כיוון, אני בודק:

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

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

עיצוב שאפשר לבנות ולתחזק

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

הגדרות עיצוב גלובליות

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

רכיבים בפיתוח ייעודי

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

ביצועים כחלק מהעיצוב

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

עריכה עצמית בלי לשבור את העיצוב

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

איך נראה תהליך העבודה?

1. שיחת היכרות ובדיקת צרכים: מה העסק מוכר, מי הלקוחות, מה קיים היום ומה המטרה של האתר.
2. אפיון ומבנה: מפת אתר, מסלולי משתמש והגדרת התוכן בכל עמוד מרכזי.
3. שלדים: סקיצות של דף הבית ושל העמודים המרכזיים לאישור המבנה.
4. כיוון עיצובי: עיצוב של עמוד מייצג, לרוב דף הבית, כולל גרסת מובייל. כאן נקבעת השפה החזותית.
5. עיצוב שאר העמודים והרכיבים: על בסיס הכיוון שאושר, כולל טפסים, הודעות מערכת ומצבים כמו עמוד 404 או חיפוש ללא תוצאות.
6. פיתוח: בניית האתר לפי העיצוב, עם הגדרות גלובליות ורכיבים חוזרים.
7. בדיקות: מכשירים ודפדפנים שונים, טפסים, מהירות, קריאות ונגישות בסיסית.
8. השקה והדרכה: העלאה לאוויר, בדיקה בדומיין הפעיל והסבר איך לעדכן את התוכן.

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

מה משפיע על מחיר עיצוב אתר?

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

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

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

שאלות נפוצות