הדרך והשלבים השונים בתהליך עיצוב אפליקציות

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

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

מומלץ להתחיל לעבוד על בריף עיצובי טקסטואלי שיענה על שאלות כגון: מי הם המשתמשים שהולכים להשתמש באפליקציה? מה הגיל שלהם? מהי מטרת ה-APP ואילו פונקציות הם המהותיות ביותר? איזו תחושה אתם רוצים להעביר? מי הם המתחרים וכו’. עם המידע הזה תוכלו להתקדם לשני כיוונים במקביל:

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

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

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

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

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

השלב הבא הוא לא הכרחי אך הוא מאוד מומלץ והוא להפוך את ה-wireframes  (האם למישהו יש רעיון למילה עברית?) ל-prototype  (לפעמים נקרא mockup). הכוונה היא להפוך את השרטוטים עליהם עבדתם ולהפוך אותם לאינטראקטיביים. לחיצה על כפתור כלשהו יעביר את המשתמש למסך המתאים וכך תוכלו ליצור הדמייה לשימוש אמיתי באפליקציה. זהו בעצם השלב האחרון שבו תוכלו לקחת החלטות מהותיות לגבי חווית המשתמש מבלי ללכת אחורה כמה צעדים. (לאחר העיצוב / הפיתוח שינויים יעלו לכם זמן וכסף מכיוון שתצטרכו לעצב / לפתח שוב חלקים שכבר עשיתם). תוכלו ממש להרגיש איך האפליקציה עובדת וכמה קל או קשה להשתמש בה. לאחר שתסיימו לקשר את כל המסכים באמצעות לחיצה על כפתורי הניווט, אני ממליץ שתושיבו על מחשב שלכם כמה משתמשים שונים ביכולות ההבנה שלהם והנסיון הטכני שלהם , ותנו להם להשתמש באפליקציה, כאשר אתם עומדים ומתבוננים מאחורה. תוכלו אף לתעד אותם עם תוכנה שמקליטה בוידאו את המסך שלכם ואת הלחיצות (על מנת לנתח זאת לאחר מעשה), או לצלם במצלמת וידאו רגילה שתקלוט מה קורה מחוץ לעולם המחשב. איך התנהג המשתמש כאשר הוא לא הבין משהו? האם הוא התעצבן? האם הוא שמח בשלב כלשהו? זהו הדבר הקרוב ביותר לאפליקציה מושלמת שתגיעו אליו לפני כל תהליך העיצוב והפיתוח שיקח כנראה חודשים לא מעטים. לאחר שתראו איך אנשים שונים משתמשים באפליקציה, מה הם מבינים ובמה הם מסתבכים, תוכלו לחזור ל-MOCKUP ולשנות כמה דברים ברמת הניווט, התוכן או סידור המסכים.

שאלה לא פשוטה היא באיזה שלב כדאי להתחיל לעבוד על התוכן. לדעתי הטיימינג הנכון לכך הוא בין יצירת ה-WIREFRAMERS  להפיכתם ל-mockups. כותב התכנים יקבל את התרשימים של המסכים ויצטרך למלא אותם בתוכן אמיתי שיעזור למשתמש להבין בקלות איך מפעילים את האפלקיציה או להנות מהדרך בה התוכן רשום. לכותב התכנים יהיו חיים קלים יותר בזכות זה שהוא יוכל לראות את המסך בצורה גרפית וכך יבין יותר בקלות מה הוא צריך לכתוב. פה כנראה יהיה דיונים בין יוצר ה-WIREFRAMES לאיש התוכן לגבי כמות הטקסט שכדאי לשים בכל מקום. לעיתים איש התוכן ירצה להכניס הרבה יותר תוכן מהמקום שיעד לו המתכנן. אני בדר”כ חסיד גדול של פשטות ויצירת הנאה לכן לדעתי תוכן טוב הוא טקסט קצר וכיפי. כאשר ה-mockup יהיה כבר מוכן, הוא כבר יכיל תוכן אמיתי (ולא lorem ipsum) ויאפשר בדיקה אמיתית של האפליקציה על ידי משתמשים וכך תוכלו לבדוק גם את הבנת המשתמשים של התוכן והאם הצורה ש”פיזרתם” את התוכן היא נכונה או ניתן לשפרה.

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *