עשרת הדיברות לעיצוב מנצח ב-2015




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

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

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


1. יותר מהכל, האתר צריך להיות... פרקטי


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

  • לאן הגעתי?
  • מה אני יכול לעשות פה?
  • לאן אני יכול להמשיך מפה?

איך לעצב אתר שעונה על שלוש שאלות הקסם?


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

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

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

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

הנה כמה דוגמאות המחשה לנקודות מעל:



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



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



האתר של Jami Lin (אם לא היה ברור, זוהי דוגמה לעיצוב רע שיש להימנע ממנו).


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


2. עקביות בעיצוב דפי האתר


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

אז מה זה עקביות בעיצוב?

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

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

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


3. עיצוב מותאם לגדלי מסכים שונים


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

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


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

4. טקסט (טיפוגרפיה) - גדול, קריא וברור


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

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

מה מומלץ:

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

ממה להימנע:

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

מה מומלץ: שימוש בגופנים קלים לקריאה, ובגדלים נכונים למסכים השונים.



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

5. גבירותיי ורבותיי, תמונות!


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

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

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

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

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


אז מה מומלץ?


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


מה מומלץ: שימוש בתמונות איכותיות שנראות ומשדרות אותנטיות ושמספרות סיפור.



ממה להיזהר: תמונה ממאגר זול ומיושן. התמונה נראית מלאכותית ואף מגוחכת.

6. מוזיקה/אודיו באתר


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

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

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

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

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



7. שימוש בצבעים


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

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

דוגמה טובה לשימוש בצבע המותג להדגשת אזורי הפעולה העיקריים באתר: זוהי תמונה של עמוד הבית של מותג השמפניה Veuve Cliquot הצרפתי. שימו לב איך צבעי התמונה משתלבים נהדר עם העמוד כולו.


8. כפתור - כבודו במקומו מונח


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

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

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


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

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

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


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


9. שימוש בחללים לבנים


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

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


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


למידע נוסף על שימוש בחללים לבנים אנו ממליצים על הספר האלקטרוני - והחינמי - Zen of White Space in Web UI Design מאת חברת UXPin - פלטפורמת עיצוב web prototypes & wireframe ושיתוף פעולה בין-צוותי.



10. חלונות קופצים - טוב או רע?


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

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

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



לסיכום


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

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

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

צוות קופיף
info@kofeef.co.il