모바일 앱 필드 UX 가이드 13가지 원칙
UX 디자인 배우기 #12
Today UX 아티클
2016년 8월 14일 Think 360에 게재된 Prince Pal의 글 HowTo Design Input Data Fields To Improve Mobile App UX를 소개하고자 합니다.
모든 유저는 목표를 가지고 있고, 그 목표를 달성하기 위해 대부분 양식(form)을 거쳐 간다고 합니다. 때문에 놀라운 사용자 경험을 만들기 위해서는 데이터 입력 필드에 허슬이 없도록 주의하면서도, 유저에게 기억에 남는 인상을 주기 위해 창의력을 발휘해 만들어야 한다고 합니다.
Prince Pal 글에서는 양식의 입력 필드란 어떤 것인지, 주의해야 할 점은 무엇인지, 창의적인 사례는 어떤 것이 있는지 설명하고 있습니다.
구성 요소
먼저 양식의 구성요소를 알아보면 다음과 같다고 합니다.
구조
입력 필드
필드 레이블
액션 버튼
피드백
일부 양식에는 다음과 같은 것도 포함되어 있다고 합니다.
도움말
자동 화인
입력 필드(Input field)
입력란이란 유저가 양식을 채워 넣기 위해 정보를 입력해야 하는 것으로, 텍스트 입력란, 체크박스, 드롭다운, 패스워드 입력란, 날짜 선택, 라디오 버튼 등이 여기에 해당한다고 합니다.
필드의 양
필드의 양은 최대한 줄이면 유저가 부담을 덜 느껴 더 많은 정보를 제공할 수 있다고 합니다. 그렇다고 해서 30개에 나눠서 물어봐야 하는 걸 3개로 줄이면은 안된다고 합니다.
필수 vs. 선택
양식에서 선택 입력 필드는 되도록 없애되, 정말 원한다면 선택적으로 입력하면 된다는 것을 *표시나 (선택)이라는 문구를 통해 명확히 보여주라고 합니다.
디폴트 값
빠르게 양식을 훑어 내려가다 보면 오타를 남기거나 입력하지 않고 넘어갈 수도 있기 때문에, ‘똑똑한 티폴트 값’을 제공하여보다 빠르고 정확하게 유저가 양식을 채워 나갈 수 있도록 도와줘야 한다고 합니다. 예를 들면 유저의 위치 정보를 이용해 국가 입력 란에 미리 해당 정보를 입력해두는 겁니다.
모바일 앱을 위한 키보드 친화적인 옵션
유저가 모든 필드를 키보드로 수정하는 데 불편함이 없게 해줘야 한다고 합니다. 특히나 키보드를 애용하는 유저가 키보드에서 손을 떼지 않고도 매끄럽게 다음 필드로 넘어갈 수 있도록 만들어야 한다고 합니다.
모바일 앱을 위한 오토포커스
입력해야 하는 필드에 자동으로 커서를 보여주어 유저가 즉시 입력할 수 있게 해줘야 한다고 합니다. 색상이 바뀌거나 화살표가 반짝이거나 다른 칸이 흐려지는 등의 시각적 효과와 함께 사용하면 더 좋다고 합니다. 아마존이 좋은 사례라고 합니다.
모바일 상의 텍스트 입력 키보드
모바일에서는 입력 내용에 맞는 키보드를 제공해야 한다고 합니다. 예를 들어 아래 좌측 사례에서는 카드 번호를 입력하는 칸임에도 불구하고 일반 키보드를 보여주어 유저가 숫자 키보드를 눌러야 하는 불편을 야기하고 있습니다.
현대적인 양식 디자인 사례
6개의 필드를 쭉 보여주는 대신 한 번에 하나의 텍스트만 보여주어 혼란을 줄여줄 수도 있다고 합니다. 아래와 같이 하단의 얇은 진행 바와 남은 필드를 보여주는 숫자를 같이 보여주면 더 도움이 된다고 합니다.
자연스러운 언어
아래 사례처럼 문장을 주고 단어를 바꿔서 선택할 수 있게 해주면 유저로부터 쉽게 데이터를 모을 수 있다고 합니다.
풀스크린 양식 사례
풀스크린 입력 양식을 사용하면 연속성을 주면서도 방해 요소가 없는 환경을 만들어줄 수 있으니 고려해볼 만한 가치가 충분하다고 합니다.
이메일 가입 양식 사례
애니메이션을 활용해 다이내믹한 이메일 구독 버튼을 만들면 즐거운 경험을 전달할 수 있다고 합니다.
로그인/회원가입 양식 사례
소셜 미디어 계정을 통해 가입할 수 있게 해주면 빠르게 접근할 수 있어 방문자를 독려할 수 있다고 합니다.
신용카드정보 입력 사례
카드번호, 만료일, cvv 입력하는 과정을 실제 카드 모양과 결합하여 제공하고 있습니다.
필자는 혁신적으로 입력 필드를 만들되 사용성을 지켜야 한다고 강조합니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
줌 Live 강의 수강생 모집 중
(매월 Live 3-4개 강좌 오픈하고 있습니다)
인프런 20개 UX 인터넷(VOD) 강좌 수강생 모집 중
(평생 수강)
https://www.inflearn.com/users/196290
