UX ועיצוב אתרים הם תחומים דינמיים מאד. טרנדים עיצוביים נכנסים ויוצאים. חלקם נעלמים עוד לפני ששמנו אליהם לב, אחרים נשארים איתנו ויוצרים שינוי משמעותי בכל התחום.
למה כדאי כבעל אתר או עסק להכיר את הטרנדים בעיצוב?
כדי לדעת למה קהל היעד שלך יגיב יותר. התחרות קשה על תשומת הלב קשה והאתר שלך צריך לבלוט מבחינה ויזואלית מעל המתחרים ואת זה אפשר להשיג באמצעות UX (חווית משתמש) ו- UI (עיצוב) מעודכנים.
אני לא נביאה, וגם מכונת הזמן שלי עדיין לא פעילה, אבל מכל מה שחקרתי וראיתי מסביב, יש כמה טרנדים בולטים כרגע ונראה שהם עומדים ללוות אותנו לתוך 2021 ולכן כדאי להכיר אותם ולשקול לשלב אותם באתר קיים או באתרים חדשים:
עיצוב עם אתיקה
איכפתיות חברתית כבר מזמן הפכה לנוושא שאף מותג לא יכול לוותר עליו. הקורונה רק הדגישה כמה כולנו רקמה אנושית אחת. אפילו כלכלית כבר ברור שקיימות ומצפון וטובים לשורה התחתונה. בתכנון של אתרים, מתחזקת החשיבות של נושא פרטיות המשתמשים. אנחנו שואפים לחוויה דמוית אפליקציה, אבל בלי שהמשתמש ימצא את עצמו שואל "למה הם צריכים את המידע הזה עליי בעצם?". זה מתחיל בחוקי הפרטיות הנוקשים של האיחוד האירופי (תקנות GDPR) וגוגל שמתחילה גם היא תהליך דומה, אבל לא נגמר שם. יותר ויותר אתרים יודיעו לך בצורה ברורה איזה מידע הם מבקשים ממך ויאפשרו גם לבחור מה ייחשף ומה לא. שימו לב למשל לאלמנטים של פופאפ ההסכמה:
Storytelling ומיקרו-קופי (UX Writing)
עוד טרנד ותיק, שמקבל חיזוק לקראת 2021. שילוב של Storytelling מותגי, יחד עם כתיבת מיקרו-קופי נכון, יכול לעשות שינוי משמעותי בחוויה של המשתמש באתר, ליצור אתרים זכירים, ליצור אינטראקציה משמעותית יותר עם האתר, עם המוצר ועם המותג.
מה זה מיקרו-קופי (UX Writing)?
הכוונה לכתיבה של כל האלמנטים הקטנים שמניעים לפעולה: תפריטים, כפתורים, מלל בטפסים וכדומה, אבל באופן אנושי ולא טכני או רובוטי. ויותר מזה, מציאת ה-tone&voice של המותג ושימוש עקבי בו לאורך כל הטקסטים באתר.
Dark Mode עיצוב/מצב אפל או כהה
תופעה שתופסת תאוצה בשנים האחרונות ונראה שהיא כאן להישאר.
יותר ויותר אפליקציות החלו להציע מצב כהה (במקור כדי לחסוך זמן סוללה), משתמשים רבים עברו להשתמש בוואטסאפ או Gmail במצב כהה, ובעקבות הנטייה הזו גם אתרים מאמצים את הטרנד. Apple, Android, אינסטגרם – כל המותגים הגדולים מציעים למשתמשים אפשרות למצב כהה.
הסגנון הזה בולט מאד, נתפס כמתוחכם וחלק, נוח יותר לעיניים ומאפשר הדגשה טובה יותר לאלמנטים חשובים מתוך התוכן.
כדי לגרום לתוכן לבלוט על גבי הרקע הכהה, בדרך כלל נראה באתרים כאלה צבעי טקסט מאד בולטים, כמעט ניאוניים, טיפוגרפיה (אותיות) גדולות ומודגשות, אנימציה, אלמנטים לבנים בולטים וכדומה.
דוגמה לאתר שפיתחנו בסגנון Dark Mode:
עוד דוגמה לשימוש נהדר בסגנון העיצוב הכהה:
מתי נכון להשתמש בעיצוב dark mode?
- כשיש יחסית מעט טקסט ויותר תמונות/ידאו.
- כשיש יחסית מעט אלמנטים על העמוד והמרווחים ביניהם טובים.
- כשרוצים לשדר אווירה או סביבה יותר אפילה, כמו בתכנים הנוגעים לקולנוע/גיימינג.
- כשרוצים להבליט אלמנט אחד על הדף, לתת לו עדיפות על פני היתר.
- כשרוצים להקל על מאמץ העיניים וכך להשאיר את המשתמשים יותר זמן באתר.
מתי הטרנד הזה פחות מתאים?
- כשהנתונים מראים שהשימוש באתר או באפליקציה הוא בעיקר בשעות היום.
- כשיש כמות גדולה של טקסט באתר.
- כשיש הרבה אלמנטים על המסך.
- כשהעיצוב של האתר עושה שימוש באלמנטים שונים של צבע. על רקע כהה קשה למשל להבחין בין אפור לכחול. הניגודיות הזו מאד מאתגרת.
איורים קוויים וצבעוניים בשילוב אנימציה
הסגנון הזה נראה אסתטי מאד, יש בו איזו קריצה והוא גם לא "נדחף" מדי. האיורים תופסים פופולריות, ואם מכניסים אליהם קצת הומור והרבה דמיון הם מעולים לאתר.
דוגמה לאתר מבוסס אנימציות שפיתחנו:
האיורים נבנים על גבי המסך, הם קשורים לתוכן שלצידם בצורה אינטליגנטית וגורמים לכל האתר להיות קליל יותר, אבל מצד שני לא גונבים את ההצגה מהתוכן הטקסטואלי.
טיפוגרפיה שוברת כללים
2020 מסתמנת כשנה שבה חוקי הטיפוגרפיה (שימוש באותיות) נשברו סופית והטרנד הזה רק בתחילת הדרך.
בסגנון העיצוב הזה האותיות משמשות כגורם ויזואלי מרכזי, לעיתים אפילו במקום תמונות ואיורים. כל הסיפור וההיררכיה מבוססים על פונטים.
זה יכול להיות גודל, רווח, סוג אותיות, מרווח בין שורות. הכל הולך. אבל עדיין נשמר כלל אחד חשוב: אפשר להבין מה כתוב!
הטרנד הזה מגיע אפילו לקיצוניות של שבירת של מילה בין כמה שורות, טאבו שלא מעזים בדרך כלל לשבור:
אבל גם באתרים שלא הלכו יותר מדי רחוק, שימוש בפונטים בולטים הפך להיות כלי עיצובי שכיח:
איך להשתמש בטרנד הזה לטובת האתר?
- להיעזר בפונטים לטובת הבלטה של אלמנטים חשובים. מומלץ לא להשתמש בפונט בולט מדי לאורך כל האתר, אלא רק באלמנטים החשובים יותר. זה יכול להיות כפתורים, הנעה לפעולה, מבצע מיוחד וכדומה.
- הכותרות הן הדבר הראשון בטקסט שמושך את העין. גם בעמוד ארוך, לרוב המשתמש יסרוק את כל הכותרות לפני שיתחיל לקרוא לעומק. לכן רצוי להשתמש בפונטים מיוחדים ובולטים בכותרות, ולהשאיר את הטקסט הרץ לפונטים יותר קריאים וקלאסיים.
שילובי צבעים נועזים
הדרך הכי פשוטה לצאת מחוץ לקופסה, היא באמצעות שילובי צבעים עתידניים ואמיצים. זו דרך נהדרת לבלוט ולהעביר מסר: אנחנו נועזים, לא פוחדים להתנסות.
שילובים כאלה מבטיחים שהאתר לא יהיה משעמם ומונוטוני.
נסו למשל עיצובים שכוללים צבעים ניאוניים.
נקודה חשובה: אין כאן המלצה להתחיל להשתגע עם צירופי צבעים רק בגלל הטרנד. שילובי הצבעים צריכים תמיד לדבר את המותג. אם המותג שלכם אמור לשדר סמכותיות, סולידיות וביטחון, צבעים פסטליים או פסיכדליים פחות יתאימו וכך הלאה.
Gradients: שימוש בצבעוניות מדורגת
טרנד די ותיק, שהתחיל משכבות עדינות וכיום כבר בולט הרבה יותר – רקעים מושכי עין, שילוב צבעים עזים.
מה האפקט של שימוש בגרדיאנט?
- גרדיאנט מוסיף עומק, מושך את העין לרקע ומייצר בו עניין.
- עובד נהדר עם טיפוגרפיה או צבעוניות נועזת (ראו סעיף קודם).
אימוץ של VUI ממשק קולי
אלמנטים מבוססי קול הולכים ותוספים תאוצה ונפח באתרים, והם יכולים לחזק ולהגביר את הנוכחות של האתר שלך ולהשאיר רושם משמעותי על המשתמשים.
דוגמאות לשימוש ב VUI:
- צ'אטבוט קולי
- עוזר וירטואלי
הכלים האלה משפרים את השמישות באתרים ומבחינת חוויה מוסיפים את הטוויסט המיוחד לאתר שלך.
שימוש נרחב בתלת מימד
ב-2020 ראינו לא מעט שינוי ומעבר מעיצוב שטוח לאלמנטים תלת מימדיים.
מתי זה מתאים?
- באתרים שהעיקר שלהם הוא הצגה של מוצרים בודדים
- כשיש צורך לספר סיפור על ידי עיצוב מיוחד ותנועה
White Space – שטחים לבנים או ריקים
White Space לא חייב להיות לבן, הכוונה היא לשטח שבין האלמנטים. לכן הוא מכונה גם “Negative Space”. לא מדובר בטרנד חדש, האפקט הפסיכולוגי של שטחים ריקים מוכר כבר לא מעט שנים. Apple למשל עשתה בו שימוש בהרבה מהאתרים שלה. הרעיון הזה הולך ותופס משקל עיצובי לאורך זמן, היות והגישה שניסתה בעבר לדחוס כמה שיותר תוכן לפני הגלילה (מה שמכונה "Above the fold") כבר פחות רלוונטית. המשתמשים רגילים לגלול, המסרים הופכים להיות מורכבים, התמונות גדולות ורחבות, וברור שלא ניתן לדחוס הכל בשטח קטן.
האפקט של שימוש ב White Space:
- שימוש בשטח לבן או ריק מאפשר לתוכן "לנשום", לא לדחוס יותר מדי תוכן על שטח קטן של המסך.
- חווית גלישה יותר רגועה.
- אפשרות לספר סיפור באמצעות גלילה, הפסקה, גלילה נוספת וחוזר חלילה.
- התוכן בולט יותר על רקע השטח הריק.
- קריאות (Readability) טובה יותר של טקסט.
- ל White Space יש חשיבות גדולה גם בעיצוב ו UX נכון למובייל.
פתיח וידאו באתר
כמו שלט חוצות ענק, שימוש בוידאו בחלק העליון של דף הבית (חלק שמכונה "Hero") יכול למשוך מאד את תשומת הלב של המבקרים באתר.
זה שטח מעולה להעביר מסר. נצלו את הנדל"ן הזה כהזדמנות לספר את הסיפור של המותג שלכם ולהכניס לאווירה הנכונה.
טיפים לשימוש נכון בוידאו:
- לעיתים הסרטון ייחתך בצדדים בהתאם לגודל המסך ושטח הדפדפן. חשוב להתאים אותו למצבים השונים, לרכז את התוכן החשוב במרכז ולוודא שגם אם השוליים נחתכים הוידאו עדיין נראה טוב וכמובן חשוב להתייחס גם לנראות שלו במובייל.
- בנוסף, חשוב לוודא מראש שמשקל הוידאו לא גבוה מדי ולטפל בתשתית מתאימה לטעינה מהירה, כדי לא לפגוע בקצב עליית האתר. הנזק של וידאו שנתקע תוך כדי טעינה גבוה יותר מכל תועלת עיצובית.
דוגמאות לאתרים עם פתיח וידאו:
אתר sagemarketing.io וידאו פתיח אווירתי, יוצר תחושה של סקרנות ותחכום
באתר HYPE הוידאו בפתיח מכניס מיד לאווירה של תנועה וספורט:
עיצוב רספונסיבי וידידותי לאגודל
אחד הנושאים החשובים ביותר שללא ספק ימשיכו איתנו הלאה ל 2021 ומעבר לה, הוא נושא ההתאמה של האתר למכשירי מובייל.
ב-2020, אתר ללא התאמה רספונסיבית (אתר שמגיב לגודל המסך שממנו גולשים אליו ומתאים את עצמו אוטומטית) הוא למעשה ויתור על עצם קיומו של האתר. אבל מה הלאה לקראת 2021?
הכל בסופו של דבר חוזר לחווית המשתמש. לא מספיק להיות רספונסיביים. אנחנו צריכים להתאים את האתר שלנו כך שיהיה ידידותי לאגודל!
הכוונה היא לחוויה של הגלילה באתר, לאופן שבו אנחנו גולשים באתר כאשר אנחנו אוחזים את מכשיר המובייל. לרוב, המכשיר מונח בתוך כף היד והאגודל היא שגוללת ועושה את רוב העבודה.
לכן חשוב להתאים את הניווט, הגלילה, הכפתורים וכו' לגודל של אגודל ולזווית שאליה היא מגיעה.
טיפים:
- תפריט הניווט צריך להיות ממוקם בהתאמה לאגודל. מחקרים הראו שהמיקום הכי טוב הוא מרכז המסך, לשם מגיע האגודל ללא מאמץ יתר.
- יש טווח די נרחב של גדלי אגודלים. עצבו במחשבה על בעלי יד גדולה יחסית, כדי שלחיצת אגודל תהיה נוחה (למשל כפתורים או אייקונים של רשתות חברתיות. רצוי שיהיה ביניהם מספיק מרווח כדי שיהיה קל ללחוץ על הכפתור המבוקש והאגודל לא תכסה שני כפתורים).
עוד על התאמת העיצוב למובייל תוכלו לקרוא במאמר הזה.
אתרי onepager
אתרים עם גלילה ארוכה בתוך עמוד אחד ארוך, כל המידע זורם חלק אחרי חלק, תמונות יפהפיות ומעט מלל. חוויה.
אתרי One Pager הם טרנד עיצובי חזק ביותר שכנראה עומד להישאר כאן.
איך יודעים למי מתאים כזה סוג של אתר, מה חשוב שיהיה בו ואיך מתגברים על האתגר של לקדם אותו? במאמר שמנתח כמה פרויקטים כאלה תקבלו את כל המידע.
מה לקחת?
ב-2021 נראה שטף של אתרים מוארים, נקיים, שעושים שימוש באנימציה, אלמנטים תלת מימדיים, תוכן קולי ווידאו כדי להעשיר את חווית המשתמש.
הצבעים והפונטים יהיו נועזים אבל יישמר הרבה שטח נקי.
האגודל שלנו צריכה לקבל יחס VIP על ידי עיצוב ידידותי למובייל.
כל היופי הזה לא יבוא על חשבון הפרטיות שלנו וילווה ביותר מיקרו-קופי ו-Storytelling.
תכנון נכון של אתר חדש, או שיפוץ אתר קיים תוך מחשבה על כיווני העיצוב וחווית המשתמש הדומיננטיים לתקופה, ישפר ללא ספק את האימפקט של המותג שלך ויציג אותך כעסק מעודכן וידידותי יותר.
אפשר לשלב בין הטרנדים או לקחת את אחד הכיוונים ולשפר באמצעותו את האתר, כדי לבלוט יותר מול התחרות ולספק חוויה טובה ללקוחות שלך.
אם מעניין אותך ייעוץ לגבי אתר חדש שמשלב אחד או כמה מהטרנדים הבולטים לקראת 2021, אני תמיד זמינה כאן ety@etyhadar.com
