[UX원칙#24] 드롭다운 메뉴와 세그먼티드 버튼 적용 UX 원칙 가이드라인

앤서니의 [드롭다운 메뉴와 세그먼티드 버튼 적용 UX 원칙 가이드라인] 소개하고자 합니다.

콘텐츠 분류 옵션은 사용자가 전체 항목이나 옵션을 확인하지 않고도, 사용자가 원하는 항목을 쉽게 찾을 수 있도록 도와줍니다. 그러나 많은 사이트에서 이 분류 옵션을 드롭다운 메뉴로 제공하는 실수를 범하고 있습니다. 드롭다운 메뉴를 사용하면 사용자는 현재 선택된 옵션만 볼 수 있고, 나머지 옵션은 숨겨져 버립니다. 이로 인해 사용자는 다른 선택지를 쉽게 확인할 수 없어 불만을 느낄 수 있습니다.

예를 들어, 사용자가 특정 카테고리의 상품을 찾고자 할 때, 드롭다운 메뉴 대신 목록 형태로 모든 옵션을 한눈에 보여준다면, 사용자는 다양한 선택지를 비교하여 더 나은 결정을 내릴 수 있습니다. 이러한 문제는 드롭다운 메뉴를 사용하지 않고 모든 분류 옵션을 화면에 표시함으로써 쉽게 해결할 수 있습니다. 이렇게 하면 사용자는 원하는 항목을 더욱 쉽게 찾을 수 있으며, 결과적으로 더 나은 사용자 경험을 누릴 수 있게 됩니다. 이는 사용자에게 직관적이고 편리한 탐색 환경을 제공하는 데 큰 도움이 됩니다.

혹은, 드롭다운 메뉴 대신 세그먼티드 버튼(segmented button)을 사용하는 것이 좋은 대안이 될 수 있습니다. 세그먼티드 버튼은 여러 옵션을 한눈에 보여주어 사용자가 원하는 선택지를 쉽게 확인하고 선택할 수 있도록 도와줍니다. 이렇게 하면 사용자는 각 옵션을 비교하고, 더 직관적으로 원하는 항목을 찾아낼 수 있습니다. 결과적으로, 세그먼티드 버튼을 사용하면 사용자 경험이 향상되고, 탐색이 더욱 원활해지는 장점이 있습니다.

드롭다운 메뉴

드롭다운 메뉴는 사용자의 작업과 관련이 없는 여러 옵션이 포함될 때 공간을 절약하는 데 유용합니다. 예를 들어, 설정 메뉴나 필터링 옵션에서 다양한 선택지를 제공할 경우, 드롭다운을 통해 화면 공간을 효율적으로 사용할 수 있습니다.

하지만 분류 작업을 할 때는 모든 옵션이 사용자가 원하는 내용을 찾는 데 직접적으로 연결되기 때문에, 일부 선택지를 드롭다운 메뉴에 숨기는 것은 사용자에게 다소 불편함이 있을 수 있습니다.

분류 작업에서는 사용자가 필요한 정보를 신속하게 찾는 것이 핵심입니다. 이 경우 시각적 가시성을 희생하며 공간을 절약하는 것은 오히려 사용자 경험을 저해할 수 있습니다. 사용자가 드롭다운 메뉴를 클릭하여 옵션을 선택하려면 두 번 클릭하고 한 번 스크롤해야 하므로, 이는 불편함을 초래합니다. 이러한 추가적인 클릭과 스크롤은 사용자가 원하는 정보를 찾는 데 소요되는 시간을 늘리고, 결과적으로 효율성을 떨어뜨립니다.

따라서, 분류 작업에서는 모든 옵션을 명확하게 보여주는 방식이 훨씬 더 효과적이며, 사용자에게 더 나은 탐색 경험을 제공하게 됩니다.

세그먼티드 버튼

세그먼티드 버튼은 사용자가 모든 소팅 옵션을 한눈에 볼 수 있도록 설계되어 있어, 현재 선택된 옵션과 다른 선택 가능한 옵션을 쉽게 확인할 수 있게 해줍니다. 이와 같은 시각적 가시성은 사용자가 원하는 정보를 빠르게 찾고, 결정을 내리는 데 큰 도움이 됩니다. 또한, 세그먼티드 버튼은 사용자가 원하는 옵션을 선택하기 위해 한 번만 클릭하면 되므로, 드롭다운 메뉴와 같은 추가적인 클릭이나 스크롤이 필요 없어 매우 편리합니다.

그러나 세그먼티드 버튼의 단점은 옵션의 수가 많아질수록 버튼이 차지하는 가로 공간이 늘어난다는 것입니다. 많은 옵션이 포함되면 버튼이 화면의 넓은 부분을 차지하게 되어, 사용자 인터페이스가 혼잡해질 수 있습니다. 이로 인해 사용자는 다른 정보나 기능을 찾기 어려워질 수 있으며, 전반적인 사용자 경험이 저하될 수 있습니다.

따라서 세그먼티드 버튼을 사용할 때는 옵션의 수와 화면 공간을 고려하여 적절한 디자인과 레이아웃을 설정하는 것이 중요합니다. 예를 들어, 옵션을 그룹화하거나 선택 가능한 옵션의 수를 제한하는 등의 방법을 통해 화면을 깔끔하게 유지할 수 있습니다. 이렇게 하면 사용자가 더 쉽게 탐색할 수 있는 환경을 제공할 수 있습니다.