הבנת המשימה
טרם תחילת תהליך העבודה היה לי חשוב להבין מהן הנקודות העיקריות של המשימה ולמצוא פתרון בהתאם. בשלב הראשון קראתי את המשימה. בשלב השני חילקתי את תהליך העבודה לשלבים. היה חשוב לי לאורך כל התהליך להיצמד לשלבים ולא לסטות מהם.
מחקר
לאחר שהבנתי מה נדרש ממני במשימה התחלתי את תהליך המחקר. המחקר התחלק למספר שלבים :
1. הבנת הממשק הקיים של wix, התנסות במערכת ולמידת השלבים השונים הקיימים בה.
2. יצירת טבלה המחולקת לפי שלושת סוגי מילויי הרקעים הקיימים- תמונה, צבע ווידאו. תחת כל סוג פירטתי את ההגדרות המתאימות הקיימות בממשק על מנת ליצור השוואה בין הסוגים השונים. טבלה זו בעצם ליוותה אותי לאורך כל תהליך העבודה.
3. צפייה בממשקים של חברות מתחרות על מנת ללמוד ולהתרשם כמה שיותר ולקבל רעיונות חדשים.
4. יצירת מסך ובו כל הנקודות שלפי דעתי צריכים להשתפר בממשק והעלאת רעיונות ופתרונות חדשים.
יצירת פרסונות
בשלב זה התחלתי לחשוב מיהו קהל היעד שלי, על מנת לדעת כיצד אגדיר את הממשק. היה חשוב לי לאורך כל הדרך להבין את התנהגות המשתמש שלי ואיך ניתן לקלוע כמה שיותר לרצונות שלו וליצור לו חוויה איכותית. לאחר חשיבה עמוקה והבנת המוצר הגעתי לשתי פרסונות עיקריות:
פרסונה: תמר
תמר היא מעצבת פרילאנסרית שעובדת מהבית במשך כ-8 שנים. תמר מאוד אוהבת את המקצוע ורוצה להתפתח בו. זמן רב שהיא מנסה להיכנס לתחום בניית האתרים, אבל אם יש דבר שהיא לא טובה בו זה לכתוב קוד. כתיבת הקוד מבהילה אותה. היא יודעת כמה כסף הייתה יכולה להרוויח במידה והייתה יכולה ליצור אתרים שיראו ויעבדו בדיוק כמו שהיא רוצה. לאחרונה גילתה תמר את wix, היא נדהמה מהיכולות שהפלטפורמה מציעה. המערכת עובדת ללא שום הגבלות עיצוביות והיא יכולה לעשות כל מה שרוצה.
הבנת אוהבת ליצור אתרים מיוחדים ולהרשים את הלקוחות שלי
מטרות
1. להתקדם מקצועית. 2. להרוויח יותר כסף.
גורמים מניעים
1. דרישה של לקוחות לבניית אתרים. 2. להיות באותו קו מול המתחרים.
מאפייני שימושיות
ידע בעיצוב
מקצוען
על הפנים
שימוש בפלטפורמות עיצוביות
כל יום
אף פעם
הבנת שפה עיצובית
השפה השניה שלי
אין ידע
כל יום
שימושיות
חד פעמי
סוגרת עסקה
1. מחיר טוב.
2. חופש פעולה ויצירה.
3. אפשרות לנהל את האתר בקלות.
פרסונה: הילה
הילה, צלמת מזה כ-4 שנים. הילה עסוקה בעבודתה מעל הראש. היא מאוד אוהבת את התחום שבחרה לעצמה. במשך שנים, סחבה אלבומים לכל פגישה עם לקוחות חדשים על מנת שיוכלו להתרשם מעבודותיה. לאחרונה, החלה לראות שהמתחרים שלה מציגים את העבודות שלהם באתר אינטרנט. והבינה שזה חוסך להם המון כאבי ראש ומאפשר להציג ללקוחות את העבודות בצורה מקצועית ומהירה יותר. לאחר שבדקה את העלויות של בניית אתר, הבינה שזה לא הולך להיות זול בכלל. חברה טובה, הציעה לה לנסות את הפלטפורמה של Wix ולבנות את האתר בעצמה ללא צורך במעצב ובמפתח כלל.
לא מבינה כל כך בעיצוב מחפשת משהו קליל פשוט ומהיר
מטרות
1. לחסוך זמן.
2. לחסוך כסף.
גורמים מניעים
1. למנוע מפגשים מיותרים עם לקוחות לפני התרשמות.
2. צורך לשתף ברשתות עבודות חדשות על מנת שיכירו אותה.
מאפייני שימושיות
ידע בעיצוב
מקצוען
על הפנים
שימוש בפלטפורמות עיצוביות
כל יום
אף פעם
הבנת שפה עיצובית
השפה השניה שלי
אין ידע
שימושיות
כל יום
חד פעמי
סוגרת עסקה
1. מחיר טוב.
2. אין הגבלה של מקום בזיכרון.
3. חוויה טובה.
4. אפשרות לנהל את האתר בקלות.
תכנון הממשק
לאחר סיום המחקר והבנת התהליך, לקחתי חבילה של דפים לבנים והתחלתי לשרטט כיוונים שונים וחדשים שעלו לי לראש. תהליך זה הוא ארוך אשר יוצר את הממשק הראשוני וההבנה לאיזה כיוון הפתרון הולך להתפתח. עשיתי המון נסיונות וניתקלתי בהמון בעיות. לאחר אין סוף מחשבות ונסיונות התחלתי לצמצם אופציות קיימות ולהתחיל להתקרב אל הפיתרון.
בניית Wireframe
לאחר סיום בניית התהליך הראשוני, החל שלב הביצוע. שלב שבו הייתי צריך ליצור תהליך שלם של כל המערכת ובניית המבנה הראשוני של הממשק.
בבניית התהליך השתמשתי בכל המידע שצברתי מתחילת הדרך על מנת ליצור את הממשק הכי טוב שאפשר. בחשיבה וביצירת הממשק חשבתי אך ורק על טובת המשתמש. במידה ומצאתי לנכון להשתמש באלמנטים או בפונקציונאליות קיימים השארתי אותם כמו שהם.
יצרתי תהליך שלם בעזרת הפלטפורמה של Invision.
במסכים הבאים אסביר על השינויים העיקריים אשר נעשו בממשק:
הממשק מוצג בתוך פאנל צף מעל כל האתר. בחרתי להשאיר את התצוגה במצב זה מאחר והגעתי למסקנה שהאתגר בבניית מערכת זו היא כמה שפחות להפריע למשתמש עם אלמנטים על המסך ולדאוג לכך שהוא יוכל לצפות בצורה טובה ברקעים המתחלפים.
תצוגת הPrivew מוצגת בחלקו העליון של המסך מעל כל האפשרוית השונות והיא פשוט מציגה את האופציה הנבחרת של הרקע. בחרתי להניח את אלמנט הPrivew בצורת שכבות רק בבחירת תמונה, על מנת שיוצג גם הצבע של הרקע הנבחר אוטומטית עבור המשתמש והוא לא מודע לכך בעת בחירת התמונה.
לאחר שבוחרים רקע ניתן לשנות את ההגדרות שלו. אני בחרתי לחלק את ההגדרות ל 3 קטגוריות:
1. שינוי צבעי הרקע.
2. אפקטים בגלילה.
3. מיקום ופריסה.
זה יאפשר למשתמש גישה מהירה להגדרות שירצה לשנות. כמו כן ההגדרות משתנות בהתאם לסוג הרקע.
בחירת סוגי הרקע יתחלקו ל4 טאבים:
1. הכל.
2. צבע.
3. תמונה.
4. וידאו.
לאחר שינוי זה המשתמש יוכל להתרשם יותר מהמלצות המערכת ולהישאר בתצוגה המאפשרת צפייה בLive של החלפת הרקע בלי להיכנס למסך המסתיר אותו.
המשתמש יוכל לצפות בכל סוג בנפרד או בכולם ביחד.
בנוסף תחליף המערכת את ההמלצות לרקעים בהתאם לבחירות של המשתמש, ההמלצות יעזרו לאנשים לעצב אתרים יפים יותר המציגים שפה עיצובית אחידה אשר תעלה את הרמה של ניראות האתרים.
אפשרות לחיפוש רקעים תעזור למשתמש למצוא מהר יותר את הרקעים שהוא מחפש ולקבל המלצות שמתאימות לו.
כמו כן, בלחיצה על כפתור החיפוש המערכת תציע למשתמש קטגוריות שונות של רקעים על מנת לעזור לו לקבל את ההתאמה הטובה ביותר.
בשיפור זה שוב המשתמש נשאר בתצוגת Live ויוכל לשנות רקעים ולצפות בהם בלי שום הפרעה.ובית אחידה אשר תעלה את הרמה של ניראות האתרים.
בעזרת כפתור של הוספה, המשתמש יוכל בקיצור דרך לבחור תמונות מגלריות במידה ולא מצא מה שאהב דרך כל ההמלצות המוצעות לו.
שיפור נוסף וחשוב מאוד הוא הכפתור להעלאת קבצים הנמצא במקום נגיש יותר דבר המאפשר עבודה קלה ונוחה יותר.
פלטת צבעים
המשתמש יקבל המלצות לצבעים שיתאימו לבחירות שביצע.
ניתן למחוק ולערוך צבע קיים.
ישנה אפשרות להוספה של פלטות מומלצות.
עיצוב הממשק והשפה העיצובית
מכיוון שבמהלך השימוש בפלטפורמה של עיצוב אנו מסתכלים על מסך המחשב לאורך זמן בחרתי להשתמש בצבע כהה בתבנית של הממשק, מאחר וצבע זה לא מעייף את העין ויכול לאפשר שימוש ארוך יותר.
כמו כן, הצבע שמסמן למשתמש הנעה לפעולה הוא כחול שזהה לצבע המיתוג של החברה.
השתמשתי באייקונים עדינים שלא יצרו עומס על הממשק ויהיו כמה שיותר ברורים.
צבע הטקסט הוא לא זרחני, הוא עדין ומשתלב בצבע הרקע. זה במטרה לא לצור למשתמש הרגשה של עומס ועוזר להבליט את הצבע הכחול אשר מסמן אזור לחיץ.
במקרה של רקע אשר מונחים עליו אוביקטים המסתירים אותו והמשתמש רוצה להחליף את הרקע נוצר מצב אשר הוא אינו רואה שום שינוי ברקע. המערכת תזהה רקע מוסתר במקרה כזה, תמזער את כל הרקעים לצד של המסך וכך המשתמש ישים לב שהרקע מסתתר למטה, ובנוסף יוכל לראות את השינויים שהוא מבצע ברקע. בסיום יוכל ללחוץ על החץ אשר יחזיר את התצוגה לקדמותה.