by
Aug 10. 2022
화면 요소는 상하위 계층 구조 상태로 묶어줘야 합니다
UX 디자인 원칙
화면 요소는 시각적 상하위 계층 구조 상태로 보여줘야 합니다.
정보 제공 시 상하위 구조는 시각적으로 명확히 구별되어야 합니다.
예를 들어 약관에는 모든 약관을 한 번에 선택하는 '전체동의'와 각각의 동의 항목을 선별하여 선택하는 '개별동의'가 있습니다.
'전체동의'가 '개별동의'보다 상위 구조이기 때문에 전체동의는 개별동의보다 눈에 잘 띌 수 있도록 '볼드, 크기, 박스 모양' 등 시각적 변화를 줘야 하겠죠?
개편 전 우리카드는 '전체동의'는 볼드 형태로 제공되고 있으나 '개별동의'와 동일한 폰트 크기와 체크박스 모양이 동일해서, 전체동의가 개별동의 항목처럼 잘 못 인지될 수 있습니다.
개편 전 우리카드반면, 개편된(최근) 우리카드의 경우 '전체동의'의 체크 박스와 '개별동의' 체크 박스 모양이 다소 다르고, '전체 동의'의 폰트 크기도 개별동의에 비해 크고, 볼드체 형태로 보여줘 한눈에 잘 인지가 됩니다.
이와 같이 상위 구조와 하위 구조를 한눈에 인지할 수 있도록 체크박스의 크기 변화를 주면 어떤 항목이 상위 항목인지, 하위 항목인지 쉽게 구별할 수 있습니다.
최근 우리카드라이브 클래스 PM VOD 패키지(리서치/분석/전략/설계)
178여개 UX 강좌(총 300시간) PM VOD 패키지 98% 할인 이벤트!!!! 매일 하루에 딱 한명만!!!! 선착순 1명!!!!
