디자인 전문 용어 설명 : Z 패턴

이미지 제공 : Karyn Christner, www.flickr.com/photos/toofarnorth/

이미지 제공 : Karyn Christner, www.flickr.com/photos/toofarnorth/

에 디자인 전문 용어 설명 : F- 패턴 , 우리는 어떻게 시선 추적 연구 사용자가 유사하고 예측 가능한 방식으로 화면을 스캔한다는 것을 보여줍니다.

UI 디자이너에게 이러한 스캔 패턴은 특정 유형의 사이트에 대한 최적의 요소 레이아웃을 보여줍니다. 이 차갑고 딱딱한 과학이 제대로 적용되면 사용자에게 마법 같은 친숙 함을 선사합니다. 인터페이스는 모든 것이 올바른 위치에있는 직관적이고 개인적으로 보입니다.



이전 기사에서는 이러한 스캐닝 패턴 중 하나 인 F- 패턴에 중점을 두 었으며, 이번에도 마찬가지로 중요한 또 다른 Z- 패턴을 살펴 보겠습니다.

아래에서 이것이 무엇인지, 어떻게 적용하는지 설명하고, 어떻게 잘 수행되는지에 대한 실제 예를 보여줍니다.

Z- 패턴, F- 패턴 및 기타 많은 시각적 웹 디자인 기술에 대한 자세한 내용은 무료 전자 책을 확인하십시오. 인간의 눈을위한 웹 디자인웹 UI 모범 사례 .

Z 패턴 해체

F- 패턴은 텍스트 또는 콘텐츠가 많은 사이트에 이상적이지만 Z- 패턴은 느슨하고 드문 사이트에 더 적합합니다.

미니멀리스트 사이트 또는 주로 하나 또는 두 개의 주요 요소를 중심으로하는 사이트는 Z 패턴을 구현하여 예상하고 사용자가이 자연스러운 방법을 따르도록 장려 할 수 있습니다.

이렇게하면 디자이너가 가장 중요한 요소를 볼 수 있도록 보장하거나 적어도 가능성을 높일 수 있습니다.

Wunderlist의 이미지 제공

Wunderlist의 이미지 제공

F 패턴과 마찬가지로 왼쪽에서 오른쪽으로, 위에서 아래로 읽는 서양 문화에서 사용자는 거의 항상 왼쪽 상단에서 시작하여 상단을 스캔합니다. Z 패턴의 특징은 다음에 따르는 'Z'모양입니다. 왼쪽으로 돌아갔다가 내려가는 대신 사용자의 시선이 동시에 왼쪽과 아래로 이동 한 다음 다시 왼쪽에서 오른쪽으로 수평선을 스캔합니다.

Z 패턴에 대해 알아야 할 흥미롭고 유용한 점은 반복된다는 것입니다. 콘텐츠가 충분히 매력적일 경우 광고가 무한히 반복되는 경우도 있습니다.

이것은 사용자의주의를 끌 수있는 한 아래로 확장되는 끝없는 지그재그 구조를 만들어 긴 스크롤, 무한 스크롤 및 시차 스크롤로 시각적 내러티브를 만드는 데이 패턴을 완벽하게 만듭니다.

만화 페이지를 디지털로 색칠하는 방법

Wunderlist의 이미지 제공

Wunderlist의 이미지 제공

시각적 콘텐츠와 텍스트 콘텐츠를 혼합해야하는 사이트에서 잘 작동하는 F- 패턴과 달리 Z- 패턴은 명확하고 직접적인 의제가있는 사이트에 적합합니다 (예 : 하나의 주요 호출이있는 랜딩 페이지). 동작).

Z 패턴은 명확한 구조와 계층 구조를 만들고 올바르게 수행하면 최종 클릭 유도 문안에서 절정에 이르는 추진력을 구축합니다.

단점은 콘텐츠가 많은 사이트에서 방향을 잃을 수 있다는 것입니다.

Z 패턴 적용

Z 패턴은 일반적으로 큰 그래픽 또는 기타 주목을 끄는 콘텐츠가 산재 해있는 가벼운 콘텐츠 행으로 구성됩니다.

MailChimp를 통한 UXPin 이미지 제공

MailChimp를 통한 UXPin 이미지 제공

Z 패턴은 F 패턴처럼 시작하므로 가장 중요한 지점은 왼쪽 상단 모서리 (점 # 1)입니다. 이것은 화면에서 사용자가 거의 볼 수있는 몇 안되는 지점 중 하나이며 일반적으로 회사의 로고가 들어 있습니다.

다시 F 패턴과 마찬가지로 사용자는 페이지 상단을 가로 질러 왼쪽에서 오른쪽으로 스캔 할 가능성이 높습니다 (포인트 # 2). 이것은 디자이너에게 두 가지를 의미합니다.

  • 첫째, 맨 위 행은 주요 부동산이므로 일반적으로 가로 탐색 막대로 채워집니다. 사이트를 방문한 직후 사용자는 사용 가능한 페이지와 페이지를 찾을 수있는 위치를 알게됩니다.
  • 둘째, 오른쪽 상단 모서리가 클릭 유도 문안을위한 좋은 장소라는 것을 의미합니다. 사용자의 시야가 이동하기 전에 잠시 멈추기 때문입니다.

눈을 따라

그러면 사용자의 눈이 가운데로 내려갑니다. 여기에서 큰 그래픽이나 때로는 알림을 찾을 수 있습니다. 또 다른 전략은이 영역을 상대적으로 비워 두는 것입니다. 여기에 빈 공간을두면 사용자가 더 빨리 앞으로 나아가고 반복적 인 트랜스를 장려합니다.

어느 전략에서나 중간에 대한 중요한 부분은 사용자를 산만하게하거나 Z 패턴 경로에서 벗어나지 않는다는 것입니다. 즉, 무겁거나 시각적으로 복잡한 자리 표시자는 권장되지 않습니다.

사용자의 시선은 왼쪽 하단 (포인트 # 3)으로 이동하고 다시 오른쪽으로 스캔합니다 (포인트 # 4). 화면 하단에는 일반적으로 가로 방향의 콘텐츠가 있으며 때로는 상단의 콘텐츠를 미러링하는 바 메뉴도 있습니다.

또한 오른쪽 줄 끝에있는 지점 인 지점 # 2와 # 4는 예제의 '무료 가입'버튼과 같은 클릭 유도 문안에 가장 적합합니다. 이 지점을 결승선과 같이 생각하면 계속 진행하기 전에 눈이 멈 춥니 다.

패턴 반복

4 번 지점 이후에도 패턴이 계속 반복됩니다. 원하는만큼 Z 패턴을 확장하여 각 오른쪽 지점에서 새로운 클릭 유도 문안을 반복하거나 도입 할 수 있습니다.

일반적으로 Z 패턴은 F 패턴보다 더 편안합니다. 사용자의주의를 끌 수있는 시간과 중간의 간격을 얼마나 넓힐 수 있는지 모두에서 호흡 공간과 다 용성을 제공합니다. 이로 인해 스토리 텔링이나 판매 홍보에 도움이되지만 다양한 콘텐츠를 구성하는 데는 비효율적입니다.

클릭 유도 문안을 강조하기 때문에 Z 패턴은 홈 페이지와 랜딩 페이지에서 드물지 않으며 사용자가 다음에 가야 할 위치에 미묘한 영향을 미칩니다. 다양한 산업 분야에서 널리 사용되는 레이아웃이며 상단 및 하단 탐색 모음에서 종종 알아볼 수 있습니다. 여기 예시들이 있습니다...

01. AirBnB의지도 페이지

이미지 제공 : Air BnB Map

이미지 제공 : Air BnB Map

에 설명 된대로 인간의 눈을위한 웹 디자인 (책 2) , 패턴은 오른쪽 상단 모서리에있는 전통적인 회사 로고에서 시작됩니다. 상단 내비게이션 바가 없기 때문에 시선은 원래 사이트로 돌아가는 클릭 유도 문안 및 공유 옵션과 함께 오른쪽 상단 모서리로 곧바로 쏠 것입니다.

그런 다음 눈은 페이지의 실제 콘텐츠이지만 현재는 배경 만있는지도를 스캔 한 후 왼쪽 하단 모서리에 정착합니다. 사용자의 시야는 가장 중요한 컨트롤 중 하나 인 확대 / 축소가있는 오른쪽 하단의 하단 탐색 메뉴를 따릅니다.

관련 콘텐츠가 중앙에있는 동안 사용자는 상호 작용하기 전에 전체 페이지를 스캔 할 가능성이 높습니다. 모든 것을 Z 패턴으로 배치함으로써 AirBnB는 사용자가 처음 몇 분 안에 페이지의 컨트롤과 위치를 볼 수 있도록하여 페이지와 가장 잘 상호 작용할 수 있도록합니다. Z 패턴 레이아웃은 단순히이 프로세스를 간소화합니다.

02. 영국 항공

이미지 제공 : 영국 항공

인간의 모습을 그리는 방법
이미지 제공 : 영국 항공

Z 패턴을 활용하는 또 다른 대기업은 British Airways의 새 비행기를 소개하는 사이트입니다. 예상대로 회사 로고는 시작 지점에 있으며 Airbnb와 마찬가지로 상단 내비게이션 메뉴가 없기 때문에 눈이 빠르게 오른쪽 모서리로 이동합니다. 여기에서 회사는 갤러리 및 경로 페이지에 대한 가장 중요한 링크 만 홍보하기로 결정했습니다.

그런 다음 눈은 큰 이미지를 가로 질러 봅니다.보기에는 멋지지만 궁극적으로 미학 외부 인터페이스에는 의미가 없습니다. 사용자는 자신의 시간대 또는 도착 위치를 알고 있는지에 따라 인사말을 읽거나 무시할 수 있습니다.

포인트 3이 가장 중요하지 않기 때문에 영국 항공 (및 기타 여러 회사)은 법적 요건을 여기에두기로 선택했습니다. 그러나 이것은 실제로 전략적 결정입니다. 여기에서 텍스트의 수평선은 사용자 사이트가 동일한 평면을 따라 바로 이동하도록 권장합니다.

에 설명 된대로 인간의 눈을위한 웹 UI 디자인 (책 1) , Gestalt의 라인 원칙은 사용자의 사이트가 명확한 라인을 따라 이동하고 그에 따라 추진력을 얻음을 보여줍니다. 이 법적 라인의 배치는 실제로 Z 패턴을 지원하고 더 관련성있는 콘텐츠로 시선을 유도합니다. 포인트 4의 공유 버튼에서 절정에 이릅니다.

03. Irregulart

Irregulart의 이미지 제공

Irregulart의 이미지 제공

Irregulart는 Z 패턴도 사용하지만 우리가 지적하고 싶은 중요한 변형을 보여줍니다.

이전 예에서 언급했듯이 3 번 지점은 페이지에서 가장 중요하지 않은 위치입니다. 그렇기 때문에 일부 디자이너는 Irregulart의 팀처럼 Z 패턴에서 완전히 생략하기로 선택합니다. Z 패턴은 여전히 ​​효과적이지만 하단 / 중간이 새로운 포인트 3이됩니다. 이것은 중요한 첫눈에 머리카락을 더 빠르게 만들고 사이트를보다 단순하고 미니멀 한 느낌으로 조율합니다.

대부분의 디자인 원칙과 마찬가지로 Z-Pattern은 지침 일뿐입니다. 모든 요점을 따를 필요는 없지만 기본 사항을 염두에두고 필요에 따라 조정하십시오.

결론

Z 패턴의 중요한 점은 구조입니다.

단순한 사이트를 향상시킬 수 있지만 몇 가지 구조적 요소가 효율성에 중요하므로 과소 평가하지 마십시오. 구조는 Z 패턴의 가장 큰 강점이지만 약점이기도합니다. 주의를 산만하게하는 요소는 사용자의 경로를 탈선시키고 레이아웃의 전체 목적을 무너 뜨립니다.

: 제리 카오

Jerry Cao는 다음 사이트의 콘텐츠 전략가입니다. UXPin — 와이어 프레임 및 프로토 타이핑 앱 — 그는 와이어 프레임 및 프로토 타이핑 플랫폼 용 인앱 및 온라인 콘텐츠를 개발합니다. 모든 유형과 충실도의 모형을 사용하는 방법을 알아 보려면 목업 가이드 .

이렇게? 읽어보세요!