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

יצירת אב טיפוס בפאוורפוינט – כה פשוט וכה אפקטיבי

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

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

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

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

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

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

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

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

לחצן עכבר ימני על כל אלמנט על המסך יאפשר להגדיר פעולת ניווט כאשר האופציה Last slide viewed מחקה למעשה את כפתור ה-Back. כברירת מחדל, כל לחיצת עכבר תקדם את המצגת לשקופית הבאה ובכדי לנטרל את האופציה הזאת ולהגביל את הניווט לכפתורים שאנו יוצרים כל מה שצריך לעשות הוא לבטל את האופציה On mouse click הנמצאת תחת Slide Show -> Slide Transition. האפשרויות הן די פשוטות אך כך גם אב הטיפוס. פאוורפוינט היא לא כלי לעיצוב ויזואלי כי אם כלי לעיצוב אינטראקציה, וככזה הוא מספק את הסחורה במקרים רבים.

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

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

5 תגובות על “יצירת אב טיפוס בפאוורפוינט – כה פשוט וכה אפקטיבי”

  1. 22/06/2008 בשעה 16:28 Yellow

    ממליץ לך גם לבדוק את הכלי הזה

    http://taubler.com/oversite/

  2. 22/06/2008 בשעה 17:17 אמיר דותן

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

  3. 25/06/2008 בשעה 9:08 טליה אבירן

    Post מענין, כרגיל. אהבתי מאוד גם את ה- post על פרסונות.
    אנחנו משתמשים ב- Visio, כדי לייצר את הסקיצות ולאחר מכן ב- PP כדי לבצע את ההדגמות.
    בסופו של יום, מה שחשוב הוא, לבצע אפיון מכוון משתמש (UCD).

  4. 27/06/2008 בשעה 15:33 דוד גלולה

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

  5. 28/06/2008 בשעה 19:13 אמיר דותן

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

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

הוספת תגובה