แอปตัวรับสัญญาณแบบไม่ใช่ระบบสัมผัส

ตัวรับจะเล่นเนื้อหาและแสดงสถานะแก่ผู้ใช้ ผู้รับต้องตอบกลับการดำเนินการในแอปของผู้ส่งทันที เช่น เมื่อหยุดเนื้อหาชั่วคราวในตัวรับ ระบบจะแสดงไอคอนหยุดชั่วคราว และเมื่อผู้ใช้กดเล่นในแอปตัวส่ง ตัวรับจะเริ่มเล่นเนื้อหาและนำไอคอนหยุดชั่วคราวออก

ตัวอย่างความคิดเห็นเกี่ยวกับ UI ของตัวรับมีดังนี้

  • กำลังเล่น
  • หยุดชั่วคราว
  • ตำแหน่งการเล่น / การกรอ
  • กำลังบัฟเฟอร์

  UI ของตัวรับ

ต้องระบุ
  ก.   วางองค์ประกอบ UI ส่วนใหญ่ไว้ในส่วนล่าง 1/4 ของหน้าจอ และทำให้สอดคล้องกับ UX อื่นๆ
  B   อย่าแสดงองค์ประกอบเป็นตัวควบคุมแบบอินเทอร์แอกทีฟ เช่น อย่าทำซ้ำ UI ของผู้ส่งใน UI ของผู้รับ

แนวทางปฏิบัติแนะนำ

  • ใช้การเปลี่ยนฉาก (จาง) ความโปร่งใส และความแตกต่างเล็กๆ น้อยๆ เพื่อลดความเข้มของเอฟเฟกต์ภาพ
  • พิจารณาข้อเท็จจริงที่ว่าผู้ใช้ต้องการดูเนื้อหาให้ได้มากที่สุด ผู้ใช้มักจะ หยุดเนื้อหาชั่วคราวเพื่อตรวจสอบ ดังนั้นให้ค่อยๆ ซ่อน UI ที่ไม่จำเป็นเมื่อเป็นไปได้

Android

UI ของผู้ส่ง

UI ของตัวรับ

iOS

UI ของผู้ส่ง

UI ของตัวรับ

Chrome

UI ของผู้ส่ง

UI ของผู้ส่ง

UI ของตัวรับ

 

  แอปตัวรับสัญญาณไม่ได้ใช้งาน

หน้าจอที่ไม่มีการใช้งานจะแสดงบนตัวรับเมื่อตัวรับเชื่อมต่อกับตัวส่งแต่ไม่ได้ แคสต์

ต้องระบุ
  A   ระบุแอปตัวรับสัญญาณที่จะโหลด

แนวทางปฏิบัติแนะนำ

  • ใช้หน้าจอที่ไม่ได้ใช้งานเพื่อโปรโมตเนื้อหาหรือฟีเจอร์จากแอปของผู้ส่ง
  • เปลี่ยนเนื้อหาทุกๆ 30-60 วินาทีเพื่อแสดงเนื้อหาให้มากขึ้นและป้องกันจอเบิร์น
  • ยกเลิกการเชื่อมต่อจากแอปตัวรับและหยุดการทำงานหากไม่มีการใช้งานเป็นเวลา 5 นาที เมื่อหยุดแล้ว หน้าจอหลักของตัวรับจะปรากฏขึ้นและช่วยป้องกันการเกิดภาพค้าง

Android

กล่องโต้ตอบแคสต์ เชื่อมต่อแล้วแต่ไม่ได้แคสต์

แอปตัวรับสัญญาณโหลดแล้ว / ไม่ได้ใช้งาน

iOS

กล่องโต้ตอบแคสต์ เชื่อมต่อแล้วแต่ไม่ได้แคสต์

แอปตัวรับสัญญาณโหลดแล้ว / ไม่ได้ใช้งาน

 

  การโหลดแอปตัวรับสัญญาณ

เมื่อผู้ใช้เชื่อมต่อกับเครื่องรับ แอปเครื่องรับต้องโหลดก่อนจึงจะแสดง สถานะไม่มีการใช้งานของแอปหรือเริ่มเล่นเนื้อหาได้

ต้องระบุ
  A   ระบุแอปตัวรับสัญญาณที่กำลังโหลดโดยแสดง โลโก้แอป
  B   ระบุว่าแอปตัวรับสัญญาณกำลังโหลดโดยแสดง วงกลมโหลดแบบเคลื่อนไหว

Android

ผู้ส่งกำลังเชื่อมต่อ

การโหลดแอปตัวรับสัญญาณ

iOS

ผู้ส่งกำลังเชื่อมต่อ

การโหลดแอปตัวรับสัญญาณ

Chrome

ผู้ส่งกำลังเชื่อมต่อ

ผู้ส่งกำลังเชื่อมต่อ

การโหลดแอปตัวรับสัญญาณ

 

  การโหลดเนื้อหาของตัวรับสัญญาณ

เมื่อแอปตัวรับสัญญาณโหลดแล้ว เนื้อหาจะเริ่มสตรีมไปยังตัวรับสัญญาณได้

ต้องระบุ
  ก   ระบุเนื้อหาที่กำลังโหลดโดยแสดง ชื่อเนื้อหาหรืออาร์ตเวิร์ก
  ข   ระบุว่าเนื้อหากำลังโหลดโดยแสดง วงกลมโหลดแบบเคลื่อนไหว

แนวทางปฏิบัติแนะนำ
เมื่อเล่นเนื้อหาที่หยุดชั่วคราวต่อ ให้กรอการเล่นย้อนกลับไป 5-10 วินาทีเพื่อให้ผู้ชมไม่พลาดเนื้อหา ในระหว่างการเปลี่ยนจากอุปกรณ์ที่ส่งไปยังอุปกรณ์ที่รับ

Android

การโหลดเนื้อหาของอุปกรณ์ที่ส่ง

การโหลดเนื้อหาของตัวรับ

iOS

การโหลดเนื้อหาของอุปกรณ์ที่ส่ง

การโหลดเนื้อหาของตัวรับ

Chrome

การโหลดเนื้อหาของอุปกรณ์ที่ส่ง

การโหลดเนื้อหาของตัวรับ

 

  การเล่นของผู้รับ

ต้องระบุ
  A   ระบุสิ่งที่กำลังเล่นเมื่อเนื้อหาเริ่มเล่น
  B   ระบุตำแหน่งการเล่นเมื่อมีการปรับตำแหน่ง
  C   ระบุว่าตัวรับกำลังค้นหาเนื้อหาเมื่อมีการเปลี่ยนตำแหน่ง การเล่น แต่ยังไม่ได้เล่น

Android

ผู้ส่งปรับตำแหน่งการเล่น

การค้นหาเนื้อหาในตัวรับสัญญาณ

iOS

ผู้ส่งปรับตำแหน่งการเล่น

การค้นหาเนื้อหาในตัวรับสัญญาณ

Chrome

ผู้ส่งปรับตำแหน่งการเล่น

การค้นหาเนื้อหาในตัวรับสัญญาณ

 

  ผู้รับหยุดชั่วคราว

ต้องระบุ
  A   ระบุว่าเนื้อหาหยุดชั่วคราวโดยแสดงไอคอนหยุดชั่วคราว และตำแหน่งการเล่น
  B   ระบุว่าเนื้อหาใดหยุดชั่วคราวโดยแสดงชื่อเนื้อหา หรืออาร์ตเวิร์ก
  C   ระบุว่าแอปตัวรับสัญญาณใดโหลดอยู่โดยแสดงโลโก้แอป

แนวทางปฏิบัติแนะนำ

  • ผู้ใช้มักจะหยุดเนื้อหาชั่วคราวเพื่อตรวจสอบ ดังนั้นให้ UI ที่ไม่จำเป็นจางหายไปเมื่อหยุดชั่วคราวเป็นเวลา 2-3 วินาทีโดยแสดงไอคอนหยุดชั่วคราว
  • แอปตัวรับไม่ควรเล่นเนื้อหาต่อ เว้นแต่ผู้ใช้จะขอให้เริ่มเล่นอย่างชัดเจน เช่น เล่นต่อ หรือข้ามรายการในคิว
  • ยกเลิกการเชื่อมต่อจากแอปตัวรับและหยุดการทำงานหากไม่มีการใช้งานเป็นเวลา 20 นาที เมื่อหยุดแล้ว หน้าจอหลักของตัวรับจะปรากฏขึ้นและช่วยป้องกันการเกิดภาพค้าง จัดเก็บตำแหน่งที่หยุดชั่วคราว เพื่อให้ผู้ใช้เล่นต่อจากจุดนั้นได้ในภายหลัง

Android

ผู้ส่งหยุดชั่วคราว

หยุดเนื้อหาของตัวรับสัญญาณชั่วคราว

ผู้ส่งหยุดชั่วคราว

ผู้รับหยุดชั่วคราวหลังจาก 5 วินาที

iOS

ผู้ส่งหยุดชั่วคราว

หยุดเนื้อหาของตัวรับสัญญาณชั่วคราว

ผู้ส่งหยุดชั่วคราว

ผู้รับหยุดชั่วคราวหลังจาก 5 วินาที

Chrome

ผู้ส่งหยุดชั่วคราว

หยุดเนื้อหาของตัวรับสัญญาณชั่วคราว

ผู้ส่งหยุดชั่วคราว

ผู้รับหยุดชั่วคราวหลังจาก 5 วินาที

 

  การบัฟเฟอร์ของผู้รับ

การบัฟเฟอร์ในเครื่องรับจะเกิดขึ้นเมื่อเวลาในการตอบสนองของเครือข่ายหรือปัจจัยอื่นๆ ทำให้การเล่นล่าช้า

ต้องระบุ
  ก   ระบุว่าตัวรับกำลังบัฟเฟอร์หลังจากผ่านไป 2-3 วินาทีโดยแสดงวงกลมบัฟเฟอร์ การรอสัก 2-3 วินาทีเพื่อระบุว่ามีการบัฟเฟอร์จะช่วยป้องกันไม่ให้วงกลมการบัฟเฟอร์ปรากฏบ่อยเกินไปในกรณีที่เครือข่ายไม่ดี

แนวทางปฏิบัติแนะนำ
ระบุเนื้อหาที่บัฟเฟอร์หากบัฟเฟอร์ยังคงเกิดขึ้นหลังจากผ่านไป 5 วินาที

Android

ผู้ส่งระบุการบัฟเฟอร์ของผู้รับ

การบัฟเฟอร์เนื้อหาของตัวรับ

iOS

ผู้ส่งระบุการบัฟเฟอร์ของผู้รับ

การบัฟเฟอร์เนื้อหาของตัวรับ

Chrome

ผู้ส่งระบุการบัฟเฟอร์ของผู้รับ

การบัฟเฟอร์เนื้อหาของตัวรับ

 

  ผู้รับหยุดแคสต์

เมื่อการเล่นหยุดหรือหมดเวลา UI ของตัวรับควรโปรโมตเนื้อหาหรือฟีเจอร์อื่นๆ ที่มีในแอปของผู้ส่ง

ต้องระบุ
  ก   ระบุแอปตัวรับสัญญาณที่โหลดหรือไม่ได้ใช้งานโดย แสดงโลโก้แอป

แนวทางปฏิบัติแนะนำ

  • ใช้หน้าจอเมื่อไม่มีการใช้งานหลังการเล่นเพื่อแนะนำเนื้อหาหรือฟีเจอร์จากแอปผู้ส่ง โดยอิงตามสิ่งที่เพิ่งแคสต์
  • เปลี่ยนเนื้อหาบนหน้าจอที่ไม่ได้ใช้งานทุกๆ 30-60 วินาทีเพื่อป้องกันการเกิดภาพค้าง
  • ยกเลิกการเชื่อมต่อจากแอปตัวรับและหยุดการทำงานหากไม่มีการใช้งานเป็นเวลา 5 นาที เมื่อหยุดแล้ว หน้าจอหลักของตัวรับจะปรากฏขึ้นและช่วยป้องกันการเกิดภาพค้าง

Android

แอปผู้ส่งไม่ได้ใช้งาน

แอปตัวรับสัญญาณไม่ได้ใช้งาน

ผู้ส่งยกเลิกการเชื่อมต่อ

แคสต์หน้าจอหลัก

iOS

แอปผู้ส่งไม่ได้ใช้งาน

แอปตัวรับสัญญาณไม่ได้ใช้งาน

ผู้ส่งยกเลิกการเชื่อมต่อ

แคสต์หน้าจอหลัก

Chrome

แอปผู้ส่งไม่ได้ใช้งาน

แอปผู้ส่งไม่ได้ใช้งาน

แอปตัวรับสัญญาณไม่ได้ใช้งาน

ผู้ส่งยกเลิกการเชื่อมต่อ

ผู้ส่งยกเลิกการเชื่อมต่อ

แคสต์หน้าจอหลัก

 

 

รูปภาพที่ใช้ในคำแนะนำการออกแบบนี้ ได้รับความอนุเคราะห์จาก Blender Foundation และแชร์ภายใต้ลิขสิทธิ์หรือสัญญาอนุญาตครีเอทีฟคอมมอนส์

  • Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
  • Sintel: (c) copyright Blender Foundation | www.sintel.org
  • Tears of Steel: (CC) Blender Foundation | mango.blender.org
  • Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org