רוצים לבנות אתר אבל מרגישים בלבול כשזה מגיע לעיצוב? אתם לא לבד. יש כמה כללים בעיצוב אתרים שחשוב להכיר. ככל שהטכנולוגיה מתפתחת ומעצבי אתרים מציגים טרנדים אופנתיים, כך נוצר הרושם שעיצוב אתרים הוא מסובך ומורכב. העקרונות של 'ירוק-עד' עוזרים לשמור על המצפן ולעצב אתרים נכונים מבחינה שיווקית בלי להשתעבד לטרנדים חולפים.
כדי להבין את המשמעות של הכללים בעיצוב אתרים כדאי להבין את ההקשר ההיסטורי של תחום בניית האתרים:
אז למה הכוונה ב'ירוק עד'? באנגלית קוראים לזה Evergreen, כמו יערות האורן שלא משירים עלים ולא מתחדשים על בסיס שנתי. בהקשר של בניית אתרים, 'ירוק-עד' מתייחס לאתרים שנבנים בצורה שמאפשרת להם להישאר עדכניים ורלוונטיים לאורך זמן, בלי הצורך לשדרג אותם כל הזמן. זה אומר עיצוב, טכנולוגיה ותוכן שממשיכים לתפקד בצורה טובה ולהיות נגישים, גם כשהם מתמודדים עם שינויים עתידיים בטכנולוגיה או בעדכונים של דפדפנים.
למרות שנראה כאילו האינטרנט הוא חלק מהחיים שלנו מאז ומעולם, זה קרה בתכל'ס בתחילת שנות ה-2000. עיצוב שיווקי ועיצוב אתרים עברו מאז מסע שלא נעצר למעשה.
זוכרים את הימים שבהם לוגו של חברות היה צבעוני, מסובך ועמוס בפרטים? או אתרים שבהם הניווט היה משימה בלתי אפשרית? ב-2001, כשגוגל נכנסו לחיינו עם עיצוב עמוד הבית הפשוט שלהם – רק תיבת חיפוש ולוגו – העולם התאים את עצמו לעיצוב פשוט שמשדר ניקיון וגם עוצמה.
ואז, כשהסמארטפונים החלו להשתלט על חיינו, נולד הצורך באתרים מותאמים ולאחר מכן רספונסיביים. אתרים שלא התאימו את עצמם לגלישה מהמובייל פשוט נעלמו בתחרות.
שינויים נוספים נולדו מהצורך באבטחה איכותית והחובה להנגיש אתרים – מכל שינוי כזה צמחה מגמה חדשה בעיצוב אתרים וחוויית משתמש – ואני יכולה להמשיך עוד ועוד כי הנושא מרתק אותי.
ובכל זאת, עם כל הכבוד לטרנדים –
הכלל המוביל הוא: לא כל עיצוב אתר יפה יביא לכם לידים
לידים זה שם המשחק. נכון, כדאי שהאתר יהיה יפה ומרשים. אבל אתר יפה ומעוצב שלא מביא לידים הוא כמו איש מכירות שמעביר את הזמן במשרד אבל לא מביא עסקאות…
אז אם אתם מחפשים את הכללים של עיצוב שיהיה תמיד רלוונטי ולא תצטרכו לשנות את האתר כל שני וחמישי, כדאי שתבינו מהם הכללים בעיצוב אתרים שמחזיקים מעמד לאורך זמן:
1. פשטות היא מפתח להצלחה
אנשים אוהבים דברים פשוטים, שקל להבין ולזרום איתם. אף אחד לא רוצה להיכנס לאתר עמוס ומסובך שגורם לכאב ראש רק מלנסות להבין איך הוא עובד. לכן, חוויית משתמש ברורה, ניווט קל באתר והיררכיה הגיונית תמיד מנצחים.
בדיוק כמו חנות פיזית: הכניסה צריכה להיות ברורה, המעברים רחבים, והמוצרים מסודרים בצורה שקל למצוא אותם. אם האתר שלכם נראה טוב אבל קשה להשתמש בו, הלקוחות הפוטנציאליים פשוט יעברו הלאה.
דוגמה טובה שאני יכולת לתת מהזמן האחרון היא של אתר שהגיע אלינו לשיפור חוויית משתמש. האתר נבנה על-ידי חברה אחרת והיה באמת יפה, אבל הגולשים המשיכו להתקשר לבעל האתר עם שאלות כי הם לא הצליחו להבין את הכול מהאתר. זה כלל גם גולשים מאוד לא רלוונטיים. המטרה שלנו היתה לסדר את הזרימות באתר כדי שכל גולש ימצא בקלות את מה שנכון עבורו.
2. אף אחד לא קונה בגלל עיצוב אתר יפה: התוכן הוא המלך
זה נכון ותמיד יהיה נכון. עיצוב אתר מדהים לא שווה כלום אם התוכן לא איכותי או לא מועבר בצורה ברורה. הכלל הוא: העיצוב הוא רק הבמה שעליה מופיע התוכן. וזה התוכן שבסופו של דבר גורם לאנשים לפנות אליכם. במיוחד ההנעה לפעולה. זה התוכן הקריטי מכולם.
השקיעו בטקסטים שמדברים בשפה של הלקוחות שבאמת רלוונטיים לכם, שמסבירים בצורה פשוטה מה אתם מציעים ואיך זה פותר להם בעיות. אל תחששו לבזבז גולשים לא רלוונטיים. תתמקדו במי שבאמת חשוב.
3. מהירות היא הכול
אין דבר יותר מתסכל מאתר שנטען לאט. בעידן שבו לכולם יש פחות סבלנות, מהירות טעינה היא לא רק מותרות – היא חובה. כל שנייה נוספת שבה האתר שלכם נטען עולה לכם בלקוחות פוטנציאליים. תוודאו שהאתר שלכם מותאם לגלישה מהירה גם אם זה אומר לוותר על אפקטים כבדים או עיצובים מסובכים.
דרך אגב, איכות האחסון של האתר היא קריטית לגלישה מהירה. אין טעם לשלם על אחסון בגלל מחיר זול וגם מחיר יקר לא מבטיח תוצאות. אתם מוזמנים להתייעץ איתנו על האחסון שלכם, יש בדיקה שקל לעשות כדי לדעת אם האחסון טוב או לא. שאלות לגבי אחסון אתרים תשלחו לחיים בבקשה.
4. עיצוב שמתאים לגלישה בנייד
היום, רוב האנשים גולשים באתרים דרך הטלפון הנייד. זה לא טרנד, זה סטנדרט. אם האתר שלכם לא מותאם לנייד, אתם מפסידים קהל גדול.
קל לבדוק את זה – פשוט תגלשו באתר שלכם עם הטלפון ותראו איך הוא נראה. האם הטקסטים ברורים? האם הלחצנים נגישים? האם האתר קופץ מצד לצד? קל להתמצא בו?
עיצוב רספונסיבי הוא לא אופציה, הוא הכרח. קחו את זה ברצינות.
5. נגישות לכולם
נכון, החוק קטנוני ומעצבן. אחרי הכל, מדובר באתר שלכם אז מה פתאום המדינה מתערבת… הנה נקודת מבט שאולי תעזור לכם. אבל קודם,אתחיל מהסוף: ברוב המקרים הוספת רכיב הנגשה חינמי מספיקה. אז הנה הוצאנו את הכסף מהתמונה.
אבל מעבר לכך, אתר נגיש הוא דרך להראות שאתם חושבים על הגולש ועל חוויית המשתמש שלו. זה כמו הוספת מסלול לכיסאות גלגלים בחנות פיזית. עזבו את דרישות החוק – האם באמת הייתם רוצים להשאיר מישהו בחוץ בגלל שהוא נעזר בכיסא גלגלים? סביר להניח שלא. באתרים, רכיב נגישות פונה לאנשים עם בעיות ראייה. למה להפלות נגדם?
ויש עוד נקודה חשובה – מנועי החיפוש אוהבים אתרים נגישים, מה שיעזור לכם בקידום בגוגל.
6. ניווט אינטואיטיבי
תפריט מסובך הוא מתכון לכישלון. המשתמשים שלכם מצפים שהכול יהיה פשוט וברור. אם הם צריכים לחשוב יותר מדי איך להגיע למידע מסוים, הם כנראה יוותרו.
תפריט מסובך כולל גם "למידע נוסף לחצו כאן" ואז בעמוד הבא, שוב "למידע נוסף לחצו כאן"… למה להתעלל בגולש?
התפריט צריך להיות קל וברור, המידע מרוכז במקום אחד שמאפשר גלישה קלה, כפתורי קריאה לפעולה בולטים, ודרך קלה לחזור לעמוד הראשי. ככל שתעשו את החיים של הגולש קלים יותר, כך הוא יישאר יותר זמן באתר שלכם.
7. אבטחה ואמון – לא בהכרח אותו הדבר
אתם יכולים להשקיע באתר הכי יפה בעולם, אבל אם הוא לא מאובטח, הגולשים יברחו החוצה (או לא ייכנסו אליו מלכתחילה). ויש גם את גוגל, שמוסיפים אזהרה על כל אתר שלעדתם אינו מאובטח כראוי…
ואז יש את נושא האמון – האם האתר משדר אמינות ותמיכה מצד לקוחות אחרים? חשוב להשתמש ברכיבים שמוכיחים אמון, כמו עדויות של לקוחות והמלצות, רשימת לקוחות או ספקים, הוכחה של אגודות מקצועיות שאתם משתייכים אליהן, תו אמון הציבור וכדומה.
8. התאמה למנועי חיפוש (בעיקר גוגל)
אתר שלא מוצאים אותו בקלות – לא קיים. עיצוב האתר חייב לקחת בחשבון את הדרישות של מנועי החיפוש, כדי שמי שמחפש את השירותים שלכם יוכל למצוא אתכם בקלות.
יצא לנו לקבל פנייה מבעל אתר שלא הבין למה לא מוצאים אותו בגוגל. מסתבר שבונה האתר שלו מעולם לא סימן שהאתר זמין לסריקה של גוגל (פעולה שעושים בלחיצת כפתור). לכן גוגל מעולם לא הציגו אותו. זאת אמנם דוגמה קצת הזויה אבל יש מלא דוגמאות באותו סגנון.
כל מערכות בניית האתרים האיכותיות (כמו וורדפרס אלמנטור שאנחנו עובדים איתה) מכילים כבר כלים שמאפשרים לנו למדוד את האתר החדש שאנחנו בונים ביחס לציון האיכות של גוגל. אנחנו גם מכניסים מראש כמה מילות מפתח לכל אתר שאנחנו בונים. זה לא קשה אבל לא כולם יודעים להשתמש בכלים האלה אז אל תהססו לשאול את בונה האתרים אם הוא מכין את האתר בהתאם לכללי גוגל.
9. עקביות היא שם המשחק – עיצוב אתרים מקצועי
כאשר עיצוב האתר שלכם אחיד, הגולשים מרגישים בנוח. צבעים, פונטים (עיצוב אותיות) וסגנון עיצובי שומרים על עקביות בין עמודי האתר, וזה נותן תחושת מקצועיות ואמינות, משדר מסר ברור על המותג שלכם ומשפר את חוויית המשתמש.
אם לא ברור לכם הנושא ואתם לא אלופים בעיצוב, קחו השראה מאתרים מובילים. הימנעו מצבעים זרחניים ומעודף עיצוב, לכו על הכלל הבטוח של Less is More, תישארו במסגרת מקובלת של עיצוב. תמיד אפשר לשפר את האתר לאחר מכן ככל שמבינים את הנושא התדמית טוב יותר.
10. חוויית משתמש מעל הכול
בסופו של דבר, כל מה שאתם עושים באתר נועד לשרת את הגולשים. ככל שתבינו את הצרכים וההרגלים שלהם, כך תוכלו להציע להם חוויה מהנה ונעימה יותר.
בדקו את האתר שלכם מזווית הראייה של הלקוח. האם הוא ברור? האם הוא מזמין? האם הוא עונה על השאלות שלהם? בקשו מחברים שמבינים בתחום שלכם חוות דעת. בקשו מכמה לקוחות טובים חוות דעת.
אבל הטיפ שלי הוא: אל תתנו לדעות שונות להסיח אותכם ממה שנכון עבורכם. קבלו המלצות, תראו איך להטמיע אותן, אבל אל תשתגעו מכל הצעה.
לסיכום חשוב לי להדגיש שעולם בניית האתרים אולי משתנה במהירות, אבל עקרונות טובים נשארים לנצח. אם תבנו את האתר שלכם על פי הכללים בעיצוב אתרים האלה, אתם יכולים להיות בטוחים שהוא ישרת את העסק שלכם בצורה הטובה ביותר, גם היום וגם בעתיד.
שיגעונות אופנתיים תמיד יהיו, הם זמניים. אם אתם רוצים אתר מניב לטווח ארוך כדאי שתשתמשו בעקרונות של 'ירוק-עד'.
למידע נוסף:
הפסיכולוגיה של הצבעים בבניית אתרים
זה לא מדע מדויק אבל במקרים רבים צבעים משפיעים על רגשות, התנהגות והחלטות. לדוגמה, צבע האדום פעמים רבות יתקשר לתשוקה, אנרגיה, ולעיתים אף לאיום, בעוד שצבע הכחול נתפס כמרגיע, אמין ומקצועי.
ירוק מקושר לרוב עם טבע, צמיחה ורוגע, צהוב מקושר עם אופטימיות, שמחה ויצירתיות, וסגול מקושר עם יוקרה ורוחניות – אבל לא תמיד הם מתאימים לאתר ונדבר על זה בעוד רגע.
כדי לבחור את הצבעים המתאימים לאתר שלך, חשוב להבין את המסרים שברצונך להעביר. למשל, אתר בתחום הפיננסים עשוי להשתמש בצבעים כחולים כהים כדי להעביר תחושת אמינות וביטחון (ויוקרה), בעוד שאתר שמציע מוצרים לילדים עשוי להשתמש בצבעי "גלידה" בהירים ומשמחים כמו צהוב וורוד.
מעבר לתחושות, צבעים מכוונים את תשומת הלב של הגולשים. צבעים חזקים יכולים להדגיש כפתורים או קישורים חשובים, בעוד שצבעים רכים יכולים לשמש כרקע נעים לעין שאינו מסיח את הדעת.
כיצד לבחור צבעים לאתר שלך
בחירת הצבעים הנכונים לעיצוב אתר היא תהליך שדורש מחשבה ותכנון, כך שהם יתמכו במסר שלך ויתאימו למטרות האתר.
זהות מותגית
המונח "זהות מותגית" אולי נשמע גדול ומאיים, אבל מדובר בסך הכל בדרך שלך להציג את הערכים החשובים: מקצועי, אמין, צעיר או חדשני? בדיוק כמו בחירה בלבוש המתאים לפני פגישה חשובה, אנחנו "מלבישים" את האתר.
לדוגמה, אפשר להשתמש בצבעים של לוגו החברה כבסיס לבחירת הצבעים של האתר.
קהל היעד
מי הם הגולשים שהעסק באמת מחפש? מה חשוב לך שהם ירגישו בעת הגלישה באתר? לדוגמה, לא תמיד אנחנו מנסים לייצר התלהבות, לפעמים אנחנו רוצים לשדר דווקא רוגע (כמו באתר שמציע טיפולים אלטרנטיביים להקלה על כאב).
קהלים שונים עשויים להגיב לצבעים בדרכים שונות. לדוגמה, קהל צעיר עשוי להעדיף צבעים עזים, בעוד שקהל בוגר אולי יעדיף צבעים רגועים ונעימים יותר.
פלטת צבעים
המונח "פלטת צבעים" מתייחס לדוגמאות של שילוב צבעים כהשראה. הנה דוגמה של פלטת צבעים בהירה לעומת כהה:
אפשר למצוא בגוגל הרבה דוגמאות (אבל לזכור שזה רק לשימושך האישי כהשראה – לעולם לא לפרסם תמונה ללא רישיון!). קיימים כלים רבים שיכולים לעזור לך למצוא את הצבעים המושלמים ולבנות פלטת צבעים שמתאימה לסגנון שלך ולצרכים הדיגיטליים שלך. הנה דוגמה לאתר פלטת צבעים שיכול לעזור לך.
דוגמה אמיתית: הגיעה אליי לקוחה שרצתה אתר בצבע סגול. סגול הוא צבע בעייתי כי הוא לא תמיד עובר מסך בצורה טובה ועלול להיות דומיננטי מידי. הראיתי לה כמה דוגמאות של פלטות צבע, מצאנו את שילוב הגוונים שהיא הכי התחברה אליו והתקדמתי משם עם העיצוב.
אחת השיטות הפופולריות היא לבחור פלטת צבעים של 3-5 צבעים:
- צבע רקע ראשי ועוד גוונים ניטרליים בתור רקעים נקודתיים: לבן, אפור, קרם, שחור או כחול midnight. צבע הרקע קובע את האווירה הכללית, האם תהיה מוארת או דרמטית.
- צבע ראשי אחד – הצבע המרכזי של האתר שיופיע בכותרות, אלמנטים עיצוביים ועוד.
- שני צבעים משניים – צבעים נוספים שיכולים להוסיף עניין לכותרות משנה, טקסט מודגש ועוד.
- צבע נוסף להדגשה של דברים חשובים – בדרך כלל זה יהיה צבע עז שיכול לשמש להדגשה של כפתורים או אלמנטים חשובים.
נגישות
הנגישות היא מרכיב חשוב בעיצוב אתרים. יש לוודא שהצבעים שבחרת מספקים קונטרסט גבוה ומאפשרים גם לגולשים עם לקויות ראייה להשתמש באתר (לדוגמה, להימנע מטקסט בהיר על רק לבן, או טקסט כהה על רקע שחור).
השפעת הצבעים על חוויית המשתמש
צבעים משחקים תפקיד מרכזי בעיצוב חוויית המשתמש, ויש להם השפעה רבה על הדרך שבה אנשים חווים את האתר שלך.
עקביות בעיצוב
כדי ליצור חוויית משתמש חלקה, חשוב לשמור על עקביות בצבעים ובסגנון בכל חלקי האתר. מומלץ להקצות צבעים מסוימים לפונקציות שונות (למשל, צבעים מסוימים לכפתורים, צבעים שונים לטקסט ראשי וכדומה) כדי שהגולשים ידעו למה לצפות.
שימוש בצבעים להנחות את הגולשים
צבעים יכולים לשמש ככלי להנחות את הגולשים באתרים. לדוגמה, ניתן להשתמש בצבעים חדים כדי להדגיש כפתורים חשובים או אזורים קריטיים בדף. זה עוזר לגולשים להבין לאן לפנות ומה לבצע.
איך צבעים נראים על מסך המחשב והסלולר
צבעים הם כלי עוצמתי בעיצוב חוויית המשתמש, והנראות שלהם על המסך יכולה להשתנות בהתאם למכשיר בו הגולש משתמש. במילים אחרות, אין לנו באמת שליטה מלאה על התוצאה הסופית…
צבעים משפיעים על התפיסה החזותית שלנו ועל רגשותינו. על מסך מחשב, שבו הפיקסלים בדרך כלל בגדלים גדולים יותר, הצבעים יכולים להיראות עזים יותר. במסכי סלולר, לעומת זאת, הצבעים עשויים להיראות שונים בגלל גודל המסך הקטן והמרחק מהעיניים. לדוגמה:
- צבעים עזים: במסכים גדולים, צבעים עזים כמו אדום וכחול יכולים לשפר את תשומת הלב. כאשר אותם צבעים מופיעים על מסך קטן, הם עשויים להרגיש דומיננטיים מידי וליצור תחושת עומס על הגולש.
- גוונים רגועים: גוונים רכים כמו ירוק וכחול בהיר יכולים ליצור תחושת רוגע בשני המסכים, אך חשוב לשים לב להתאמת הגוונים בהתאם לגודל המסך.
הקונטרסט בין צבעי הרקע לטקסט הוא קריטי בחוויית המשתמש. על מסכי מחשב, ניתן לנצל את הקונטרסט בצורה מיטבית כדי להבטיח קריאות גבוהה יותר.
- מסכי מחשב: על מסכים גדולים, ניתן להשתמש בקונטרסט גבוה בין צבעי הרקע והטקסט, כמו טקסט לבן על רקע כהה, כדי להקל על הקריאה.
- סלולר: במכשירים ניידים, יש לחשוב על הקונטרסט בהתאם לתנאי תאורה משתנים. צבעים בהירים עשויים להיות קשים לקריאה באור שמש ישיר, ולכן חשוב לבחור צבעים שיבטיחו קריאות גם בתנאים אלו.
ממשקי משתמש משתנים בין המחשב לסלולר, וגם השפעת הצבעים על הקליטה החושית ועל התגובות היא שונה:
- עבודה עם עכבר: במחשבים הגולשים בדרך כלל עובדים עם עכבר, כך שניתן ליצור אנימציות ותגובות צבעוניות כאשר העכבר עובר על אלמנטים שונים. זה יכול לשפר את חוויית המשתמש.
- מסך מגע: במכשירים סלולריים הגולשים משתמשים במגע. צבעים עשויים להשתנות כאשר לוחצים על כפתורים אבל זה קצת מאוחר מידי, ולכן חשוב לבחור צבעים שימשכו את העין ויעודדו אינטראקציה.
תאורת המסך והסביבה שבה נמצא הגולש משפיעים גם הם על התגובה לצבעים:
- תאורה טבעית: מסכים נוטים להגיב בצורה שונה לאור טבעי, וכך צבעים עשויים להיראות בהירים יותר באור יום או תאורה שקרובה לתאורה טבעית.
- תאורת חדר: בחללים חשוכים צבעים עשויים להיראות שונים. חשוב לבצע בדיקות על מסכים בתנאי תאורה שונים כדי להבין כיצד הצבעים נתפסים.
אלה עקרונות שקל להשתמש בהם. מניסיוני, אין צורך להתעמק בצבעים מעבר לכך – ותמיד אפשר לשנות צבעוניות בקלות אם התוצאות לא מתאימות לך.
למידע נוסף על בניית אתרים: