ui renovation for web commerce site i.a

고려대학교 산업경영공학부 석사과정 이진실[email protected]

Interface Design Theory, fall, 2015 | Final Project

직거래 중개 사이트 “직거래닷컴”인터페이스 개선

CONTENTS

1User / Task

기존 / 개선 인터페이스

시각화

Summary

2

4 5개선안 효과 측정

문제점 분석 및 개선안

3

6결과 및 분석

Summary1

중고 제품의 직거래를 목적으로 만들어진

사이트

URL : http://www.jikgure.com/

System Overview

개인이 성사시키기 어려운 중고 제품의 판매

및 구매를 돕기 위하여 중개 사이트가 필요

Important characteris-tics

1 2 3 4 5 6

직거래닷컴

What & Why? 1

2

User Characteristic사이트 이용 경험

- 이용 경험이 많은 사람

- 이용 경험이 없는 사람

이용 목적

- 판매자

- 구매자

1

2

Task

상품 등록

- 회원 가입

- 상품 등록 하기

1 상품 구매

- 검색

- 상품 구매 하기

2

Environment- 인터넷 속도

- PC 사양

- 마우스 사용 여부

- 사용 환경

3

User / Task2 1 2 3 4 5 6

User / Task 선정

4

신규 이용자가 인터페이스 디자인에 더 많은

영향을 받음 User / Task 선정

1

판매 / 구매 Task 에 대한 Activity Analy-sis 진행

2

구매 Task Process 에서 사용자가 더 많은 어려움을 느낌

▶ User시스템을 처음 이용하는 사용자

▶ Task

사고자 하는 물건이 명확한

상태에서 주어진 정보를

고려하여 상품을 구매

Appendix

2 1 2 3 4 5 6

※ 중요도 : Task 를 수행하는데 걸리는 시간 / 난이도 / Function 에서 task 가 차지하는 비중 고려 (Activity Analysis 를 통한 평가 , Appendix 참고 ) 하여 9 점 척도로 중요도를 정함

5

User / Task 작성

System 을 각 기능에 따라 세부 Part 로 나누어 Relation matrix 를 작성하여 개선에 중점을 두어야 할

부분을 선정

User / Task

※ 점수 : 중요도 Relation※ 백분율 점수 = 점수 / 총 점수*100

2 1 2 3 4 5 6

6

중점적으로 개선되어야 할 Display Part

C2

B 메인 메뉴 바 ( 대분류 )

검색 기능

Display Part

2 1 2 3 4 5 6

7


B1

B5

B2

메인 메뉴 바 ( 소분류 )

상품의 상태 분류 ( 팝니다 / 삽니다 / 거래완

료 )상품 리스트

Display Part

2 1 2 3 4 5 6

8


B6상품 상세 정보

Display Part

Structural Architec-ture

2

9

01-15

로그인 회원가입

홈 상품 카테고리 상품 검색

상품 리스트

상세 메뉴 분류 선택

고객센터 즐겨찾기

베스트 상품

상품 정보 보기

상품 등록

상품 등록 카테고리

상품 정보 입력

불량거래자 조회

더 치트 직거래 피해 사례 검색

쪽지 보내기 안전거래 신청 구매자 정보 댓글 달기

초보자 가이드

상품 등록 규칙

광고

MAIN

지역 선택

제목 / 작성자 검색

B

B1 B2

B6

C2

B6

1 2 3 4 5 6

Task Flow_ 메뉴 바 1 2 3 4 5 6

10

1. 원하는 상품 카테고리 선택 2. 상품 소분류 선택

3. 원하는 상품 선택 4. 쪽지를 보내 상품 구매 성사

2메뉴 바를 이용하여 상품 찾기

Task Flow_ 검색기능2

11

1. 상품 카테고리와 지역 , 검색 키워드 분류와 검색어를 모두 입력해야 검색 가능

2. 원하는 상품 선택

3. 쪽지를 보내 상품 구매 성사

1 2 3 4 5 6

검색기능을 이용하여 상품 찾기

문제점 분석 및 개선안3

12

1 2 3 4 5 6

Human Function Hierarchy

Sensing Information Process-ing Execution

Visual sensing after image effect 대상물을 본 후 잔상이 남는 효과의 정도blindness 시각기능이 극히 나쁜 상태glare effect 시야내에 밝은 광원이 있어서 대상물을 잘 인식하지 못하게 하는 효과readablity 글이나 문장이 이해되기 쉽게 쓰인 정도purkinke effect 밝은 곳에서 어두운 곳으로 옮기면 잘 보이는 파장이나 푸른색 계열이 잘 보이는 효과legibility 글이나 문장이 눈으로 읽기 편한 정도viewing sight line 대상물을 눈으로 바라볼 때 눈의 방향viewing time 보는 시간visibility 인간의 눈이 얼마나 사물을 잘 볼 수 있는가의 정도visible spectrum range 빛의 파장 중 가시광선 영역의 부분visual absolute threshold ( / )대상물을 눈으로 볼 때 인식이 가능한 한계 매우 작은 매우 큰visual acuity (static/dynamic) ( / )보고 있는 것의 자세한 형상을 구별할 수 있는 능력 정적 동적visual angle ( ) 시각 대상물을 눈으로 바라볼 떄 물체의 크기에 따른 시선각도visual fatigue effect 장시간 시각을 사용함으로써 시력이 저하되는 현상 visual feedback 대상을 시각을 통해 인지하는 과정 visual field (mono/binocular, horizontal/vertical) ( / , / )초점을 고정시킨 상태에서 감지가능한 가시영역 한쪽 눈 양쪽 눈 수평 수직visual JND 둘 이상의 대상물을 볼 때 그 차이를 간신히 파악할 수 있는 한계 visual sensitivity 시각을 통해 대상물의 변화를 인식brightness perception 대상물의 밝기를 인식하는 기능chromatic adaptation 빛의 파장에 따른 채색에의 적응 정도color perception 색깔을 인식하는 기능contrast perception ( )밝기를 인식하는 기능 대상물과 배경의 밝기 차이convergence (phoria) 두 눈의 방향을 한 곳으로 일치시키는 기능dark/light adaptation 주변 밝기 변화에 적응하는 행위depth perception 물체의 거리 또는 깊이를 인식하는 기능eye accomodation (near/far- sightness) 대상물 인식을 위한 초점 조절기능eye movement (fixation/saccade) , 대상물 인지를 위해 초점을 이동 고정시키는 안구운동기능form perception / 대상물의 형상 형태를 구별하는 기능movement perception 대상물의 이동을 감지하는 기능photopic/scotopic vision 주변 밝기에 따라 파장 인식능력이 변화하는 행위


13

1 2 3 4 5 6


Attention arousal level ( .)정보처리시 각성수준 각성도가 높으면 청보처리 효율이 좋다attention span 관측자가 예측하지 않고 주의를 기울여 판별할 수 있는 정보의한계channel switching 정보처리 경로를 변경하여 병렬적으로 정보를 처리하는 능력divided attention 하나이상의 정보를 동시에 인식하기 위하여 주의력을 배분시키는 능력estimation , 기존의 정보 지식을 바탕으로 미지의 모수를 추정하는 능력focused attention 하나의 정보를 받아들이기 위해 주의력을 집중시키는 능력motivation 특정 작업에 대한 동기유발 정도selective attention 주어지는 여러정보 중 하나를 택하여 인지하기위해 주의력을 선택적으로 기울이는 능력subtizing(chunking) 긴 정보를 인식가능한 짧은 단위로 인식하는 능력

Channel chanel capacity (7+- 2)단기기억 처리용량channel proceesing error (equivocation noise) - .정보처리 오류 원하는 정보가 누락되거나 불필요한 정보가 끼어들어가는 경우가 있음channel processing time 정보처리 시간conceptual compatibility ( )개념적 적합성 주어진 정보가 기존의 지식등과 일치하는 정도redundancy 정보처리상의 오류를 줄이고 처리속도를 향상시키고자 정보를 중복적으로 제시하는 것absolute/relative judgement (identify, discriminate) / 주어진 정보를 절대치로서 판단 상대적인 비교치로서 판단decision making 여러상황의 정보를 평가하여 이를 통한 의사결정 수행interpretation 주어진 정보의 의미를 해석reasoning 관련정보들을 이용하여 원하는 항목의 정보를 추론serial.parallel processing / 주어진 정보를 순차적 병렬적으로 처리하는 방식

Detection criterion 주어진 정보를 판단하는 기준detectability 주어진 정보를 얼마나 잘 인식할 수 있는가의 정도detection threshold ( )주어진 자극을 감지할 수 있는 한계 역치detection time 주어지는 자극을 감지하는 데 걸리는 시간false alarm/missing ( / )자극을 잘 못 감지하는 오류 존재하지 않은 신호를 있다고 판정 존재하는 신호를 없다고 판정sensitivity 주어지는 자극의 인식에 대한 민감도의 변화정도anticipation , 기존의 지식 심리상태에 기초를 둔 자극에 대한 기대monitoring (signal searching) 연속적으로 제시되는 자극들 중에서 원하는 정보단위를 탐색하는 행위

Momory knowledge 완전히 자기 것으로 소화된 개인의 지식 체계memory capacity 인간이 기억할 수 있는 정보의 용량memory loss (retentivity) 기억되어 있던 정보의 손실retrieval cue 저장된 정보를 기억해내기 위한 단서decoding (retrieval) 특정한 신호로 저장된 정보를 다시 알기 쉽게 풀이하는 것encoding 정보를 일정한 신호로 바꾸어 암호화하여 저장하는 것long- term memory 학습과 반복등을 통하여 지식체계로 형성된 장기기억체계recitation (rehearsal) 기억에 도움을 주기위하여 암송하거나 되풀이하여 되새김recoding (chunking) 정보를 기억하기 쉽게 묶음으로 나누어 저장하는 것working memory 일시 저장된 기억을 처리하기 위해 정보가 암호화되어 저장되는 기억부분



14

1 2 3 4 5 6


Coordination controllability 원하는 목표진행을 유지하도록하는 인체요소에 대한 통제성의 정도modality compatibility 목표진행을 위한 행동양식이 적절한지에 대한 정도corrective action , 원하는 진행이 되어가도록 지속적으로 요구되는 조정 통제행위sensory- motor coodination 감지한 것을 동작으로 나타내는 인간이 공응성servo control 연속적으로 제시되는 자극에 대한 인간의 공응제어 능력strength control 공응작업시 필요한 인체요소들의 힘이 분배 및 통제

motion dexterity 민첩성DOF of body segment 신체부위의 자유도moment accuracy 인간의 움직임이 목표지점과 일치하는 정도moment compatibility (C- R ratio) 도구사용 시 신체의 움직임과 도구의 움직임사이의 양립성momet speed 신체부위의 이동속도muscular fatigue effect 근육피로 효과ROM (range of motion) 신체부위의 움직임이 가능한 범위stability (tremor) 하나의 정적인 작업이나 동작을 수행할 때 신체 균형의 유지에 관련되는 요소texterity 일의 수행력이 좋고 나쁨의 정도body balance 인간이 동작을 행하고 있을 때 신체균형의 유지에 관련되는 요소motion phase (ballistic, positioning) 신체부위의 공간이동 또는 위치선정에 관련된 동작 양상motor control (speed position) 원하는 목표지점까지 신체부위의 이동속도와 위치선정에 관련된 동작통제motor program 반복작업 등으로 인한 인간행동의 숙련화moment type 인간이 행하는 움직임의 형태postural maintenance 자세의 유지

Reaction reaction accuracy 주어진 자극에 대해서 일어나는 반응의 정확성 정도reaction speed 주어진 자극에 대해 반응이 일어나기까지 걸리는 시간spatial compatibility 자극에 대한 반응양식이 공간적으로 상식과 일치하는 정도choice reaction 자극에 대한 반응 양식중에 하나를 선택하는 인간의 동작 기능reflex 주어진 자극에 대해 무의식적으로 이루어지는 인간의 반사동작기능selective reaction 자극에 대해 반응의 유무를 선택하는 인간의 동작기능simple reaction 자극에 대한 단일 반응양식을 갖는 동작기능



15

1 2 3 4 5 6

메뉴 바를 이용하여 상품 찾기 _ Step1. 상품 카테고리

선택


Visual Sensing• Visibility( 얼마나 잘 볼 수 있는가 ): 대비가 커서 글씨를 잘 볼 수 있지만 , 단어이기 때문에 Long term memory 단어와 함께 아이콘을 사용하여 카테고리의 의미를 중복적으로 제공하면 좋음 • Readibility( 글이 이해되기 쉽게 쓰인

정도 ): 단어로 카테고리를 분류 User 의 Men-tal Model 에 맞는 단어로 카테고리가 분류되어야 함• Legibility( 글을 눈으로 읽기 편한 정

도 ): 폰트 사이즈가 작아서 읽기 불편 Group-ing 하여 한 개의 카테고리가 차지할 수 있는 공간을 넓혀 폰트 사이즈 크게 늘여야 함

Wickens 의 ‘ human information processing model’ 을 보면 At-tention 이 계속적으로 요구됨총 24 개의 카테고리 분류로 일반적인 사용자의 Working Memory Capactity(72) 를 찾고자 하는 상품의 카테고리를 찾는데 어려움 있음Magic Number 7±2

Fitts’ law

제한된 공간에 24 개의 카테고리를 배치

한 카테고리가 차지하는 Width 가 작아서 Tracking 하는데 어려움 있음Width 늘이기


16

1 2 3 4 5 6

문제 해결을 위한 프로세스

Category Pool Grouping Labeling Test

• 일반적으로 사용될 수 있는 상품의 카테고리화 위하여 카테고리 Pool 구축

• 텐바이텐 , 옥션 등6 개 웹사이트의 카테고리 조사

• 4 개의 카테고리 추가

• Daum UX 에서 제공하는 D-sort 프로그램

• 총 28 개의 카테고리를 오픈 카드 소팅 진행

• 총 6 명의 20 대 남녀

• 9 개의 그룹으로 카테고리 Grouping

• 카테고리 카드 소팅에 참여한 사람들을 대상으로 그룹의 이름을 정의

• 활성화 확산 이론(Spreading Activa-tion Theory)활용

: 각 그룹의 이름과 그룹에 속한 카테고리가 하위그룹으로써 연상이 잘 되는지 여부 확인: 상위 카테고리와 하위 카테고리의 어의적 관계성을 상위 카테고리에 하위 카테고리들을 배치하는 것 & 하위 카테고리들의 모임에 상위 카테고리를 배치하는 것으로 연상여부 확인


17

1 2 3 4 5 6



웹사이트의 카테고리 중 ‘직거래닷컴’에 없는 카테고리를 선별하여 Category Pool 구축→총 4 개의 카테고리 추가하여 총 28 개의 카테고리 생성

직거래닷컴 텐바이텐 Funshop 옥션 옥션중고장터 홈플러스 Category/애견 애완 디자인문구 /버라이어티 취미 /브랜드 패션 패션의류 /패션의류 언더웨어 /취미 토이

악기 /디지털 핸드폰 /문구 종이 의류 /뷰티 잡화 /잡화 뷰티 문구산업기계 /캠핑 트래블 가방 /뷰티 잡화 유아용품 / /출산 유아동 완구 데코자동차용품 토이 /패션 시계 / /식품 마트 유아 /가구 생활 /주방 생활 / /식품 마트 건강사무용품 /가구 조명 /피부 자기관리 / /가구 생활 건강 /취미 컬렉션 / /가구 침구 인테리어 /애견 애완

/레져 스포츠 /데코 플라워 /생활 주방 / /디지털 가전 컴퓨터 디지털 / /스포츠 레저 자동차용품 악기/귀금속 악세서리 /패브릭 수납 /전기 전자 / /스포츠 레저 자동차 컴퓨터 /식품 건강 산업기계/화장품 향수 키친 /컴퓨터 모바일 / / /e도서 티켓 여행 쿠폰 /스포츠 레져 / /가전 디지털 휴대폰 자동차용품

/식품 농수축산물 푸드 /공구 자동차 /뷰티 잡화 / /취미 문구 애완 사무용품/티켓 상품권 패션의류 /아웃도어 스포츠 /생활 가전 /서비스 여행 /레져 스포츠

도서 / /가방 슈즈 주얼리 /자동차 공구 /귀금속 악세서리기타 뷰티 /도서 기타 /화장품 향수카메라 /베이비 키즈 /식품 농수축산물

/핸드폰 통신 Cat&Dog /티켓 상품권컴퓨터 도서자동차 기타생활가구 카메라생활가전 /핸드폰 통신디지털가전 컴퓨터

/유아 완구 자동차의류 생활가구패션잡화 생활가전

/명품 브랜드 디지털가전주방용품 /유아 완구

의류패션잡화

/명품 브랜드주방용품


18

1 2 3 4 5 6



Daum UXT Lab 에서 제공하는 D-sort 를 이용 , 28 개 카테고리 오픈 카드 소팅 , 6 명의 20 대 남녀→ 9 개의 그룹으로 카테고리 Grouping

Category group산업기계 1자동차용품 1자동차 1

/화장품 향수 2기타 3

/귀금속 악세서리 4의류 4패션잡화 4

/명품 브랜드 4/ /식품 마트 건강 5/식품 농수축산물 5/취미 토이 6

문구 6사무용품 6

/티켓 상품권 6도서 6

/유아 완구 6데코 7

/애견 애완 7생활가구 7주방용품 7카메라 8

/핸드폰 통신 8컴퓨터 8생활가전 9디지털가전 9악기 10

/레져 스포츠 10

D-sort/ 20 대 남녀 6 명이 참여 덴드로그램 / 9 개로 Grouping 9 개로 Group-ing


19

1 2 3 4 5 6



카테고리 카드 소팅에 참여한 사람들을 대상으로 그룹의 이름을 정의하도록 함

Category Group 이름산업기계자동차용품자동차

/화장품 향수 /화장품 향수/귀금속 악세서리

의류패션잡화

/명품 브랜드/ /식품 마트 건강/식품 농수축산물/취미 토이

문구사무용품

/티켓 상품권도서

/유아 완구

/자동차 산업기계

/ / /의류 명품 패션잡화 귀금속

/식품 건강

/ /도서 문구 사무

데코/애견 애완

생활가구주방용품카메라

/핸드폰 통신컴퓨터생활가전디지털가전악기

/레져 스포츠

/ /휴대폰 카메라 컴퓨터

/가전 디지털가전

/ /악기 레저 스포츠

/ / /주방 생활 데코 애견


20

1 2 3 4 5 6



활성화 확산 이론 (Spreading Activation Theory): 장기기억의 정보를 인출하여 단기기억에 띄우는 것을 의미 , 개념에 대한 어의적 거리 (semantic distance) 또는 어의적 관계성 (semantic relatedness) 을 밝히는데 근간(Martha et al., 1989)

→사용자의 인터뷰를 통해 얻은 상위 카테고리의 이름이 하위 카테고리들에 잘 맞는지 판단하고자 수행

※ 이름 (Text) 만 보고도 카테고리의 상 / 하위를 연상할 수 있는지 카드를 배치하는 작업으로 확인


21

1 2 3 4 5 6

개선 전

개선 후

Sensing• 아이콘과 단어로 정보를 중복 제공

(Redundancy gain)• 사용자의 Mental Model 에 맞도록 La-

beling 하여 Readability 증가

Information Processing• 카테고리의 개수를 24 개에서 9 개로 줄여 Working Memory Capacity 고려

Execution• 카테고리 (Tracking 하고자 하는 Object)

의 Width 를 늘려서 Fitts’law 의 Index of Difficulty 낮춤

개선 전 / 후 시각화 및 효과


22

1 2 3 4 5 6

메뉴 바를 이용하여 상품 찾기 _ Step2, 상품 소분류

선택

Minimize Information Assess Cost:Selective Attention 을 이동해야 하는 길이가 긴 경우 시간과 노력이 드는데 ,카테고리와 상품의 소분류가 Dis-play 의 위치상 가깝게 위치하여 정보에 접근하는 비용이 적은 것은 장점

Top-down Processing:User 들은 경험에 의해 Signal 을 지각하고 해석하려는 경향이 있음 .따라서 소분류 항목들은 User 가 기대하는 카테고리에 속해있어야 함

Sensing나열식의 소분류 항목들은 대안의 개수가 많기 때문에 Information Processing 하는 시간이 오래 걸림Information Theory 에 의해

대안의 개수가 적을수록 인간이 처리해야 하는 정보의 양이 작아서 빠르게 목표하는 바에 도달할 수 있음 . 따라서 Chunk 에 맞게 소분류 항목들을 Grouping 하여 대안의 수 줄이기

Information Process-ing Execution

Feedback카테고리 ( 대분류 ) 는 선택한 여부에 대하여 글씨의 색과 바탕의 색이 바뀌는 것으로 Feedback 을 제공하는데소분류항목은 선택 여부에 대한 Feedback 이 없음 직거래 장터는 연속적인 Interac-tion 이 필요한 System(Closed-loop System) 이기 때문에 High-lighting 으로 Feedback 을 줌으로써 Execution 에 대한 결과를 보여주어 다음 Action하는데 도움을 주어


23

1 2 3 4 5 6

개선 전

개선 후

Sensing• 카테고리의 소분류는 User 가 기대하는

상품 (Top-down Approach) 으로 구성

Information Processing• 의미단위로 Grouping 하여 대안의 수 줄임 Information Processing time 줄이기 Information Theory 에 의해

Execution• Highlighting 으로 Execution 에 대한

Feedback 주기• Error 로부터 쉽게 회복할 수 있도록 상위

카테고리를 Fix 시킴( 상위 카테고리를 클릭했는데 User 가 기대했던 하위카테고리가 나오지 않을 경우 상위 카테고리를 쉽게 바꿀 수 있음 )



24

1 2 3 4 5 6

메뉴 바를 이용하여 상품 찾기 _ Step3. 상품 선택

의사결정에 필요한 정보를 1level 전 제공 :의사결정에 필요한 정보를 준다면 User 는 1level 더 들어가지 않고도 의사결정을 할 수 있어서 Informa-tion Processing Loop 과정을 줄여주어 시간적으로 효율적이고 , 신체적 (클릭 및 Eye movement X)으로 인지적 (Visual Search X) 으로 좋음제목 , 모델명 , 상품 상태 , 사용 기간에 대한 정보를 미리 제공


의사결정에 필요한 정보만 제공 :가격이나 작성일에 정렬기능을 넣어 User 의 기준에 맞는 상품만 보여주면 Information Theory 에 의해

대안의 수가 줄어드니 처리해야 하는 Information 의 양이 줄어들어 시간 효율

필요한 정보를 얻기 위해 Informa-tion Processing Loop 를 반복해야 함


25

1 2 3 4 5 6

개선 전

개선 후

Sensing• 의사결정에 필요한 정보 1level 전에

제공하여 Information Processing Loop를 덜 돌아도 됨

( 제목 , 모델명 , 상품상태 , 사용기간 )

Information Processing• 의사결정에 필요한 정보만 제공하면 선택

대안의 수 줄어들어 시간효율 향상

Execution• 처리해야 하는 정보의 양이 많아진 것 같지만 구매 결정에 필요한 정보를 보기 위해 Action 을 하지 않을 수 있도록 1level 위에서 상품의 상태와 사용기간에 대한 정보 제공



26

1 2 3 4 5 6

메뉴 바를 이용하여 상품 찾기 _ Step4. 쪽지보내기


Language 는 Top-down Pro-cessing 으로 User 의 기대 (Task)에 맞는 단어가 제공되어야 함“ 쪽지보내기”는 구매 Task 에 부합되지 않는 LanguageUser 의 기대에 맞는 단어로 표현

사람들이 글씨를 읽는 방향 (좌우 ) 과 정보가 제시되어있는 방향 ( 상하 ) 이 안 맞아서 시간이 오래 걸림


27

1 2 3 4 5 6

개선 전

개선 후

Sensing• Language 는 Top-down Processing

으로 User 의 기대에 맞는 단어로 표현(“ 쪽지보내기”→”직거래 신청” )

Information Processing• User 가 상품구매를 결정하는데 필요한

정보를 글씨를 읽는 방향 (좌우상하 ) 에 맞추어 배치



28

1 2 3 4 5 6

검색 기능을 이용하여 상품 찾기 _ Step1. 상품 카테고리 , 지역 , 분류 선택 및

검색어 입력


Information Assess Time:상품선택 , 지역 , 분류선택은 메뉴 바를 이용하여 구매 Task 를 수행하는 것과 기능이 겹침검색 엔진을 수정하여 구매 Task 에 필요한 상품 정보에 접근하는 시간을 줄여야 함

①②

③① ②③

Information Theory 에 의해

대안의 수가 많아 처리해야 하는 In-formation 의 양이 높아 시간효율성 낮음

Fitts’ law

제한된 공간에 여러 개 정보 , Group-ing


29

1 2 3 4 5 6

개선 전

개선 후

Sensing• Information Assess Time 줄이기

Information Processing• 대안의 수를 줄여 Information Theory 에 의해

시간효율성 증가시킴

Execution• Target 의 Width 를 증가시켜 Index of

Difficulty 를 줄임• Tracking 작업 ( 기존 인터페이스에서는

상품선택 , 지역 , 분류선택 / 개선 인터페이스에서는 검색 클릭 ) 의 개수 감소



30

1 2 3 4 5 6

검색 기능을 이용하여 상품 찾기 _ Step2. 상품

선택


31

1 2 3 4 5 6

검색 기능을 이용하여 상품 찾기 _ Step3. 쪽지보내기

4 1 2 3 4 5 6

32

기존 인터페이스와 개선안의 시각화시각화 방법

개선 전 PPT 개선 후 PPT

• PPT 의 도형에 ’하이퍼링크’ 기능을 적용하여

• 개선 전 / 후 두 개의 실험 PPT 를 만듦

• 주어진 상품을 찾는 시간 측정 ( 기타 , 5 만원 이하 , 서울 지역 )• 개선 전 , 후 각각 3 파트의 시간이 있음 ( 검색어 입력 , 목록에서 상품선택 , 상품구매 버튼클릭 )• 총 7 명의 피실험자로부터 데이터 획득 ( 마우스 사용 or 휴대폰 사용 )

Microsoft PowerPoint ÇÁ·¹Á¨Å×ÀÌ¼Ç

4 1 2 3 4 5 6

33

기존 인터페이스 시각화메뉴 바를 이용하여 상품 찾기


4 1 2 3 4 5 6

34

기존 인터페이스 시각화검색을 이용하여 상품 찾기

4 1 2 3 4 5 6

35

기존 인터페이스 시각화기존 인터페이스의 Information Architecture

01-15


홈 상품 카테고리 상품 검색

상품 리스트

상세 메뉴 분류 선택

고객센터 즐겨찾기

베스트 상품


상품 등록



불량거래자 조회

더 치트 직거래 피해 사례 검색

쪽지 보내기 안전거래 신청 구매자 정보 댓글 달기

초보자 가이드

상품 등록 규칙

광고

MAIN

지역 선택

제목 / 작성자 검색

B

B1 B2

B6

C2

B6

4 1 2 3 4 5 6

36

개선안 시각화메뉴 바를 이용하여 상품 찾기


4 1 2 3 4 5 6

37

개선안 시각화검색을 이용하여 상품 찾기


4 1 2 3 4 5 6

38

개선한 인터페이스의 Information Architecture

개선안 시각화

01-15


상품 리스트

상세 검색

고객센터




불량거래자 조회직거래 신청 안전거래 신청

MAIN

리스트 내 검색

판매자 정보 댓글

상품 카테고리 상품 검색 베스트 상품 상품 등록

상품 분류 지역 선택 상품 상태 가격 범위

4 1 2 3 4 5 6

39

Information Architecture 의 개선 전 / 후 비교

개선안 시각화

01-15


상품 리스트

상세 검색

고객센터




불량거래자 조회직거래 신청 안전거래 신청

MAIN

리스트 내 검색

판매자 정보 댓글

상품 카테고리 상품 검색 베스트 상품 상품 등록

상품 분류 지역 선택 상품 상태 가격 범위

개선 전

개선 후

인터페이스에 중복적으로

일어나는 상품검색을 위한

분류선택 / 지역선택 / 제목 작성자

검색 (C2→B2) 제거

←” 과제의 구조를 단순하게 하라”

Norman(1992)

5 1 2 3 4 5 6

40

Usability Test 를 통한 개선안 검증 방안

개선안의 효과 측정

1 User직거래닷컴을 처음

사용하는 사람

2 Task가격 / 지역 / 상품 상태의

정보가 주어진 상품을 구매하기

3 Environment컴퓨터 & 마우스 또는

Mobile Device

도구

시작 상품 구매 완료

메뉴 바 이용 리스트에서 상품 선택

검색 창 이용 리스트에서 상품 선택

Task flow #1

Task flow #2Time 1 Time 2 Time 3

각 Task flow 의 개선 전 / 후에 걸리는 시간을 단계마다 측정

Wireframe 으로 인터페이스를 만들어 (MS powerpoint) 프로그램 실험

5 1 2 3 4 5 6

41

Usability Test 설계

개선안의 효과 측정

23 인치 모니터와 5.9인치 폰

Learning Effect 를 최소화하기 위하여

평균시간 ( 전전 / 후후 )으로

개선전 / 개선후 시간 구함

1 User20 대 남녀 7 명

2 Task구매 Task 수행

3 Environment23 인치 LG Flatron

E2351 또는5.9 인치 LG-F490L

품목 : 기타지역 : 서울

가격 : 5 만원 이하구매하기

전 전후 후

6 1 2 3 4 5 6

42

메뉴바 이용한 Task 수행 화면

결과 및 분석

실험 참가자가 모니터와 휴대폰에서 Wireframe( 매개변수의 효과 최소화 )으로 구성된 인터페이스를 이용해

메뉴바를 통한 구매 Task 를 수행하고 있는 모습

메뉴바 상품선택 구매완료 메뉴바 상품선택 구매완료13.435 17.97 9.96 6.415 19.64 4.99 41.365 31.045 3 7 118.65 16.32 12.735 6.25 18.235 7.39 47.705 31.875 1 6 1

21.945 20.47 8.985 8.79 10.9 5.465 51.4 25.155 2 6 121.16 21.68 7.825 11.65 16.645 9.17 50.665 37.465 1 7 124.89 28.68 19.13 9.805 14.215 12.25 72.7 36.27 2 4 2

23.785 22.915 25.17 12.42 15.615 5.54 71.87 33.575 3 4 220.76 24.8 22.875 12.23 16.88 6.595 68.435 35.705 1 5 2

Completion Time 만족도

개선전 개선후개선전 개선후 (1)/ (2)컴퓨터 모바일개선전 개선후

6 1 2 3 4 5 6

43

메뉴바 이용한 Task 수행 결과

결과 및 분석

메뉴바를 이용하여 총 7 명의 20 대 남녀 사용자가 구매 Task 진행 단계별 Completion Time 과 개선 전 / 후 주관적 만족도 측정

※ 개선전 / 후 각각 순서를 바꿔 두 번씩 실험 ( 전후후전 , 후전전후 ) 하여 Learning Effect 최소화

메뉴바 상품선택 구매완료 메뉴바 상품선택 구매완료 메뉴바 상품선택 구매완료 메뉴바 상품선택 구매완료1 전후후전 15.75 18.71 10.71 7.71 20.17 5.51 11.12 17.23 9.21 5.12 19.11 4.472 전후후전 19.8 17.33 15.37 8.14 19.25 10.22 17.5 15.31 10.1 4.36 17.22 4.563 후전전후 21.14 20.68 10.34 10.36 11.14 7.71 22.75 20.26 7.63 7.22 10.66 3.224 후전전후 20.74 23.5 11.14 12.81 17.76 10.63 21.58 19.86 4.51 10.49 15.53 7.715 후전전후 28.11 29.13 22.81 10.39 15.55 15.27 21.67 28.23 15.45 9.22 12.88 9.236 후전전후 27.28 25.36 24.17 17.13 16.13 8.84 20.29 20.47 26.17 7.71 15.1 2.247 후전전후 20.25 29.17 25.21 14.22 17.55 7.26 21.27 20.43 20.54 10.24 16.21 5.93

참가번호개선전 개선후 개선전 개선후

실험순서

6 1 2 3 4 5 6

44

메뉴바 이용한 Task 수행 결과 분석

결과 및 분석

3단계 모두 개선 전보다 후에 Completion Time 이 줄어들었고구매 Task 의 총 Completion Time 도 줄어들었고

만족도도 개선 후에 늘어나서

인터페이스의 개선대안이 Completion Time 과 User 의 주관적 만족도 측면에서 모두 향상

※특히 메뉴바의 카테고리화에서 p-value 가 0 으로 가장 유의미 (Completion time 감소 ) 하다 .

6 1 2 3 4 5 6

45

메뉴바 이용한 Task 수행 결과 분석

결과 및 분석





메뉴바(후)메뉴바(전)

25

20

15

10

5

데이

터

메뉴바(전), 메뉴바(후) 상자 그림

6 1 2 3 4 5 6

46

메뉴바 선택 Subtask 의 Completion Time 감소

결과 및 분석





개선 전

개선 후

22.66 sec

9.65 sec

Completion Time 11.01sec 감소

검색 상품선택 구매완료 검색 상품선택 구매완료17.88 14.78 13.945 6.115 9.795 3.74 46.605 19.65 5 7 1

17.065 13.345 17.965 6.47 12.71 4.24 48.375 23.42 3 5 119.835 11.085 17.54 10.055 10.52 4.66 48.46 25.235 1 5 123.175 21.425 19.145 6.605 14.15 3.415 63.745 24.17 2 7 222.93 17.255 21.225 4.4 16.165 4.25 61.41 24.815 3 5 2

19.535 16.725 20.055 4.715 9.905 3.425 56.315 18.045 2 6 219.82 19.165 19.72 5.99 15.525 5.985 58.705 27.5 1 5 2

Completion Time 만족도개선전 개선후

개선전 개선후 개선전 개선후 (1)/ (2)컴퓨터 모바일

검색 상품선택 구매완료 검색 상품선택 구매완료 검색 상품선택 구매완료 검색 상품선택 구매완료1 전후후전 18.17 15.15 17.44 6.69 10.75 4.45 17.59 14.41 10.45 5.54 8.84 3.032 전후후전 17.66 16.34 18.37 7.48 17.66 6.23 16.47 10.35 17.56 5.46 7.76 2.253 전후후전 19.31 11.76 19.36 9.46 10.56 5.74 20.36 10.41 15.72 10.65 10.48 3.584 후전전후 26.47 24.64 21.16 10.44 17.82 5.66 19.88 18.21 17.13 2.77 10.48 1.175 후전전후 25.33 24.15 24.23 5.38 16.96 6.91 20.53 10.36 18.22 3.42 15.37 1.596 후전전후 20.68 20.23 20.87 4.31 10.35 4.49 18.39 13.22 19.24 5.12 9.46 2.367 후전전후 19.23 19.62 20.67 7.85 16.53 6.39 20.41 18.71 18.77 4.13 14.52 5.58

참가번호 실험순서개선전 개선후 개선전 개선후

6 1 2 3 4 5 6

47

검색을 이용한 Task 수행 결과

결과 및 분석

검색을 이용하여 총 7 명의 20 대 남녀 사용자가 구매 Task 진행 단계별 Completion Time 과 개선 전 / 후 주관적 만족도 측정

※ 개선전 / 후 각각 순서를 바꿔 두 번씩 실험 ( 전후후전 , 후전전후 ) 하여 Learning Effect 최소화

6 1 2 3 4 5 6

48

검색을 이용한 Task 수행 결과 분석

결과 및 분석




※특히 검색 Subtask 와 구매 Subtask 에서 Completion time 이 큰 폭으로 감소 (t값이 가장 큼 )했다

6 1 2 3 4 5 6

49

검색을 이용한 Task 수행 결과 분석

결과 및 분석





검색(후)검색(전)

25

20

15

10

5

데이

터

검색(전), 검색(후) 상자 그림

구매(후)구매(전)

20

15

10

5

데이

터

구매(전), 구매(후) 상자 그림

6 1 2 3 4 5 6

50

결과 및 분석





검색 Subtask 의 Completion Time 감소

20.034 sec

6.336 sec


개선 전

개선 후

6 1 2 3 4 5 6

51

결과 및 분석





구매 Subtask 의 Completion Time 감소

18.514 sec

4.245 sec


개선 전

개선 후

6

52

한계

결과 및 분석

시스템이 User 와 Interaction 하는 Display 나 Control을 포함한다면 “사용성”관점에서 평가되어야 한다

사용성 ( 시스템을 사용하기 좋은 정도 ) 에는 Completion Time 과 만족 (Satisfaction)뿐만 아니라

학습용이성 (Learnability)효율성 (Efficiency)

기억용이성 (Memorability)에러 (Error)

를 포함해야 한다

따라서 User 를 반영하고 , 더 나은 사용성과 가치를 줄 수 있도록 반복적인 인터페이스 재설계가 필요하다

1 2 3 4 5 6

User

Display

ControlInteraction

표명 변환

표현평가

Inter-face!

감사합니다 !

54

상품 구매 Task 의 Subtask 별 걸리는 시간과 어려움의 정도 측정

Appendix

인터넷 속도 39.0Mbps브라우저 크롬

마우스 사용 사이트 접속한 상태에서 시작

상품 종류 아이폰가격대 10~20만원지역 서울

Subtask 걸리는 시간 User 가 느끼는 어려움 정도 관찰자가 느끼는 어려움 정도(Flow) ( : Second)단위 (5-Scale) (5-Scale)

상품카테고리 선택 20.45 4 5 상품종류 선택 29.3 5 4

지역 선택 1 1 1/ / 팝니다 삽니다 교환 선택 13.22 3 4

/ / 제목 아이디 작성자 검색 8.34 4 5 등록된 상품 클릭 396.67 5 5 판매자 정보 조회 5.59 3 4

쪽지 보내기 12.08 5 5 안전결게 신청하기 0 - - 상품구매 완료 0 - -

TaskUser 가 정한 구매상품

Comment

상품 구매User

관찰자Date

Environment

조수현이진실

User Samsung laptop본인의2015.11.20



상품 종류 쇼파가격대 5~7만원지역 서울


상품카테고리 선택 31.21 5 5 상품종류 선택 19.54 5 4

지역 선택 2.12 2 2/ / 팝니다 삽니다 교환 선택 8.97 3 4



Environment User Samsung laptop본인의

Comment


상품 구매User 김경원

관찰자 이진실Date 2015.11.20



상품 종류 자전거가격대 5~10만원지역 서울


상품카테고리 선택 18.17 4 4 상품종류 선택 35.84 4 5

지역 선택 5.87 2 1/ / 팝니다 삽니다 교환 선택 8.46 4 5



Environment User Samsung laptop본인의

Comment


상품 구매User 신은민

관찰자 이진실Date 2015.11.20

55

Reference • Wickens, Engineering Psychology and Human Performance• Wickens, 인간공학

• 오세응 (2009), 활성화 확산 이론의 비대칭 전이를 이용한 계층적 메뉴 구조의 평가

• Daum UXT D-sort Program• Minitab 17