מאמר

TOOLBOX
רותם בינהיים

|

11 הכלים שכל מאפיין חוויית משתמש חייב להכיר – סקירה

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

 

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

 

 UXV Certification Program Photo6

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

 

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

 

 

Wireframe (תרשימי רשת, שילוד)
תרשימי Wireframe (תרשימי רשת או שילוד בעברית יפה) הם תרשימים סטאטיים בסיסיים, מהירים וזולים, המייצגים שלושה דברים על הממשק שלנו:
1. איזורי התוכן בממשק (ה-מה?)
2. מבנה הצגת המידע (ה-איפה?)
3. הדמיה בסיסית של האינטראקציה של המשתמש בממשק (ה-איך?)

 

 

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

 

 

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

 

 

Prototype (אב טיפוס)
אמצעי להצגת המבנה הסופי כ”אב טיפוס” ועליו לאפשר למשתמש:
1. אינטראקציה עם הממשק וגישה לתוכן
2. לבצע בדיקות על האינטראקציה העיקרית בדומה למוצר הסופי

 

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

 

11 כלי האפיון שאתם חייבים להכיר

 

InVision 

לאתר הכלי

InVision

 

Invision הוא כלי המאפשר לקחת תרשימים אשר נוצרו מחוץ לכלי וליצור מהם Clickable Mockup. מדמה מסכים שניתן להפעלה. 

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

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

 

 

תכונות

קלות למידה:  קלי קלות

כמה זה עולה: פרויקט ראשון בחינם. 3 פרויקטים – 13$ לחודש, 5 פרויקטים – 22$ לחודש

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

שיתוף צוות/לקוח: אפשרות שיתוף בזמן אמת או ב-Offline וממשק מאד נוח ומרשים לקבלת הערות ושיחה על אלמנטים באפיון

תמיכה במכשירים: אפשרות לאב טיפוס יעודי ל-Web, iPhone, Android ו-iPad

 

 

יתרונות

– אינטואיטיבי וקל ללימוד

– ממשק משתמש חווייתי מצוין

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

– תמיכה בגלילה הטבעית של ה-Web כולל אפשרות לדמות גלילה אוטומטית בלחיצה על כפתור במסך (מותאם לאפיון דפי One Pager)

– התמיכה במובייל מאפשרת להציג מעברי אנימציה

– הממשק למובייל הופך את התוצר לאייקון שיושב על המכשיר עצמו – כלי מצוין לדמות אפליקציית Native אמיתית

 

 

חסרונות

– את המסכים צריך לייצר בכלי אחר ולייבא כתמונות

– אין אפשרות להוספת אנימציה לאלמנטים בודדים בדף או אפקטים מלבד קישורים בין המסכים השונים

– להצגת אינטראקציות פרטניות ומורכבות תצטרכו כנראה למצוא כלי אחר

 

 

Axure

לאתר הכלי

Axure

 

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

 

 

תכונות

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

כמה זה עולה: 289$ לרשיון רגיל. אתם כנראה לא צריכים יותר מזה

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

שיתוף צוות/לקוח: השיתוף נעשה דרך יצוא ל-HTML. לעבודת Online בצוות תצטרכו לשדרג לחבילת ה-Pro במחיר 589$

תמיכה במכשירים: אפשרות לאב טיפוס יעודי ל-Web, iPhone, Android ו-iPad

 

 

יתרונות

– חי ונראה כמו אתר ומוצג על דפדפן ב HTML

– מפרט פונקציונאלי מרשים למדי – שליטה ברמות הגבוהות ביותר של אינטראקציות 

– שפע של אובייקטים ופקדים מוכנים בספריות

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

– תמיכה מלאה בחיווי מבוסס אינטראקציה

– מותאם לאפיון ממשקים מורכבים

– גמיש ויכול לשמש אב טיפוס לכל פלטפורמה דיגיטלית

– שפע של סרטוני הדרכה ברשת ובאתר שלהם

 

 

חסרונות

– לא קל ללמידה עבור משתמש בפעם ראשונה (וכנראה גם בפעם השנייה)

– זמן רב ליצירת אב הטיפוס ראשון

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

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

 

 

Proto.io
לאתר הכלי

PROTOIO

 

תכונות

כמה זה עולה? לאחר תקופת ניסיון קצרה, תתבקשו לשלם החל מ 24$

קלות למידה: בינוני. למשתמש מתחיל עקומת הלמידה די תלולה. מומלץ להעזר בהדרכות הוידאו הקיימות

יכולת להידמות למוצר הסופי: כן, בעיקר לממשקי מובייל

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

תמיכה במכשירים: WEB, iPhone, Android Phone, iPad, windows phone , ניתן לייצר גם לפי הצורך ברזולוציות הרצויות לנו

 

 

יתרונות

– אפשרות להוסיף אנימציה לאלמנטים בודדים ואפקטי מעבר לקישורים

– תמיכה והדרכה זמינה וברורה

– סימולציה אפקטיבית ואינטראקציה באיכות גבוהה.

– תמיכה בחיווי מבוסס אינטראקציה

– תצוגה פשוטה של ​​הMockup על דפדפן, אפשרות לצפייה גם בסמארטפונים

 

 

חסרונות

– לא קל ללמידה עבור משתמש בפעם ראשונה

– זמן רב ליצירת אב הטיפוס ראשון

– יש צורך לבנות את המסכים באמצעות הכלים המוצעים וקשה להשתמש בתבניות כנקודת התחלה

– יש מספר בעיות ביצירת אנימציות שלא תמיד עובדות באופן עקבי

 

 

 

indigo studio

לאתר הכלי

 INDIGO

 

תכונות

כמה זה עולה? פרויקט ראשון – חינם, יותר מכך – 495$

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

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

אפשרויות שיתוף בצוות: קיימת אפשרות באינטרנט להערות ומתן משובים

תמיכה במכשירים: כולם

 

 

יתרונות

– אלטרנטיבה מצוינת לAXURE  למי שרוצה פחות קוד ויותר תמיכה גרפית

– ממשק נקי, ברור ונעים

– אפשר לשתף על השרת שלהם ואפשר לייצא את הפרויקט לשרת שלנו

– חלוקת הממשק לשני מצבי עבודה אחד ניהול Storyboard והשני המסך

– נותן תחושה של מוצר אמיתי באמצעות חיווים ואנימציות מוכרות

– ניתן להגדיר משכי זמן במעבר בין המסכים

– ניתן לייבא Sketches וליצר עליהם Hotspots ליצירת אינטראקציה

– אם ממש רוצים, יש גם אפשרות לערוך את הקוד

 

 

חסרונות

– ההסברים והתמיכה קצת לוקים בחסר

– לא ניתן לשלוח prototype למובייל ישירות כהודעה למכשיר הנייד, אלא כלינק בלבד

– מאגר האלמנטים מעט נראה דל לעומת המתחרים

 

 

UXPin

לאתר הכלי

UXPIN

 

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

 

תכונות

כמה זה עולה?  לאחר תקופת נסיון קצרה, תתבקשו לשלם 15$ לכל יוזר לחודש

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

יכולת להידמות למוצר הסופי: כן

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

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

 

 

יתרונות

– ממשק ידידותי ונעים

– תבניות טובות גם למוצרים משלימים (לדוגמא תבנית לפרסונות)

– מהיר וקל לתפעול

– נותן תחושה של מוצר אמיתי באמצעות חיווים ואנימציות מוכרות

– שיתוף ותצוגה פשוטה של ​​המוקאפ

– מאפשר עבודה משותפת ומתן הערות ומשוב על גבי הפרויקט

 

 

חסרונות

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

 

 

PowerPoint  

PPT

 

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

 

תכונות

כמה זה עולה? באופן פרטני די הרבה, כי דורש את כל חבילת ה-Office, אבל במרבית המחשבים והארגונים כבר יש

קלות למידה:  קל פשוט ואפקטיבי, למרות שכשצריך להפיק תוצרים ברמה גבוהה, צריך להכיר את הכלי ממש טוב

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

יכולת להידמות למוצר הסופי ברמה הטכנית:  נמוכה מאד. מדובר במצגת בסופו של דבר

אפשרויות שיתוף בצוות: רק בפורמט על ענן של Office

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

 

 

יתרונות

– אם יש לכם Office, אז כבר יש לכם אותו בחינם וזמין בכל מחשב (כמובן גם בצד הלקוח)

– תפעול מהיר ואינטואיטיבי בהוספת מסכים, יצירת אלמנטים ויצירת קישורים

– לא דורש למידה מיוחדת

– סביבת עריכה גרפית מתקדמת בעלת תכונות קיימות ובסיסיות ליצירת Prototype  (תכונות אלה כוללות צורות בסיסיות, סגנונות חזותיים כמו מילוי, צל, וכו’, מעברי שקופיות, קיבוץ אלמנטים, יצירת מאסטרים, וקישורים)

– יצירה מהירה מאוד של Mockup (אפשר לייצר Mockup מרשים מאוד ב 30 דק’

– קיימים תוספים בתשלום (PowerMockup) שניתן להתקין על גבי התוכנה לקיצור תהליכים

 

 

חסרונות

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

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

– כל המסכים חייבים להיות בגודל אחיד

 

 

PENCIL

 

כמה כלים נוספים שכדאי להכיר

 

Balsamiq

לאתר הכלי

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

 

כמה זה עולה? לאחר תקופת ניסיון קצרה, תתבקשו לשלם 79$ לרישיון.

 

 

MockFlow

אתר הכלי

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

 

כמה זה עולה? חבילה בסיסית – חופשי לגמרי עם 10 MB אחסון בענן.

 

 

iPlotz

לאתר הכלי

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

 

כמה זה עולה? פרויקט ראשון של עד 5 מסכים – חינם. מעבר לכך – החל מ-15$ לחודש.

 

 

POP

לאתר האפליקציה

אחד הדברים הכי טובים שקרו למאפייני חוויית משתמש מאז שהתחום הזה הפך למקצוע. POP היא אפליקציית מובייל עבור אנדרואיד או iOS, המאפשרת לייבא את העיצובים או הסקצ’ים שלנו בפורמט תמונה או פשוט לצלם אותם ובאמצעות הגדרות Hot Spots ליצר דמוי ממשק לחיץ, כולל תמיכה במחוות מובייל מקובלות ואנימציות. האפליקציה פשוטה להפליא ויודעת אוטומטית לשפר את הצבעוניות והניגודיות בתמונות כך שהצילומים יראו אחידים.

 

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

 

 

עפרון ודף

לאתר הכלי

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

 

כמה זה עולה? 3-15 ₪ לעיפרון ודף בחנות כלי כתיבה הקרובה לביתכם (כדאי להוסיף לזה גם מחק). המקצוענים יוכלו למצוא עפרונות מכניים מקצועיים גם בסכומים של 120 ₪ ויותר, אבל באמת שאין צורך.

 

 

 

אולי יעניין אותך גם:

7 תגובות

הוסף תגובה

  1. ניקו

    מאמר מעולה.
    איזה כיף לראות את תצלום המסך Axure שלי במהלך עבודתי על ויירפריים של אתר FASHION FINDER מתנוסס לו פה.

  2. ליאור

    אחלה מאמר.
    אני משתמש בכלי הזה לאפיון זריז ולא מחייב: https://wireframe.cc/

  3. ריקי

    למי שמאפיין באילוסטרטור – זה תוסף מעולה (וישראלי!) ליצירת ווירפריימס רספונסיביים בקלות ומהירות:
    http://wuwacorp.com/wiremagic/

  4. גלעד בר-לב

    גלעד

    סקירה מעולה. תודה! בסוף ציינת את הדף והעפרון… יש אנשים שמתעלמים מהשלב הזה. לפעמים זה בדיוק מה שהפרוייקט צריך, למרות שזה נשמע פרימיטיבי P-:

  5. יובל

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

  6. שמואל

    מאמר מעולה.

    אני משתמש באינדיזיין, עם התוספות של http://unify.eightshapes.com/ זה ממש כיף.

    ואגב, אהבתי את הלינק לאתר הכלי של העיפרון. (כמה קרביץ שלימו על הגרילה הזו?).