brunch

매거진 디자인 그리고 프로덕트

라이킷 170 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Jinhee Park May 13. 2020

피드 UI 개선 스터디

사용자는 어떻게 읽는가?

스터디 개요

1. 스터디 목적

텍스트 콘텐츠가 눈에 잘 들어오지 않는 문제의 원인 파악

읽기 경험에 영향을 주는 요소들을 참고하여 개선을 위한 가설 도출

2. 스터디 주제

피드에서의 텍스트 콘텐츠 읽기 경험

3. 스터디 방향

텍스트가 더 잘 읽히기 위해서 가독성에 영향을 주는 요소들은 무엇이 있는지 찾아본다.

디바이스 환경과 피드 UI에서 고려해야할 점은 무엇이 있는지 찾아본다.

레퍼런스 서비스들을 분석하고 참고할 만한 기능이 있는지 찾아본다.

1. 가독성

얼마나 쉽게 읽을 수 있는지를 나타내는 정도를 뜻하는 말. 글이나 메세지를 쉽게 읽고 이해하는 정보 취득 능력과 관련이 있다. 가독성은 글꼴, 글자 간격, 줄 간격, 띄어쓰기 등에 따라 달라진다.

웹 페이지 방문에서 사용자들이 읽는 단어는 평균적으로 28%에 불과하다. 웹에는 이용할 수 있는 정보가 너무 많기 때문에 사람들은 보통 읽기는다는 '스캔'을 한다. 스쳐지나가는 사용자의 시선을 사로잡아 빠르게 몰입시키기 위해서는 잘 읽히는 형태의 텍스트가 필요하다.

출처: Nielsen Norman Group, Legibility, Readability, and Comprehension: Making Users Read Your Words

글줄의 길이와 가독성

한 줄의 텍스트가 너무 길면, 글 줄을 한눈에 알아보기 어렵기 때문에 사용자는 글을 읽어 내려가는 것에 부담감과 피로감을 느낀다. 반대로 텍스트가 너무 짧으면, 앞으로 너무 자주 돌아와야 하므로 가독성의 리듬을 깨버리고 만다.

출처: 리메인 스타일 가이드

본문 텍스트의 줄 길이는 일반적으로 40-60자(공백 및 기호포함) 사이가 일반적이나, 데스크탑과 같이 줄 길이가 더 긴 영역에서는 최대 120자 까지 가능

출처: 리메인 스타일 가이드

텍스트의 짧은 줄에 대한 이상적인 줄 길이는 한 줄당 20~40자

출처: 리메인 스타일 가이드

행간과 가독성

웹접근성 가이드 WCAG 2.1에서는 행간은 적어도 문단내의 띄어쓰기space는 글자크기의 1.5배 이상이어야 한다고 말하고 있다.

행간이 최소한 1.5 이상이어야 읽기가 쉽고 기본값으로는 1.75를 권장한다.

결과값이 소수가 발생할 경우는 반올림한 수치를 적용한다.

모바일의 작은 화면은 PC보다 가독성이 떨어지는 환경이므로 글줄의 간격이 더 넓어야한다.

행간 도약 안구 운동과 가독성

우리는 글을 읽을 때 글줄을 따라서 연속적으로 읽지 않는다. 우리 눈은 글줄의 한 위치를 응시하여 일정 기간 동안 머문 후, 다음 응시점으로 움직여 멈추기를 반복한다. 글이 지각되는 시기는 고정 기간 동안이지만, 어디에 고정할 것인지를 결정하는 것은 도약 안구 운동이다. 성인이 한글을 읽을 때 일어나는 진행성 도약의 크기는 평균적으로 가로로 읽을 경우 4, 6자이다.

줄을 바꾸어 글줄의 처음에 착안하는 곳은 글줄의 첫 자가 아니다. 한글의 경우, 1, 2 자 정도를 건너뛰어 글줄을 읽기 시작한다. 글줄의 마지막 부분에서도 마지막 글자에까지 착안하는 것이 아니라 2, 3자 정도를 남기고 다음 글줄로 시선을 바꾼다.

출처: 이춘길, 2004, 한글을 읽는 시선의 움직임, 서울대학교출판부 | 박재홍, 2013, 가로짜기 글줄기준선을 적용한 한글 글자틀 구조 연구

명도 대비

수 많은 연구에서 명도 대비가 문장을 읽는 속도에 미치는 영향을 입증했다. 문장을 읽는 속도는 배경색과 글자색의 명도 대비에 의해 주로 결정되고, 명도 대비가 높을 수록 가독성이 높아진다. 2008년부터 적용된 웹 접근성 시행 규칙에서는 권장 명도 대비를 4.5:1로 지정하고 있다.

WCAG 2.0(웹콘텐츠접근성지침)에서는 ANSI standard에서 정한 3:1의 최소 명도 대비를 기준으로 색각이상(선천적 또는 후천적), 노안 등 다양한 요인으로 인해 대비 감도가 낮아진 사람들을 고려하여 1.5의 대비 손실률을 적용하고 있으며, 이를 수식으로 표현하면 3X1.5=4.5가 됩니다.

출처: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-68-head

다크 모드

서비스 사용자의 형태와 기술적 변화에 따라 다크 모드가 주목받고 있다. 이 다크 모드는 사용자를 오랜 시간 서비스 내에 머물게 할 수 있는 장치로써 적극적으로 도입될 것으로 예상된다.

기술적 측면: 모바일 디바이스의 배터리 효율을 증가시키며 유해 청색광(블루라이트)을 줄여줌.

사용자 경험 측면: 장시간 콘텐츠 서비스를 소비하는 영상, 사진, 소셜 미디어 서비스 등에서 시각적 피로도를 낮추고 콘텐츠에 집중할 수 있도록 함.

출처: https://support.apple.com/ko-kr/HT208976

다크 모드는 눈을 편안하게 하고 작업에 온전히 집중할 수 있도록 합니다.

하지만 먼저 본인의 제품이 다크모드 도입이 적합한 서비스인지 판단해보아야 한다.

흰 배경의 검은 활자는 눈의 홍채를 조여 가독성과 시인성이 좋은 반면, 어두운 배경에서 밝은 문자를 읽을 경우 빛 번짐(halation)효과와 함께 흰 배경 대비 가독성과 시인성이 떨어진다.

밝은 배경에서 어두운 문자로 텍스트를 읽을 때 테스트 참가자의 26% 가 더 정확하게 텍스트를 읽는 것으로 나타났습니다.

출처: Bauer, D., & Cavonius, C., R. (1980). Improving The Legibility Of Visual Display Units Through Contrast Reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects Of Visual Display Terminals (Pp. 137-142). London: Taylor & Francis

2. 디바이스 환경과 피드 UI

모바일 디바이스에서의 읽기 경험

짧고 간단한 내용이라면 컴퓨터와 모바일 기기의 이해도에 큰 차이는 없었다. 하지만 내용이 어렵고 복잡한 소재일 수록 모바일에서 읽는 속도에 약세를 보였다.

심리학에서 이러한 현상을 속도 정확도 트레이드 오프라고 하는데, 사용자는 어려운 글에 대해서 컴퓨터 상에서와 같은 수준의 이해력을 얻기 위해 속도를 줄여야 했다.

특히 많은 모바일 활동이 이동 중에 이루어지는데 이런 환경 요인이 사용자의 관심과 집중력을 떨어뜨릴 수 있다.

짧고 쉬운 구절은 장치에 관계없이 빠르게 읽을 수 있으므로 모바일 콘텐츠는 간결하게 구성하는 것을 권장한다.

출처: Nielsen Norman Group, Reading Content on Mobile Devices

피드에서의 읽기 경험

피드는 스크롤 UI로 다양한 콘텐츠들을 연결시키거나, 사용자가 인터페이스에 계속 머물면서 지속해서 콘텐츠를 소비하도록 만든다.

따라서, 피드에서의 읽기 경험은 단순한 텍스트 읽기 경험과 구별해서 생각해보아야 한다.

여기서 알아두어야 할 점은 피드 UI는 사용자에게 강한 인지부하를 발생시킨다는 것이다.

보통 비슷해보이는 정보를 길고 연속적으로 제시. 따라서 정보 밀도가 높고 시각적으로 분명하게 구분되지 않으면 구별하기가 어렵다.

다른 필요 없는 정보들에 묻혀 결국 사용자는 원하는 것을 찾지 못하고 피드를 떠나게 될 수도 있다.

사용자를 떠나지 않게 하기 위해서는 수 많은 정보 속에서 필요한 것을 찾는 방법 제시해야 한다.

또한, 자신의 관심사와 매칭되는 정보인지 빠르게 인지할 수 있도록 적절한 시각적인 도움을 주어야한다.

출처: https://ux.shopify.com/stop-feeding-your-users-a859730a86d6

3. 레퍼런스 벤치마킹

1. 레퍼런스 조사의 목적

피드의 특징은 콘텐츠 탐색과 소비가 동시에 일어난다는 것.

따라서, 레퍼런스를 텍스트 서비스에 한정시키지 않고 콘텐츠를 발견하는 과정과 몰입시키는 피드 환경을 잘 조성한 서비스들을 위주로 벤치마킹

2. 벤치마킹 기준

콘텐츠를 소비하는 환경을 잘 고려하였는가?

사용자가 본인의 취향이나 관심사에 맞는 콘텐츠를 탐색하기 용이하도록 피드를 배치하였는가?

사용자가 몰입하고자 하는 정보(상세 페이지)로 진입하는 과정이 잘 설계되어 있는가?

쿼츠

Concept

몇 가지 주제를 선별해 이슈 중심으로 나열

Contributor: 기고자

Featured Contributor: 주요 기고자

피드에는 해당 이슈나 기사의 요약 글이 노출되며 기사나 기사에 대한 코멘트를 자세히 볼 수있는 상세 페이지로 연결된다.

Key Features

1. Feed UI

quartz mobile app

기사 요약 + 코멘트 버튼

타이틀 + 기사 요약 + 코멘트 버튼

타이틀 + 이미지 + 기사 요약 + 코멘트 버튼

타이틀 + 기사 요약 + Contributor 코멘트

→ '기사와 코멘트'라는 하나의 소재를 가지고 여러가지 UI 조합으로 만들어 냄. 시각적으로 다양한 볼거리로 피드를 풍성하게 보이도록 함.

모든 기사 요약의 첫 문장을 볼드로 표시하고 텍스트의 크기와 굵기의 대비를 강하게 주고 있음.

→ 의도적인 강약을 조절을 통해 시선의 흐름을 유도하여 빠른 탐색을 도움.

최상단 이미지에는 자이로스코프 센서 이용, 디바이스의 움직임에 맞춰 움직이는 인터렉션을 줌.

→ 영상이나 모션 인터렉션은 시각적인 즐거움을 주고 사용자의 체류시간 확보를 유도하는 다양한 시도로 사용되는 트렌드 중 하나

기사 요약은 보통 6줄 정도이나 길게는 10줄 이상도 허용하고 있음.

'쿼츠 곡선'에 따라 중간 길이 기사는 작성하지 않는다. 쿼츠 곡선이란 쿼츠의 편집장 케빈 딜레이니가 이야기한 개념으로 사람들은 아주 짧은 기사나 아주 긴 기사는 읽지만 '데스존'(Death Zone)에 속한 500∼800단어 정도의 중간 길이의 기사는 읽지 않는다는 점을 강조한다.

출처: https://www.yna.co.kr/view/AKR20170808127100033