홀수의 법칙이란, 정보를 표기할 때, 1, 3, 5 개의 패턴을 주로 보여주는 방식을 이야기합니다. 반복되는 컨텐츠를 보여줘야할 때. 2나 4처럼 짝수를 피해야한다는 이야기인데요. 이 키워드는 기존 랜딩페이지 디자인 실무 팁에서 다뤘던 내용 중 일부입니다. 기존에는 랜딩페이지를 위주로 살펴봤다면. 이번에는 여러 컨텐츠를 동시에 보여줘야하는. 반복패턴 케이스를 찾아 이 법칙이 실제로 맞는지. 검증해보도록 하겠습니다.
1. 유튜브 (Youtube)의 사례
인지과부하라는 말이 있습니다. 말이 좀 어렵게 느껴지실 수도 있는데. 너무 많은 정보가 한번에 들어와서, 판단을 내리기가 어려워지는 상태를 말합니다. 그 대표적인 사례가 PC웹 유튜브 화면입니다. 분명 많은 정보를 보여주곤 있는데, 정보를 체크하고 읽고, 확인하기가 어렵습니다. 일단 이런 상황의 가장 큰 이유는 두가지입니다.
- 전체 화면 기준으로 컨텐츠 영역이 너무 넓다
- 한 줄에 보여주는 컨텐츠 갯수가 너무 많다
전체 화면의 컨텐츠 영역이 1500인데, 추가로 좌측 메뉴까지 있으니. 실제로 사람이 느끼는 컨텐츠 영역은 이보다 훨씬 넓습니다. 그렇다면 만약 홀수의 법칙에 맞춰서 컨텐츠 영역을 한칸 줄여보면 어떨까요?
조금 비어보이는 느낌이 나긴 하지만. 컨텐츠를 탐색하기엔 훨씬 편리해졌습니다. 하지만 비어있는 화면이 조금 과하다는 생각이 드네요. 그렇다면 여기에서 비어있는 화면 만큼, UI 컴포넌트 크기를 조절해본다면 어떨까요?
비어있는 여백을 줄이고, 컴포넌트 크기를 키우니. 기존 화면보다 훨씬 안정적인 화면이 되었습니다. 이런 식으로 한 화면에 너무 많은 정보가 있을 때는. 과감하게 3개 이하로 컨텐츠를 줄이는게 낫습니다.
2. 카카오의 사례
홀수의 법칙을 지키며 UI를 보여주더라도 문제가 생길 수 있습니다. 카카오의 케이스가 좋은 사례인데요. 한줄당 컨텐츠는 3개까지만 보여주지만, 컨텐츠 영역이 무려 1700을 넘습니다. 여기에 텍스트 길이라도 적으면 좀 더 나을텐데. 텍스트까지 길어지니, 문제가 더 심각해집니다. 이런 경우, 간단한 해결책은 글자수를 줄이는 겁니다.
카카오의 디자인에서는 두가지 실수가 있습니다.
- 서비스가 만들어지면, 실제 사용하는 사람이 누구인지 생각하지 않음
- 컨텐츠가 길어질 때를 기준으로 테스트를 하지 않음
UI 서비스 규격을 만드는 사람이 디자이너라면. 실제 컨텐츠를 만들고, 올리는 사람들은 운영자들입니다. 이런 운영자들은 '보기좋으려고 글씨를 적게 쓰거나, 압축하려는' 생각을 하지 않습니다. 표현이 하나 빠질 경우 법적 문제가 되는 경우도 종종 있기 때문에. 가능하면 내용을 길게 쓰려고하는 경향이 있죠. 그러니 이런 상황을 방지하려면. 컨텐츠가 길어질 지점까지 고려해 전체 컨텐츠 영역을 좁혀놔야했습니다.
카카오의 커대한 배너 화면들도 마찬가지입니다. PC 기준에서 컨텐츠 영역이 넓으니, 비어있는 화면을 채우려고 이미지가 커집니다. 그러다보면 결국 너무 거대해진 타이틀과 이미지를 확인하느라. 인지과부하가 걸릴 수 밖에 없습니다. 비주얼을 우선시하고, 뭘 보여주려는건지가 불확실하기 떄문에 생기는 문제입니다.
3. 라인 TV의 사례
라인 TV의 케이스도 꽤 독특한 케이스입니다. 세로로 긴 컨텐츠를 한줄당 여섯개씩 보여주고있습니다. 유튜브같은 사례와는 다르게 세로로 이미지가 길기 때문에. 더 많은 컨텐츠를 놓을 수 있는건 장점입니다. 하지만 컨텐츠의 설명 텍스트도 작고, 포스터 크기도 작아, 내용을 확인하기가 어렵습니다.
만약 다섯개 이하로 UI 갯수를 줄인다면 어떻게 될까요?
현재처럼 다른 구도의 포스터가 여럿 들어가는 화면에서는. 4개 정도의 컨텐츠 노출이 더 적합합니다. 하지만 복잡도가 좀 더 줄어들 수 있다면, 5개를 사용해도 문제가 없겠죠. 실제로 패턴이 일정하다면, 여러 오브젝트를 보여주어도 복잡도는 크게 늘지 않습니다. 유사한 사례로 네이버의 쇼핑라이브 화면을 한번 비교해보시죠.
위의 사례들을 살펴보면서. 결국 홀수의 법칙을 사용하기 이전에. 컨텐츠 영역의 크기가 더 중요하다는 걸 알 수 있었습니다. 이후에는 개별 UI들이 얼마나 '비슷한' 화면들을 보여주는가의 문제였죠.
4. 카카오 TV의 사례
카카오 TV는 라인과 다르게, 컨텐츠가 좌우로 긴 방식입니다. 여러가지를 동시에 보여주기 위해서인지 컨텐츠 크기가 상당히 작은 편이죠. 그래서 텍스트 크기를 키워둔 방식인데. 영상에 따라서는 너무 많은 구분 텍스트가 붙어, 내용확인이 더 어렵습니다.
기존 화면에서 텍스트 크기는 유지하고, 영상 썸네일 영역의 크기만 바꿔봤습니다.
정리하는 글
실무를 하다보면, 컨텐츠 노출 갯수는 비즈니스 모델과도 연결이 되는 경우가 많습니다. 많이 노출해서 선택지를 늘려야, 실제 구매가 더 많이 일어날 것이다. 같은 윗사람들의 주장이 자주 나오는 곳이죠. 이 경우 실제 AB테스트를 해보면 더 좋습니다. 시각적 완성도를 좀 포기하더라도, 더 많은 결제가 나온다면. 서비스 운영 측에선 매우 좋아할 내용이니까요. 물론 확인해보니 '오히려 선택이 어려워지더라' 같은 케이스가 나올 수도 있습니다. 그건 상황마다 다를테니, 가능하면 꼭 테스트를 진행해보고, 근거있는 결정을 내리시면 더 좋을것 같습니다.
이 글은 '홀수의 법칙' 이란게 과연 항상 통용되는 것일까? 에 대해 알아보기위해 시작된 글이었습니다. 하지만 결과적으로 그런 법칙은 항상 맞는게 아니었고. 보여주려는 UI의 복잡도와, 컨텐츠 영역 너비에 따라. 항상 달라진다는 것도 알 수 있었네요. 그러니 홀수의 법칙이란건. 그냥 '가상의 이론'에 불과한 것이 검증된것 같습니다. 물론 좀 더 다양한 사례를 찾아보면서, 내용을 더 다뤄볼 수도 있겠지만. 결과가 크게 달라질 것 같진 않네요. 그러니 이 내용에 대해서는 이쯤해서 끝마치도록 하겠습니다.
리플러스의 UD LAB에 대해 더 궁금하시다면, 다음 링크를 확인해보세요!
UD LAB - 이용안내
안녕하세요, 리플러스입니다. UD LAB (구 UI 디자인 연구소)은 UI 디자인과, IT 생태계를 집중적으로 다루고있는 커뮤니티입니다. 크게 단톡방과 디스코드 채널로 이루어져있으며, 주기적으로 디스
udlab.tistory.com
'UI 디자인 연구' 카테고리의 다른 글
| UI 설계 개선하기 : 방송통신대학 - 시험일정 확인 (0) | 2021.02.12 |
|---|---|
| UI 디자인 : 웹페이지와 홀수의 법칙? - 랜딩 페이지 (0) | 2021.02.08 |
| UI 디자인 : 랜딩 페이지 디자인 - 실무 팁 13 (0) | 2021.02.06 |
| UI 설계 개선하기 : 방송통신대학 - 일정화면 (1) | 2021.02.02 |
| UI 패턴 핵심정리 : 지도 서비스 (0) | 2021.01.21 |
댓글