본문 바로가기
기록장

자주 사용하는 웹 서비스 화면 분석 : 넷플릭스

by SIENNA1003 2024. 5. 10.

1. 웹 서비스 선정

선정 이유

웹으로 가장 많이 사용하며 사용자로서 만족감이 높아 분석해보고 싶었다.

 

서비스 소개

넷플릭스는 OTT플랫폼으로 다양한 드라마, 영화, 다큐멘터리 등을 회원제로 볼 수 있다.

 

2. UI/UX 디자인 분석

화면 구성

상세 정보 UI 클릭 시 좌 > 우
[ ▶️ 재생 ] UI 클릭 시 해당 영상이 재생이 된다.

 

[ ℹ️ 상세 정보] UI 클릭 시 우측과 같은 모달 창이 열린다.

모달의 구성은 재생 버튼, 저장 버튼, 평점 버튼, 영상의 정보와 회차 그리고 함께 시청된 콘텐츠가 있다.

평점 버튼은 마우스 커서를 올리면 더욱 다양한 선택지가 뜨고 이를 확실하게 알 수 있도록 토글이 뜨는데 이 부분에서 UI 디자인으로 함축하여 최대한 심플하게 만들었다는 점에서 좋았다.


화면 구성

>를 클릭하면 모달이 뜬다.

 

📌의 지점에 커서를 올리면 모두 보기가 나오고 이를 클릭하면 모달 창을 띄울 수 있다.

이 점에서 아까와 마찬가지로 최대한 글씨를 숨기지만 아이콘을 간단명료하게 제작하여 사용자가 알기 쉽게 UI를 제작한 것이 인상 깊었다.


화면 구성

 

[🔍] UI 클릭시 입력 필드가 나온다.

 

여기서 한 번 더 입력 필드를 클릭하면 우측과 같은 드롭박스가 나온다.

한 번에 검색하는 사용자는 한 번 더 입력 필드를 클릭하지 않지만 검색을 주저하고 있는 사용자라면 입력 필드를 한 번 더 클릭할 가능성을 염두에 두고사용자의 행동을 예측하고 만들었다는 점에서 인상 깊었다.

 

 

3. 개선 아이디어

탭 버튼

탭 버튼이 웹 상단에 위치해있어서 텍스트에 테두리도 없을 뿐만 아니라 글씨도 얇고 작아 눈에 띄지 않는다.

 

[아이디어]

  • 테두리를 만들어 조금 더 이목을 끝다.

 

 

  • 텍스트를 머터리얼 디자인으로 변경 하고 마우스 커서를 올리면 토글이 나오게 함으로써 사용자의 이해도를 높인다.
  • 현재 페이지를 넷플릭스 상호작용 색으로 변경하여 사용자가 현재 어디에 있는지 각인시켜 준다.

 

  • 상단에 위치한 탭 버튼을 우측이나 좌측으로 이동하거나 윈도우의 Badges처럼 밑에 둔다.