#5 (LNB) 복잡한 네비게이션, 직관성 부족
작성자관리자
- 등록일 25-03-05
- 조회698회
본문
이비피알유엑스의 전민수입니다. 본 UX 분석 아티클의 목적은 하나의 사용성 문제에 대해 단일 법칙만을 적용하는 것이 아니라, 분석자의 시각에 따라 여러 인지심리학 법칙과 휴리스틱 법칙이 복합적으로 적용될 수 있음을 강조하는 데 있습니다. 이는 실무에서 UX 분석의 시야를 넓히고, 문제를 다양한 관점에서 다각적으로 분석하는 데 중요한 도움이 됩니다. 여러분도 현재 운영 중인 제품에서 사용성 문제를 발견했다면, 저와 같이 다양한 시각을 통해 분석하고, 그 근거를 바탕으로 이해관계자들을 효과적으로 설득할 수 있기를 바랍니다. 따라서, 아티클에서 유사하거나 중복된 내용이 있을 수 있음을 양해 부탁드립니다.
"복잡한 네비게이션, 직관성 부족: 보도자료 접근성 향상을 위한 사용성 개선 방안"1. 사용성 문제
A 정부부처 홈페이지의 경우, 보도자료 접근이 복잡하고 직관적이지 않으며, 링크 접근성이 부족해 사용성이 떨어집니다.
(1) 과도한 클릭
사용자가 원하는 정보를 찾기 위해 여러 번 클릭해야 한다는 점에서 사용성에 부담을 줄 수 있습니다. 이상적인 사용자 경험은 최소한의 클릭으로 목적을 달성할 수 있도록 하는 것이 바람직합니다.
현재, 상단 GNB에서 "알림"을 클릭하고, 그 후 LNB 메뉴에서 "보도자료" 하위 메뉴를 선택한 뒤, 페이지 우측에 위치한 "보도자료 >" 링크를 눌러야만 보도자료에 접근할 수 있습니다. 이와 같은 복잡한 내비게이션 흐름은 사용성 측면에서 불편을 초래할 수 있습니다.
(2) 직관성 부족
보도자료에 접근하려면 여러 메뉴를 거쳐야 하므로, 사용자가 이를 직관적으로 인식하기 어려울 수 있습니다. 사용자는 정보를 찾는 과정에서 혼란을 겪을 가능성이 큽니다.
2. 기획자가 실수한 이유
(1) 넓은 화면 활용
기획자는 넓은 화면에서 사용자가 많은 메뉴를 한눈에 볼 수 있도록 하여 가독성과 가시성을 높이려 했을 수 있습니다. 이렇게 하면 메뉴가 한 번에 잘 보이고, 중요한 정보는 페이지 내에서 더 눈에 띄게 표시될 수 있습니다.
(2) 공간 효율성
메뉴를 3단계 구조로 배치하여 사용자가 클릭할 때마다 정보를 점진적으로 확대해 제공하는 방식은 정보의 효율적인 분배와 사용성 개선을 위한 의도일 수 있습니다. 특히 GNB와 LNB 구조를 통해 공간을 최대한 활용하면서도 정보가 과도하게 밀리지 않게 하려는 전략으로 볼 수 있습니다.
(3) 반응형 디자인
이 구조는 모바일에서 반응형 디자인을 적용하여, 화면 크기에 따라 메뉴가 축소되거나 하위 메뉴가 자동으로 확장되어 정보를 제공하려는 의도가 있었을 가능성도 있습니다. 넓은 화면에서는 메뉴의 가시성을 높이고, 작은 화면에서는 정보를 쉽게 찾을 수 있도록 설계한 것으로 해석할 수 있습니다. 다만, 이와 같은 UI 구조의 반응형 디자인은 모바일에서는 유리하겠지만 데스크톱 화면에서는 네비게이션이 너무 복잡해질 수 있습니다.
3. 사용자가 느끼는 태도
기획자의 의도대로 넓은 화면을 활용하여 3단계 메뉴를 우측에 배치하여 가시성을 높이려 한 점은 디자인 측면에서는 긍정적일 수 있으나, 사용성 측면에서는 다음과 같은 사용성 문제점을 유발할 수 있습니다.
(1) 과도한 클릭과 탐색 시간
사용자가 보도자료에 접근하려면 여러 번 클릭을 해야 하므로, 원하는 정보에 도달하기까지 시간이 길어집니다. 이로 인해 불필요한 시간 소모와 탐색의 피로감을 느낄 수 있습니다. 예를 들어, 상단 GNB에서 "알림"을 클릭하고, 그 후 LNB 메뉴에서 보도자료 하위 메뉴를 선택하며, 마지막으로 우측 "보도자료 >" 링크를 클릭해야만 접근할 수 있다는 점은 사용자의 클릭을 과도하게 요구하게 됩니다. 사용자는 한 번의 클릭으로 바로 원하는 정보에 접근할 수 없다는 점에서 불편함과 스트레스를 느낄 수 있습니다.
(2) 직관성 부족
기획자는 넓은 화면을 활용하여 가시성을 높이려는 의도를 가지고 있지만, 그 결과 메뉴 구조가 복잡하고 직관적이지 않게 되어 사용자가 원하는 정보를 찾는 데 혼란을 겪을 수 있습니다. 사용자는 "보도자료"에 접근하는 방법을 명확하게 이해하기 어려운 점이 문제입니다. 여러 단계를 거쳐야 하므로, 사용자가 어떤 순서로 메뉴를 클릭해야 할지 예측하기 어려워 방향 감각을 잃고 혼란스러울 수 있습니다.
(3) 링크의 접근 문제
"보도자료 >" 링크가 페이지 우측에 위치하면서 사용자가 눈에 띄게 직접적으로 확인하기 어려울 수 있습니다. 넓은 화면에서 "보도자료" 링크가 우측 끝에 위치한다는 점은 사용자가 이곳을 찾는 데 어려움을 겪을 수 있다는 문제를 야기합니다.
(4) 정보 과부하와 선택의 어려움
3단계 메뉴는 사용자가 원하는 정보를 쉽게 찾기 어렵게 만듭니다. 메뉴가 층층이 쌓여 있으면 사용자는 각 메뉴 항목을 하나하나 클릭하면서 선택해야 하므로, 정보가 과도하게 분리되거나 과부하가 발생할 수 있습니다. 이는 사용자가 원하는 정보에 빠르게 도달하지 못하게 하고, 결정 과정에서 혼란과 피로를 유발할 수 있습니다.
(5) 응답 속도 및 시스템 반응 문제
여러 단계를 거쳐 메뉴를 선택하는 방식이 시스템 응답 속도와 결합되면, 버튼 클릭과 같은 상호작용 이후 대기 시간이 길어질 수 있습니다. 사용자는 각 메뉴를 클릭할 때마다 응답이 지연되면 불편함을 느끼고, 네비게이션 속도가 느려진다고 생각할 수 있습니다.
(6) 잘못된 기대감
사용자는 웹사이트의 일반적인 사용자 경험에 익숙해져 있기 때문에, 보도자료와 같은 주요 콘텐츠가 상단 메뉴에 직관적으로 위치하기를 기대합니다. 하지만 숨겨진 메뉴 구조에서 이 정보를 찾아야 한다면, 사용자는 기대했던 방식과 다르기 때문에 실망감과 불만을 가질 수 있습니다.
4. 인지심리학 법칙과의 상충
1) 힉스의 법칙 (Hick’s Law) 위배
힉스의 법칙은 사용자가 선택할 수 있는 옵션이 많을수록, 선택을 하기까지 걸리는 시간이 길어지고, 그만큼 결정의 속도가 늦어진다는 이론입니다.
(1) 복잡한 의사결정 경로
사용자가 원하는 정보를 찾기 위해 여러 메뉴를 거쳐야 하므로 선택할 수 있는 옵션이 많아집니다. 이로 인해 사용자는 각 단계를 따라가면서 어떤 메뉴를 선택해야 할지에 대해 여러 가지 판단을 해야 하므로 의사결정 속도가 느려집니다. 여러 클릭과 이동은 사용자가 필요로 하는 정보에 도달하는 데 더 많은 시간을 소모하게 만듭니다.
(2) 인지 부하 증가
여러 단계를 거쳐야 하는 복잡한 내비게이션 흐름은 사용자의 인지 부하를 증가시킵니다. 사용자는 각 단계에서 올바른 메뉴를 선택해야 한다는 추가적인 부담을 가지게 되고, 이로 인해 사용자의 집중력이 분산됩니다. 이러한 과정은 사용자에게 정신적으로 부담을 주어 더 많은 시간을 소모하게 하며, 결국 사용자 경험이 저하됩니다.
(3) 탐색의 비효율성
힉스의 법칙은 사용자가 선택을 해야 하는 옵션의 수가 많아질수록 결정을 내리기까지 걸리는 시간이 증가한다고 설명합니다. 여러 메뉴를 거쳐야만 원하는 보도자료에 도달하는 현재 방식은 사용자가 빠르게 정보를 찾을 수 있는 경로를 제공하지 않기 때문에, 탐색이 비효율적입니다. 이로 인해 사용자는 시간을 낭비하고, 원하는 정보를 얻는 데 더 많은 클릭과 단계를 거쳐야 하므로 사용자 만족도가 떨어질 수 있습니다.
2) 피츠의 법칙 (Fitts's Law) 위배
피츠의 법칙은 사용자가 목표를 클릭할 때, 목표까지의 거리와 크기에 비례하여 목표 선택 시간이 결정된다는 이론입니다. 즉, 사용자가 클릭하려는 대상이 멀리 떨어져 있거나, 크기가 작거나, 눈에 띄지 않으면 클릭하는 데 시간이 더 오래 걸린다는 것입니다.
(1) 목표까지의 거리 증가
사용자가 보도자료에 접근하기 위해 여러 단계를 거쳐야 하므로, 클릭 대상인 보도자료는 여러 메뉴(상단 GNB, LNB, 우측 링크)를 거쳐야만 도달할 수 있습니다. 피츠의 법칙에 따르면, 사용자가 목표까지 도달하기 위한 거리가 길어질수록 선택하는 데 더 많은 시간이 소요됩니다. 즉, 보도자료에 접근하려면 여러 번의 클릭과 이동이 필요하므로 목표까지의 거리가 지나치게 길어져 클릭 시간이 늘어납니다.
(2) 클릭 대상의 분산
보도자료는 상단 GNB에서 알림을 클릭한 후, LNB 메뉴에서 "보도자료" 하위 메뉴를 선택하고, 또 다른 페이지에서 "보도자료 >" 링크를 클릭해야 하는 복잡한 내비게이션 흐름을 거쳐야 합니다. 이처럼 클릭 대상이 여러 위치에 분산되어 있으면 사용자가 목표에 도달하는 데 걸리는 시간이 길어지고, 클릭하기 어렵게 느껴집니다. 피츠의 법칙에 따르면 클릭 대상이 멀리 떨어져 있거나 여러 단계에 나뉘어 있으면 목표 선택이 더욱 어려워집니다.
(3) 목표 크기와 가시성 부족
사용자가 보도자료에 접근하기 위해 여러 단계를 거쳐야 한다는 점은, 각 단계에서 클릭할 수 있는 링크나 메뉴가 눈에 띄지 않아 발생된 문제입니다. 피츠의 법칙은 목표의 크기와 가시성이 선택 속도에 영향을 미친다고 강조합니다. 보도자료를 찾기 위해 여러 단계에 걸쳐 접근한다는 것은 사용자가 이를 인식하고 클릭하는 데 시간이 그만큼 더 걸리게 됩니다.
3) 밀러의 법칙 (Miller’s Law) 위배
밀러의 법칙은 사람의 단기 기억 용량이 7개 정도의 항목을 기억할 수 있다는 이론입니다. 이 법칙에 따르면, 복잡한 메뉴나 너무 많은 항목을 제공하면 사용자는 이를 기억하거나 빠르게 이해하기 어려워집니다. 특히, 보도자료에 대한 접근이 여러 단계로 나누어져 있고, 메뉴가 복잡하면, 사용자는 각 메뉴 항목을 기억하고 올바르게 선택하기 어려워할 수 있습니다. 이는 과도한 인지 부담을 유발하며, 사용자의 피로도를 증가시킵니다.
(1) 메뉴 항목 과다
사용자가 보도자료에 접근하기 위해 여러 메뉴를 거쳐야 하는 복잡한 구조는 사용자가 기억해야 할 항목을 과도하게 증가시킵니다. 밀러의 법칙에 따르면, 사용자는 한 번에 7개 항목을 기억할 수 있기 때문에 메뉴가 3단계로 나누어져 있고, 각 단계마다 여러 항목이 존재하면 사용자가 각 메뉴를 기억하고 적절히 선택하기 어려워집니다. 그 결과, 사용자는 어떤 메뉴를 선택해야 할지 혼란스러워하며, 선택에 시간이 더 걸리고 피로감을 느낄 수 있습니다.
(2) 단기 기억에 대한 과도한 부담
복잡한 내비게이션 흐름은 사용자가 각 메뉴 항목을 기억해야 하므로 단기 기억에 과도한 부담을 줄 수 있습니다. 예를 들어, 상단 GNB에서 알림을 클릭하고, LNB 메뉴에서 "보도자료" 하위 메뉴를 선택한 뒤, 다시 우측의 "보도자료 >" 링크를 클릭해야 한다는 과정은 사용자가 각 단계와 항목을 일일이 기억해야 하므로, 기억 용량을 초과할 수 있습니다. 이로 인해 사용자는 중간에 메뉴 항목을 잊어버리거나, 선택 과정에서 실수를 하게 될 가능성이 큽니다.
(3) 인지적 피로도 증가
메뉴 항목이 복잡하고 많을수록 사용자는 각 항목을 빠르게 인식하고 선택하기 어려워집니다. 밀러의 법칙에 따르면, 너무 많은 항목을 제시하면 사용자가 이를 이해하고 기억하는 데 시간이 오래 걸립니다. 이로 인해 사용자는 각 메뉴를 탐색하고 선택하는 과정에서 인지적 피로도가 높아지며, 결과적으로 불편함을 느끼고 사용 경험이 저하됩니다. 간소화된 메뉴 구조로 사용자가 기억하고 쉽게 선택할 수 있도록 개선해야 합니다.
4) 예측 가능성 (Predictability) 법칙 위배
예측 가능성은 사용자가 무엇을 해야 할지, 어떻게 반응할지 예측할 수 있어야 한다는 UX 원칙입니다. 사용자가 원하는 정보에 쉽게 접근할 수 있도록 메뉴나 버튼이 직관적이어야 하며, 클릭을 통해 얻을 수 있는 결과가 예상 가능해야 합니다.
(1) 사용자가 메뉴 흐름을 예측하기 어려움
현재 보도자료에 접근하려면 여러 단계를 거쳐야 합니다. 상단 GNB에서 "알림"을 클릭하고, LNB 메뉴에서 "보도자료" 하위 메뉴를 선택한 뒤, 우측에 있는 "보도자료 >" 링크를 클릭해야만 보도자료에 도달할 수 있습니다. 이처럼 여러 번의 클릭을 거쳐야 하므로 사용자는 각 단계에서 무엇을 클릭해야 할지 예측하기 어렵습니다. 예측 가능한 사용자 경험을 제공하려면, 보도자료와 같은 주요 콘텐츠가 더 직관적으로 배치되어야 하며, 사용자가 메뉴를 선택할 때 어떤 결과를 기대할 수 있을지 명확히 알 수 있어야 합니다.
(2) 메뉴 구조의 불확실성
현재 보도자료에 접근하는 과정은 여러 메뉴를 거쳐야 하기 때문에, 사용자가 각 메뉴 항목을 클릭했을 때 그 후에 어떤 메뉴로 이동할지 확신하기 어렵습니다. 예를 들어, "알림"을 클릭한 후 그 다음에 "보도자료" 하위 메뉴를 선택하고, 또 다른 클릭을 해야 하는 구조는 사용자가 예상하지 못한 단계나 메뉴로 이동할 가능성이 큽니다. 예측 가능성을 높이기 위해서는 메뉴가 더 직관적이고, 사용자가 다음에 무엇을 선택해야 할지 명확히 알 수 있도록 단순화되어야 합니다.
(3) 결과를 예측할 수 없는 클릭 흐름
현재 보도자료에 접근하려면 여러 단계를 거쳐야 하는데, 각 클릭을 통해 예상되는 결과가 명확하게 예측되지 않습니다. 사용자는 각 단계에서 원하는 정보를 얻을 수 있을지 불확실하기 때문에, 각 클릭을 진행하는 것이 부담스러울 수 있습니다. 예측 가능성을 높이려면, 보도자료와 같은 중요한 콘텐츠는 상위 메뉴에서 바로 접근할 수 있게 제공되어야 하며, 클릭을 통해 바로 도달할 수 있는 결과가 확실해야 합니다.
5. 휴리스틱 법칙과의 상충
1) 시스템 상태의 시각화 (Visibility of System Status) 위배
이 원칙은 시스템의 현재 상태가 사용자가 쉽게 알 수 있도록 표시되어야 한다는 것입니다.
(1) 단계별 진행 상태의 불확실성
사용자가 "보도자료"에 접근하려면 여러 단계를 거쳐야 합니다. 그러나 각 단계에서 사용자가 어느 위치에 있는지 명확한 피드백을 제공하지 않으면, 사용자는 현재 진행 상태를 인식하기 어렵습니다. 예를 들어, 상단 GNB에서 "알림"을 클릭하고, 그 후 "보도자료" 하위 메뉴를 선택하는 과정에서 사용자는 지금 어디에 있는지, 어떤 메뉴를 클릭해야 하는지 혼란스러울 수 있습니다. 이런 상태에서는 시스템의 진행 상태가 시각적으로 명확하지 않아서, 사용자가 원하는 정보를 찾기 위해 필요한 단계를 예측하기 어렵습니다.
(2) 다음 단계에 대한 피드백 부족
사용자가 메뉴를 선택한 후, 그 선택이 어떤 결과로 이어질지에 대한 명확한 피드백이 부족합니다. 예를 들어, 사용자가 "보도자료" 하위 메뉴를 선택한 후, 그 다음에 어떤 정보를 볼 수 있는지 또는 다음으로 어떤 메뉴를 선택해야 할지에 대한 피드백이 제공되지 않습니다. "보도자료 >" 링크가 페이지 우측에 위치한 경우, 해당 링크를 클릭한 후 사용자는 다시 그 링크가 실제로 무엇을 가져올지 명확하게 알 수 없습니다. 이처럼, 시스템은 사용자가 진행할 다음 단계를 인식할 수 있도록 명확한 시각적 피드백을 제공해야 하며, 그렇지 않으면 사용자는 자신의 위치나 다음 단계를 확신할 수 없습니다.
(3) 과도한 메뉴 단계와 관련된 혼란
메뉴가 여러 단계로 나누어져 있을 때, 사용자는 "보도자료"로 가기 위한 경로에서 어느 위치에 있는지 파악하기 어려워집니다. 각 단계에서 진행 상황에 대한 피드백이 제공되지 않으면, 사용자는 계속해서 어떤 단계에 있는지 알 수 없고, 다음 클릭이 자신이 원하는 목표로 이어질 것인지 확신할 수 없습니다. 예를 들어, "알림" 메뉴를 클릭한 후 "보도자료" 하위 메뉴를 선택해야 한다는 점은 명확하게 표시되어 있지 않으면 사용자에게 혼란을 줄 수 있습니다. 시스템 상태가 시각적으로 명확히 표시되어야만, 사용자가 자연스럽게 진행할 수 있는 상태가 되며, 정보에 빠르게 접근할 수 있게 됩니다.
6. 사용성 개선방안
보도자료에 대한 직접적인 링크를 LNB 메뉴에 제공함으로써 사용자는 한 번의 클릭만으로 보도자료 페이지에 접근할 수 있습니다. 이로 인해 사용자는 불필요한 클릭을 줄이고, 원하는 정보를 더 빠르고 쉽게 찾을 수 있습니다. 기획자가 넓은 화면 활용과 3단계 메뉴 구조를 통해 가시성을 높이려는 의도는 긍정적일 수 있지만, 그로 인해 사용자는 과도한 클릭, 혼란, 시간 소모, 링크의 가시성 부족 등으로 불편함을 겪게 됩니다. 이러한 문제들은 사용자가 원활하게 웹사이트를 탐색하고 정보를 얻는 데 큰 장애물이 될 수 있습니다.
이를 해결하려면, 메뉴를 단순화하고, 중요한 정보는 더 직관적으로 배치하여 사용자가 적은 클릭으로 쉽게 정보를 찾을 수 있도록 하는 것이 필요합니다.
감사합니다.