패스키를 소개할 때 삽화와 풍부한 시각적 요소를 포함하면 사용자의 인지 부하를 줄일 수 있으며, 콘텐츠를 지원하는 동시에 경험을 더 매력적이고 이해하기 쉽게 만들 수 있습니다.
디자인 구성요소
패스키는 기존 제품 또는 서비스를 개선하기 위한 것이므로 사용자가 플랫폼에서 이미 익숙한 형식을 사용하여 도입해야 합니다.
예를 들어 서비스에서 로그인 중에 Google 계정에서 사용자에게 패스키를 소개하는 방식과 유사하게 인터스티셜을 사용하여 사용자에게 업데이트를 전달하는 경우 인터스티셜 형식을 사용하여 패스키를 소개하는 것이 좋습니다.
트레일블레이저 앱에서 패스키 인터스티셜을 만듭니다.
또는 플랫폼에서 일반적으로 팝업 모달, 알림 표시줄 또는 기타 알림 스타일을 통해 사용자에게 계정 변경사항을 알리는 경우 이러한 익숙한 알림 방법을 사용하여 패스키 개념을 소개하세요. 이 접근 방식을 사용하면 새로운 패스키 기능을 출시할 때 일관되고 사용자 친화적인 환경을 보장할 수 있습니다.
은행 앱에서 패스키 만들기 팝업을 만듭니다.
설명적인 패스키 프롬프트 만들기
패스키 관련 작업의 경우 클릭 유도 문구가 포함된 버튼만 사용하는 대신 사용자에게 더 많은 정보를 전달할 수 있는 풍부한 설명 프롬프트를 만드세요.
여기에는 일러스트레이션, 광고 제목, 메시지, 클릭 유도 문구가 포함될 수 있습니다.
예를 들어 Google 계정의 패스키를 만드는 경우 '패스키 만들기' 버튼만 있는 대신 '로그인 간소화'라는 클릭 유도 문구가 있는 인터스티셜, 패스키에 대한 간략한 설명, 패스키 아이콘과 기기 화면 잠금 해제 방법을 보여주는 그림이 있습니다.
온보딩 또는 기타 프롬프트에서 패스키 개념을 나타내어 사용자가 패스키를 만들거나 더 안전한 로그인을 위해 패스키로 업그레이드하도록 유도합니다.
사용자가 패스키로 로그인할 수 있는 버튼 또는 링크
수정하거나 삭제할 수 있는 패스키를 식별하는 데 도움이 되는 설정
제품, 브랜드 또는 사용자 인터페이스의 색 구성표에 맞게 아이콘 색상을 변경할 수 있습니다.
계정 설정 내에 '패스키 카드' 표시
문자, 숫자, 기호의 유형 조합인 비밀번호와 달리 패스키는 사용자에게 거의 표시되지 않습니다. 계정 설정에서 패스키 카드용 공간을 할당합니다. 카드 내에 패스키 아이콘, 패스키에 관한 정보(예: 생성된 시점 및 생태계, 마지막으로 사용된 시점), 패스키 관리 옵션을 포함합니다. 사용자가 패스키를 2개 이상 보유한 경우 각 패스키에 자체 카드가 있어야 합니다.
Trailblazer 보안 설정 페이지 내의 패스키 설정에 각 패스키에 관한 세부정보가 표시됩니다.
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-27(UTC)"],[[["\u003cp\u003eWhen introducing passkeys, incorporate visuals and illustrations to enhance user understanding and engagement.\u003c/p\u003e\n"],["\u003cp\u003eMaintain design consistency by introducing passkeys using familiar UI elements like interstitials, modals, or notification bars commonly used in your platform.\u003c/p\u003e\n"],["\u003cp\u003eInstead of simple buttons, use descriptive prompts with visuals and clear messaging to guide users through passkey-related actions.\u003c/p\u003e\n"],["\u003cp\u003eUtilize the standardized passkey icon provided by the FIDO alliance for consistent representation across your UI elements.\u003c/p\u003e\n"],["\u003cp\u003eProvide a dedicated "passkeys card" within account settings to display information about each passkey, including its origin, last used date, and management options.\u003c/p\u003e\n"]]],[],null,["| **Note:** This article is a part of a series about designing passkeys user experiences on the web that includes [Passkeys user journeys](/identity/passkeys/ux/user-journeys) and [Communicating passkeys to users](/identity/passkeys/ux/communicating-passkeys).\n\nIncorporating illustrations and rich visuals when introducing passkeys can help\nlighten the cognitive load on users also, and help support your content while\nmaking the experience more engaging and understandable.\n\nDesign components\n\nPasskeys are intended as an enhancement to your existing product or service and\nyou should introduce them using a format that users are already accustomed to\non your platform.\n\nFor example, if your service uses interstitials to convey updates to users,\nsimilar to how Google Accounts introduce users to passkeys during sign in,\nconsider using an interstitial format to introduce passkeys.\n\n\u003cbr /\u003e\n\nCreate a passkey interstitial in the Trailblazer app. \n\n\u003cbr /\u003e\n\nAlternatively, if your platform typically informs users of account changes\nthrough pop-up modals, notification bars, or other alert styles, then employ\nthose familiar notification methods to introduce the concept of passkeys. This\napproach ensures a consistent and user-friendly experience as you roll out the\nnew passkey feature.\n\n\u003cbr /\u003e\n\nCreate a passkey pop-up in a banking app.\n\n\u003cbr /\u003e\n\nCreate a descriptive passkey prompt\n\nFor passkeys related actions, instead of just buttons with a call to action,\ncreate rich descriptive prompts that can convey more information to users.\nThese can include illustrations, a headline, messaging, and a call to action.\n\nFor example, for creating a passkey for\nGoogle Accounts, instead only a \"Create passkey\" button there is an\ninterstitial with a call to action to \"Simplify your sign in\", a brief\nexplanation of passkeys and an illustration that includes the passkey icon and\nvarious methods of unlocking a device screen.\n\n\u003cbr /\u003e\n\nPasskey creation page on Google Accounts\n\n\u003cbr /\u003e\n\nUse the canonical passkey icon\n\n[FIDO alliance has created a passkey icon](https://media.fidoalliance.org/wp-content/uploads/2022/09/Passkey-Style-Guide.zip) you should use when representing passkeys. Using it consistently will help users recognize passkeys and streamline the passkeys related actions.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUse the passkeys icon in your UI:\n\n- To represent the passkey concept in onboarding or other prompts to encourage users to create passkeys or upgrade to a passkey for a more secure sign-in.\n- In buttons or links allowing users to sign in with a passkey.\n- Within settings to help identify passkeys that can be edited or deleted.\n\nIcon color can be changed to match the color scheme of your product, brand, or\nuser interface.\n\nDisplay \"passkeys cards\" within account settings\n\nUnlike passwords, which are tangible combinations of letters, numbers, and\nsymbols, passkeys are largely invisible to people. Dedicate space for a\npasskeys card in the account settings. Inside the card include the passkey\nicon, information about the passkey such as when and which ecosystem it was\ncreated on, when was it last used, and options for managing the passkey. If\nsomeone has two or more passkeys, each passkey should have its own card.\n\n\u003cbr /\u003e\n\nPasskey settings within Trailblazer security settings page show detailed information about each passkey.\n\n\u003cbr /\u003e"]]
