Floating Action Button의 사용 실태와 올바른 사용법

Study on floating action button's use and its application

Abstract

본 연구는 구글 머티리얼 디자인의 컴포넌트인 플로팅 액션 버튼 중 오른쪽 하단 표준형의 사용 실태와 효율성을 파악하고 올바른 사용법을 제안하는 것을 목적으로 한다. 1차는 사례 연구로 서비스별 플로팅 액션 버튼의 사용 실태와 장단점을 조사했다. 2차로 스마트폰 이용자 12명을 대상으로 한 아이트래킹 실험과 심층 인터뷰를 진행하였다. 그 결과, 플로팅 액션 버튼은 직관적인 디자인으로 사용자들의 이목을 끌어 특정 액션을 유도할 수 있는 것으로 나타났다. 그러나 사용자들의 시선은 대부분 상단에 머무르며 인터페이스가 상단에 배치되는 것을 선호하는 것으로 조사되었다. 해당 컴포넌트로 긍정적인 사용자 경험을 주기 위해서는 콘텐츠의 가림 정도, 사용자들의 애플리케이션 사용 행동 및 경향 등을 고려할 필요가 있다. 이 연구는 플로팅 버튼의 올바른 사용법을 제기하는 데 의의가 있다.

The purpose of this study is to assess usage of floating action button, a component of Google's Material Design. Case studies were conducted to overview the component's current usage and qualities, followed by eye-tracking experiments and in-depth interviews conducted to 12 subjects. Results have shown that while floating button can promote an action by catching viewers' attention with its striking visual, users tend to look at top more, thus preferring top placement for interfaces. To give positive user experience, designers should consider factors such as the amount of content covered by the button, the way users interact with the application, etc. This study aims to provide proper guidelines for the component's application.

Fig. 1. Floating Action Button

Fig. 2. Floating Action Button in Twitter

Fig. 3. UI Mockup for Eye Tracking Experiment

Fig. 4. How people grab smartphones

Table 1. Result of Eye Tracked UI Experiment

Table 2. Summary of Post-Experiment Survey

Table 3. Pros and Cons of Floating Action Button