[디자인 사용성] Laws of UX - 02

[알아 두면 좋은] > [웹사이트, 웹서비스] 글에서 UX 법칙을 정리한 좋은 사이트를 소개했다. 

 

Home | Laws of UX

 

이 사이트에 나와있는 UX 법칙을 간단하게 정리해보고자 한다. 

 

각 법칙은 법칙에 대한 개요와 함께 간략하게 법칙에 대해 소개하고 관련 아티클이나 관련 링크를 제공하여 법칙에 대한 근거들을 보여주도록 구성되어 있다. 직접 사이트에서 내용을 파악하며 관련 아티클들을 읽는 것이 제일 좋은 방법이지만 아래에 각 법칙들의 Summary를 정리해 보았으니 이 글을 통해 대략적인 내용을 파악할 수 있도록 글을 썼다. 

 

총 21개의 법칙을 한 글에 담기에 너무 많아 3개의 글로 나누어 정리하려 한다. 앞서 7개의 법칙을 먼저 알아보았다. 연관 링크는 아래 남긴다. 

 

Laws of UX - 01: https://tammist.tistory.com/44

Laws of UX - 03: https://tammist.tistory.com/46

 

이제, 다음 7개 법칙에 대해 알아보자. 

 

 

---

Law of Proximity 근접의 법칙

Objects that are near, or proximate to each other, tend to be grouped together.
근처에 있거나 서로 가까운 물체는 그룹핑(그룹화)되는 경향이 있다. 

1. Proximity helps to establish a relationship with nearby objects. 근접성은 가까이 있는 물체와의 관계를 형성하는데 도움이 된다. 
2. Elements in close proximity are perceived to share similar functionality or traits. 가까이 있는 요소는 유사한 기능이나 특성을 공유하는 것으로 인식된다. 
3. Proximity helps users understand and organize information faster and more efficiently. 근접성은 사용자가 정보를 더 빠르고 보다 효율적으로 이해하고 구성하는데 도움을 준다. 

---

Summary

이 법칙은 게슈탈트 이론에서 그룹화 법칙에 해당한다. 지난 글에서도 말을 했든 근접성은 정보를 정리하는 데 가장 기본이 되는 법칙이다. 간단히 말해, 연관 있는 정보나 기능은 가깝게 두는 것이다. 

 

우리는 가까이에 있는 사물들은 서로 연관되어 있을 거라고 생각하게 된다. 그래서 전혀 다른 성질을 가진 것이라 할지라도 가까이에 있으면 무언가 연관성이 있을 것이라 예상한다. 그래서 전혀 관련 없는 엉뚱한 정보나 기능들을 가까이 두어 혼동을 주지 않도록 화면 구성을 신경 써야 한다. 

 

어렵지 않은 내용이라서 인식하지 않았을 뿐 우리는 이미 그렇게 하고 있다. 가입에 관련된 혜택 정보를 써놓고 난 후에 가입 버튼을 두는 것이나 정보와 연관된 링크를 바로 아래 붙여두는 것 등. 이미 알고 있고 하고 있는 것이라 오히려 지나치기 쉽다. 하지만 다양한 정보들이 많은 페이지를 디자인하게 될 경우에 이 법칙은 좋은 해결책을 위한 아이디어가 될 것이다.

 

정보가 서로 연관 있는지에 따라 정보의 위치를 가깝거나 멀게 디자인할 수 있으니 말이다. 잘 알고 있고 사용하고 있지만 인식하지 않았던 것들을 인식하게 되면 더 좋은 해결책을 찾을 수 있을 거라고 생각한다. 그래서 이 법칙도 중요하고 꼭 인식하고 사용하기를 바란다. 

---

Law of Prägnanz 프로그나츠(간결)의 법칙

People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us. 
사람들은 모호하거나 복잡한 이미지를 가능한 가장 단순한 형태로 인식하고 해석할 것이다. 왜냐하면 우리의 인지적 노력이 가장 적게 필요한 해석이기 때문이다. 

1. The human eye likes to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information. 인간의 눈은 정보에 압도되는 것을 방지하기 위해 복잡한 형태에서 단순함과 질서를 찾는 것을 좋아한다. 
2. Research confirms that people are better able to visually process and remember simple figures than complex figures. 연구에 따르면 사람들은 복잡한 형태보다 단순한 형태를 시각적으로 더 잘 처리하고 기억할 수 있다. 
3. The human eye simplifies complex shapes by transforming them into a single, unified shape. 인간의 눈은 복잡한 모양을 하나의 통일된 모양으로 변형하여 단순화한다. 

Design Principles: Visual Perception And The Principles Of Gestalt — Smashing Magazine

---

Summary

이 법칙은 게슈탈트 이론의 핵심이라고 할 수  있는 형태를 인지하는 법에 대한 내용이다. 사람들은 복잡하고 난해하게 파편화된 조각들을 하나로 연결해 자신에게 익숙한 무언가로 인식하는 경향이 있다고 한다. 그래서 정확하게 뭔지 잘 모를 형태들에서 사람의 얼굴이나 사람의 형태를 찾아내어 공포물로 만들기도 한다.

 

이 법칙은 정보가 아닌 이미지를 다룰 때 더욱 유용하게 사용될 수 있다. 하지만 이 법칙 안에는 복잡한 형태보다는 단순한 형태를 시각적으로 더 잘 처리하고 기억하는 특성에 대한 부분도 포함되어 있다. 이 부분은 정보를 다루거나 주요 기능을 다룰 때 사용할 수 있다. 중요하다고 무조건 화려하게 꾸미기보다는 단순하게 정리하는 것이 더 임팩트 있게 사용자에게 전달될 수 있다.

 

이 부분은 뇌 인지에 대한 부분에서도 결을 같이 하는데 선명하고 가독성이 더 좋은 글을 사람들은 더 신뢰하게 된다고 한다. 내용에 대한 파악이 빠르게 되고 명확하기 때문에 믿게 되는 것이다. 그래서 이 법칙을 생각하며 정보에 접근하는 것이 좋다. 

---

Law of Similarity 유사성의 법칙

The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
인간의 눈은 디자인에서 유사한 요소가 따로 떨어져 있더라도 완전한 그림, 모양 또는 그룹으로 인식하는 경향이 있다. 

 

1. Elements that are visually similar will be perceived as related. 요소는 시각적으로 유사하면 연관된 것으로 인식한다. 
2. Color, shape, and size, orientation and movement can signal that elements belong to the same group and likely share a common meaning or functionality. 색상, 모양 및 크기, 방향 및 움직임 등은 그 요소들이 동일한 그룹에 속해 있으면 공통된 의미 또는 기능을 공유할 가능성이 있음을 나타낼 수 있다. 
3. Ensure that links and navigation systems are visually differentiated from normal text elements. 링크나 내비게이션 시스템 등은 일반 텍스트와 시각적으로 확실히 구별되도록 해야 한다. 

---

Summary

이 법칙은 게슈탈트 이론을 토대로 정리한 법칙이다. 가까기에 있는 것과 마찬가지로 동일한 요소를 가지고 있으면 유사한 기능이나 유사한 정보를 가지고 있다고 사람들은 인식한다. 

 

그래서 디자인 시스템이 중요함을 이 법칙을 통해 알 수 있다. 디자인 시스템은 다양한 이유로 필요성이 강조되고 있지만 가장 기본인 부분은 이 법칙을 통해 설명이 가능하다.

 

같은 기능을 가진 것들에 대한 시각적, 기능적 정의를 내리고, 그 정의에 따라 같은 기능을 가진 것들을 같은 형태로 제공하여 사용자에게 혼란을 야기하지 않을 수 있게 만들어 주는 것. 그것이 디자인 시스템에서 기본적으로 지켜야 하는 부분 중 하나이다. 

 

또한 이 법칙은 반대의 경우를 정의 내릴 수 있다. 유사한 정보나 기능을 유사한 요소로 표현한다와 함께 반대로, 다른 정보나 기능은 차별화를 명확하게 주어 구별해야 한다는 것을 함께 말해주고 있다. 

 

어쩌면 너무나 당연한 이야기일 수도 있다. 하지만 언제나 말하듯 인식을 하고 사용할 수 있어야 진짜 아는 법칙이 될 수 있다. 꼭 기억해두기를 바란다. 

---

Law of Uniform Connectedness 균일한 연결성의 법칙 

Elements that are visually connected are perceived as more related than elements with no connection.
시각적으로 연결된 요소는 연결이 되어있지 않은 것보다 더 연관성이 있는 것으로 지각된다. 

1. Group functions of a similar nature so they are visually connected via colors, lines, frames, or other shapes. 색상, 선, 프레임 또는 기타 다른 형태들을 통해 시각적으로 연결되면 유사한 종류로 그룹핑된다. 
2. Alternately, you can use a tangible connecting reference (line, arrow, etc) from one element to the next to also create a visual connection. 또한 하나의 요소를 다른 요소와 시각적으로 연결하기 위해 명백한 연결 참조(선, 화살표 등등)를 사용할 수 있다. 
3. Use uniform connectedness to show context or to emphasize the relationship between similar items. 유사한 항목 간의 관계를 강조하거나 맥락을 보여주기 위해 균일한 연결성을 사용하라. 

---

Summary

이 법칙도 게슈탈트 이론에 대해 이야기 하고 있다. 균일한 연결성의 법칙은 시각적인 부호를 통해 정보를 직관적으로 연관되도록 만들 수 있다는 이야기를 하고 있다. 너무도 당연한 이야기이기에 더욱 잘 알고 있어야 한다. 

 

유사한 정보 그룹을 유사한 형태로 구성하는 것 외에 유사한 정보들 중에 직접적으로 연관된 정보나 더 밀접한 관련이 있을 때에는 선이나 화살표로 정보 간의 관계를 표시할 수 있는 것이다. 

 

정보가 많은 페이지들을 구성할 때에 이런 디테일한 시각적 요소들이 정보 간의 위계와 관계, 연관성을 나타내 주어 사용자의 이해를 도와줄 수 있으므로 이 법칙 또한 기억하고 사용할 수 있기를 바란다.

---

Miller’s Law 밀러의 법칙

The average person can only keep 7 (plus or minus 2) items in their working memory.
평균적으로 사람들은 그들의 작업 기억으로 7개 (많게는 9개, 적게는 5개)의 아이템만을 저장할 수 있다. 

1. Don’t use the “magical number seven” to justify unnecessary design limitations. 불필요한 디자인 제한을 위해 "마법의 숫자 7"을 사용하지 마라. 
2. Organize content into smaller chunks to help users process, understand, and memorize easily. 사용자가 쉽게 처리하고 이해하고 저장할 수 있도록 더 작은 덩어리로 콘텐츠를 구성하라. 
3. Remember that short-term memory capacity will vary per individual, based on their prior knowledge and situational context. 단기 기억 용량은 그들의 사전 지식과 상황적 맥락에 따라 개인차가 있음을 기억하라. 

Miller’s law, chunking, and the capacity of working memory (practice) | Khan Academy

---

Summary

이 법칙은 사람의 단기 기억용량에 따른 정보의 양을 조절해야 함을 강조하고 있다. 한 페이지 안에 너무 많은 정보를 담는다면 사람들은 그 정보를 다 이해하지 못한다. 그래서 가능하다면 정보의 양을 조절하는 것이 필요하다. 기획의 단계에서나 시각 작업 단계에서 이 법칙은 콘텐츠의 구성을 조절하게 하는 근거를 제시해 준다. 

 

이 법칙을 알고 난 후 재미삼아 구글 검색 화면과 네이버, 다음 검색 화면을 비교해 보았다. 다들 검색 결과에 대한 정보를 제한하여 제공하고 있었다. (물론 네이버는 연관 콘텐츠(영화, 책 등등)를 강조하거나 다음은 광고가 상단에 보여 실제 검색 결과는 스크롤해야 보인다는 단점이 있지만) 

 

법칙을 알고 난 후 이렇게 다른 서비스들을 이 법칙을 생각하며 살펴보면 재미있다. 그러나 이 법칙이 경고했듯 단기 기억 용량은 개인마다 다를 수 있고, 숫자 7을 마법의 숫자로 오인하지 않아야 한다. 법칙은 무조건적인 옳음이 아님을, 법칙은 좋은 해결책을 찾기 위한 방법임을 기억해야 할 것이다. 

---

Occam’s Razor 오컴의 면도날

Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.
동등하게 잘 예측한 경쟁하는 가설들 사이에서 가정이 가장 적은 것을 선택해야 한다. 

1. The best method for reducing complexity is to avoid it in the first place. 복잡성을 줄이는 가장 좋은 방법은 처음부터 복잡함을 피하는 것이다. 
2. Analyze each element and remove as many as possible, without compromising the overall function. 전체 기능을 손상하지 않는 한도 내에서 각 요소를 분석하고 가능하면 많이 제거하라. 
3. Consider completion only when no additional items can be removed. 추가 항목을 제거할 수 없는 때에만 완료를 고려하라. 

---

Summary

이 법칙은 복잡하지 않은 단순함에 대해 강조하고 있는데, 결국 말하자면 가장 근본적인 문제 해결에만 집중해야 한다는 것이다. 이 법칙을 디자인에 적용하기 위해서 어떻게 사용하는 것이 좋을지에 대한 해답을 제시한 아티클이 있어 아래 링크를 남겨둔다. 

 

아래 링크한 아티클에서도 강조하듯, 가장 근본이 되는 해결책을 제외하고는 모두 제거하는 것이 좋다. 왜 이 서비스를 만드는 것인지, 왜 이 페이지를 구성해야 하는지를 질문하고 그 질문의 답에 가장 명확하게 맞는 콘텐츠들로 구성해야 할 것이다. 

 

아래 아티클에서 나온 가장 기억에 남는 문구가 있어 남겨둔다. 

We must constantly ask ourselves when designing: “What is the minimum amount of UI that will allow the content to be found and effectively communicate to the user?” 
우리는 디자인을 할 때 스스로에게 지속적으로 물어봐야 한다. "사용자가 찾고자 하는 콘텐츠를 찾고 효과적으로 소통할 수 있는 UI의 최소량은 얼마인가?" 

“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away”. — Antoine de Saint-Exupéry 
"완벽함은 더할 것이 없을 때가 아니라 뺄 것이 없을 때 이루어진다." - 앙투안 드 생텍쥐페리

Designing with Occam’s Razor

---

Pareto Principle 파레토 원리

The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.
파레토 원리는 많은 일들에서 약 80%의 결과가 20%의 원인에서 나온다고 말합니다.

1. Inputs and outputs are often not evenly distributed. 입력과 출력이 고르게 분포되지 않는 경우가 많다. 
2. A large group may contain only a few meaningful contributors to the desired outcome. 큰 규모의 그룹에서는 원하는 결과에 의미 있는 기여자가 단지 몇몇 소수에 불과할 수 있다. 
3. Focus the majority of effort on the areas that will bring the largest benefits to the most users. 가장 많은 사용자에게 가장 큰 혜택을 줄 수 있는 영역에 대부분의 노력을 집중하라. 

The 80/20 Rule in User Experience

---

Summary

이 법칙은 경제학자 빌프레도 파레토(Vilfredo Pareto)가 이탈리아 토지의 80%가 20%의 사람들에 의해 소유되고 있다는 사실을 알게 되면서 생겨난 법칙이다. 이 법칙은 편향된 시스템에 대한 통찰력 있고 끝없이 적용 가능한 분석을 제공한다. 

 

이 법칙의 핵심은 80대 20이라는 숫자가 아니다. 위 아티클에서도 나와 있듯 이 법칙의 핵심은 몇 가지 주요 변수만 결과에 영향을 미치고 대부분의 다른 요소는 거의 영향을 미치지 않는다는 것이다. 그러므로 시간과 노력에 대한 투자가 효율적으로 배분되어야 함을 이야기한다. 

 

서비스의 트래픽이 가장 많이 나오는 특정 영역이 어디인지, 사람들의 불만이 가장 집중된 곳이 어디인지 등등 가장 중요한 부분에 가장 많은 시간과 노력을 할애해야 하라는 말이다. 가장 중요한 것이 무엇인지 파악하고 그곳에 집중하라는 말이다. 

바로 위에 적은 법칙과 마찬가지로 이 법칙 또한 집중할 수 있는 것에 집중하게 만드는 것이 핵심이라고 할 수 있다.

---

 

이것으로 지금까지 14개의 법칙에 대해 알아보았다. 이 글을 쓰며 느끼는 것이 있다면, 무언가를 알고 있다는 것은 그것을 이해하고, 그걸 활용할 수 있어야 한다는 것이다. 그래서 그 첫걸음이 바로 정체를 아는 것이고 The Lawo of UX는 그 역할을 충실히 해주고 있다고 생각한다. 다른 분들에게도 이 사이트가 제시하는 법칙을 통해 그 첫걸음을 잘 내디뎠으면 좋겠다. 

 

마지막으로 남아있는 7개의 법칙들에 대해서도 곧 글을 올리려 한다. 

그럼 다음 글에서 만나기를 바란다. 

 

 

Laws of UX - 03: https://tammist.tistory.com/46