brunch

매거진 디자인 뉴스레터 디독

라이킷 130 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 May 16. 2019

UI 폼 디자인의 모든 것(1부)

해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv

디독

page.stibee.com

이 글에서는 폼 설계를 위한 최선의 방법을 접근성과 포용을 위한 디자인의 최신 팁을 통해 2부작으로 알아볼 예정이다. 먼저 프로세스, 레이아웃, 엔지니어링, 텍스트, 검사(Validation)에 대한 이야기를 필두로 시작할 것이다. 다음 시간에는 시각 디자인, 전환율 최적화(CRO)*, 포괄적인 폼을 디자인하는 방법 등을 살펴보자.

먼저 폼(Form)에 대한 확실한 이해가 필요하다. 폼은 사용자가 정보를 서버에 보낼 수 있도록 돕는 사용자 인터페이스(UI) 요소이다. 가령 우리가 체육관에 가입할 때 작성하는 종이에 있는 양식을 떠올려보자.

사용자 경험 디자인에서 폼은 어디에나 있다. 웹사이트에 로그인하거나, 이메일을 쓰거나, 왓츠앱(WhatsApp) 메시지에서 답장을 보낼 때도 폼을 사용한다. 모든 온라인 체크아웃 과정이나 뉴스레터를 가입할 때도 마찬가지이다. 폼은 시각적으로나 비즈니스 측면에서 디자인 성공에 중요한 역할을 한다.

폼은 웹의 필수적인 요소 중 하나이므로, 정확하게 만드는 게 중요하다. 훌륭한 폼은 만족스럽고 유용한 포괄적 사용자 인터페이스 디자인을 만들어내며, 궁극적으로 사용자경험(User experience)과 당신의 프로젝트 목표에 이득을 줄 것이다.

이 점을 염두에 두고 함께 들어가보자.

*넷스케이프 네비게이터(Netscape Navigator): 넷스케이프 내비게이터(Netscape Navigator, 또는 간단히 넷스케이프)는 1994년 넷스케이프 회사가 개발한 웹 브라우저이다. 모자이크 웹 브라우저를 개발했던 마크 앤드리슨(Marc Andreessen)이 개발하고, 짐 클락(Jim Clark)이 투자했다. 초기 인터넷 사용자들의 폭발적 반응을 얻어 약 90%의 시장점유율을 차지했다. -위키백과

**전환율 최적화(CRO): 인터넷 마케팅에서 전환율 최적화(CRO)는 고객으로 전환하는 웹 사이트 방문자율을 높이기 위한 시스템이다. -위키백과

프로세스 & 준비

1. 먼저 콘텐츠를 면밀히 검토한다.

폼이 어떻게 보여질까 생각하기전에, 어떤 정보를 수집하고 이를 어떻게 구성해야 하는지(Information architecture)를 생각해야 한다. 아마 일부 폼은 레이블과 이메일주소만 입력하는 간단한 작업일 수도 있다.

또한, 각각의 폼은 제품 또는 웹 사이트 전체에 해당하는 사용자경험 디자인의 일부이다. 면밀하게 사용자흐름(User flow)을 계획하면서, 예상하지 못한 숨은 요구 사항을 발견할 수 있다. 복잡하거나 긴 폼의 경우, 개발자와 기획단계에서부터 함께 참여하는 것을 고려해라.

폼에 들어갈 컨텐츠를 미리 계획한다면, 프로젝트 후반부에서 이미 완료된 인터페이스 설계에 추가 폼 요소를 짜야 하는 위험을 줄일 수 있다.

2. 폼에 있는 필드 개수를 최소화한다.

일반적으로 폼에 있는 필드 개수가 많을수록 사용자가 완료할 가능성이 적다. 폼을 완성시키는 것이 중요하기 때문에, 필드의 개수를 최소화화하여 사용해야 한다. “선택 사항”이라고 표시한 필드는 존재 여부를 명확히 해야 한다. 선택적이라면 정말 필요한 정보일까?

3. 선택적(optional)인 필드라면 명확하게 표시한다.

위의 팁을 건너뛰고 “선택적” 필드를 사용해야할 경우, 선택사항 표시가 해당 필드에 명확하게 있는지를 확인해라. 일반적으로 필드에 별표를 붙여 표현하기 보다는, “선택 사항”이라는 텍스트를 쓰는 게 시각적으로 부드럽게 읽힌다.

별표의 의미는 잘 이해되지 않을 수 있으며 때로는 유효성 검사 오류를 나타낼 때 사용된다.

4. 폼 필드의 순서를 최적화한다.

필드가 폼으로 보이는 순서는 세 가지 주요 사항에 의해 결정된다.

기술적 요구사항: 시스템은 다른 정보를 수집하기 전에, 하나의 정보를 선행하여 수집해야 할 수 있다. 폼이 조건부 논리를 사용하여 사용자에게 표시할 필드를 결정하는 경우 특히 그렇다.

사용자 요구사항: 사람들은 일반적으로 정보가 논리적으로 그룹화될 때 폼을 가장 잘 이해한다. 일례로 질문이 “가장 쉬운” 것에서 “가장 어려운” 것으로 진행될 때 이해가 더 빨라진다.

비즈니스 요구사항: 흐름의 단절을 최소화하는 게 비즈니스에 유익할 수 있다. 즉, 핵심 정보가 폼의 특정 지점(이정표)에서 완료되는 "이정표 제출”이 가능하다.

그럼 아래의 팁에서 좀 더 자세히 알아보자.

5. 출시하기 전에 폼을 철저히 테스트한다.

개발팀과 함께 혹은 혼자서 할 수 있는 테스트는 많다. 기입 오류를 포함한 다양한 입력 데이터를 테스트하면서 폼이 의도대로 잘 만들어졌는지 확인해라. 시간과 비용이 넉넉하다면, 새로운 형태의 사전 사용자 테스트를 해보아도 좋다. 사용자 테스트를 통해 참가자들에게 특정한 과제를 부여해서, 과제를 작성하는 중에 어떻게 반응하는지 관찰한다. 과제를 마친 후에는 그들에게 중요한 피드백을 얻을 수도 있다.

6. 출시하기전에 A/B 테스트를 한다.

디자인을 출시했어도 테스트를 할 수 있다. 예를 들어 다른 필드나 레이아웃을 복사하여 실험을 계속할 수 있다. A/B 테스트를 사용하면 전환, 흐름 포기, 완료까지의 시간 또는 기타 중요한 측정 항목을 디자인의 성능과 비교해볼 수 있다.

7. 폼의 속도를 테스트한다.

폼의 속도는 테스트하지 않는 경우가 많지만, 측정할 때에 다음 기준을 고려한다.

시스템을 로드하고 폼을 처음 표시하는 데 걸리는 시간

사용자가 폼을 완성하는 데에 걸리는 시간

사용자가 기대하는 실제 완료 시간

폼 완성 후 완료상태 또는 완료메세지를 표시하는 데에 걸리는 시간

또한 폼 진행이 실제로 너무 빠르거나, 빠르게 보일수 있다는 것을 명심해라. 다음 화면으로 즉시 이동하는 다중화면 폼(Multi-screen form)은 사용자가 화면이 변경되었음을 모를 수 있다. 이 경우 시각적 전환을 사용하여 다음 화면으로 이동했음을 사용자에게 알려주어야 한다.

구조, 레이아웃과 계층

8. 넓은 레이아웃에서는 폼을 신중하게 배치한다.

사용자가 폼을 작성할 때, 폼은 가장 중요한 관심의 대상이 된다. 웹 페이지 또는 앱 디자인에서 폼의 위치는 이를 고려해야한다. 간단한 가입폼일지라도 이 점을 지나치지 말고, 시각적으로 강조하여 중요성을 충분히 부여해라.

9. 1열(one-column) 레이아웃을 사용한다.

1열 레이아웃은 시각적으로 볼품없어 보일 수 있지만, 사용자 이해도가 훨씬 높고 사용자의 오류가 적으며, 전체 응답률이 높아지는 것으로 나타났다. 1열 레이아웃에서는 사용자가 입력 필드를 “놓칠” 가능성이 적은데, 시각의 흐름이 Z 자 형태가 아닌, 위에서 아래로 움직이기 때문이다.

사용자가 필드를 놓칠 때, 이것은 사용자가 폼을 완료하는 데 걸리는 시간과 그들이 경험하는 좌절감에 부정적인 영향을 미친다. 또한 사용자가 거꾸로 돌아가서 이전 필드를 작성해야 하므로 기입해야할 사항들이 줄어든다고 느끼지 못한다. 이런 현상이 지속 되면, 사용자가 도중에 기입을 포기할 가능성이 훨씬 커진다.

10. 레이블은 왼쪽이 아닌 위에 배치한다.

1열 레이아웃에서도 입력 영역의 왼쪽에 레이블이 배치되는 형식을 볼 수 있다. 이것 역시 여전히 Z 자 형태로 시야의 전환이 이루어지기 때문에, 복잡함과 피로감을 주고 입력 체감 시간이 길다는 부정적인 인식을 줄 수 있다.

11. 리스트, 체크 박스 및 라디오 버튼을 수직으로 정렬한다.

수직으로 나열된 요소는, 수직으로 흐르는 시야의 흐름과 함께 일관성있는 느낌을 준다. 이는, 사용자가 리스트안의 선택사항을 빠짐 없이 볼 수 있도록 해준다.

12. 필드를 논리적으로 그룹화한다.

폼 필드의 순서를 선택할 때 가능한 논리적으로, 그리고 주제별로 그룹화하는 것을 목표로 한다. 예를 들어, 여러 비트의 연락처 정보 (이메일, 전화, 주소)를 수집하는 경우, 폼의 다른 지점에 표시하지 말고 이들을 함께 배치해라. 이렇게 하면 계정 생성 폼에는 "개인 정보", “결제 세부 사항", "마케팅 선호도”의 세 섹션이 있게 된다.

13. 필드를 마이크로 레벨에서 논리적으로 그룹화한다.

우리는 특정 순서로 정보를 보는 데에 익숙하다. 예컨대, 사용자 이름 다음에는 암호, 도시명 다음은 거리 주소와 같이 규약을 준수한다면, 사용자의 인지 부하가 줄어들 것이다.

14. 필드를 시각적으로 그룹화한다.

논리적으로 정보를 그룹화한 후에는 시각적으로도 고려해야 한다. 그룹 사이에 공간을 추가하여 간단히 조정할 수도 있지만, 섹션에 제목이나 레이블을 추가하는 방법도 좋다.

15. 레이블과 필드를 시각적으로 보여줘라.

섹션에서 시각적 그룹화한 후에, 폼 필드와 관련된 레이블과 모든 도움말 텍스트도 주변 요소와 적절히 구분되도록 시각적으로 조정한다.

16. 사용자의 우려 사항을 제거한다.

사용자에게 특정 정보를 요청하면 왜 정보를 수집하는지 궁금해할 수 있다. 예컨대, 누군가의 전화번호를 묻는 경우, 왜 필요한지에 대한 도움말 텍스트를 넣어라. 만약 필수정보가 아니라면 제거하는게 좋다.

17. 폼이 길다면 계단식 또는 다중화면 형식(Multi-screen format)을 사용한다.

한 화면이나 페이지에 너무 많은 입력 칸이 있으면 사용자에게 부담을 주고, 사용자가 입력을 포기할 위험이 높아진다. 사용자가 입력을 그만둘 위험이 높아진다. 긴 폼을 여러 화면이나 페이지로 분할하고, 사용자가 입력해야 할 페이지 수를 파악할 수 있는 요소를 넣는 것이 좋다.

18. 숫자를 여러 필드로 나누지 않는다.

키보드를 보면서 입력을 해야 하므로, 사용자에게 짜증을 불러일으키는 문제를 만들 수 있다. 전화번호와 신용카드 번호는 하나의 필드만 있으면 된다.

텍스트와 카피 라이팅

19. 레이블 필드를 명확하고 간결하게 표시한다.

좋은 카피라이팅은 폼 디자인에서 과소 평가된다. 적절한 어조로, 정확하고 간결하게 라벨과 사용법을 전달하면, 폼뿐만 아니라 전체 브랜드에서도 사용자의 신뢰도가 크게 오를 것이다.

각각의 폼 필드에 레이블을 작성할 때에는 최소한의 단어를 사용하고, 명확하게 표현하는 것을 목표로 하라. 사용자가 입력해야하는 것을 분명하게 알지 못할 것 같다면, 짧은 도움말 텍스트로 작성하는 방법을 제공해라.

폼을 디자인 할 때, 각 필드에 어울릴만한 여러가지의 레이블을 만들어두는 것도 좋다. 이렇게하면 다양한 레이블을 테스트해보거나, 여러가지 대안들중에서 가장 적합한 선택을 할 수 있다.

20. 버튼에 설명이 포함된 행동 기반단어를 사용한다.

버튼은 클릭 후에 실행될 작업을 표현해야 한다. 때때로 더 기술적인 응용프로그램(Application)에서 “제출"과 “취소”를 쓰는 것도 나쁘지 않으나, 너무 건조하고 일반적이라고 느낄 수 있다. 이 대신 “가입(Sign up)”, “정보 보내기(Send information)”, “계정 만들기(Create account)”와 같은 단어나 짧은 구를 사용해라.

21. 1인칭 버튼 사용을 고려한다.

이는 브랜드의 스타일 가이드와 자신이 강조하고싶은 톤앤매너에 따라 다릅니다. 1인칭 음성( “I”, "me", "my")을 포함하는 버튼은 전환율이 더 높다고 나타났다. 따라서 ‘계정 만들기’ 대신 ‘내 계정 만들기’라고 사용하는게 좋다. 경험의 법칙에 따르면 모든 버튼 텍스트 앞에 "나"라는 단어가 있을 때, 문법과 문맥안에서 정서적의미를 전달할 수 있다.

22. 플레이스 홀더(Placeholder)를 레이블로 사용하지 않는다.

플레이스 홀더는 입력 필드를 선택하기 전에 표시되는 글자이다. 하지만 플레이스 홀더를 레이블로 사용한다면 다음의 여러 문제가 있다.

플레이스 홀더는 대부분 회색으로 표시되어 포괄성이 떨어지고 사용하기 어렵다.

스크린 리더는 일반적으로 플레이스 홀더를 읽지 않으므로, 시각적으로 취약한 사용자는 폼을 식별하기 힘들다. 필드 선택후 입력을 시작하면 플레이스 홀더가 사라진다. 즉, 사용자가 자신이 해야 할 작업을 잊어버릴 수 있다. 데이터 입력 서식을 도와주기가 어려워진다.

위 문제를 해결하기 위해, 레이블과 플레이스 홀더를 모두 사용하는 게 사용자에게 가장 편리한 방식이 될 수 있다.

23. 레이블과 플레이스 홀더를 모두 대문자로 사용하지 않는다.

대문자는 읽는 속도가 느리고 어려워서 폼의 전신(레이블, 플레이스 홀더, 도움말 텍스트)에 사용하지 않는 게 좋다. 대문자를 섹션 제목, 버튼, 아이콘에서 조금만 사용하는 경우는 괜찮다.

24. 도움말 텍스트는 숨기지 않는다.

도움말 텍스트는 지시 사항이나 레이블 외의 추가적인 안내 사항이다. 예를 들어 "암호는 8자 이상이어야 한다."라는 메시지가 필요한 경우, 물음표 아이콘이나 툴 팁 뒤에 숨기지 말고 표시해라.

25. 필수 입력형식(Input format)을 명확하게 한다.

유효성 검사 코드, 전화번호 또는 신용 카드 세부 정보와 같은 데이터를 입력할 때, 사용자는 대괄호, 공백 및 대시와 같은 텍스트를 포함할 수 있는지를 알 수 없다. 이를테면 “공백 없이 카드 번호를 입력해주세요”와 같은 도움말 텍스트에서, 필요한 입력형식을 명확히 정해라. 이렇게 하면 사용자가 수월하게 결정할 수 있기 때문에 인지 부하가 줄어든다. (아래의 팁 45번도 참고)

26. 짧게 만들되, 중요한 요소는 반드시 포함해야한다.

폼 필드는 많은 것보다 적은 게 더 바람직하다. 하지만 폼을 너무 짧게 만들어서 필요한 정보를 수집하지 못하는 것은 비생산적이다. 알베르트 아인슈타인은 “모든 것은 가능한 한 간단해야 하지만 지나치게 단순해져서는 안 된다.”라고 역설적으로 말했다.

27. 확인 메시지를 적절한 상황에서 사용한다.

사용자가 “제출” 버튼을 클릭한 후 확인 대화 상자를 표시하도록 고려한다. 예를 들어, “입사지원서 보내기”처럼 사용자가 입력한 내용을 다시 상기시켜야 하는 경우에 적절하다.

28. 입력완료상태(Success state)를 사용한다.

사용자가 폼을 모두 제출한 후에 완료되었음을 확인할 수 있도록 하는게 중요하다. 이를 사용하지 않을 경우, 사용자가 입력을 완료하고 제출했는지 알 수가 없다. 그러한경우, 사용자가 폼을 중복 제출할 수도 있다.

29. 높은 엑스하이트(x-height)의 산세리프 서체를 사용한다.

신중하게 고른 세리프체가 가독성이 좋을 수는 있지만, 주로 산세리프체가 더 안전하다. 로보토(Roboto), 샌 프란시스코(San Francisco), 프록시마 노바(Proxima Nova)와 같은 많은 현대 산 세리프 서체는 특별히 스크린용으로 제작되었다. 이 서체들은 큰 엑스 하이트를 가지고 있는데, 즉 소문자가 상대적으로 크다는 것을 의미한다.

저자 : Andrew Wilshere

원문 링크: https://trydesignlab.com/blog/ui-design-best-practices-form-design-ux-part-1/