모바일 UI 디자인 기본 요소 - 버튼
가장 본질 적인 모바일 UI 컨트롤
버튼 Button은 사용자가 데이터를 전송하거나 기능을 실행하도록 하는 명령 컨트롤 imperative control이다. <About Face 4>에서 엘런 쿠퍼는 “컨트롤의 세계에서 가장 본질적인 요소는 버튼이다. 버튼은 수없이 많은 얼굴을 지녔지만 실상은 하나다. 버튼을 클릭하는 순간 이에 연결된 시행(동사)은 즉시 발효된다.”라고 했다. 버튼의 가장 큰 특징은 사용자가 터치했을 때 즉각적으로 명령을 실행시키는 점이다. (컨트롤에 대해서는 여기로)
버튼은 어포던스가 있어야 한다.
버튼은 다른 컨트롤과 달리 누르는 행위를 유발하는 특징(어포던스 Affordance)이 있다. (어포던스에 대해서는 다음 글에서) 사용자가 텍스트 필드 같은 입력 컨트롤로 정보를 입력하고 선택 컨트롤로 항목을 선택한 후 버튼을 누르면 입력 데이터가 전송되거나 실행 파일이 구동된다. 즉, 사용 상황이 크게 바뀐다. 바꾸어 말하면 사용 상황이 크게 바뀌는 경우에 버튼을 사용하며, 이 때문에 버튼을 시각적으로 강조하여 누르는 행위를 유도한다. 버튼은 양각 형태의 입체적 느낌으로 표현되어 왔다. 현재는 버튼의 시각적인 효과보다는 컬러와 레이블과 정교한 상호작용 디자인으로 버튼의 형태가 변경되었다.
버튼은 실제 세계의 아날로그 기기의 조작 버튼을 메타포로 적용됐다.
메타포가 적용되면 학습 없이도 UI 요소 UI Element의 기능과 개념을 이해하여 직관적으로 사용할 수 있다. 아이콘과 폴더 구조 같은 UI 요소가 메타포를 사용한 예이다.(메타포에 대해서는 다음 글에서) 오디오, 세탁기, 텔레비전 리모컨의 물리적인 버튼을 가상의 모바일 화면에 동일하게 조작되도록 구현된다. 따라서 오디오의 재생 버튼을 누르면 음악이 재생되고 리모컨의 채널 번호를 누르면 채널이 변경되는 것처럼 스마트폰 화면의 버튼을 누르면 기능이 즉각적으로 실행된다. 사용자는 실생활에서 경험한 물리적 버튼을 눌러 기기를 조작해 본 경험을 기반으로 모바일 화면의 버튼을 탭 한다.
사용자가 실생활에서 가장 많이 사용하는 버튼은 아마도 엘리베이터 버튼일 것이다. 1층에서 엘리베이터의 올라가기 버튼을 손가락으로 누르면 버튼은 안으로 들어가고 손을 떼면 다시 올라온다. 버튼에 있는 화살표에 불이 들어오고 엘리베이터 문 우측의 등이 켜진다. 사용자는 이런 피드백을 통해 버튼이 실행을 알 수 있다. 다른 층에 있던 엘리베이터는 1층으로 이동한다. 이때 엘리베이터 문 상단에 층 번호가 나타난다. 엘리베이터가 1층에 도착하면 등이 깜박인 후 문이 열린다. 엘리베이터에 탑승한 후 가고 싶은 층의 버튼을 누른다. 일정 시간이 지나면 엘리베이터 문이 닫힌다. 또는 문 닫기 버튼을 누르면 문이 닫힌다.
이 모든 과정은 여러 번 반복적으로 경험했기 때문에 익숙하고 직관적이다. 엘리베이터에 타는 사람은 의식적으로 내려가고 올라가는 버튼을 보고 어떤 버튼을 누르면 올라갈 수 있는지 논리적이고 분석적으로 생각하지 않는다. - 층 번호 버튼의 배열이 왜 2열, 3 열이고 낮은 층이 왼쪽이고 높은 층이 오른쪽인지, 닫기 버튼과 열기 버튼이 왜 층 번호 하단에 있고 닫기 버튼이 오른쪽에 있고 열기 버튼이 왼쪽에 있는지 생각하지 않는다. - 단지 엘리베이터 문 옆의 화살표가 있는 버튼을 가려고 하는 층 번호 버튼을 습관적으로 또는 직관적으로 누를 뿐이다. 이 과정은 빠르고 끊김이 없다. 사용자는 모바일 UI 버튼도 엘리베이터 버튼과 동일하게 작동할 거라고 예상하고 무의식적으로 버튼을 탭 한다. 즉 직관적으로 상호작용하기 위해 버튼을 누른다.
버튼은 콘텐츠와 구분되어야 한다.
버튼과 콘텐츠가 같이 있을 때 버튼을 보고 실행 가능함을 한눈에 알아볼 수 있어야 한다. 버튼에 사용한 색과 스타일을 콘텐츠에 사용하면 사용자는 혼란스러워 한다. 색과 대비를 통해 시각적으로 구분하여 사용자가 혼란스럽지 않게 해야 한다. 버튼의 양각 효과를 지나치게 하거나 페이지 곳곳에 배치되면 산만하게 보이거나 콘텐츠 읽기를 방해할 수 있다. 버튼은 비슷한 것끼리 묶어서 구성하며, 그 위치는 사용자가 하려는 작업의 진행 순서를 고려하여 지정한다. 한 화면에 지나치게 많은 버튼은 노출하지 않는다. UI 컨트롤은 사용자가 콘텐츠를 이해하고 상호작용 할 수 있게 해주는 수단일 뿐이다. 콘텐츠가 우선 Content First 이 되면서 버튼과 같은 컨트롤은 사용자가 콘텐츠를 보는데 방해가 되지 않는 방향으로 그래픽 요소의 사용을 최소화해야 한다. UI 디자이너는 아이콘과 버튼 등 UI 컨트롤에 집중하지 않고 콘텐츠 자체 (이미지, 비디오 및 텍스트)에 더 집중해 디자인해야 한다.
버튼은 전환율과 직접적으로 연관성이 있다.
사용자가 버튼을 누르지 않는다면 전환은 이루어지지 않는다. 여기서 전환이란 온라인 마케팅 용어로 앱과 웹사이트를 방문한 사용자가 <구매하기>, <다운로드>, <구독하기> 등 매출과 관련성이 높은 행위 action를 함을 의미한다. 전환율은 전환수를 방문자수로 나누어 계산한다. 보통 퍼센티지 단위를 쓴다.(위키) 전환율이 높다면 당연히 기업의 매출은 높아진다. 전환을 유도하는 페이지 landing page에서 사용되는 버튼을 CTA 버튼 Call to action button이라고 한다. 사용자가 특정 행동을 취하게 하려면 설득력 있는 CTA버튼을 디자인하는 것이 중요하다.
< Apple Music 가입하기>와 <예약 요청> 버튼이 CTA버튼이다.버튼은 사용자 인터페이스에서 가장 본질적인 컨트롤이다. 세심하게 디자인된 버튼은 사용자에게 원하는 행동 action을 유도하여 성공적인 비즈니스에도 도움을 준다.
버튼의 구조
텍스트로 된 버튼 레이블과 레이블을 감싸는 직사각형 컨테이너가 버튼의 최소한의 요소이다. 이 요소가 화면에서 버튼을 콘텐츠와 시각적으로 구분되게 하여 사용자에게 터치가 가능하고 상호작용 할수 있음을 인지시킨다. 사용자에게 직관적으로 상호작용이 가능함을 알리는 버튼의 요소는 다음과 같다.
1. 버튼 레이블 Button Label
버튼 레이블은 버튼을 누를 때 실행되는 명령에 대해 나타낸다. 사용자가 레이블만 보고도 무엇이 실행될지 알아야 한다. 버튼 레이블은 세심하게 결정해서 작성해야 한다. iOS와 안드로이드에서 컨테이너가 없는 텍스트로만 된 버튼이 있어 버튼의 레이블은 매우 중요하다. 레이블은 접근성을 고려하여 컨테이너 색과 대비가 높은 색(파란색 계열 이면 흰색, 노란색일 경우 검은색이나 그에 준하는 어두운 색)을 선택해서 사용한다. 컨테이너가 없고 레이블만 있는 경우 시스템에서 액션에 사용하기 위해 선정된 색을 사용한다. 안드로이드는 콘텐츠와 구분을 위해 버튼 레이블을 대문자로만 사용한다.
2. 컨테이너 Container
버튼 레이블을 감싸는 직사각형의 시각적인 요소이다. 색이 채워진 직사각형은 물리적인 기기의 버튼 형태를 연상시킨다. 컬러 시스템에서 액션에 사용하기 위해 선정된 색만을 사용해서 컨테이너를 채운다. 특별한 경우가 아니라면 한 가지 색만 사용한다. 버튼에 양각 효과나 재질 표현을 사용하지 않는 지금의 트렌드에서 버튼의 색은 매우 중요하다. 컨테이너는 버튼의 시각적인 계층구조에서 가장 중요도가 높은 버튼에서 사용한다.
3. 아이콘 Icon
아이콘은 그 자체로 레이블이 될 수 있다. 아이콘 단독으로 사용하면 아이콘 버튼이 된다. 버튼의 중요도가 높을 경우 레이블과 아이콘을 같이 사용하기도 한다. 버튼에 더 많은 의미를 전달하려면 아이콘을 사용한다. 버튼에서 아이콘 사용은 선택적으로 사용한다.
4. 아웃라인 Outline
버튼의 컨테이너에 색을 채우지 않고 아웃라인에만 색을 사용한다. 고스트 버튼 ghost button과 아웃라인 버튼 outline button이 있다. 고스트 버튼은 라인 색이 액션에 사용하는 색을 사용하고 중요도가 더 떨어질 경우 회색을 사용한다.
5. 라운드 Round
버튼 컨테이너의 모서리 부분에 라운드를 줌을 의미한다. 라운드는 기능적으로 의미가 없지만 시각적인 측면에서 디자이너에게 중요하다. 아이콘과 색과 함께 스타일을 결정하는 요소이다. 라운드는 버튼이 콘텐츠와 분리되어 보일 수 있는 요소이고 사용자 친화적이다. 브랜드의 콘셉트에 따라 라운드의 크기를 조절해서 적용할 수 있다.
컨테이너의 라운드 크기는 시각적인 스타일에 많은 영향을 준다6. 그림자 Shadow
그림자는 버튼의 어포던스를 높일 수 있는 그래픽 요소이다. 모든 버튼에서 그림자를 사용할 필요는 없다. 주로 컨테이너 버튼에 또는 CTA 버튼에 사용한다. 지나치게 강한 그림자는 자칫 콘텐츠에 집중할 수 없게 한다. (iOS는 사용하지 않는다.) 또한 최근의 트렌드는 버튼같은 컨트롤에 사용하지 않는 추세이다. (카카오, 네이버, 우버, 토스 둥 주요 얍에서 버튼에 그림자는 사용하지 않는다)
버튼의 유형 또는 스타일
버튼은 파란색 직사각형에 하얀색 텍스트 레이블이 채워진 형태가 일반적이다. 그 외에 기능의 중요도와 상황에 따라 다양한 유형이 있다. 이러한 다양한 유형 중에 자신의 제품에 맞는 유형을 선별해서 사용한다.
솔리드 버튼 Solid button
가장 일반적인 버튼의 형태이다. 직 사격형의 컨테이너에 액션을 의미하는 색이 채워져 있고 레이블은 흰색이다. 컨테이너의 모서리는 라운드가 있는 경우가 많다. 배경이 색으로 채워져서 다른 버튼보다 인지가 잘된다. 시각적으로도 가장 눈에 띈다. 브랜드 색을 사용하여 Brand Button이라고도 하고 컨테인디드 버튼 Contained Button 이라고도 한다.
고스트 버튼 Ghost Button
고스트 버튼은 하얀색 배경에 버튼 레이블과 아웃라인으로 된 버튼이다. 레이블과 아웃라인의 색은 액션 색으로 채운다. 컨테이너 버튼보다 중요도가 떨어지는 액션에 사용된다.
아웃라인 버튼 Outline Button
아웃라인 버튼은 텍스트 레이블을 아웃라인으로 감싼 구조다. 고스트 버튼보다 중요도가 떨어진 버튼에 사용한다. 레이블을 검은색으로 하고 아웃라인을 회색으로 한 버튼이 일반적인 스타일이다.
밝은 솔리드 버튼 Light Solid Button
솔리드 버튼과 같이 레이블을 컨테이너가 감싸는 형태지만 밝은 회색 배경에 액션 색 텍스트로 되어 있다. 아웃라인 버튼과 같은 시각적인 계층을 가진다.
텍스트 버튼 Text Button
텍스트 버튼은 컨테이너나 아웃라인이 없이 텍스트 레이블만 있는 버튼이다. 액션 컬러를 사용해서 하이퍼 링크와 같아 보인다. (실제로 안드로이드에서는 링크를 이 버튼으로 해결한다. ) 텍스트 버튼은 중요도가 떨어지거나 내비게이션에 사용할 수 있다. 총 3종류가 있을 수 있다. 액션 컬러에 볼트 텍스트, 액션 컬러에 레귤러 텍스트 , 진회색이 볼드 텍스트 가 있다.
아이콘 버튼 Icon Button
버튼 레이블 없이 아이콘만 사용된 버튼이다. 툴 바와 내비게이션 바(앱 바)에서 사용된다. 검색의 돋보기 아이콘, 데이터를 삭제하는 휴지통 아이콘처럼 사용자가 아이콘만 보고도 의미를 이해할 액션에 사용한다.
파괴적인 버튼 Destructive Button
파괴적인 버튼은 영구적으로 데이터를 지우는 작업에 사용한다. 실행하려는 액션이 되돌릴 수 없는 액션임을 사용자에게 다시 한번 상기시켜 오류를 줄인다. 버튼의 색은 오류를 나타내는 붉은색을 사용한다. 사진이나 작성한 포스트를 지우려 할 때 이 작업이 실수인지 사용자가 한번 더 생각할 수 있게 한다.
Destructive Button 은 메일과 스토리 포스트 등을 삭제할때 사용된다. 휴지통 아이콘과 붉은색 버튼을 사용한다.사용자가 삭제와 같이 데이터를 지우는 작업을 수행할 경우 파괴적인 버튼 Destructive Button을 사용한다.
사용자는 모바일에서 실수할 가능성이 높다. 데이터를 삭제하는 작업을 할 때 이 작업이 실수인지 한번 더 생각할 수 있도록 오류를 의미하는 붉은색 버튼을 사용한다. 레이블은 <확인>같이 중립적인 표현보다는 사용자가 수행하려는 작업인 <삭제> 또는 <삭제하기>를 사용한다.
버튼의 시각적 계층구조 Hierarchy
앞에서 살펴본 버튼의 유형으로 버튼의 시각적인 중요도를 만들 수 있다. _버튼의 시각적인 계층을 만드는 목적은 오류의 가능성을 줄이고, 사용자의 성공적인 작업 수행에 도움을 주기 위해서다. _
화면에 중요 버튼을 하나만 노출하는 게 원칙이지만 한 화면에 다양한 버튼을 노출할 필요가 있을 경우가 많다. 대표적으로 페이스북의 뉴스피드에는 “좋아요” 버튼 외에 3가지 이상의 버튼이 노출된다. 이 경우 버튼을 모두 강조하는 것은 시각적인 잡음이 돼 사용자가 콘텐츠를 읽기 어렵게 한다.
어떤 액션은 다른 액션보다 중요하다. 예를 들어 '장바구니에 추가'가 '위시리스트에 추가'보다 더 중요하다. 따라서 버튼의 중요도에 따라 시각적인 계층을 만들고 그에 맞춰 UI 디자인을 해야 한다.
버튼은 크게 3가지 정도의 시각적 계층을 가질 수 있다. 기본 primary, 보조 secondary, 부가 tertiary로 범주화한다. 보조 작업 (예 : '취소'또는 '돌아가기'와 같은 옵션) 가장 약한 시각적 무게를 가져야 한다. 이를 기본으로 다양한 방식으로 버튼의 시각적인 계층을 형성시킬 수 있다. (최대 5가지 계층을 가지기도 한다.)
버튼의 계층 구조의 예시 각 플랫폼별 지도 앱기본 버튼 Primary Button
가장 중요한 액션에 사용된다. 솔리드 버튼을 사용한다. 이 커머스의 경우 “구매하기” SNS에서는 “공유하기” 핀 태그에서는 “송금하기” 같이 전환과 관련된 액션에 사용된다. 일반적으로 Primary Button이라고 명칭을 정한다.(CTA 버튼이 여기에 속해야 한다.) 브랜드 색상을 사용하여 버튼 중에서 가장 눈에 띄게 디자인해야 한다. 화면에서 가장 강력한 클릭 유도 문안 call to action을 강조하기 위해 기본 버튼은 화면 당 하나만 있는 게 좋다. (응용 프로그램 헤더 또는 모달 대화 상자 제외). 모든 화면에 필수적인 버튼은 아니다.
보조 버튼 Secondary Button (Default)
버튼 중 가장 많이 사용하는 버튼이다. 따라서 Default 버튼이라고 도 한다. Primary 버튼과 같이 사용할 때 사용될 수 있다. 보조 Secondary 버튼은 2 개가 될 수 있으며 기본 동작보다 훨씬 적은 시각적 중요성을 할당하므로 기본 버튼보다 눈에 띄거나 주목도를 해치지 않아야 한다. 고스트 버튼이나 아웃라인 버튼 또는 밝은 솔리드 버튼을 사용한다.
부가 버튼 Tertiary Button
한 화면에 많은 버튼을 배치해야 할 경우 사용할 수 있다. 텍스트 버튼을 사용한다. 내비게이션 관련이나 얼럿 Alert 그리고 카드에 사용할 수 있다.
Quaternary Button
텍스트 버튼에서 볼드체가 아니라 레귤러 체를 사용한다. 진한 회색을 사용하는 게 보통이다. 사용자가 탭 하지 않으면 좋을 부정적인 액션에 사용할 수 있다.
버튼의 시각적인 계층은 사용성과 연관성이 높고 앱 또는 웹 사이트 전반적으로 사용해야 하기 때문에 많은 테스트를 통해 결정해야 한다.
버튼의 시각적 계층구조 예시기본 버튼은 한 화면에 하나만 있어야 한다.
버튼의 시각적인 계층구조는 오류 가능성을 줄이고 사용자가 원하는 행동을 유도하기 위해 필요하다. 기본 버튼 Primary Button 은 한 화면에 여러 개가 있으면 콘텐츠의 집중도가 떨어지고 읽기를 방해할 수 있다. 기본 버튼은 화면에서 가장 중요한 액션에만 사용하고 그 외의 액션은 보조 버튼이나 부가 버튼을 사용한다.
<통화하기>는 이 화면의 가장 중요한 버튼이 아니다. 사용자가 훑어보기만 해도 가장 중요한 버튼을 인지할 수 있어야 한다.선택 컨트롤(Select control)과 버튼의 시각적인 계층 구조는 명확해야 한다.
왼쪽의 UI는 버튼과 선택 컨트롤이 시각적으로 동일하게 강조되어 있다. 선택 컨트롤만 있는 경우 상관없지만 버튼이 같이 있다면 버튼이 시각적으로 더 강조되어야 한다. 버튼은 콘텐츠나 다른 컨트롤과 구분되어야 한다. 사용자는 무엇을 탭 해야 하는지 직관적으로 알아차려야 한다. 기능이 다른 컨트롤과 버튼의 시각적인 중요도는 달라야 한다.
선택 컨트롤의 스타일이 버튼과 동일해서는 안된다.경고창 Alert에서 기본 버튼은 사용하지 않는다.
경고창 Alert에서 기본 버튼 Primary Button보다는 텍스트 버튼을 사용한다. 앞서 버튼의 시각적 계층구조에서 언급한 데로 기본 버튼은 중요도가 높거나 전환과 관련성이 있는 액션에 만 사용한다.
경고창에서 기본 버튼을 사용할 필요가 없다.위의 예에서 레이블도 문제 있은데 사용자의 의도와 관련된 용어를 사용해야 한다. <확인>은 사용자가 수행하려는 작업이 아니다. <로그아웃>이 더 정확하다. 또한 닫기 버튼 < X > 도 불필요하다.
버튼의 상태 States
버튼의 상태 State는 UI 구성요소의 상호작용을 사용자에게 전달하기 위한 시각적인 표현이다. 버튼은 사용자의 상호작용에 따라 시각적인 형태가 변경된다. 버튼은 크게 활성화 Enabled 상태와 비활성화 Disabled 상태 두 가지로 나뉠 수 있다. 활성화 상태일 때 버튼은 일반적인 다른 컨트롤과 마찬가지로 사용자의 행동에 따라 상태가 변경된다. 버튼의 상태는 물리적인 버튼(TV 리모컨, 오디오 등 가전제품의 버튼)과 동일한 경험을 화면에서 재현한다. 각 상태의 명칭은 iOS, 안드로이드 , 마이크로 소프트, 그 외 디자인 시스템에서 조금씩 다르게 사용한다. 여기서는 보편적으로 사용되는 명칭을 사용한다.
1. 디볼트 Default (Enabled)
버튼의 활성화 상태에서 사용자가 터치하기 전 상태이다. 이 상태는 버튼은 콘텐츠와 구분되게 디자인되어 사용자에게 상호작용이 가능함을 알린다.
2. 호버 Hover
사용자가 버튼 위에 마우스나 손가락을 올렸을 때 상태 변화를 통해 상호작용이 가능함을 알린다. 버튼의 보더 또는 라인이 두꺼워지거나 색상의 명도가 높아져 상태변화를 알린다.
3. 포커스 Focus
사용자가 버튼을 탭 하기 전 준비단계로 보면 된다. 이 상태는 키보드나 기타 방향 입력 장치를 통한 탐색이 가능하게 한다.
4. 프레스드 Pressed
사용자가 액션 실행을 위해 버튼을 탭 하여 눌렀을 때의 상태다. 물리적인 버튼을 누를 때 돌출된 버튼이 안으로 들어가는 느낌을 시각적으로 표현하기 위해 디볼트 상태의 버튼보다 어두운 색을 사용한다.
5. 비활성화 Disabled
비활성화 상태이다. 사용자가 작업을 완료하기 전에 버튼을 텝할 수 없는 상태이다.사용자에게 시각적으로 텝이 불가능함을 알 수 있게 한다.
6. 프로그래스 Progress (Optional)
버튼을 눌렀을 때 버튼 내에 진행률 표시기 (Circular indicator or ProgressRing ) 넣어 진행상태를 알리기 위해 사용한다. 이 상태는 [다운로드], [저장]과 같이 전환과 연관이 높은 버튼일 경우 사용한다.
6. 완료 Result (Optional)
버튼을 눌러서 실행된 액션이 완료됐을 경우 사용한다. 일반적으로 버튼을 탭 하면 화면이 변경되는데 파일 다운로드 같은 경우는 화면 이동이 없다. 이때 작업이 완료됐음을 버튼을 통해 알린다. 일반적인 버튼이 아니라 특수한 경우에만 마이크로 인터렉션 선택적으로 적용한다. 이 상태는 다시 실행되지 않는다.
버튼의 크기
모바일은 터치 스크린 기반이다. 데스크톱의 마우스 커서에 비해서 터치 기반에서 손가락은 정확성이 떨어진다. 버튼의 크기와 모양은 사용자 상호 작용 가능성을 높이거나 낮출 수 있다. 버튼의 크기가 클수록 정확도는 높아진다. 버튼의 적정한 크기를 지정해서 상호작용을 원활하게 해야 한다. 지나치게 큰 버튼은 화면의 크기의 제약이 큰 모바일에서는 공간의 낭비가 된다. 또한 유치하고 세련되지 않은 경험을 줄 수 있다.
다양한 플랫폼이 최소한의 터치 타깃에 대한 지침을 제공한다. MIT Touch Lab 연구의 결과에 따르면 핑거 패드의 평균 길이는 10-14mm이며 손가락 끝은 8-10mm이며 10mm x 10mm가 최소 터치 대상 크기로 적합하다고 주장한다. 대부분의 사용자는 10mm x 10mm 터치 대상을 편안하고 안정적으로 터치할 수 있다고 한다.
반면에 조시 클라크는 “터치를 위한 디자인하기” 에서 마이크로소프트의 연구결과(fn)를 인용하며 “디바이스의 종류와 관계없이 터치 타깃은 7mm 혹은 약 0.25인치가 적당합니다.”라고 말한다. - Windows 8 Touch Guidance는 7x7mm를 최소 크기로 권장한다. - 정확성이 요구되는 액션에는 9mm를 권장한다. “잘못 터치할 경우 액션을 취소하기 위해 제스처가 두 번 이상 필요하거나, 5초 이상의 시간이 걸리거나, 혹은 크게 맥락이 바뀌어야 하는 경우” 도 9mm를 권장한다. 7mm 기반으로 조시 클라크는 탭 타깃의 최소 크기는 44(Pixel, Point, DP)로 제안한다. 160 dpi에서 44px 은 0.275인치로 7mm 와 같다고 한다.
이를 기반으로 터치 타깃의 실질적인 최소 크기는 44 x 30 혹은 30 x 44로 권장한다. iOS의 버튼과 툴바, 내비게이션 바, 테이블 셀(리스트)의 기본 높이는 44px이다.
기본 버튼의 크기를 40px이나 44px 또는 36px로 결정했으면 작은 크기와 큰 크기를 설정할 수 있다.- 웹은 Pixel를, iOS는 포인트 point (이하 pt)를, 안드로이드는 DIP (density-independent pixels ) 혹은 dp(이하 dp)를 사용한다. px, pt, dp, 이 세 가지 단위는 이름만 다를 뿐 실제 크기는 같다. - 터치를 위한 디자인하기. P82 - 따라서 이하 px로 단위를 통일한다
애플은 iPhone 휴먼 인터페이스 가이드라인에서 44 px (레티나 디스플레이의 경우 88 px) 또는 약 7mm의 최소 대상 크기를 권장한다. 애플은 44픽셀을 기본으로 30픽셀과 50픽셀 3가지 버튼 크기를 사용한다. 안드로이드는 36px (레티나 디스플레이의 경우 72 px)을 기준으로 36 px과 48 px, 56 px (플로팅 버튼) 3가지 크기를 사용한다.
플랫폼별 버튼 사이즈 예시마이크로소프트는 30 px , 40 px , 50 px를 권장한다.
윈도우의 버튼 크기와 패딩버튼의 위치와 순서 Location and Order
버튼의 위치와 순서는 매우 중요하다. 버튼은 사용자가 필요할 때 다른 요소들 사이에서 쉽게 찾을 수 있어야 한다. 버튼 디자인은 정확하고 명료해야 한다. 훑어보기만 해도 작업의 우선순위를 알 수 있어야 한다. 가장 중요한 액션을 나타내는 기본 버튼은 한 화면에 하나만 권장한다. 중요한 버튼- 기본 버튼, 긍정적인 버튼 - 은 화면의 상단보다 하단을 왼쪽보다 오른쪽에 있어야 한다.
엄지 존 thumb zone
버튼의 위치와 순서를 이야기하기 전에 엄지 손가락 존 Thumb zone에 대해 이해해야 한다. 2013년 스티븐 후버 Steven Hoober는 스마트폰을 사용하고 있는 1,300명이 넘는 사람들을 관찰했다(http://bkaprt.com/dft/01-03/) 한 손 만으로만 사용하는 경우가 49%이고, 한 손으로 핸드폰을 받치고 다른 손으로 화면을 탭 하는 경우가 36%, 나머지 15%는 마치 두 손으로 핸드폰을 감 싸들고 양손의 엄지손가락을 사용했다. 스마트 폰의 전체 상호작용 중 75%를 엄지손가락이 도맡고 있다. 패블릿은 60%가 엄지손가락을 통해 상호작용한다.
스마트폰의 사용자 대부분은 한 손으로 사용하고 엄지 손가락으로 화면을 터치한다. 엄지손가락을 사용 시 아래 그림과 같은 엄지 존 thumb zone 이 형성된다. 화면 상단은 엄지 손가락이 닿기 어렵고 하단은 엄지손가락이 편하게 닿을 수 있다. 모바일 UI는 이를 기준으로 내비게이션(탭 바)과 툴바 같은 주요 UI 요소는 화면의 하단에 배치하고 콘텐츠는 화면의 상단에 레이아웃 한다. 모바일 경험의 주요 컨트롤과 내비게이션 요소는 "엄지 영역"- 엄지 손가락으로 쉽게 터치 가능한 화면 영역에 있어야 한다.
모바일 경험의 주요 컨트롤과 요소는 "엄지 영역"- 엄지 손가락으로 쉽게 터치 가능한 화면 영역에 있어야 한다.엄지 존에 따른 버튼의 위치
데스크톱 경험을 위해 디자인된 인터페이스는 화면 상단에 주요 메뉴 항목을 배치하는 설계 규칙을 따른다. (
https://uxmag.com/articles/excerpt-from-the-new-book-the-mobile-frontier
). 대부분의 웹사이트는 GNB라 부르는 내비게이션은 상단에 있고, 스케치, 포토샵이나 액셀 같은 프로그램도 주요 메뉴는 상단에 있다. 모바일은 데스크톱과 반대로 하단에 있어야 한다. 모바일 경험의 주요 UI 요소는 "엄지 존”- 엄지 손가락만으로 이동 가능한 화면 영역에 있어야 한다. 버튼의 위치는 엄지 존을 고려해서 배치해야 한다. 화면의 가장 중요한 버튼은 엄지 손가락으로 편하게 터치할 수 있는 화면의 하단 중앙이 가장 좋다. 인스타그램과 비헨스 앱이 좋은 예이다. 대부분의 커머스 앱이 CTA버튼을 화면의 하단에 <구매하기>, <장바구니 담기> 버튼을 배치하여 엄지 손가락으로 편하게 터치할 수 있도록 디자인한다.
모든 버튼을 화면이 하단에 배치할 필요는 없다. 파괴적인 또는 부정적인 액션 버튼을 찾기 어렵게 디자인하거나 엄지 손가락이 닿기 어려운 화면 상단에 배치한다. 사용자가 실수로 잘못 누르거나 나중에 후회할 오류 가능성을 줄일 수 있다.
브런치와 미디엄 비교.모바일 경험의 주요 UI 요소는 엄지 손가락으로 터치하기 쉬운 화면 영역에 있어야 한다.버튼 레이블
버튼의 레이블은 버튼의 요소 중에 가장 중요하다. 텍스트 버튼에서 모바일에서 레이블은 사용자가 터치할 때 발생할 동작 action을 표현하는 유일한 요소이다. <마이크로 인터렉션 - 디테일에 강한 인터랙션 디자인> “레이블은 그 자체로 사용자 인터페이스라고 할 수 있다. 레이블의 목적은 기능을 명확하게 하는 데 있다.”
버튼의 레이블은 명확하고 예측 가능해야 한다. 사용자는 버튼을 탭 할 때 어떤 일이 발생하는지 명확하게 예상할 수 있어야 한다. 사용자의 의도와 관련된 설명적인 언어를 버튼 레이블에 사용해야 한다. 동작 action과 관련이 없으며 사용자의 의도와 관련이 없는 “OK” , “예” ,”아니오” 같은 일반적인 언어를 사용하면 안 된다. 사용자의 의도와 관련된 설명적인 언어를 사용해야 한다. 버튼은 항상 행동을 유도하는 강력한 동사와 함께 이어져야 한다. 사용자에게 충분한 콘텍스트를 제공하려면 “저장”, “닫기”, “취소” 또는 “확인”과 같은 일반적인 작업을 제외하고 버튼에 <명사> + <동사> 형식을 사용해야 한다.
버튼 레이블은 사용자가 페이지와 상호 작용할 때 페이지에서 어떤 작업이 수행되는지 알려 준다. 버튼 레이블은 모호하지 않고 간결해야 하며 버튼을 터치하면 어떤 작업이 발생하는지 사용자에게 명확하게 알려야 한다.
버튼에 사용한 색을 콘텐츠에 적용하면 사용자는 혼란스럽다.
버튼에 사용한 색은 상호작용이 가능함을 알린다. 색상은 누르는 행위가 가능하고 실행됨을 알리는 가장 중요한 요소이다. 콘텐츠에도 버튼에 사용한 색을 사용한다면 사용자는 콘텐츠(텍스트나 이미지, 동영상 여기서는 텍스트) 도 누르려고 할 것이다. 그리고 아무런 반응이 없음을 알 것이다. 같은 색을 사용했는데 어떤 요소는 탭이 가능하고 어떤 요소는 탭이 가능한지 사용자는 알지 못하게 된다.
배경색 마저 버튼에 사용한 색을 사용하면 사용자는 무엇이 버튼과 같은 컨트롤인지 생각해야 한다.버튼의 색은 접근성을 고려하여 디자인한다.
버튼의 색은 가독성을 위해 배경과 대비를 이루어야 한다. 아래 <적용> 버튼은 하늘색에 흰색 텍스트 레이블을 사용해서 디자인됐다. 색 대비는 1.99이다. 접근성 기준으로 색 대비는 최소 3.0이고 최대 4.5 이상이어야 한다. 버튼의 컨테이너 색을 하늘색으로 쓰려면 텍스트 레이블의 색은 검은색으로 해 색 대비를 높여야 한다.
웹 접근성 색 대비를 체크는 아래 사이트를 참조하면 좋다.
https://vmware.github.io/clarity/documentation/v0.12/buttons
http://bkaprt.com/resources/designing-for-touch/Windows%208%20Touch%20Guidance.pdf
https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
책
터치를 위한 디자인하기
조시 클라크 (지은이) 웹 액츄얼리 코리아 2017-07-10
마이크로 인터랙션
디테일에 강한 인터랙션 디자인
댄 새퍼 (지은이), 정승녕 (옮긴이) 인사이트 2015-05-06
About Face 4 인터랙션 디자인의 본질
목표 지향 디자인부터 스마트기기 환경까지, 시대를 초월하는 UX 방법론
앨런 쿠퍼, 로버트 라이만, 데이비드 크로닌, 크리스토퍼 노셀 (지은이), 최윤석, 고태호, 유지선, 김나영 (옮긴이) 에이콘출판 2015-06-30
