עיצוב UX UI: אתר שקל להבין ונעים להשתמש בו

מה זה עיצוב UX UI ומה ההבדל בין שני החלקים?

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

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

איך מתכננים את המסלול של הגולש באתר?

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

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

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

מה מקבלים בכל שלב של עיצוב UX UI?

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

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

אילו טעויות UX גורמות לגולשים לעזוב בלי לפנות?

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

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

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

למה מערכת רכיבים חשובה יותר מעיצוב של עמוד בודד?

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

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

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

איך בודקים שעיצוב הממשק באמת עובד?

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

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

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