CHI 2014 Report

Changhoon Oh

Korean Friendsi met in

Toronto

Juho Kim

Human Computer InteractionVideo LearningCrowdsourcing

Ph.D. candidate @ MIT CSAIL

Korean Friends I Met in Toronto

Eungchan Kim

User Experience DesignInformation Visualization

User Research

MIMS @ UC Berkeley School of Information

EnergyBugs: Energy Harvesting Wearables for Children

Kimiko Ryokai UC Berkeley

Peiqi Su NYT ITP

Eungchan Kim UC Berkerly

Bob Rollins Park Day School

1

Battery Life and Energy Harvesting Session

HONORABLE MENTION

VIDEO

▶

BACKGROUND

지속가능한 에너지 절약 기술에 대한 HCI 영역의 관심 - 사람들이 집이나 직장, 공공장소와 같은 다양한 맥락에서 일상의 에너지 소비 습관에 대해서 알게 하고, 이러한 피드백 시스템이 에너지 절약의 행동변화를 이끌수 있는가? !

Microgeneration - 몸의 움직임을 통해 아주 작은 에너지를 만들어낼 수 있는가? !!!!!!!!!!

→ 교육적 잠재력을 바탕으로 아이들이 에너지 생산에 참여하고 이해할 수 있도록 활용하고자 함

우리가 얼마나 에너지를 ‘사용하는지’

우리 몸이 얼마나 에너지를 ‘만들어낼 수 있는지’

먼 곳에서 확실히 공급되는 것 직접 만들고 저장시킬수 있는 것

interests

Energy?

ENERGYBUGS

ENERGYBUGS

lamp

display

bug

• Wearable 한 에너지 발생 기기 • 램프, 디스플레이, 버그로 구성됨 !① 버그를 흔들면 ② 디스플레이에 실시간으로 에너지 발생과정이 나타나며 ③ 이에 따라 램프에 불을 켤 수 있음 !!!!!!!• 1분 정도 흔들면 0.66J의 전기를 생산 • 램프를 50초 정도 켤 수 있음

!• dimmer를 통해 램프 밝기 조절 • 디스플레이에서 에너지 정보를 제공

bodily tactile Portable Visible

ENERGYBUGS

Pilot Study with EnergyBugs Prototype

초등학생 16명을 대상으로 1차 조사 진행

Pilot Study with EnergyBugs Prototype

Interaction with the Bugs !• 아이들의 경쟁모드화

“In your face!” “I beat you!”

“Whoever gets to the top first is the winner!”

!• 다양한 방식의 Shaking여러가지 움직임, 자세, 심지어 춤밖에 나가 놀기도 하고, 발목에 차고 달리기도 함

!“It works better if I share it this way while I’m running around.”

!• 기술에 대한 호기심

Interaction with the Lamp Energy Consumption !• 에너지 보호적 특성다른 아이들과 자신의 에너지를 공유하려 하지 않음

“It’s mine!” “Don’t you dare touch mine!”

!• 여러가지 색을 만들기 위한 협동

The Mattering of Microgenerated Energies !• 에너지 관심과 ownership아이들의 어휘를 통해 확인 가능

!“You are wasting your energy!”

“It’s eating my energy!” “I worked very hard for that!” “Don’t touch it! It’s my history!”

초등학생 16명을 대상으로 1차 조사 진행

아이들이 에너지를 중요하게 여기는 동기는 무엇인가? → 2차 조사를 통해 확인

Second Study

초등학교 4학년 학생 18명을 두 그룹으로 비교 관찰 !!!!!!!!Second Study Process !!!!!

EB • EnergyBugs• 버그를 흔들어 에너지 생산

PI • Plug-in 버전• 벽에 꽂아 충전할 수 있음

1 2 3 4 520m 30m

레슨 설문사용 관찰

설문인터뷰

Second Study

초등학교 4학년 학생 18명을 두 그룹으로 비교 관찰 !!!!!!!!Second Study Process !!!!!

EB • EnergyBugs• 버그를 흔들어 에너지 생산

PI • Plug-in 버전• 벽에 꽂아 충전할 수 있음

1 2 3 4 520m 30m

레슨 설문사용 관찰

설문인터뷰아이들이 외부 활동을 통해 움직임을 많이 증가시킴을 알 수 있음

숨쉬기 어려고 땀으로 뒤범벅이 될때까지 함 (EB)!반면 PI 그룹은 움직임이 자유로움에도 불구하고, 모두 랩 안에 남아 전기 콘센트만 찾아다님

Vocabulary or Energy: Mattering of Human-Powered Migrogenerated Energies

Plug-in Group EnergyBugs Group

Sharing energy(distributing)

“It’s mine!” (7) “Could you give me permission (to use the energy)?” (3)

“Don’t even think about it!” (2)

“It’s mine! (8) “Can I borrow yours?” (5)

“Don’t touch!” (3)

Activating energy(using/consuming)

“You’re wasting your energy” (5) “Using up all my energy!” (4) “You lose it (energy)…” (3)

“It goes away real fast when it’s at 100% (brightness)” (3)

“You’ve just wasted energy!” (4) “I’m using up my energy” (5)

“I’m losing my energy” (4) “Going away very fast!” (3)

Keeping energy(sorting/maintaining)

“I’m saving my energy” (5) “It’s at…” (6)

“I’m going to save my energy so that when I go back…” (3)

“I’m saving my energy” (6) “Mine is at 3 and yours is …” (5) “I’m going to keep mine at …” (4)

Collecting energy(generating/producing)

“Woo! All done!” [looking at the charge indicator] (9) “Mine isn’t (done)” (8)

“Let me go unplug mine” (5) “Going to charge mine” (3)

“Worked so hard for this!” (8) “Mine is growing!” (8)

“OMG you have so much!” (7) “How do you get so much?” (6)

“I’m making energy!” (6) “I’m shaking it really hard!” (5)

“My hard work paid off finally!” (1)

EB • 열심히 일하고 있음, 다른사람의 성취, 에너지 습득 기술에 대한 물음 등 언급!

PI• 충전의 시작과 끝에 대한 이야기만이 반복됨• 에너지 생산 과정에 대한 이야기는 없고 관련 없는 이야기를 나눔!→ sharing, activating, keeping 에 있어서는 에너지의 중요성, ownership이 공통적으로 확인됨

→ 그러나 colliecting과 making에 있어서 차이를 보임.

Second Study

+ 서베이 결과 • human-powered microgeneration의 경험을 통해 아이들이 이전에 비해 에너지에 관련된 질문을 더욱 활발하고 또한 다른 관점에서 제기할 수 있게 되었음

Conclusion

EnergyBugs와 같은 human-powered micro generation 활동은 • 아이들의 호기심을 향상시킬수 있으며 • 에너지 발생과 관련된 질문을 더욱 적극적으로 할 수 있도록 독려함 • 또한 어린이는 에너지에 관련된 교훈을 얻을 수 있다.

자세한 내용은 논문을 참고하세요~!!!

Crowdsourcing Step-by-Step Information Extraction to Enhance Existing How-to Videos

Juho Kim1 Phu Nguyen1 Sarah Weir1 Philip J. Guo2 Robert C. Miller1 Krzysztof Z. Gajos3 1MIT CSAIL, 2University of Rochester, 3Harvard SEAS

2

Tutorial Session

HONORABLE MENTION

VIDEO

▶

BACKGROUND

How-to video를 이용한 학습 & 어려움 - 수많은 학습자들이 how-to video를 이용하여 다양한 태스크와 관련된 새로운 기술을 습득함 - 이러한 컨텐츠가 갖는 step-by-step 구조에도 불구하고 how-to video는 하나의 순차적인 스트림으로만 구성됨

- 특정 부분에 대한 정보를 놓치거나 이에 접근하는 것이 학습자에게 매우 부담스러운 일로 작용함

→ Step-by-step annotation을 이용해 기존의 how-to video의 학습경험(Learning Experience)을 향상을 목표로 함

• 인터랙티브 how-to video 플레이어인 ToolScape를 이용

• step-by-step 구조의 정보가 how-to video 사용자에게 유용함을 실험을 통해 밝힘

• how-to video에 step-by-step 정보를 annotation 하는 새로운 Workflow 방식 도입 !!!!!

!!!• domain에 독립적이고 기존 비디오에 유용하며 비전문 worker를 활용한 방식

• Mechanical Turk를 이용 • 세분야 75개의 YouTube 비디오 분석

• Precision/Recall 방식으로 전문가와 비슷한 수준의 annotation이 이루어졌음을 확인

OVERALL PROCESS

System DevelopmentFormative Study Evaluation1 2 3

Find

Verify

Expand

The WORKFLOW

타임라인의 위에 annotation이 표시되며

타임라인의 아래에 중간 상태의 스크린 샷이 표시됨

양 끝의 회색 영역은 의미없는 단계인 “dead times”를 보여줌 (예를 들어 포토샵 시작 대기 시간 등)

Formative Study: ToolScale – Annotation-Aware Video Player

Formative Study: ToolScale – Annotation-Aware Video Player

H1: ToolScape를 이용하여 how-to-video를 본 학습자는 더 높은 self-efficacy로 디자인 태스크를 완성할 것이다. H2: ToolScape를 본 학습자는 자신의 결과물에 대한 자가 평가가 높을 것이다. H3: ToolScape를 본 학습자의 디자인이 외부 전문가에게 더 높은 점수를 얻을 것이다. H4: ToolScape의 학습자가 더 높은 만족도를 보일 것이다. H5: ToolScape를 본 학습자가 디자인 태스크를 더욱 쉽게 인식할 것이다.

!

✔✔✔✔✕

→ 1, 2, 3, 4 확인됨

CROWDSOURCING WORKFLOW: FIND – VERIFY – EXPAND

1 crow worker가 “New Instruction” 버튼을 클릭하여 타임라인에 새로운 단계를 추가한다.

2

팝업 창이 뜨고, 자유 형식으로 해당 단계를 설명하도록 요청한다.

• 클러스터링 알고리즘을 통해 인접한 시간 점들을 묶어 step의 후보로 만든다. Verify 단계에서 적절한 step인지 확인된다.

CROWDSOURCING WORKFLOW: FIND – VERIFY – EXPAND

• worker는 여러 후보 단계들 중에서 가장 최적의 설명을 선택

• 선택지들은 Find 단계에서 온 것이며 • 추가적으로 디폴트 선택지를 제시함으로써 더 나은 설명이 있을 경우 표시할수 있도록 한다.

CROWDSOURCING WORKFLOW: FIND – VERIFY – EXPAND

• worker는 해당 단계의 가장 최적의 before & after 이미지를 선택

• 썸네일 선택지를 보고 이중 가장 적절한 이미지를 선택

CROWDSOURCING WORKFLOW: FIND – VERIFY – EXPAND

EVALUATION

요리 소프트웨어 메이크업

• YouTube • 3개 영역 75개 how-to video

• Mechanical Turk 리크루팅 • 총 8,355 HITS

EVALUATION

• Precision & Recall Accuracy

By Turkers After Stage 1 After Stage 2 Ground Truth

53.6 16.7 15.7 15.0

Stage 1. Time only Stage 2. Time + Text

Precision Recall Precision Recall

0.76 0.84 0.77 0.81

EVALUATION

• Precision & Recall Accuracy

평균 Step 수 (Stage1: Find, Stage2: Verify)

Precision & Recall

• how-to video 플레이어 인터페이스와 실험 결과를 통해 비디오 플레이어의 인터랙티비티 증가가 학습자의 태스크 수행력과 self-efficacy를 향상시킴을 보임 !

• 기존 how-to-video로부터 step-by-step 정보를 추출하기 위한, domain에 독립적인 crowd 비디오 annotation 방법과 Find-Verify-Expand 디자인 패턴을 개발 !

• time points, text labels, 이미지로 구성된 crowd 결과물을 통합시키기 위한 time-based clustering, text processing, visual analysis algorithm의 새로운 조합을 도입함 !

• 실험을 통해 본 workflow가 세 영역의 75개의 이미 이용가능한 비디오에 대하여 숙련된 annotator들과 비슷한 품질로 step들을 추출함을 확인함

CONTRIBUTIONS

what ifelt in

Toronto

• 세계 최고 연구자 / 기업을 만날 수 있는 기회! • 미국에 왜 안와? vs. 서울대 UX/HCI • 다작, 코웍 • 열린 마인드… • 기본기보다 중요한 아이디어—일단은 부딪혀보자! • Hackerspace, Exergame, 남들이 안하는 것을 하면 간단해도 좋다. • 남이 깊이 판 우물은 힘들다. • 네트워크… 네트워크… 네트워크… • 영문도 모르고… (English)

Toronto Note…

THANK YOU!

CHI 2014 REPORT