brunch

You can make anything
by writing

C.S.Lewis

by Jinhee Park Aug 04. 2020

사용성 테스트를 통해 피드 UI 개선하기

퍼블리의 신규 서비스인 '퍼블리 뉴스'는 프로덕트 전문가가 업계 트렌드를 선별하고 해석과 함께 공유하는 프로페셔널 소셜 미디어이다. 지난 2월에 정식 출시하기 전부터 beta Test 격인 Early Access Program(이하 EAP)을 운영하면서 Product Market Fit을 찾기 위한 여러 실험을 진행했다. 피드 UI 개선은 그 중 하나로 EAP 기간부터 지금까지 주요한 개선 과제로 진행하고 있는 실험이다. 퍼블리 뉴스에서 피드는 하단 내비게이션에서 첫 번째 탭에 자리 잡고 있으며 제품에서 가장 많은 인터랙션이 일어나는 곳이다. 사용자는 피드에서 본인이 구독하는 큐레이터의 코멘트를 받아본다. 그렇기 때문에 피드에서 코멘트를 읽는 경험을 향상하는 것은 퍼블리 뉴스의 편의성을 판가름하는 중요한 요소이다.

[그림 1] 좌 개선 전/우 개선 후

EAP 종료 전, 코멘트 읽기 경험 개선이라는 이름으로 첫 번째 실험을 했다. MVP 버전의 피드에서 문제점을 찾고 더 나은 UI를 찾는 과정을 아래에 정리했다.

Problem

Context

사용자 인터뷰 통해서 발견 문제의 원인

EAP 기간 동안 1~4차에 걸쳐 사용자 인터뷰를 하였다. 지속해서 기존의 피드에서 코멘트가 눈에 잘 들어오지 않는다는 의견이 수집되고 있었다.

인터뷰 내용 중 코멘트 읽기 경험과 관련한 사용자 코멘트

*코멘트를 읽는 경험이 불편하지 않다고 답변했거나 인터뷰에서 digging 하지 않은 사용자는 아래 인원에 포함되지 않았다.

코멘트 읽기 경험이 불편한 이유는 무엇인가?

폰트가 작음: 6명

평소에는 괜찮지만, 글이 길 때 폰트가 작다고 느낌: 2명

눈에 잘 안 들어옴, 눈에 안 박힘, 한눈에 잘 안 들어옴: 5명

두괄식/요약/제목 안 되어 있으면 읽기 힘듦: 6명

뉴스카드에서 어디를 가장 먼저 보는가?

기사를 먼저 봄: 4명

코멘트 첫 줄을 먼저 봄: 5명

큐레이터 이름: 3명

기타 의견

코멘트 첫 부근에서 꽂히는 키워드가 있으면 본다.

코멘트가 표준화되어 있으면 좋겠다. (더 보기 전까지 '숫자'나 '꽂히는 워딩' 등)

어떤 큐레이터는 문단을 잘 구성하고 어떤 큐레이터는 잘하지 못해서 아쉽다.

너무 긴 글은 분류가 되어있지 않으면 읽지 않음. (적어도 숫자를 넣거나 첫 줄에 제목이나 주장이 정리되어있는 것)

문단의 형태가 읽을지 말지를 결정할 때 큰 영향을 끼치는 것 같다.

넘버링/문단 나눔 등 형식이 잘 갖춰져 있지 않으면 읽기 불편하다.

구독하는 사람마다 글 쓰는 스타일이 다른데 '더 보기'로 눌러 봐야 양을 가늠할 수 있는 것이 좀 그렇다.

코멘트 읽기 경험 스터디

코멘트 읽기 경험에 대한 실험을 진행하기 위해 사전에 필요한 내용을 리서치하여 정리하였다.

UX : 피드 UI 개선 스터디

사용자는 어떻게 읽는가? | 스터디 개요 1. 스터디 목적 텍스트 콘텐츠가 눈에 잘 들어오지 않는 문제의 원인 파악 읽기 경험에 영향을 주는 요소들을 참고하여 개선을 위한 가설 도출 2. 스터디 �

brunch.co.kr/@hijinnyjinny/13

문제 설정 회의

퍼블리 뉴스는 프로덕트 매니저, 프로덕트 디자인, 소프트 엔지니어가 한 팀인 스쿼드 체계로 구성되어 있다. 스쿼드 인원이 모두 모여 코멘트 읽기 경험을 개선하는데 주요하게 다루어야 할 문제를 정의하고 방향을 align 하는 회의를 진행했다.

회의에서 나온 주요 의견들

코멘트 ‘발견의 문제’와 ‘소비의 문제’를 분리해서 보아야 한다.

인터뷰 결과 고객들이 텍스트 자체를 읽어 나가는 것보다, 어떤 것을 읽을지를 판단하는 것에서 더 어려움을 겪는 것으로 보임.

지금 단계에서 발견하는 곳과 소비하는 페이지를 나누는 것은 문제 확인도 되지 않았으므로 최우선 과제는 아니라고 생각한다. cost 크기 대비 불확실성이 크다.

이번에는 발견과 관련된 문제까지만 다루고, step by step으로 소비 문제까지 가보자.

UI를 어떻게 개선해보면 좋을까?

피드에서 코멘트를 더 읽을지 말지 판단하는 주요 요소는 1) 코멘트 첫 줄 2) 아티클인데 현재 아티클과 코멘트 첫 줄과의 거리가 너무 먼 것 같다. (e.g. ‘페이스북’은 더 붙어있다)

카드 자체의 구조에 문제가 있다. 현재 피드에는 코멘트가 먼저 나오는 카드가 가장 많은데, 하단에 텍스트보다 더 강조되는 아티클이 등장하다 보니 시선이 분산되는 것 같다. 사용자들이 코멘트를 먼저 보는/아티클을 먼저 보는 케이스로 나뉘는 것도 이 영향일 듯. 어떤 것을 더 읽고 싶게 하고 싶은지를 우리가 정하는 게 우선인 것 같다.

우선순위를 고려하면 시간 표시 부분도 강조가 덜 들어가야 한다고 생각한다.

카드 형태를 많은 서비스가 버리는데, 우리는 왜 유지하는가? 그리고 첫 줄에 제목을 작성하게 만드는 장치(제목 필드)가 웹에 있어야 하지 않을까? 텍스트에는 볼드 처리를 가능하게 하여 핵심 캐치를 잘 할 수 있게 하면 좋을 것 같다. (e.g. '리멤버 나우'의 하이라이트 기능)

큐레이터가 아티클을 소싱해와서 코멘트를 다는 것이라는 우리의 시스템을 분명하게 인식시키기 위해서 카드 타입을 선정하였다. 카드를 버리면 여백이 늘어나는 것은 맞다. 여백이 많을수록 많이 보이긴 하지만 꼭 더 잘 인식되는 것은 아님.

아티클 이미지가 더 크면 좋겠다. 텍스트가 많게 느껴지는 것이 요새 사람들(주의력이 떨어져 있기 때문에)에게 부담일 것 같다.

Experimental Design

실험 가설

가설을 설정한 이유

코멘트가 눈에 더 잘 들어오도록 UI가 개선되면, 어떤 코멘트를 읽으면 좋을지 발견하기 어려운 문제의 일부가 개선될 가능성이 있음.
→ 코멘트가 눈에 잘 들어오지 않아 코멘트 첫 줄의 내용을 빠르게 판단할 수 없었을 가능성 존재하기 때문.

이번 실험에서는 '시각적인 요소'에 변화를 줬을 때 결과가 어떻게 나타나는지 실험하는 데 집중하기 위함.

앞서 정의한 '읽을지 말지 판단하기 어려운 문제'는, 두괄식/제목을 쓰도록 코멘트 가이드라인을 제공하는 것이 더 효과적이라 판단, 프로덕트에 대한 개선은 후속 태스크로 진행 고려.

실험 진행 방식

FramerX를 이용하여 프로토타입 제작

테스터 5명을 모집하여 프로토타입으로 사용성 테스트 진행

기간

2020년 2월 5일 - 6일, 이틀 간

결과 평가

사용성 테스트 질문지를 바탕으로 정성적으로 평가

Prototype

대조군인 기존 안과 실험군인 개선 A안, 개선 B안 총 3가지 화면으로 진행하였다.

프로토타이핑의 목적

프로토타입을 통해 피드에서 사용자에게 인지 부하를 주는 요소들을 개선하는 것을 목적으로 한다.

코멘트의 강약 조절, 피드 형태 변경 등의 시각적인 요소들의 변화가 읽기 경험에 긍정적인 영향을 주는 최적의 환경을 찾도록 한다.

실험 안

[대조군] 기존 안

[실험군] 개선 A안/개선 B안

*당시 피드 UI 개선과 더불어 리액션 버튼 개선 실험이 함께 진행되고 있었다. 기존 안에서 엄지 모양의 좋아요 버튼이 도움이 됐어요 버튼으로 변경된 것은 본 실험과 연관된 결과가 아님을 밝힌다.

개선 A안 - 카드 타입, 코멘트 강약 조절

카드 레이아웃을 유지한 채 정보 요소들의 강약을 재조정하면 코멘트가 눈에 더 잘 들어올 것이라는 가설하에 디자인한 화면이다. 먼저 정보의 우선순위를 정하고, 이에 따라 크기와 색상 등으로 시각적 강약을 계층 구조로 적용하였다. 좁은 화면 안에서 면 분할이 많을수록 사용자의 시선은 분산되는 경향을 보인다. 따라서 그리드의 잘게 쪼개진 면을 최대한 없애고, 적절한 여백을 사용해 정보를 그룹화하여 구분될 수 있도록 하였다.

개선 B안 - 그리드 타입, 피드 형태 변경

기존 코멘트 UI를 카드 타입에서 펼친 그리드 타입으로 변경하였다. 좌우 여백 제거함으로써 코멘트 미리 보기 영역에서 한 줄에 읽을 수 있는 단어 수가 늘어나기 때문에 코멘트를 파악하기 더 용이해진다. 이로 인해 콘텐츠에 조금 더 집중하는 환경을 조성할 것이라는 가설을 적용하였다. 정보의 구성은 A안과 동일하게 하되, 레이아웃을 변경했을 때 편의성이 높아지는지 인터뷰를 통해 검증해보고자 하였다.

실험군 공통 적용 사항

정보 우선순위

코멘트 영역 > 기사 영역 > 프로필 영역(큐레이터 이름) > 리액션 버튼 > 코멘트 업로드 시간

코멘트 업로드 시간

코멘트 업로드 시간은 해당 큐레이터가 언제 활동했는지를 보여주기 때문에 큐레이터 정보 영역에 함께 묶이는 것이 더 자연스럽다고 판단, 위치를 옮겨 프로필 영역으로 그룹핑하였다. 또한 기존에 페이스북에서도 프로필과 업로드 시간이 함께 있는 방식을 사용하고 있으므로 사용자들에게 조금 더 익숙하고 편리하게 느껴질 것이라는 생각으로 실험 군에 적용하였다. 프로필 영역에서 이름 이외의 정보는 명도를 낮추어 시선이 덜 가도록 유도하였다.

코멘트

뉴스 코멘트는 미리 보기로 5줄까지 보여주고 더 보기(기존 안에서는 '더 읽기')를 누르면 전체 내용을 확인할 수 있게 되어있다. 실험군에서는 미리 보기에서 노출되는 줄 수를 5줄에서 4줄로 줄였다. 그 이유는 코멘트를 많이 보여주는 것보다 코멘트와 아티클 사이의 간격을 좁혀 카드가 한눈에 들어올 수 있도록 하는 것이 해당 콘텐츠 카드를 파악하는 데에 더 도움이 될 것이라는 가설이 있었기 때문이다. 이에 따라 미리 보기 노출 수를 줄이고 행간을 x1.8에서 x1.5로 좁혔다.

또한, 텍스트 콘텐츠를 다루는 다른 플랫폼에 비해 퍼블리 뉴스의 코멘트 명도가 다소 낮았는데 색상 대비가 읽기 경험에 영향을 주는지 테스트 해보기 위해 글자 색상을 #333에서 #111로 높여보았다.

아티클

기존 카드에서 아티클 영역이 아래에 있음에도 불구하고 글자 크기와 weight 때문에 가장 먼저 시선이 가 카드를 읽는 흐름이 부자연스러워지는 단점이 있었다. 이에 아티클 제목의 크기를 줄이고 요소들의 간격을 조정하여 시선을 흐트러뜨리는 요소를 낮출 수 있도록 하였다.

실험 결과

사용성 테스트에서는 테스터에게 3개의 실험 안을 무작위의 순서로 보여주고 5분 내외로 사용하게 하였다. 그리고 테스터가 프로토타입의 실험 안을 조작하는 동안 행동이나 표정, 언어적 표현 등을 관찰하고 후속 질문을 하는 방식으로 진행하였다.

실험 안 기호도

기존안이 더 좋다고 느낌 (3/5명)

개선 A안이 더 좋다고 느낌 (1/5명)

개선 B안이 더 좋다고 느낌 (1/5명)

3개의 실험 안 중에서 하나를 선정해 달라는 질문에서는 5명 중 3명이 기존 안이 더 좋았다고 응답하였다. 실험 안을 선택한 데에는 포괄적이고 복합적인 이유가 섞여 있으므로 요소별로 세분화하여 심층 질문을 던져 보았다. 요소별로 나누어 질문해보니 테스터마다 선택한 안은 달랐지만, 편의성에 대해 유사한 선호와 의견을 보이는 것을 알 수 있었다.

요소 별 주요 의견

좌우 여백

카드 타입 선호 (2/5명)

[개선 A안]은 구분이 잘 되어있어서 보고 싶은 콘텐츠만 잘 보여줌. 하나의 카드에 더 집중되어서 읽기 편함.

[개선 B안] 보다 기존에 여백 있는 게 가독성이 더 좋다. 왜냐하면 카드 간 구분이 쉬워서. 개선 B안은 카드와 카드 간 구분이 잘 안 됨.

그리드 타입 선호 (3/5명)

[기존 안]은 카드 타입에서 여백이 있는 것이 답답하게 느껴짐.

[기존 안]은 좀 답답한 느낌이 들었다. [개선 B안]은 페이스북이랑 비슷한 느낌이 들어서 더 편했다. 쭉쭉 내리면서 읽기가 더 편했던 듯.

[개선 A안]이 불편한 것까지는 아니지만 더 넓게 볼 수 있지만 그렇지 않은 것에 대해 아쉬운 느낌.

→ 좌우 여백을 선호하는 이유는 카드 간 구분이 쉬워 콘텐츠를 하나하나를 인식하는 데에 도움을 주기 때문. 그리드 타입에서는 콘텐츠를 넓게 볼 수 있다는 장점이 있어 선호하나 콘텐츠 영역 간의 구분이 어려워지면 인지 부하로 인해 불편함을 느낌.

프로필

다수의 사용자가 직함의 명도가 더 높은 개선 안을 더 선호. (4/5명)

→ 사용자는 인접한 UI에서 비슷한 유형의 정보를 얻을 수 있을 것이라 기대함. 현재의 직함 영역은 성격이 다른 정보가 혼재되어 있어 카드를 읽어나가는 데에 방해가 됨. 또한 뉴스피드는 이미 사용자가 선택한 큐레이터들의 목록이므로 직함의 중요도가 타 정보들에 비해 낮음.

코멘트

텍스트 가독성은 [기존 안]이 더 편함 (4/5명)

행간이 좁은게 더 좋음 (1/5명)

→ 텍스트가 주 콘텐츠인 피드에서 행간이 너무 좁으면 콘텐츠를 읽어내려가는데 어려움을 겪음.

아티클

[개선 A안]은 기사와 코멘트가 블렌드 된다는 느낌이 안 듦.

공통으로 아티클 제목의 텍스트가 볼드한데 카드가 끝날 때 기사 영역이 시선을 한 번 뺏어감. 시선이 다음 카드의 프로필 영역으로 옮겨가야 하는 데 방해를 받는다는 느낌을 받음.

아티클 영역은 [기존 안]이 글씨가 더 큰데, [개선 안]은 글씨 사이즈가 코멘트랑 너무 비슷해서 구별이 잘 안 됨.

→ 카드가 끝나는 부분에 아티클 영역이 위치함. 시각적으로 너무 강조되면 다음 카드로 시선을 이동시키는 것을 방해함. 반대로 기사 제목의 텍스트가 너무 작으면 다른 요소들과 크기가 비슷해 내용을 읽는 것을 어려워함.

Key Result

탐색에서 소비로

사용자의 행동은 탐색에서 소비로 이어짐.

‘더 보기’를 누르기 전에는 내용이 한눈에 들어오는 것이 좋음.

‘더 보기’를 누른 후에는 내용을 잘 읽어나가는 것이 더 중요해짐.

행간이 좁은 경우, 내용이 많아질수록 사용자는 읽기 힘들어하는 경향을 보임.

목적에 따라 코멘트를 읽는 환경이 달라져야 함.

피드의 첫 번째 목적은 탐색

사용자는 가장 먼저 코멘트가 본인에게 필요한 내용인지 파악하고자 함.

탐색에서 판단을 돕는 요소가 부족할 경우, 내용을 이해하는 데에 어려움을 겪음.

코멘트와 아티클이 서로 blend 되어야 함. 코멘트를 확인할 때 아티클 제목을 적절하게 참고하면서 상호 보완적인 관계가 되는 것.

코멘트 외의 요소들은 적절하게 그룹화하여 시선이 분산되는 것을 방지해야 함.

피드의 편의성에 큰 영향을 주는 것은 콘텐츠의 영역 구분

콘텐츠를 한 눈에 파악하기가 힘들면 사용자는 인지 부하가 높아져 불편함을 느낌.

코멘트 카드의 영역을 구분하는 데에는 좌우 여백보다는 상하 여백이 더 큰 영향을 끼침.

그 근거로, 다수의 사용자가 개선 A안을 페이스북과 더 유사하다고 생각함. 실제로는 페이스북은 여백이 없는 그리드 형태이며 개선 B안과 더 유사. 그 이유를 유추해보면, 페이스북은 각각의 콘텐츠가 박스 형태로 분명하게 인지됨. 프로필로 시작하여 리액션 버튼으로 끝나는 부분도 고정적임.

콘텐츠의 시작 지점과 끝 지점을 분명하게 구분 지어주는 것이 필요함.

최종안

1. 코멘트 정보 영역에 대한 개선 → 코멘트 업로드 시간 및 직함의 위치, 위계 조정

코멘트 업로드 시간은 유사 정보 영역끼리 그룹화.

직함의 위계 단계를 낮추어 더 낮은 단계의 gray로 표현. 이유는 사용성 테스트 결과, 본인이 구독한 큐레이터의 코멘트가 노출되는 것이기 때문에 피드에서는 직함 정보가 크게 영향을 끼치지 않았음. 또한, 현재의 직함 영역은 정보의 계층 구조가 정리되지 않아 읽기 경험을 방해해하고 있었음을 발견.

2. 텍스트 행간 및 색상 변경

아티클 타이틀의 행간 normal(x1.5)에서 tight(x1.3)으로 조정

코멘트 텍스트 색상의 경우, 타 서비스를 참고하여 색상 테스트 진행.