시간 선택 UI 디자인 변경과정(UI UX)

[문제점 제기]

• 모바일 화면에서 time slot 방식은 작은 화면에서 불편함을 발생
• 변경 디자인에서 날짜 부분에서는 캘린더가 없어져 날짜를 선택하기 힘들다. → 선택할려면 날짜 이동버튼을 계속 클릭해서 이동후 선택해야한다.
• 궁극적으로 사용자가 시간을 한눈에 파악하기 힘들고 선택하기 힘들다는 문제점을 제기했을때 time slot select하는 방식은 날짜와 시간 정보가 시간 박스에 담아져있는것이 아니라서 보기가 불편할 것 같다는 생각이 들었다.
  • 최상단 행 왼쪽 열을 확인하면서 선택해야함

 

⇒ 그래서 시각적인 불편함을 없애고 시간을 한눈에 알아볼 수 있고 직관적으로 선택할 수 있는 시간 선택 UI를 조사해봄. 타 사이트 시간 선택 화면을 알아본 결과 시간 박스를 드래그하는 time slot select 형식보다는 시간을 줄글 형태로 나타내고 버튼을 선택하는 형식이 많았음.

⇒ 따라서 저번 회의 결과 네이버 예약페이지 화면을 보고 비슷하게 구현하기로 결정함.

 

• 네이버 예약페이지 참조

[ 진행 과정 ]

 

- 예전 코드에 이미 날짜를 선택할 수 있는 캘린더가 구현되어 있어서 시간 선택 버튼만 수정하면 될 것 같음

- 페이지를 로딩할때 선택가능한 날짜데이터를 배열 형태로 가져오는데, 이 것을 map을 돌려 보여주기로 결정

- 그리고 네이버 예약 페이지를 참조하여 가로로 넓고 border가 둥근 박스로 시간선택 박스 디자인을 변경함

 

 

[현재 상태]

 

[느낀 점]

 

이전의 UI보다 상대적으로 더 선택할 수 있는 폭이 넓어져서 사용자의 입장에서 편리할 것 같다.

그리고 예전보다 더 한눈에 시간을 볼 수 있게 되어 사용자 경험이 향상된 것 같다.