인터넷쇼핑몰에서 상품탐색을 위한 UI 연구

인터넷쇼핑몰에서 상품탐색을 위한 UI연구 LGeShop CASE HCI - final report

목 차 • 연 구 배 경 • 연 구 목 표 • 연 구 방 법 • 정보탐색요소 구조도 • 정보탐색의 변인설계 • 상품탐색에 영향을 미치는 요인분석: 설문결과 • UT실행 • UT 결과 요약 & 개선사항 • 비교사례 첨부 • Conclusion HCI - final report 2

연구배경 • 인터넷 쇼핑몰의 상품다양성은 점차 높아지고 있는 추세이지만, 이러한 정보량의 증가만으로는 고객들의 만족도를 높여갈 수는 없을 것이다. • 정보탐색 구조는 인터넷 쇼핑몰에서 상품을 찾기 위해 무엇보다도 필요한 요소이며, 이러한 Customer interface가 얼마나 효율적인 결과값을 낼 수 있도록 되어 있느냐가 쇼핑몰의 성패에 중요한 영향을 주게 될 것이다. (즉, 상품탐색에 어떠한 개선사항이 있을지에 대한 점검이 필요한 시점이다.) • 현재 인터넷 쇼핑몰에서 매출액 1위를 점유하고 있는 LGeShop 쇼핑몰을 연구대상으로 하여 상품탐색의 편의성 및 문제점을 알아본다. HCI - final report 3

연구목표 • 인터넷 쇼핑몰의 상품탐색 시 사용자 편의성에 영향을 미치는 각 요인들을 찾아 내어 특징을 알아본다. • 고객들의 쇼핑몰 주요 방문목적은 상품탐색에 있다는 것을 전제로 하여, LG eShop에서 상품탐색 도구로 쓰이는 대표적인 세가지 방법을 통해 장단점을 알아본다.( e카달로그, 상품카테고리분류, 검색도구) • 더 나아가 구체적인 상품탐색 상의 문제점 및 개선사항을 살펴봄으로써, 정보구조 및 소비자 인터페이스에 있어 인터넷 쇼핑몰의 사용성을 높일 수 있도록 한다. 상품탐색을 할 수 있는 여러 방법에 대해 그 효율성들을 살펴 보아야 한다. HCI - final report 4

연구방법 • FGI를 통하여, 상품탐색 편의성에 영향을 미치는 변인을 포착해 낸다. ; 변인 도출해냄. • 설문조사를 통하여, 쇼핑몰상품탐색 편의성의 문제점을 객관적으로 파악한다. (3가지 검색방법 별) 실험자: 4인 / 피실험자: 40인 설문항목: 00 문항 설문기간: 2003년 6월3일 – 2003년 5일 (3일간) 설문대상: 20~30대 연령층 남녀 • UT 수행을 통하여, 쇼핑몰 상품탐색 편의성 개선에 필요한 opportunity를 구체적으로 정리한다. (정성적인 자료 보강) 시행 일시: 2003년 6월6일 테스트인원: 3인 UT mission: 일정 상품을 정해진 task에 따라 찾아보게 한다. 1 2 3 HCI - final report 5

위의 요소들이 제일 큰 영향을 끼친다는 결과를 근거로 하여, 이러한 요소들을 포함해, 토론을 거쳐 기타변인을 추출해냄. 정보탐색 요소 구조도 다음과 같은 체계도를 참조하여, 인터넷 쇼핑몰에서 상품을 찾기 위해 소비자에게 영향을 미치는 정보탐색의 주요변인들을 추출하였다. 사이버 쇼핑몰에서의 인지/감성적 요소 정보구조의 복잡성 정보량 정보탐색 정보배치 프로세스 난이도 글자체제 화면색 멀티미디어 깊이 밀도 키워드검색 위치 검색절차 색 밝기 음성 넓이 grouping 분류항목별검색 텍스트/그림의비율 주문절차 크기 대비 정지화상 글꼴 동화상 분류항목별키워드검색 분류기준 지불절차 반전 도형 해상도 주문내역 추적 깜박임 -사이버 쇼핑몰 인지/감성적 요소 구조도- 참조: 임춘성 외, 사이버 쇼핑몰에서 효과적인 정보탐색을 위한 사용자 인터페이스 디자인에 관한 연구, 연세대학교 산업시스템공학과 HCI - final report 7

상품 탐색의 변인설계 1) 상품탐색에 영향을 미치는 변인 4가지 : 정보의 구조화, 정보탐색 용이성, 정보량, 탐색만족도. 정보의 구조화 : 쇼핑몰 내에서 상품 및 상품정보들이 얼마나 짜임새 있게 만들어지고 정돈되어 있나? 정보탐색 용이성 : 정보를 얼마나 쉽고 빠르게 찾아갈 수 있도록 되어있나? 정보량 : 얻을 수 있는 결과값의 양은 어떠한가? 상품 수나 품목 등. 탐색만족도 : 각 탐색방법 별로 얻어낸 결과에 대한 만족은 어떠한가? HCI - final report 8

상품 탐색의 변인설계 2) LGeShop의 상품탐색 방법: 목표상품을 찾아가는 대표적인 탐색방법 3가지를 기준으로 하여 정보탐색의 유용성을 알아보기로 함. 3.찾고싶은 상품키워드를 직접 입력하는 방법 1.Off-line에서 홍보용으로 제작된 카다로그를 온라인에 적용하는 방법 2.분류되어 있는 상품군을 통해서 원하는 상품을 찾아 들어가는 방법 HCI - final report 9

설문조사결과 주목해볼 만한 사항으로 상품탐색 시 주로 사용하는 검색도구를 이용한 탐색만족도가 다른 방법에 비하여 의외로 낮게 나왔다. 이에 이 사항을 중점적으로 살펴보기 위해, UT 미션을 검색도구를 이용한 상품탐색으로 잡고,문제점과 개선사항에 대해 구체적으로 알아보기로 하였다. 탐색의 만족도 정보량 정보탐색 용이성 정보의구조화 상품탐색에 영향을 미치는 요인분석-설문결과 HCI - final report 10

상품탐색에 영향을 미치는 요인분석 - 설문결과내용 (1) E-카달로그 메뉴: page이동/확대, 축소 - 페이지 오류 제거요망 - 로딩되는데 오래 걸림 - 상품검색의 측면보다는 각 시즌 별로 한정된 페이지 상품제시 - 가격비교 보다는, 확대 시 선명한 화면을 통한 아이쇼핑 오프의 통신판매와 인터넷 판매와의 연계 (해당상품 코드클릭 시 인터넷 상품페이지로 연동) 해당상품 : 코드번호 더블클릭- 상세상품page) 화면클릭시 확대 HCI - final report

상품탐색에 영향을 미치는 요인분석 - 설문결과내용 (2) 상품 카테고리 분류 • - 일반적인 쇼핑몰 사용자들이 사용(빈도수 높음) • - 카테고리의 메뉴명과 상품의 분류의 중요성 • : 제대로 되어 있지 않거나 동일상품군에 있어야 하는 품목들이 • 여러 카테고리에 의도적으로 분류되어 있어 원하는 상품탐색을 하는데 • 너무나 많은 시간이 경과 • → 애매한 물품은 여러 카타고리에 중복시킴 • - 이동 시 번거롭고 시간이 많이 걸림 • →보통 플래시나 스크립트로 드랍다운 메뉴를 사용하여 하위메뉴를 알기 쉽게함 • - 카테고리의 폭과 깊이가 적정해야 함 • [차후 희망사항] • - 카테고리 내에서 검색도구를 활용 희망 • - 고객이 카테고리를 정열 할 수 있도록.개인화 작업 • → 사용자가 즐겨찾는 카테고리를 만들어 물건을 담아 놓을 수 있도록 • 일종의 즐겨찾기 HCI - final report

상품탐색에 영향을 미치는 요인분석 - 설문결과내용 (3) 검색도구 - 너무 많은 정보량으로 구체적으로 찾기 어려움 - 카타고리가 애매하거나 구체적 상품을 구매하고자 할때 사용. [검색에선 나오지 않고 카테고리를 찾아가면 찾는 상품이 있는 경우] - 구매가 급한 고객의 경우 검색에서 나오지 않았을 경우 그 쇼핑몰을 나가게 되고 이후 없을 것이라는 선입견으로 그 쇼핑몰을 판단 → 쇼핑몰내 검색엔진의 중요성 HCI - final report 13

Usability Test 설문조사 결과에 나타난 것과 같이 검색도구를 활용한 상품탐색 시, 불편함을 구체적으로 파악하기 위하여 UT (usability test)를 실행하였다. UT mission: “제시된 일정 상품을 피험자에게 찾게 한다.” (실험자는 피실험자가 정보탐색을 어떻게 하는지 관찰한다.) *Task1: 상품을 제시(사진 및 대략특징설명, 명칭 알려주지 않고)하고 검색창에 키워드를 사용하여 찾아보라고 함. *Task2: 찾아낸 상품이 목표상품과 일치하는지 확인해 보라고 함. *Task3: 찾아낸 상품이 맞으면, 그 상품이 나온 페이지를 살펴보라고 함. HCI - final report 15

Usability Test – Task 1 Task1: 상품을 제시(사진 및 대략 특징설명, 명칭 알려주지 않고)하고 검색창에 키워드를 사용하여 찾아보라고 함. 주요 멘트 및 행동 문제점 발견 개선방안 상품창에 디지털카메라 라고 씀. 결과 화면 뜸. 검색창중 자세히 찾기에 300 만 화소 칩니다. 앗 .. 검색결과가 안나오네요. 디지털 카메라쳐서 들어와서.. 300만화소 순으로 찾아가는데 자세하게 검색하기의 의미가 없는 거 같습니다. 자세하게 검색해 들어갈때.. 소비자가 어떠한 개념으로 상품을 찾아가는지..그 키워드의 단계를 고려하여 검색 값이 나오도록 조정해주었으면 함. 자세하게찾기 검색창에.. 300만화소라고 침. 찾기 실패함. 실험1 디지털카메라>삼성 이렇게 자세하게 찾아들어갔는데 결과값에서 전혀 딴 상품부터 리스팅 되어 뜸. 디지털카메라는 한참 아래나옴. 검색후, 결과창 리스팅의 문제를 개선해야함. 그럼 삼성이라 칠까요(자세하게 찾기에 다시 삼성이라고 침) 검색창 뒤로뒤로 돌아가서 쭉 보더니 베스트셀러란에서 상품찾음. 처음부터 이걸 발견못한것을 보면, 베스트셀러라는란을 일반 구성텍스트와 구별해 디자인해야 효과가 생길듯함. 실험2 (실제 디지털 카메라를 보여주면) 삼성상품으로 30만원대를 찾아보세요. - 화면상단에 있는 검색창 찾음- 검색창에 “삼성 디지털 카레라” 입력 -검색창이 전체 색상과 차별화 되어 있지 않음 - 기본검색은 제조사 혹은 상품명검색 불가능 • 색상 차별화 • 드랍다운 메뉴로 제조사나 상품녕가능케 함(물론 기본은 원래처럼) 실험3 상단의 상품검색 창으로 시선을 돌리고 커서를 옮김 -> 일단 디지털 카메라를 키워드로 검색 -> 검색결과 페이지 나옴 검색페이지에 매장별 검색결과 및 베스트 셀러, 검색결과등 컨텐츠는 많으나 복잡하게 느껴짐 컨텐츠 별로 그룹핑을 하여 디자인 하는게 나을 듯함 HCI - final report 16

Usability Test – Task 2 Task2: 찾아낸 상품이 목표상품과 일치하는지 확인해 보라고 함. 주요 멘트 및 행동 문제점 발견 개선방안 상품사진을 눌러 들어가겠습니다. 아.. 사진이 정말 좋군요. 실험1 상품정보도 자세하게 나와 참 좋군요. 네..320만화소 구요. 아까 본 상품이랑 맞습니다. -검색화면을 나타내는 부분 과도(실제상품리스트를 보기 위해 스크롬)- 초기리스팅의 기본값을 모름(가격? 가나다?)-한화면에서 리스틍 카타고리를 알 수 없음 (리스팅이 단순) • 검색을 나타내는 부문을 줄여 스크롤을 사용을 줄여줌 • 리스팅시 드랍다운메뉴로 가격이나 제조사 등를 할 수 있게 함 - 결과화면에서 상품확인- 해당 상세 상품화면으로 이동- 카타고리로 이동 다시 검색후 선태 실험2 제조사 순으로 정렬 -> 삼성 디지털 카메를 찾으려함 -> 정렬된 검색결과 페이지가 나오지만 삼성을 5번째 페이지에 가서야 겨우 찾을 수 있음 -> 제조사가 가나다 순이 아님을 발견함 ▶검색결과 페이지에서 제조사 순으로 정렬을 하였으나, 삼보가 맨처음, 캐논이 다음순으로 리스팅 되어 나왔다. ▶제조사순으로 되어있지만 가나다 순으로는 되어있지 않았다. ▶정렬이 제조사 순으로 되어있지만 어떤 기준으로 리스팅이 되어있는지 알수가 없었다 가급적 가나다 순으로 리스팅 되는것이 더 사용자들에게 빠르게 상품찾게 도와주는 방법일 것이다. 실험3 HCI - final report 17

Usability Test – Task 3 Task3: 찾아낸 상품이 맞으면, 그 상품이 나온 페이지를 살펴보라고 함. 주요 멘트 및 행동 문제점 발견 개선방안 소비자의견이 게시판이 아니라 한번에 볼수있도록 쭉 펼쳐 보여주는게 좋네요. 이런게 아주 중요한거 같습니다. 실험1 그림이 아니라 아래 확대하기 라는 글씨를 눌러야 그림이 커짐. 그림을 눌러 사진을 보는 습관상..소비자들의 행동을 고려하여 사진눌러 크게 확대가 가능하도록 배려했으면…좋겠다. 어..근데..그림을 누르면 커져야 하는데 여기는 밑에 글씨를 눌러야 커지게 해놨군요. 그림눌러서 커지게 하는게 편한데… 상품의 상세설명을 보시고 원하는 상품이 맞 나오실때까지 찾아보세요 상품의 상세설명 부족 고객의 판단을 보충하기 위해 상세설명 좀 더 자세히 실험2 검색결과페이지의 중간부분 상세검색에서 매장구분하고 상품명+상품설명부분 체크, '삼성 디지털 카메라'라고 키워드 입력, 제조사는 삼성으로 하여,가격대는 300,000~400,000원으로 설정 한다음 검색클릭 -> 30만원대 삼성 디지탈 카메라 1종 찾음 가격대 입력란에 제한되는 값이나 기타 안내 사항이 없음 (예. 쉼표는 입력마시오 등등) 가격대 입력란을 단순 입력란이 아니라, 몇몇 가격대를 select할 수 있도록 미리 등록해 놓아 클릭만하면 가격대가 선택될 수 있도록 조치 실험3 HCI - final report 18

UT결과 요약 & 개선사항 • 헤더 – global 및 local 메뉴, 로그인 등등 제 1영역 검색결과 화면에 대한 불편함이 관찰됨 • 특징 및 장점 - 검색결과를 바로 보여주지 않고 바로 매장으로 갈 수 있게 혹은 베스트셀러를 제시 - 리스팅 영역 이후에도 만족 못할 시 바로 [결과 내 검색] ,[확장검색] 가능케 함 - 결과 내에서 해당 카테고리로 이동가능 • 문제점 - 지나치게 비 기능적 영역 비대 (쇼핑이나 검색은 심미적이기 보다는 기능적 활동) - 유저가 정말로 원한 리스팅 영역은 제1영역을 지나 scroll로 이동하여야 함 - 1차,2차 자세하게 검색하기 내용이 걸러지지 않고 엉뚱한 내용부터 결과화면에 리스팅됨. • 대응방안 - 비 기능적 영역을 축소시키고 리스팅 영역을 위로 이동 - 상품비교를 위해 많은 상품 리스팅(50개)를 하는 것도 중요하지만 정확한 검색을 이끌어 내는 것도 중요 (결과 내 검색하기의 기능의 정확성 개선) • 검색제목 & 검색부문 • 각 매장별 검색결과 • [검색어]베스트셀러 • 결과 내 검색 • 확장검색(상세설명 포함) • 리스팅–한 페이지에 50씩의 상품 • (가장 많은 영역 차지scroll 사용 ) • 결과 내 검색 & 확장검색 • 관련매장 • 관련 기획전 • 관련쇼핑정보 • footer 19 HCI - final report 19

UT결과 요약 & 개선사항 상품정보량과 고객만족도의 관계 다양한 상품의 확보는 여러 가지 상품을 구비해 놓은 것만을 의미하지는 않는다. 단일 상품만을 파는 전문점이라도 소비자가 원하는 모든 종류의 상품을 구비해 놓는 것까지 포함하는 것이다. 다양한 상품을 확보한 상점은 고객에게 물건을 찾는데 드는 시간과 비용을 줄여준다는 점에서 고객에게는 큰 이익이 되는 것이다. (참조) 국내 인터넷 쇼핑몰의 현황 및 성공요인 –김진수, 이호근 外 다양한 상품, 즉 단지 정보량이 많다고 해서 고객만족도가 높은 인터넷 쇼핑몰이 될 수 있는 것은 아니다. 시간과 비용을 줄일 수 있는 이점을 고객에게 제공할 수 있도록, 효과적인 정보탐색이 가능한 인터넷 쇼핑몰로 만들어야 한다. HCI - final report 20

비교사례 첨부- 월마트 (해외) Wal-mart의 검색 편리성 • Search 상품명 for 대상고객 • 검색기능과 카테고리의 조화로운 화면구성 사용소감 상품검색을 하면 무작위로 상품만 나열하는 국내의 사이트에 비해서 왼쪽의 카테고리변화로 인해 현재 나의 위치 파악이 쉬웠을 뿐 아니라 상품군의 분류가 어떻게 되어 있는지 잘 파악할 수 있어 편리했다. • 검색을 하고자 하는 상품의 최종결과화면이 3번의 클릭을 통해 이루어졌지만, 번거롭다는 느낌보다는 오히려 다양한 정보를 습득할 수 있어 서핑이 즐거웠다. 메인 화면의 search부분의 검색이 누구를 위해서 찾는 것인지에 대해 나와 있다. 즉, 소비자를 정확하게 타겟팅하고 있음 HCI - final report 21

1) ‘camera’키워드를 입력하여 나타난 결과화면 Search에 camera상품이 속해있을 카테고리분류명이 나타나서 Walmart에서 카메라가 어느 상품군에 속하는지 보여줌 상품에 관한 1차적인 카테고리로 검색상품에 대한 확장성을 보여줌 상품에 관한 1차적인 카테고리가 나타남 (camera & camcorders) 쇼핑몰에 등록된 카메라 중 베스트상품 정보를 간결하게 보여줌 현재 이벤트를 진행 중 또는 신상품을 중앙에 보여줌 카메라와 함께 사용될 수 있는 부수적인 상품을 ‘Photo-Quality Printers’라는 분류명으로 보여줌 더 많은 카메라를 보여줌 ‘see more digital carmera’ 브랜드별로 더 많은 상품 보기 ‘see more brand-name digital carmera’ HCI - final report 22

2) ‘camera’에 관한 더 많은 상품을 보기 클릭 상품에 관한 2차적인 카테고리로 검색한 상품에 해당되는 정확한 카테고리가 나타남 필름을 뽑을 수 있는 장소정보를 제공함으로써 상품에 대한 적절한 contents를 보여주고 있음 상품에 관한 2차적인 카테고리가 나타남 (digital cameras) 더 많은 카메라를 보여줌 ‘see more digital carmera’ 인기상품을 보여줌 카메라와 함께 직접적으로 사용될 수 있는 부수적인 상품을 보여줌 상품의 가격과 특징을 고려한 상품추천 HCI - final report 23

3) ‘camera’검색의 최종 결과 화면 리스트에서 한 행에 제품을 3개 보여주어 상품을 보기 위한 scroll을 최소화하고 있다. HCI - final report 24

Conclusion 인터넷 쇼핑몰의 중요한 인터페이스인 정보탐색에서의 이러한 사항들의 개선이 이루어질 때- LGeShop을 비롯하여 인터넷 쇼핑몰의 고객을 위한 사용성 및 만족도가 높아질 수 있을 것이다. HCI - final report

Thank You HCI - final report 27

인터넷쇼핑몰에서 상품탐색을 위한 UI 연구

인터넷쇼핑몰에서 상품탐색을 위한 UI 연구

Presentation Transcript