Journal of Digital Convergence (디지털융복합연구)

The Society of Digital Policy and Management (한국디지털정책학회)
권호 표지
DOI QR코드

DOI QR Code

Study on floating action button's use and its application

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

  • Kang, Hyo Jin (Digital Media Design, HongIk University, International Design School for Advanced Studies) ;
  • Kim, Seung-In (Digital Media Design, HongIk University, International Design School for Advanced Studies)
  • 강효진 (홍익대학교 국제디자인전문대학원 디지털미디어디자인 전공) ;
  • 김승인 (홍익대학교 국제디자인전문대학원 디지털미디어디자인 전공)
  • Received : 2018.12.10
  • Accepted : 2019.04.20
  • Published : 2019.04.28
Download PDF
⟨ Previous Next ⟩

Abstract

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.

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

Keywords

DJTJBT_2019_v17n4_261_f0001.png 이미지

Fig. 1. Floating Action Button

DJTJBT_2019_v17n4_261_f0002.png 이미지

Fig. 2. Floating Action Button in Twitter

DJTJBT_2019_v17n4_261_f0003.png 이미지

Fig. 3. UI Mockup for Eye Tracking Experiment

DJTJBT_2019_v17n4_261_f0004.png 이미지

Fig. 4. How people grab smartphones

Table 1. Result of Eye Tracked UI Experiment

DJTJBT_2019_v17n4_261_t0001.png 이미지

Table 2. Summary of Post-Experiment Survey

DJTJBT_2019_v17n4_261_t0002.png 이미지

Table 3. Pros and Cons of Floating Action Button

DJTJBT_2019_v17n4_261_t0003.png 이미지

References

  1. Natjam. (2018. 6. 8). 2018 Mobile design trend 1: Stop it with the hamburger menus Brunch https://brunch.co.kr/@ambler/83
  2. L. Mearian. (2018. 3. 9). iOS vs. Android: When it comes to brand loyalty, Android wins. Computer World from IDG https://www.computerworld.com/article/3262051/android/ios-vs-android-when-it-comes-to-brand-loyalty-android-wins.html
  3. N. Jitkoff. (2014. 7. 18). What is material design?. Google Developers https://developers-kr.googleblog.com/2014/07/this-is-material-design.html
  4. Webmaster. (2018. 4. 19). Material design for androids. Android Developers. https://developer.android.com/design/material/?hl=ko
  5. N. Babich. (2017. 5. 7). Floating action button in UX design. UX Planet. https://uxplanet.org/floating-action-button-in-ux-design-7dd06e49144e
  6. Google. (2018). Buttons: Floating action button. Material design: material component guidelines https://material.io/design/components/buttons-floatingaction-button.html
  7. T. Y. Siang. (2015. 6. 2). Material design: Why the floating action button is bad UX design Medium - Tech in Asia https://medium.com/tech-in-asia/material-design-whythe-floating-action-button-is-bad-ux-design-acd5b32c5ef
  8. G. B. Joe. (2018. 9. 11). The hidden reason behind the removed swipe in KakaoTalk's 8.0 update. Naver Blog https://blog.naver.com/okpl54/221356506718
  9. mickeygonebad. (2018. 9. 8). KakaoTalk's 8.0 Update: How did it change and what do people think? Naver Blog https://blog.naver.com/mickeygonebad/221354873040
  10. Twitter Support. (2018. 10. 31) Twitter https://twitter.com/TwitterSupport/status/1057726896765423616
  11. A. Livingston. (2018. 10. 31). Twitter https://twitter.com/AndrewLiv/status/1057832587824164 864
  12. Joana. (2018. 10. 31). Twitter https://twitter.com/joannastar/status/1057745151571955712
  13. J. Nielsen & T. K. Landauer. (1993). A mathematical model of the finding of usability problems. Proc. ACM INTERCHI'93 Conf. (Amsterdam, the Netherlands, 24-29 April). 206-213
  14. S. Hoober. (2013. 2. 18). How do users really hold mobile devices? UX Matters https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  15. Multiple Authors. (2017. 11. 29). Phablets to overtake regular smartphone shipments by 2019, with phablets expected to hit 1 billion units by 2021, according to IDC Business Wire https://www.businesswire.com/news/home/20171129005220/en/Phablets-Overtake-Regular-Smartphone-Shipments-2019-Phablets
  16. C. McNear. (2014. 7. 18). You'll have to pry my tiny smartphone from my cold, dead, very small hands The Ringer https://www.theringer.com/tech/2018/4/25/17282336/small-iphone-size-apple-samsung-galaxy-jelly-mobile