Download pptx - Wedge: Clutter-Free Visualization of Off-Screen Locations

Wedge: Clutter-Free Visualization of Off-Screen Locations+ CHI. 2008- Sean Gustafson, Patrick Baudisch et al./안아주x 2016 Fall

2

360 이미지 + 제한된 시야

큰 그래픽 자료 + 제한된 스크린 사이즈

< Why This Paper? >

화면에 들어오지 않는 것을 어떻게 알 수 있을까 ?• 그래도 키워드는 비슷했으니… • 이 논문에서 참고한 논문들을 찾아보자• 줌 아웃을 하면 되는 거 아닌가 ? 뭐가 있는지 알아야 줌을 하지… !

3

About This Paper큰 이미지 - 작은 화면objects of interest are often~~~

Halo -> WedgeHalo vs. Wedge

< About This Paper >

작은 스크린에서 , 관심있는 대상의 위치를…• 관심있는 대상이 스크린 밖에 존재할 경우 , 이 위치를 어떻게 알려줄까 ?• 이전 논문에서 우리는 Halo 를 제안 했고 , 이번에는 더 좋은 , Wedge 를 만들었다 .• 더 좋은지 알아보기 위해 Halo vs. Wedge 사용성 평가를 해보겠다 .

Halo (pre.) Wedge

4

1. off-screen contents 를 보여주는 다양한 방법2. 좋은 디자인을 위한 영리한 접근

3. 문제의 핵심을 보여주는 적절한 소재 , 방법 선택

Related Work

Wedge Design

User Test

< Takeaway>

이 논문에게 기대했던 것 , 논문을 통해 얻은 것

5

< Related Work >

1) Overview + Detail• 별도의 창에 미니어쳐 뷰를 보여준다• Overview 와 Detail 을 전환할 때 추가적인 cognitive processing• 미니어쳐 뷰를 위치시킬 추가적인 공간 필요 / 메인 뷰를 가리는 상황

Main : DetailMiniature : Overview

Main : OverviewMiniature : Detail

> off-screen contents 를 보여주는 다양한 방법

6

< Related Work >

2) Focus + Context• 왜곡된 형태로 전체 뷰를 다 보여준다• targeting, revisitation 이 어렵다• 정확한 공간 정보를 파악하기 어렵다

Fisheye View


7

< Related Work >

3) Contextual view• context 중 관심이 있는 대상만 추상적 기호로 표시 (->)• "Object Location" ~ Direction + Distance• 대상의 방향을 화살표로 가리키고 , 거리는 symbolic ( 길이 , 색상 등 ) 하게 나타낸다• 즉 , 얼마나 떨어져있는지 알기 위해 사전에 학습이 필요 !

지표 색상 ~ 거리overlay region 에서 먼 정도 ~ 거리


8

< Related Work >

4) Halo• 방향과 거리가 아닌 , 다른 방식으로 위치 정보를 전달• Partially-out-of-the-frame approach• 대상의 위치를 중심으로 하는 원의 일부를 스크린에 노출

Halo


9

< Wedge Design>

Concept : Amodal Completion• 무형 완성 : 가려진 대상 뒤에 표면이 있는 것으로 지각되는• symmetry/regularity, continuation• continuation 효과를 이용하여 Wedge 디자인

Amodal Completion Wedge

> 좋은 디자인을 위한 영리한 접근

10

< Wedge Design>

3 개의 자유도 , 3 개의 목표• rotation / aperture / intrusion

3 degrees of freedom

rotation


11

< Wedge Design>

3 개의 자유도 , 3 개의 목표• rotation / aperture / intrusion• To avoid overlap / To maximize the loc. accuracy / To serve as an additional cue

To avoid overlap Additional Cue : shorter legs for closer targets


12

< Wedge Design>

To maximize the location accuracy• 오비탈 : 원자핵 주위의 전자가 분포하는 확률을 나타내는 함수


13

< Wedge Design>

To maximize the loc. accuracy• 오비탈 : 원자핵 주위의 전자가 분포하는 확률을 나타내는 함수• off-screen 에서는 leg 가 가리키는 부분에 불확실성이 존재한다 . > 따라서 일직선의 Line 이 아닌 , 점점 퍼지는 콘 형태의 Beam

pistol / rifle Beam ~ different Intrusion


14

< Wedge Design>

To maximize the loc. accuracy• 오비탈 : 원자핵 주위의 전자가 분포하는 확률을 나타내는 함수• off-screen 에서는 leg 가 가리키는 부분에 불확실성이 존재한다

> 따라서 일직선의 Line 이 아닌 , 점점 퍼지는 콘 형태의 Beam• 두개의 Beam 의 교차점 = 타겟이 있을 것이라 " 예상되는 " 부분 = 오비탈 > 오비탈의 면적을 작게 하면 , 타겟 위치의 정확도가 올라간다 ! >> orbital⇩ ~ Intrusion⇧, aperture⇧, rotation⇩

the smallest


• participants : 18~30 세 대학생 18(F 3, M 15) -> 데이터 수집 후 2 명 제외 (extremely high error rate)

• Apparatus : 컴퓨터 모니터에 PDA 화면을 띄우고 , 마우스로 테스크 수행• Experiment conditions (independent var) : 2x2x2

15

< User Test>

대상이 많고 , 코너에 있을 때 Wedge 의 효과가 특히 더 좋을 것이다 .

visualization Density PositionHalo

Wedge

5 objects

10~20objects

corner

side

• Control factor :1. Halo, Wedge 접해본 경험이 없는 사람2. 화면에 보여지는 선의 길이를 동일하게 ( 평균 75 pixel /target)

> 문제의 핵심을 보여주는 적절한 소재 , 방법 선택

• Task :

16

< User Test>

지도라는 소재 , 공간 인식과 관련된 과제Locate

• Procedure : 1) Halo, Wedge 에 대한 간략한 설명 2) training - 4 maps 3) test - 각 task 별 16 개의 지도 2x(2x2x2) -> conterbalanced• dependent variable : Error amount, Completion time

Avoid

Closest

: Target 이 있을 것으로 예상되는 부분을 클릭하세요: traffic jam (target) 에서 가장 멀리 떨어져 있는 병원을 선택하세요: 화면에 위치한 차와 가장 가까운 곳에 있는 식당 (target) 을 선택하세요


17

Locate Avoid Closest

Error Amount

< User Test>

지도라는 소재 , 공간 인식과 관련된 과제

Completion Time

Error Amount

Completion Time

Error Amount

Completion Time

for Visualization, F1,15 =5.86, p=0.029; for Density, F1,15 =6.76, p=0.02; for Position, F1,15 =121.39, p<0.001.

for Position, (F1,15 =4.54, p=0.05)

X

X

for Position (F1,15 =76.6, p<0.001)

for Position (F1,15 =5.24, p=0.037)



18

Locate Avoid Closest

Error Amount

< User Test>

지도라는 소재 , 공간 인식과 관련된 과제

Completion Time

Error Amount

Completion Time

Error Amount

Completion Time

for Visualization, F1,15 =5.86, p=0.029; for Density, F1,15 =6.76, p=0.02; for Position, F1,15 =121.39, p<0.001.

for Position, (F1,15 =4.54, p=0.05)

X

X

for Position (F1,15 =76.6, p<0.001)

for Position (F1,15 =5.24, p=0.037)

• Use Wedge : it offers significant improvements over Halo.

• Reduce overlap : overlap leads to reduced accuracy and greater

difficulty identifying objects.• Corners need special attention

• Striking a balance : to avoid as much overlap as possible, maximize

location accuracy and to serve as a cue to distance.

19

< Discussion >

360 이미지 + 제한된 시야• HCI 수업을 통해 정한 소재 : 직방 / 다방 360 이미지• 집을 구하는 사람이 , 스마트 폰을 통해 360 이미지를 볼 때 ,• 텅 빈 방의 이미지에서 , 판매자가 강조하고 싶은 정보를 어떻게 전달할 것인가 ?

> 다양한 전달 방법 중 , 어떤 방안이 효과적일 것인가 ?> 이 주제와 , 정해진 소재에 적합한 Task 는 어떤 것인가 ?

감사합니다 .