😅 내가 마주한 상황 :
내부 api 요청 1개 + 외부 api 요청 약 20개 정도있는 페이지가 있음.
내부 api 응답은 빠른데 외부 api가 완전 오래 걸리고 앞으로 늘어날 여지가 있음...
응답이 오는데 15초는 걸리는 느낌임
외부 api 응답받는 시간을 줄일 방법은 없었고 UIUX에서 우회책을 찾아보기로 했음
Faceted search ux
사용자가 원하는 조건으로 결과를 점점 좁혀가게 해주는 검색 경험.
예를 들어 쇼핑몰에서 브랜드/가격대/생상/사이즈/평점 이런걸 체크해서 결과를 줄여가는데, 그게 faceted search.
여기서 facet은 ‘분류기준’ 정도로 보면 됨.
쓰는 이유는, 결과가 너무 많을 때 사용자가 검색어를 정확히 몰라도 필터를 조합해서 원하는 걸 빨리 찾게 해주기 위해서임.
장점
- 검색어를 정확히 몰라도 찾기 쉬움
- 방대한 데이터를 빨리 줄일 수 있음
- 사용자가 ‘아 이 데이터는 이런 구조구나’ 이해하기 쉬움
중요한 점
- 분류 기준이 익숙해야 함
- 중요한 필터가 위에 있어야 함
- 선택 결과가 바로 반영되어야 함
- 현재 어떤 필터가 적용됐는지 보여줘야 함
적용해 본다면?
- 페이지 진입 시 : 아무것도 안함
- Entry filter로 예약처를 선택
- 최근 선택 / 즐겨찾기 제공
- 검색 가능 (연계하는 영업장이 많아질 경우를 대비)
- 기타 시간을 줄일 수 있는 필터가 있다면, 추가
- 조회 예상 안내 : 선택된 예약처 12개 / 예상 조회 시간 약 8초
- 병렬 상태 표시 : 예약처 12개 중 5개 완료
참고
Filter before search UX
먼저 조건(필터)를 고르고 그 다음에 검색/조회하는 것.
페이지 진입 시 아무것도 안 가져오고, 사용자가 필터를 선택하면 그 조건으로만 조회하는 것.
리스트 UI보다 검색 UI 느낌이 더 강함.
예시
항공권 검색 : 날짜/출발지 먼저 고르게 함
호텔 예약 : 지역/날짜 먼저 선택
적용해 본다면?
- 외부예약 탭 들어감
- 필터 먼저 보여줌
- 예약처 선택, 날짜 선택
- 조회버튼 클릭, api 호출
참고
progressive disclosure UX
한 번에 모든 정보나 기능을 다 보여주지 않고, 필요한 순간에만 조금씩 열어주는 방식.
처음엔 핵심만 보여주고, 사용자가 더 필요할 때 상세 옵션/추가 정보/고급 기능을 열어줌.
예시
쇼핑몰에서 상품 리스트만 보여주고, ‘상세 필터 보기’ 누르면 가격대, 브랜드, 색상, 배송 조건 이런게 펼쳐짐
적용해 본다면?
기본 영역
- 예약처 선택
- 날짜 선택
- 조회 버튼
고급 필터 보기 - 예약처랴
- 예약 상태
- 시간대
등…
참고
https://uxdesign.cc/5-things-to-be-mindful-of-when-you-design-filters-fc1ca83e157c
summary first detail on demand dashboard
처음엔 요약만 보여주고, 자세한 건 필요할 때만 들어가서 보게 하는 대시보드 (대시보드 구조 전략)
예시
처음 화면에는 전체 외부 예약처 수, 현재 조회 완료 수 / 조회중 수, 오늘 예약 총 건수, 오류 난 예약처 수 등 큰 그림만 먼저 보여줌.
그리고 사용자가 어디가 문제지? 싶을 때만 특정 예약처 상세, 실패 로그를 볼 수 있도록 함.
장점은 현재 상황을 빠르게 파악할 수 있다는 것임.
lazy load tab content ux
탭이 여러개 있을 때, 처음부터 탭 내용을 다 불러오지 않고 사용자가 그 탭을 눌렀을 때만 그 탭 데이터를 로딩하는 방식.
초기 진입 속도를 개선한다는 장점이 있음.
예시
- 내부 예약, 외부 예약, 통계로 탭 구성
- 처음엔 기본 탭(내부 예약)만 로드
- 사용자가 외부 예약 탭 클릭, 그때 예약 데이터 조회
참고
