효율적인 양식 디자인: 구조, 입력, 레이블 및 액션

앱 또는 웹 사이트를 이용하는 사람에게는 특정한 목적이 있습니다. 그리고 이러한 특정 목적을 달성하는 과정에서 필요한 것이 바로 양식입니다. 양식은 여전히 웹과 앱상에서 사용자에게 가장 중요한 상호 작용 중 하나입니다. 실제로 양식은 사용자가 목적을 달성하는 과정에서 최종 단계로 간주되는 경우가 많습니다. 양식은 최종 목적을 위한 수단으로 사용됩니다. 사용자는 신속하면서도 아무런 불편 없이 양식을 완료할 수 있어야 합니다.

이 글에서는 사용성 테스트, 필드 테스트, 시선 추적 연구 조사뿐만 아니라 사용자들이 겪은 실질적인 불편 사항 등을 통해 얻은 실용적인 기법을 살펴봅니다. 이러한 기법을 제대로 활용하면 디자이너는 보다 빠르고 간편하며 생산적인 경험을 제작할 수 있습니다. 고유한 프로토타입을 제작하고 디자인할 수 있는 한 가지 방법은 어도비 XD(무료)를 다운로드하여 사용하는 것입니다. 이 게시물을 통해 양식 디자인에 관한 여러 가지 새로운 방법을 배울 수 있습니다.

양식의 구성 요소

일반적인 양식은 다음의 다섯 가지 구성 요소로 이루어져 있습니다.

또한 다음 구성 요소로 된 양식도 있습니다.

• 지원: 양식을 작성하는 방법을 설명합니다.
• 유효성 검사: 자동 확인 기능을 통해 사용자의 데이터가 유효한지 확인합니다.

이 글에서는 구조, 입력 필드, 액션 버튼, 유효성 검사와 관련된 다양한 측면을 살펴봅니다.

양식 구조

양식은 대화의 한 유형입니다. 그리고 모든 대화와 마찬가지로 사용자와 앱이라는 두 요소 간의 논리적인 커뮤니케이션으로 구성되어 있어야 합니다.

필수 사항으로만 구성된 필드

필드는 반드시 필요한 사항으로만 구성해야 합니다. 양식에 추가하는 각각의 모든 필드는 전환율에 영향을 미칩니다. 사용자에게 특정 정보를 요청하는 이유와 해당 정보를 어떻게 사용할 것인지를 항상 염두에 두어야 합니다.

양식 순서의 논리적 배열

애플리케이션 또는 데이터베이스의 관점이 아닌 사용자의 관점에서 세부 정보를 논리적으로 요청합니다. 일반적으로 누군가의 이름을 묻기도 전에 주소부터 묻지는 않습니다.

그룹 관련 정보

논리 블록 또는 질문 세트에 대한 그룹 관련 정보입니다. 하나의 질문 세트에서 다음 세트로 이어지는 흐름이 대화의 흐름과 유사합니다. 관련 필드를 하나의 그룹으로 지정하면 사용자가 어떤 정보를 채워야 하는지 보다 쉽게 파악할 수 있습니다. 아래 그림을 통해 연락처 정보가 어떻게 구성되어 있는지 비교할 수 있습니다.

관련 필드를 그룹으로 지정(이미지 출처: 닐슨 노먼 그룹)

단일 열 vs. 복수 열

양식 필드를 여러 개의 열로 배열하면 사용자가 필드 구성에 대해 일관성을 느끼지 못합니다. 또한 양식 필드가 수평으로 나열된 경우 사용자가 Z 패턴으로 살펴보게 되므로 이해 속도와 양식 완성 속도가 저하될 수 있습니다. 반면 단일 열로 구성된 경우 페이지 아래 방향으로 직선 형태로 나열되므로 양식을 보다 수월하게 완성할 수 있습니다.

왼쪽은 양식 필드가 기본 2열 레이아웃으로 배열된 경우 사용자가 양식을 해석할 수 있는 여러 방식 중 하나를 보여줍니다. 반면 오른쪽에는 페이지 아래 방향으로 직선 형태로 나열되어 비교적 간결한 양식 구성을 보여줍니다.

입력 필드

입력 필드는 사용자가 양식을 작성하기 위한 필드입니다. 필요한 정보를 얻기 위해 사용 가능한 필드 유형에는 텍스트 필드, 암호 필드, 드롭다운, 체크 상자, 라디오 버튼, 데이터 피커 등이 있습니다.

필드 수

양식 디자인의 경험에 근거한 법칙은 간결할수록 효과적이라는 것입니다. 또한 직관적인 측면에서 볼 때 사용자가 양식 작성에 들이는 노력이 적을수록 전환율이 상승한다는 것입니다. 따라서 필드 수를 최소한으로 줄여야 합니다. 특히 많은 정보를 요청하는 양식일수록 이는 더욱 중요합니다. 그렇다고 지나치게 간소화해서도 안 됩니다. 3개의 필드 양식에 30개의 질문이 포함된다면 그 누구도 좋아하지 않을 것입니다. 한 번에 5~7개의 입력 필드만 표시하는 것이 일반적입니다.

여러 필드를 손쉽게 작성할 수 있는 하나의 필드로 병합합니다. (이미지 출처: 루크 로블르스키(Luke Wroblewski))

필수 vs. 선택

선택 사항 필드를 양식에 넣는 것은 가능한 피해야 합니다. 그러나 부득이하게 사용해야 하는 경우에는 필수 항목에 해당하는 필드를 명확하게 구분해야 합니다. 일반적으로 필수 필드에는 별표(*)를 사용하고 필수 필드가 아닌 필드에는 “선택”(필수 필드가 여러 개 있는 긴 양식에서 선호됨)이라는 단어를 표시합니다. 필수 필드에 별표를 사용하기로 했다면 사용자는 별표가 무엇을 의미하는지 모를 수도 있기 때문에 양식 아래에 설명 문구를 추가하는 것이 좋습니다.

메일침프(MailChimp)의 이메일 구독 양식

기본값 설정

사용자의 대부분(예: 약 90%)이 해당 값을 선택할 확률이 높은 경우가 아니라면 기본값 설정은 피해야 합니다. 특히 필수 필드의 경우 더욱 그렇습니다. 왜일까요? 오류를 범할 수 있기 때문입니다. 사람들은 보통 온라인 양식을 빠르게 훑어보기 때문에 모든 항목을 오랫동안 살펴보지 않습니다. 때때로 값이 이미 입력된 필드는 보지도 않고 지나칩니다.

그러나 스마트 기본값의 경우 이야기가 달라집니다. 스마트 기본값이란 제공되는 사용자 정보를 기반으로 설정된 값입니다. 스마트 기본값을 설정하면 양식 작성 시간을 단축시킬 뿐만 아니라 정확도도 향상시킬 수 있습니다. 예를 들어 사용자의 위치 정보를 기반으로 사용자의 국가를 미리 선택되도록 할 수 있습니다. 하지만 사용자가 미리 선택된 필드를 그대로 둘 수 있으므로 스마트 기본값을 설정할 때도 심사숙고해야 합니다.

결제 양식에서 지능적으로 미리 선택된 국가

입력 마스크

필드 마스크 기법을 사용하면 사용자가 입력된 텍스트에 서식을 적용할 수 있습니다. 사용자가 필드를 입력하려고 할 때 마스크가 표시되고 필드가 작성될 때 텍스트에 서식이 자동으로 지정되므로 사용자는 필수 데이터를 입력하는 데 더 집중하고 오류를 손쉽게 발견할 수 있습니다. 아래 예시의 경우 전화번호 및 신용카드 번호를 입력하면 괄호, 간격 및 대시가 자동으로 적용됩니다. 이 간단한 기법으로 사용자가 전화번호, 신용카드, 환율 등을 입력할 때 시간과 노력을 절약할 수 있습니다.

(이미지 출처: 조쉬 모로니(Josh Morony))

데스크톱 전용: 키보드 친화적인 양식

사용자는 키보드만을 사용해 모든 필드를 손쉽게 입력하고 편집할 수 있어야 합니다. 키보드를 많이 이용하는 사용자의 경우 키보드에서 손가락을 떼지 않고도 탭 키를 간단하게 눌러 필드를 입력할 수 있어야 합니다. 디자인 패턴에 대한 W3C의 가이드라인에서 키보드 상호 작용에 대한 자세한 내용을 확인할 수 있습니다.

간단한 데이터 피커의 경우도 W3C의 가이드라인을 준수해야 합니다. (이미지 출처: 세일즈포스(Salesforce))

데스크톱 전용: 입력 필드를 위한 자동 포커스

필드의 자동 포커스 기능은 작성의 시작점을 알려주므로 사용자가 신속하게 양식을 채울 수 있습니다. 색상 변경, 상자 사라짐 또는 화살표 깜빡임 등과 같은 시각적 신호를 이용하여 포커스가 이동했음을 분명하게 보여줍니다. 아마존(Amazon)의 등록 양식에는 자동 포커스 및 시각적 표시자가 모두 적용되어 있습니다.

모바일 전용: 필드 입력 시 키보드 제공

스마트폰 사용자는 필드에 텍스트를 입력할 때 앱에서 적절한 키보드가 제공되면 편리함을 느낍니다. 특정 작업만을 위해서가 아니라 다른 작업을 수행할 때에도 앱 전체에 일관적으로 이 기능을 구현합니다.

(이미지 출처: 구글)

입력 제한(자동 완성)

점점 더 많은 사람들이 모바일을 통해 다양한 업무를 수행함에 따라 불필요한 입력을 줄이는 것만으로도 사용자 경험을 향상시키고 오류를 줄일 수 있습니다. 자동 완성 기능은 입력 횟수를 줄임으로써 사용자의 수고를 덜어줍니다. 예를 들어 주소 필드를 작성하는 일은 모든 등록 양식에서 가장 큰 문제가 되는 부분입니다. 자동 완성 주소 양식 배치(사용자의 정확한 위치를 바탕으로 위치 정보와 주소 사전 완성 기능을 사용하여 정확한 제안 제공)와 같은 툴을 사용하면 일반적인 입력 필드에 비해 입력 횟수가 줄어들므로 사용자가 보다 수월하게 주소를 입력할 수 있습니다.

레이블

레이블을 명확하게 표시할수록 UI에 보다 손쉽게 액세스할 수 있습니다. 훌륭한 레이블은 사용자에게 필드의 용도를 알려주며 포커스가 필드 자체에 있을 때 사용성을 유지하고 필드가 채워진 후에도 여전히 볼 수 있어야 합니다.

단어 수

레이블은 도움말 텍스트가 아닙니다. 간결하면서도 짧은 설명식 레이블(1~2개 단어)을 통해 사용자가 양식을 빠르게 파악하도록 해야 합니다. 아마존의 이전 버전의 등록 양식에는 단어가 많이 포함되어 양식 완성 속도가 느렸습니다. 그러나 현재 버전에는 간결한 레이블이 적용되어 양식 작성 속도가 훨씬 빨라졌습니다.

문장식 대문자 vs. 제목식 대문자

오늘날 대부분의 디지털 제품의 경우 영문 대문자를 표시할 때 두 가지 방식이 사용됩니다.

• 제목식 대문자의 경우 모든 단어의 앞글자를 대문자로 표기합니다. (예: “This Is Title Case.”)
• 문장식 대문자의 경우 문장의 첫 글자만을 대문자로 표기합니다. (예: “This is sentence case.”)

문장식 대문자를 사용하면 제목식 대문자를 사용할 때보다 가독성이 더 좋습니다(즉, 읽는 속도가 빨라짐). 짧은 레이블에서는 차이가 거의 없지만(예: “Full Name”과 “Full name”), 긴 레이블의 경우 문장식 대문자가 가독성 측면에서 더 효과적입니다. “Now You Know How Difficult It Is to Read Long Text in Title Case.” 이 문장을 통해 제목식 대문자로 된 긴 텍스트를 읽는 것이 얼마나 어려운지 알 수 있습니다.

가장 가독성이 떨어지는 모든 글자 대문자 처리

모든 글자를 대문자로 표기하지 마십시오. 모두 대문자로 표기하면 읽기 어려울 뿐만 아니라 문자 높이의 변화가 전혀 없기 때문에 양식을 한눈에 파악하는 속도도 현저히 떨어집니다.

모두 대문자로 구성된 레이블은 가독성이 현저히 떨어집니다.

레이블 배열: 왼쪽 vs. 오른쪽 vs. 위쪽

2006년 마테오 펜조(Matteo Penzo)의 레이블 배치에 대한 글에 따르면 레이블이 필드 상단에 있을 때 양식 작성 속도가 빨라진다고 설명합니다. 사용자가 최대한 빠르게 양식을 파악하도록 하려면 레이블을 상단에 배열하는 것이 좋습니다.

왼쪽 배열 레이블, 오른쪽 배열 레이블, 위쪽 배열 레이블(이미지 출처: UX 매터스(UX Matters))

위쪽에 배열된 레이블의 가장 큰 장점은 다양한 크기의 레이블과 로컬라이제이션 버전이 UI와 잘 어울린다는 점입니다. (특히 공간 제약이 있는 화면의 경우 유용합니다.)

(이미지 출처: CSS 트릭(CSS-Tricks))

왼쪽에 배열된 레이블의 최대 단점은 양식 완성 속도가 가장 느리다는 점인데, 이는 레이블과 입력 필드 사이의 시각적 거리 때문입니다. 레이블의 길이가 짧을수록 레이블이 입력 필드에서 멀어지게 됩니다. 그러나 느린 완성 속도가 반드시 나쁜 것만은 아닙니다. 민감한 데이터를 입력해야 하는 양식의 경우 오히려 이점으로 작용할 수 있습니다. 운전면허번호 또는 주민등록번호와 같은 개인 정보를 입력해야 하는 경우에는 사용자가 정확하게 입력할 수 있도록 의도적으로 완성 속도를 낮추는 것도 좋습니다. 따라서 민감한 데이터를 요청하는 레이블을 읽는 데 소요되는 시간은 중요하지 않습니다. 하지만 왼쪽에 배열된 레이블은 또 다른 단점이 있습니다. 가로 공간이 많이 필요하다는 점인데, 이는 모바일 사용자에게 문제가 될 수 있습니다.

(이미지 출처: CSS 트릭)

오른쪽에 배열된 레이블의 큰 장점은 레이블과 입력 필드 사이의 시각적 연계성이 뛰어나다는 점입니다. 레이블이 입력 필드에 비교적 가깝게 배치되기 때문입니다. 이러한 원리는 새롭게 만들어진 것이 아니라 게슈탈트 심리학의 근접성의 법칙에서 유래된 원리입니다. 짧은 양식의 경우 레이블을 오른쪽에 배열할 경우 완성 속도가 놀라울 정도로 빠릅니다. 그러나 불편하다는 단점이 있습니다. 이러한 양식은 왼쪽 가장자리가 부족하므로, 보는 것도 불편하고 읽기도 어렵습니다.

(이미지 출처: CSS 트릭)

요약: 사용자가 빠르게 양식을 파악하도록 하려면 레이블을 필드 위쪽에 배치해야 합니다. 레이블이 페이지 아래 방향으로 직선 형태로 나열되므로 사용자가 한눈에 파악하기 훨씬 쉽습니다. 반면 사용자가 양식을 주의 깊게 읽도록 하려면 레이블을 왼쪽에 배치해야 합니다. 그러나 이 레이아웃은 양식 이해 속도를 저하시키고 사용자가 양식을 Z 패턴으로 살펴봐야 한다는 단점이 있습니다.

인라인 레이블(자리 표시자 텍스트)

입력 필드를 클릭하면 입력 필드의 자리 표시자로 설정된 레이블은 사라지므로 사용자가 더 이상 볼 수 없게 됩니다. 두 개의 필드로 구성된 양식(사용자 이름 필드와 암호 필드만으로 구성된 간단한 로그인 양식)의 경우 자리 표시자 텍스트가 효과적일 수 있지만, 사용자에게 많은 정보를 요구하는 경우 시각 레이블로서는 적합하지 않습니다.

(이미지 출처: 스냅와이어(snapwi))

사용자가 입력 필드를 클릭하면 해당 레이블이 사라지게 되므로 사용자가 입력한 필드의 레이블이 무엇이었는지 다시 확인할 수가 없습니다. 이로 인해 오류를 범할 가능성이 높아집니다. 또 다른 문제는 사용자가 자리 표시자 텍스트를 미리 채워진 데이터로 오인하여 그냥 지나칠 수 있다는 점입니다(닐슨 노먼 그룹(Nielsen Norman Group)의 시선 추적 연구조사 참조).

필드 레이블로 사용된 자리 표시자 텍스트

자리 표시자 텍스트를 대체할 훌륭한 해결책은 플로팅 레이블입니다. 기본적으로 자리 표시자 텍스트가 표시되지만 입력 필드를 터치하고 텍스트를 입력하면 이 자리 표시자 텍스트는 사라지고 상단에 배열되는 레이블이 나타납니다.

(이미지 출처: MDS)

요약: 자리 표시자에만 의존하지 말고 레이블을 함께 사용합니다. 필드가 채워지면 자리 표시자는 사라지기 때문입니다. 플로팅 레이블을 사용해 사용자가 정확한 필드를 작성하고 있는지 확인할 수 있도록 합니다.

액션 버튼

클릭하면 액션 버튼이 양식 제출과 같은 동작을 호출합니다.

기본 액션 vs. 부차적 액션

기본 액션과 부차적 액션 사이에 시각적 구분이 없으면 실패로 이어질 수 있습니다. 부차적 액션의 시각적 무게를 줄이면 오류 발생 가능성을 줄일 수 있을 뿐만 아니라 사용자가 양식을 성공적으로 입력하는 데 도움이 됩니다.

시각적 구분의 유무 차이(이미지 출처: 루크 로블르스키)

버튼의 위치

복잡한 양식에는 보통 뒤로 버튼이 필요합니다. 뒤로 버튼이 입력 필드 바로 아래에 있으면(예: 아래의 왼쪽 스크린샷) 사용자가 실수로 이 버튼을 누를 수 있습니다. 뒤로 버튼은 부차적 액션에 해당하므로 접근성이 낮아야 합니다.(아래의 오른쪽 양식에는 버튼이 올바른 위치에 배열되어 있습니다.)

명명 규칙

액션에는 “제출”과 같은 포괄적인 단어의 사용을 피해야 합니다. 양식 자체가 포괄적이라는 인상을 줄 수 있기 때문입니다. 그 대신 “계정 만들기” 또는 “주간 이벤트 구독” 등 버튼을 클릭하면 어떤 액션이 수행되는지 구체적으로 표기하는 것이 좋습니다.

다중 액션 버튼

양식 제출을 위한 버튼에 다중 액션 버튼을 적용할 경우 사용자의 집중을 방해할 수 있으므로 가능한 사용하지 않는 것이 좋습니다.

재설정 버튼은 절대 악

재설정 버튼은 사용하지 마십시오. 이 버튼은 사용자에게 장점보다는 단점으로 작용하는 경우가 많습니다. 웹상에 존재하는 모든 재설정 버튼이 사라진다 해도 사용자들은 전혀 아쉬워하지 않을 것입니다.

시각적 모양

액션 버튼은 클릭하거나 탭할 수 있을 것처럼 보여야 합니다.

음영을 통해 클릭할 수 있음을 나타냅니다. (이미지 출처: 바딤 그로모브(Vadim Gromov))

시각적 피드백

“제출” 버튼을 디자인할 때는 사용자의 제출 액션 후 양식이 처리되고 있음을 명확하게 나타내야 합니다. 이는 중복 제출을 방지하는 동시에 사용자에게 피드백을 제공할 수 있습니다.

(이미지 출처: 미카엘 빌라르(Michaël Villar))

유효성 검사

양식 유효성 검사 오류는 불가피하며 사용자가 데이터 입력 시 오류를 쉽게 범함으로써 발생하는 자연스러운 현상입니다. 오류가 발생하기 쉬운 조건은 최소화되어야 하지만 유효성 검사 오류는 100% 제거될 수 없습니다. 따라서 사용자가 오류를 최소화할 수 있도록 도와야 합니다.

인라인 유효성 검사

사용자가 힘들게 양식 작성을 마치고 제출했는데 제출하고 나서야 실수를 발견하고 싶지는 않을 것입니다. 특히 긴 양식을 작성하고 “제출” 버튼을 눌렀는데, 화면에 여러 개의 오류 메시지가 뜬다면 절망스러울 것입니다. 어느 부분에서 어떠한 오류가 발생했는지 명확히 알려주지 않는다면 사용자의 불만은 더 커질 것입니다.

(이미지 출처: 스택 익스체인지(Stack Exchange))

유효성 검사는 사용자가 데이터 입력을 완료함과 동시에 텍스트의 정확성 여부를 알려줍니다. 좋은 양식 유효성 검사의 기본 원칙은 사용자와 소통하는 것입니다. 입력된 데이터가 올바르지 않은 경우 사용자에게 명확하게 알려주어야 합니다. 실시간 인라인 유효성 검사 기능은 사용자가 입력한 데이터의 정확성 여부를 즉시 알려줍니다. 이 접근 방식을 사용하면 사용자는 “제출” 버튼을 누르고 오류를 발견할 때까지 기다릴 필요 없이 오류를 즉각적으로 수정할 수 있습니다.

그러나 대부분의 경우 입력을 완료하기 전까지는 정확성 여부를 확인하기 어렵기 때문에 한 글자씩 입력할 때마다 유효성을 검사하는 것은 피하는 것이 좋습니다. 데이터 입력 도중에 유효성 검사를 수행하는 양식은 사용자가 데이터 입력을 시작하는 동시에 불편함을 느낄 수 있습니다.

구글 폼즈(Google Forms)는 이메일 주소를 모두 입력하기도 전에 유효하지 않음을 명시합니다. (이미지 출처: 미디엄(Medium))

반면 데이터 입력 후 유효성 검사를 수행하는 양식은 사용자가 오류를 수정했다는 사실을 더욱 신속하게 알리지 못합니다.

애플 스토어(Apple Store)의 유효성 검사는 데이터 입력 후 수행됩니다. (이미지 출처: 미디엄)

미하엘 콘예비치(Mihael Konjević)는 그가 쓴 기사인 “양식 속 인라인 유효성 검사: 경험 디자인”에서 다양한 유효성 검사 전략을 다루면서 두 가지 측면을 모두 만족시킬 하이브리드 전략을 제안하고 있는데, 바로 컨텍스트에 따른 유효성 검사 전략입니다.
• 사용자가 유효한 데이터를 입력했던 필드에 데이터를 입력하는 경우(예: 이전에 입력된 데이터가 유효한 경우) 데이터 입력 후 유효성을 검사합니다.
• 사용자가 유효하지 않은 데이터를 입력했던 필드에 데이터를 입력하는 경우(예: 이전에 입력한 데이터가 유효하지 않은 것으로 나타난 경우) 데이터 입력 도중에도 유효성을 검사합니다.

하이브리드 접근 방식: 컨텍스트에 따른 유효성 검사 전략 (이미지 출처: 미디엄)

데이터 보호

제프 래스킨(Jef Raskin)은 “시스템은 사용자가 입력한 모든 정보를 소중히 다뤄야 한다”고 말합니다. 여러 정보가 포함된 양식의 특성을 고려할 때 이는 절대적으로 적용되는 말입니다. 예를 들어 양식을 입력하는 도중 실수로 페이지를 새로 고쳤을 때 데이터가 필드에 그대로 남아 있다면 사용자는 안도의 한숨을 내쉬게 됩니다. 갈릭.제이에스(Garlic.js)와 같은 툴을 사용하면 양식에 입력된 값이 제출될 때까지 로컬에 보관할 수 있습니다. 따라서 사용자는 탭 또는 브라우저를 실수로 닫았더라도 소중한 데이터를 잃지 않게 됩니다.

대화형 인터페이스: 혁신적인 양식 디자인

최근 대화형 인터페이스와 챗봇이 큰 인기를 모으며 널리 사용되고 있습니다. 이러한 현상은 여러 유행에서 기인하였는데, 특히 사람들은 소셜 네트워크보다 메시징 앱을 더 많이 사용하고 있습니다. 이와 같은 트렌드는 수많은 실험으로 이어졌고, 그 결과 메시징과 유사한 형태의 스레드 형식의 대화에서 쇼핑과 같은 다양한 상호 작용을 지원하는 수준까지 진화하고 있습니다. 이와 더불어 웹 양식과 같은 기존의 요소조차 이러한 트렌드 속에서 변화를 경험하고 있습니다. 디자이너들은 기존의 웹 양식이 인터랙티브한 대화형 인터페이스로 탈바꿈할 것으로 예상하고 있습니다.

자연어 인터페이스

모든 인터페이스가 대화형. 기존 양식(흔히 사용되는 디자인 양식)은 대화와 매우 유사합니다. 유일한 차이점은 질문하는 방식입니다. 하지만 기계가 아닌 실제 인간의 대화와 매우 근접한 방식으로 질문하는 양식을 디자인한다면 어떻게 될까요? 즉, 무미건조한 용어로 기계와 의사소통하는 것이 아니라 인간의 언어로 상호 작용하는 것입니다. 아래 양식은 대화 기반의 상황을 만들어 기존 웹 양식 요소(예: 레이블 및 입력 필드)를 이용하지 않고도 원활한 이해를 돕습니다.

이 코드롭스(Codrops)의 양식 디자인은 인간의 대화와 유사한 대화형 패턴을 사용했습니다.

대화형 양식

대화형 양식은 웹 페이지 기반의 모든 양식을 대화형 인터페이스로 손쉽게 변환시키는 오픈 소스 개념입니다. 대화형 양식은 모든 입력 요소를 완전히 대화형 요소로 대체하고, 이전 질문에서 재사용 가능한 변수와 스타일에 대한 완벽한 사용자 정의 및 제어를 제공합니다. 이 프로젝트는 사용자 경험과 상호 작용에 대한 인식이 흥미롭게 변화하고 있으며, 사용자의 특정 목적을 달성하도록 하는 데 텍스트 기반의 대화가 많이 사용되고 있음을 보여줍니다.

결론

사용자가 양식 작성을 주저하지 않도록 프로세스를 최대한 쉽고 간결하게 만들어야 합니다. 관련 필드 그룹 지정, 각 필드에 포함될 정보 표시 등 작은 변화만으로도 사용성을 대폭 향상시킬 수 있습니다. 사용성 테스트는 양식 디자인에 있어서 필수 불가결한 것입니다. 몇 명의 사람을 대상으로 테스트하거나 직장 동료 한 사람에게 프로토타입을 사용해 보길 요청하는 것만으로도 양식의 사용성에 대한 훌륭한 인사이트를 얻을 수 있습니다.

대부분의 사람들이 한 번쯤 맞추다가 포기한 경험이 있을 법한 루빅 큐브도 몇 가지 요령만 알면 손쉽게 맞출 수 있듯이 모든 문제에는 해결 방법이 있기 마련입니다.

원문 보기

디자인. 프로토타입. 공유. 모두가 가능한 하나의 올인원 앱 Adobe XD.

웹사이트 및 모바일 앱을 디자인하고 프로토타이핑하고 공유할 수 있는 최초의 올인원 툴인 Experience Design CC(베타)를 사용하면 아이디어 구상에서 프로토타이핑에 이르는 과정을 신속하게 진행할 수 있습니다. 베타 버전을 테스트해 보시고, 여러분의 피드백을 공유해 주십시오. 다운로드 받기

닉 배비치
닉 배비치(Nick Babich)는 개발자로, 기술에 열정적이며 UX에 큰 애착을 가지고 있습니다. 그는 지난 10년 동안 전문 소프트웨어 개발 업계에 몸담았으며 그의 다양한 관심 분야 중 광고, 심리학 및 영화에 조예가 깊습니다.