top of page

האתגר

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

תיאור הבעיה

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

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

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

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

שלב 1: מחקר

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

1.  מחקר וניתוח של הממשק הנוכחי
2.  יצירת פרסונות
3.  הגדרת מטרות
4.  קונספט

מחקר וניתוח של הממשק הקיים

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

1. לאחר שמשתמש מעלה שירות או מוצר בפעם הראשונה, הכפתור “Become a seller” בחלקו העליון של הממשק, יעלם.

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

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

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

פרסונות

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

אור

Backend Developer בחברת Startup

נשוי פלוס שניים

רעננה

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


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

יערה

מעצבת גראפית

רווקה פלוס כלב

תל אביב

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

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

הגדרת מטרות

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

איך אגרום למשתמש לרצות למלא את הטופס?

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

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

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

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

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

שלב 2: קונספט

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

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

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

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


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

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

שלב 3: Wireframes

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

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

 

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

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

 

מצד ימין, מוצגת רמת האמון שהמשתמש יקבל מלקוחותיו הפוטנציאלים, (ע"פ שיקלולים של Fiverr)

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

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

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

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

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

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

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

שלב 4: שפה גראפית

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

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

חדש

ישן

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

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

הצגת התהליך בINVISION

על מנת לבדוק את הממשק ולהרגיש את החוויה יצרתי תהליך קצר בפלטפורמת invision 

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

על מנת להיכנס לתהליך:

שלב 5: עיצובים

לסיכום

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

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

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

אשמח לענות על כל שאלה בשמחה רבה

bottom of page