5 טיפים לאימוץ גישה מותאמת למכשירים בפיתוח למידה מתוקשבת

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

מה זה פתרון למידה מותאם למכשירים?

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

חווית צפיה מותאמת זו מושגת על ידי:

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

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

מהם היתרונות של גרסת Adapt אחת לפיתוח למידה מתוקשבת?

  • הנגשת תוכן למכשירים מרובים - פלטפורמת Adapt משתמש בטכנולוגיות JavaScript, CSS3 וב-HTML5 שתואמות לדפדפנים שונים ולמערכות הפעלה שונות. גרסה אחת של התוצר תעבוד היטב בכל המכשירים הנתמכים, כך שאין צורך ליצור גרסה למחשב וגרסאות אפליקציות מרובות כדי לתת מענה למערכות הפעלה של מכשירים שונים.

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

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

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

טיפ 1: זה שאתם יכולים, לא אומר שאתם חייבים

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

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

טיפ 2: שלבו עמודים נגללים בלב עיצוב הפתרון שלכם

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

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

  • הלומדים שלכם כבר עושים זאת
    בקרו בכל אתר עדכני וגלו שגלילה אנכית היא כמעט בטוח חלק בעיצוב האתר. המשתמשים מבינים מה מצופה מהם והם גוללים במורד העמוד כדי לקרוא את התוכן. משוב שקיבלנו ממשתמשי פיילוטים של עיצובים נגללים שעשינו תומך בקביעה שהמשתמשים 'מבינים את זה'. למעשה, הם העדיפו את הגישה הזו על פני התבניות המסורתיות יותר של לומדות. אין ספק שאנו רוצים להציג את הלמידה בדרכים שהקהל שלנו מרגיש נוח איתן, לא?
  • הכינו את הלמידה שלכם לכל מכשיר
    יותר ויותר לומדים ניגשים לתוכן ממגוון רחב של מכשירים כגון טאבלטים וסמארטפונים וכל אחד ממכשירים אלו יציג את העמודים בצורה שונה. לא קשה להבין שאם אתם ניגשים לתוכן מהסמארטפון, אתם חייבים גלילה אנכית. אז מדוע לא לאמץ גישה זו ולשלב עיצוב אינטואטיבי וגלילה בלב הלמידה שלכם?
  • ניווט בעל משמעות
    זה הגיוני למדי לקבץ יחד תוכן העוסק באותם נושאים יחד בעמוד אחד שיכול להיות קצר או ארוך ככל הנדרש. לא זו בלבד שזה מפחית ניווט מיותר לעמודים אחרים, זה גם מסייע ללומד לסדר את המבנה של התוכן ואת הקשר בין מרכיבי התוכן. גם הגל החדש של גלילה, ניווט כזה הופך להיות בעל משמעות בפני עצמו, ולא רק תוצר לוואי של גודל התבנית.
  • 'לשים את מה שחשוב למעלה' זה אולי ישן אבל...
    ...העקרון עדיין תופס. בגלל המגוון של מכשירים המשמשים לגשת לתוכן תוכלו להיות בטוחים שרק 400 או 500 הפיקסלים העליונים יוצגו, כך שאין כל פסול בהצגת התוכן החשוב בהתחלה וללכוד את תשומת הלב של הלומדים בשלב מוקדם. למעשה, אנחנו מעודדים זאת כעקרון מנחה, בלי קשר למבנה העמודים בהם אתם משתמשים.
  • גמישות רבה יותר
    עמודים נגללים עדיין מאפשרים לכם להציג תוכן באצמעות רכיבים אינטראקטיביים (אנחנו קוראים לאלו רכיבים במקום תבניות), אבל בעמוד נגלל יש לכם יותר גמישות באופן בו אתם מציגים רכיבים אלו. הפריסה של העמוד יכולה להשתנות בגודלה ובכמות המידע המוצג בה, מה שיוצר עבורכם יותר מרחב למיתוג ועיצוב. או לחילופין - זה עשוי לתת לכם יותר שטח נקי כדי לתת לתוכן לנשום. בנוסף לכך, תרגום והתאמה מקומית של תוכן הופכים להיות פשוטים יותר למימוש.

טיפ 3: חשבו על התמונה הגדולה קודם (ואז שרטטו את זה!)

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

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

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

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

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

טיפ 4: הכינו אב טיפוס, בדקו ושתפו

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

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

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

שימו לב שטיפים אלו חשובים במיוחד אם אתם עובדים עם דפדפנים ישנים יחסית, שאין להם תמיכה סבירה בתוצרי HTML5 או CSS3 כגון דפדפן IE8

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

טיפ 5: אל תשפכו את התינוק עם המים

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

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

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

 
 
הוסיפו את התגובה שלכם...