A Study on How the Functional Difference of User Interface Design Layout Affects User Experience. - Focusing on the F-layout and Z-layout -

웹사이트에서 유저인터페이스디자인 레이아웃의 기능적 차이가 사용자 경험에 미치는 영향 연구 - F레이아웃과 Z레이아웃을 중심으로 -

The layout includes various functions not only arrangement, connection, division of information but also affordance and information recognition as the important element that determine the whole structure of information. Recently, the layout of web interface design was gradually changing from the concept of the original Z-layout to F-layout, whereas, it is being changed again into the split layout as the transform of Z-layout. However, there can be lack of grounds as to the reason of the change of layout. Therefore, it needs to study on how the functional difference between the F-layout and Z-layout affects user experience. In this study, we conduct the study on the effect of each layout type on the user experience focusing on the product description of web-page by user test. The user test have shown that the user has better feeling on the split layout based on the Z-layout than F-layout. The Z-layout also has more advantages on the formation of the favorable attitude of user in efficiency, accessibility and concentration. This result is consistent with the trend of web-design to change into the split layout based on the Z-layout and we provided the objective reasons for the effective web-design layout by user test.

디자인 요소에서 레이아웃은 전체 정보 구조를 결정하는 중요한 요소로서 정보의 배치, 연결, 구분을 비롯해 사용자의 행동유도 및 정보 인지 등의 구조적 기능을 포함하고 있다. 최근 웹 인터페이스 디자인의 레이아웃은 전통적 Z레이아웃 개념에서 점차 F레이아웃으로 변화되다가 최근에는 Z레이아웃의 변형인 분할레이아웃 형태로 점차 변화되어가고 있다. 그러나 이런 변화 이유에 대한 객관적 근거가 부족하다고 할 수 있다. 따라서 F레이아웃과 Z레이아웃 사이에서 기능적 차이가 사용자 경험에 어떠한 영향을 미치는지에 대한 연구가 필요하다고 할 수 있다. 본 연구에서는 웹사이트의 제품설명 웹페이지를 중심으로 F레이아웃과 Z레이아웃 웹사이트에 대한 사용자 테스트를 진행하여 유형별 레이아웃이 사용자 경험에 미치는 영향을 조사하였다. 실험 결과 F레이아웃보다 Z레이아웃을 기반으로 한 분할 레이아웃에서 사용자가 느끼는 호감도가 큰 것으로 나타났다. 또한 효율성, 접근성, 몰입성 등 Z레이아웃에서 사용자의 호의적인 태도를 형성하는데 더 유리한 것으로 나타났다. 본 연구의 결과는 Z레이아웃을 기반으로 한 분할레이아웃으로 변화되어가는 웹디자인 추세와 일치하는 것으로서 사용자 평가를 통해 효과적인 웹디자인 레이아웃의 객관적인 근거를 제시하였다.