드롭다운 메뉴? 세그먼티드 버튼? UX 적용원칙
UX 디자인 배우기 #69
Today UX 아티클
UX Movement에 올라온 Anthony의 글 Why Segmented Buttons AreBetter for Sorting를 전문 번역한 글입니다.
콘텐츠 분류 옵션은 유저가 전체 기록을 살펴보지 않고도 원하는 것을 찾을 수 있게 해줍니다. 하지만 많은 곳에서 분류 옵션을 드롭다운 메뉴로 만드는 실수를 범하고 있습니다. 드롭다운 메뉴를 쓰면 유저가 선택된 옵션만 볼 수 있고 나머지 옵션은 숨겨지게 됩니다. 그러면 유저가 불만을 가질 수 있는데, 이런 문제는 쉽게 방지할 수 있습니다.
드롭다운 메뉴를 쓰는 대신, 세그먼티드 버튼(segmented button)을 사용하면 됩니다.
드롭다운 메뉴는 유저의 태스크와 관련이 없는 옵션을 가지고 있을 때, 공간 절약에 유용합니다. 하지만 분류를 할 때는 모든 분류 옵션이 내용을 찾는 것과 관련이 있는 옵션입니다. 분류를 하는 콘텍스트에서는, 가시성(visibility)을 희생해서 공간을 절약하는 것이 전혀 도움이 되지 않습니다. 또한, 드롭다운 메뉴에서는 옵션을 선택하기 위해 두 번 클릭하고 한 번 스크롤을 내려야 하는 불편이 있습니다.
세그먼티드 버튼은 유저가 모든 소팅 옵션을 볼 수 있게 해줍니다. 선택된 옵션이 무엇인지, 선택할 수 있는 다른 옵션엔 무엇이 있는지 분명하게 볼 수 있습니다. 세그먼티드 버튼에서는 유저가 옵션을 선택하기 위해서 한 번만 클릭하면 됩니다. 다만, 옵션이 더 많을수록 세그먼티드 버튼이 더 많은 가로 공간을 차지하게 된다는 단점이 있습니다.
결론
여러분이 사용하는 유저 인터페이스 컨트롤은 사용자 경험에 영향을 미칠 수 있습니다. 드롭다운 메뉴는 공간을 절약해주지만, 유저의 가시성이 낮아집니다. 세그먼티드 버튼은 유저에게 더 높은 가시성을 갖게 해주지만 옵션을 위한 공간에 제약이 있습니다.
주어진 콘텍스트에서 유저에게 더 중요한 것이 무엇인지 스스로에게 물어보시길 바랍니다. 공간입니까? 아니면 가시성입니까?
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
https://www.inflearn.com/users/196290
