#SNUUX #UXLAB #off-screen_object 10/26 발제자료 aju

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

2. 2
360 이미지 + 제한된
시야
큰 그래픽 자료 + 제한된 스크린
사이즈
< Why This Paper? >
화면에 들어오지 않는 것을 어떻게 알 수 있을까?
• 그래도 키워드는 비슷했으니…
• 이 논문에서 참고한 논문들을 찾아보자
• 줌 아웃을 하면 되는 거 아닌가? 뭐가 있는지 알아야 줌을 하지…!

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

4. 4
1. off-screen contents를 보여주는 다양한 방법
2. 좋은 디자인을 위한 영리한 접근
3. 문제의 핵심을 보여주는 적절한 소재, 방법 선택
Related Work
Wedge Design
User Test
< Takeaway>
이 논문에게 기대했던 것, 논문을 통해 얻은 것

5. 5
< Related Work >
1) Overview + Detail
• 별도의 창에 미니어쳐 뷰를 보여준다
• Overview 와 Detail을 전환할 때 추가적인 cognitive processing
• 미니어쳐 뷰를 위치시킬 추가적인 공간 필요 / 메인 뷰를 가리는 상황
Main : Detail
Miniature : Overview
Main : Overview
Miniature : Detail
> off-screen contents를 보여주는 다양한 방법

6. 6
< Related Work >
2) Focus + Context
• 왜곡된 형태로 전체 뷰를 다 보여준다
• targeting, revisitation 이 어렵다
• 정확한 공간 정보를 파악하기 어렵다
Fisheye View
> off-screen contents를 보여주는 다양한 방법

7. 7
< Related Work >
3) Contextual view
• context 중 관심이 있는 대상만 추상적 기호로 표시 (->)
• "Object Location" ~ Direction + Distance
• 대상의 방향을 화살표로 가리키고, 거리는 symbolic (길이, 색상 등) 하게 나타낸다
• 즉, 얼마나 떨어져있는지 알기 위해 사전에 학습이 필요!
지표 색상 ~ 거리overlay region에서 먼 정도 ~ 거리
> off-screen contents를 보여주는 다양한 방법

8. 8
< Related Work >
4) Halo
• 방향과 거리가 아닌, 다른 방식으로 위치 정보를 전달
• Partially-out-of-the-frame approach
• 대상의 위치를 중심으로 하는 원의 일부를 스크린에 노출
Halo
> off-screen contents를 보여주는 다양한 방법

9. 9
< Wedge Design>
Concept : Amodal Completion
• 무형 완성 : 가려진 대상 뒤에 표면이 있는 것으로 지각되는
• symmetry/regularity, continuation
• continuation 효과를 이용하여 Wedge 디자인
Amodal Completion Wedge
> 좋은 디자인을 위한 영리한 접근

10. 10
< Wedge Design>
3개의 자유도, 3개의 목표
• rotation / aperture / intrusion
3 degrees of freedom
rotation
> 좋은 디자인을 위한 영리한 접근

11. 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. 12
< Wedge Design>
To maximize the location accuracy
• 오비탈 : 원자핵 주위의 전자가 분포하는 확률을 나타내는 함수
> 좋은 디자인을 위한 영리한 접근

13. 13
< Wedge Design>
To maximize the loc. accuracy
• 오비탈 : 원자핵 주위의 전자가 분포하는 확률을 나타내는 함수
• off-screen 에서는 leg 가 가리키는 부분에 불확실성이 존재한다.
> 따라서 일직선의 Line이 아닌, 점점 퍼지는 콘 형태의 Beam
pistol / rifle Beam ~ different Intrusion
> 좋은 디자인을 위한 영리한 접근

14. 14
< Wedge Design>
To maximize the loc. accuracy
• 오비탈 : 원자핵 주위의 전자가 분포하는 확률을 나타내는 함수
• off-screen 에서는 leg 가 가리키는 부분에 불확실성이 존재한다
> 따라서 일직선의 Line이 아닌, 점점 퍼지는 콘 형태의 Beam
• 두개의 Beam의 교차점 = 타겟이 있을 것이라 "예상되는" 부분 = 오비탈
> 오비탈의 면적을 작게 하면, 타겟 위치의 정확도가 올라간다!
>> orbital⇩ ~ Intrusion⇧, aperture⇧, rotation⇩
the smallest
> 좋은 디자인을 위한 영리한 접근

15. • 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 Position
Halo
Wedge
5 objects
10~20objects
corner
side
• Control factor :
1. Halo, Wedge 접해본 경험이 없는 사람
2. 화면에 보여지는 선의 길이를 동일하게 (평균 75 pixel /target)
> 문제의 핵심을 보여주는 적절한 소재, 방법 선

16. • 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. 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. > 문제의 핵심을 보여주는 적절한 소재, 방법 선
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. 19
< Discussion >
360 이미지 + 제한된 시야
• HCI 수업을 통해 정한 소재 : 직방/다방 360 이미지
• 집을 구하는 사람이, 스마트 폰을 통해 360 이미지를 볼 때,
• 텅 빈 방의 이미지에서, 판매자가 강조하고 싶은 정보를 어떻게 전달할 것인가?
> 다양한 전달 방법 중, 어떤 방안이 효과적일 것인가?
> 이 주제와, 정해진 소재에 적합한 Task는 어떤 것인가?

20. 감사합니다.