RSS לפוסטים RSS לתגובות 228 מאמרים ו- 1,989 תגובות עד כה מאז 2005

פיתוח אב טיפוס אינטראקטיבי עם Axure RP Pro 5.5

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

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

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

שתי הבעיות הגדולות של פאוורפוינט אשר בגללן בדקתי את גרסת ה-30 יום של Axure RP Pro 5.5 הן:
1. התוצר הסופי אינו אתר אינטרנט שניתן להציג בדפדפן. אומנם ניתן להציג מצגת בדפדפן אך היא לא תרגיש כמו אתר ורכיבי הממשק יהיו שרטוטים ותמונות ולא רכיבי ה-HTML הטבעיים שאנשים מכירים. זה עניין של חווית שימוש ומהירות עבודה מכיוון שלדמות תפריט drop down בפאוורפוינט זה לא כל כך פשוט. העובדה שהתוצר הסופי ב-Axure הם אוסף דפי HTML מאפשר לדעתי (למרות שלא ניסיתי) לפתח אותם בצורה ידנית לאחר מכן ולהוסיף להם פונקיונאליות כמו מפת גוגל או וידאו יו-טיוב. איך עושים את זה בפאוורפוינט?

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

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

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

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

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

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

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

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

16 תגובות על “פיתוח אב טיפוס אינטראקטיבי עם Axure RP Pro 5.5”

  1. 23/05/2009 בשעה 19:40 עומר מילויצקי

    הי אמיר,

    זאת התוכנה ה- 3 המיועדת לאיפיון ממשקי משתמש אינטראקטיביים שאני נתקל בה רק בסופ"ש הנוכחי, ואני חייב לציין שהיא נראת לי טובה במיוחד, אני כבר מחכה להוריד אותה מחר בעבודה. אין ספק שיצירת איפיוני מסכים עם תוכנות מהסוג הזה יכולות לחסוך משאבים אדירים בהמשך תהליך העבודה על פרויקטים ברשת, הן עבור המאפיין/מעצב/מתכנת וכמובן עבור הלקוח. כמי שעוסק באיפיון ממשקי משתמש ורגיל להציג איפיונים ללקוחות (שלרוב מהנהנים עם הראש אבל לא באמת מבינים את המשמעויות של אישור שלב האיפיון) תוכנות מהסוג הזה יכולות לחסוך כאב ראש גדול. פוסט שימושי ביותר!

  2. 23/05/2009 בשעה 22:26 ארז עדן

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

  3. 24/05/2009 בשעה 1:25 אמיר דותן

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

    אני מחכה לשמוע מה דעתך מחר עומר :-)

  4. 25/05/2009 בשעה 6:32 עומר מילויצקי

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

  5. 26/05/2009 בשעה 15:30 זיו פרי

    חבל שגם על התכנה הזו אצטרך לוותר מחמת מחסור חמור ב-windows :)

  6. 26/05/2009 בשעה 15:39 אמיר דותן

    זיו, בהקשר של מק ותרשימי מסך נתקלתי לא מעט
    ב- OmniGraffle

    http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palette

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

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

  9. 25/10/2010 בשעה 15:15 גידי פרקש

    מוטב מאוחר מאשר לעולם לא, אני מניח.

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

    היא גם זולה משמעותית. המחיר הוא כ- 100 דולרים (מעט פחות. אני לא זוכר במדויק).

  10. 25/10/2010 בשעה 15:32 אמיר דותן

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

  11. 25/10/2010 בשעה 16:03 גידי פרקש

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

    Cons:
    תמיכה זוועתית דרך המייל (טיפ: זה עובד כששולחים מייל מאיים. מדהים, לרגע חשבתי שזו חברה ישראלית);
    חלק מהרכיבים לא ממש מתוחכמים (לא ניתן להגדיר רוחב מדויק של עמודה בטבלה, לדוגמה);
    כמות הרכיבים נאה אך לא מדהימה ולא ניתן ליצור רכיבים חכמים לבד (הצעתי להם ללמוד את הקוד, לבנות דברים בעצמי ולשתף. כבר הזכרתי את התמיכה, נכון?). אבל כן ניתן ליצור רכיבים (על-ידי תמונות ו/או הדבקה של רכיבים ואייקונים שונים ביחד) ואפילו לשמור אותם לעתיד. כמו שציינתי, הם לא חכמים, ז"א, היא אפשר לשנות את ההגדרות שלהם כלל.

    Pros:
    ממשק פשוט. לא הייתי צריך לחפש שום מדריך בשביל להתחיל (ונכון, אני מעט IT-oriented אז זו לא ממש חוכמה);
    יכולות קינפוג לא רעות בכלל (למי שממש חולה על דיוק ויישור, יש לא מעט כלים מובנים ליישום);
    יכולות שיתוף רכיבים באינטרנט (אבל שוב, רכיבים לא חכמים – תמונות של רכיבים, אם לדייק);
    גישת אופליין מלאה (זה היה ועדיין אחד הדברים החשובים שיש למערכת מסוג כזה להציע, בפרט למי שמבלה המון בטיסות וזה זמן מצוין לשרוף על אפיונים, בלי שאף אחד מציק לך בטלפון או רוצה לשאול שאלות);
    יצוא לפורמטים מקובלים (תמונה, PDF, Word וכו');
    הכנת פורמטים קבועים (ממשק מאסטר של האפליקציה שלכם, לדוגמה);
    שדרוגים בקצב מסחרר (כל כמה ימים יש תיקוני באגים ותוספות קטנות (שוב, עד שמצליחים לתפוס אותם ולבקש תמיכה לוקח זמן, אבל אני מניח שאני לא הלקוח היחיד שנאלץ להרים את הקול או המקלדת ולכן השדרוגים התכופים);
    שיתוף גם למי שאינו משתמש משלם;
    בניית מסכים אינטרקטיביים, ממש עד רמת שדות בחירה מרשימה בלייב וכו'.
    תמיכה שלי :-) באמת, מי שרוצה מוזמן לשאול שאלות. למצוא אותי לא קשה, אני מניח, בעידן האינטרנט.

  12. 25/10/2010 בשעה 16:09 אמיר דותן

    תודה רבה!! :)

  13. 09/11/2010 בשעה 14:41 מורן

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

  14. 09/11/2010 בשעה 16:16 גידי פרקש

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

  15. 10/11/2010 בשעה 11:00 מורן

    תודה גידי. אכן נסתר, אבל מצאתי :)
    ממשחק קצר עם mockflow זה מרגיש כאילו התוצרים שלו מאד מזכירים את של balsamiq. גם הוא כלי זול יחסית (בערך 80$ לרשיון), מאד מאד נוח לשימוש, אפשר דיי מהר לבנות flow של מסכים, יש לו מבחר לא רע בכלל של קומפוננטות ועידכונים שבועיים של הגרסא.
    החיסרון העיקרי שלו הוא שאין לו מאסטרים. כל דבר משוכפל על הרבה מסכים וכל שינוי צריך לשכפל גם. זה מייגע כשיש כמות גדולה של מסכים.
    מה שאהבתי מאד ב axure זה את היכולת לבנות ממש html אינטראקטיבי שאני יכולה גם להוסיף לו יכולות ב javascript. זה משרת את הצורך של בדיקות שמישות של הממשק לפני פיתוח שלו, כך שאפשר יהיה לעשות שינויים בקלות ובעלות נמוכה…

  16. 10/11/2010 בשעה 13:49 גידי פרקש

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

    http://www.linkedin.com/e/-i27s86-gg9boc73-6c/vaq/14841092/63459/25862490/view_disc/

    אני לא בטוח שיש שם חידושים מדהימים למי שכבר חפר את הרשת בחיפושים (כמוני), אבל למקרה שזה משמש מישהו. תיהנו.

RSS לתגובות לפוסט זה

הוספת תגובה