컨테이너 (버튼 디자인 - UI component)
01. Container - 컨테이너
1. 다른 컴포넌트를 포함할 수 있는 GUI 컴포넌트
2. 추상 클래스로서 다른 컴포넌트를 포함할 수 있는 기능을 가진 컴포넌트들의 상위 클래스
3. 최상위 컨테이너는 다른 컨테이너에 속하지 않고 독립적으로 존재 가능한 컨테이너로 모든 컴포넌트는 컨테이너에 포함되어야 출력이 가능하다.
4. 컨테이너는 자신의 영역 내부에 다른 컴포넌트를 포함시키고 관리하는 역할을 한다.
5. 컨테이너가 다른 컨테이너를 포함할 수 있다.
6. 컴포넌트는 컨테이너에 부착시키지 않으면 독자적으로 화면에 출력될 수가 없고 반드시 컨테이너에 부착을 시켜야만 화면에 출력이 된다.
02. Component - 컴포넌트
1. 컨테이너에 포함되어야 화면에 출력될 수 있는 GUI 객체
2. 다른 컴포넌트를 포함할 수 없는 순수 컴포넌트
3. 컴포넌트는 앱의 구성단위이며, 컴포넌트 여러 개를 조합하여 하나의 앱을 만든다.
03. 버튼 디자인 - UI component
올바른 인터렉션 디자인을 위해서 우리는 오늘날 모든 디지털 제품에 매우 많이 사용되는 UI component(컴포넌트) 요소의 직접적인 전임자인 물리적 push buttons(누르는 버튼)에 대한 기원과 변화의 과정을 살펴볼 필요가 있다.
사용자가 기기, 자동차 또는 시스템의 작동 원리를 이해하지 못해도 조작이 가능하다는 측면에서 버튼은 놀랍다. power buttons(전원 버튼)에서 Rachel Plotnick(레이철 플로트 닉)은 오늘날의 push buttons(누르는 버튼) 문화를 밝혀냈고, 버튼 푸싱이 디지털 명령의 수단이 된 방법을 정의했다.
"버튼을 누르면, 알아서 사진을 찍어줍니다." - Kodak 카메라는 눈길을 끄는 문구를 직접적으로 잠재 소비자에게 어필했다.
버튼의 기원 - 옷의 단추에서 시작되어 물리적인 푸스 버튼, 터치 스크린 상의 버튼으로 전환되었다.코닥의 이 문구는 사용자를 매료시키는데 오늘날에도 유효하다. 오늘날 가전제품 혹은 다양한 장치들이 터치스크린 안에서 컨트롤이 가능하도록 바뀌었음에도 물리적으로 누르는 버튼(push buttons)은 사라지지 않을 것이다. 오히려 물리적인 버튼(push buttons)에서 형성된 행동 습관이 버튼 디자인이 얼마나 직관적으로 사용하기 쉬운지 알게 될 것이다.
버튼 vs 링크
버튼은 사용자가 수행할 수 있는 작업을 전달한다. 보통 대화상자(Dialogs), 양식(Forms), 툴바(Toolbars) 등에 위치하며 버튼과 링크의 차이는 아래와 같다.
버튼은 '제출', '병합', '새로 만들기', '업로드' 등과 같은 작업을 수행할 때 사용된다.
링크는 '모두 보기' 페이지, 'Roger Wright(로저 라이트(미국 피아노 연주자))' 등 다른 장소로 이동할 때 사용된다.
추가적으로 링크는 새로운 창이 열리거나 페이지가 완전히 전환되는 것이고, 버튼은 페이지 전환이 일어날 수도 있지만, 양식 제출에 대한 완료, 실패 Alerts, 모달이 띄어질 때 사용된다.
버튼 상태(States)는 사용자에게 현재 상태를 전달한다.
버튼에 대한 올바른 인터렉션 및 스타일을 만드는 것은 디자인 프로세스의 가장 중요한 부분 중 하나이다. 각 상태는 다른 상태 및 주변 레이아웃과 구별되는 명확한 어포던스가 있어야 하지만 구성 요소를 크게 변경하거나 시각적인 방해 요소를 발생시켜서는 안 된다.
*어포던스(Affordance)
1970년대 제임스 J 깁슨에 의해 최초로 정의된 어포던스는 물체와 개인 사이에 가능한 액션이다. 손잡이가 고전적으로 사용되는 예제 중 하나이다. 손잡이는 돌리는(twisting) 동작을 유도한다.
Normal — 버튼이 활성화되어 있음을 알린다.
Focus — 키보드 또는 기타 입력 방법을 사용하여 사용자가 요소를 강조 표시했다는 것을 알려준다.
Hover — PC의 경우 사용자가 버튼 위에 커서를 놓았을 때 알려준다(반응한다).
Mobile의 경우 버튼을 클릭해야지만 활성화된다.
Active(활성) — 사용자가 버튼을 탭 했을 때 나타난다.
Progress(진행률) / Loading(로드 중) — 작업이 즉시 수행되지 않고 구성 요소가 작업을 완료하는 중임을 알릴 때 사용된다.
Disabled(비활성화) — 구성 요소가 현재 비활성화되어 있지만 나중에 활성화될 수 있음을 나타낸다.
버튼은 다양한 생상, 모양 및 크기로 제공된다.
가장 일반적인 것은 둥근 모서리가 있는 직사각형 버튼으로, 쉽게 식별할 수 있고 입력(input) 필드 옆에 잘 어울린다. 버튼에 적합한 스타일을 선택하는 것은 목적, 플랫폼 및 지침에 따라 달라진다. 다음은 일반적으로 사용되는 버튼 스타일이다.
버튼 스타일은 동작의 중요성을 전달한다.
버튼 스타일은 동작의 중요도를 구별하기 위해 사용되며 사용자가 다양한 항목을 선택할 수 있도록 안내하기도 한다. 일반적으로 눈에 띄는 단일 버튼 (이 스타일을 “primary"라고 부른다.)과 여러 개의 중간단계 "scondary", 및 더 낮은 단계인 "tertiary"을 사용한다.
기본값(default)이 없는 버튼도 있다.
가장 일반적으로 선택되는 버튼을 "default"(기본(primary) 스타일)으로 지정하고 사용자가 집중할 수 있는 상태로 만들어야 한다. 이를 통해 대부분의 사용자는 작업을 더 빨리 완료할 수 있으며 올바른 방향으로 안내할 수 있다.
사용자를 생각하게 만들지 마
'Don't Make Me Think' (사용자를 생각하게 하지 마세요.)는 사용성 엔지니어 Steve Krug의 책 제목이다. 이 책의 요점 중 하나는 퍼즐이나 미로처럼 복잡하게 만들지 않고 사용자들에게 명백한 인터페이스를 만드는 것이 얼마나 중요한 것인지를 알려준다. 사용자는 수년간 다양한 기기와 제품을 사용함으로써 버튼이 어떻게 보이고 어떤 액션이 일어날지에 대한 기대를 형성해왔다. 그렇기 때문에 '표준'으로 간주되는 스타일에서 크게 벗어나면 사용자들은 혼란이 생길 수 있다.
인터렉티브 한 요소와 그렇지 않은 요소에 동일한 색상을 사용하지 마세요. 만약 이 두 요소가 같은 색이라면 사용자는 어디를 눌러야 하는지 알 수 없다.
*인터랙티브 요소(Interactive Elements)
IE (Interactive Elements)는 시각적으로 풍부하게 만들어 줄 수 있는 프리미엄 기능이다. 이러한 요소는 콘텐츠를 구성하고, 웹 사이트를 더욱 매력적으로 만들며, 사용자의 경험을 향상하는데 도움이 될 수 있다.
일관성은 속도와 정확성을 향상한다.
"일관성은 가장 중요한 사용성 원칙 중 하나이다. 항상 동일하게 작동할 때 사용자는 어떤 일이 일어날지에 대한 걱정을 할 필요가 없다." — Jakob Nielsen
일관성은 속도와 정확성을 향상하며 오류를 방지하며 사용자가 통제력을 느끼고 목표를 달성할 수 있도록 예측 가능성을 높여준다. 기본 스타일(primary), 두 번째(secondary), 세 번째(tertiary) 스타일을 작업할 때 색상, 모양 등과 같은 몇 가지 공통 요소를 찾으려고 노력해야 한다. 디자인 시스템 내에서 일관성을 유지할 뿐만 아니라 설계할 플랫폼에 대해서도 일관성을 유지하도록 의식해야 한다.
안정적인 상호 작용을 위해 버튼을 충분히 크게 만들어야 한다.
버튼을 클릭하는 것은 간단한 작업이어야 하며 사용자가 버튼을 성공적으로 클릭하지 못하거나 인접한 요소를 클릭한다면 부정적인 경험과 시간 손실로 이어질 것이다.
대부분의 플랫폼에서 터치 영역을 최소 48 x 48dp로 만드는 것을 권장하며, 이 크기는 화면 크기와 상관없이 물리적 크기가 약 9mm로 나타난다. 터치 스크린에서 클릭할 수 있는 요소의 권장 크기는 최소 7-10mm이다.
아이콘의 경우 터치 대상이 요소의 시각적 범위 이상으로 확장되었는지 확인하여야 한다.(아이콘의 경우 터치할 수 있는 영역을 아이콘에 맞추지 말고 여백을 부여하여 사용자가 클릭하기 쉽게 하여야 한다.) 이는 모바일 또는 태블릿에만 적용되는 것이 아니라 웹 상의 포인터 장치에 대해서도 동일한 크기 사용이 적용된다.
접근성을 위한 디자인
이러한 권장 사항은 모든 구성 요소에 적용되어야 한다. 버튼을 클릭할 수 있는 충분한 여백은 접근성에 영향을 미치는 요인 중 하나이다. 그 외에 글꼴 크기, 색깔, 대조가 있다. 접근성에 대한 설계가 올바르게 수행되고 있는 확인할 수 있는 도구들이 많이 있다.
디자이너는 버튼이 스크린 리더에서 작동되는지 확인하기 위해 개발팀과 긴밀하게 협력해야 한다.
*스크린 리더 (Screen Reader)
컴퓨터의 화면 낭독 소프트웨어이다. PC형 스크린 리더는 전맹 시각장애인이 주로 사용하며, 웹 스크린 리더는 저시력 시각장애인과 난독증과 같은 학습장애, 인지장애인과 노인, 다문화가정 등의 웹 접근성을 지원하기 위해 사용된다. 최근 애플의 아이폰에 적용된 보이스오버와 같은 스마트 기기에 내장된 모바일 스크린 리더도 다수 활용되고 있다.
제스처는 상당히 많은 곳에서 적용되어 있다.
제스처는 사용자가 터치를 사용하여 애플리케이션과 상호 작용할 수 있도록 도와준다. 작업을 수행하는 또 다른 방법(스와이프, 더블 클릭)으로 터치를 사용하면 시간을 절약하고 촉각을 제어할 수 있다.
스와이프(swipe), 두 번 탭 하여 좋아요를 누르거나 길게 누르는 등 일부 제스처는 상황에 맞는 동작을 유도하고 있지만 일반 사용자에게는 여전히 명확하지 않다. 그렇기 때문에 이러한 제스처는 고급 사용자(스와이프, 더블클릭 등의 제스처에 대한 이해가 높은 사용자)를 위한 대체 요소로 사용하는 것이 좋다.
좋은 버튼 레이블은 사용자가 작업을 수행할 수 있도록 유도한다.
버튼의 모양만큼이나 중요한 것이 버튼 레이블이다. 잘못된 레이블 사용은 사용자에게 혼란, 시간 손실 및 큰 실수를 발생시킬 수 있다.
좋은 버튼 레이블은 사용자가 행동을 취할 수 있도록 유도한다. 동사를 사용하는 것이 가장 좋으며, 버튼이 실제로 수행하는 작업에 대하여 이름으로 지정하는 것이 좋다. 사용자에게 “장바구니에 추가하시겠습니까?” 또는 “주문 확인하시겠습니까?”라고 묻는 것과 같은 것이 좋다.
예, 아니오 또는 제출하기와 같이 일반적인 레이블은 사용하지 않는 것이 좋다.
*버튼 레이블 (Button Label)
label 텍스트는 텍스트 입력과 시각적으로 관련이 있을 뿐만 아니라 프로그래밍적으로도 관련이 있다.
예를 들어 위의 예제에서 Edit 버튼이 있다. Edit 버튼의 구성요소를 살펴보면 Edit라는 Button Label 이 있고, 연필 모양의 아이콘 그리고 outline, shadow로 이뤄져 있다.
확인 / 취소 또는 취소 / 확인? 어느 쪽에 있든 괜찮다.
둘 중에 어떤 것을 먼저 배치하든 디자이너의 선호도에 따라 배치해도 괜찮다.
확인 / 취소
'확인'이 먼저 배치되어 있다면 자연스럽게 읽힌다. 사용자가 '확인'을 선택할 것임을 알고 있다면 시간 절약에 도움이 된다.
Windows가 이러한 방식을 사용한다.
취소 / 확인
'확인'이 마지막에 배치되어 있다면 흐름이 향상된다. 몇몇의 사람들은 '다음' 버튼이 사용자를 앞으로 움직일 것이라고 주장할 수도 있다. 하지만 '확이' 버튼은 마지막으로 모든 내용을 검토하고, 사용자가 다음으로 넘어가기 전에 모든 옵션을 평가함으로써 실수를 피하고 결정을 서두르는데 도움을 준다.
Apple이 이러한 방식을 사용한다.
어느 쪽을 선택하든 합리적인 근거를 가지고 있다면 무엇을 선택하던 사용성에 문제가 발생하지는 않을 것이다. 저는 개인적으로 대화창에 확인 버튼을 마지막에 넣겠을 선호 한다. (아마도 내가 Mac 사용자 이기 때문일 것이다.)
비활성화 버튼은 우릴 난처하게 한다.
모두가 이런 상황을 경험했을 것이다. 몇 초나 몇 분동 안 비활성화된 화면에 갇혀 왜 이렇게 되었는지 활성화되게 하려면 필요한 작업은 무엇인지 파악해야 했다. 비활성화는 현재 구성요소가 동작할 수 없다는 것을 알리기 위해 사용되지만 나중에 활성화될 수 있음을 나타낸다.
비활성화된 버튼이 사용되는 이유는 버튼을 원래 위치에서 버튼이 없다가 나중에 생겨나면 사용자가 혼동을 일으킬 수 있기 때문이다.
가능하면 비활성화 버튼을 피하는 것이 좋다. 항상 활성화된 상태로 두는 것이 좋으며, 사용자가 필요한 정보를 입력하지 않은 경우 비어있는 필드를 강조하거나 알림을 표시하는 것이 더 효과적이다.
