แนวทางปฏิบัติแนะนำสำหรับสิทธิ์บนเว็บ

Marian Harbach

Thomas Steiner

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

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

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

แนวทางปฏิบัติแนะนำในการแสดงข้อความแจ้ง

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

หากเป็นไปได้ ให้ระบุวิธีอื่นในการทำงานเดียวกันให้เสร็จสมบูรณ์ การเลือกช่วงเวลาที่เหมาะสมในการขอสิทธิ์อย่างรอบคอบจะช่วยลดโอกาสที่ผู้ใช้จะเข้าสู่สถานะที่ถูกบล็อกซึ่งกู้คืนได้ยาก

อย่าขอสิทธิ์เมื่อการโหลดหน้าเว็บหรือไม่มีการโต้ตอบของผู้ใช้

การขอสิทธิ์เมื่อการโหลดหน้าเว็บเทียบเท่ากับการขอข้อมูลที่ละเอียดอ่อนจากลูกค้าขณะที่ลูกค้าเดินเข้าไปในหน้าร้านจริง การเห็นข้อความแจ้งขอสิทธิ์ ซึ่งอาจรวมถึงข้อความแจ้งอื่นๆ หลายรายการสำหรับการลงชื่อสมัครรับจดหมายข่าวและความยินยอมให้ใช้คุกกี้ เป็นประสบการณ์ที่น่ารำคาญ ผู้ใช้จะไม่เข้าใจ ว่าทำไมจึงมีการขอสิทธิ์และผู้ใช้จะได้รับประโยชน์อย่างไร

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

การขอสิทธิ์โดยไม่มีการโต้ตอบกับผู้ใช้ก่อนหน้านี้ก็ไม่มีประสิทธิภาพเช่นกัน เราเรียกกรณีนี้ว่า การเปิดใช้งานผู้ใช้ชั่วคราว ข้อมูลการใช้งาน Chrome แสดงให้เห็นว่า 77% ของข้อความแจ้งขอสิทธิ์ในเดสก์ท็อปแสดงขึ้นโดยไม่มีสัญญาณบ่งบอกความตั้งใจของผู้ใช้ และด้วยเหตุนี้ ข้อความแจ้งดังกล่าวจึงได้รับอนุญาตเพียง 12% หลังจากมีการโต้ตอบของผู้ใช้ อัตราการอนุญาตจะเพิ่มขึ้นเป็น 30%

ขอสิทธิ์หลังจากที่ผู้ใช้โต้ตอบกับหน้าเว็บแล้วเท่านั้น

ขอสิทธิ์เฉพาะเมื่อผู้ใช้เข้าใจเหตุผล

การตัดสินใจเกี่ยวกับสิทธิ์มักเป็นการตัดสินใจเกี่ยวกับความเป็นส่วนตัว จาก กรอบงานความสมบูรณ์ตามบริบท, เราทราบว่าการตัดสินใจเกี่ยวกับความเป็นส่วนตัวขึ้นอยู่กับบริบทอย่างมาก การทำความเข้าใจเหตุผลที่จำเป็นต้องเข้าถึงเป็นสิ่งสำคัญ คุณควรขอเฉพาะความสามารถที่จำเป็นในการมอบมูลค่า โดยที่ผู้ใช้มีแนวโน้มที่จะเห็นด้วยว่าตนจะได้รับมูลค่า นอกจากนี้ ให้ขอสิทธิ์เมื่อผู้ใช้เห็นได้ชัดว่าความสามารถดังกล่าวมีประโยชน์ ทำให้ผู้ใช้เข้าใจบริบทการใช้งานได้ง่ายขึ้น

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

ระบุทางเลือก

ผลลัพธ์ของความสามารถบางอย่างอาจไม่เป็นประโยชน์ต่อผู้ใช้ ตัวอย่างเช่น ตำแหน่งทางภูมิศาสตร์ของอุปกรณ์เดสก์ท็อปที่ไม่มีเซ็นเซอร์ GPS อาจแสดงตำแหน่งที่ไม่ถูกต้องเนื่องจากบุคคลนั้นเชื่อมต่อกับ VPN ผู้ใช้รายอื่นอาจไม่ต้องการให้สิทธิ์เข้าถึงคลิปบอร์ดเนื่องจากต้องการควบคุมและทริกเกอร์เหตุการณ์เหล่านี้ด้วยการกดปุ่มผสมด้วยตนเอง ในสถานการณ์เหล่านี้ ให้ระบุวิธีอื่นในการทำงานเดียวกันให้เสร็จสมบูรณ์

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

รูปแบบที่มีประโยชน์คือการใช้ UI ทางเลือกเป็นคำอธิบายว่าทำไมการเข้าถึงจึงเป็นประโยชน์ ผู้ใช้ที่เห็นตัวเลือกในการป้อนตำแหน่งข้างปุ่มที่ทริกเกอร์ Geolocation API จะรู้สึกว่าตนควบคุมได้เนื่องจากเข้าใจว่าสามารถพิมพ์ที่อยู่ได้ ในทำนองเดียวกัน หากมีตัวเลือกระหว่างการรับการแจ้งเตือนผ่านการแจ้งเตือนแบบพุชหรืออีเมล หรือการเข้าร่วมการประชุมโดยไม่อนุญาตให้เข้าถึงกล้องและไมโครโฟน ผู้ใช้จะเข้าใจข้อดีข้อเสีย

หลีกเลี่ยงสถานะที่ถูกบล็อก

เมื่อผู้ใช้ปฏิเสธการเข้าถึงความสามารถที่ควบคุมด้วยสิทธิ์อย่างถาวร เบราว์เซอร์จะปฏิบัติตามการตัดสินใจดังกล่าว หากยังคงแสดงข้อความแจ้งขอสิทธิ์เข้าถึงได้ เว็บไซต์ที่เป็นอันตรายจะแสดงข้อความแจ้งแก่ผู้ใช้อย่างไม่หยุดหย่อน การกู้คืนจากสถานะที่ถูกบล็อกของความสามารถต้องใช้ความพยายามโดยเจตนา หลีกเลี่ยงการขอสิทธิ์ในสถานการณ์ที่ผู้ใช้ไม่น่าจะอนุญาตการเข้าถึง

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

ให้ความสำคัญกับเนื้อหาของบุคคลที่สาม

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

ช่วงเวลาที่ควรขอสิทธิ์

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

• หลังจากที่ผู้ใช้คลิกใช้ตำแหน่งของฉัน ข้างช่องแบบฟอร์มเมื่อป้อนที่อยู่ด้วยตนเอง
• หลังจากที่ผู้ใช้สมัครใช้บริการช่องวิดีโอหรือโพสต์ และคลิกปุ่มยืนยันในกล่องโต้ตอบที่อธิบายว่าระบบสามารถส่งการอัปเดตเป็นอีเมลหรือการแจ้งเตือนได้
• หลังจากที่ผู้ใช้เข้าถึงหน้าเว็บที่เตรียมให้ผู้ใช้เข้าร่วมวิดีโอคอลและตอบรับในข้อความแจ้งล่วงหน้าว่าต้องการให้ผู้อื่นเห็นและได้ยิน อ่านเพิ่มเติม ในกรณีศึกษา Google Meet

รูปแบบโค้ด

การให้สิทธิ์ใช้ API จะดำเนินการผ่านวิธีการต่างๆ กันไปตาม API API รุ่นเก่าบางรายการใช้โมเดลที่เบราว์เซอร์จะขอสิทธิ์โดยอัตโนมัติเมื่อคุณพยายามใช้ API เป็นครั้งแรก ตัวอย่างหนึ่งคือ Geolocation API เมื่อเรียก navigator.geolocation.getCurrentPosition()

try {
  navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
  console.error(error);
}

API อื่นๆ ใช้โมเดลที่คุณต้องขอสิทธิ์อย่างชัดเจนก่อนด้วยเมธอดแบบคงที่ ตัวอย่างที่ดีคือ Notification.requestPermission() สำหรับการอนุญาตการแจ้งเตือน หรือ DeviceOrientationEvent.requestPermission(), ซึ่งพบได้ไม่บ่อยนักและเป็นส่วนหนึ่งของ Device Orientation Events API

เบราว์เซอร์บางรายการให้สิทธิ์เข้าถึง API บางรายการโดยอัตโนมัติ ตัวอย่างเช่น Chrome อนุญาตให้เข้าถึงการวางแนวอุปกรณ์เสมอ ในขณะที่ Safari จะแสดงข้อความแจ้ง

const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
  /* Use the API. */
}

ตรวจสอบสถานะสิทธิ์

หากต้องการตรวจสอบว่าคุณใช้ API บางรายการได้หรือไม่ ให้ใช้ navigator.permissions.query() จาก Permissions API

const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
  // Use the API.
}

ช่วยให้ผู้ใช้กู้คืนจากสถานะที่ถูกบล็อก

หากต้องการช่วยผู้ใช้แก้ปัญหาการเข้าถึง ให้ตรวจหาว่าผู้ใช้บล็อกการเข้าถึงโดยใช้ Permissions API และระบุคำแนะนำเกี่ยวกับวิธีเปลี่ยนการตั้งค่า เมื่อผู้ใช้โต้ตอบกับองค์ประกอบ UI ที่เชื่อมโยงกับความสามารถที่ควบคุมด้วยสิทธิ์ ให้ใช้สถานะสิทธิ์ตรวจสอบและเปิดกล่องโต้ตอบการแก้ปัญหา

ขั้นตอนที่แน่นอนในการเปลี่ยนสถานะสิทธิ์จะแตกต่างกันไปตามเบราว์เซอร์ ดังนั้นให้ระบุคำอธิบายที่ตรงกันโดยอิงตามสตริง User-Agent สำหรับเบราว์เซอร์ที่ใช้กันโดยทั่วไป

ใน Chrome ผู้ใช้สามารถเปลี่ยนสิทธิ์ได้จากดูข้อมูลเว็บไซต์ > การตั้งค่าเว็บไซต์, ซึ่งอยู่ในแถบที่อยู่ ในบางกรณี ผู้ใช้อาจต้องโหลดหน้าเว็บซ้ำก่อนใช้ความสามารถ ในกรณีดังกล่าว แถบข้อความจะปรากฏที่ด้านบนสุดของหน้าต่างซึ่งมีตัวเลือกให้โหลดเว็บไซต์ซ้ำ

เบราว์เซอร์อื่นๆ เช่น Firefox มี UI ที่คล้ายกันสำหรับการควบคุมสิทธิ์