UX 디자인의 플로팅 액션 버튼 (Floating Action Button in UX Design by Nick Babich)

안녕하세요!
Early adopter입니다. 제 번역 블로그를 자주 찾아 주셔서 감사드립니다. 이번에 페이스북에 [DTF] 디자인 번역 공장 - Design Translation Factory라는 공개 그룹을 만들어 보았습니다.
저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
그리고 페이스북 친구도 거의 없습니다. ㅠㅠ 친구 맺어주시고 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.



이전 2달 정도 Grid, Typography에 관련된 내용들을 번역했습니다. 이번에는 이번에는 Button에 관련된 글들을 몇 편 번역해보려고 합니다.
ps, 많은 분들은 아니지만 저의 번역의 허접함을 다시금 일깨워 주신 분들께 조금이나 보답하고자 전보다는 조금 더 신경 썼습니다. ^^; - 더 낳아지겠지요... 의견 주신 분들 감사합니다.
그럼 시작합니다.

Floating Action Button (FAB)은 Android 앱에서 매우 일반적으로 사용되는 버튼 입니다. UI 위에 떠 있는 동그라미 모양에 아이콘처럼되어있어 디자이너가 앱의 제품 스토리의 핵심 부분을 불러내는 도구입니다. FAB은 UI 요소를 구현하는 데 아주 간단하고 쉽지만 디자이너는 종종 이를 디자인에 잘못 사용합니다.
이 글에서는 다음 질문들에 대한 답을 찾을 수 있습니다.
  • FAB를 언제 사용합니까?
  • FAB에 대한 모범 사례는 무엇입니까?
  • FAB와 애니메이션이 UX를 향상시키기 위해 어떻게 협력 할 수 있습니까?

FAB를 언제 사용합니까?

특징적인 작동을 위하여
FAB은 가장 관련성이 높거나 자주 사용되는 작업을 강조 표시합니다. 앱의 특징인 액션에 사용해야 합니다. 이상적으로 FAB은 아래 예와 같이 전체 앱의 핵심 기능을 나타내야합니다.
presentation
Floating action button는 응용 프로그램의 기본 동작을 나타냅니다. 이 화면에서 재생을 일시 중지하거나 다시 시작하는 음악 앱임을 알립니다.

길 찾기 도구로써 사용
FAB은 다음에 해야 할 일을 사용자에게 알리는 자연스러운 신호입니다. Google의 연구에 따르면 익숙하지 않은 화면에 직면했을 때 많은 사용자가 FAB을 사용하여 탐색합니다. 따라서 FAB은 중요한 것의 상징으로서 매우 유용합니다.
presentation
트위터는 FAB를 사용하여 트윗 액션을 작성합니다.
모든 화면에 FAB이 필요하지는 않습니다.
FAB는 다채롭고 높이 떠있고 그리드를 깨뜨릴 수 있습니다. 이 버튼을 발견하지 못하는 것은 매우 어렵습니다. 왜냐하면 이들 버튼이 두드러지게 보이도록 설계되었기 때문입니다. 그러나 모든 화면이 이러한 중요성을 갖는 것은 아니기 때문에 모든 화면에서 FAB을 사용해야 하는 것은 아닙니다.
모든 곳에 FAB을 사용하지 마십시오. 프로모션 된 활동에만 해당됩니다!
좋은 예는 Android 용 Google Photos app입니다. 이 앱은 갤러리 뷰입니다. 여기서 플로팅 액션 버튼은 검색 기능을 수행합니다. 이 FAB에는 두 가지 문제가 있습니다.
  • 검색은 대다수 사용자를 위한 추가 작업입니다. 주요 작업은 사진 탐색입니다. 따라서 이 FAB를 가질 필요가 없습니다.
  • FAB이 있으면 주 콘텐츠 (사진)에서 사용자의 주의를 산만하게 하거나 혼란스럽게 할 수 있습니다.
presentation
검색은 Google Photos의 추가 작업이므로 FAB가 필요하지 않습니다.
: 화면의 기본 동작을 찾는 것이 처음 것보다 훨씬 어려울 수 있습니다. 작업을 단순화하고 UI에 FAB이 필요한지를 이해하려면 간단한 5분 규칙을 사용하십시오. 5분 이상 동안 화면의 주요 작업을 검색하는 데 어려움이 있다면 FAB이 필요하지 않음이 분명합니다.

FAB 모범 사례

Mystery meat navigation을 피하십시오.
"Mystery meat navigation"이라는 용어는 유명 웹 사이트(Web Pages That Suck.) 웹 페이지의 저자인 빈센트 플랜더스 (Vincent Flanders)가 소개 한 것입니다. 사용자가에게 어떤 일을 하고 있는지 설명하지 않는 버튼 또는 링크를 말합니다. 대신, 사용자는 그것들을 찾아 내기 위해 탭 해야 합니다.
FAB은 아이콘 전용 버튼이며 아이콘은 다양하게 이해하기가가 쉽기 때문에 아이콘을 이해하기가 어렵다는 점(icons are really hard to understand )이 문제입니다. NNG가 지적했듯이(points out) 보편적으로 인식되는 아이콘은 드뭅니다. 예를 들어, 아래 예에서 버튼이 무엇을 추측 할 수 있습니까?
presentation
FAB은 여기서 무엇을 의미합니까?
당신이 그것을 누를 때까지 당신은 확실하지 않습니다. 사용자가 추측할 필요가 있는 버튼은 신비한 고기(mystery meat)입니다. 일부 사람들은 이러한 아이콘의 의미가 무엇인지 발견하는 데 걸리는 시간이 매우 짧으며 가능한 한 빨리 퍼지는 가능성이 매우 낮다고 말할 수 있습니다. 그렇습니다. 아이콘이 무엇을 의미하는지 알아내는 데 걸리는 시간은 아주 짧을 수 있습니다. 그러나 인지력이 필요합니다 :
사용자는 그것이 의미하는 바를 기억해야 합니다.
모든 앱에서 모든 미스테리 고기(mystery meat) 아이콘을 곱하면됩니다. 그것은 적지 않은 노력입니다.
아이콘 전용 버튼을 사용하는 것은 허용되지만 상황에 맞는 버튼인지 확인해야 합니다. 관련성이 높고 사용자에게 분명합니다. 컨텍스트는 사용자가 아이콘 전용 버튼을 해석하고 동작을 설명하는 데 도움이 되는 것입니다. 예를 들어 메모 작성 응용 프로그램을 사용하는 경우 응용 프로그램의 주 목적은 메모를 보거나 가져오는 것임이 분명합니다. 이런 맥락에서 '펜'아이콘이 멋집니다.
화면 당 하나의 FAB만 사용하십시오.
FAB는 매우 눈에 띄기 때문에 FAB는 한 페이지에 한 개만 사용하거나 전혀 사용하지 않아야 합니다.
presentation
한 화면에 한 개 이상의 플로팅 액션 버튼이 없어야합니다.

긍정적인 행동에만 FAB 사용
FAB는 일반적으로 생성, 공유, 탐색 등과 같은 긍정적인 행동을 유도합니다. FAB은 삭제 또는 보관(archive)과 같은 파괴적인 행동이 아니어야 합니다. 불특정한 것 또는 경고, 텍스트 잘라내기와 붙여넣기와 같은 제한된 동작들은 툴바에 있어야 하는 동작들입니다. (예 : 볼륨 변경)
presentation
이 기능은 FAB 사용에 대해 사용자가 긍정적인 느낌을 갖도록하고, 잘못된 행동을하지 않을 것을 염려하지 않아야합니다.
FAB 및 애니메이션
플로팅 동작 버튼은 유연하도록 디자인되었습니다. FAB은 확장, 변형 및 반응할 수 있습니다.
행동의 세트(a set of actions)로 확장
경우에 따라 버튼이 회전하여 몇 가지 다른 옵션이 표시되는 것이 적절합니다 (아래 Evernote 예제 참조). FAB은 구체적인 작업으로 대체 될 수 있으며 사용자가 상황에 맞게 디자인 할 수 있습니다. 하지만 다음 사항에 유의하십시오.
  • 이러한 액션은 FAB 자체가 표현하고 서로 관련있는 기본 행동과 관련되어야합니다. 즉, 공개 된 행동을 툴바에 배치하는 것처럼 독립적으로 다루지 마십시오.
  • 일반적으로 클릭(press)시 적어도 세 가지 옵션이 있지만 원래 플로팅 동작 버튼 타겟을 포함하여 여섯 개를 초과하지 마십시오.
presentation
플로팅 액션 버튼으로 관련 액션을 실행합니다.
FAB는 새로운 형태로 변신 할 수 있습니다.
FAB는 단지 둥근 버튼이 아니라 화면에서 화면으로 사용자를 쉽게 사용할 수 있는 변형 가능한 속성을 가지고 있습니다. 플로팅 액션 버튼은 앱 구조의 일부인 보기로 변환할 수 있습니다.
FAB은 화면 간의 전환을 향상시킬 수 있습니다.
플로팅 액션 버튼을 변형할 때 논리적인 방식으로 시작 위치와 끝 위치 사이를 전환합니다. 예를 들어, 아래 예제의 애니메이션은 사용자의 방향 감각을 유지하고 사용자가 보기의 레이아웃에서 방금 발생한 변경 사항, 변경을 트리거 한 변경 사항 및 필요한 경우 나중에 변경 사항을 다시 시작하는 방법을 이해하는 데 도움을 줍니다.
presentation
Image credit: Ehsan Rahimi

스크롤하는 동안 FAB를 숨길 수 있습니다.
FAB은 사용자가 콘텐츠를 읽지 못하게 방해하는 경우 스크롤 할 때 숨길 수 있습니다. 아래 예에서 FAB는 모든 목록 항목의 모든 부분에 실제로 도달할 수 있도록 이탈할 수 있어야 합니다.
presentation
목록 전용 뷰포트 영역을 최대화하려면 FAB를 숨 깁니다. 이미지 크레딧 : Juliane Lehmann
Android 용 Medium 앱은 이 기술을 사용하는 좋은 예입니다. 스크롤 하면 Heart 버튼이 사라지고 글이 마음에 들었던 독자가 버튼을 사용하려고 했을 때 기사의 끝부분에 도달하면 다시 나타납니다.
결론
앱에서 FAB을 사용하려는 경우 앱 디자인을 신중하게 고려해야 하며 가능한 사용자의 가능성 있는 행동을 가장 눈에 띄는 단일 기능으로 끌어내야 합니다. 올바르게 사용하면 FAB은 최종 사용자에게 놀라운 패턴이 될 수 있습니다.
고맙습니다!
Follow UX Planet: Twitter | Facebook
Originally published at babich.biz

번역 글 추천(신청) 받습니다.

안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역 글입니다. 원본 링크입니다.