brunch

You can make anything
by writing

C.S.Lewis

by Newtudy Sep 06. 2022

아코디언 사용법(UX)

Accordions on Moblie

본 글은 닐슨 노먼 그룹의 <Accordions on Mobile>를 바탕으로 구성했습니다.


아코디언은 모바일에서 공간을 절약하지만 방향 감각 상실과 과도한 스크롤을 유발할 수 있다는 단점이 있다. 따라서 섬세한 설계로 아코디언 메뉴의 편리한 사용을 도와야 한다.


아코디언 정의

숨겨진 정보를 노출하기 위해 제자리에서 확장되는 디자인 요소. 내용을 펼쳤다가 접을 수 있는 컴포넌트 대부분이 아래로 확장되는 모습을 하고 있다.


아코디언의 예시

소셜커머스 기반 서비스에서 쉽게 볼 수 있다.

소셜커머스: 소셜 네트워크(Social Network)를 이용해 이루어지는 전자 상거래. 쿠팡, 옥션 등의 온라인 쇼핑몰을 의미함
 
의류 잡화 쇼핑몰 W concept. 콘텐츠를 아래로 밀어 제자리에서 확장하는 아코디언으로 구현되어 있다.

아코디언의 장점

1.  페이지에 포함된 내용과 정보 유형이 사용자의 목표와 관련이 있는지 빠르게 파악할 수 있다. 

2.  관심 있는 섹션에 빠르게 접근할 수 있다.

3.  서비스의 정신적 모델(Mental Model)을 형성하는데 도움을 준다.

     멘털 모델: 사용자가 현재 시스템에 대해 믿는 것 사용자가 서비스를 경험하며 시스템에 대한 예측을 하고 그 예측을 바탕으로 행동하는 것.


기차 승차권 예매 앱 코레일. 사용자는 섹션을 보고 예매 단계를 빠르게 파악하고 올바른 순서대로 기차를 예매할 수 있다.

4.  긴 양식을 한 화면에서 짧게 보여 줘 사용자 부담을 덜 수 있다.  

모바일 금융 어플 신한 쏠. 금융 서비스는 한 화면에서 보여줘야 할 세부 리스트가 매우 많기 때문에 아코디언을 활용하면 좋다.

아코디언 유의점

방향 감각 상실

아코디언 콘텐츠의 보기를 최대로 늘렸을 때 사용자가 새 페이지로 이동했다고 오해할 수 있다.   

아티클 예제 WebMD

콘텐츠를 늘렸을 때 뒤로 가기 버튼을 누르면 닫힌 아코디언 버튼으로 되돌아갈 수 있다고 기대하지만 뒤로 가기 버튼을 누르면 아예 이전 페이지로 넘어가는 경우가 있다.


이렇게 사용자가 원하지 않는 페이지 이동이 생기는 경우를 대비하기 위해 뒤로 가기 버튼을 누르면 닫힌 아코디언 버튼으로 되돌아갈 수 있도록 해야 한다.


또한 아코디언이 확장될 때 페이지를 스크롤하지 않음으로써 새로운 페이지 도입의 착각을 방지할 수 있다.




빠른 다음 옵션 접근 가능하도록 해야 한다.

아코디언 아래의 내용이 매우 길 수 있으므로 닫기 버튼을 빠르게 찾아 누를 수 있게 해야 한다.

또 신속하게 아코디언을 닫을 수 있도록 영구 아코디언 헤더나 부동 요소와의 상호 작용 속도를 높여야 한다.

아마존 상품 카테고리 선택 화면

신발 사이즈 카테고리 제목의 위치를 고정시키고 그 아래 신발 사이즈 리스트만 움직일 수 있도록 했다.

부동 요소를 통해 빠르게 아코디언을 닫고 다음 옵션을 탐색할 수 있도록 하였다.

작성자 '이지솔'
아코디언 메뉴는 많이 접해본 GUI 위젯인데도 뒤로 가기 설정이나 긴 하위 메뉴에서 빠른 탐색을 위한 방법 등의 유의점은 처음 알게 되었다. 익숙한 GUI 위젯이라도 대충 설계하면 불편함이 따를 수 있다는 것을 깨달았다. 사소한 부분까지 세심하게 설계해야 사용성 높은 아코디언 메뉴를 만들 수 있음을 느꼈다.



아코디언 추가 정보

: 거의 모든 아코디언 메뉴 아이콘의 모습이 동일하다.

아래의 이미지와 같은 화살표 아이콘을 사용했을 때 메뉴를 열고, 닫으며 정보를 볼 수 있다는 메시지를 가장 효과적으로 전달할 수 있다.

따라서 아코디언 메뉴에는 일반적으로 활용하는 아이콘을 사용하여 사용자들이 사용법을 빠르게 판단하고 원하는 정보를 얻을 수 있도록 해야 한다.


화살표 방향의 의미: 아래 방향 화살표 = 열기 / 위 방향 화살표 = 닫기,  아코디언 메뉴 아이콘을 부르는 명칭: Control Icon


긴 아코디언 하위 메뉴 유의점

: 화면 아래에 더 많은 리스트가 있음을 표현함으로써 스크롤링을 유도할 수 있어야 함

영구 스크롤 막대 (Persistent scroll bar)  https://kr.moyens.net/how-to/164298/


마지막 리스트 반만 노출


아코디언 메뉴와 드롭 다운(Drop Down) 메뉴의 차이점

유사점 : 헤더 메뉴를 선택하면 하위 메뉴들이 아래로 나란히 배열되는 모습


첫 번째 차이점 :  ( 아코디언 = 밀어냄 / 드롭다운 = 오버레이 )

아코디언은 선택한 헤더 메뉴의 하위 메뉴들이 배열되며 동시에 선택되지 않은 하단의 모든 메뉴를 밀어낸다.

선택 이전(좌) / 선택 후 하단의 모든 메뉴가 밀려난 모습(우)


드롭다운은 다른 메뉴를 밀어내지 않고 헤더 메뉴 아래에 새로운 리스트가 오버레이 된다.

선택 이전(좌) / 선택 후 새로운 리스트 오버레이(우)


두 번째 차이점 : ( 아코디언 = 다수의 창 열기 / 드롭다운 = 단독 창 열기 )

보편적으로 아코디언은 다수의 창을 열 수 있지만, 드롭다운은 한 번에 한 개의 창만 열 수 있도록  한다.

https://www.w3bai.com/ko/w3css/w3css_accordions.html#gsc.tab=0






<관련 글>


작가의 이전글 모바일에서 많은 양의 정보를 표시하는 방법(UX)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari