אפיון ועיצוב אתרים: UX/UI שמוביל את הגולש לפעולה
אתר יכול להיראות מצוין ועדיין לא להביא פניות. הגולש לא מוצא את מה שחיפש, הטופס ארוך מדי בנייד, או שהכפתור החשוב קבור בתחתית. אפיון ועיצוב UX/UI פותרים את זה לפני שכותבים שורת קוד אחת.
מה זה UX ומה זה UI, בלי מילים גדולות
UX הוא הדרך: מאיפה הגולש מגיע, מה הוא מחפש, ומה הצעד הבא שלו בכל עמוד. UI הוא מה שהוא רואה בדרך: צבעים, גופנים, כפתורים, כרטיסים. אתר שעוצב בלי אפיון נראה טוב בצילום מסך, אבל לא עונה על השאלה של הגולש בסדר הנכון.
לכן אנחנו מתחילים מהשאלות, לא מהמסכים. מי הקהלים, מה כל אחד מהם צריך לדעת לפני שהוא פונה או קונה, ומה יכול לעצור אותו בדרך. רק אחרי זה בונים שלד לעמודים, ורק אחרי שהשלד עובד מעצבים.
למי זה מתאים ולמי לא
מתאים אם
- עסק שבונה אתר, חנות או מערכת חדשים ורוצה שהמבנה ייקבע לפני העיצוב.
- עסק עם אתר קיים שמקבל תנועה, אבל הגולשים לא מגיעים לפנייה או לרכישה.
- עסק עם מערכת פנימית שהצוות מתקשה להשתמש בה.
פחות מתאים אם
- עסק בלי נכס דיגיטלי ובלי תוכנית לבנות אחד.
- מי שמחפש רק פיתוח לפי עיצוב שכבר קיים. במקרה כזה מתאים פיתוח אתר וורדפרס.
- מי שצריך שינוי קטן בעמוד אחד שכבר עובד. שם עדיף שיפור יחס המרה ממוקד.
מה מקבלים
- אפיון UX: קהלים, מסלולים ומה כל קהל צריך לראות בכל שלב.
- מפת עמודים ושלד לכל עמוד מרכזי, לפני עיצוב.
- שפה עיצובית: פלטת צבעים, טיפוגרפיה, ורכיבים קבועים כמו כרטיסים, כפתורים וטפסים.
- עיצוב UI למסכים המרכזיים, קודם כל למובייל.
- הנחיות פיתוח: איך כל רכיב מתנהג, כדי שמה שעוצב הוא מה שנבנה.
- בדיקה של המסלולים המרכזיים לפני מסירה.
איך עובדים
כך נראה התהליך באתר של אריאל השמה, ובערך כך הוא נראה בכל פרויקט.
- אסטרטגיה ואפיון משתמשים מגדירים קהלים, מסרים ופעולה מרכזית. אתם מביאים את מה שאתם יודעים על הלקוחות: מה שואלים בטלפון, מה מעכב החלטה.
- שפה עיצובית פלטה, גופן ורכיבים. ההחלטות עוברות אליכם לאישור לפני שממשיכים.
- שלד העמודים שלד לכל עמוד מרכזי: סדר הסקשנים, מה בכל אחד ואיפה הפנייה.
- תוכן ועיצוב כותבים את התוכן לתוך השלד ומעצבים את המסכים. תוכן ועיצוב עובדים יחד, לא אחד אחרי השני.
- בדיקות ומסירה בודקים את המסלולים במובייל ובמחשב, ומוסרים לפיתוח. אם אנחנו גם בונים, ממשיכים ישר לבנייה.
הגולשים מגיעים לאתר ולא מגיעים לפנייה? ספרו לנו איפה לדעתכם הם נתקעים.
ספרו לנו על האתרהחלטות UX שקיבלנו בפרויקטים אמיתיים
כל אחת מהן נולדה משאלה על הלקוח, לא מטרנד עיצובי.
אריאל השמה: נייד קודם
רוב מחפשי העבודה גולשים מהנייד, ולכן הטפסים ושליחת קורות החיים תוכננו קודם כל למסך קטן. הפעולה הראשית היא וואטסאפ, והמשנית שיחה עם נציג.
וילאנו: המחשבון בתוך הקנייה
בוילאנו המדריך ומחשבון המידות נמצאים בתוך מסלול הקנייה, וכפתור ההוספה לסל נפתח רק אחרי שהוזנו רוחב וגובה. כך לא יוצאת הזמנה בלי מידות.
ספקטרה: חיפוש כמו שאנשים מחפשים
בספקטרה נדל״ן החיפוש נבנה סביב שכונה, תקציב וחדרים, ולא סביב מבנה הנתונים של המשרד.
Hot House: שני מסלולים
בHot House יש מסלול למי שבא לקנות עכשיו ומסלול למי שבא להתייעץ על פרויקט, כי אלה שתי החלטות שונות.
מדף־על: ניווט לפי קהל
במדף־על התפריט מוביל לפי קהל: בית, עסק ותעשייה, כי כל אחד מחפש משהו אחר באותו מדף.
ראובן חשמל: אמון למעלה
בראובן חשמל המידע שבונה אמון, רישיון וניסיון, מופיע כבר בחלק העליון, וכל עמוד מסתיים בפנייה.
לא רק אתרים: ממשקים למערכות
אותו היגיון עובד גם במערכות. ב־MeAriel היו שני קהלים: תושבים שמחפשים בעל מקצוע עכשיו, ובעלי עסקים שמעדכנים את הכרטיס שלהם. ההחלטה המרכזית הייתה אזור ניהול שבעל עסק מבין בלי הדרכה, וחיפוש שעובד טוב בנייד.
ב־Hot House בנינו מעל ה־CRM ממשק עברי פשוט לעובדי המשרד, עם הרשאות לפי משתמש. כשהבעיה היא ממשק שהצוות לא משתמש בו, זה פרויקט של פיתוח מערכת מותאמת שמתחיל באפיון UX.
אפיון ועיצוב לבד, או יחד עם הבנייה
| אפיון ועיצוב בלבד | אפיון, עיצוב ובנייה | |
|---|---|---|
| מה מקבלים | מסכים, שפה עיצובית והנחיות פיתוח | אתר או מערכת שעובדים, כולל מדידה |
| מתי מתאים | יש לכם מפתח או צוות פיתוח | אין צוות פיתוח, או שרוצים גורם אחד אחראי |
| מה חשוב לבדוק | שהמפתח יכול לבנות את מה שעוצב בפלטפורמה שבחרתם | שהאפיון נסגר לפני שמתחילים לבנות |
| לאן להמשיך | השירות בעמוד הזה | אתר חברה או חנות אונליין |
עבודות שממחישות
שאלות נפוצות
אין לנו מחקר משתמשים. אפשר להתחיל?
כן. אנחנו מבצעים אפיון ראשוני על בסיס מה שאתם יודעים על הלקוחות: מה שואלים בטלפון, מה מעכב החלטה, ומאיפה מגיעה התנועה.
השירות כולל גם בנייה?
אפיון ועיצוב כשירות עצמאי לא כוללים פיתוח בפועל. ברוב הפרויקטים אנחנו גם בונים, ואז האפיון והבנייה הם תהליך אחד.
למה צריך שלד לפני עיצוב?
כי שלד מראה אם סדר המידע נכון בלי שצבעים ותמונות יסיחו את הדעת. קל לשנות שלד, יקר לשנות עיצוב גמור.
אתם מעצבים גם מערכות ולא רק אתרים?
כן. אפיון ועיצוב לאתרים, לחנויות, לדפי נחיתה ולמערכות פנימיות, כמו אזור הניהול לבעלי עסקים ב־MeAriel.
האתר שלנו קיים. צריך לעצב הכל מחדש?
לא תמיד. אם הבעיה בכמה עמודים, מתחילים בשיפור יחס המרה. אם המבנה כולו לא עובד, ממשיכים לשדרוג אתר.
באיזה שלב אנחנו מאשרים?
אחרי השפה העיצובית, אחרי השלד ואחרי העיצוב. לא ממשיכים לשלב הבא בלי אישור שלכם.
בואו נבין איפה הגולשים שלכם נתקעים
ספרו לנו מה האתר או המערכת צריכים לעשות, מי משתמש בהם, ואיפה זה לא עובד היום. נחזור עם הצעה לאפיון.
לתיאום שיחה על UX/UI