brunch

라이킷 27 댓글

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 위젯이라도 대충 설계하면 불편함이 따를 수 있다는 것을 깨달았다. 사소한 부분까지 세심하게 설계해야 사용성 높은 아코디언 메뉴를 만들 수 있음을 느꼈다.