본문 바로가기

UI/UI

[ UI / eyes-tracking ] 왜? F자로 홈페이지를 구해야하는가?

인터넷을 종종 검색하다보면 UI를 만들 때, F 형태로 홈페이지를 만들라고 한다.

왜 그럴까?

결론부터 말하면, 사람들이 컴퓨터 또는 모바일 스크린에서 정보를 습득할 때,
"F"형태를 정보를 습득한다는 연구 결과가 나왔기 때문이다.

 

Eyes-tracking

(왼)useit (오른)google

 

왜 사람은 F자로 글을 읽을까?

사실, 사람들 본능적으로 F자로 정보를 습득하지 않는다. 그냥 문화적인 배경이 들어있다.
우리가 책읽는 습관을 생각해보면 이해가 빨라진다.

우리는 왼쪽 상단에서 오른쪽 하단으로 글을 읽는다. 이러한 문화적 습관이 F자로 정보를 습득하게
만든 배경이다. 또한, 신문을 읽을때를 생각해보면 좋다. 신문의 경우는 이미지가 들어있기 때문에
가장 website와 유사한 정보구조를 가지고 있다. 따라서, 큰 제목을 읽고 다음에 이미지가 있고 그다음
이미지 아래에 관련 정보들이 있는 것이다. 이러한 구조적 습관 때문에 우리는 F자로 정보를 습득한다.

 

"F"자 구조가 최고일까?

앞에서 말했듯이 이게 전부는 아니다. 문화가 다를 수 있기 때문에 이러한 문화적, 맥락적 상황을 고려해야한다.
미국과 우리나라는 동일한 읽는 구조를 갖고 있다. 하지만 일본이나 아랍어는 다른 언어 읽기 구조를 갖고 있다.
따라서 해외 사이트를 만들 땐, 이런 경우는 조금은 고민해봐야한다. 그렇다고 일본과 아립이 F자 아니여야
한다는 뜻은 아니다.

 

목적에 따라 UI가 달라질 수 있다.

어떤 사람들은 특정 목적을 갖고 사이트에 방문한다. 그럴 경우 "F" 구조는 의미가 미미하다. 그들은 목적이
있고 그에 따라 행동하기 때문에 정보를 읽는 습관과는 무관할 것이다.

 

요약

"F" 패턴은 Jakob Nielsen of the Nielsen Norman Group 에서 확인한 정보이다. 이것은 사람들의 문화속
책 읽기 패턴으로 형성된 습관을 온라인 스크린에도 적용한다는 뜻을 갖고 있다. 그렇지만 절대적인 조건이
아니기 때문에 상황에 따라선 목적에 따라 정보의 구성이 변경되야한다.

 

 

참조

https://www.researchgate.net/publication/275469037_F_Pattern_Scanning_of_Text_and_Images_in_Web_Pages

https://medium.com/uxd-critical-software/understanding-the-f-shaped-and-z-shaped-reading-patterns-for-optimal-usability-in-complex-systems-e96668839abd

https://writefulcopy.com/blog/f-shaped-pattern-explained

'UI > UI' 카테고리의 다른 글

HCI  (0) 2020.12.05