[UI/UX 분석 5] 주요 메뉴 선택 영역의 ">" 버튼 역할 모호성

주요 메뉴 선택 영역의 ">" 버튼 역할 모호성

1. 사용성 문제점

H 정부기관 홈페이지에서 검색창 영역을 클릭했을 때 제공되는 페이지입니다. 화면 우측 영역에 "검색도우미"의 '>' 버튼을 클릭했을 때, 사용자는 추가 메뉴나 내용이 펼쳐질 것으로 예상하지만 아무런 반응이 나타나지 않습니다. 일반적으로 화살표 기호인 '>'는 "다음 단계로 이동"하거나 "추가 정보가 있다"는 의미를 내포하고 있어, 사용자는 이를 클릭하면 하위 메뉴가 나타날 것이라고 기대하게 됩니다. 그러나 실제로는 아무런 반응이 없기 때문에, 사용자는 혼란을 겪게 됩니다.

2. 사용자가 느끼는 고통

이 문제는 사용자가 기대에 미치지 못한 결과를 경험하면서 혼란을 느끼고 실망감을 초래할 수 있습니다. 특히 '>' 버튼은 기본적인 UI 요소로 매우 중요한 역할을 하므로, 사용자가 예상한 대로 동작하지 않으면 시스템에 대한 신뢰가 저하됩니다. 사용자는 반복적으로 버튼을 클릭하거나 기능이 제대로 동작하지 않는 것에 대해 의문을 제기하게 되며, 이는 결과적으로 불편함과 혼란을 불러일으킵니다. 이처럼 버튼의 존재 이유나 기능이 명확하지 않다면 사용자는 그 버튼을 왜 눌러야 하는지에 대한 의문을 품고, 이 의도를 이해하는 데 어려움을 겪게 됩니다.

3. 기획자가 실수한 이유

기획자가 실수한 주요 원인은 아이콘의 의미와 사용자의 기대 사이에서 불일치가 발생했기 때문입니다. '>' 아이콘은 일반적으로 하위 메뉴를 확장하거나 세부 옵션을 나타내는 시각적 요소로 널리 인식되고 있습니다. 사용자는 이를 클릭하면 하위 메뉴나 옵션이 펼쳐질 것이라고 예상하게 됩니다. 그러나 기획자는 이를 다른 기능을 알리기 위한 아이콘으로 사용했기 때문에, 사용자가 기대한 동작과 실제 동작 간의 괴리가 발생한 것입니다.

이러한 불일치는 사용성 테스트나 사용자 행동 분석을 통해 쉽게 발견할 수 있는 문제입니다. 대다수의 사용자는 '>' 아이콘을 클릭하면 하위 메뉴가 펼쳐질 것이라고 예측합니다. 예를 들어, 온라인 쇼핑몰에서 하위 카테고리를 선택하거나, 모바일 애플리케이션에서 서브 메뉴를 열 때 '>' 아이콘은 보통 더 많은 선택지를 제공하는 버튼으로 사용되기 때문에, 사용자는 이를 클릭할 때 "새로운 메뉴가 열릴 것"이라는 기대감을 갖게 됩니다.

하지만 기획자가 의도한 대로 버튼을 클릭했을 때 아무 반응이 없거나 전혀 다른 기능이 실행되면 사용자는 당황하거나 혼란을 겪게 됩니다. 이때 사용자는 버튼이 본래 의도한 대로 작동하지 않는다고 판단하고, 반복적으로 클릭하거나 다른 방법을 찾으려 시도하게 됩니다. 이러한 반복적인 시도는 사용자 경험을 방해하고, 시스템에 대한 신뢰를 떨어뜨리는 결과를 초래할 수 있습니다.

이 문제의 핵심은 기능과 기대 간의 불일치입니다. 기획자는 '>' 아이콘이 의미하는 바와 사용자가 예상하는 행동 사이에 일관성을 확보해야 했습니다. 사용자가 버튼을 클릭했을 때 그 기능이 직관적으로 예측 가능한 대로 동작할 수 있도록 설계하는 것이 중요합니다. 예를 들어, 버튼 클릭 시 하위 메뉴가 펼쳐지거나, 클릭 후 시각적 피드백을 통해 사용자가 기대한 기능이 수행되었음을 명확히 전달하는 방식이 필요합니다.

4. 인지심리학 법칙과의 상충

1) 제이콥의 법칙 (Jakob's Law) 위배

제이콥의 법칙은 "사용자는 이전에 사용했던 시스템과 유사한 시스템에서 기대하는 행동을 한다"는 원칙입니다. 사용자가 '>' 버튼을 클릭했을 때 하위 메뉴가 펼쳐질 것이라고 예상하는 것은 과거에 사용한 많은 시스템에서 '>' 버튼이 "다음 단계로 이동"하거나 "하위 메뉴를 펼침"을 의미했기 때문입니다. 이 법칙에 따르면 사용자는 이미 익숙한 시스템의 동작을 바탕으로 예상하고 행동하게 되는데, 이 버튼이 예상과 다르게 동작하면 사용자는 혼란을 겪고 실망하게 됩니다. 즉, '>' 버튼이 반응하지 않으면 사용자는 시스템에 대한 신뢰를 잃고 불편함을 느끼게 되므로 제이콥의 법칙을 위배했다고 할 수 있습니다.

2) 피츠의 법칙 (Fitts's Law) 위배

피츠의 법칙은 "목표까지의 거리와 목표 크기에 비례하여 목표를 선택하는 데 걸리는 시간이 길어진다"는 원칙입니다. 이 문제에서는 사용자가 '>' 버튼을 클릭하려고 시도하는데, 버튼이 아무 반응을 보이지 않으면 사용자는 불필요한 클릭을 반복하게 됩니다. 즉, 사용자는 예상한 기능이 작동하지 않으므로 더 많은 클릭을 시도하게 되어, 목표를 선택하는 데 더 많은 시간이 걸리고, 이로 인해 피츠의 법칙을 위배하게 됩니다. 사용자가 원하는 결과를 얻는 데 필요한 클릭 횟수가 증가하면 목표를 선택하는 데 걸리는 시간이 길어지므로 효율성이 떨어지게 됩니다.

5. 휴리스틱 법칙과의 상충

1) 일관성 및 표준 (Consistency and Standards) 법칙 위배

일관성 및 표준 법칙은 사용자가 예상하는 방식으로 시스템이 동작해야 한다는 원칙입니다. 사용자들은 '>' 버튼을 클릭하면 보통 하위 메뉴나 추가적인 옵션이 나타날 것이라고 기대합니다. 이는 웹사이트, 애플리케이션 등에서 널리 사용되는 디자인 패턴입니다. 그러나 이 버튼이 아무런 반응을 보이지 않으면, 사용자에게 혼란을 주고 기대와 실제 결과가 다르게 나타나므로, 일관성의 원칙을 위반하게 됩니다. 즉, 사용자가 경험한 다른 시스템에서 '>' 버튼을 클릭하면 기대한 동작이 이루어지는 경우가 많기 때문에, 해당 버튼이 반응하지 않는 것 자체가 시스템의 일관성을 저하시킵니다.

6. 사용성 개선 방안

(1) '>' 대신 '▼' 기호 사용
일반적으로 '>' 아이콘은 페이지 이동을 암시하는 경우가 많아, 사용자가 이 아이콘을 클릭하면 페이지 전환이 일어날 것이라고 예상하게 됩니다. 반면, '▼' 아이콘은 드롭다운 메뉴나 하위 메뉴를 확장하는 것과 연관이 깊기 때문에, 사용자가 메뉴 아래 하위 옵션이 펼쳐질 것이라는 시각적 단서로 직관적으로 이해할 수 있습니다. 이를 통해 사용자는 하위 메뉴나 추가적인 옵션을 펼칠 것이라는 기대감을 가질 수 있습니다. 즉 '>' 아이콘은 사용자의 행위를 유도하지만, '▼' 아이콘은 메뉴를 선택하라는 시각적 행위 단서로 활용됩니다.

(2) '>' 버튼 제거 및 세그먼트 버튼 형태로 변경
'>' 아이콘을 제거하고 하위 메뉴를 세그먼트 버튼 형태로 바로 아래에 표시하는 방법은 사용자가 메뉴를 클릭할 때 세부 옵션이 제공될 것임을 명확히 알리는 방식입니다. 이 방식은 특히 직관적이며, 사용자가 메뉴와 그 하위 항목들을 쉽게 식별하고 접근할 수 있게 도와줍니다.

결국, 제시된 두 가지 방법 모두 사용자의 직관적인 기대를 충족시킬 수 있는 좋은 해결책입니다. '>' 아이콘이 사용되는 맥락에 따라 다른 아이콘이나 시각적 요소로 대체하여, 사용자가 기능을 이해하는 데 혼란을 줄이고, 명확한 피드백을 제공할 수 있게 합니다.

이비피알유엑스의 전민수입니다. 본 UX 분석 아티클의 목적은 하나의 사용성 문제에 대해 단일 법칙만을 적용하는 것이 아니라, 분석자의 시각에 따라 여러 인지심리학 법칙과 휴리스틱 법칙이 복합적으로 적용될 수 있음을 강조하는 데 있습니다. 이는 실무에서 UX 분석의 시야를 넓히고, 문제를 다양한 관점에서 다각적으로 분석하는 데 중요한 도움이 됩니다. 여러분도 현재 운영 중인 제품에서 사용성 문제를 발견했다면, 저와 같이 다양한 시각을 통해 분석하고, 그 근거를 바탕으로 이해관계자들을 효과적으로 설득할 수 있기를 바랍니다. 따라서, 아티클에서 유사하거나 중복된 내용이 있을 수 있음을 양해 부탁드립니다.