brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Feb 09. 2017

버튼에 시각적 무게감을 어떻게 줘야 하는가?

UX 디자인 배우기 #113

전민수 UX 컨설턴트 소개 

안녕하세요. 전민수 UX 컨설턴트입니다. 지난 23년간 수행했던, UX 컨설팅 경험과 강의 이력을 소개합니다. 


전민수 UX 샘의 [인프런] 인터넷 강의 안내입니다 


[클럽하우스] 전민수 UX 샘의 재능 기부 UX 공개 수업 
[UI/UX/리서치/방법론] 우리 모두 함께 공부해요~ 


클럽하우스에서 [전민수 샘의 UX 공개 수업]을 진행하고 있습니다.

매주 수요일/금요일 밤 9시-11시까지 UX/리서치/방법론 등 하루에 하나의 주제를 선정하여 깊이 있는
공개 강의를 하고 있습니다. 바로 이어서, 뒷풀이방(11시-12시)은 [UX A-Z 모든 것] 고민 상담을 하고 있으니, 혹시, 궁금하거나 고민이 있으면, 저한테 무엇이든지 물어보세요~ 가능한 제가 아는 범위에서 최대한 알려 드리겠습니다.

 
여러분 모두 화이팅!!!!!  


그리고, 아래 링크를 클릭하고, 저를 팔로우 해주시면 [공개 강의] 혹은 [비정기 강의] 열릴때마다,
여러분께 알림이 갈거에요~


UI/UX 카페 소개 (카페명: 클럽하우스 UX Book Q&A Club)
국내/해외 UI&UX 10,000개 이상 아티클 공유 및 세부 카테고리 분류

카페는 UX 자료 공유 목적으로 운영되고 있으며, 카페 가입 시 바로 승인됩니다. 




Today UX 아티클


UX Movement에 올라온 Anthony의 글 원저자의 허락을 받아 번역한 글입니다. 


유저 인터페이스가 특정 행동을 유저가 하도록 유도할 때는, 최소한 두 개의 버튼을 보여줄 겁니다. 한 버튼은 유저 태스크에서 주요한 버튼이고, 다른 버튼은 부차적인 버튼입니다. 이 둘을 명확하게 구분하기 위해서는, 시각적 무게감(visual weight)을 이용해야 합니다. 


시각적 무게감은 유저가 버튼의 우선순위를 비교하는 방법입니다. 가장 강한 시각적 무게감을 가진 버튼은 주의를 가장 많이 끌 것입니다. 주요 액션에 가장 큰 시각적 무게감을 부여하는 것이 중요합니다. 부차적인 액션에는 가장 약한 시각적 무게감을 줘야 합니다. 


주요 액션이 ‘취소’ 버튼이 되는 경우


주요 액션은 유저의 태스크를 완료해주는 버튼입니다. 하지만 유저가 되돌릴 수 없는 액션을 하려고 할 때는 ‘취소’ 버튼이 주요 액션이 됩니다. 


되돌릴 수 없는 액션에 시각적 무게감을 가장 무겁게 주는 것은 위험합니다. 그렇게 해버리면 유저는 그 돌이킬 수 없는 액션을 안전한 액션이라고 오해하고 실수로 클릭하게 될 수 있습니다. 


영구적 데이터 삭제 같은 경우에, 태스크를 빠르게 완료하는 것이 중요하지 않습니다. 중요한 것은 올바른 액션을 선택하여 유저가 자신의 결정을 후회하지 않는 것입니다. 


(위) 돌이킬 수 없는 액션보다 취소 버튼에 시각적 무게감을 가장 많이 주었다. 
(아래) 돌이킬 수 없는 액션이 아닌 안전한 액션이 주요 버튼이다. 


주요 액션을 더 강조하는 방법


채도가 높은 색을 버튼에 이용하는 것이 시각적 무게감을 주는 가장 좋은 방법입니다. 버튼 색의 채도가 더 높을수록, 유저의 눈길을 더 끌 수 있을 것입니다. 채도가 높은 색은 더 밝아 보이고 태스크 효율성에 도움이 됩니다. 


채도가 높은 색은 주요 액션에 사용하고 채도가 높지 않은 색을 부차적인 액션에 사용할 수 있습니다. 이렇게 하면 다른 버튼이 유저의 눈길을 사로잡는 것을 막을 수 있습니다. 


아래 사례를 보고 채도가 높은 버튼과 그렇지 않은 버튼의 차이를 비교해보시길 바랍니다. 채도가 높으면 버튼이 더 눈에 띕니다. 채도가 높지 않은 버튼은 회색이 섞였기 때문에 그만큼 눈에 띄지 않습니다. 



부차적 액션이 보여야 하는 방식


부차적 액션은 주요 액션만큼 중요하지 않기 때문에 주의를 많이 끌면 안 됩니다. 대신, 인터페이스의 배경색에 섞여 들어가야 합니다. 


아래 사례를 보면, 다이얼로그 박스에서 부차적 버튼에 뉴트럴 그레이 색상을 사용하였습니다. 부차적 버튼은 배경에 섞여 들어서 주요 버튼보다 눈에 띄지 않습니다. 이것이 부차적 버튼에 채도가 높지 않은 색을 쓰는 것이 적합한 이유이기도 합니다. 회색을 어느 정도 사용하면 회색 배경과 잘 섞일 수 있습니다. 


부차적 액션 버튼은 배경색과 섞여 튀지않지만, 주요 액션 버튼은 그렇지 않다


비활성화 버튼으로 만든 부차적 액션


부차적 액션 버튼의 활성화 상태와 비활성화 상태 사이에는 미묘한 차이가 있습니다. 모두 회색으로 보이지만, 비활성화 버튼에는 실제로 투명 효과를 줍니다. 


활성화된 부차적 버튼의 색상은 배경색과 비슷한 색을 사용합니다. 비활성화 버튼에는 버튼과 레이블만 보일 정도로 투명도를 조절합니다. 비활성화 버튼은 유저가 해당 액션을 지금 맥락에선 취할 수 없음을 보여줍니다. 


부차적 액션 버튼은 투명 효과로 비활성화되어있다.


주요 액션 버튼과 부차적 액션 버튼에 적절한 시각적 무게감을 주면 유저 플로우가 용이해집니다. 적절한 시각적 무게감이 없으면, 유저가 실수를 하게 할 수도 있습니다. 버튼의 배치와 레이블링 역시 유저 인터페이스에서 고려해야 할 중요한 요소입니다. 성공에 적합한 옷을 버튼에 입혀야 합니다. 



매거진의 이전글 아이콘 아웃라인이 도움이 되는 이유

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면