온라인 취미 플랫폼 분석
클래스 101과 아이디어스를 중심으로
안녕하세요 리사입니다�
취미생활이나 자기개발을 하고싶은 사람은 많지만 어디서 어떻게 시작해야하는지 모르는 사람들을 위한 다양한 플랫폼이 있다. 그중 대부분의 서비스에서 언택트 온라인 교육 플랫폼을 제공하기 시작하였는데 이는 코로나19의 영향이 아주 크다고 할 수 있을 것이다.
클래스 101은 이러한 서비스의 대표주자로서 UI 구성이나 UX의 측면에서 비교적 잘 정리되어있다고 생각한다. 이에 클래스 101과 핸드메이드 작가의 제품판매에서 클래스오픈까지 확장한 아이디어스, 취미 동호회 어플에서 언택트 클래스를 오픈한 프립을 비교분석하며 최적의 온라인 클래스 UI를 찾아보고자 한다.
클래스101, 아이디어스, 프립의 온라인 클래스 메인화면목차
1. 서비스와 UI/UX 측면에서 본 온라인 클래스
2. 인터랙션과 비주얼 측면에서 본 온라인 클래스
3. 최적의 온라인 클래스 UI 는?
서비스와 UI/UX 측면에서 본 온라인 취미 클래스
- 클래스 101
Good
응원하기 > 유저는 원하는 클래스를 더 빨리 수강할 수 있고, 클래스101은 어떤 클래스를 유저들이 원하는지, 지속적으로 데이터를 얻을 수 있을 것 같다.
인플루언서, 연예인과의 콜라보, 시그니처 클래스로 홍보 / 신규 유저 상승효과가 있을듯 하다
공예/미술 클래스의 경우 완성작품 갯수대로 완료 사진을 보여주며 목표를 시각적으로 알 수 있게한다
로그인 시, 7일 연속 수강했을 때 얻을 수 있는 포인트 지속적으로 알리고 있다.
수강시 로그인 했을 때 바로 이어서 수강하기 버튼이 나온다 > 수강 목록을 따로 찾지 않아도 된다. 이후에도 하단에 플로팅 됨
클래스 101서비스 중 가장 눈에 띄는 것은 '응원하기'였다. 이 컨텐츠는 글쓴이가 다른 서비스에서 보지못했던 터라 더욱 신선하게 다가왔다. 처음에는 따로 탭을 만들어서까지 서비스를 제공해야하나 생각했지만 유저들의 목소리를 가장 직관적이고 빠르게 알 수 있는 방법인것 같아 필요한 서비스라고 생각하게 되었다.
Hmm…
주문 내역 페이지 '마이페이지 버튼'이 주문 및 배송 버튼 바로 좌측에 위치해있다. 뒤로가기 버튼(뒤로가면 마이페이지)과 겹친다.
좋아요/즐겨찾기 버튼의 경우 흰색이기때문에 하얀 배너 위에서 보이지 않았다.
스토어에서 아이템을 찜을 한 경우, 나의 찜한 클래스로 한번에 노출되기 때문에 클래스와 구분되지 않는다.
스토어에 카테고리를 나눈 검색기능이 필요해보인다.
모바일에서 미리보기 강의가 없어 필요해보인다.
가장 아쉬웠던 부분을 고르자면 스토어 탭의 기능이다.
클래스101에서 진행하고 있는 강의들에 필요한 재료들을 판매하고있는것으로 보이는데 알고보면 그냥 제품을 판매하고있는 경우도 있다. 색연필 세트를 구매하면 현재 판매중인 색연필 강의를 추천해주는 경로를 만들면 어떨까?
1. 마이페이지와 뒤로가기버튼(마이페이지로랜딩)의 중복 2. 찜하기버튼의 가시성 3. 찜한클래스와 찜한 제품의 혼재- 아이디어스
Good
ABOUT, LEARN, ARTIST, PACKAGE 긴 제목으로 지루할수있는 설명글을 정리하고있다
초반 강의 무료공개로 온라인궁금증 해소된다.
준비물 키트제공으로 구매할 수 있도록함. 키트 이미지를 잘 찍어놔서 소장욕구를 불러일으키고 클래스 구매로 이어지게 하는 효과가 있을 것 같다.
강의마다 이렇게 키트를 찍어놓으니 소장욕구가 뿜뿜하는것 같다Hmm…
추천작품(아이템,제품)이 홈 메인으로 구성되어있다. 하단 탭의 '작품' 내에 '홈'이 있는 데 다른 곳으로 넘어가기 위한 홈의 기본 기능을 가지기 보다 '추천 작품'을 보는 데에 그친 것 같아 아쉽다.
사진, 타이틀, 구매자의리뷰를 한 눈에 보여주고 싶었으나 텍스트가 모두 보이지 않아서 사진만 보고 넘어갈 듯하다. (이모티콘 등을 허용하고 있는 지 산만해보이기도 하다)
뒤로 가기 버튼(좌측상단), 닫기 버튼(좌측하단)이 위 아래 섞여 있어 혼란스럽다.
인터렉션과 비주얼 측면에서 본 온라인 취미 클래스
- 클래스 101
Good
홈화면 마우스 hover 기능처럼 모바일 화면에서도 사용자가 콘텐츠를 터치만해도 인터랙션이 나온다. 스크롤 내리면서 호버 기능이 작동하는 콘텐츠에는 자연스럽게 눈이 한번 더간다.(기종마다 지원하지 않는경우도 있는듯 하다)
'class101 signature'는 아이덴티티 컬러를 이용해서 상단과 분리함. 전체적으로 카드형을 사용하다가 하단 콘텐츠에서 원형을 사용해 강조. 타 콘텐츠들과의 차별성을 명확하게 준다.
각 탭마다 상단 메인의 컬러나 표현 방식을 달리 해 구분을 준다.
'포인트 스토어'에서는 내 포인트의 숫자를 슬롯 머신처럼 아래에서 위로 넘어가는 모션을 주어 재미를 준다.
클래스의 특징을 살려 gif와 이미지를 효과적으로 배치하고 있다.
- 아이디어스
Good
상세페이지 선택시 토스트팝업처럼 페이지가 올라오는데 이때 인터렉션이 일반적인 토스트팝업 인터렉션보다 조금더 생동감있다.
즐겨찾기 카드뷰 우측 상단에 있는 즐겨찾기(별)아이콘을 누르면 인터렉션과 함께 컬러가 바뀐다.
1열 카드형 디자인, 영역을 넓게씀. 큰면적에 사진의 비중을 가장 크게해 컨텐츠가 더 직관적으로 다가온다.
사실 온라인 교육 어플리케이션에 복잡한 인터렉션을 넣게 되면 안에 있는 컨텐츠보다 움직임에 더 시선이 뺏길 가능성이 있기 때문에 클래스101이나 아이디어스 모두 재밌다고 느껴질만한 인터렉션이나 비주얼 요소를 많이 넣은것 같지는 않다. 하지만 소소한 마이크로 인터렉션을 통해 어플사용의 재미를 주려고 한 점은 직접 어플을 사용하면서 느낄 수 있는 것 같다.
추가로 프립 어플을 짧게 분석해보자면 언택트 시대에 맞춰 새로운 컨텐츠들이 계속 추가되고있는 듯 하다. 밀키트, 랜선클럽, e북까지 다양한 서비스를 제공하고 있는데 소셜 모임을 오프라인에서 온라인으로 가지고 오는 시도라 우리가 기대하는 그런 모임같은 모임이 이루어질 수 있을지는 앞으로 더 지켜봐야 알 수 있을 것 같다. 언택트 시대로의 변화에 발맞추어 우리모두가 적응해버리게 된다면 앞으론 오프라인 모임보다 온라인 모임이 더 자연스러워질지도 모르니..
프립에서 진행중인 다양한 온라인 컨텐츠들
최적의 온라인 클래스 UI는?
지금까지 3가지의 온라인 클래스관련 어플리케이션을 분석해봤다. 최적의 온라인 클래스 UI가 무엇일지 분석하며 생각해봤었을 때 개인적인 의견일 수 있겠지만 클래스 101의 서비스와 전반적인 UI를 따라가면서 클래스마다의 상세페이지는 아이디어스의 장점을 가져오고 프립의 커뮤니티성 모임까지 가져오게 된다면 어떨까? 라는 생각이 든다.
언택트가 하나의 전세계 문화가 된 것만 같은 조금은 슬픈 요즈음 많은 사람들이 온라인 클래스를 통해 취미도 찾고 자기개발도 할 수 있는 시간을 가졌으면 좋겠다.
