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

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

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

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

להלן מספר שיטות לשיפור חווית המשתמש, אשר מבוססות על ה-Mobile Web Application Best Practices, מסמך קווים מנחים המועמד להפוך לתקן של ה-W3C, הארגון המפתח את תקני הרשת. המסמך המלא מתאר 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).

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

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

  • אינטראקציה מבוססת פוקוס – מיקום הפוקוס בדף נקבע בקלות מאחר והאלמנט שבפוקוס יהיה מודגש. האזור שבפוקוס יקפוץ באופן אוטומטי בין האלמנטים (מלינק אחד לאחר) מבלי להשפיע על השימושיות – גם כאשר ישנם רווחים גדולים בינם.
  • אינטראקציה מבוססת הצבעה – אפשר, אבל אין הכרח לשמור על רווח גדול בין האלמנטים בעמוד, מאחר והמשמש יכול לבחור אותם ישירות. אולם, חשוב כי האלמנטים יהיו גדולים מספיק בכדי שיוכל לבחור אותם (למשל, 30 פיקסל לפריט ברשימה). זכור כי אף אלמנט אינו בפוקוס עד שהוא נבחר בפועל, כך שלא ניתן להעביר למשמש מידע נוסף אודותיו עד שנבחר (למשל, 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 ומסמך ההרחבה להן, המסבירים כיצד להתאים תוכן ואתרים למכשירים ניידים (ולא רק אפליקציות).

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

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

Avatar

אייל סלע

אייל סלע הוא מנהל פרויקטים באיגוד האינטרנט הישראלי וכותב את ProductiveWise, בלוג הפרודקטיביות, אינטרנט ומדיה חברתית (http://www.productivewise.com).

הגב

הגב ראשון!

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

wpDiscuz

תגיות לכתבה:

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