עיצוב אתרים שמתחיל מהמשתמש ונגמר בפנייה

ההבדל בין חוויית משתמש לממשק משתמש

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

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

איך נראה תהליך עיצוב אתר אצלנו

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

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

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

עיצוב שמזוהה עם המותג ולא עם תבנית

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

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

מובייל, נגישות ומהירות הם חלק מהעיצוב

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

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

עיצוב שמוביל לפעולה

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

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

טיפוגרפיה, צבע ומרווחים בעברית

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

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

עיצוב מחדש לאתר קיים

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