UI에 유사성 원칙 적용해보기
여러분은 유사성의 원칙을 알맞게 활용하고 계시나요?
본 글은 닐슨 노먼 그룹의 <Similarity Principle in Visual Design>를 바탕으로 구성했습니다.
요약
같은 그룹으로 보이게 하고 싶을 때 색상, 모양, 크기를 어떻게 사용해야 할지 소개합니다.
사람들이 디자인을 쉽게 이해하고 사용하려면 UI 요소들에 일관성 있고 명확하게 적용되는 규칙이 있어야 합니다.
사용자는 유사성을 가진 요소들이 비슷하게 작동할 거라고 기대하기 때문입니다.
결국 쉬운 말로 비슷해 보이면 관련성이 있다고 인지하게 됩니다.
게슈탈트 심리학자들이 20세기 초에 발견한 시각적 그룹화 원칙 중 유사성을 설명하는 대표적인 그림이 그림은 정말 많이 보셨을 것 같습니다.
대부분 4개의 그룹이라고 인지할 수 있는 이유는 '같은 모양'끼리 근접하게 위치하기 때문입니다.
모양을 비슷하게 그려서 유사성을 표현하는 방식은 UI 디자이너뿐만 아니라 시각 디자이너라면 활용할 수 있어야 합니다.
유사성 원칙의 특징은 시각적으로 비슷하기만 하면 어떤 방식으로든 관련이 있다고 가정하는 것입니다. 모든 것이 똑같을 필요는 없고 색상, 모양, 크기 중 하나라도 공유하면 동일한 그룹으로 인식됩니다.
유사성 원칙이 다른 시각 그룹화 원칙과 다른 점은 비슷한 요소의 위치가 서로 떨어져 있어도 그룹으로 보이게 할 수 있다는 점입니다.
1. 색
색상을 동일하게 적용하면 모양을 비슷하게 사용한 것보다 강력한 의미를 전달합니다. 색상은 다른 특성보다 인식이 잘 되기 때문에 서로 다른 유형을 그룹핑하고 실제로 관련되어 있음을 전달하는 데 사용할 수 있습니다.
모양은 세로로 4개의 그룹을 표현하고 있지만 가로로 1개의 그룹이 더 두드러집니다.
도형들이 무작위로 다른 곳에 위치하더라도 색상은 파란색 도형 그룹이라고 인식하게 합니다.사용자 인터페이스 디자인에서 색상은 공통 기능을 나타내는 데 자주 사용됩니다.
예를 들어, 클릭 가능한 버튼을 사용자에게 전달하는 방법으로 색 1개를 사용하는 것이 좋습니다.
사용자는 같은 색상을 공유하는 모든 항목이 동일한 방식으로 작동한다고 인식하기 때문에 기능에 따라 일관성을 보여주는 것이 좋습니다.
특히 색상은 클릭할 수 없는 제목 또는 실제로 클릭할 수 없는 주변 아이콘에 쉽게 사용하면 안 됩니다.
Tribute.co업로드 아이콘과 Record or Upload video 버튼이 같은 색상을 가지고 있기 때문에 하나의 그룹으로 인지할 가능성이 높습니다. 사용자는 2개의 버튼이 있다고 생각하고 클릭해 볼 겁니다.
하지만 위 사이트는 아이콘에 기능은 없는데 색상을 똑같이 써서 사용자가 클릭할 수 있다고 착각하게 만듭니다.
2가지 요소에 같은 색상을 쓰면 중요도가 비슷하다고 생각하기 때문에 클릭을 유도해야 한다면 색상을 Point로 써주는 것이 좋습니다.
아래 그림을 보면 모든 버튼이 녹색이어서 사용자는 양식 제출하는 버튼이 무엇인지 파악하는데 시간이 듭니다.
Synchrony Bank의 메시지 센터또 주요 버튼 위치도 입력란과 멀리 떨어져 있습니다. Fitts의 법칙에 따르면 접근성이 떨어지면 사용자의 속도를 늦춘다고 합니다.
입력란 바로 아래에 가깝게 제출 버튼을 위치시키는 것이 좋을 수도 있습니다.
2. 모양
이전 그림에서 볼 수 있듯이 모양은 그룹화를 나타낼 때 사용할 수 있습니다. 보통 버튼을 디자인할 때 전부 직사각형 모양으로 만들기도 하고 관계를 강화하기 위해 특정 카테고리는 둥근 "알약" 모양으로 그립니다.
Asos.comMen's Accessories의 하위 카테고리는 그룹으로 인식되기 위해 둥근 직사각형 모양으로 통일했습니다. 바로 아래에 있는 필터는 직사각형 모양으로 만들어서 총 2개의 그룹이 다른 기능을 가지고 있음을 빠르게 알 수 있습니다.
보통은 컴포넌트가 같은 모양을 가지면 기능도 같다고 가정할 수 있습니다.
하지만 레이블, 모양 내의 작은 텍스트 같은 세부 사항을 고려해야 합니다.
아래 사진을 봅시다.
예를 들어, Makr 태블릿 앱의 제품 내비게이션에 있는 아이콘은 모양이 매우 비슷하고 그중 두 개는 같은 아이콘을 사용하고 있습니다. 이런 시각적 유사성은 같은 카테고리라는 잘못된 메시지를 전달할 수 있습니다.
한 그룹으로 보이게 하기 위해서 세부 디자인을 비슷하게 하다 보니 구분을 확실히 해줘야 하는 메뉴를 순간적으로 같은 메뉴라고 착각하게 만드는 것입니다.
이 미세한 차이를 고민해보고 디자인해야 합니다.
목록을 구별하게 하는 비주얼 인디케이터에 대해 글을 올린 적이 있습니다.
여기서 나오는 연구에 따르면, 인디케이터를 유니크하게 디자인해야 사용자가 원하는 항목을 더 빠르게 찾을 수 있었습니다.
Etsy.com예를 들어, 무료 배송 또는 베스트셀러를 표시할 때 비슷한 모양의 태그 컴포넌트를 사용합니다. 두 태그에는 색상을 구분해줬고 베스트셀러 태그에는 아이콘도 추가해서 무료 배송 항목과 다른 그룹임을 시각적으로 잘 구별했습니다.
사용자에 눈에도 잘 띄고 다른 그룹인 것도 보여주는 좋은 디자인 사례입니다.
간혹 디자이너 중에 소위 말하는 예쁜 디자인을 하고 싶어서 태그 모양이나 색상을 한 가지로 표현하는 경우가 있습니다. 무엇이 더 우선순위인 지 고민해보는 것이 필요합니다.
아래 사진을 보면 같은 색상을 사용하는 대신 화살표 아이콘을 일관성 있게 사용해서 클릭이 가능하다는 표시를 나타냅니다.
이렇게 동일한 아이콘을 반복적으로 사용해서 작동 방식을 빠르게 인식하게 하는 방법도 있습니다.
아래 2가지 목적이 대표적입니다.
a. 다른 페이지로 링크 이동을 한다던지
b. 아코디언처럼 확장 가능함을 보여주던지
3. 크기
크기도 그룹핑을 나타내는 데 사용할 수 있습니다. 크기가 비슷하면 관련성이 있다고 인식될 가능성이 높죠.
사용자 인터페이스에서는 크기를 활용해서 가장 중요한 영역을 강조합니다.
크기가 동일하면 같은 중요도를 의미하기도 합니다.
크기를 일관성 있게 잘 사용하면 시각적 하이어 라키(계층 구조)가 형성돼서 사용자가 그룹을 빠르게 스캔할 수 있습니다.
크기를 잘 활용하고 있는 UI는 커머스 업계에서 많이 볼 수 있습니다.
Anthropologie.com제품 목록 페이지에서 제품들은 동일한 섬네일 크기(동일한 모양)를 가집니다. 이러한 일관성은 순식간에 '해당 영역의 모든 항목들이 제품이구나'라는 메시지를 전달합니다.
같은 목록에서 크기를 다르게 사용하면 제품 그룹에 속하지 않는다고 순식간에 인식합니다.
보통 제품 프로모션 영역은 크기를 다르게 해서 강조하죠.
하지만 크기도 마찬가지로 비슷하게 사용하면 서로 관련이 없는 항목을 한 그룹으로 보이게 할 수도 있습니다.
웹사이트에서 광고는 보통 오른쪽 레일에 표시됩니다.
아래 예시처럼 보통 광고가 있어야 하는 자리에 주요 콘텐츠를 배치하고 크기도 비슷하게 사용하면 사용자는 광고라고 생각하고 콘텐츠를 안 볼 수도 있습니다.
Martha Stewart. 사용자는 오른쪽 레일에 위치한 비디오 영역이 광고랑 크기가 너무 비슷해서 비디오 광고라고 착각했습니다.유사성 원칙은 더 많이 있습니다.
색상, 모양, 크기 외에도 유사성 원칙 요소는 더 많습니다. 유사성의 원리는 거의 모든 시각 디자인에 적용되어 있고 가장 기본적인 원칙임을 기억합시다.
작성자: Newtudy
게슈탈트 법칙, 기본 조형 원리 등 미대를 다닐 때부터 배웠던 개념이었다. 기본을 가장 잘 지켜야 좋은 프로덕트를 설계할 수 있다고 생각한다. 일하다 보면 사용자의 니즈, 여러 구성원의 생각에 따라 기본을 벗어날 때가 분명히 있다. 원칙이라고 무조건 지켜야 한다고 생각하지는 않지만 이 역시도 무시해서는 안 되는 이유는 사용자를 위해 디자인을 해야 하기 때문이다.
