brunch

라이킷 6 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX DAYS SEOUL Oct 24. 2021

신용 카드 필드를 시각적으로 강화하십시오

Visually Reinforce

이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2012년 08월 21일의 기사입니다)

체크아웃 사용성 연구 동안 우리는 많은 테스트 피험자들이 신용 카드 정보를 입력해야 할 때까지 보안을 고려하지 않는다는 것을 알게 되었습니다. 그러나 우리는 명확하지 않은 또 다른 부분을 관찰할 수 있었습니다. 몇몇 테스트 대상은 체크아웃 페이지의 특정 부분을 "안전하다"라고 "안전하지 않다 "고 말했습니다.

예를 들어 체크아웃 페이지에서 보안 아이콘, 배지 또는 텍스트와 일반적인 "견고함"이 있는 부분은 더 안전한 것으로 인식되는 반면, 이러한 시각적 단서가 없는 부분은 이러한 필드가 모두 동일한 부분이라는 사실에도 불구하고 안전하지 않다고 느꼈습니다.

같은 페이지에 양식. 기술적인 관점에서 이것은 크게 의미가 없습니다. HTTPS 페이지의 모든 양식 필드가 동일하게 암호화되기 때문입니다. 그러나 대부분의 사람들은 이것을 모르고 결제 페이지의 일부가 다른 부분보다 더 안전한 것으로 인식하고 있다는 것입니다.

⭕️ 시각적 단서를 추가하면 양식의 특히 민감한 부분에 대한 사용자의 인식 보안 수준을 높이는 데 도움이 되는 방법에 대해 만든 프로토타입입니다. 버전 B에서 추가된 시각적 단서에는 배경색, 자물쇠 아이콘 및 GeoTrust 배지가 포함됩니다.

89%가 시각적 강화를 하고 있지 않다

2012년 4월 기준으로 상위 100대 전자 상거래 사이트 중 무려 89%가 결제 시 신용 카드 필드를 시각적으로 강화하지 않았습니다. 많은 사이트에서 결제 페이지(SLL, Hacker Tested 및 유사)에 보안 배지를 사용했지만 이러한 배지와 지침은 신용 카드 필드에 가깝게 배치되지 않았습니다. 대신 이러한 보안 표시기는 일반적으로 사이드바, 탐색 머리글 또는 사이트 바닥글에 있습니다.

11%만이 필드를 시각적으로 캡슐화하거나 보안 배지를 근접하게 배치하여 민감한 필드를 시각적으로 어느 정도 강화했습니다. 그 사이트들을 살펴보고 어떤 부분이 잘되었는지 살펴봅시다.

시각적 강화를 활용하는 11%의 예

민감한 필드의 인식된 보안을 높이는 한 가지 방법은 이를 시각적으로 캡슐화하는 것입니다. 이것은 테두리, 배경색, 음영 및 양식의 한 부분을 나머지 부분보다 더 견고하게 보이게 하는 시각적 스타일을 사용하여 만들 수 있습니다.

Office Depot는 신용 카드 필드를 나머지 "덜 민감한" 필드와 명확하게 구분하기 위해 회색 배경과 테두리를 추가합니다.

체크아웃하는 동안 다른 곳에서 비슷한 스타일을 사용하지만 민감함이 떨어지는 정보의 경우 일반적인 스타일로 간주되어 원하는 보안 수준을 높이지 못할 수 있다는 점에 유의하는 것이 중요합니다. 따라서 시각적 캡슐화의 효과를 얻으려면 신용 카드 필드(또는 민감한 필드가 무엇이든 간에)에 대해 구별되어야 합니다.

보안 배지의 위치와 관련하여 신용 카드 필드에 가깝게 배치하면 일반적으로 해당 필드에 대한 신뢰도가 높아집니다. Peapod가 좋은 예입니다.

Peapod는 신용 카드 필드 바로 앞에 VeriSign 배지를 배치하여 해당 필드가 특히 "VeriSign Trusted"임을 암시합니다.

신용 카드 필드와 매우 가까운 곳에 보안 배지를 배치함으로써 고객은 보안에 대해 걱정하기 시작하는 정확한 시간에 양식이 안전하다는 것을 상기시킵니다. 이는 불안한 고객을 달래기 위해 전략적으로 배치된 신뢰성의 상징입니다. 또한 머리글이나 바닥글과 같은 일반적인 위치가 아닌 해당 필드에 가깝게 배치함으로써 사이트는 VeriSign 로고가 해당 필드에 특히 적용된다는 것을 암시하기도 합니다.

매출 상위 100개 전자 상거래 사이트 중 단 하나의 사이트 만이 시각적 캡슐화를 수행하고 신용 카드 필드 근처에 보안 배지를 배치하는 데 성공했습니다. Eddie Bauer입니다.

Eddie Bauer는 시각적 캡슐화와 보안 배지의 전략적 배치를 통해 최적의 구현을 보여줍니다.

Eddie Bauer는 신용 카드 양식(테두리 및 배경 그러데이션 포함)을 시각적으로 캡슐화하고 캡슐화된 양식 내에 보안 배지를 배치하여 시각적 강화 개념을 활용합니다.

기술 보안 대 직감

기술적으로 Eddie Bauer와 체크아웃 필드를 시각적으로 강화하지 않은 상위 전자 상거래 사이트의 89% 사이에는 보안에 차이가 없었습니다. 그러나 고객이 지불 페이지를 디자인에 대한 웹 양식, PCI 규정 준수 또는 SSL(Secure Socket Layer)에 대한 기술적 이해가 없다는 점을 고려해야 합니다. 대신 고객은 직감에 의존하고 웹 사이트가 안전한지 여부를 결정해야 합니다.

우리가 보았듯이, 양식에서 민감한 필드의 인식된 보안을 해제하는 것은 다행스럽게도 비교적 간단한 절차입니다. 단순히 필드를 테두리나 배경으로 캡슐화하고 보안 배지를 근처에 배치하기만 하면 됩니다.