[UX/UI] 날짜와시간 선택 어떻게 해야 직관적일까?
9개의 예약 서비스의 Date Picker 비교 분석
'사용자가 날짜도 선택해야하고, 시간도 선택해야한다면?'
사용자에게 어떤 UX를 제공해야할까요?
날짜 선택지와 시간대 선택지에 따라, 복잡도가 달라지는데요!
현재 우리가 자주 사용하고 있는 예약 서비스들을 비교분석해봤습니다!
가능한 세 가지 시나리오
숙박에서는 날짜 2가지만 선택하면 된다면,
날짜에 이어 시간대까지 선택해야하는 경우, 각기 다른 UX/UI를 제공하고 있었어요!
아래처럼 표로 나눠볼 수 있는데요.
날짜 선택지와 시간대 선택지의 개수에 따라서 각기 다른 UX로 접근하고 있었습니다.
각 예시를 한번 확인해볼까요?
1. 날짜 1개 선택, 시간대 1개 선택
[캐치테이블]
- 바텀시트에서 한번에 해결
- 달력 view + 인원 및 시간대 좌우 스크롤
- 시간대 선택 시 바로 선택 완료 후 선택한 내용 확인
[솜씨당]
- 페이지 내에 선택 옵션 모두 표시 (바텀시트 따로 없음)
- 주간 달력 view + 시간대 좌우 스크롤
+ 일정 문의 선택 시 - 날짜 (월간) / 시간 / 인원 순으로 각 페이지로 나눠져있음.
[강남언니]
- 새로운 페이지 내에서 날짜와 시간대 선택.
- 날짜 주간 view, 시간대 바둑판 배열에서 한 개 선택
- 선택 시 '신청하기' 버튼 활성화
[청연]
- 바텀시트로 선택창 활성화
- 소요시간 (30분 단위로 +-), 날짜(월간), 시간 선택
[똑똑 365]
- 하나의 페이지 내에서 해결
- 날짜(월간), 시간대 드롭다운으로 선택
[날짜와 시간은 어떤 기준으로 보여줄까?]
날짜 선택도 월간과 주간으로 나뉘는데요!
사용자가 보통 오늘 날짜에서 며칠이 떨어진 날을 선택해 예약을 진행하는가에 따라
만약 그 기간이 7일 이내로 짧다면 주간, 7일보다 길다면 월간으로 제공하는 것이 더 적절할 것 같습니다!
시간대의 경우, 지면이 좁다면 가로 스크롤 또는 드롭다운, 바텀시트로,
지면을 차지할 수 있다면 바둑판 배열로 보여주고 있는 걸 알 수 있어요!
2. 날짜 1개 선택, 시간대 2개(시작 - 종료) 선택
날짜는 하루이지만, 시간은 시작과 끝이 있는 경우는 어떤 경우일까요?
바로, 시간제 예약일 것 같은데요!
아무래도 시간대도 두 개를 선택해야하다보니 복잡도가 한층 더 높아집니다!
대표적인 서비스, 스페이스클라우드와 네이버예약을 비교해보려고해요!
[둘의 차이점]
두 서비스의 가장 큰 차이점은
하나의 대공간(OO연습실)이 있고, 그 안에 하위 공간(A룸, B룸 ... )이 있을 때
스페이스클라우드는 대공간에 속한 모든 하위 공간 예약을 한 화면에서 다 제공한다면,
네이버예약은 각각의 하위 공간에 대한 예약을 따로 제공한다는 점이에요!
그래서 그런지, 체감상 스페이스클라우드의 폰트가 더 작은 느낌이 들더라구요!
한 페이지 내에 들어가는 내용이 많아서 그렇게 느껴지는 것 같아요!
처음 스페이스클라우드를 쓸 때는 시간 예약제와 패키지가 헷갈리기도 했는데,
몇 번 사용하다보니 익숙해져 괜찮은 것 같습니다..!
(역시 정말 필요하면, 그럼에도 불구하고 쓴다의 예시 같네요)
하지만 개인적으로는 네이버예약의 UX/UI가 덜 피로하고, 더 직관적이었던 것 같아요!
두 서비스를 한 번 비교해보시면 좋을 것 같습니다!
[스페이스클라우드]
한 페이지 내에 내용이 많다보니, 그래도 내용이 적어보이게 하기 위해서 단계별로 추가로 내용이 표시되게끔 줄여놓은 것을 확인할 수 있어요!
- 시간 단위 예약 또는 패키지 예약 클릭 시 > 달력 표시 > 날짜 선택시 > 시간 표시 > 시간 선택
- 날짜 (월간), 시간대 (시작 - 끝) 선택
- 시간대 별로 가격은 각 칸 안에 표시
[네이버예약]
- 하위 공간 선택 시 페이지 이동
- 날짜 (월간), 시간대 (시작 - 끝) 선택
- 시간대 별로 가격은 라벨로 표시
3. 날짜 2개 선택, 시간대 2개(시작 - 종료) 선택
날짜도 시작과 끝이 있고, 시간도 시작과 끝이 있는 경우인데요!
회사에서 정말 자주 사용했던 구글캘린더와, 차량 예약으로 종종 사용하는 쏘카를 가져왔어요!
두 서비스가 UX/UI가 굉장히 비슷합니다!
[구글캘린더]
- 빈 일정 클릭 시 default 값으로 시작지점으로부터 1시간 일정이 생성됨.
- 시작점의 [날짜 - 시간], 종료시점의 [날짜 - 시간]이 쌍으로 구성되어있고, 각각 수정가능.
- 날짜 선택 시 달력이 드롭다운으로 열림. 날짜 선택 시 닫힘.
- 시간 선택 시 스피너가 드롭다운으로 열림. 시간 선택 시 닫힘.
[쏘카]
- 이용 시간 클릭 시 수정 드롭다운 열림.
- 드롭다운 내, 시작점의 [날짜, 시간], 종료시점의 [날짜, 시간]이 쌍으로 구성됨.
- 시작점 또는 종료시점 클릭 시, 아래로 드롭다운이 열림.
- 날짜와 시간 모두 하나의 스피너로 제공, 종료시점에 대해서는 단위별 추가 버튼 제공.
꽤나 많은 서비스들의 UX/UI를 빠르게 비교해봤는데요!
시간을 선택해야하는 경우 복잡도가 높아지게 되다보니,
다양한 서비스들이 고객이 쉽게 선택할 수 있도록 고민한 흔적이 느껴졌답니다.
저는 개인적으로 캐치테이블, 네이버예약, 쏘카가 헷갈리지 않고, 직관적이면서 깔끔하다고 생각이 들어요!
여러분도 한번 직접 사용해보시고 비교해보시면 좋을 것 같습니다!
