사람은 사고를 선형적으로 한다. ‘원인과 결과’, ‘과거와 현재’, ‘현재와 미래’ . 디자인된 무엇인가를 사용할 때도, 원인과 결과로 생각하는 것은 멈추지 않는다. 내가 버튼을 클릭하면 다음 동작이 이어진다. 내가 버튼을 클릭했기 때문에(원인) 다음 동작을 한다(결과). 이를 명명백백하게 보여주기 위해서는 중요한 부분이 눈에 잘 띄어야 하고 적절한 지시 내용을 전달해야한다. 이를 가시성이라고 한다.
가시성의 정의와 중요성
가시성(Visibility)은 UX 디자인의 핵심 원칙 중 하나로, 사용자가 인터페이스의 기능과 상태를 쉽게 인식하고 이해할 수 있도록 하는 것을 의미합니다[1]. 이는 사용자가 시스템과 상호작용할 때 필요한 정보와 옵션을 명확하게 볼 수 있도록 하는 것을 포함합니다. 가시성이 높은 디자인은 사용자가 인터페이스를 직관적으로 탐색하고 원하는 작업을 쉽게 수행할 수 있도록 돕습니다[4].
가시성의 중요성은 “보이지 않으면 존재하지 않는 것과 같다”는 원칙에서 잘 드러납니다. 사용자는 보이지 않는 기능을 사용할 수 없으며, 시스템의 상태를 알 수 없다면 적절한 행동을 취하기 어렵습니다[5]. 따라서 가시성은 사용자 경험의 질을 크게 향상시키는 핵심 요소입니다.
가시성의 주요 원칙
1. 중요한 요소를 눈에 띄게 만들기
가장 중요한 기능과 정보는 사용자의 눈에 쉽게 띄어야 합니다. 이는 크기, 색상, 위치 등을 통해 강조할 수 있습니다[1]. 예를 들어, 주요 작업 버튼은 크고 눈에 띄는 색상으로 디자인하여 사용자가 쉽게 찾을 수 있도록 합니다.
2. 시스템 상태의 명확한 표시
사용자는 항상 시스템의 현재 상태를 알 수 있어야 합니다. 이는 로딩 바, 진행 상황 표시기, 상태 메시지 등을 통해 구현할 수 있습니다[5]. 예를 들어, 파일 업로드 중에는 진행률을 보여주는 바를 표시하여 사용자가 현재 상황을 이해할 수 있도록 합니다.
3. 피드백 제공
사용자의 행동에 대한 즉각적이고 명확한 피드백은 가시성의 중요한 부분입니다. 버튼을 클릭했을 때의 시각적 변화, 작업 완료 메시지, 오류 알림 등이 이에 해당합니다[5]. 이러한 피드백은 사용자가 자신의 행동의 결과를 이해하고 다음 단계를 결정하는 데 도움을 줍니다.
4. 일관성 유지
인터페이스 전반에 걸쳐 일관된 디자인 요소를 사용하는 것은 가시성을 높이는 데 중요합니다[2]. 동일한 기능은 항상 같은 방식으로 표현되어야 하며, 이는 사용자가 인터페이스를 더 쉽게 이해하고 학습할 수 있게 합니다.
가시성 향상을 위한 전략
시각적 계층 구조 활용
정보와 기능의 중요도에 따라 시각적 계층 구조를 만드는 것은 가시성을 높이는 효과적인 방법입니다. 이는 크기, 색상, 대비, 여백 등을 활용하여 구현할 수 있습니다[1]. 예를 들어, 주요 헤딩은 더 크고 굵은 글꼴을 사용하고, 부차적인 정보는 작은 글꼴로 표시할 수 있습니다.
그룹화와 공간 활용
관련된 요소들을 그룹화하고 적절한 공간을 활용하는 것은 인터페이스의 가독성과 가시성을 높입니다[5]. 이는 사용자가 정보를 더 쉽게 스캔하고 이해할 수 있게 합니다. 예를 들어, 설정 메뉴에서 관련된 옵션들을 카테고리별로 그룹화하여 표시할 수 있습니다.
적절한 레이블과 아이콘 사용
명확하고 이해하기 쉬운 레이블과 아이콘을 사용하는 것은 기능의 가시성을 높이는 데 중요합니다[1]. 레이블은 간결하면서도 설명적이어야 하며, 아이콘은 그 기능을 직관적으로 나타내야 합니다. 예를 들어, 저장 기능을 나타내는 데 디스켓 아이콘을 사용하는 것은 널리 알려진 관행입니다.
프로그레시브 디스클로저
모든 정보와 옵션을 한 번에 보여주는 것이 아니라, 사용자의 필요에 따라 점진적으로 정보를 공개하는 프로그레시브 디스클로저 기법을 활용할 수 있습니다[2]. 이는 인터페이스의 복잡성을 줄이고 중요한 요소에 집중할 수 있게 합니다. 예를 들어, 드롭다운 메뉴나 아코디언 패널을 사용하여 추가 정보를 숨겼다가 필요할 때 표시할 수 있습니다.
가시성과 다른 UX 원칙과의 관계
가시성은 다른 UX 디자인 원칙들과 밀접한 관련이 있습니다. 예를 들어, 일관성(Consistency) 원칙은 가시성을 향상시키는 데 도움이 됩니다. 일관된 디자인 패턴을 사용하면 사용자가 인터페이스의 다른 부분에서도 유사한 기능을 쉽게 인식할 수 있기 때문입니다[2].
또한, 단순성(Simplicity) 원칙도 가시성과 연관됩니다. 불필요한 복잡성을 제거하고 인터페이스를 단순화하면 중요한 요소들이 더 눈에 띄게 되어 가시성이 향상됩니다[2]. 그러나 단순성을 추구하다가 중요한 정보나 기능을 숨기지 않도록 주의해야 합니다.
가시성 적용의 실제 사례
이메일 클라이언트
이메일 클라이언트에서 가시성 원칙을 적용한 좋은 예는 Gmail의 인터페이스입니다. 새 이메일 작성 버튼은 크고 눈에 띄는 색상으로 디자인되어 있어 사용자가 쉽게 찾을 수 있습니다[1]. 또한, 읽지 않은 이메일은 굵은 글씨로 표시되어 쉽게 구분할 수 있습니다.
온라인 쇼핑몰
온라인 쇼핑몰에서는 장바구니 아이콘에 담긴 상품 수를 표시하는 것이 가시성의 좋은 예입니다. 이를 통해 사용자는 현재 장바구니의 상태를 한눈에 파악할 수 있습니다. 또한, ‘구매하기’ 버튼을 눈에 띄는 색상으로 디자인하여 사용자가 쉽게 찾을 수 있도록 합니다.
모바일 앱
모바일 앱에서는 하단 탭 바를 통해 주요 기능에 대한 가시성을 높일 수 있습니다. 예를 들어, 인스타그램 앱은 홈, 검색, 게시물 작성, 활동, 프로필 등의 주요 기능을 하단 탭 바에 배치하여 사용자가 쉽게 접근할 수 있도록 합니다.
가시성 향상을 위한 테스트와 개선
가시성을 효과적으로 적용하기 위해서는 지속적인 테스트와 개선이 필요합니다. 사용자 테스트를 통해 실제 사용자들이 인터페이스를 어떻게 인식하고 사용하는지 관찰할 수 있습니다[5]. 이를 통해 가시성이 부족한 부분을 식별하고 개선할 수 있습니다.
히트맵이나 아이트래킹과 같은 도구를 사용하여 사용자의 시선 이동과 클릭 패턴을 분석하는 것도 도움이 됩니다. 이를 통해 어떤 요소가 눈에 잘 띄고 어떤 요소가 간과되는지 파악할 수 있습니다.
또한, A/B 테스트를 통해 다양한 디자인 옵션을 비교하고 가장 효과적인 방법을 찾을 수 있습니다. 예를 들어, 버튼의 색상이나 위치를 변경하여 어떤 옵션이 더 높은 클릭률을 보이는지 테스트할 수 있습니다.
결론
가시성은 UX 디자인에서 사용자 경험을 크게 향상시킬 수 있는 중요한 원칙입니다. 사용자가 필요한 정보와 기능을 쉽게 찾고 이해할 수 있도록 함으로써, 인터페이스의 사용성과 효율성을 높일 수 있습니다. 그러나 가시성을 높이는 것이 곧 모든 것을 한 번에 보여주는 것을 의미하지는 않습니다. 중요한 것은 사용자의 목표와 맥락을 고려하여 적절한 시점에 적절한 정보를 제공하는 것입니다.
디자이너는 시각적 계층 구조, 그룹화, 적절한 레이블과 아이콘 사용, 프로그레시브 디스클로저 등의 전략을 활용하여 가시성을 향상시킬 수 있습니다. 또한, 지속적인 사용자 테스트와 데이터 분석을 통해 디자인을 개선하고 최적화해 나가는 것이 중요합니다.
결국, 가시성이 높은 UX 디자인은 사용자가 시스템을 더 쉽게 이해하고 효과적으로 사용할 수 있게 만듭니다. 이는 사용자 만족도를 높이고, 궁극적으로는 제품이나 서비스의 성공에 기여할 수 있습니다. 따라서 UX 디자이너는 가시성 원칙을 항상 염두에 두고, 사용자 중심의 직관적인 인터페이스를 설계하는 데 주력해야 할 것입니다.
Citations:
[1] https://givegoodux.com/visibility-5-principles-interaction-design-supercharge-ui-2-5/
[2] https://www.andacademy.com/resources/blog/ui-ux-design/interaction-design-principles/
[3] https://www.aela.io/en/blog/all/interaction-design-principles
[4] https://uxplanet.org/how-the-principle-of-visibility-affects-your-ux-design-5f97d5c2d0c1?gi=fd9f64f3d5be
[5] https://dovetail.com/ux/discoverability/
[6] https://www.linkedin.com/advice/0/how-can-you-use-visibility-system-status-principle-2fcnc