8 שלבים לעיצוב ממשק משתמש

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

cc by Andrea Collet

1. מחקר (Research)

בשלב הראשון אנו מקבלים מסמך מה-Product Planner המפרט את החזון.

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

• מי הם המשתמשים?
• מהן המשימות העיקריות שלהם?
• איך המוצר משתלב בתהליך העבודה שלהם?
• איך נראים המוצרים של המתחרים?

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

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

2. שרטוטים ידניים (Sketching)

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

שרטוטים לדוגמא למערכת המאפשרת השוואה בין ביצועי באנרים באתרים שונים:

אחרי שיש לנו גרסא אחת טובה אנחנו ניגשים לבניית אב הטיפוס.

3. בניית אב טיפוס (Prototyping)

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

לבניית אב הטיפוס שני יתרונות עיקריים:

א.       אפשר ממש לראות ולהרגיש איך המוצר מתנהג.

ב.       אנחנו יכולים לבדוק את המוצר מול משתמשים.

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

“You can use an eraser on the drafting table or a sledge hammer on the construction site”, Frank Lloyd Wright, Architect.

צילום מסך מתוך תוכנת Axure:

4. בדיקות משתמשים (User Testing)

לאחר שסיימנו לבנות את אב הטיפוס אפשר להתחיל לבדוק אותו. הבדיקות נערכות מול משתמשים שונים ממשרדינו ומסוכנויות פרסום ברחבי העולם. בשלב זה נעזר ב-Solution Specialist הכותב תסריט המכיל מספר מטלות. בתחילת המבדק מסבירים למשתמשים שמי שנבחן הוא המוצר ולא הם, ומבקשים מהם לתאר את מה שעובר להם בראש בזמן השימוש בממשק. לאחר סבב הבדיקות הראשון אנחנו מסכמים את הבעיות שעלו ומעדכנים את אב הטיפוס בהתאם. מומלץ לבצע סיכום וסבב תיקונים לאחר כל 2-3 מבדקים. בסה"כ מומלץ לבדוק עם לפחות חמישה משתמשים שונים.

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

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

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

5. עיצוב גרפי (Graphic Design)

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

דוגמא לעיצוב מסך סופי:

6. פיתוח ובקרת איכות (Development & QA)

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

לדוגמא, רווח מיותר מסומן למטה באדום:

הודעת שגיאה שלא במקומה:

בשלב הזה אנו נשים דגש על הפרטים הקטנים ביותר.

"The details are not the details. They make the design", Charles Eames

7. בדיקות משתמשים נוספות (Alpha)

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

8. שחרור ומעקב (Beta)

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