brunch

매거진 UX 디자인의 모든 것

라이킷 102 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Dec 05. 2017

플로팅 액션 버튼의 UX 디자인

UX 디자인 배우기 #130

Today UX 아티클

오늘은 플로팅 액션 버튼의 UX 디자인에 대해 얘기하고자 합니다.

Nich Babich의 원문을 번역한 글입니다

플로팅 액션 버튼(Floating Action Button; FAB)은 안드로이드 앱에서 매우 흔하게 사용되는 컨트롤입니다. UI위에 떠 있는 원형의 아이콘은, 디자이너들이 앱의 제품 스토리에서 핵심 부분을 끄집어내서 담아둘 수 있는 툴입니다. FAB는 상당히 간단하고 쉽게 UI 요소를 적용할 수 있지만, 현실에서는 이를 디자인에 잘못 활용한 경우를 쉽게 발견할 수 있습니다.

이 글을 통해 여러분은 다음 질문에 대한 답을 얻을 수 있을 것입니다.

언제 FAB를 사용해야 하는가?

FAB를 잘 활용한 사례는 무엇이 있는가?

FAB와 애니메이션을 동시에 활용하여 UX를 개선하는 방법은 무엇인가?

언제 플로팅 액션 버튼을 사용해야 하는가?

1. 홀마크 액션에 사용하기

FAB는 가장 관련 있거나 자주 이용하는 액션을 강조해줍니다. 앱의 특징이 되는 액션에 사용되어야 합니다. FAB는 아래 사례처럼 앱 전체에서 가장 핵심적인 기능을 보여주는 데 사용하는 것이 가장 이상적입니다.

플로팅액션 버튼은 어플리케이션의 주요 액션을 보여줍니다. 이 사진에서 보여지는 일시 정지(재생하기) 버튼은 유저에게 이 앱이 음악 앱이라는 점을 보여줍니다.

2. 길을 찾는 도구로 사용하기

FAB는 유저에게 그다음으로 무엇을 해야 하는지 자연스럽게 알려주는 단서가 됩니다. 구글에서 한 연구 결과를 보면, 익숙하지 않은 스크린을 보았을 때 많은 유저가 길을 찾기 위해 FAB에 의존하는 것으로 나타났습니다. 따라서 FAB는 중요한 것을 나타내는 표지판으로 사용하면 매우 유용합니다.

트위터는 트윗을 쓰는 액션에 FAB를 사용하였습니다.

3. 모든 화면에 FAB가 필요한 것이 아니다.

FAB는 컬러풀하고, 눈에 띄며, 그리드를 깨는 경향이 있습니다. 이런 버튼에 눈길이 가지 않을 수 없습니다. 눈에 잘 띄도록 만들어졌기 때문입니다. 하지만 모든 화면에 FAB를 사용해야 하는 것은 아닙니다. 모든 화면에 그 정도로 중요한 액션이 있는 것은 아니기 때문입니다.

반드시 FAB를 사용해야 하는 것은 아닙니다. 장려해야 하는 액션에만 사용해야 합니다!

안드로이드의 구글 포토(Google Photo) 앱이 그 좋은 사례입니다. 이 앱은 처음 열면 갤러리 뷰에 검색을 할 수 있는 플로팅 액션 버튼이 같이 보입니다. 이 FAB에는 두 가지 문제점이 있습니다.

검색은 대부분의 유저에게 부수적인 액션입니다. 주요 태스크는 사진을 탐색하는 것(browsing)입니다. 따라서, 이 FAB는 꼭 들어가지 않아도 됩니다.

이 FAB는 유저가 중심 콘텐츠(사진)를 보는 시선을 방해하고 있습니다.

구글포토에서 검색은 부수적인 액션이기 때문에 FAB로 만들 필요가 없습니다.

팁: 화면에서 주가 되는 액션을 찾는 것은 보기보다 어려울 수 있습니다. 태스크를 간소화하고 UI에서 FAB가 필요한지 확인하기 위해서는 5분 룰을 활용해보세요. 해당화면에서 주요 액션이 무엇인지 생각해내는 데 5분 이상 걸린다면, 그 화면에선 FAB가 필요 없다고 볼 수 있습니다.

FAB 모범사례

1. 미스터리 미트 내비게이션은 피한다.

“미스터리 미트 내비게이션(Mysterymeat navigation)”이라는 용어는 Web Pages ThatSuck이라는 유명한 웹사이트를 만든 Vincent Flanders가 처음 사용한 용어로, 무슨 기능을 하는지 알 수 없는 버튼이나 링크를 뜻합니다. 유저가 눌러봐야 어떤 기능을 하는지 파악할 수 있죠.

FAB는 레이블 없이 아이콘만으로 구성된 버튼이기 때문에 해석의 여지가 많아 정확히 이해하기가 매우 어렵습니다. NNG에서 지적했듯이, 세계적으로 동일하게 인지하는 아이콘은 매우 드뭅니다. 예를 들어, 아래 사례의 버튼이 어떤 버튼인지 아시겠습니까?

ㅊ

이 FAB는 어떤 기능을 할까요?

눌러보기 전까지는 정확히 어떤 기능을 하는 것인지 알 수 없을 겁니다. 유저가 추측을 해야 한다면, 그 버튼은 미스터리 미트라고 할 수 있습니다. 어떤 사람은 버튼의 의미를 파악하는 데 시간이 걸릴 뿐, 파악하는 데 걸리는 시간도 짧고 인지하는 리스크도 매우 낮다고 주장할 수 있습니다. 네, 아이콘을 눌러서 그 의미를 파악하는 데 걸리는 시간은 매우 짧을 수 있습니다. 하지만 여기에서 인지 부하가 발생합니다.

유저는 그 의미를 기억해야만 합니다.

유저는 여러 앱에서 사용되는 다양한 미스터리 미트 버튼을 외워야 하기 때문에 인지부하는 기하급수적으로 늘어나게 되고, 이는 적은 노력이 들어가는 것이 아닙니다. 레이블 없이 아이콘만 사용하는 버튼을 써도 되지만, 맥락과 관련 있으면서도 유저가 뜻을 명확하게 알 수 있을 때만 사용해야 합니다. 맥락은 유저가 아이콘을 해석하는 데 도움을 주며, 액션을 설명해주기도 합니다. 예를 들어, 노트 필기 앱의 경우 주요 액션이 노트를 작성하고 보는 것이라는 점은 명확합니다. 이런 맥락에서 ‘펜’ 아이콘을 사용하는 것은 문제가 없습니다.

2. 스크린 당 하나의 FAB를 사용한다.

FAB는 매우 눈에 띄며 거슬리기 때문에 페이지당 한 번만 사용하거나 전혀 사용하지 않아야 합니다.

스크린당 두 개 이상의 플로팅 액션 버튼을 사용하지 마세요

3. 긍정적인 액션에만 FAB를 사용한다.

FAB는 만들기, 공유하기, 탐색하기 등 긍정적인 액션에 사용된다는 개성이 강합니다. FAB를 삭제하기 등과 같은 액션에 사용하면 파괴적인 결과를 낳을 수 있습니다. 구체적이지 않은 액션이나 제한적인 액션(예: 복사-붙여 넣기)이나 툴바에 들어가야 하는 액션(예:음향 조절 등)에는 FAB를 사용하면 안 됩니다.

긍정의액션에 대해서만 FAB를 사용하여 유저가 무언가 잘못될 수 있다는 걱정을 절대 하지 않게 만들어야 합니다. Image credit: Material Design

FAB와 애니메이션

플로팅 액션 버튼은 유연하게 디자인할 수 있습니다. FAB는 확장될 수도 있고, 모핑 될 수도 있습니다.

1. 액션 리스트로 확장할 수 있다.

어떤 경우에는 FAB 버튼이 펼쳐지면서 몇 가지 다른 옵션이 같이 보이는 것이 더 적절할 수도 있습니다. (아래 에버노트 사례처럼 말입니다.) FAB이 보다 구체적인 일련의 액션들로 전환되게 만들어 유저가 자연스럽게 그 기능을 이해할 수 있게 디자인할 수 있습니다. 다만 아래 사항을 항상 기억해야 합니다.

이런 액션은 FAB 자체가 표현하는 주요 액션과 관련이 있어야 하며, 묶여서 보이는 버튼끼리 서로 연관성이 있어야 합니다. 툴바에 배치된 버튼을 FAB에서 따로 보여줄 필요도 없습니다.

일반적으로, 기존 플로팅 액션 버튼 타깃을 포함해 최소 3개 최대 6개 정도의 액션을 보여주는 것이 적절합니다.

플로팅액션 버튼은 서로 관련있는 액션을 보여줘야 합니다.

2. FAB을 활용해 새로운 영역으로 모핑 될 수 있다.

FAB를 단순한 버튼이 아닌, 유저가 다른 스크린으로 쉽게 이동하도록 도움을 주는 전환용 도구로 사용할 수도 있습니다. 플로팅 액션 버튼을 눌렀을 때 앱 구조의 일부를 보여주는 화면으로 전환되도록 만들 수 있습니다.

FAB는 스크린 간의 전환을 쉽게 만들어줄 수 있습니다.

플로팅 액션 버튼이 모핑 될 때는, 시작점에서 종료점으로의 전환이 논리적 흐름을 따라 이루어져야 합니다. 예를 들어, 아래 사례의 애니메이션을 보면 유저는 전환 효과를 보고 어디서 시작된 액션이 어떻게 화면을 전환시켰는지, 나중에 어떻게 다시 원래 상대로 복구할 수 있는지 쉽게 파악할 수 있습니다.