[코싸인의 인지과학 이야기]
학습(2)
온라인 교육의 UX
# 이 글은 Rebecca Cheng, Iris Poon의 ‘UX of e-Learning: A Look at How Two Online Learning Platforms Support Self-Regulated Learning’ 을 읽고 번역 및 요약한 글입니다.
1. 새로운 학습 접근법 : 온라인 교육
ICT 기술의 발달로 우리는 새로운 기술이나 언어를 시공간의 한계를 극복해 컴퓨터만 있다면 언제 어디서든 배울 수 있게 되었습니다. 그러나 이런 온라인 학습 플랫폼은 대다수가 직접적인 튜터 없이 혼자 학습을 진행하는 형태입니다. 그렇다면 효과적인 학습 경험을 제공하기 위해서, 온라인 학습 플랫폼에서는 어떤 UX를 설계해야 할까요?
[그림 1] Zimmerman의 자기주도 학습 이론 [1]Rebecca Cheng은 ‘자기주도 학습’ 이론들에 주목합니다. 여러가지 자기주도 학습 이론 중 Zimmerman의 이론이 있으며, 이는 세 단계를 걸쳐 진행됩니다. 계획 단계인 forethought phase, 전략을 수행하는 performance phase, 과정을 되돌아보는 self reflection phase가 이 세 단계입니다. 이 이론의 세 단계를 중심으로 두 개의 성공적인학습 플랫폼을 분석해 보려고 합니다. 그 주인공은 바로 Duolingo와 Codecademy입니다.
2. Duoglingo
(1) Forethought phase
[그림 2] Duoglingo - Forethought phase (1)첫 번째로, 계획단계인 forethought phase입니다. 이 단계에서는 학습 전 동기부여를 해주고, 단기와 장기 목표를 수립해줍니다. 학습을 시작 하기 전 ‘I want to learn…’ 이라는 워딩이 보이는데, 이는 학습자가 주체적으로 과정에 참여한다는 맥락을 부여해주는 역할을 합니다. 또한 각각의 언어 밑에는 총 몇 명의 학습자가 듀오링고에서 학습을 진행하고 있는지가 보이는데, 아 이렇게 많은 사람들이 하고 있다면 나도 할 수 있다는 용기를 북돋아줍니다.
[그림 3] Duoglingo - Forethought phase (2)Choose your path 화면에서는 자기 수준에 맞는 계획을 선택할 수 있게끔 합니다. 본인이 beginner 레벨에서 출발하고 싶다면 그렇게 선택하면 되고, advanced level 에서 출발하고 싶다면 간단한 테스트로 학습자가 이를 수행할 능력이 되는지를 확인하고 진행됩니다. 오른쪽 화면에서 볼 수 있듯, 학습자가 daily goal을 설정할 수 있습니다.
(2) Performance phase
[그림 4] Duoglingo - Performance phase두 번째로, performance phase 입니다. 이 단계에서는 학습자가 앞에서 세운 목표를 달성할 수 있도록, 학습자가 자기를 통제하도록 도와줘야 합니다. 듀오링고의 컨셉은 스킬나무인데요, 각각의 스킬 가지들의 색깔이 회색에서 빨강, 파랑, 초록 등의 다른 색깔로 변한 뒤에, 스킬을 완벽히 마스터하면, 즉 학습을 끝내면 골드 색깔로 변합니다. 즉, 학습 과정을 시각적으로 보여주는 거죠? 이는 학습자가 학생 자신이 자기 학습을 통제하게끔 하고, 자신의 강점은 뭔지, 부족한 점은 뭔지 한 눈에 시각적으로 보여주어 초기에 설정한 목표를 향해 나아가도록 돕습니다.
(3) Self- reflection phase
[그림 5] Duoglingo - Self-reflection phase마지막으로 공부과정을 되돌아보는 self-reflection phase인데요, 듀오링고의 특징 중 하나는 학습 내용의 반복을 아주 중요시 여긴다는 겁니다. 학습에서 내용 반복의 중요성은 앞의 Hebbian theory 내용에서도 나왔었죠? 학습자에게 '예전에 학습한 스킬을 반복해라~' 라고 알려주기 위해서 시간이 지날수록 스킬트리의 색깔이 퇴색되게끔 합니다. 이는 시각적으로 자기 예전 스킬이 줄어들고 있다는 걸 알게 하겠죠? 뭐 예를들면 골드 색깔이 빨강으로 돌아가거나, 빨강이 회색으로 돌아간다거나 하는식 입니다. 뿐만 아니라 Fluency Score, Progress Bar 모두 학습자들이 자기 가 얼마나 나가고 있는지, 자기 수준이 평균 이상인지 평균 이상인지 등등을 확인할 수 있도록 합니다. 이 요소를 통해 초반에 세운 목표를 고치거나, 더 효율적으로 하 는 방법들을 생각해보고 다음에 적용할 수 있겠죠?
3. Codecademy
(1) Forethought phase
[그림 6] Codecademy - Forethought phase (1)첫 번째로 목표 계획 단계인 Forethought phase입니다. 코드케데미 홈페이지 메인 화면에서는 학생들에게 코딩을 배워 성공적인 비지니스를 만든 사람 등의 스토리 동영상을 보여주며 코딩 학습에 대한 동기부여를 합니다. 예를들어 이 화면에서는 토미 니콜라스라는 사람이 코딩을 잘 배워서 어떻게 타임즈의 ‘50 best website’에 선정된 웹사이트를 만들 수 있었는지에 대한 스토리를 보여주고 있습니다.
[그림 7] Codecademy - Forethought phase (2)beginner coding challenge 단계에서는, 학습을 시작하기 전에 아주 간단한 코딩 과제를 줍니다. 30분 전후로 걸리는 이 과제는 학습자가 수동적인 학습을 받기 전 코딩을 한 번 실제로 해 보는 활동을 하게 함으로써 자신감을 부여하고 흥미를 돋굽니다.
(2) Performance phase
[그림 8] Codecademy - Performance phase (1)두 번째로 peformance phase입니다. 실제 학습을 시작하는 단계의 화면인데요, 학습 과정 통제를 돕기 위해서 과정 들어가기 전 소갯말을 보여주고, 학습하는데 걸리는 예상 소요시간, 그리고 필요한 선행학습 내용들을 제시해줘서 이 코스에 정확히 얼마 정도의 노력을 들여야 하는지 감을 잡게 합니다. 즉, 자아통제감을 줍니다.
[그림 9] Codecademy - Performance phase (2)코스를 완성한 뒤에 뱃지를 받는 시스템도 있습니다. 이 뱃지를 통해 참가자는 한 과정에 대한 성취를 시각적으로 피드백 받으며, 다른 뱃지를 받기 위한 동기부여가 되는 효과도 있습니다.
(3) Self reflection phase
[그림 10] Codecademy -Self reflection phase (1)마지막으로 공부과정을 되돌아보는 self reflection phase에서는 자기 능력이 어느 정도까지 와있는지를 확인해볼 수 있게끔 퀴즈를 풀어볼 수 있습니다.
[그림 11] Codecademy -Self reflection phase (2)또 언어들을 얼마나 마스터했는지를 보여주는 바를 사용해서 다음 계획은 어떻게 잡아야 할지에 대한 감을 잡아줍니다.
4. 온라인 학습 플랫폼과 교육의 변화
이제 어떤 기술이든 손쉽게, 언제 어디서든 배울 수 있게 되었습니다. 향후 교육의 형태는 어떻게 변할 수 있을까요? 또 여러분이 배우고 싶은 컨텐츠는 무엇인가요?
참고문헌
Cheng, R., Poon, I. (2016). UX of e-Learning: A Look at How Two Online Learning Platforms Support Self-Regulated Learning. User Experience Magazine, 16(2).
Retrieved from http://uxpamagazine.org/ux-of-e-learning/
출처
[1] Zimmerman, B. J., &Campillo, M. (2003). Motivating self-regulated problem solvers. In J. E. Davidson &R. J. Sternberg (Eds.), The psychology of problem solving (pp. 233-262). Cambridge University Press
