UI 요소(component) 2
Form, Dropdown selecter, Checkbox Radio
이전 글에서 UI 요소는 서비스 성격, 현재 콘텐츠에 따라서 '변형'이 이뤄질 수 있다는 점을 밝혔다. 그러나 '변형'은 UI 기본요소보다는 그것들이 모인 복합요소(Complex component) 레벨에서 많이 이뤄지며, 기본요소 단위에서는 원래 쓰임새에 맞는 규칙이 중요하게 작용한다.
1. 입력상자(Form)
입력상자(Form)을 예로 들어보자.
모든 입력상자는 위에 레이블, 아래에 이용안내나 에러메시지(Forgiving Input)가 표시되어져야 한다. 레이블이 아래에 이용안내가 위에 있는 것은 시각적 계층구조(Visual Hierarchy)면에서 바람직하지 못하다. PC에서는 에러메시지를 아래가 아닌 입력상자 오른쪽에 표시하기도 한다.
입력상자는 비워둬서는 안되며, 그 안에 입력예시(Placeholder)를 표기하는 것이 좋다. 선택상자(Dropdown selecter)나 Picker는 비워두는 경우도 종종 있다. 그러나 기본 입력상자는 비워둬서는 안된다. 어떤 입력예시를 넣을지 고민하는 게 이 지점에서 중요한 UX 품질이 된다. (*UX Writer들이 주로 하는 일 중에 하나이다)
입력상자는 크기에 유의해야 한다. 너무 작을 경우에는 입력한 글씨가 잘리며, 입력할 값보다 너무 클 경우에는 입력하는 행위에 불안감을 전달할 수 있다.
입력상자는 색깔을 통해서 현재 상태를 표현해야 한다.
- 회색 테두리에 흰색 채우기 & 회색 글씨: Default
- 회색 테두리에 회색 채우기 & 회색 글씨: Disable
- 파란색 테두리에 흰색 채우기: 활성화 (Hover, Focus, Typing)
- 회색 테두리에 흰새 채우기 & 검은색 글씨: Filled
디지털서비스에서는 'Blue=정보, Green=성공, Red=실패, Yellow=주의' 라는 스테레오타입이 존재한다. 모든 입력상자가 이 4가지 테두리 색깔을 지닐 필요는 없으나, 어떤 입력상자는 이게 필요한 경우가 있다.
- 인증 관련된 입력상자: 휴대폰 인증번호 입력, 비밀번호
- 정합성 체크가 필요한 입력상자: 전화번호, 주민번호, 면허증번호, 카드 번호
- 길이/형식이 제한된 입력상자: 이름 한글자 이상, 아이디 n글자 이상 등..
입력이 입력한 행위에서 그치지 않고 이후 행동으로 바로 이어지거나(예: 검색어 입력 후 검색버튼 탭) 입력 행위 대신에 선택도 가능한 경우에는 그에 해당하는 어포던스를 입력상자 내에 배치한다. 좌측에 배치된 어포던스는 해당 입력상자의 성격을 암시할 뿐 실제 어포던스가 행위로 이이지지는 않기 때문에 입력상자 우측에 화살표 등의 또 다른 어포던스를 표시하거나 입력상자 밖에 버튼을 둔다 (이 경우 입력상자와 버튼은 하나로 묶여 Complex component가 된다)
댓글 작성 등에 흔히 사용되는 텍스트상자는 입력상자와 UX 규칙이 거의 동일하다.
2. 선택상자(Dropdown selecter)
콤보박스, 셀렉트박스 등으로도 불리우는 '선택상자(Dropdown selecter)'는 직접 입력이 아닌, 주어진 값들 중에서 하나를 선택할 때 사용된다. 화살표를 통해서 어포던스를 나타내는데 대부분의 화살표 어포던스는 현재 상태가 아닌, 행위 방향을 나타낸다. 어떤 서비스에서는 화살표가 현재 상태를 나타내서 사용자들을 혼동시키는 경우도 있는데, 해당 서비스는 '무려' UI 기본요소에서부터 UX가 실패한 셈이다.
- 아래로 향한 화살표: 선택 가능하다, 펼칠 수 있다
- 위로 향한 화살표: 선택이 끝났다, 닫을 수 있다
대부분의 선택상자는 두 가지 상태가 존재한다. 아직 열리지 않은 상태, 이미 열린 상태. 물론 한 가지 상태(이미 열린 상태)만 존재하는 경우도 있다. 이는 해당 선택 행위를 의도적으로 강조하고자 할 때 사용되나, 화면상의 다른 요소들에 비해 더 큰 면적을 사용하므로 신중하게 고려될 필요가 있다.
선택상자는 선택 값이 5개 이상일때 사용한다. 5개 이내일 경우에는 그냥 밖에다가 끄집어 놓아도 된다.
3. Checkbox & Radio 버튼
Checkbox & Radio 버튼은 동시에 여러개를 선택(Checkbox)하거나 하나만 선택(Radio 버튼)할 때 사용된다. PC에서는 Form의 Z자 배치가 일반적이지만, 모바일에서는 위에서 아래로 배치해야만 하기 때문에 우측에 여백이 생기던 말건 간에 위에서 아래 방향으로 배치하는 게 마땅하다
Checkbox와 달리 Radio 버튼은 기본 선택을 미리 해놓는 경우도 있다. 마치 매장에 방문했을 때 경험많은 점원이 '저라면 이것을 선택할 것 같은데, 이 중 어떤 것을 원하시나요?'라고 묻는 것과 마찬가지이다. 물론 게 중 아무것도 선택되지 않아 있어도 좋다. 그러나 사용자들이 가장 많이 선택하는 옵션이 기본으로 선택되어 있는 게 UX 면에서 바람직한 경우도 있다. 단지 행위를 줄일 뿐 아니라, 고민의 여지까지 줄여주기 때문이다.
사용자들이 쉽게 조작할 수 있도록 Checkbox & Radio 버튼의 선택 영역을 넓게 잡는 것이 바람직하다. 사용자들은 Checkbox & Radio 버튼이 포함된 행(Row) 전체를 선택 영역으로 생각하기 때문이다. 반면 Toggle 버튼은 기능상 두 가지 상태를 오가는 용도이기 때문에 좁은 영역으로 한정해도 무방하다.
선택지가 너무 많지 않다면 Checkbox & Radio 버튼이 포함되는 항목들을 더 명확하게 비교시키기 위해서 UI Container로 묶는 게 바람직하다. 게슈탈트 원리(근접성, 폐쇄성)를 잘 고려하여 적절한 형태의 UI Container를 활용하길 바란다.
어떤가? UI요소가 별 것 아니라고 여겼는데 생각보다 재밌고 의미진중하지 않은가? 전략이니 신기술이니 개인화/추천이니 하는 것도 재미있지만, UI요소를 이렇게 세밀하게 뜯어보는 것도 재미있다. 대부분의 분들이 둘 중 하나의 세계(나무 또는 숲)를 선호하시겠지만, 불행히도 나는 그 모두에 흥미를 느낀다.
UI요소에서의 재미는 아기자기함? 세밀한? 뭐 그런게 있다. 여기에 정교한 인터렉션까지 결합하면 아주 꿀맛이다. Micro UX의 세계라고나 할까?
