Layering comment

Period
2023.01.~02. (1개월)

Assignment
삼성디자인멤버십 인텐시브 코스 (개인작)

Category
시스템 디자인

Overview

소비기반 창작을 위한 콘텐츠 영역 위 인터랙티브 댓글 시스템

콘텐츠 속 숨은 유저 니즈와 플랫폼 인터페이스 구조를 분석하고, 콘텐츠 영역에서 상호작용 할 수 있는 새로운 댓글 인터페이스와 인터랙티브 모드, 사용자 군별 현실적 use case를 제안하였습니다.

Background

콘텐츠 매체의 변화

누구나 창작자나 소비자가 될 수 있는 세상. 시청에만 그치던 콘텐츠 소비는 매체의 변화로 총체적인 활동이 되었습니다.

Target setting

소비 경험으로 창작하는 Hidden creator

댓글과 콘텐츠 제보 등 소비 경험만으로 콘텐츠 창작에 참여하며, 마치 얼굴 없는 인플루언서가 되고 싶어 하는 유저를 Hidden creator로 정의, 타겟하였습니다.

User Positioning

기존에 없던 유저 포지셔닝으로 기회 영역 발견

크리에이터보다는 적극성이 덜하지만,창의성과 창작 니즈는 못지않아 익명으로 댓글 영역에서 활동

User journey

댓글 영역에서부터 소비 단절

유저 테스트로 hidden creator의 콘텐츠 플랫폼 소비를 관찰해본 결과, 재미있는 댓글을 쓰러 콘텐츠와 댓글창을 오가는 과정에서 소비가 단절되는 것을 발견할 수 있었습니다.

UI structure study

유저별로 구분된 인터페이스

댓글과 콘텐츠 사이 상호작용 되는 UI 구조를 크리에이터와 소비자 두 사용자군을 기준으로 분석했습니다.

숏폼 콘텐츠 인터페이스

정보 구조상 콘텐츠와 댓글의 위계를 위 아래로 구분

롱폼 콘텐츠 인터페이스

댓글과 콘텐츠 뎁스를 나누어 소비자와 크리에이터 영역을 분리

Needs expression

콘텐츠와 더 함께하고 싶은 유저 니즈

동시시청

댓글 창에 가려지지 않게  편집한 콘텐츠를 소비

베댓요정

댓글에 영상 시간을 나노 단위로 적어 공유

나노공감

크리에이터에게 댓글 고정 요청,  콘텐츠 제안

Platform's reaction

하지만, 충분하지 않은 플랫폼 대응

댓글 Reply 기능

Reply한 댓글과 영상을 한 화면에서 보는 콘텐츠

베스트 댓글 팝업 기능

베스트 댓글을 영상 중간에 팝업

공감 수 팝업 기능

공감이 가장 많았던 장면에 공감 수를 팝업

Needs expression & Platform's react

서로 다른 성격으로 분리된 인터페이스

시점 차이

콘텐츠 게시글과 댓글은 서로 다른 시점에 올라옴

공간의 가변성 차이

콘텐츠 게시글과 댓글은 서로 다른 시점에 올라옴

User needs - deep dive

하지만 그 차이를 넘나들고 싶은 유저 니즈

시간 포착

콘텐츠 영역에서 진행되는 시간을 포착해서 소비자 영역인 댓글에 표시

부분 영역 포착

콘텐츠를 장면마다 캡처하고 부분부분 영역을 크롭해 다른 소비자들에 공유

시간・ 공간 넘나들기

다른 공간에서 다른 시점에 올라온 댓글과 콘텐츠를 조합해 하나의 콘텐츠로 제작

Platform's reaction

경계없는 소비 기반 창작을 위한 콘텐츠 영역 위 인터랙티브 댓글 시스템

Needs

공간 넘나들기

시간 넘나들기

시간 포착

부분 영역 포착

UX strategy

콘텐츠 영역에서

계속 업데이트

특정 시점

특정 부분

Features

콘텐츠 영역의 댓글 레이어 인터페이스

자유롭게 상호작용하는 인터랙티브 기능

As-is

To-be

UI structure study

COMMENT on CONTENT 버튼 설계

상단 고정 컴포넌트 영역에는 기능을 원치 않는 소비자가 기능을 제어하기 위한 토글을,우측 콘텐츠별 컴포넌트 영역과 댓글 영역에는 창작을 위한 버튼을 설계하였습니다.

User flow

사용자군 별 유저 플로우와 기능 설계

Interactive mode

더 자유로운 창작을 위한 인터랙티브 모드

Writing- 원하는 시간과 장면에
원하는 위치로 댓글을 옮겨 원하는 공간에 남깁니다

Drawing- 내가 원하는 모양으로
콘텐츠에 어울리는 라인을 그리면,텍스트 라인으로 변화합니다

Motion tracking- 내가 원하는 움직임으로
움직이는 물체를 프레스 해 모션을추적하면 물체에 댓글이 맵핑됩니다

Use case

Hidden creator- 콘텐츠를 더 즐기고 활용하기

콘텐츠와 동시에 소통하기
콘텐츠의 정확한 위치와 시간에 소통하며 더 가까이 상호작용할 수 있습니다.

시선을 끄는 댓글로 주인공 되기
콘텐츠를 시선을 끄는 댓글로 꾸며 댓글을 콘텐츠의 주인공으로 만들 수도 있습니다.

작은 부분까지 질문하기
영상 위 해당하는 부분에 댓글을 달아 질문할 수 있어 장면에 맞는 구체적인 질문을 할 수 있습니다.

댓글 자세히 보기- 다른 콘텐츠와 연결하기
한 댓글을 좀 더 자세히 보고 싶거나 답글, 좋아요를 남기고 싶다면, 떠다니던 댓글을 탭해서 팝업시킬 수 있습니다. 댓글에 또 다른 영상의 링크를 남겼을 경우, 바로 진입할 수 있고, 영상이 링크된 다른 영상들로 바로 넘어갈 수 있도록 설계해 특정 장면의 재창작물을 끊김 없이 소비할 수 있습니다.

Use case

Creator- 새로운 콘텐츠 기회영역

시청자 참여 영역을 제공해주는 콘텐츠
영상 자체에 시청자들의 답변 영역을 따로 만들어줘 함께 답하며 마치 질문받는 크리에이터가 되었다고 느끼게 할 콘텐츠가 생길 수 있습니다.

시청자들이 자유롭게 소통할 주제와 공간을 제공해 주는 콘텐츠
오직 소비자들만이 만들어 내는 콘텐츠도 생길 것입니다. 썰 주제를 제공하는 이 모닥불 영상은 콘텐츠로서는 의미 없는 영상이지만, 시청자들이 모일 수 있는 공간을 제공해 주어 콘텐츠 안에서 마치 모닥불 앞에 둘러앉아 이야기하듯이 썰을 풀거나 소비자들끼리 대화를 나눌 수 있습니다.

댓글을 템플릿으로 이용한 재창작 콘텐츠
댓글 템플릿으로 새로운 콘텐츠를 제작할 수 있도록 하여 창작자와 소비자가 순환하는 구조를 만듭니다.

Application

다양한 콘텐츠 플랫폼에 적용

COMMENT on CONTENT는 영상 콘텐츠와 댓글이 있는 어떤 콘텐츠 플랫폼이든 적용할 수 있는 댓글 시스템입니다. 이 기능을 통해 콘텐츠 플랫폼이 단순 시청만 하는 공간이 아닌 hidden creator들의 플레이그라운드가 될 수 있길 기대합니다.

User test

유저 테스트를 통한 구체적 인터랙션과 시나리오 개선

1차 UT

UT 계획
(크리에이터 1명, 소비자 3명, 콘텐츠 전문가 1명 대상)
콘텐츠와 그에 어울리는 댓글을 영상으로 제작 후 상하 스와이프 가능한 프로토타입으로 시연 및 think aloud 진행

피드백
콘텐츠에 방해가 될 것 같다. 크리에이터가 원하지 않는 경우도 고려하면 좋겠다.

피드백
콘텐츠의 톤에 따라 댓글이 잘 안 보이기도 한다. 너무 빠르게 지나가서 읽기 어렵다.

개선 계획
크리에이터 선택권 부여 기능 설계

개선 계획
시인성 개선,댓글 유지 시간 조정

2차 UT

UT 계획
(소비자 3명 대상)
[폰트 사이즈, 그림자 값, 댓글 유지시간] 의 변주를 준 시안을 제작하고, 부담간, 시인성, 구조이해에 관한 질문지에 점수 측정

결과: 사용성 개선

3차 UT 시스템 벨류 측정

UT 계획
(소비자 3명 대상)
(크리에이터 1명, 소비자 3명, 콘텐츠 전문가 1명 대상)별도의 댓글 인터페이스가 있는 기존 플랫폼과 comment on content 프로토타입을 각각 테스트하여 한 콘텐츠 당 체류하는 시간을 측정

결과: 콘텐츠 체류시간 증가→ 플랫폼, 크리에이터 수익으로 연결