#3. 구텐베르크 다이어그램 (The Gutenberg Diagram)

📣 사용자의 행동패턴에 기반한 UX 해법을 공부해봅시닷. #2.약관동의를 설계할 때 고려해야할 것들 페이지에 나온 UX 법칙인 구텐베르크 다이어그램입니다.

 

여러분은 버튼 배치가 사용자의 작업 완료 속도에 영향을 준다는 것을 알고 계시나요? 사용자는 가장 먼저 화면을 스캔한 뒤 본인이 할 행동을 결정하는데요, 이때 기획자는 스캔이 끝나고 나서 사용자가 취할 액션을 유도해야 합니다.

 

웹 ver. 구텐베르크 다이어그램의 정의

 

 

구텐베르크 다이어그램은 한 화면 표시 매체를 네 부분으로 균등하게 나눕니다. 이 때 시선은 왼쪽 상단(①)에서 출발하여 우측 상단(②)을 거쳐 사선으로 좌측 하단(③)으로 갔다가 최종 종착지인 우측 하단(④)에서 끝나는데요, 보통 ③의 내용은 거의 스킵하며 ④를 목표로 하기 때문에 4분할 영역의 중요 순서는 ① > ④ > ② > ③가 됩니다. 따라서 가장 중요한 부분은 ①, ④에 위치시키고, 덜 중요한부분은 ③에 두도록 하고 있습니다.

만약 화면이 균등하게 나뉘어 있지 않다? 그렇다면 더 크고, 화려하고, 자극적인 UI를 활용해 사용자의 시선을 붙잡으면 됩니다.

 

---

 

❗️ 정의를 이해했으니, 다음으로는 실생활에 어떻게 적용되고 있는지 살펴봅시다.

 

예시 1.  페이스북 회원가입 페이지

 

페이스북 회원가입 페이지

 

페이스북의 회원가입 페이지를 보면, 회원가입의 당위성을 설명한 문구 (①) 가 Sign up 버튼 (④) 으로 연결되고 있는데, 이는 구텐베르크 다이어그램의 법칙과 동일하다는 것을 발견할 수 있습니다.

 

예시 2. 구글 이미지 검색

(좌) 구글 이미지 검색 시 출력되는 페이지 (우) 이미지 클릭 시 우측에서 나타나는 이미지 상세

 

구글에서 이미지를 검색하고 원하는 것을 클릭하면 우측에서 이미지 상세 페이지가 출력됩니다. 이 때 이미지 상세만 보면 가장 중요한 ①에 이미지 출처가 적혀있고, ④에 버튼이 있는 것을 발견할 수 있습니다.

 

 

---

 

모바일 ver. 구텐베르크 법칙

여기서 문득 의문이 들었습니다. 🤔 웹은 화면이 커서 가능하다지만.. 모바일도 구텐베르크 법칙을 따를까?

 

사진 출처 : https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/

 

네! 모바일도 구텐베르크 법칙을 따릅니다! 하지만 웹보다 화면이 작아 고려해야할 점이 조금 더 많은데요, 이미지와 함께 알아봅시다!  

 

Top vs Bottom (1)

사진 출처 : https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/

 

앱을 사용할 때 버튼이 어디에 있는게 편하셨나요? 아래에 있는게 편하지 않으셨나요? 여기에도 구텐베르크 법칙이 적용되어 있습니다.

상단에 버튼을 배치할 경우, 사용자의 자연스러운 스캔 흐름에 어긋나게 되고, 완료 경로에서 멀어지게 됩니다. 뿐만 아니라 상단 버튼은 보통 화면 제목과 공간을 공유하기 때문에 하단 버튼보다 크기도 작아서 사용자가 찾기 더 어려워집니다.

 

Top vs Bottom (2)

사진 출처 : https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/

버튼은 하단에 위치시키는거구나.. 그러면 버튼이 여러개가 하단에 있을 때는 어쩌지? 

 

최하단에 두시면 됩니다! 구텐베르크 법칙에 따르면 사람의 시선은 중력의 영향을 받는다고 되어있는데요, 버튼이 최하단에 위치하지 않을 경우 중력에 반대되는 흐름이 되다보니 불편함을 느끼게 됩니다.

 

Left vs Right

사진 출처 : https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/

 

보통 오른쪽에 중요 버튼이 위치해있지 않았나요? 여기에도 구텐베르크 법칙이 들어갔는데요, 버튼을 왼쪽에 두면 사용자의 자연스러운 시선 흐름을 역행하게 되어 불편함을 느끼게 됩니다.

 

---

 

💡  Today 인사이트

- 중요한 내용은 좌측 상단, 우측 하단에 위치시키고, 사용자가 놓쳤으면 하는 내용은 좌측 하단에 위치시켜 전략적으로 기획하자

- 다른 위치에 중요한 내용을 위치시키고 싶다면 굵은 글자나 구성요소 조합을 이용하여 시선의 움직임을 이끌자.

- 모바일에서도 마찬가지로 버튼을 우측 하단에 위치시키는데, 버튼이 하나일 경우에는 하단 전체에 위치시키는 것도 고려하자

 

 

 

🔗 출처

https://brunch.co.kr/@fbrudtjr1/34

https://www.beusable.net/blog/?p=1505

https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/