1. 아티클 원문
모바일 UI 디자인 기본요소 - 버튼
아티클 원문
2. 아티클 요약
Button (버튼)
: 사용자가 데이터를 전송하거나 기능을 실행하도록 하는 명령 컨트롤이다.
- 버튼은 어포던스가 있어야한다 :
버튼은 다른 컨트롤과 달리 누르는 행위를 유발하는 특징이 있다. 버튼을 시각적으로 강조하여 누르는 행위를 유도해야한다. (최근엔 컬러와 레이블과 정교한 상호작용 디자인으로 버튼의 형태가 변경됨) - 버튼은 실제 세계의 아날로그 기기의 조작 버튼을 메타포로 적용됐다. :
메타포 : 언어적 비유의 한 형태 현 현상을 직접적으로 다른 현상에 빗대는 방식
-> 실제 세계 아날로그 버튼과 유사한 UI요소로 버튼을 만든다
아이콘과 폴더 구조 같은 UI 요소 처럼 사용자가 실생활에서 경험한 물리적 버튼을 눌러 기기를 조작해 본 경험을 기반으로 모바일 화면의 버튼을 탭 한다. 모든 과정은 여러번 반복적으로 경험을 했기때문에 무의식적,직관적으로 버튼을 탭 한다.
- 버튼은 전환율과 직접적으로 연관성이 있다. :
전환 : 마케팅 용어로 앱,웹을 방문한 사용자가
구매하기,다운로드,구독하기등 매출과 관련성이 높은 행위를 함을 의미한다.
사용자가 버튼을 누르지 않는다면 전환은 이루어 지지 않는다 전환을 유도하는 페이지에서 사용되는 버튼(CTA : Call to action button)을 설득력 있는 버튼으로 디자인 하는 것이 좋다.
버튼의 구조
1. 버튼 레이블
버튼 레이블은 버튼을 누를 때 실행되는 명령에 대해 나타낸다. 사용자가 레이블만 보고 무엇이 실행될지 알아야한다. 레이블은 접근성을 고려하여 컨테이너 색과 대비가 높은색을 선택해 사용한다. 컨테이너가 없을 경우 시스템에서 액션에 사용하기 위해 선정된 색을 사용함.
2. 컨테이너
버튼 레이블을 감싸는 직사각형의 시각적 요소. 색이 채워진 직사각형은 기기의 버튼 형태를 연상시킨다. 선정된 색만을 사용하여 컨테이너를 채우며 특별한경우가 아니라면 한 가지 색만 사용한다.
3. 아이콘
아이콘은 그 자체로 레이블이 될 수 있다. 아이콘 단독으로 사용하면 아이콘 버튼이 된다. 버튼에 더많은 의미를 전달할 때 아이콘을 사용한다.
4. 아웃라인
버튼의 컨테이너에 색을 채우지 않고 아웃라인에만 색을 사용한다. 고스트버튼(액션에 사용되는 색을 사용, 중요도가 떨어질 경우 회색 사용), 아웃라인버튼이 있다.
5. 라운드
버튼 컨테이너 모서리 부분에 라운드를 줌을 의미. 기능적 의미는 없으나 시각적인 측면에서 디자이너에게 중요 아이콘, 색과 함께 스타일을 결정하는 요소
6. 그림자
버튼의 어포던스를 높일 수 있는 그래픽 요소. 주로 컨테이너 버튼에 또는 CTA버튼에 사용
버튼의 유형 또는 스타일
버튼은 파란 직사각형에 하얀색 텍스트 레이블에 채워진 형태가 일반적
- 솔리드 버튼
가장 일반적인 버튼의 형태. 컨테이너의 모서리는 라운드가 있는 경우가 많으며, 색으로 채워서 다른 버튼보다 인지가 잘됨. - 고스트 버튼
하얀색 배경에 버튼 레이블과 아웃라인으로 된 버튼. 컨테이너 버튼보다 중요도가 떨어지는 액션에 사용 - 아웃라인 버튼
텍스트 레이블을 아웃라인으로 감싼구조. - 밝은 소리드 버튼
솔리드 버튼과 같이 레이블을 컨테이너가 감싸는 형태지만 밝은 회색 배경에 액션 색 텍스트로 되어있음. - 텍스트 버튼
텍스트 버튼은 컨테이너나 아웃라인 없이 텍스트 레이블만 있는 버튼 (하이퍼링크와 같아 보임)
주로 내비게이션에 사용할 수 있음 - 아이콘 버튼
버튼 레이블 없이 아이콘만 사용된 버튼. 툴 바와 내비게이션 바(앱 바)에서 사용됨 - 파괴적인 버튼
영구적으로 데이터를 지우는 작업에 사용한다. 실행하려는 액션이 되돌릴 수 없는 액션임을 사용자에게 다시 한번 상기 시켜 오류를 줄임. (삭제 버튼)
사용자가 삭제와 같이 데이터를 지우는 작업을 수행 할경우 파괴적인 버튼 Destructive Button을 사용한다.
오른쪽 사진처럼 사용자는 모바일에서 실수할 가능성이 높기 때문에 데이터를 삭제하는 작업을 할때 한번더 생각할 수 있도록 붉은색 버튼을 사용한다. 레이블은 <확인>과 같은 중립적 표현보다 <삭제>
<삭제하기>와 같은 직접적인 표현을 사용한다.
버튼의 시각적 계층구조 Hierarchy
버튼의 시각적인 중요도를 만들 수 있음
목적 : 오류 가능성을 줄이고, 사용자의 성공적인 작업 수행에 도움을 주기 위해서
예) 중요도 : 장바구니에 추가 > 위시리스트에 추가
버튼 모두 강조 하게된다면 시각적인 잡음이 많아진다.
기본버튼 primary button
가장 중요한 액션에 사용된다. 솔리드 버튼을 사용함.
구매하기,공유하기,송금하기버튼이 이에 해당한다.
특히 브랜드 색상을 사용해 가장 눈에 띄게 디자인 해야한다.
한 화면에 여러 개가 있으면 콘텐츠의 집중도가 떨어지고 읽기를 방해한다.
보조 버튼 Secondary Button
버튼중 가장 많이 사용하는 버튼 (Default 버튼 이라고도 함)
기본버튼과 같이 사용할 때 사용될 수 있다. (기본 보다 훨씬 덜 중요도 가짐)
고스트 버튼이나 아웃라인버튼 또는 밝은 솔리드 버튼을 사용하며 2개가 될 수 있다.
부가 버튼
한 화면에 많은 버튼을 배치해야 할 경우 사용
텍스트 버튼을 사용함 ( 내비게이션이나 Alert, 카드에 사용)
경고창 Alert에서 기본 버튼은 사용하지 않는다.
Quanternary Button
텍스트 버튼에서 볼드체가 아니라 레귤러 체를 사용
진한 회색을 사용함
선택 컨트롤과 버튼의 시각적인 계층 구조는 명확해야한다.
버튼의 상태 States
버튼의 상태 State는 사용자의 상호작용에 따라 시각적인 형태가 변경되는데 크게 활성화 Enabled 상태와 비활성화 Disabled 상태 두 가지로 나뉠 수 있다.
1. 디폴트 Default (Enabled)
버튼 활성화 상태에서 사용자가 터치하기전
2. 호버 Hover
사용자가 버튼 위에 마우스나 손가락을 올렸을 때 상태 변화, 버튼의 보더 또는 라인이 두꺼워지거나 색상의 명도가 높아져 상태 변화를 알림
3. 포커스 Focus
사용자가 버튼을 탭 하기 전 준비단계, 기타 방향 입력 장치를 통한 탐색이 가능
4. 프레스드 Pressed
사용자가 액션 실행을 위해 버튼을 탭 하여 눌렀을 때의 상태, 돌출된 버튼이 안으로 들어가는 느낌을 시각적으로 표현하기 위해서 디폴트 버튼보다 어두운색 사용
5. 비활성화 Disabled
비활성화 상태, 사용자가 작업을 완료하기 전에 버튼을 탭할 수 없는 상태
6. 프로그래스 Progress (Optional)
버튼을 눌렀을 때 버튼 내에 진행률 표시기를 넣어 진행상태를 알리기 위해 사용 다운로드,지정과 같이 전환과 연관 높은 버튼일 경우 사용
7. 완료 Result (Optional)
버튼을 눌러서 실행된 액션이 완료됐을 경우 사용. 일반적으로 버튼을 탭 하면 화면이 변경되는데 파일 다운로드는 화면이동이 없음. 이때 작입이 완료됐음을 버튼을 통해 알린다.
버튼의 크기
모바일은 터치 스크린 기반이다. 마우스 커서에 비해 손가락은 매우 커서 정확성이 떨어진다.
버튼의 크기가 클 수록 정확도는 높아진다. 하지만 지나치게 큰 버튼은 화면의 크기 제약에 있어서 공간낭비가 된다. 그렇기에 적절한 크기의 버튼을 지정해서 상호작용을 해야한다.
10mm 10mm 크기가 터치 대상으로 가장 적절하다. ( 가장 편안하고 안정적이다.)
실질적인 터치 타깃의 최소 크기는 44 30 혹은 30 * 44로 권장한다.
IOS의 버튼과 툴바, 내비게이션 바, 테이블 셀의 기본 높이는 44px이다.
애플 iphone : 44px (레티나 디스플레이 88px) 약 7mm 최소 대상 크기
44필셀을 기본으로 30필셀과 50필셀 3가지 버튼 크기를 사용
안드로이드 : 36px(레티나 디스플레이의 경우 72 px) 기준으로 36px, 48px , 56px (플로팅 버튼) 3가지 크기를 사용.
버튼의 위치와 순서
버튼은 사용자가 필요할 때 다른 요소들 사이에서 쉽게 찾을 수 있어야하며, 디자인은 정확하고 명료해야한다. 가장 중요한 액션을 나타내는 기본 버튼은 한 화면에 하나만 권장한다.
엄지존 (thumb zone)
Steven Hoober가 관찰한결과 스마트폰을 한 손으로만 사용하는경우가 49%이며 스마트폰의 전체 상호작용 중 75%를 엄지손가락이 도맡고 있다. 태블릿은 60%가 엄지손가락을 통해 상호작용한다.
= 대부분의 스마트폰 사용자가 엄지 손가락으로 화면을 터치를 한다.
대부분의 데스크톱 경험을 위해 디자인된 인터페이스는 내비게이션은 상단에 있다.
모바일 경험의 주요 UI 요소는 엄지 손가락만으로 이동 가능한 화면 영역에 있어야한다.
그렇기에 화면의 가장 중요한 버튼은 엄지 손가락으로 편하게 터치할 수 있는 화면의 하단 중앙이 가장 좋다.
버튼에 사용한 색을 콘텐츠에 적용하면 사용자는 혼란스럽다.
색상은 누르는 행위가 가능하고 실행됨을 알리는 가장 중요한 요소이다. 콘텐츠와 버튼을 같은색으로 사용한다면 어떤 요소가 탭이 가능한 요소인지 사용자는 알지 못한다.
인사이트
앱 클론을 만들기전에 앱 UI요소를 알아야 할거 같아서 아티클을 선택하게 되었는데 생각보다 버튼의 종류도 엄청많고 세부적인 내용도 많아 요약이 길어졌다. ( 다가져가고 싶은 나의 마음...💖) 버튼의 구조부터 버튼의 크기까지 상세하게 알아보았는데 이 아티클을 잘 골랐다고 느낀점이 작가님께서 상세한설명과 함께 참고할 수 있는 적절한 이미지를 넣어주셔서 아티클을 읽고 요약하면서 이해가 훨씬더 빨랐던거 같다. 지금 당장은 버튼 종류가 이런종류가 있고 어떤상황에 써야한다 글로 읽어 잘 이해가 안되는 부분도 있지만 실제로 앱클론을 해보면서 부딪혀 보면 더 이해가 잘될거 같다.
