עיצוב ממשק משתמש – כלים בשימוש מעצב חווית המשתמש

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

21/12/2010

כלי שרטוט מסכים

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

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

Balsamiq Mockups מתוצרת Balsamiq מאפשר עבודה ברמת השרטוט החופשי ומכיל ספריות של רכיבי ממשק משתמש עשירות ומגוונות. מוצר נוסף בשם Mockingbird מציע סביבת עבודה אינטרנטית ומציע מגוון אפשרויות רישוי על בסיס חודשי. כדי לבדוק גם את Mockflow אשר פועל בסביבה דומה. Pencil הנו תוסף חינמי דפדפן Firefox שמאפשר עבודה באמצעות הדפדפן.

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

כלי עיצוב

כלי העיצוב נועדו בראש ובראשונה לביצוע עיצוב ויזואלי ולמעשה משתמשים בתוצרי ה- Wireframe כבסיס לעבודתם. חבילת מוצרי חברת Adobe מספקת מגוון של כלי עיצוב מובילים כדוגמת Photoshop, Illustrator, Fireworks ו- InDesign. מוצרים כדוגמת Photoshop ו- Illustrator נועדו לעיצוב סטטי ובעוד שב- InDesign ו- Fireworks קיימת גם יכולת לייצר אינטרקציה – המחשת חוויית המשתמש (User Experience).

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

כלים לבניית אב-טיפוס (Prototype)

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

בקטגוריה זו ניתן להבחין בין כלים מובנים אשר משולבים במסגרת כלי פיתוח כדוגמת Microsoft Visual Studio או Adobe Dreamweaver לבין כלים עצמאיים כדוגמת Axure, Microsoft Expression ו- Adobe Flash Catalyst.

כלים נוספים

• כלים לבדיקת שימושיות (Usability Testing) מאפשרים הגדרת מבחנים, איסוף מידע וניתוח תוצאות. ניתן לציין כלים לבדיקת שימושיות בתנאי מעבדה כדוגמת Morae ו- Camtasia או שימושיות מרחוק (מומלץ לקרוא את המאמר של Kyle Soucy בנושא) של המשתמש כדוגמת Loop11, UserZoom או Keynote.
  
• כלים להקלטת פעולת המשתמש וניתוח מאפשרי מעקב אחר התנהגות המשתמש (או גולש) ברמת לחיצה על קישורים והקלדה וניתוח התוצאות הסקת מסקנות. ניתן לציין כלים כדוגמת Clicktale, Userfly, CrazyEgg, ClickDensity וכמובן Google Analytics הנפוץ.