효과적인 아코디언 디자인(UX UI)
아코디언 디자인은 이렇게 해봅시다.
본 글은 닐슨 노먼 그룹의 <Accordion Icons>를 바탕으로 구성했습니다.
아코디언은 오늘날 널리 사용되는 UI 요소입니다.
모바일에서는 콘텐츠를 접어서 페이지 길이를 관리할 수 있도록 하기 때문에 필수 도구입니다.
데스크톱에서도 시각적인 복잡성을 줄이고 사용자가 당면한 작업과 가장 관련이 있는 콘텐츠에 집중할 수 있도록 합니다.(특히 복잡한 애플리케이션에 적합합니다).
그렇다면 가장 효과적인 ui는 어떠한 모습일까요? 우선 사용되고 있는 아이콘들은 아래와 같습니다.
1. 캐럿(또는 아래쪽 화살표)
일반적으로 아코디언이 열리는 것을 나타냅니다. 확장 후에는 캐럿의 방향이 바뀌며 축소하는 동작을 안내합니다.
2. 플러스
일반적으로 아코디언이 열리는 것을 나타냅니다. 캐럿과 마찬가지로 클릭 후에 플러스 기호가 마이너스 기호로 바뀌어 새로 확장한 콘텐츠를 축소하는 행동을 나타내는 표시자가 됩니다.
3. 오른쪽 화살표
같은 페이지를 유지하며 콘텐츠를 확장하거나 다른 페이지를 방문하거나 하는 두 가지로 나타날 수 있습니다.
4. 아이콘이 없는 경우
그렇다면 아코디언을 여는 신호를 보내는 것에 가장 효과적인 아이콘은?
연구를 위해 각 프로토타입에 대해 5개의 다른 변형을 만들었습니다. 각 변형은 5개의 아이콘(화살표, 캐럿, 플러스, 포일)으로 나타납니다.
그리고 참가자들에게 각각의 아코디언에서 정보를 찾는 작업을 만들었습니다.
(예를 들어, 소비재 리뷰 웹사이트의 프로토타입에서 과제는 "식기세척기 리뷰 찾기"로 진행)
이러한 작업을 바탕으로 나온 결과는 탭한 위치와 참가자의 기대로 나눌 수 있습니다.
우선 탭 경험에서도 아이콘이 없을 때는 사용자는 아이콘이 있는 빈 공간보다 텍스트 레이블을 훨씬 더 많이 누릅니다. 더불어 캐럿 아이콘의 경우, 통계적으로 아이콘을 누르는 경향이 많았습니다. 이를 통해 유저가 확실한 조작을 선택하고자 하는 것을 알 수 있습니다.
다음은 새로운 페이지가 열리는 것에 대한 기대입니다. 포일과 아이콘이 없는 경우 페이지 이탈에 대한 강한 기대가 있는 것으로 나타났습니다. 그러나 대부분의 경우가 비슷한 양상을 띠기 때문에 페이지에 머무르는 것과 밀접한 관련이 있는 표준 기호는 없다고 볼 수 있습니다.
총 정리
아코디언 패턴의 경우 대부분의 표준 아이콘에 대해 아이콘과 라벨을 거의 동일하게 탭 하는 경향이 있습니다. 즉 라벨과 아코디언에 각각 다른 기능을 넣는 것은 안전하지 않습니다.
아코디언 기호에 새로운 아이콘을 만들거나 기호가 전혀 사용되지 않는 것은 새로운 페이지로 이동된다는 기대에 위배되기 때문에 좋은 생각이 아닙니다.
모바일 메뉴에서 아코디언을 사용하는 경우 캐럿이 가장 안전한 아이콘 선택인 것 같습니다.
아이콘과 텍스트 레이블이 다른 작업(페이지)에 링크되지 않도록 합니다.
국내 사례
작성자: 신다혜
<관련 글>
