การใช้ภาพประกอบและภาพที่สวยงามเมื่อเริ่มใช้พาสคีย์อาจช่วย ยกระดับการรับรู้ต่อผู้ใช้ และช่วยสนับสนุนเนื้อหา ขณะเดียวกันก็ทำให้ประสบการณ์น่าสนใจและเข้าใจได้ง่ายขึ้นด้วย
องค์ประกอบการออกแบบ
พาสคีย์มีไว้เพื่อเพิ่มประสิทธิภาพให้กับผลิตภัณฑ์หรือบริการที่มีอยู่ และคุณควรแนะนำรหัสผ่านโดยใช้รูปแบบที่ผู้ใช้คุ้นเคยบนแพลตฟอร์มของคุณอยู่แล้ว
เช่น หากบริการของคุณใช้โฆษณาคั่นระหว่างหน้าเพื่อแจ้งข้อมูลอัปเดตให้ผู้ใช้ทราบ ให้ลองใช้รูปแบบคั่นระหว่างหน้าเพื่อแสดงพาสคีย์ คล้ายกับที่บัญชี Google แนะนำพาสคีย์ให้กับผู้ใช้
![หน้า Landing Page ของ TrailBlazer ที่มีบัตรชื่อ "ลงชื่อเข้าใช้ได้เร็วขึ้นด้วยพาสคีย์"](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=6&hl=th)
หรือหากแพลตฟอร์มของคุณมักจะแจ้งให้ผู้ใช้ทราบถึงการเปลี่ยนแปลงบัญชีผ่านป๊อปอัป แถบการแจ้งเตือน หรือรูปแบบการแจ้งเตือนอื่นๆ ให้ใช้วิธีการแจ้งเตือนที่คุ้นเคยเหล่านั้นเพื่อแนะนำแนวคิดของพาสคีย์ วิธีการนี้ช่วยให้มั่นใจได้ว่าจะได้รับประสบการณ์ใช้งานที่สอดคล้องกันและใช้งานง่ายเมื่อคุณเปิดตัวฟีเจอร์พาสคีย์ใหม่
![ป๊อปอัปที่ให้ผู้ใช้ใช้พาสคีย์เพื่อให้รหัสผ่านปลอดภัยและรวดเร็วยิ่งขึ้น](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=6&hl=th)
สร้างข้อความแจ้งเกี่ยวกับพาสคีย์ที่สื่อความหมาย
สำหรับการดำเนินการที่เกี่ยวข้องกับพาสคีย์แทนที่จะสร้างเฉพาะปุ่มที่มีคำกระตุ้นการตัดสินใจ ให้สร้างข้อความแจ้งที่มีคำอธิบายแบบละเอียดที่สามารถบอกข้อมูลเพิ่มเติมแก่ผู้ใช้ เช่น ภาพประกอบ บรรทัดแรก ข้อความ และคำกระตุ้นให้ดำเนินการ
เช่น หากต้องการสร้างพาสคีย์สำหรับบัญชี Google แทนที่จะมีเพียงปุ่ม "สร้างพาสคีย์" แทนจะมีโฆษณาคั่นระหว่างหน้าที่มีคำกระตุ้นให้ดำเนินการ (Call-To-Action) เพื่อ "ลงชื่อเข้าใช้ง่ายขึ้น" ซึ่งเป็นคำอธิบายสั้นๆ ของพาสคีย์และภาพประกอบที่มีไอคอนพาสคีย์และวิธีการต่างๆ ในการปลดล็อกอุปกรณ์
![ภาพหน้าจอของหน้าบัญชี Google ที่มีข้อความเลือกใช้สำหรับพาสคีย์](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=6&hl=th)
ใช้ไอคอนพาสคีย์ Canonical
FIDO Alliance สร้างไอคอนพาสคีย์ที่คุณควรใช้เมื่อแสดงพาสคีย์ การใช้อย่างสม่ำเสมอจะช่วยให้ผู้ใช้จดจำพาสคีย์ได้และปรับปรุงการดำเนินการที่เกี่ยวข้องกับพาสคีย์ให้มีประสิทธิภาพยิ่งขึ้น
![ไอคอนพาสคีย์ Canonical](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=6&hl=th)
ใช้ไอคอนพาสคีย์ใน UI ดังนี้
- เพื่อแสดงแนวคิดพาสคีย์ในการเริ่มต้นใช้งานหรือข้อความแจ้งอื่นๆ เพื่อกระตุ้นให้ผู้ใช้สร้างพาสคีย์หรืออัปเกรดเป็นพาสคีย์เพื่อการลงชื่อเข้าใช้ที่ปลอดภัยมากขึ้น
- ในปุ่มหรือลิงก์ที่อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ด้วยพาสคีย์
- ในการตั้งค่าเพื่อช่วยระบุพาสคีย์ที่แก้ไขหรือลบได้
คุณสามารถเปลี่ยนสีไอคอนให้เข้ากับรูปแบบสีของผลิตภัณฑ์ แบรนด์ หรืออินเทอร์เฟซผู้ใช้ได้
แสดง "บัตรพาสคีย์" ภายในการตั้งค่าบัญชี
พาสคีย์ต่างจากรหัสผ่านที่เป็นการผสมผสานระหว่างตัวอักษร ตัวเลข และสัญลักษณ์อย่างจับต้องได้ ผู้คนส่วนใหญ่มักมองไม่เห็นพาสคีย์ สำหรับวางบัตรพาสคีย์ไว้โดยเฉพาะ ในการตั้งค่าบัญชี ภายในการ์ดจะมีไอคอนพาสคีย์ ข้อมูลเกี่ยวกับพาสคีย์ เช่น เวลาและระบบนิเวศในการสร้างพาสคีย์ดังกล่าว เวลาที่ใช้ครั้งล่าสุด และตัวเลือกในการจัดการพาสคีย์ หากมีคนมีพาสคีย์ 2 อันขึ้นไป แต่ละพาสคีย์ควรมีบัตรเป็นของตนเอง
![ภาพหน้าจอของการตั้งค่าพาสคีย์ในหน้าการตั้งค่าความปลอดภัยของผู้บุกเบิก](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=6&hl=th)