ניווט בטלוויזיה

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

עקרונות

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

בקרים

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

כפתורי החיצים (D-pad)
השיטה העיקרית לניווט בטלוויזיה היא באמצעות כפתורי החיצים, שכוללים כפתורי חומרה עם חצים למעלה, למטה, שמאלה וימינה. כפתורי החיצים (D-pad) מעבירים את המיקוד מאובייקט אחד לאובייקט הקרוב ביותר בכיוון של הלחצן שנלחץ.

לחצן הבחירה
בוחר את הפריט במסך שהמיקוד עליו.

הלחצן הראשי
מעביר את המשתמש למסך הבית של המערכת.

הכפתור "הקודם"
מאפשר למשתמשים לחזור לתצוגה הקודמת.

לחצן המיקרופון
מפעיל את Google Assistant או את הקלט הקולי.

ניווט באמצעות לחצני החיצים (D-pad)

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

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

כדי לבדוק שמערכת הניווט באפליקציה פועלת היטב עם כפתורי החיצים (D-pad) במכשיר טלוויזיה, צריך לפעול לפי ההנחיות הבאות:

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

שינוי הניווט באמצעות מקשי החיצים

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

בדוגמת הקוד הבאה אפשר לראות איך מגדירים את הרכיב הבא שיקבל את המיקוד עבור אובייקט פריסה מסוג TextView:

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

בטבלה הבאה מפורטים כל מאפייני הניווט שזמינים בווידג'טים של ממשק המשתמש ב-Android:

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

הקפידו על מיקוד ובחירה ברורים

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

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

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

<!-- res/drawable/button.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
button.xml

קוד ה-XML לדוגמה הבא מחיל את רשימת המצבים הקודמת של רכיב ה-Drawable על Button:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

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

ניווט באמצעות הכפתור 'הקודם'

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

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

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

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

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

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

לא מומלץ.
הימנעו משימוש בשיטת 'הצגת תוכן בתמורה להרשמה'. לאפשר למשתמשים לצאת מהאפליקציה בלי לאשר את הפעולה.

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

לא להציג לחצן 'הבא' או 'הקודם'

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

לא מומלץ.

הצגת לחצן ביטול אם יש צורך

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

כן.

הטמעה של ניווט לאחור

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

‫ComponentActivity, מחלקת הבסיס של FragmentActivity ושל AppCompatActivity, מאפשרת לכם לשלוט בהתנהגות של הכפתור "הקודם" באמצעות OnBackPressedDispatcher, שאפשר לאחזר באמצעות קריאה ל-getOnBackPressedDispatcher().

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

רכיבי UI להפעלה בטלוויזיה

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

ניווט בכרטיסיות בשידור חי

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

הפעלה חלקה

ההפעלה החלקה חלה על התנהגות בתוך האפליקציה אחרי קישור עומק של ערוץ בשידור חי או ערוץ ליניארי מ-Google TV ומ-Android TV.

כשמשתמש לוחץ על קישור עומק, הכללים הבאים חלים:

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

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

Direct-back

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

קישורי העומק בכרטיסייה 'שידור חי' מזוהים באמצעות פרמטר של קישור עומק שמצורף אליהם: ?exit_on_back=[true|false]. האפליקציות צריכות לנתח את הפרמטר הזה כדי לקבוע אם האפליקציה הופעלה מהכרטיסייה 'בשידור חי'. אם exit_on_back הוא true, האפליקציות חייבות להטמיע את ההתנהגות של חזרה ישירה.

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

לדוגמה, נניח שאחרי שהמשתמש לוחץ על קישור עומק הוא לוחץ על לחצן הבחירה בלחצני החיצים, שפותח שכבת-על של אמצעי בקרה. המשתמש מחכה שהשכבה העליונה תיעלם, ואז לוחץ על הכפתור "הקודם". מכיוון שהכפתור הראשון שנלחץ אחרי המעבר לקישור העומק היה כפתור הבחירה של מקשי החיצים, הדרישה לחזרה ישירה לא חלה. במקום זאת, חל ההיגיון הרגיל של מקבץ פעילויות קודמות (back stack) של האפליקציה.

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

ארכיטקטורת הניווט

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

יעד התחלה קבוע

המסך הראשון שהמשתמש רואה כשהוא מפעיל את האפליקציה ממרכז האפליקציות הוא גם המסך האחרון שהמשתמש רואה כשהוא חוזר למרכז האפליקציות אחרי שהוא לוחץ על לחצן החזרה.

קישורי עומק מדמים ניווט ידני

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

קישורי עומק לאפליקציה מאפליקציה אחרת מדמים ניווט ידני. לדוגמה, אם המשתמש עובר ישירות לדף פרטים באפליקציית Moviestar מ-Google TV ואז לוחץ על הכפתור "הקודם", הוא מועבר לדף הבית של אפליקציית Moviestar.

הסרת הנתיב לכל הרכיבים שאפשר להתמקד בהם

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

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

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

‫Axes

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

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

לא מומלץ.
אל תשתמשו בהיררכיות מורכבות ומקוננות של פריסות.