Google에서 제시한 Material Design 중 Floating Button에 대한 연구를 하다 좋은 글이 있어 소개하고자 합니다. 이 글은 Teo Yu Siang님 글의 번역본 입니다. 번역에 사심이 담겨서 오역이 있을 수 있습니다. 피드백은 언제나 환영입니다. 🙏
몇년 전 Google이 소개한 Design 언어인 Material Design에는 기기와 Platform 전반에 걸친 사용자 경험을 만들고자하는 Google의 강한 의지가 담겨 있습니다. 강렬한 색상을 사용하고, 유동적이지만 나름 원칙이 있는 그림자들을 통해 UI Layer를 표현하고 있어요. 특히 Android 사용자들에게는 부드러운 Animation으로 유려한 사용자 경험을 제공하고 있습니다.(물론 iOS의 일부 Google App에서도)
근데! Material Design이 소개된 이래 가장 저를 힘들게 하는 것이 있단 말이죠.. 그게 바로 Floating Action Button 입니다.
FAB(Floating Action Button)은 하단에 둥둥 떠있는 동그란 버튼인데요, Google에서는 사용을 유도하도록 쓰게 권장합니다. 이 버튼은 사용자가 특정 화면에서 가장 많이 수행하는 하나의 동작을 호출하는 역할을 하게 됩니다.
하지만 Material Design 특유의 강함 때문에 FAB는 눈에 잘 안보이기도 합니다. 이것 말고도 여러가지 문제가 있어 보입니다.
FAB는 어떠한 이상적인 조건에서는 꽤나 괜찮은 UX일 수 있는데요, App 전체에 적용시켜버리면 App에 해가 될 수도 있습니다. 이유를 설명해드릴게요.
사용자의 몰입을 방해합니다.
보시다시피 FAB는 그 자체로 굉장히 튀는 UI입니다. 말그대로 화면의 모든 UI 요소들 위에 위치하고 있기 때문이에요. 다시말해서 FAB가 들어가면 자동적으로 몰입도가 낮아지는데 특히 몰입도가 중요한 App에서는 더 크게 영향을 주게 됩니다. 한가지 예시로 Google의 사진 App을 보겠습니다.
사진 App을 열면 검색 Floating Button과 함께 Gallery View를 보여줍니다. App을 열었을 때 저는 그냥 사진만 보고싶은데도 말이죠.
검색 FAB는 이 App의 가장 중요한 목적인 사진을 검색하는 경험에 몰입하는 것을 방해하고 있어요. 이 대단한 사진 검색 기능은 Google만의 고유한 기능인데요, 좋은 건 알겠는데 꼭 가장 상위 단계인 FAB에 있어야만 했을까요? (저는 아니라고 봅니다)
역설적이게도 Google도 이 말에 동의하고 있습니다. Material Design에서는 “모든 화면에 FAB가 필요한 것은 아니다”라고 설명하고 있습니다. 그리고 이렇게 덧붙였습니다. “가장 중요한 동작은 사진을 선택하는 것이라 버튼은 불필요하다.” (으잉?)
눈에 잘 띄긴 하는데 너무 잘 보입니다.
이건 장점이자 단점이 될 수도 있는데요, 더 중요한 시사점이 있습니다. FAB는 특정 영역을 차지하면서 아주 효과적으로 내용을가리게 됩니다.
근데 FAB가 크면 얼마나 크다고 내용을 그렇게나 가리겠어 생각이 들 수도 있어요.
사진 App 화면을 보시면 Thumbnail 하나의 50% 이상을 가리고 있고, 즉 사람 얼굴 한 두개쯤은 가리고도 남는다는 이야기 입니다. 그리고 마지막 줄의 4번째 Thumbnail을 보기 위해서는 계속 Scroll을 해야하기도 하구요. 문제는 이거보다 더 최악도 존재한다는 점 입니다.
User dumazy는 Graphic Deisng Stack Exchange에서 FAB가 즐겨찾기 Button과 시간 표시를 가리는 것에 대해 문제를 제기했습니다. 이 글에서는 목록 형태의 App이 공통적으로 가지는 문제인, 마지막 목록에서는 더이상 Scroll up되지 않는 것에 대해서 이야기 하고 있습니다.
이말은, 화면의 사용성을 유지하기 위해 FAB가 차지할 영역만큼 화면 전체 목록의 가로 길이가 줄여지는 희생을 당해야한다는 이야기 입니다.
생각보다 FAB는 작은 크기에 비해 치명적으로 App에 영향을 끼칩니다.
해당 동작이 생각보다 안 쓰는 동작일 수 있습니다.
UX 설계를 할 때, 사용자가 쓰는 시간의 80%를 20%의 기능을 사용하는데 쓰도록 하는 80/20 규칙을 기억하고 있으면 꽤 도움이 됩니다. 즉, 사용자가 대부분의 시간을 사용할 몇 안되는 기능을 설계하는데에 많은 노력을 기울여야 합니다.
사실 FAB를 이론적으로 혹은 많이 쓸 것 같아서 배치하게 되는데, 실제로 자주 사용되는 기능이 아니라면 어떻게 될까요?
Google의 Gmail app을 예시로 들어볼게요.
Gmail app의 FAB는 새로운 Mail을 작성을 가장 중요한 기능으로 제공합니다.
근데 진짜 그럴까요?
여러가지 연구에 의하면 적어도 50% 이상이 Mobile 기기에서 Mail 읽기 기능을 사용하는 반면 새 Mail 작성은 거의 하지 않는다고 합니다. 다시 말해, Mobile 사용자들은 email을 읽기만 한는 경향이 있습니다.
물론 답장을 쓰기도 하겠지만 그것도 email을 확인한 후에 일어날 일이겠죠(FAB는 그냥 건너뛴다는 소리). 이건 가상 Keyboard나 자동 완성 기능의 불완전한 입력 방식 때문에 생겨난거라고 보는데, 어쨌든 사용자의 가장 중요한 행위는 email을 읽고, 답장하는 것이지 결코 새 mail을 쓰는 것이 아닙니다.
그렇다면 이 FAB는 뭘 할 수 있을까요? 아주 특이한 경우이긴 하지만 사용자가 바로 새 mail을 보내고 싶을 때 사용자에게 찰나의 기쁨을 줄 수 있겠군요. 하지만 그것 말고는 화면 영역을 차지하고서는 즐겨찾기 별과 시간 표시를 가리버리고, 강렬한 빨간색을 뽐내며 시산을 분산시킬 것입니다.
FAB가 필요한가?가 아닌, FAB까지 원하는가?
물론 모든 FAB가 App의 사용성을 낮추는 것은 아닙니다. FAB를 쓸 법하고, 그로 인해 더 UX가 더 향상된 예시들을 보여드릴게요.
Google의 지도 App은 FAB를 잘 사용한 가장 좋은 예 입니다. 사용자가 취할 가장 중점적인 동작은 방향을 아는 거잖아요, FAB가 그 역할을 제대로 해내고 있습니다.
하지만 지도가 사용자가 화면의 중심 부분을 많이 보는 특별한 경우인 점을 잊지 않아야해요.(보통은 자신의 위치를 나타내는 파란 점을 주로 보게 되죠.) 대부분의 App은 Grid나 목록형이기 때문에 사용자가 화면의 모든 부분을 볼 수 있습니다. FAB가 위치하는 부분도 포함이구요.
또한 앞에서 언급한 Screenshot에서 느껴지는 것과는 달리 실제 화면에서는 사용자들이 어느 화면을 가더라도, Scroll을 하더라도 계속 FAB를 보게 됩니다. Google이 Material Design에서 몇번이나 강조했던 것처럼 Motion Design은 UI Design만큼이나 중요한데요. (Screenshot이라 잘 느껴지지 않지만) 화면은 계속 움직이는데 어떤 부분은 또 움직이지 않는 것이 생각보다 굉장히 거슬립니다.
지금까지 봤을 때 FAB의 좋은 예는 없거나 찾기 힘든 수준인 것 같습니다. 이 시점에서 생각해보면 FAB가 진짜 필요한 걸까 생각이 듭니다.
Material Design에서는 사용자가 어떤 특정한 동작을 계속해서 사용한다는 전제하에 FAB를 설계했습니다. 그래서 항상 가장 높은 Level을 유지하면서 제공되어야해요. 하지만 많은 App에서 사용자는 App 내의 내용에 집중하는 경우가 더 많습니다. 예를 들어 사진 App에서는 사진을 보고싶어 하고, Gmail App 에서는 Email을 읽고 싶어하며, Facebook에서는 친구들의 Post를 읽고 싶어 해요.
따라서 FAB는 콘텐츠를 소비하는 궁극적인 행위에 종속된 Design 철학(아니면 Design적 선택 요소 정도?)라고 할 수 있습니다.
FAB가 사용성을방해하는 경우가 많고, 자주 사용되는 특정한 동작을 알기 힘들고, 사용자가 찾아내야하는 애매한 동작들이 있다면(Scroll하면 사라지는 FAB나 각각 다르게 위치한 요소들이 포함된 목록같은), 그냥지 말라고 말씀드리고 싶어요.
Google의 Material Design은 아주아주아주 쩌는 정형화되고 중요한 Design 언어라 할 수 있지만 FAB는 글쎄.. 음.. 그냥 아닌거 같아요.
Written by Teo Yu Siang
www.teoyusiang.com
