1. ‫בּאבּוּס‬
‫אפליקציית אייפון לשימוש בתחבורה ציבורית‬
‫סיכום פרויקט במסגרת קורס עיצוב חוויית משתמש לסמארטפון‬
‫בהנחיית ברק דנין ועידוא שביט. יוני 1102‬
‫כל הזכויות שמורות ליניב שריג © 1102‬
‫‪www.35east.com‬‬
‫אפיון: יניב שריג‬

2. ‫שלבי עבודה‬
‫« מחקר משתמשים ומחקר שוק‬
‫« רשימת יכולות‬
‫« פרסונות‬
‫« סיפורי משתמש‬
‫« סקיצות מהירות למסך פתיחה )‪(6up‬‬
‫« ארכיטקטורת מידע‬
‫« עיצוב מסכים שלדיים‬
‫כל הזכויות שמורות ליניב שריג © 1102‬
‫‪www.35east.com‬‬
‫« בדיקות שמישות‬
‫‪cc flickr photo mgarbowski‬‬

3. ‫« ביצוע מחקר משתמשים ומחקר שוק‬
‫מחקר השוק כלל סקירה של אפליקציות מהארץ ומהעולם, שמטרתה להבין את מגוון הפתרונות הקיימים בשוק. הניתוח כלל‬
‫הצבעה על חוזקים וחולשות בכל אחד מהפתרונות, והתחקות אחר מניעים מאחורי החלטות בעיצוב האפליקציה.‬
‫כל הזכויות שמורות ליניב שריג © 1102‬

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

5. ‫יערה כחלון‬
‫תלמידת כיתה י"א‬
‫סיפור רקע‬
‫גרה ברמת השרון עם ההורים, תלמידה בבית ספר תלמה ילין לאומנויות בגבעתיים. מסתובבת באופן קבוע עם אייפון,‬
‫מחברת סקיצות ומשקפי שמש )גם בחורף(.‬
‫שימוש בתחבורה ציבורית‬
‫קמה בבוקר ב 51:70. הולכת ברגל לתחנת האוטובוס )5 דקות( בכדי לתפוס את האוטובוס של 04:70 -אוטובוס דן-קו 57‬
‫)"אם אני מפספסת אותו יש לי עוד אחד ב 55:70 ואחרי זה עוד אחד לא זוכרת מתי"(. תמיד נוסעת לבד בבוקר, שמה‬
‫אוזניות ושוקעת במושב. נוסעת 53 דק' )"לפעמים שעה – תלוי בפקקים"( לבית הספר. מסיימת את הלימודים כל יום‬
‫בשעה אחרת. הולכת לתחנה ליד בית הספר ומחכה לאוטובוס חזרה. לפעמים 01 דקות, לפעמים 02 דקות. הנסיעה‬
‫הביתה יותר קצרה. אחר הצהריים אצל חברה )"יש לי חברות בתל אביב, ברמת גן ואפילו אחת בעפולה"(, מתחילה עם‬
‫אותו קו כמעט תמיד, לפעמים צריכה להחליף קו בקניון או בתחנה מרכזית. משתמשת בכרטיסיה של 01 נסיעות )"זה הכי‬
‫משתלם לי"(‬
‫קבלת מידע‬
‫בנסיעות ארוכות )עפולה( אני מתכננת באינטרנט בבית זמני אוטובוסים ותחנות. בנסיעה אני מבקשת מהנהג שיגיד לי‬
‫תכל'ס, אין לי ברירה.‬
‫איפה לרדת )"אני צריכה להזכיר לו כי הוא תמיד שוכח"(. אני גם מתקשרת למודיעין בטלפון )"יש לי אותם במועדפים"(‬ ‫אין לי רכב ויש לי מלא‬
‫לברר על קווים או זמנים, לפעמים אפילו כשאני בתחנה עצמה.‬
‫עיסוקים. אצלי מודיעין‬
‫תסכולים‬ ‫דן כבר במספרים‬
‫אני לא מבינה למה אין מודיעין אחד לכל חברות האוטובוסים. למצוא קו זה כמו לעשות תשבץ. לפעמים גם במודיעין לא‬
‫יודעים מסלולים וזמנים. גם אף פעם אין לי את כל המידע יחד. חוץ מזה, קצת מטריף אותי לשבת בתחנה ולא לדעת אם‬ ‫המועדפים בטלפון‬
‫האוטובוס עבר או לא. זה קצת מיושן העסק הזה.‬
‫יעדים לשימוש במוצר‬
‫פעמיים ביום‬ ‫תדירות‬
‫לקבל מידע מהימן ומהיר על תכנון נסיעה ועל זמני אוטובוסים בפועל.‬
‫03 דק' לכל כיוון‬ ‫זמן נסיעה‬
‫מוטיבציה‬
‫הרצון להיות יותר יעילה עם הזמן שלי, לא לפספס את האוטובוס. הצורך לתכנן מסלולי נסיעה ליעדים שאני לא מכירה.‬ ‫«פרסונות‬
‫החוויה האידיאלית‬
‫הפרסונה מסכמת את המידע שנאסף במחקר המשתמשים. המידע מוצג בצורת דמות ארכיטיפית, בעלת צרכים ספציפיים, אשר‬ ‫21 דק'‬ ‫זמן המתנה‬
‫תשלום תבנית כרטיסיהמסוימת בתחבורה הציבורית ובטלפון אני עולה. איפה אני רוצה לרדת ומתי, ופשוט ייחוסתשובה: איזה קווים אני צריכה לקחת )"לא‬
‫הייתי רוצה להגיד איפה החכם, הפרסונה משמשת כנקודת לקבל בצמתי החלטה שונים בהמשך‬ ‫שימוש‬ ‫לה‬
‫אחד והעיצוב. בפרויקט מעניין אותי של איזה חברה הםבפרסונה ראשית רוצה להגיע לתחנה ולדעת כמה זמן אני צריכה לחכות ומה לעשות‬
‫זה הוחלט לעשות שימוש "(, ובאיזה שעות. אני אחת.‬ ‫תהליך הפיתוח או שניים‬
‫קווים‬
‫כל הזכויות שמורות ליניב שריג © 1102‬
‫אם פיספסתי את האוטובוס שלי.‬
‫בטלפון‬ ‫מודיעין‬
‫יניב שריג © 1102‬ ‫אייפון‬ ‫סמארטפון‬

6. ‫« רשימת יכולות‬
‫בתהליך של סיעור מוחות קבוצתי נקבעה רשימת היכולות האפשריות לאפליקציה.‬
‫כל הזכויות שמורות ליניב שריג © 1102‬
‫יניב שריג © 1102‬

7. ‫יערה כחלון תסריטי משתמש‬
‫קמתי היום באיחור. אני יוצאת עכשיו מהבית ברגל לכיוון התחנה. פותחת את האפליקציה בכדי לראות מתי מגיע‬
‫קו 71 לתחנה. עוד 2 דק'. כדאי שאמהר.‬
‫1‬
‫אני בטלפון עם רונה. היא מזמינה אותי אליה מחר בבוקר לראשון לציון לשופינג. קבענו בקניון, רונה שולחת לי‬
‫את המיקום של הקניון דרך גוגל. אני משתמשת בלינק ששולח אותי לאפליקציה שם אני רואה איזה אוטובוסים‬
‫אני צריכה לקחת כדי להגיע בשעה שקבענו. אני שומרת את התוכנית למחר וקובעת תזכורת ליציאה מהבית, 51‬
‫דק לפני הגעת האוטובוס.‬
‫2‬
‫קמתי באיחור. אני יוצאת רק עכשיו מהבית לכיוון התחנה. פותחת את האפליקציה לראות מתי מגיע האוטובוס‬
‫שלי לתחנה. מבינה שאני מפספסת אותו. רואה שהאוטובוס הבא רק עוד חצי שעה. בודקת אלטרנטיבות‬
‫לתחנות אחרות באזור או לקווים אחרים. מוצאת קו אחר שמגיע ממש עכשיו. אבל תחנת הירידה קצת רחוקה‬ ‫3‬
‫מהקניון. מחליטה לקחת אותו.‬
‫הגעתי לתחנה, האוטובוס מגיע עוד 2 דק'. אני קונה בינתיים כרטיס דרך הטלפון. עולה לאוטובוס, מציגה את‬
‫הקוד שעל המסך לקורא הכרטיסים באוטובוס ומקבלת קבלה. מתיישבת במושב ושומעת מוסיקה.‬ ‫4‬
‫אני בנסיעה באוטובוס, נכנסת לאפליקציה כדי לשתף את רונה במיקום שלי שתראה איפה אני בדיוק ומתי אני‬
‫אני משתמשת בלינק‬ ‫מגיעה לתחנה של הקניון. אני מקבלת תזכורת שאני צריכה לרדת בתחנה הבאה.‬
‫5‬
‫ששולח אותי לאפליקציה‬ ‫יצאתי מהקניון מדלת אחרת ועכשיו כבר ערב. אין לי מושג איפה התחנה שירדתי ממנה וגם רונה לא יודעת. אני‬
‫שם אני רואה איזה‬ ‫פותחת את האפליקציה להבין לאן אני צריכה ללכת. האפליקציה זוכרת את הקו האחרון שנסעתי בו ומראה לי‬
‫6‬
‫את הכיוון והמרחק לתחנה הקרובה ביותר, כמו גם מתי מגיע האוטובוס הקרוב. אני מקבלת הצעה לרכישת‬
‫אוטובוסים אני צריכה‬ ‫כרטיס ומקבלת אותה.‬
‫לקחת כדי להגיע בשעה‬
‫אני בבית. שבת. מחר אני צריכה להגיע לתל אביב למרכז השירות של אורנג'. אני לא יודעת את הכתובת.‬
‫שקבענו..‬ ‫פותחת את אתר אורנג' ומעבירה את הכתובת לאפליקציה. האפליקציה מזהה את הכתובת וטוענת שאין קווים‬
‫זמינים. אני סוגרת את האפליקציה ונכנסת לאתר של אורנג' לראות אם יש שם קוי אוטובוס שמגיעים למרכז‬
‫השירות‬
‫7‬
‫תסריטי אני באוטובוס, כיוונתי תזכורת לירידה מהאוטובוס תחנה אחת לפני היעד, נרדמתי והאפליקציה איבדה אות‬
‫משתמש‬ ‫«‬
‫ג'י.פי.אס. עברתי את התחנה בהרבה. עכשיו אני יורדת בתחנה אחרת ואצטרך לקחת אוטובוס חזרה.‬
‫סיפורים‬ ‫תסריטי אני יוצאת מהבית. בודקת תרחישיםמתי מגיע האוטובוס. עוד 7 דק'. אני עוצרתשימוש באפליקציה. התסריטים הם‬
‫שימוש נועדו לתאר באפליקציה בהם עושה הפרסונה הראשית לקנות לחמניה ושוקו במכולת.‬
‫או בכישלון.‬ ‫קצרים של משפטלתחנה, רואה המתארים התרחשות בזמן ובמקום מסוימים.. הסיפור יכול להסתיים בהצלחה‬
‫יוצאת שוב או שניים עוד 5 דק'. מגיעה לתחנה ומסתבר לי שהאוטובוס עבר כבר מסתבר שהטלפון שלי‬
‫איבד קישוריות לאינטרנט והמידע האחרון שהתקבל קפא על המסך.‬
‫התסריטים ממקדים את רשימת היכולות של האפליקציה תוך מתן דגש על סדר עדיפויות ובחינת מקרי קצה.‬
‫כל הזכויות שמורות ליניב שריג © 1102‬

8. ‫«סקיצות מהירות‬
‫סקיצות שונות למסך הפתיחה המציגות דגשים שונים באפליקציה. המטרה היא לעבוד לרוחב ולהציג רעיונות שונים‬
‫הנותנים מענה לתסריטי שימוש שונים. הסקיצות מאפשרות לבחון בצורה מהירה את היתרונות והחסרונות של כל‬
‫כל הזכויות שמורות ליניב שריג © 1102‬
‫פתרון ולהחליט על כיוון ושפה גרפית לפני כניסה לעיצוב המסכים בפועל.‬

9. ‫מאשר שימוש‬ ‫לא‬
‫הפעלת‬
‫במיקום נוכחי ?‬
‫אפליקציה‬
‫)פעם אחת(‬
‫כן‬
‫לא‬
‫יש נסיעה‬
‫פעילה?‬
‫מידע זמן אמת על‬ ‫כן‬ ‫מסך תכנון‬
‫שינוי תחנה‬
‫מועדפים‬ ‫תחנה‬ ‫הגדרות אפליקציה‬ ‫נסיעה‬
‫חיפוש / מפה‬
‫קרובה/מועדפת‬ ‫טקסט/מפה‬
‫מידע על‬ ‫בחירת מוצא,‬
‫קנה כרטיס‬
‫לא‬ ‫מיקום וזמן‬ ‫יעד, זמן‬
‫התחנה‬ ‫הגעה משוער‬
‫רלוונטית?‬ ‫ליעד‬
‫תוצאות‬
‫בחירת מספר‬ ‫חיפוש‬
‫כרטיסים‬ ‫כן‬
‫הוראות הגעה‬
‫בחירת קו‬ ‫צא לדרך!‬
‫לתחנה‬
‫תצוגת כרטיס‬
‫)קוד ‪(QR‬‬
‫שמירה‬
‫שיתוף נסיעה‬
‫למועדפים‬
‫« תרשים זרימה‬
‫תרשים זרימה המתאר את המסכים השונים במערכת בכל רגע נתון, את אפשרויות הבחירה. על בסיס התרשים ניתן‬
‫לאמוד את היקף העבודה, את סוג המסכים הנדרש ואף את האלמנטים השונים שיכללו במסכים.‬
‫כל הזכויות שמורות ליניב שריג © 1102‬

10. ‫« אפיון מסכים שלדיים - סקיצות‬
‫סקיצות שונות של אלמנטים באפליקציה: חיפוש, מיון, תצוגת רשימה, דפדוף בין רשומות וכד'. הסקיצות עוזרות‬
‫לבחון את סידור האלמנטים על המסך, את יצירת ההיררכיה בין האלמנטים השונים ואת השפה לבניית האפיון.‬
‫כל הזכויות שמורות ליניב שריג © 1102‬

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

12. ‫« אפיון מסכים שלדיים‬
‫מסך הכניסה לאפליקציה –מציג רשימה של אוטובוסים המגיעים לתחנה הקרובה. הרשימה ממוינת לפי זמן ההגעה‬
‫לתחנה. ניתן לשנות את התחנה המוצגת באופן ידני או דרך הגדרות המערכת. המסך מציג גם זמן הליכה וכיוון‬
‫ממיקום נוכחי לתחנת המוצא. ממסך זה ניתן לבחור קו מסוים בכדי לראות פרטים על מסלול הקו ועל תחנות‬
‫כל הזכויות שמורות ליניב שריג © 1102‬ ‫ספציפיות במסלול.‬

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

14. ‫« אפיון מסכים שלדיים‬
‫מסך רכישת כרטיס – פירוט הקו, תחנת המוצא והיעד וזמן הנסיעה המשוער.‬
‫ממסך זה ניתן לבחור את מספר הכרטיסים ולהמשיך לביצוע רכישת כרטיס. הכרטיס מוצג כקוד ‪ QR‬אותו צריך להציג‬
‫כל הזכויות שמורות ליניב שריג © 1102‬
‫בעלייה לאוטובוס .‬

15. ‫« אפיון מסכים שלדיים‬
‫מסך תכנון נסיעה – מסך זה מאפשר תכנון נסיעה מנקודה א' ל-ב' בזמן מסוים. תכנון הנסיעה יכול להתבצע באופן‬
‫טקסטואלי או על-גבי מפה. שדות החיפוש מאפשרים הכנסת כתובת באופן ידני, מספר הכתובות של הטלפון, נקודות‬
‫כל הזכויות שמורות ליניב שריג © 1102‬
‫עניין. בנוסף, מציג מסך זה חיפושים אחרונים שבוצעו במערכת.‬

16. ‫« אפיון מסכים שלדיים‬
‫מסך הצגת תוצאות חיפוש – מסך זה מציג תוצאות של חיפוש קווים המגיעים מנקודה א' לנקודה ב' בזמן נתון.‬
‫ניתן למיין את התוצאות על-פי שעת יציאה או הגעה ליעד, משך נסיעה ומרחק מתחנת מוצא/יעד. הטבלה מציגה‬
‫באופן גרפי וטקסטואלי את זמן היציאה, משך הנסיעה, מספר הקו, החלפות קווים, זמן הגעה ליעד.‬
‫פעולות נוספות מאפשרות בחירת אחת מהתוצאות, ניווט רגלי לתחנה, שמירת נסיעה למועד מאוחר יותר ושיתוף‬
‫כל הזכויות שמורות ליניב שריג © 1102‬
‫התוצאות.‬

17. ‫« בדיקות שמישות‬
‫בדיקת השמישות נועדה לזהות האם תפעול של תסריטי השימוש המרכזיים נעשה בצורה נכונה על-ידי משתמשים.‬
‫כל המסכים נסגרו כקבצי ‪ ,html‬הועלו לשרת ונשמרו על מכשיר האייפון כאפליקציה לכל דבר.‬
‫בעזרת תוכנת לכידת מסך, הוקלטו בדיקת שמישות אמיתית. הבדיקות העלו נקודות רבות לשיפור החל מטרמינולוגיה,‬
‫צורת כפתורים, מיקום כפתורים, זרימת המידע במערכת וכד'‬
‫כל הזכויות שמורות. © 1102- ‪www.35east.com‬‬

18. ‫« בדיקות שמישות‬
‫תסריט 1: "את יוצאת מהבית לכיוון תחנת האוטובוס. קו 71 מגיע עוד 2 דק'. את כבר לא תספיקי להגיע. בדקי‬
‫באפליקציה מתי מגיע קו 71 הבא לתחנה"‬
‫כל הזכויות שמורות. © 1102- ‪www.35east.com‬‬

19. ‫בּאבּוּס‬
‫אפליקציית אייפון לשימוש בתחבורה ציבורית‬
‫סיכום פרוייקט במסגרת קורס עיצוב חוויית משתמש לסמארטפון – יולי 1102‬
‫ברק דנין ועידוא שביט‬
‫אפיון: יניב שריג‬
‫ניתן להוריד את הפרוטוטייפ ולהתנסות באפליקציה כאן: ‪http://www.35east.com/sandbox/iprototype/babus‬‬
‫)יש לפתוח את הלינק דרך מכשיר אייפון 4 בספארי(‬
‫או ישירות מכאן:‬
‫צור קשר:‬
‫כל הזכויות שמורות. © 1102 ‪www.35east.com‬‬
‫‪cc flickr photo mgarbowski‬‬