[2주차]자주 사용하는 웹 서비스 홈 화면 분석

 📖 자주 사용하는 웹/앱 서비스의 홈 화면 UI/UX 디자인을 분석하고, 개선이 필요한 부분에 대한 아이디어를 정리해보면서 UX/UI 적 사고를 넓혀봅시다.

 

1. 자주 사용하는 웹/앱 서비스를 하나 선정합니다.
2. 홈 화면 전체를 캡쳐합니다.
3. 해당 화면의 UI/UX 디자인을 분석합니다.
   1. 화면 구성
   2. 클릭 시 동작
   3. 인상 깊은 UI/UX와 이유
   4. 용어 정리 / 아티클 스터디 에서 조사했던 내용을 참고해봅시다.
4. 분석 내용을 기반으로 개선 아이디어를 정리해봅시다.
   1. 아이디어를 생각해봅니다.
   2. 아이디어에 대한 상세 내용을 와이어프레임 정도로 간단하게 표현해보는 것도 좋습니다.

🗂 참고 아티클마켓컬리 UX 뜯어보기

[UI/UX] Netflix의 UI

[UI/UX] 마켓컬리 앱 분석 - (1) 스플래시부터 뷰티컬리까지

 

---

자주 사용하는 웹/앱 서비스 홈 화면 분석하기

 

엔데믹 전환으로 가장 큰 변화가 보이는 분야는 단연 여행산업이라고 생각한다.

'굶더라도 해외여행'이라는 말이 무색하지 않은 상황에서 국내여행도 멀리하던 유저들은 해외여행으로 경로를 정하고 많은 플랫폼을 이용하여 계획을 세우는 경향을 보였다. 

나 또한 해외여행을 가고싶던 욕망이 들끓어 있던 상태라 해외를 목표로 설정하고 계획을 세웠었다. 그때 무진장 어플을 깔아서 후기 찾아보고 여행 TIP을 얻었던 기억이 있다. 

여행 이후 해외에 가고싶을때마다 접속하는 어플중 하나 트립닷컴..!

사용자들의 생동감있는 여행 콘텐츠들을 보며 대리 설렘을 느낄수 있었기 때문이다

오늘은 트립닷컴 웹/앱 서비스를 분석해볼 생각이다!

 

 

 

트립닷컴[ Trip.com]

Trip.com은 전 세계 200여 개 국가에 걸쳐 140만 개 이상의 숙박 시설, 200만 개 이상의 항공편, 100만 개 이상의 투어 및 액티비티를 제공하는 온라인 여행사이다.

1. 선정 이유

트립닷컴의  홈 화면은 전체적으로 깔끔하고 직관적인 디자인으로 잘 구성되어 있어서 주요 기능과 정보가 한눈에 들어오도록 배치되어 있고 사용하기 쉬운 인터페이스로 접속 시 장시간 체류하는 앱 중 하나여서 선택하였다.

트립닷컴 이용 중 장점이라고 생각했던 부분은 여행을 계획하고 예약할 때 필요한 정보를 쉽게 찾을 수 있도록 직관적인 UI/UX를 제공하고 검색 창은 여행지, 체크인 날짜, 체크아웃 날짜, 인원, 객실 유형 등 다양한 필터를 제공하여 사용자가 원하는 여행 계획을 쉽게 세울 수 있다는 점이다.

또, 할인과 거래를 위한 프로모션 이미지는 사용자가 여행을 예약할 때 추가적인 혜택을 누리도록 유도하였고 모바일 앱 접속 후 첫화면에  이미지 목록으로 사용자들의 여행 경험 히스토리를 콘텐츠로 제공하여 소통 할 수 있도록 배치한 부분도 마음에 들었다. 

▼  UI/UX 디자인 분석

1. 홈 화면 구성

웹사이트 홈화면                                                                                                                                      모바일 앱 홈화면

① 검색 창과 알림 벨 아이콘을 이용하여 사용자가 원하는 항공편을 쉽게 찾을 수 있도록 설계하여 편리함을 주고 있다.

② 홈 화면 상단에는 "호텔", "항공권", "투어&티켓", "항공+호텔" ,"렌터카" 등 주요 기능이 크게 배치하였고 "New" 섹션을 통해 새로운 프로모션이나 핫딜 정보를 제공하여 접근성을 높여 준다.

③ 어플에서는 상단 검색창을 고정시켜서 컨텐츠 접근과 동시에 원하는 페이지에 도달할수 있는 방안이라 생각했다. 하지만 웹 사이트에서는 스크롤 시 검색창이 고정되지 않는 부분이 아쉬웠다. 

2. 개선 아이디어

1. 검색 결과에서 숙박시설의 사진이나 시설 정보 등을 더 자세히 확인할 수 있도록 개선하면 좋겠다.

2. 사용자의 과거 검색 기록이나 예약 내역을 기반으로 사용자 맞춤형 추천 기능을 제공하면 더 편리 할 것 같다.

 

▼ 해당 화면의 UI/UX 디자인 분석

1. 세부 화면 구성 

 

 

 

● 상단 화면의 주요 내용은 항공편 옵션 목록으로 각 날짜 옵션을 선택하여 직곽적인 실시간 항공권 금액을 확인할 수 있도록 배치하였다. 

 

● 검색 필터 기능을 이용하여 구체적인 결과를 얻을 수 있도록 배치하였다.  

배치하

●  출발 및 도착 시간, 항공사 및 가격이 표시되며 가격순으로 정렬되어 있고 가장 낮은 가격이 상단에 위치한다. 

 

● 하단 화면 추가 옵션을 통해 사용자가 한 번의 탭으로 특정 기능에 도달할 수 있도록 하고 있다. 

 

2. 클릭 시 동작  

 

 

● 메뉴 선택 시 나타나는 로딩 화면으로 여행 관련 아이콘을 모션으로 나타냈고 체류 시간이 길어질수록 로딩 시간은 짧아진다. 

 

 

 

3. 인상깊은 UI/UX와 이유

●  주요 기능과 정보를 강조하여 화면 상단에 "홈", "항공권", "호텔", "투어&액티비티", "프로모션", "My 예약", "앱" 등 주요 기능과 정보가 크게 배치되어있어서 원하는 정보를 빠르게 찾을 수 있도록 했다.

-> 주요 기능과 정보가 한눈에 들어오도록 배치되어 있어, 사용자가 원하는 정보를 빠르게 찾을 수 있다는 점이 좋았다.

●  직관적인 검색 기능으로 화면 상단에는 검색창이 제공되고 도시, 공항, 지역, 랜드마크, 호텔 이름 등을 입력하여 원하는 목적지를 빠르게 확인할 수 있었다. 

-> 검색창의 크기가 크고, 검색어를 입력할 때마다 실시간으로 결과가 표시되기 때문에 편리하게 히스토리를 기록 할 수있는 점이 좋았다. 

●  화면 상단에는 예약 기능을 제공하여 날짜, 인원, 호텔 성급 등을 선택하면 해당 조건에 맞는 숙박시설을 추천해주고 예약 버튼이 크게 배치되어 있어 예약 과정이 간단하기 때문에 빠르게 예약을 완료할수 있는 편리성을 주었다. 

-> 예약 과정이 간단하고, 예약 버튼이 크게 배치되어 있어 빠르게 예약을 완료할 수 있다는 점이 좋았다.