작가의 글을 더 이상 구독하지 않고,
새 글 알림도 받아볼 수 없습니다.
주요 메뉴 선택 영역의 ">" 버튼 역할 모호성
by
Mar 11. 2025
"주요 메뉴 선택 영역의 ">" 버튼 역할 모호성"
1. 사용성 문제점
H 정부기관 홈페이지에서 검색창 영역을 클릭했을 때 제공되는 페이지입니다. 화면 우측 영역에 "검색도우미"의 '>' 버튼을 클릭했을 때, 사용자는 추가 메뉴나 내용이 펼쳐질 것으로 예상하지만 아무런 반응이 나타나지 않습니다. 일반적으로 화살표 기호인 '>'는 "다음 단계로 이동"하거나 "추가 정보가 있다"는 의미를 내포하고 있어, 사용자는 이를 클릭하면 하위 메뉴가 나타날 것이라고 기대하게 됩니다. 그러나 실제로는 아무런 반응이 없기 때문에, 사용자는 혼란을 겪게 됩니다.
2. 사용자가 느끼는 불편
이 문제는 사용자가 기대에 미치지 못한 결과를 경험하면서 혼란을 느끼고 실망감을 초래할 수 있습니다. 특히 '>' 버튼은 기본적인 UI 요소로 매우 중요한 역할을 하므로, 사용자가 예상한 대로 동작하지 않으면 시스템에 대한 신뢰가 저하됩니다.
사용자는 반복적으로 버튼을 클릭하거나 기능이 제대로 동작하지 않는 것에 대해 의문을 제기하게 되며, 이는 결과적으로 불편함과 혼란을 불러 일으킵니다. 이처럼 버튼의 존재 이유나 기능이 명확하지 않다면 사용자는 그 버튼을 왜 눌러야 하는지에 대한 의문을 품고, 이 의도를 이해하는 데 어려움을 겪게 됩니다.
3. 기획자가 실수한 이유
기획자가 실수한 주요 원인은 아이콘의 의미와 사용자의 기대 사이에서 불일치가 발생했기 때문입니다. '>' 아이콘은 일반적으로 하위 메뉴를 확장하거나 세부 옵션을 나타내는 시각적 요소로 널리 인식되고 있습니다. 사용자는 이를 클릭하면 하위 메뉴나 옵션이 펼쳐질 것이라고 예상하게 됩니다. 그러나 기획자는 이를 다른 기능을 알리기 위한 아이콘으로 사용했기 때문에, 사용자가 기대한 동작과 실제 동작 간의 괴리가 발생한 것입니다.
이러한 불일치는 사용성 테스트나 사용자 행동 분석을 통해 쉽게 발견할 수 있는 문제입니다. 대다수의 사용자는 '>' 아이콘을 클릭하면 하위 메뉴가 펼쳐질 것이라고 예측합니다. 예를 들어, 온라인 쇼핑몰에서 하위 카테고리를 선택하거나, 모바일 애플리케이션에서 서브 메뉴를 열 때 '>' 아이콘은 보통 더 많은 선택지를 제공하는 버튼으로 사용되기 때문에, 사용자는 이를 클릭할 때 "새로운 메뉴가 열릴 것"이라는 기대감을 갖게 됩니다.
하지만 기획자가 의도한 대로 버튼을 클릭했을 때 아무 반응이 없거나 전혀 다른 기능이 실행되면 사용자는 당황하거나 혼란을 겪게 됩니다. 이때 사용자는 버튼이 본래 의도한 대로 작동하지 않는다고 판단하고, 반복적으로 클릭하거나 다른 방법을 찾으려 시도하게 됩니다. 이러한 반복적인 시도는 사용자 경험을 방해하고, 시스템에 대한 신뢰를 떨어뜨리는 결과를 초래할 수 있습니다.
이 문제의 핵심은 기능과 기대 간의 불일치입니다. 기획자는 '>' 아이콘이 의미하는 바와 사용자가 예상하는 행동 사이에 일관성을 확보해야 했습니다. 사용자가 버튼을 클릭했을 때 그 기능이 직관적으로 예측 가능한 대로 동작할 수 있도록 설계하는 것이 중요합니다. 예를 들어, 버튼 클릭 시 하위 메뉴가 펼쳐지거나, 클릭 후 시각적 피드백을 통해 사용자가 기대한 기능이 수행되었음을 명확히 전달하는 방식이 필요합니다.
4. 사용성 개선 방안
(1) '>' 대신 '▼' 기호 사용
일반적으로 '>' 아이콘은 페이지 이동을 암시하는 경우가 많아, 사용자는 이를 클릭하면 페이지 전환이 일어날 것이라고 예상합니다. 그러나 실제로 '>' 아이콘을 클릭해도 시스템은 아무런 반응을 보이지 않습니다. 반면, '>' 아이콘 아래에 위치한 옵션 버튼(예. 세금신고)을 클릭하면 선택한 옵션의 세부 메뉴가 펼쳐집니다.
따라서 '>' 아이콘보다는 '▼' 아이콘을 사용하는 것이 사용자 편의성을 높이는 방법입니다. '▼' 아이콘은 드롭다운 메뉴나 하위 메뉴를 확장하는 것과 밀접하게 연관되어 있어, 사용자는 이를 클릭하면 하위 옵션이 펼쳐질 것이라는 직관적인 시각적 단서를 받게 됩니다. 즉, '>' 아이콘은 사용자가 다음 단계로 이동할 것이라고 유도하는 반면, '▼' 아이콘은 메뉴를 선택하고 확장하라는 시각적 안내로 작용합니다.
(2) '>' 버튼 제거 및 세그먼트 버튼 형태로 변경
혹은 '>' 아이콘을 제거하고 하위 옵션 버튼을 세그먼트 버튼 형태로 변경하여, 사용자가 해당 옵션 버튼을 클릭하면 세부 옵션이 제공될 것임을 명확히 알리는 방식입니다. 이 방식은 특히 직관적이며, 사용자가 메뉴와 그 하위 항목들을 쉽게 식별하고 접근할 수 있게 도와줍니다.
결국, 제시된 두 가지 방법 모두 사용자의 직관적인 기대를 충족시킬 수 있는 좋은 해결책입니다. '>' 아이콘이 사용되는 맥락에 따라 다른 아이콘이나 시각적 요소로 대체하여, 사용자가 기능을 이해하는 데 혼란을 줄이고, 명확한 피드백을 제공할 수 있을 것 입니다.
감사합니다.
"이 글에 대한 '인지심리학 법칙 Case Study'과 '휴리스틱 원칙 Case Study' 등 더 자세한 전문 내용을 원하시면, 이비피알유엑스에서 확인하실 수 있습니다. 참고로, 이 글은 해당 전문의 약 30%에 해당하는 내용입니다."
이비피알유엑스(디지털 정부, 공공기관 등 25년간 사용성 검증 150회 프로젝트 수행)에서는 사용성, UX 디자인, UX 리서치, UX 방법론, 인지심리학, UX 문제점 분석 Case Study 등 다양한 UX 관련 주제를 매일 업데이트하여 제공합니다.