การออกแบบอินเทอร์เฟซผู้ใช้ของพาสคีย์

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

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

องค์ประกอบการออกแบบ

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

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

สร้างโฆษณาคั่นระหว่างหน้าแบบพาสคีย์ในแอปผู้บุกเบิก

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

สร้างป๊อปอัปพาสคีย์ในแอปธนาคาร

สร้างข้อความแจ้งเกี่ยวกับพาสคีย์ที่สื่อความหมาย

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

เช่น หากต้องการสร้างพาสคีย์สำหรับบัญชี Google แทนที่จะมีเพียงปุ่ม "สร้างพาสคีย์" แทนจะมีโฆษณาคั่นระหว่างหน้าที่มีคำกระตุ้นให้ดำเนินการ (Call-To-Action) เพื่อ "ลงชื่อเข้าใช้ง่ายขึ้น" ซึ่งเป็นคำอธิบายสั้นๆ ของพาสคีย์และภาพประกอบที่มีไอคอนพาสคีย์และวิธีการต่างๆ ในการปลดล็อกอุปกรณ์

หน้าการสร้างพาสคีย์ในบัญชี Google

ใช้ไอคอนพาสคีย์ Canonical

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

ใช้ไอคอนพาสคีย์ใน UI ดังนี้

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

คุณสามารถเปลี่ยนสีไอคอนให้เข้ากับรูปแบบสีของผลิตภัณฑ์ แบรนด์ หรืออินเทอร์เฟซผู้ใช้ได้

แสดง "บัตรพาสคีย์" ภายในการตั้งค่าบัญชี

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

การตั้งค่าพาสคีย์ในหน้าการตั้งค่าความปลอดภัยของผู้บุกเบิกจะแสดงข้อมูลโดยละเอียดเกี่ยวกับพาสคีย์แต่ละรายการ

ถัดไป

เส้นทางของผู้ใช้พาสคีย์