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

פיתוח אב טיפוס אינטראקטיבי עם iPlotz

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

בעוד Axure עולה 590 דולר, iPlotz עולה 75 דולר (גרסת דסקטופ). כמו כל תוכנת פרוטוטייפינג ב-iPlotz ישנה ספרייה של רכיבי ממשק מוכנים שהמשתמש גורר למסכים נפרדים וממפה את הממשק. לאחר מכן ניתן לקשר בין המסכים על ידי הוספת לאיזורים לחיצים. אחד ההבדלים המהותיים בין שתי התוכנות הוא ש-Axure מפיקה דפי HTML בעוד התוצר של iPlotz מעבר לקבצי תמונה הוא פלאש. היתרון הברור לדעתי הוא שעם HTML ניתן להוסיף אלמנטים כמו סרטי וידאו ולפתח את הדפים מעבר למה ש-Axure מציעה אם קיים הצורך.


לחצו להגדלה

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

כמו ב-Axure גם ב-iPlotz ניתן להגדיר היררכיית מסכים שמדמה את המבנה של אתר HTML. ניתן ליצור היררכייה מורכבת של דפים בתוך דפים במקום רצף לינארי שלא מאפשר לראות קבוצות של מסכים. חווית השימוש נחה וקל מאוד לערוך את המימדים והטקסט של רכיבים שונים. בנוסף לספריית ממשק אפליקציה ואתר אינטרנט ישנה גם ספרייה לרכיבי iPhone המכילה 27 אלמנטים.

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

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

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


לחצו להגדלה

ניתן להתקין גרסת נסיון של iPlotz ו-ForeUI ולהתרשם כיצד הן עובדות.

9 תגובות על “פיתוח אב טיפוס אינטראקטיבי עם iPlotz”

  1. 07/06/2009 בשעה 7:12 ברק דנין

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

    תהיתי אם ניסית/ם את ה-Pencil Project, כלי חינמי ל-prototyping (לא ניסיתי, נראה מבטיח):
    http://www.evolus.vn/Pencil/

    אני עובד בחודשים האחרונים עם FireWorks, שבא יחד עם ה-CS3 וגם CS4. הוא לא מאוד יציב, בעיות "Out of Memory" קורות לא מעט, ואין לו רכיבים מוכנים מראש (אפשר להכין ספריה לבד, או להוריד/לקנות ספריות מהרשת). הוא מכוון ביסודו למעצבים גרפיים יותר מאשר למעצבי אינטראקציה. מצד שני, הוא מאוד נוח בשימוש שהוא מאפשר ב-Master Pages, כלומר עמוד או שכבות שמגדירים תוכן שמשותף לכמה עמודים – איזורי ניווט, מסגרות לחלונות וכו'. אפשר גם די בקלות להגדיר בו קישורים בין דפים, וליצא את התוכן ל-PDF, HTML, פלאש, AIR ועוד כמה פורמטים. מעצב גראפי יכול להכנס לתוך ה-Wireframe שבנית ולצבוע אותו עם אותו הכלי, מה שעשוי לחסוך זמן בתהליך העיצוב.

    שווה בהקשר הזה להזכיר את שתי הסקירות האלה של כלי prototyping מהזמן האחרון:
    http://www.adaptivepath.com/blog/2009/03/24/rapid-prototyping-tools/

    http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/

    וגם את FlashCatalyst (לשעבר Thermo) של Adobe. הנה איזה סירטון הייפ של אדובי על הכלי:
    http://tv.adobe.com/#vi+f1532v1001

  2. 07/06/2009 בשעה 7:33 מורד שטרן

    נראה טוב מאד!

  3. 07/06/2009 בשעה 11:30 אמיר דותן

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

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

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

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

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

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

  4. 07/06/2009 בשעה 15:37 אורן ש.

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

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

    אגב, אם כבר רוצים שירטוטי "ויזיו" שנראים טוב, אני אישית מעדיף לעבוד עם Smart Draw שאיתה קל מאוד להוציא תוצרים אסטטיים ומרשימים.

  5. 07/06/2009 בשעה 15:51 אמיר דותן

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

    אורן, איך היית משווה את Smart Draw ל-Axure?

  6. 07/06/2009 בשעה 16:54 אורן ש.

    לדעתי Smart Draw לא ממש משתווה ל- Axure בתור כלי לתכנון ממשקים. אין בה את היכולת לתכנן את "עץ" המסכים וההיררכיה. היא הרבה יותר דומה לויזיו בגישה שלה- תכנון מסך אחד בכל פעם.
    היתרון שלה על ויזיו (וגם על axure) הוא בכך שהתוצר הסופי הרבה יותר אסטטי וניתן להגיע לעיצובים מרשימים בקלות יחסית ומבלי להפעיל את הפוטושופ.

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

    עוד תוכנה חביבה שיצא לי לבדוק נקראת denim (והיא גם חינמית). הייעוד שלה הוא בעיקר לעבודה על מחשבי טאבלט (עם מסך מגע) והיא ממירה שירבוטים שנעשים ב"יד חופשית" על המסך לאלמנטים אינטראקטיביים של אבטיפוס. יש בה גם גישה קצת שונה לתכנון המבנה של האתר. במקום תצוגת העץ והיררכיה הברורה, המטפורה היא של zoom פנימה והחוצה, כמו במפה, כאשר הדפים יכולים להיות "מפוזרים על משטח" (קצת כמו mind mapping) וניתן ליצור קישורים ביניהם על ידי מתיחת קווים. נחמד.

  7. 11/06/2009 בשעה 12:51 אמיר דותן

    תודה :-)

  8. 06/09/2009 בשעה 14:35 רן לירון

    הכלי המועדף עלי ל-Prototyping הוא PowerPoint.
    הוא מאפשר לייצר Prototypes במהירות,
    ברמות שונות של דיוק (fidelity) עם אופציה להדמיית אינטראקציה,
    נוח, פשוט, זמין ובקיצור -
    כלי מצוין.
    מאמר חביב שמסביר על PowerPoint prototyping:
    http://www.boxesandarrows.com/view/interactive

  9. 22/09/2009 בשעה 15:12 איריס

    אני עכשיו בוחנת 2 תוכנות חדשות: irise ומבית אדובי: Catalyst. אם מישהו שמע/מכיר/יודע, אשמח לקבל אינפוטים. תודה

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

הוספת תגובה