1. 웹 서비스 선정
1.
선정 이유
a.
스파르타코딩클럽의 강의 화면은 아무래도 6조가 최근 들어 자주 방문하는 웹사이트이다.
b.
아무래도 요즘은 모바일로 웹사이트를 방문하다 보니 PC 화면은 해당 페이지가 익숙함 높고 개선 사항이 있는지 찾을 수 있지 않을까 싶어 선정하게 되었다.
2.
서비스 소개 - 스파르타코딩클럽 강의 화면
2. UI/UX 디자인 분석
1.
화면 구성
목록 열기 전
목록 열기 후
2.
클릭 시 동작
동료들은 어디쯤 왔을까?
이어서 수강하기
커뮤니티 보러가기
완주 꿀팁 보기
강의 자료
목록 열기 / 닫기
강의 듣기
개발일지 쓰러가기
선착순 100명 모집 배너
3.
인상깊은 UI/UX와 이유
호버시, 그림자 / 색상 변경 / 둥근 모서리 적용
- 마우스가 움직이는 곳을 확실히 시각적으로 확인할 수 있어, 사용자 입장에서 심심하지 않으면서도 확실하게 듣고 싶은 강의를 클릭 할 수 있음
수강 중인 강의 - 메인 화면 상단
•
딱딱할 수 있는 강의 화면을 게임처럼 구성하여 재미 있는 느낌으로 UI가 구현되어 있다.
•
개인적인 생각이지만 이게 없었다면 페이지가 매우 심심했을거같고 재미있는 요소를 넣음으로써 좀 더 재미있게 진도를 나갈 수 있었던거같다.
중심부 카드
•
교육생의 수강속도가 어떠한지 타 교육생들과 비교하여 보여주어 학습의욕을 높이고, 숙제같은 강의가 아닌 게임처럼 진행하게 한다.
•
사이드섹션인 랭킹에서도 이름만나와 있었다면 심심했겠지만 픽셀 프로필 캐릭터가있어 재밌는 요소였다
구분선 / 토글 버튼
•
사이드메뉴에도있는 구분선과 전체 강의 부분의 구분선 그리고 토글버튼이다. 토글버튼을 사용함으로써 내가 원하는 부분만 클릭해서 볼 수 있고 만약 없었다면 계속 내리며 찾아야 했을 것이다.
3. 개선 아이디어
튜터 소개
•
개선할 점 : 튜터 소개가 있으면, 내가 듣고 있는 강의의 전문성을 좀 더 입증할 수 있지 않을까 싶음
•
개선 아이디어
◦
튜터 소개 공간을 만들어, 튜터의 한줄말과 경력을 추가하여 수강생들에게 전문성을 부여하기
강의명 추가
◦
개선할 점 : 상단에 강의 제목 노출이 안 되어 있어 강의 목록 쪽을 봐야지만 어떤 강의 페이지인지 확인 가능함
◦
개선 아이디어
▪
수강 중인 강의 윗 부분에 강의 제목 추가
강의 ‘과제 바로 제출하기’ 버튼 추가
•
개선할 점 : 과제만 바로 제출하고 싶다.
•
개선 아이디어
◦
강의자료 버튼 옆 과제 제출 버튼 구현
•
최종안
브랜드 컨셉과 일치시킨 픽셀 아이콘
•
개선할 점 : 아이콘부분에 신경이 많이 갔는데 색과 디자인이 아쉽다고 생각했다. 다른 홈페이지에서는 아이콘을 자체제작 하는곳도 볼 수 있었다. 스파르타페이지의 픽셀컨셉처럼 아이콘도 픽셀느낌을 더 주고 색도 알맞게 넣어주면 페이지에서 심심함이 줄어들고 조화로울거같다.
•
개선 아이디어
◦
스파르타코딩크럽의 컨셉은 픽셀 디자인으로, 픽셀 형식의 아이콘 제작하여 통일감 부여
◦
기존 아이콘
◦
수정한 아이콘
아이콘 개선
•
개선할 점
◦
정보를 나타내어 주는 아이콘이 혼란의 여지가 있다.
◦
주차별로 강의를 완료하면 좋 을 목표 날짜인데, 저 날짜까지 목표인건지, 아님 저 날짜 까지만 강의가 열리는 건지 저 로고만 봐서는 명확하게 이해하기 어렵다.
•
개선 아이디어
◦
아이콘의 모양을 경고에 가까운 표시보단 ‘목표’의 의미에 부합하는 걸로 변경한다.
<Original>
<변경 후 예시 1>
<변경 후 예시 2>
광고 배너 변경
•
개선할 점
◦
국비지원으로 수강신청을 마치고 코스 공부를 위해 로그인을 한 사람들이 들어갈 수 있는 화면이라는 점을 미루어 볼 때, 국비지원으로 다른 수강을 이 시점에서 굳이 찾아들어가지 않는다고 생각한다.
◦
홍보의 대상이 부적절하고, 여러 과목에 대해 목적이 홍보라면 조금 더 효과적인 다른 문구로 변경을 하면 좋을 것 같다.
•
개선 아이디어
◦
기존의 수강생들이 들어가는 페이지니 수강생들이 다른 비수강생 지인들에게 홍보를 하도록 유도하는 것이 좋다고 생각.
◦
그러므로 소정의 댓가를 주는 조건으로 타인에게 홍보하는 쪽으로 변경 하던지 아님 수강생들에게 맞는 다른 이벤트를 넣은 배너로 바꾸면 좋을 것 같다.
<Original>
<변경 후 예시>
•
개선할 점
불필요한 배너 삭제
◦
‘다양한 학습 기능이 궁금하다면’ & ‘완주 꿀팁’ 과 같이 완주까지의 학습에 대한 도움이 되는 것처럼 보이는 듯한 배너를 클릭해서 들어가면 전혀 관계가 없는 환급 정보가 나온다.
◦
게다가 내일배움카드를 발급받아 진행중인 수강자들에게는 더 혼란을 주는 정보가 기재되어 있다.
•
개선 아이디어
◦
개선 아이디어 : 아예 없애거나 차라리 튜터소개 같은 다른 정보들을 넣으면 좋겠다.
<Original>
<변경 후 예시>
