상품검색 다이나믹 Ajax 트렌드
UX 디자인 배우기 #62
Today UX 아티클
※ 이 글은 EnvatoBlog 올라온 Jake Rocheleau가 작성한 「ProductSorting UX Trends For eCommerce Websites」를 원작자의 동의하에 번역 및 게시한 글입니다.
이번 글에서는 Ajax를 활용한 맞춤 UI/UX 분류 기능의 트렌드를 살펴보겠습니다.
다이내믹 Ajax 분류
이 테크닉은 Ajax를 이용한 것으로, 나온 지 10년도 넘었지만 최근 4-5년간 상당히 정제되어가고 있습니다. 요즘 인터넷 유저들은 기다리는 것을 싫어합니다. 페이지 로딩 시간이 몇 초만 되어도 대부분의 사람들은 짜증을 냅니다.
Ajax 결과는 제품 데이터만 끌어오기 때문에 매번 새로운 페이지를 로딩할 필요가 없습니다. 제품 카테고리로 분류할 때 같은 일부 분류 기능은 새로운 페이지를 필요로 하기도 하지만, 가능하다면 간단한 상황에선 Ajax를 한 번 써보세요.
다이내믹 AJax 검색
Vanis Fashion 레이아웃을 보면, 분류 기능을 전환하면 간단한 애니메이션이 뜨는 것을 알 수 있을 겁니다. 리스트형에서 그리드형으로 빠르게 바꿀 수 있으며 전체를 다시 로드하지 않고도 돌아갈 수 있습니다.
분류 옵션을 알파벳형에서 다른 형식으로 바꿀 때도 마찬가지입니다. 대부분의 사이드바 분류 기능은 다이내믹합니다. 만일 가격 필터 중 하나를 클릭하면, 제품 리스트가 업데이트되면서 기존 리스트가 흐려졌다가 다시 뜹니다. 그다음에 그 가격 필터를 다시 해제해서 결과를 뒤로 돌릴 수 있습니다.
유저는 쓸데없이 각 페이지가 다시 로딩되는 것을 기다리고 싶어 하지 않습니다. 이커머스 웹사이트를 만들 때는 이를 염두에 두지만, 모두가 자바스크립트를 지원하지는 않는다는 것을 기억해야 합니다.
하지만, 소수의 인터넷 유저가 자바스크립트를 블록 했다고 해서 Ajax/다이내믹 로딩을 빼지는 마세요. 웹의 미래는 역동적이며 역동성이 줄어들 일은 없을 겁니다.
가격 범위 슬라이더
최고의 Ajax 기반 필터 중 하나가 바로 가격 범위 슬라이더입니다. 제 말이 무슨 말인지 Handy 테마를 보면 이해가 되실 겁니다.
스크러버 아이콘을 왼쪽 오른쪽으로 조절해서 가격 범주를 제한할 수 있습니다. 이 아이콘을 드래그하면 특정 제품이 리스트에서 사라진다는 것을 알 수 있습니다.
매우 빠르게 일어나기 때문이 즉각적이라고 느낄 수 있습니다. 바로 이것, 유저의 인풋에 빠르게 반응하는 간단하고 깔끔한 인터페이스가 바로 현대 웹 유저가 경험하고 싶어 하는 것입니다.
필터 업데이트 시 URL 저장
대부분의 필터에서 오토 업데이트가 구현되는 것을 Wooden 테마에서 확인할 수 있습니다. 색상, 가격, 사이즈, “sort by” 필터 모두 Ajax로 다이내믹하게 업데이트됩니다.
유저가 필터를 업데이트하면 새로운 설정은 해당 URL안에 저장될 수 있습니다. Ajax 인터페이스에서는 페이지가 새로고침 되지 않고도 URL이 업데이트될 수 있기 때문에 만일 유저가 주소를 복사하면 필터도 유지될 것입니다.
이런 필터가 업데이트되는 동안 브라우저 주소 바에 집중한다면, URL도 변한다는 것을 알 수 있습니다. 페이지를 새로 고치지 않고도 가능한 일이며, 일관성 있는 사용자 경험을 만드는 데 도움이 됩니다.
URL 업데이트 테크닉은 Ajax 로딩을 이용하면 생기는 작은 기이한 일에 불과합니다. 추가하기 쉬운 기능이며 쇼핑하는 사람들이 나중에 보려고 URL을 이메일이나 소셜 미디어 업데이트 혹은 북마크에 복사-붙여 넣기 할 때 매우 도움이 됩니다.
저는 제대로 적용할 수만 있다면 Ajax를 사용하기를 권합니다. 다만 모두가 자바스크립트를 지원하지는 않으니 언제나 가능한 대비책을 제공해야 한다는 것을 기억해두세요.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
https://www.inflearn.com/users/196290
