✅ 파쓰와 함께 훑는 플랫폼 트렌드 : 단순성과 관련한 UX 법칙들을 소개해 드릴게요!

✅ 파쓰가 전하는 테크 샤라웃 : 화해, CJ온스타일, Youtube의 기술블로그 글을 소개합니다!

UI/UX를 단순하게 보여줄 수 있는 법칙들📖

UI/UX 디자인 분야의 다양한 전문가들이 무수한 법칙들을 정리해서 소개하고 있지만, 그중에서도 많은 전문가들이 하나같이 입을 모아 중요하다고 강조하는 부분이 바로 '단순함'입니다. 앞서 말씀드린 것처럼 사람이 한번에 처리할 수 있는 정보의 양에는 한계가 있기 때문인데요. 이에 관한 권위 있는 학자들의 여러 정리 중에서 딱 두 가지 법칙만 꼽자면 '프레그난츠의 법칙'과 '힉의 법칙'을 말씀드릴 수 있어요.

프래그난츠 법칙 (Law of Pragnanz)

프래그난츠 법칙 (Law of Pragnanz) 법칙은 1920년대 독일 심리학자들에 의해 정리된 시각적 인지 방법인 게슈탈트(Gestalt) 이론* 중 하나에요. 게슈탈트(Gestalt)라는 단어는 '전체로서의 형태'라는 뜻을 가진 독일어인데요. 게슈탈트 이론에 따르면, 사람은 전체 이미지를 각 부분들 사이의 상호 관계와 맥락 속에서 지각한다고 해요. 부분 혹은 요소의 의미가 고정되어 있지 않고 이들이 모인 전체에 따라 달라진다는 것이죠. 이러한 게슈탈트 이론 중 '프래그난츠 법칙'이란 다음과 같아요. 

“사람은 모호하거나 복잡한 시각 형태를 간결하고 단순한 형태로 인식하고 해석하고자 한다.”

즉, 인간의 뇌는 항상 인지 부하를 최대한 줄이는 방향으로 작동하기 때문에, 정보를 받아들일 때 최대한 간소화하려는 경향이 있음을 나타내는데요. 그래서 형태가 단순할수록 정보는 더 빠르게 처리되고 더 오래 기억에 남을 수 있다고 해요. 그렇기 때문에 실제로 플랫폼에서도 복잡한 정보를 간결한 아이콘과 시각적 요소로 대체해서 사용자가 정보를 더 쉽게 인식하고 이해할 수 있도록 만들어요.

*게슈탈트(Gestalt): 인간이 시각적 형태를 지각하는 방법으로 프래그난츠의 법칙, 공통영역의 법칙, 근접성의 법칙, 유사성의 법칙, 연속성의 법칙, 대칭의 법칙, 폐쇄성의 법칙이 존재

힉의 법칙(Hick’s Law)

힉의 법칙(Hick’s Law)은 1951년 영국의 심리학자 힉(Hick)이 자극의 수와 반응 사이의 상관관계 실험을 통해 정리한 법칙이에요. 실험의 내용은 다음과 같아요. 먼저 힉은 불빛이 나오는 버튼을 테이블에 설치해 두었어요. 버튼의 수는 2개에서 최대 10개까지 다양하게 세팅이 되어 있었지요. 그리고 5초에 한 번씩 임의의 버튼에 불이 들어오도록 하고 실험 참가자는 불이 들어오는 버튼을 가능한 빨리 누르도록 하는 업무를 부여받았어요. 그다음 힉은 선택 가능한 버튼의 수가 변해감에 따라 참가자들이 버튼을 누르는 데 걸리는 시간이 어떻게 변화하는지를 확인했어요. 그리고 이 실험을 통해서 다음과 같은 결론을 도출할 수 있었어요.

“의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다."

즉, 선택지의 개수가 많고 복잡할수록 생각하는 데에 오랜 시간이 걸린다는 것인데요. 그렇기 때문에 힉의 법칙을 사용자 경험 관점에서 해석하면, 사용자의 빠른 의사결정을 돕기 위해서는 선택지의 개수를 최소화해야 한다는 것으로 이해할 수 있어요.

결론적으로 프래그난츠 법칙과 힉의 법칙 모두 플랫폼 사용자 경험 관점에서 UI/UX를 단순화하여 사용자가 생각해야하는 시간을 줄여주고 의사결정을 신속하게 도와야 한다는 점을 강조하는 법칙들이에요. 즉, '단순함'을 통해 사용자의 인지 부하를 줄이고 더 나은 사용자 경험을 제공할 수 있다는 것이죠!

그렇다면 실질적으로 어떻게 플랫폼을 단순하게 만들어서, 사용자에게 고민하게 하는 시간을 줄여주고 의사결정을 신속하게 도울 수 있을까요? 오늘은 크게 두가지 방법을 소개해드릴게요. 첫 번째로 정보를 덩어리화하는 것과 두 번째는 한 화면에 한 가지 행동을 보여주는 방법이에요. 그럼 하나씩 살펴볼까요?

1. 정보의 덩어리화💭

정보가 방대한 플랫폼에서는 정보를 덩어리로 제시하여 사용자가 방대한 정보를 몇 개의 덩어리들로 단순하게 받아들여질 수 있도록 해야 하는데요. 그래서 서비스 제작자는 사용자가 정보를 쉽게 이해하고 처리하고 기억할 수 있도록 콘텐츠 덩어리를 나눠서 정리해야 해요. 그렇다면 정보의 덩어리는 어떻게 만드는 것인지 아래 몇 가지 법칙들을 함께 살펴보아요.

• 공통 영역의 법칙🗂️

공통 영역의 법칙은 요소들이 특정 영역에 모여 있으면 그룹으로 인식된다는 것이에요. 즉, 다양한 요소들을 그룹으로 묶어서 특정 영역에 배치하여 보여주면 사용자들은 해당 요소들을 하나의 그룹으로 인식하게 되어요. 주로 콘텐츠를 배치할 때 매우 유용한 법칙인데요. 아래의 넷플릭스 사례를 보면 영상 콘텐츠를 '넷플릭스 인기 콘텐츠', '대한민국의 TOP 10시리즈' 등 특정 영역에 모여있게 배치하여 그룹으로 인식되게 한 것을 볼 수 있어요.

• 동시 이동의 법칙👀

동시이동의 법칙은 이름에서 알 수 있듯이 동시에 이동하는 요소들은 서로 동일한 그룹으로 인식하게 된다는 것을 의미해요. 이 법칙은 개별 요소들의 위치와 무관하게 함께 움직이고 있는지에 대한 여부에 따라 동일한 요소로 인식하게 된다는 것인데요. 개별 요소가 같은 방향과 속도로 움직일 때 강한 연관성을 가지게 되죠. 동시이동의 법칙의 예시로는 콘텐츠를 가로로 스와이프(swipe) 할 때 같은 방향과 속도로 움직이는 것이 대표적이에요.

• 근접성의 법칙👥

다음으로 근접성의 법칙은 근접한 개체들은 동일한 개체로 인식된다는 것이에요. 근접성의 법칙을 고려하여 서로 연관된 정보들은 가까이, 관련 없는 정보들은 떨어져 있게 구성하면 그룹을 효과적으로 나타낼 수 있어요. 이때, 여백을 이용하면 시각적 계층 구조를 뚜렷하게 할 수 있고, 정보 흐름에 대한 이해도를 높일 수 있기 때문에 사용자들이 내용을 더 쉽게 이해하도록 만들어 줄 수 있죠.

• 유사성의 법칙👯

유사성의 법칙은 유사하게 생긴 요소들은 같은 요소로 인식한다는 법칙이에요. 인간은 유사하게 생긴 요소들 사이에서 규칙성을 발견하여 동일하게 여기는 경향이 있어요. 그래서 기능이나 화면들 간에도 유사한 요소들이 많을수록 더 연관성이 높은 것으로 인식하죠. 연관성을 높일 수 있는 UI 요소들은 컬러, 모양, 패턴, 사이즈 등이 있는데요. 예를 들면, 특정 콘텐츠 프레임의 모양 및 사이즈를 동일하게 하여 같은 요소로 인식하게 할 수 있어요.

• 연속성의 법칙📈

연속성의 법칙은 시각적으로 연결된 요소들은 관련성이 있는 것으로 인식한다는 것이에요. 인간은 시각적으로 연속적인 형태를 그룹화하는 심리가 있으며, 연속되는 선 다음에 오는 요소까지 하나의 그룹으로 인식해요. 그 중간에 다른 요소가 가로막더라도 우리 뇌는 다음 연속된 요소들의 방향과 패턴대로 인식하게 되죠. 연속성의 법칙은 주로 색상 선, 프레임 등의 요소를 이용해서 나타내는데요. 아래 그림에서 볼 수 있듯이 네이버 지도/카카오 맵에서 동일한 대중교통으로 이동하는 길을 같은 색 연결선으로 표시하는 것이 대표적이에요!

• 대칭성의 법칙🤲

대칭성의 법칙은 대칭적인 요소들은 서로 통일성을 가진다는 법칙이에요. 대칭적인 요소는 거리에 관계없이 그 자체가 하나의 시각적 규격이자 반복 패턴으로 인식되어 고유한 통일성을 만들어내요. 이를 통해 하나의 정보 덩어리로 인식될 수 있도록 도와주죠. 다만, 대칭적인 요소를 이용하면 안정적일 수 있지만 다소 단조롭고 정적인 결과를 만들어 낼 수 있어요. 따라서 대칭과 비대칭성의 적절한 조화가 중요해요! 아래 배달의 민족 사례를 보면, 화면 상단에 '배민1'과 '배달' 메뉴를 대칭적인 모양으로 통일감을 준 것을 볼 수 있는데요. '배민1'이라고만 하면 사용자가 어떤 서비스를 제공하는지 이해하기 어려울 수 있는데, '배달' 메뉴와 대칭적으로 배치하여 유사한 서비스라는 것을 잘 인식할 수 있도록 제공하고 있어요.

• 폐쇄성의 법칙🧐

폐쇄성의 법칙은 일부 정보가 누락됐을 때에도 완전한 하나의 형태로 인식하는 경향을 뜻해요. 다시 말하자면 형태를 지각할 때 빈 공간을 상상으로 메꾸는 경향을 나타내는데요. 아이콘이나 브랜드 로고에서 완전한 형태를 이루고 있지 않더라도 자연스럽게 전체 형태로 지각할 수 있는 것이 대표적인 예시에요. 주로 플랫폼 내에서 복잡해질 수 있는 아이콘을 단순화할 때 사용되기도 하고요. 혹은 한 화면 안에 다 보이지 않지만 스와이프 액션 시에 추가적인 콘텐츠가 제공된다는 것을 안내할 때에 전체 화면이 아닌 일부 화면만 보여주는 형태로 사용할 수 있어요.

2.1️⃣화면 1️⃣행동

UI/UX를 단순화할 수 있는 방법으로 두 번째는 1화면 1행동의 법칙이에요. 사용자가 한 화면 내에서 해야 할 행동을 하나만 제시하는 것을 말하는데요. 사용자는 해야 할 행동에 혼란을 느낄 경우, 사용성이 크게 저해되며 결국 플랫폼을 이탈하게 될 수도 있어요. 따라서 한 화면에서 사용자가 행동할 수 있는 경우를 최소화하여 사용자에게 고민하게 하지 말고 바로 행동으로 이어질 수 있도록 도와야 해요.

대표적인 사례 중 하나가 바로 구글 검색 엔진이에요. 구글의 검색창을 떠올려보면 깔끔한 로고와 검색창만 존재하는데요. 이러한 단순한 디자인은 사용자가 검색이라는 행동을 할 때, 다른 요소들에 방해받지 않고 검색이라는 행동에 집중할 수 있도록 도와줘요. 복잡한 기능이나 화려한 그래픽 없이 오히려 사용자가 가장 필요로 하는 행동에 정확히 집중하여 사용성을 극대화하고 있죠.

• 우디(2023)."인지 부하를 줄이는 UX 디자인의 비밀".brunchstory
• (2024)."사용자 경험을 향상시키는 UX 디자인 원칙".PARTICLE
• 현이(2022)."단순하게 디자인하기".brunchstory
• Cherry(2024)."UX 심리학: 프레그난츠의 법칙".brunchstory
• Design(2021)."UX/UI의 10가지 심리학 법칙/힉의 법칙".brunchstory
• W. E. Hick (1952). "On the rate of gain of information, Quarterly Journal of Experimental Psychology". 4:1, 11-26