משרד ה-W3C הישראלי

איך לשפר את חווית המשתמש באפליקציות ווב למכשירים ניידים  

מאת: אייל סלע

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

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

בהמשך הידיעה נסקור מספר שיטות לשיפור חווית המשתמש, אשר מבוססות על ה-Mobile Web Application Best Practices. זהו מסמך קווים מנחים הנמצא בשלב מועמד להמלצה. המסמך המלא מתאר 35 שיטות לשיפור חווית המשתמש ומזהיר מפני אלו הנחשבות למזיקות, בעת פיתוח אפליקציות ווב למכשירים ניידים.

שימו לב שלא תמיד אפשר וצריך ליישם את כל הפרקטיקות. היו ביקורתיים וישמו אותם במידת הצורך.

קצרו את משך אתחול האפליקציה

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

• השתמשו בטכנולוגיות לפעילות בלתי-מקוונת, אשר שומרות על המכשיר את קבצי האפליקציה (HTML, CSS, JavaScript). כך, האפליקציה תתחיל מיד עם הפעלתה מבלי לעשות טיולים מיותרים לשרת בכדי להביא את הקבצים האלו.  למדו עוד ב'ב-2010 אנחנו עוברים ל-Offline'.
• שיקלו לפצל סקריפטים גדולים. באפליקציות עתירות JavaScript, לעיתים עדיף להפריד סקריפטים אשר נעשה בו שימוש עיתים רחוקות. כך ניתן לקרוא להם רק כשצריך אותם, ולא בכל פעם שמפעילים את האפליקציה.
• שימרו 'תמונת מצב' של השימוש האחרון והציגו אותה בעת הפעלת האפליקציה. במצבים מסוימים ניתן לחסוך טיול מיותר לשרת על ידי שמירת המצב בו היה המשתמש בשימוש האחרון באפליקציה – והצגתו בשימוש הבא. למדו עוד ב'Unlock local storage for mobile Web applications with HTML 5'.
• מזערו את תלות הפעלת האפליקציה גם במידע המאוחסן במכשיר עצמו. על אף שמומלץ לשמור מידע על המכשיר, כדי למזער את משך הזמן שלוקח לתצוגה הראשונית להופיע.

שפרו את משך התגובה *הנתפס*

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

• טענו והציגו את המסך בהדרגתיות. שימו את ה-JavaScrip בתחתית הדף בכדי למנוע עיקוב בטעינת התוכן. כאשר ניתן, הציגו תוכן חשוב עוד בזמן שהאפליקציה טוענת.
• עדכנו את המשתמש. הציגו בר התקדמות (progress bars) כאשר האפליקציה ניגשת למידע ברשת או כאשר היא טוענת, בכדי שהמשתמש לא יחשוב שהיא תקועה.
• הימנעו מטעינה מחדש (reload) של דפים. השתמשו בטכניקות למניפולציה של ה-DOM בכדי להציג שינויים בדף, ולא בטעינה מחדש של הדף כולו.
• טענו מראש את התצוגה הבאה. אם ניתן לחזות את הדפים הבאים אליהם ינווט המשתמש, טענו אותם מראש, עוד לפני שהמשמש עושה זאת.

התאימו את האפליקציה לסוגי אינטראקציה שונים

כיום קיימים שלושה סוגים עיקריים של אינטראקציה עם מכשירים ניידים:

1. אינטראקציה מבוססת פוקוס (Focus Based) – ניווט בעזרת המקשים, אשר גורם לדפדפן לקפוץ מקישור לקישור.
2. אינטראקציה מבוססת הצבעה (Pointer Based)  – הניווט נעשה בעזרת המקשים, אשר מפעילים 'מצביע' המטייל על המסך (כמו המצביע של העכבר במחשב שולחני).
3. אינטראקציה מבוסס מגע (Touch Based) -  שימוש באצבע או במכשיר הצבעה (stylus).

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

מה מאפיין את סוגי האינטראקציה השונים?

• אינטראקציה מבוססת פוקוס – מיקום הפוקוס בדף נקבע בקלות מאחר והאלמנט שבפוקוס יהיה מודגש. האזור שבפוקוס יקפוץ באופן אוטומטי בין האלמנטים (מקישור אחד לאחר) מבלי להשפיע על השימושיות – גם כאשר ישנם רווחים גדולים בינם.
• אינטראקציה מבוססת הצבעה – חשוב לשמור על קרבה בין אלמנטים הקשורים זה לזה, מאחר ותזוזת המצביע על המסך עשויה להיות איטית. חשוב שהאלמנטים הניתנים לבחירה יהיו גדולים מספיק, מאחר ולרוב המצביע נע בקפיצות של 5-10 פיקסלים. השתמשו באפקט rollover (שינוי המראה של האלמנט כאשר המצביע נמצא מעליו) בכדי שהמשמש ידע שהוא באזור הפעיל של האלמנט.
• אינטראקציה מבוסס מגע – אפשר, אבל אין הכרח לשמור על רווח גדול בין האלמנטים בעמוד, מאחר והמשמש יכול לבחור אותם ישירות. אולם, חשוב כי האלמנטים יהיו גדולים מספיק בכדי שיוכל לבחור אותם (למשל, 30 פיקסל לפריט ברשימה). זכור כי אף אלמנט אינו בפוקוס עד שהוא נבחר בפועל, כך שלא ניתן להעביר למשמש מידע נוסף אודותיו עד שנבחר (למשל, rollover לא יעבוד).

השתמשו ב- Fragment identifiers כבסיס לתצוגות באפליקציה

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

בכדי למנוע את הבעיות הללו, השתמשו ב- Fragment identifiersבכדי להבדיל בין תצוגות שונות. Fragment identifier הוא החלק ב-URL אשר מופיע לאחר סימן #. משמעותו הוא שאנו מקשרים לתוך חלק מסוים בתוך העמוד.

לדוגמא, בקישור

http://myapp.example.org/myapp#view

החלק הראשון (http://myapp.example.org/myapp) הוא העמוד עצמו, והחלק שלאחר הסימן # (view) הוא החלק בעמוד (או התצוגה) אליו קישרנו.

ראו דוגמא לשימוש ב- fragment identifiers כבסיס לתצוגה ב-W3C Cheat Sheet (כלי ששווה להכיר בפני עצמו...). למידע נוסף אודות שיטה זו קראו את Unique URLs - Ajax Patterns.

עוד כמה דברים...

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

לסיכום

יש עוד הרבה דרכים לפתח אפליקציות ווב ניידות טובות יותר. תוכלו לקרוא אותן במסמך Mobile Web Application Best Practices. כמו כן מומלץ לקרוא את Mobile Web Best Practices 1.0 ומסמך ההרחבה, המסבירים כיצד להתאים תוכן ואתרים למכשירים ניידים (ולא רק אפליקציות).

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