UIUX 레퍼런스 분석 6주차 - VIBE

6주차 레퍼런스 분석으로는 음악 플레이리스트 앱인 VIBE를 진행해 보았다.

앱에 접속하면 뜨는 메인 화면은 3번 좌측의 '투데이'가 기본 화면.

1) 알림, 마이페이지 아이콘이 배치되어 새로운 알림을 앱 시작과 함께 확인할 수 있다.

2) 메인 하단으로는 카드 형태로 구성된 추천 플레이리스트가 상하로 계속 배치되어 있다.

 * 개선점: 음악의 특성상 시각적 표현이 어려운데, 추상적인 이미지의 큰 카드로 배치되어 어떤 느낌의 플레이리스트인지 느끼기 어렵다. 

카드 하단 해당 플레이리스트의 아티스트 명을 확인해야 대충 느낌을 알 수 있어, 대표 아티스트의 이미지 또는 유사한 느낌의 사진 등을 넣는 것도 괜찮을 것 같다.

3) 하단 Bottom bar에서 주요 메뉴들을 선택, 이동할 수 있다.

속해있는 카테고리의 아이콘에 컬러 대비를 명확하게 주어 현재 속한 카테고리를 인지하기 용이하다.

4) 음악을 바로 재생할 수 있는 버튼 또한 동일한 톤의 명확한 컬러 대비감을 주었다.

5,6) 메인 - 차트 페이지에서는 5, 6과 같이 차트들을 그룹핑하여 상하로 계속 배치한다.

5와 같이 랭킹(리스트)형태 또는 6과 같이 아티스트의 앨범아트를 둥글게 표현한 형태를 번갈아 구성하여 구분을 준다.

 

7,8) 7과, 8 등의 모듈이 배치된 메인 - 오디오 화면에서는, 음악이 아닌 실생활에서 음악 외 사운드를 즐길 수 있는 영역을 배치했다.

오디오드라마, 백색소음, 운동 오디오 등 라디오와 같은 느낌을 준다. 

해당 플레이리스트는 직관적이고 명확한 이해를 돕기 위해 구체적인 이미지 카드를 함께 배치하였다.

*개선점: 하단 바텀 바의 오디오 아이콘이 다양한 컨텐츠를 포함하는 이미지임은 느껴지나, 보다 직관적인 아이콘이 없을지 고민해 볼 수 있을 것 같다.

다양한 사운드를 감상할 수 있어 포괄적인 아이콘이 사용되었으나, 한편으로는 어떤 플레이리스트를 들을 수 있는지 '오디오' 글자 외 정보 전달이 필요할 것 같다.

9) 메인 - 검색 창에서는 최상단에 검색창, 그 바로 하단에 최신 뉴스 카드를 띄웠다. 음악을 찾으러 온 유저에게 보다 적극적으로 트렌디한 음악을 홍보할 수 있다. 

10,11) 검색 창 하단으로는, 장르 별로 음악을 확인 할 수 있도록 카테고리 모듈을 배치했다. 이미지 없이 컬러 구분과 폰트, 도형으로만 카테고리를 선택할 수 있도록 하여 유저가 찾고자 하는 장르를 빠르게 선택할 수 있다.

11-1(좌)) 메인 - 보관함 창에서는 상단 Tab 구성을 통해 나의 보관함을 확인 할 수 있다. 플레이리스트를 정렬하여 배치할 수 있도록 우측 아이콘을 배치하였다.

11-2(우)) 선택한 Tab이름 하단 동일한 컬러톤의 바를 띄워 속한 카테고리를 확인 가능하다. 보관함에 해당하는 카테고리가 없을 시 하단 새로 추가할 수 있는 버튼을 배치하였다.

12) 보관함 중 자주 사용하는 메뉴를 먼저 확인할 수 있도록 배치 아이콘을 클릭하여 순서를 바꿀 수 있다.

13) 배치 버튼을 클릭 시 하단에서 popup되는 배치 순서 창에서 tab+drag하는 방식으로 변경 가능하다.

14) 재생 중인 음악 플레이리스트에서는, 음악을 좌측으로 스크롤하여 목록에서 바로 삭제할 수 있다. 예전 사용 시 없던 기능이라 음악을 삭제하려면 체크 후 메뉴창을 띄웠어야 하는데, 편리하게 개선되었다.

15,16) 재생 중인 음악을 반복 재생 하거나, 나의 보관함에 추가 또는 저장 하고 싶을 시 좌측 체크 박스를 선택할 수 있다.

클릭 시 일관된 톤으로 하단에서 메뉴창이 popup되어 바로 선택을 진행할 수 있다. 메뉴창은 아이콘+텍스트로 직관적이다.

 

VIBE는 여러 음악 앱 중에서도 간결하고 매력적인 컬러의 UI들을 사용해, 시각적으로 강렬함을 주는 앱이라 생각해서 레퍼런스 분석을 해 보았다. 몇 년째 사용하며 불편했던 UX 또한 많이 개선된 것이 느껴져 사용하기 더욱 편리해지고 있어 추후에도 레퍼런스 분석을 해 보고 싶다.