4 영감을 주는 양식 디자인 패턴 [무료]

HubSpot에서 실시한 연구에 따르면 응답자의 82%가 형편없거나 불완전한 양식 때문에 웹사이트 구매 유입경로를 포기했다고 보고했으며 그 중 93%는 데스크톱 컴퓨터에서 이러한 양식을 처음 접한 것으로 나타났습니다.

설문조사를 실시하거나, 잠재 고객에게 연락할 수 있는 수단을 제공하거나, 뉴스레터 가입을 권장하는 경우 양식은 웹사이트와 비즈니스의 필수적인 부분입니다. 멋지고 효과적인 웹 양식을 만드는 방법에는 여러 가지가 있지만 항상 개선의 여지가 있습니다. 형식이 지루할 필요는 없습니다.

4 영감을 주는 양식 디자인 패턴 [무료]

잘 디자인된 형태는 유용성을 손상시키지 않으면서 전체 디자인에 가치를 더합니다. 또한 이러한 형식은 훨씬 더 나은 성능을 제공합니다. Salesforce의 새로운 UI 디자인 프레임워크인 Lightning에서 작은 양식 디자인 변경으로 양식 변환이 향상될 수 있습니다. 이에 대해 알아보자.

상자 없는 형태

상자 없는 웹 양식은 상자나 테두리가 보이지 않는 웹 양식입니다. 웹 양식을 둘러싸는 상자가 있는 전통적인 웹 양식이 없기 때문에 웹 양식을 보다 현대적이고 현대적으로 보이게 합니다. 주변에 상자가 있는 기존 웹 양식은 구식으로 볼 수 있습니다.

곡선 기반 웹 양식은 곡선과 모서리를 사용하여 흥미를 유발합니다. 곡선은 모양과 레이아웃에서 찾을 수 있습니다. 잘 설계된 곡선형 상자가 반드시 전통적인 상자형 디자인을 따를 필요는 없습니다. 올바르게 수행되면 곡선이 전체 웹 양식 주위로 시선을 끌 수 있으므로 음수 공간과 양수 공간 사이에 긴장이 추가됩니다. 시각적인 매력을 더하고 단조로워 보이는 웹 양식을 더 흥미롭고 매력적으로 만드는 데 도움이 될 수 있습니다.

애니메이션 양식

애니메이션 양식 디자인은 양식 자체 내에서 일부 애니메이션으로 설계되었습니다. 흥미를 유발하고 주의를 끄는 데 도움이 되는 간단한 애니메이션(튀는 화살표 및 버튼과 같은)부터 배경 애니메이션 또는 페이지 간 전환과 같은 애니메이션 웹 디자인의 장점을 최대한 끌어내는 더 복잡하고 정교한 디자인에 이르기까지 다양한 수준에서 수행할 수 있습니다. 이러한 애니메이션 효과를 사용하는 주요 목적은 사용자 경험을 가능한 한 매력적으로 만드는 것입니다.

아래쪽 또는 측면에서 밀어 넣습니다.

이 웹플로 템플릿을 사용하면 사용자가 전체 모양을 손상시키지 않고 언제든지 문의 양식을 제출할 수 있습니다. 사이트 하단에 연락처 버튼을 추가하여 소비자가 준비가 되면 언제든지 연락할 수 있도록 할 수 있습니다.

사람들이 양식에 액세스할 수 있도록 슬라이드 아웃 메뉴를 사용할 수도 있습니다. 방문자를 연락처 페이지로 보내는 대신 화면 측면에서 양식을 가져옵니다. 누군가가 도움을 주는 동안 사이트에서 정보를 찾고 싶어할 수 있는 경우에 좋은 패턴입니다.

전체 화면 형식

양식에 주의를 집중시키는 훌륭한 기술은 주의를 산만하게 하는 요소를 제거하는 것입니다. 웹사이트의 이미 복잡한 위치(예: 바닥글)에 양식을 집어넣는 대신 참여 지점을 통합하여 전체 화면으로 만드십시오. 사용자가 쉽고 집중적으로 원하는 정보를 입력할 수 있도록 도와주어 보다 쉽게 완료할 수 있습니다.

자연어 형식

웹 양식이 말을 할 수 있다면 다음과 같이 들릴 수 있습니다. "정보를 제출하려고 합니다. 계속하시겠습니까? 필수입니다." 웹상의 양식은 우리가 원하는 만큼 항상 간단하지는 않습니다. 오늘날 우리는 웹 경험과 사용자 인터페이스가 더 인간적이고 친숙할 것으로 기대합니다. 예를 들어, 웹 페이지와 상호 작용하는 것은 타이핑보다 말하는 것처럼 느껴져야 합니다. 자연어 입력은 웹 양식을 보다 대화식으로 만들 수 있는 방법 중 하나입니다. 즉, 작성해야 하는 또 다른 텍스트가 아닙니다. 자연어 인터페이스는 사용자가 질문을 하도록 질문을 함으로써 사용자를 돕습니다. 기존의 양식 레이블과 입력 상자 패턴을 활용하여 오해를 줄이면서 대화형 컨텍스트를 만들 수 있습니다. 독특하고 잘 디자인된 느낌도 있습니다.

단계별(절차적) 양식 디자인

단계별 웹 양식 디자인을 통해 정보 섹션을 따라하기 쉬운 소화 가능한 부분으로 나눌 수 있습니다. 여기에서 사용자는 각 필드를 채울 시각적 신호를 받습니다.

이 웹 페이지에는 사용자가 웹 양식 단계를 수행할 수 있는 명확한 경로가 있으며, 제목과 시각적 단서가 모두 사용자를 안내합니다. 이 양식 패턴을 사용하면 온라인에 정보를 제공하는 것을 주저하는 개인이 더 쉽게 할 수 있습니다.

사람들이 이해하기 쉬운 덩어리로 정보를 추가할 수 있도록 하면 모든 필드를 한 번에 단순히 표시하는 것보다 추진력을 높이고 더 집중된 경험을 제공할 수 있습니다.

어떤 경우에는 버튼을 한 번만 클릭하면 됩니다. 그러나 때때로 양식을 작성하는 데 필요한 단계 수를 표시하여 절차를 진행하는 동안 사용자가 손실되지 않도록 하고 싶을 것입니다.

결론

웹은 양방향 거리이므로 사용자를 위한 가치 있는 웹 콘텐츠를 만들고 흥미진진한 웹 양식 디자인으로 사용자의 참여를 유지해야 합니다. 양식은 웹 브라우징 경험의 필수적인 부분이므로 웹 양식을 가능한 한 매력적으로 만드는 방법에 대해 생각하는 데 시간을 좀 더 투자하지 않으시겠습니까? 이러한 패턴을 생각하고 웹 양식 디자인에 더 인간적인 터치를 추가함으로써 드롭률을 줄이는 동시에 혼란을 줄이면서 더 나은 참여를 유도할 수 있습니다.