[Mobile UX] Input UX
Luke Wroblewski의 Mobile First 책을 읽다가 모바일 앱이나 웹 서비스 설계 및 개발 시 Input UX 를 어떻게 하면 좋을지에 대한 좋은 내용이 있어 정리해보고자 한다.
책을 직접 읽어보고 싶다면 http://www.abookapart.com/products/mobile-first
Mobile Asks
1. 대부분 모바일 기기 화면에 두개의 컬럼을 위한 공간이 충분하지 않기 때문에 왼쪽 정렬 혹은 오른 쪽 정렬의 라벨보다는 탑 정렬의 라벨이 좋다.
이 가이드는 당연한 얘기인데 모바일 스크린의 사이즈의 제약 상 위쪽 정렬로 내용 표시되는게 좋다는 거고, 특히나 내용이 길 경우에는 자연적으로 탑정렬이 될것이다.
예시) Twitter's mobile sign-up form
그리고 위의 예시같은 경우 인풋 필드에 무엇을 입력해야되는지 알려주는 가이드가 인풋 영역 밖에 표시되어 있는데 인풋 영역내 라벨이 표시되는게 더 좋다.
Native 모바일 앱 플랫폼에서는 인풋 필드 내 라벨표시를 지원하기 때문에 디폴트 앱들에서는 사용되고 있지만, 모바일웹에서는 인풋 내 라벨을 표시하기 위해서는 약간의 작업이 필요하다.
현재 트위터 모바일웹을 보니 해당 내용이 잘 지켜지고 있다.(위에 예시는 저자가 책을 쓴 당시의 화면을 넣은것이기 때문에 현재 서비스 버전의 화면과 상이한 예들이 많다.)
예시) Twitter's mobile sign-up form(현재)
2. 라벨과 답변을 비슷하게 보이게 만들어 실제 답변으로 혼란을 갖게 하지 말아라. 라벨과 답변이 비슷해 보인다면 사람들은 이미 답변이 제공되었을 거라고 생각할지도 모른다.
아래 예시를 보면 인풋 필드에 이름을 입력하면 라벨이 사라진다. 그리고 첫번재 인풋필드에 입력된 답변이 두번째 필드의 라벨과 색상차이가 거의 없어서 사용자들에게 헷갈림을 줄 수 있다. 저자는 이문제를 UT에서 자주 봐온 행태라고 한다.
예시) MailChimp's mobile sign-in form
3. 사용자가 질문에 답변했을 때 라벨들을 사라지게 하지 말고 유지 시켜라.
라벨들이 없어진 후 질문에 답변이 되었는지, 질문에 돌아가 체크를 해야하는지 알기 어렵게 만든다.
아래 예시를 보면 커스가 인풋필드 내에 있더라도 라벨이 사라지지 않고 유지되며 입력값과 라벨의 텍스트의 색상 차이가 명확하다.
예시) 37signal's Basecamp sign-in form
Mobile Answers
4. 기본 인풋타입(checkbox, radio button, password field, dropdown lists, file picker, submit button, plain text)을 사용하여 답변을 쉽고 정확하게 할 수 있도록 만들어라.
기본을 적절하게 사용하는 것은 사용자에게 많은 도움을 줄 수 있다. 예를 들어 아래 예시와 같이 기본 드롭다운 리스트를 사용할 때 데스크탑에서 볼 수 있는 드롭다운리스트가 아니라 적절하게 터치 사이즈의 Swipe할 수 있는 리스트를 제공한다.
예시) iPhone's mobile browser
예시) Android's mobile browser
그러나 메뉴를 선택하기 위한 컨트롤은 사람들이 리스트에서 답변을 쉽게 선택하게 만들기 위해 사용되었는데 가끔 선택할 메뉴의 내용이 길경우 그 옵션을 읽는데 어려움을 겪게 된다.
예시) Microsoft's signup form
따라서 선택하려는 메뉴를 컨트롤의 수직적 혹은 수평적으로 연장하려고 한다면, 풀스크린 리스트에서 사용자가 필요한 옵션들만 선택할 수 있도록 하고 페이지를 분리해서 선택 메뉴를 제공하는게 나을 수가 있다.
5. 터치 기반의 인터페이스로 특별하게 디자인된 컨트롤로 Tap을 더 효율적으로 만들 수 있다.
아래 예시와 같이 선택 메뉴들은 Tap-intensive하다. 이렇게 Tap해서 선택하는 것이 일반적인데 좀더 나아가 사용자가 좀더 쉽게 입력할 수 있게 하는 방법이 있다.
예시) Booking a flight on American Airlines' mobile web
Kayak App의 경우를 보면 이 서비스를 사용하는 사용자의 경우 하나이 방만 원하는 경우가 대부분이라 1이 디폴트값으로 설정되어 있다. 대부분 사람들이 관심있어 하는 선택지를 디폴트 값으로 주는 것은 더 쉬운 입력을 가능하게 한다.
또한 날짜 선택을 위해 Custom컨트롤을 사용했는데, 적절한 사이즈의 터치 타겟을 사용하여 원하는 월과 날짜를 선택하게 만들었다.
예시) Kayak's hotel booking form(위), Kayak's date picker(아래)
6. 새로운 HTML5인풋 타입들은 특별한 형식을 요구하는 질문에 사람들이 정확하게 답할 수 있도록 도와줄 수 있다.
사파리 같은 모바일 브라우저에서 인풋에 특화된 키보드는 각각의 인풋필드에서 요구되는 데이터의 정확한 타입 입력을 좀더 쉽게 만든다.
URL입력은 ",", "/", ".com"키와 같은 문자 숫자식의 키보드를 제공
Email 입력은 ".", ""@"키를 포함한 문자 숫자식의 키보드를 제공
숫자 입력의 경우 숫자입력 키보드 제공
예시) Using HTML5 input types and the specific virtual keyboards
7. 모바일에서 텍스트 인풋은 인풋 특성들(autocaptitalize, autocorrect)사용을 통해 더 쉽게 입력하게 만들 수 있다.
자동대문자화: 이메일, 패스워드, URL, 다른 대문자와 소문자를 구별하는 필드에서는 OFF하고, 이름과 위치 같은 명사를 쓸때는 ON한다.
자동수정: 이메일, 패스워드, URL, 다른 알파벳 순서가 아닌 인풋에서는 OFF하고 텍스트 영여과 자유로운 폼의 입력에서는 ON한다.
Masking the hard stuff
8. 인풋 Mask는 명확한 인풋 큐를 제시하고 사용자가 실수하지 않도록 인풋들을 제한함으로써 복잡한 인풋들을 처기리하기 쉽게 만드는걸 도울 수 있다.
인풋 Mask가 사용자가 답변하는 것을 돕기 위해 몇가지 고려할 디자인 사항들이 있다. 인풋에서 요구하는 포맷을 나타내는게 좋다. 예를 들어 @me.com 인풋 영역을 보이게 하고 이메일 주소를 입력했을 때도 시각적으로 유지하는 것이다. Tax ID를 예로 들면 요구되는 숫자 구조를 나타내고 답변을 할 때까지 유지되도록 하는 것이다.
예시) A basic input mask
예시) A well-designed input mask
9. 인풋 Mask는 미리 셋업한 것들을 고수하는 것이 점차적으로 보여주면서 인풋마스크를 결정하는 것보다 이용하기 더 쉽게 만든다.
아래 예시를 보면 숫자를 "xxx-xx-xxxx" 포멧으로 넣는 것을 예상했으나 첫번째 숫자를 넣자마자 포멧은 사라지고 두 괄호가 생겼다. 전혀 예상하지 못한 것으로 사용에 혼란을 준다.
예시) Dont't gradually reveal input masks
Laying out the options
10. 라벨과 인풋필드는 연속적인 폼을 더 쉽게 만드는데 큰 영향을 끼칠 수 있긴 하지만, 사용자가 입력해야하는 정보의 양이 가장 직접적인 영향을 끼친다. 모바일 폼에서는 효율적이려면 잘라내고 또 잘라내야 한다.
아래 예시는 5페이지에 걸쳐 제공했던 것을 한페이지로 줄인 사례이다. 불필요하거나 현재 꼭 입력해야되는 것이 아니면 줄이자
예시) The Original Boingo "Get Online" form
예시) Quick Redesign of the Boingo form
11. 인풋 내용은 업데이트하고 수정하는 것이 필요한 상황에서는 각 항목에 대해 분리하여 인풋이 가능하도록 한다.
인풋내용을 업데이트하고 수정하는 상황에서 가능한 모든 답변들을 위한 인풋필드를 노출하는 것은 수정이 필요한 한 두개의 인풋을 찾는 걸 어렵게 만든다.
예를들어 Bagcheck의 프로필 정보 편집은 드물게 일어나고, 프로필의 모든 부분의 편집도 마찬가지로 드물게 일어난다. 따라서 프로필 편집을 위한 모든 인풋 필드를 노출하는 대신에 각각 Tap해서 Dialog window를 통해 편집 할 수 있도록 하였다.
예시) Editing profile on Bagcheck
12. In-Context 인풋은 사람들이 많은 노력없이 빠르게 기여하고 만들어 낼 수 있는 방법을 제공한다.
In-Context 인풋은 사람들이 기여할 수 있는 곳에 즉시 보여주고, 대개 하나의 인풋필드로 구성되어 있다. 예를 들어 Quora는 보고있는 스크린을 벗어나지 않고도 즉시 답변을 남길 수 있도록 한다. 빠른 방법으로 즉시 기여와 정렬을 가능하게 한다.
예시) an in-context comment form on Quora's mobile web
Beyond Forms and Input fields
13. 오늘날 모바일 기기는 인풋필드를 넘어서는 가능성(Location Detection, device orientation, audio input, video input, near field communications)을 활용할 수 있다.
Location detection 사례로, Kayak에서 호텔을 예약할 때 키보드를 사용해서 위치를 입력하거나 인풋필드 오른쪽에 있는 아이콘을 탭핑해 현재 위치를 사용할 수 있다. 비슷하게 트위터에서 한번 탭해서 포스팀에 위치를 첨부할 수 있다.
예시) One tap access to your current location on Kayak and Twitter
Google Goggles는 제품, 와인, 예술품, 랜드마크 등을 파악하고, 비지니스 카드를 스캔하고 외국어를 번역하기 위해 모바일 기기에서 비디오 카메라를 사용한다.
예시) Google Goggles
점점 더 가능성을 기술을 가진 기기와 더 좋은 네트워크, 사람들의 관심들이 점점 더 늘어나면서 Input을 좀더 편리하고 쉽고, 새로운 경험을 줄 수 있도록 만들 수 있는 기회가 커진거 같다.
좀더 쉽고 편하고 새로운 Input UX를 제공하기 위해서는 다음의 내용을 명심하자.
- 질문들이 모바일에 최적화된 라벨로 명확하게 제시되도록 만들어라
- Input Types, attributes, masks를 사용함으로써 정확한 모바일 입력과 관계된 어려움들을 제거해라.
- 사용자의 많은 노력없이 정확한 답을 제공하도록 도우려면 Custom input control사용을 고려해라
- 순차적으로 비선형적으며 in-context 인풋 방법을 통해 가능성을 준비해라
- 새로운 방식의 인풋을 표현하기 위해 모바일 기기의 가능성들을 이용해라.