UX/UI 디자인의 "바나나 규칙"은 웹사이트나 어플리케이션을 쉽게 이해하고 사용할 수 있도록 하는 간단하면서도 강력한 원칙입니다. 이 규칙의 기본 개념은 바나나의 모양이 식품임을 명확하게 나타내는 것처럼 사용자가 웹사이트나 어플리케이션의 목적을 한 눈에 이해할 수 있어야 한다는 것입니다. 이 개념은 제품이 어떻게 사용될 수 있는지에 대해 제공하는 시각적 단서를 의미하는 디자인의 "어포던스(1)(affordances)" 개념과 밀접하게 관련되어 있습니다.
UX/UI 디자인에서 바나나 규칙은 웹사이트나 어플리케이션의 홈페이지 레이아웃과 디자인에 적용되는 경우가 많습니다. 이 페이지는 사용자가 제품과 접촉하는 첫 번째 지점인 경우가 많으므로 제품의 목적과 기능을 명확하게 전달하는 것이 중요합니다. 바나나 규칙을 따르는 웹사이트나 어플리케이션 은 명확하고 정돈되어 있으며 탐색하기 쉬운 레이아웃을 갖습니다.
바나나 법칙의 핵심 요소 중 하나는 명확한 정보 계층 구조 사용. 이는 디자이너가 페이지에 다양한 요소가 표시되는 순서에 대해 의도적으로 주의를 기울여야 하며, 가장 중요한 정보는 눈에 잘 띄고 이해하기 쉬운 방식으로 배치되어야 함을 의미합니다. 이는 서로 다른 유형의 정보를 구별하기 위해 다양한 글꼴 크기, 색상 및 레이아웃을 사용하여 달성할 수 있습니다. 예를 들어, 페이지의 기본 제목은 하위 제목보다 더 크고 눈에 띄게 표시되어야 하며, 하위 제목은 본문 텍스트보다 더 크고 눈에 띄게 표시되어야 합니다.
바나나 규칙의 또 다른 중요한 측면은 명확하고 일관된 탐색을 사용하는 것입니다. 사용자는 웹사이트나 어플리케이션에서 쉽게 길을 찾을 수 있어야 하며 다양한 섹션과 페이지가 어디에 있는지 이해할 수 있어야 합니다. 이는 이해하기 쉬운 라벨이 포함된 명확하고 일관된 탐색 메뉴를 사용하여 달성할 수 있습니다. 또한 디자이너는 버튼과 클릭 유도 문구의 위치를 염두에 두고 눈에 잘 띄고 쉽게 찾을 수 있도록 해야 합니다. 사용자가 웹사이트 내에서 자신의 위치를 쉽게 추적할 수 있도록 탐색경로 탐색을 사용하는 것도 좋은 방법입니다.
바나나 규칙을 따르는 웹사이트의 좋은 예는 Apple 웹사이트의 홈페이지입니다. 페이지는 정보의 계층 구조가 명확하고 단순하고 깔끔합니다. 페이지 상단에는 제품 이미지와 명확한 클릭 유도 문구가 포함된 눈길을 끄는 대형 배너가 있습니다. 배너 아래 페이지는 다양한 제품과 서비스를 보여주는 섹션으로 나누어져 있으며 각 섹션에는 명확한 클릭 유도 문구가 있습니다. 탐색 메뉴는 페이지 오른쪽 상단에 위치하여 이해하기 쉽습니다.
또 다른 예는 Google 스토어입니다. 웹사이트에는 이해하기 쉬운 라벨이 포함된 명확하고 일관된 탐색 메뉴가 있습니다. 이를 통해 사용자는 원하는 제품이나 서비스를 빠르고 쉽게 찾을 수 있습니다. 웹사이트에는 이미지, 사양, 가격 등 제품 정보도 명확하게 표시됩니다. 이를 통해 사용자는 쉽게 제품을 비교하고 정보에 입각한 구매 결정을 내릴 수 있습니다. 결제 과정은 간단하고 간단하며 명확한 조치 촉구와 최소한의 필수 정보만 제공됩니다. 이를 통해 사용자는 쉽고 빠르게 구매를 완료할 수 있습니다.
반면, 바나나 규칙을 따르지 않는 웹사이트나 어플리케이션은 사용자의 주의를 끌기 위해 경쟁하는 요소가 너무 많아 레이아웃이 어수선할 수 있습니다. 이로 인해 사용자가 제품의 목적을 이해하고 원하는 정보나 기능을 찾는 것이 어려울 수 있습니다. 또한 탐색 메뉴는 웹사이트 전체에서 이해하기 어렵거나 일관성이 없는 레이블로 인해 혼란스러울 수 있습니다.
또한 바나나 규칙을 따르지 않으면 사용자 경험이 저하되어 사용자가 아무런 조치도 취하지 않고 웹사이트나 어플리케이션을 떠나게 될 수도 있습니다. 이는 낮은 전환율과 낮은 품질로 이어질 수 있으므로 웹사이트나 어플리케이션의 성공에 해로울 수 있습니다.
결론적으로 바나나 규칙은 웹사이트나 어플리케이션을 쉽게 이해하고 사용할 수 있도록 보장하는 데 도움이 되는 UX/UI 디자인의 중요한 원칙입니다. 바나나 규칙을 따르면 디자이너는 직관적이고 사용자 친화적인 제품을 만들 수 있으며, 이는 사용자 참여와 만족도를 높일 수 있습니다. 또한 바나나 규칙을 따르면 디자이너는 사용자가 웹사이트나 어플리케이션을 사용하는 동안 긍정적인 경험을 하게 하여 충성도 높은 고객이 될 가능성을 높일 수 있습니다. 오늘날의 디지털 환경에서 사용자 경험과 디자인의 중요성은 아무리 강조해도 지나치지 않으며, 바나나 규칙을 따르는 것은 성공적인 제품을 만들기 위한 올바른 방향으로 나아가는 단계입니다.
(1) 어포던스(Affordance)
어떤 행동을 유도한다는 뜻으로 행동유도성이라고도 한다. 어근 어포드(Afford)는 원래 '~할 여유가 있다, ~하여도 된다, ~을 공급하다, 산출하다'라는 뜻을 가지고 있으나 보통 사전에 없는 뜻으로 인간 컴퓨터 상호작용, 인지 심리학, 산업 디자인, 인터렉션 디자인, 환경 심리학 그리고 인공지능학 분야에서는 '서로 다른 개념을 연결하는 것'이란 뜻으로 쓰이기도 한다. 다시 말해 물건(object)과 생물(organism, 주로 사람) 사이의 특정한 관계에 따라서 제시되는 것이 가능한 사용(uses), 동작(actions), 기능(functions)의 연계 가능성을 의미한다. - 위키백과
The Banana rule in UX/UI design
The yellow brick road to User-Friendly Design. You’re still not using it?
elialushnikov.medium.com
번역한 내용으로 의역이나 오역이 있을 수 있습니다. 자세한 내용은 원문을 참고하시기 바랍니다.
'Topic > 디자이너라면..' 카테고리의 다른 글
| UX 디자이너를 위한 그로스 해킹의 모든 것 (0) | 2024.01.24 |
|---|---|
| 큰 영향을 미치는 16가지 작은 UI 디자인 규칙 (1/2) (0) | 2024.01.01 |
| 보편성이 아닌 포괄성을 위한 디자인 (0) | 2023.12.27 |
| 디자인 사고의 쇠퇴, 디자이너가 이유를 묻지 않으면 디자인은 실패합니다. (0) | 2023.10.27 |
| 느린 디자인 (0) | 2023.10.25 |
| UX에서 성장 디자인(Growth Design)까지 : 가치를 배가시키는 5가지 원칙 (0) | 2023.10.04 |