-
Notifications
You must be signed in to change notification settings - Fork 0
/
5-form-design-tips.html
448 lines (334 loc) · 32 KB
/
5-form-design-tips.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
<!DOCTYPE html>
<html lang="ko"><head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E4YBHG63E3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-E4YBHG63E3');
</script>
<!-- Meta Tag for Basic Setting -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="locale" content="ko_KR">
<meta name="google-site-verification" content="Q1Gkv54gFGh2MxaT7ehKmua6BROtBIJR_ki_z_1_EwE" />
<meta name="naver-site-verification" content="d9a8213816d39cd0b58123c579fb50704ab632a8"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#ffffff">
<meta name="mobile-web-app-capable" content="yes">
<meta name="referrer" content="always"><meta property="og:title" content="통계로 알아보는, 성과 내는 5가지 폼(Form) 설계 팁 | 매거진 입맛">
<meta property="og:url" content="https://dewberry9.github.io/5-form-design-tips">
<meta property="og:type" content="article">
<meta property="og:site_name" content="매거진 입맛">
<meta property="og:description" content="디자이너의 오랜 고민거리 폼. 통계 데이터를 바탕으로 폼 전환율을 개선할 수 있는 5가지 팁을 준비했습니다.">
<meta property="og:image" content='https://dewberry9.github.io/assets/images/design/5-form-design-tips/00.jpg'>
<meta name="by" content="이준환"><meta name="twitter:title" content="통계로 알아보는, 성과 내는 5가지 폼(Form) 설계 팁 | 매거진 입맛">
<meta name="twitter:description" content="디자이너의 오랜 고민거리 폼. 통계 데이터를 바탕으로 폼 전환율을 개선할 수 있는 5가지 팁을 준비했습니다.">
<meta name="twitter:image" content='https://dewberry9.github.io/assets/images/design/5-form-design-tips/00.jpg'>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dewberry9.github.io/5-form-design-tips">
<meta name="twitter:site" content="매거진 입맛">
<meta name="twitter:label1" content="Category">
<meta name="twitter:data1" content="">
<meta name="twitter:label2" content="Topic">
<meta name="twitter:data2" content="UX">
<!-- Other Basic Meta Tag -->
<meta name="title" content="통계로 알아보는, 성과 내는 5가지 폼(Form) 설계 팁 | 매거진 입맛">
<meta name="description" content="디자이너의 오랜 고민거리 폼. 통계 데이터를 바탕으로 폼 전환율을 개선할 수 있는 5가지 팁을 준비했습니다.">
<meta name="author" content="이준환">
<meta name="article:media_name" content="매거진 입맛">
<meta property="article:mobile_url" content="https://dewberry9.github.io/5-form-design-tips">
<meta property="article:pc_url" content="https://dewberry9.github.io/5-form-design-tips">
<meta property="article:mobile_view_url" content="https://dewberry9.github.io/5-form-design-tips">
<meta property="article:pc_view_url" content="https://dewberry9.github.io/5-form-design-tips">
<meta property="article:talk_channel_view_url" content="https://dewberry9.github.io/5-form-design-tips">
<meta property="article:pc_service_home" content="https://dewberry9.github.io">
<meta property="article:mobile_service_home" content="https://dewberry9.github.io">
<!-- Post Date Tag -->
<meta property="article:published_time" content="2021-08-08T00:00:00+09:00">
<meta property="article:modified_time" content="2021-08-08T00:00:00+09:00">
<meta property="og:regDate" content="20210808000000">
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"BlogPosting",
"mainEntityOfPage":{
"@id":"https://dewberry9.github.io/5-form-design-tips"
},
"url":"https://dewberry9.github.io/5-form-design-tips",
"headline":"통계로 알아보는, 성과 내는 5가지 폼(Form) 설계 팁 | 매거진 입맛",
"description":"디자이너의 오랜 고민거리 폼. 통계 데이터를 바탕으로 폼 전환율을 개선할 수 있는 5가지 팁을 준비했습니다.",
"author":{
"@type":"Person",
"name":"이준환",
"url":"https://dewberry9.github.io",
"email":"[email protected]"
},
"publisher":{
"@type":"Organization",
"name":"매거진 입맛",
"logo":{
"@type":"ImageObject",
"url":"https://dewberry9.github.io/assets/images/logo.png"
},
"url":"https://dewberry9.github.io",
"email":"[email protected]"
},
"image":{
"@type":"ImageObject",
"url":"https://dewberry9.github.io/assets/images/design/5-form-design-tips/00.jpg"
},
"datePublished":"2021-08-08T00:00:00+09:00",
"dateModified":"2021-08-08T00:00:00+09:00"
}
</script><!-- Fonts -->
<link rel="stylesheet preload prefetch" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css" />
<link rel="stylesheet preload prefetch" type='text/css' as="style" crossorigin href='/assets/fonts/stylesheet.css'>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href='/assets/favicons/apple-touch-icon.png'>
<link rel="icon" type="image/png" sizes="32x32" href='/assets/favicons/favicon-32x32.png'>
<link rel="icon" type="image/png" sizes="16x16" href='/assets/favicons/favicon-16x16.png'>
<link rel="mask-icon" href='/assets/favicons/safari-pinned-tab.svg' color="#363059">
<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-TileColor" content="#da532c">
<link rel="stylesheet preload prefetch" as="style" type="text/css" href='/assets/post.css'>
<link rel="dns-prefetch" href="https://res.cloudinary.com"><!-- ETC -->
<link rel="canonical" href="https://dewberry9.github.io/5-form-design-tips">
<link rel="alternate" href="https://dewberry9.github.io/feed.xml" type="application/atom+xml" title="Atom 0.3">
<title>통계로 알아보는, 성과 내는 5가지 폼(Form) 설계 팁 | 매거진 입맛</title>
<script data-ad-client="ca-pub-7525347021497850" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head><body>
<header class="top-nav" id="nav">
<nav>
<a href="/" title="Magazine Epmat" class="logo">
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.655 0h-1.31v9.557L6.567 1.28l-1.134.655 4.779 8.277-8.277-4.779-.655 1.134 8.277 4.778H0v1.31h9.557L1.28 17.433l.655 1.134 8.277-4.779-4.779 8.277 1.134.655 4.778-8.277V24h1.31v-9.557l4.778 8.277 1.134-.655-4.779-8.277 8.277 4.779.655-1.134-8.277-4.778H24v-1.31h-9.557l8.277-4.778-.655-1.134-8.277 4.779 4.779-8.277-1.134-.655-4.778 8.277V0Z" fill="#816CF8"/>
</svg>
<span class="nosvg">매거진 입맛</span>
</a>
<div class="dynamic-nav">
<ul>
<li>
<a id="btn-article" href="/article" title="매거진 입맛 • 프로덕트 디자인" class="op75">프로덕트 디자인</a>
</li>
<li>
<a id="btn-review" href="/review" title="매거진 입맛 • 마시다" class="op75">마시다</a>
</li>
<li>
<a id="btn-read" href="/read" title="매거진 입맛 • 읽다" class="op75">읽다</a>
</li>
<!-- <li>
<a href="https://shouk.today?utm_source=mag_epmat" target="_blank" class="op75"><span class="mobile-disappear">인사이트 커뮤니티</span> 슉</a>
</li> -->
</ul>
</div>
</nav>
</header>
<div id="content">
<script>
document.getElementById('nav').classList.add('show')
</script>
<section class="post-content-container space-container">
<div class="space-left">
<div class="post-content-side-container">
<h3 class="post-share-title rise-target">매거진 입맛, 자유롭게 공유하세요.</h3>
<p class="post-share-description rise-target">개인 블로그, 메모, 사내 래퍼런스 공유 채널, 어디든지 좋습니다.
인사이트는
나눌 수록 커지니까요.
</p>
<button id="post-share" class="rise-target copy">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="currentColor" class="bi bi-subtract"><path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/></svg>이 글의 공유 링크 복사
</button>
<a rel="noreferrer" class="outerlink-container rise-target" target="_blank" href="https://forms.gle/wvj73q8MWBv2j44h7" title="매거진 입맛 뉴스레터 구독 신청">
<h3>뉴스레터 구독 신청</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="currentColor" class="bi bi-arrow-right-short"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>
</a>
<a rel="noreferrer" class="outerlink-container rise-target" target="_blank" href="https://forms.gle/26d5yuzwQB3D44zm7" title="콘텐츠 주제 제안">
<h3>콘텐츠 주제 제안</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="currentColor" class="bi bi-arrow-right-short"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>
</a>
</div>
</div>
<!-- 본문 -->
<div class="space-right">
<div class="post-content">
<h1 class="post-title">통계로 알아보는, 성과 내는 5가지 폼(Form) 설계 팁</h1>
<p>디지털 프로덕트에서 폼(Form)이란 고객이 제품 사용에 필요한 정보를 제공하는 도구입니다. 폼은 그 자체로 온보딩 과정이 되기도 하고, 결제라는 결정적인 순간에 등장하기도 합니다. 폼은 고객의 제품 경험뿐만 아니라 제품의 주요 지표에도 큰 영향력을 미칩니다. 한 명이라도 더 전환시키는 폼 설계가 디자이너 사이에서 오랫동안 논의의 주제가 된 것은 당연한 일입니다. 이번 글에서는 실제적인 데이터, 즉 통계를 가지고 폼 전환율을 개선할 수 있는 5가지 팁을 소개하겠습니다.</p>
<h2 id="페이지-나누기">페이지 나누기</h2>
<p>폼에서 요구하는 정보의 개수를 줄이는 것이 전환율에 도움이 된다는 사실은 상식입니다. 하지만 같은 개수의 입력란이 있다면 페이지를 늘리는 것은 오히려 전환율을 높일 것입니다.</p>
<p class="normal-size"><img src="/assets/images/design/5-form-design-tips/01.jpg" alt="Single Page vs Multi Page" title="단일 페이지 vs 다중 페이지" loading="lazy" /></p>
<p>66만 5천 명이 넘는 디지털 프로덕트 사용자에게 모바일 폼 경험을 <a title="formstack, 2015 - The Form Conversion Report" href="https://www.formstack.com/resources/report-form-conversion" target="_blank" rel="noopener">설문한 조사</a>에 따르면, 단일 페이지로 구성된 폼의 평균 전환율은 4.53%, 다중 페이지는 13.85%로 3배 이상 높았습니다.</p>
<p>폼을 여러 페이지에 나누어 배치하면 개별 입력란이 받는 고객의 집중도가 단일 페이지에 몰아놓았을 때보다 높습니다. 이 특성은 페이지 분리로 입력란의 시인성과 조작성을 개선하고 입력을 유도하는 추가적인 정보를 실을 수 있는 화면이 늘어나면서 강화됩니다.</p>
<p>하지만 다중 페이지로 구성한 폼에도 여전히 주의할 점이 있습니다. 첫번째는 진행 표시줄(Progress Bar)이나 페이지 번호를 표기하여 폼의 전체 분량을 명시해야 한다는 점입니다. 다중 페이지 폼은 단일 페이지 폼보다 폼의 분량을 직관적으로 느끼기 어렵습니다. 하염없이 계속되는 폼은 고객의 의지를 앗아갈 것입니다. 둘째로 페이지 이동 간 이전에 입력했던 정보가 초기화되지 않도록 기술적 조치를 해야 합니다. 다중 페이지 폼에서 일어나는 입력란 사이의 이동과 수정은 페이지 이동이라는 추가적인 행동을 요구합니다. 거기에 이미 한 번 이상 입력했던 정보가 사라져 다시 입력해야 하는 상황이 닥친다면? 말할 것도 없습니다.</p>
<p>잘 설계된 폼은 고객의 행동에 부담과 장애가 생기지 않도록 최대한 배려합니다.</p>
<h2 id="적은-입력란">적은 입력란</h2>
<p>입력란의 개수가 적을 수록 해결하기도 쉽고 따라서 전환율도 나을 것이다. 직관적으로 떠올릴 수 있는 생각입니다. 이는 데이터도 증명하는 사실입니다.</p>
<p class="full-size"><img src="/assets/images/design/5-form-design-tips/02.jpg" alt="Imaginary Landscape AB Test" title="Imaginary Landscape AB 테스트" loading="lazy" /></p>
<p>이 분야의 가장 고전적인 통계는 웹 에이전시 <a title="Brian Moloney(Imaginary Landscape), 2008 - Fewer fields in a contact form sharply increases conversions" href="https://www.imagescape.com/media/filer_public/06/94/0694c7f4-8914-4598-8871-b857fbc12737/form_case_study.pdf" target="_blank" rel="noopener">Imaginary Landscape의 AB 테스트</a>에서 확인할 수 있습니다. 이 테스트에서 주소, Fax, 유입 채널을 묻는 설문 등 11개짜리 입력란으로 구성된 문의하기 폼은 이름, 전화번호, 이메일 주소, 코멘트의 4가지 항목으로 개편되었습니다. 그 결과 전환율은 5.4%에서 11.9%로 2배 이상 증가했습니다.</p>
<p class="full-size"><img src="/assets/images/design/5-form-design-tips/03.jpg" alt="Form Conversion Rate by Number of Fields" title="입력란 개수별 폼 전환율" loading="lazy" /></p>
<p>B2B 마케팅 자동화 솔루션 기업 <a title="Egan Cheung(Eloqua), 2011 - How Many Fields Belong On Your Landing Pages? [Chart]" href="https://blogs.oracle.com/marketingcloud/post/how-many-fields-belong-on-your-landing-pages-chart" target="_blank" rel="noopener">Oracle Eloqua의 조사</a>도 적은 입력란의 효과를 증명합니다. 1,500여개의 폼을 검토한 이 조사는 입력란의 수가 늘어날 수록 전환율이 떨어지는 추세를 보여주고 있습니다. 이전에 소개한 <a title="매거진 입맛 - 당장 활용하는 12가지 AB 테스트 사례" href="/12-ab-test-cases" target="_blank" rel="noopener">Netflix 랜딩 페이지의 비밀번호 입력란 추가 AB 테스트</a>가 실패한 이유도 여기 있습니다.</p>
<p>폼을 구성하는 입력란의 개수를 줄이는 일은 전환율을 개선하는 확실한 방법 중 하나입니다. 그러나 분별없이 개수만 줄이는 행동은 제품에 도움이 되지 않습니다. 제품의 특성과 특정 폼의 제출로 실행할 수 있는 기능에 따라 필요한 입력란은 다를 수 있습니다. 앞서 언급한 Eloqua의 조사도 이런 점을 설명하고 있습니다. 조사에 따르면 무료 체험판을 받는 과정에서 폼을 입력하는 경우에는 입력란이 8개에 이르러도 전환율이 크게 감소하지 않습니다. 어떤 리소스를 다운로드 받는 경우에는 11개까지도 가능합니다. 하지만 웨비나(Webinar) 이벤트에 등록하는 폼이라면 5개만 넘어도 전환율이 쭉 떨어지기 시작합니다. 제품의 특성과 상황을 고려해서 필수적인 입력란으로만 폼을 구성해야 합니다. 이를 위해서는 폼을 구성하는 각 입력란을 중요도에 따라 줄세울 수 있어야 합니다.</p>
<h2 id="전환율을-떨어뜨리는-텍스트-박스-드롭다운-피하기">전환율을 떨어뜨리는 텍스트 박스, 드롭다운 피하기</h2>
<p>한 줄짜리 텍스트 입력란, 여러 줄을 쓸 수 있는 텍스트 박스, 체크 박스, 라디오 버튼, 드롭다운, 날짜 선택기…. 입력란에는 여러 종류가 있습니다. 그리고 특정 종류의 입력란은 전환율을 떨어뜨릴 수 있습니다.</p>
<p class="full-size"><img src="/assets/images/design/5-form-design-tips/04.jpg" alt="Form Conversion Rate by Field Types" title="입력란 종류별 폼 전환율" loading="lazy" /></p>
<p>CRM 솔루션 기업 HubSpot은 4만 개가 넘는 <a title="Dan Zarrella(HubSpot), 2021 - Which Types of Form Fields Lower Landing Page Conversions?" href="https://blog.hubspot.com/blog/tabid/6307/bid/6746/Which-Types-of-Form-Fields-Lower-Landing-Page-Conversions.aspx" target="_blank" rel="noopener">랜딩 페이지를 분석</a>하여 전환율에 악영향을 주는 형태의 입력란을 찾아냈습니다. 주로 이름, 이메일 주소 등을 받는 데 사용되는 한 줄짜리 텍스트 입력란보다 여러 줄을 입력받는 텍스트 박스 형태 입력란은 개수가 늘어남에 따라 전환율이 감소하는 정도가 큽니다. 드롭다운이 포함된 폼은 기본적으로 전환율이 낮습니다.</p>
<p>여러 줄을 쓸 수 있는 텍스트 박스는 입력받을 텍스트가 많은 경우에 사용하는 UI로 한 줄짜리 텍스트 입력란보다 크게 구성하는 것이 일반적입니다. 텍스트 박스는 한 줄짜리 텍스트 입력란보다 요구하는 수고가 큽니다. 그 자체로 2~3개의 한 줄짜리 텍스트 입력란의 부담감을 줍니다.</p>
<p>드롭다운은 제시된 목록 중에 하나를 선택할 수 있는 UI입니다. 라디오 버튼과 같은 방식이지만, 제시된 항목이 많아 제한된 화면에 라디오 버튼처럼 펼쳐놓을 수 없는 경우에 사용합니다. 드롭다운의 태생에서 알 수 있듯 드롭다운은 초기 상태에서 정보를 숨기는 특성이 있습니다. 이런 비직관성에, 제시된 목록 중 선택하는 기능을 수행하기 위해 정보의 숨김-노출 상태를 조작해야 하는 수고까지 요구합니다. 드롭다운이 포함된 폼의 전환율이 낮은 것은 당연해 보입니다.</p>
<p>이처럼 전환율을 떨어뜨리는 입력란의 형태는 존재합니다. 이와 같은 형태의 입력란을 사용할 때에는 대체할 방법이 있지는 않은지, 꼭 필요한지 검토하는 과정이 필요합니다.</p>
<h2 id="소셜-프루프로-불안감-없애기">소셜 프루프로 불안감 없애기</h2>
<p class="full-size"><img src="/assets/images/design/5-form-design-tips/05.jpg" alt="Reasons for Giving Up Filling Out the Form" title="폼 입력 포기 사유" loading="lazy" /></p>
<p><a title="Michelle Delgado(THE MANIFEST), 2018 - 6 Steps for Avoiding Online Form Abandonment" href="https://themanifest.com/web-design/6-steps-avoiding-online-form-abandonment" target="_blank" rel="noopener">한 조사</a>에 따르면 폼 입력을 포기하는 이유는 보안에 대한 불안(29%), 너무 긴 폼의 길이(27%), 광고에 활용될 것 같은 예상(11%), 정보 수집 이유가 불분명한 항목(10%) 때문입니다.</p>
<p>보안에 대한 불안이 폼 입력 포기 사유 1순위라는 것은 놀라운 사실이 아닙니다. 디지털 프로덕트의 고객은 오랫동안 버벅대는 온라인 환경을 경험했습니다. 보안 문제는 폼뿐만 아니라 디지털 프로덕트의 어떤 분야에도 빠지지 않고 등장하는 이슈입니다.</p>
<p>소셜 프루프(Social Proof)는 한 개인이 어떤 것을 결정할 때 사회적인 정보에 의존하는 경향과, 이를 활용하여 고객의 결정에 영향력을 미치는 방법입니다. 대표적인 소셜 프루프로는 상품 후기를 꼽을 수 있습니다. 고객은 다른 고객의 후기를 참고하여 구매를 결정합니다. 이와 관련해서는 <a title="매거진 입맛 - 전환율 높이는 상세 페이지 디자인. 바로 써보는 3가지 방법" href="/product-page-tips" target="_blank" rel="noopener">상세 페이지 개선법을 다룬 이전 글</a>에서 자세히 설명한 적이 있습니다. 이미 몇 명이 폼을 입력했다든지 다른 고객이 문제없이 폼을 처리했다는 정보를 보여주는 것은 고객의 불안감을 씻어주는 솔직한 소셜 프루프 해결책 중 하나입니다. 혹은 폼 입력 자체를 한정된 기회로 만들어 고객의 FOMO(Fear Of Missing Out)를 자극하는 것도 방법이 될 수 있습니다.</p>
<h2 id="리타게팅-광고-활용하기">리타게팅 광고 활용하기</h2>
<p class="full-size"><img src="/assets/images/design/5-form-design-tips/06.jpg" alt="Actions after Giving Up Filling Out the Form" title="폼 입력 포기 후 행동" loading="lazy" /></p>
<p>바로 위의 조사 자료에서 이어지는 내용입니다. 폼 입력을 포기한 고객 중 67%는 떠나서는 다시 돌아오지 않습니다. 이는 돌아와 폼 입력을 마치거나(13%), 다른 유사 제품을 찾아가거나(10%), 고객 지원 센터에 연락하는 경우(7%)보다 압도적으로 큰 비중을 차지합니다. 이 통계는 폼 입력 도중 문제가 생긴 고객이 문제를 해결하는데 얼마나 수동적인지 보여주는 사례입니다. 하지만 조금만 더 깊게 들어가 보면 새로운 기회가 보일 겁니다. 폼 입력 포기 고객의 사후 관리, 리타겟팅 광고가 바로 그것입니다.</p>
<p>리타겟팅(Retargeting) 광고는 제품에서 이탈한 고객을 대상으로 하는 마케팅 전략입니다. 고객은 다양한 이유로 제품에서 이탈합니다. 원하는 선택지를 받지 못했을 수도 있고, 더 나은 제품을 찾아 떠나거나 단지 무관심해졌을 수도 있습니다. 중요한 건 그렇게 떠난 고객이 생각보다 쉽게 돌아온다는 점입니다. 방문 고객 4명 중 3명은 리타겟팅 광고를 인지하며, 26%는 리타겟팅 광고로 인해 제품으로 돌아옵니다. 리타겟팅 광고로 돌아온 고객은 그렇지 않은 고객보다 전환율이 상대적으로 70% 더 높습니다. 폼 입력 포기 고객을 대상으로 하는 리타겟팅 광고는 전환율을 늘리는 가장 효과적인 방법이 될 수 있습니다.</p>
<h2 id="정리">정리</h2>
<p>지금까지 데이터가 증명하는 폼 설계 개선안 5가지를 알아보았습니다.</p>
<ol>
<li>폼을 다중 페이지로 구성</li>
<li>폼을 구성하는 입력란 줄이기</li>
<li>여러 줄을 쓸 수 있는 텍스트 박스, 드롭다운 피하기</li>
<li>소셜 프루프 요소로 불안감 해소하기</li>
<li>폼 입력 포기 고객 대상으로 리타겟팅 광고 집행하기</li>
</ol>
<p>위 팁을 바탕으로 자신의 제품에 맞는 테스트를 진행한다면 또 다른 인사이트를 얻을 수 있을 것입니다.</p>
<p class="right-infor">위시켓의 지원과 함께 제작된 콘텐츠입니다.</p>
</div>
<div class="post-feedback">
<p>이번 글은 어땠나요? 피드백을 나눠주세요.</p>
<a href="https://forms.gle/EMf71iYTEXAbEL868" target="_blank" rel="noopener noreferrer" title="좋았어요 피드백 남기기">👍 좋았어요!</a>
<a href="https://forms.gle/bXJA17sczKPTqtLR7" target="_blank" rel="noopener noreferrer" title="별로였어요 피드백 남기기">👎 별로였어요.</a>
</div>
<!-- <a class="shouk-container" target="_blank" href="https://shouk.today?utm_source=mag_epmat&utm_medium=content_banner">
<div class="container-left">
<h3>적게 읽고 많이 알아가세요.<br>인사이트 요약 커뮤니티 슉</h3>
<p>
팟캐스트, 영문 뉴스레터, 아티클, 1분 내외 분량 단순명료 요약
</p>
</div>
<div class="container-right">
<img src="/assets/images/shouk_banner.png" alt="banner">
</div>
</a> -->
</div>
</section>
<!-- 관련된 포스트 목록 -->
<section class="post-list related-post-list three-row">
<!-- 동일 카테고리 -->
<!-- 2-1 -->
<a title="DHM 모델로 제품 전략에서 AB 테스트 실무까지" href="/dhm-model-strategy-to-ab-test" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/design/dhm-model-strategy-to-ab-test/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>DHM 모델로 제품 전략에서 AB 테스트 실무까지</h3>
<p class="post-excerpt">넷플릭스 DHM 모델은 제품 전략을 세웁니다. 이제 전략을 실무적인 AB 테스트 단계까지 끌어 내려야합니다. 이 과정에서 필요한 것을 살펴봅니다.</p>
</div>
</div>
</a>
<a title="전략을 결정하는 전략. 넷플릭스 DHM 모델" href="/dhm-model-for-product-strategy" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/design/dhm-model-for-product-strategy/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>전략을 결정하는 전략. 넷플릭스 DHM 모델</h3>
<p class="post-excerpt">좋은 제품은 좋은 전략으로부터 나옵니다. 그럼 좋은 전략은? 넷플릭스 전 부사장의 제품 전략 수립·평가 방법론 DHM 모델을 알아봅니다.</p>
</div>
</div>
</a>
<a title="당장 활용하는 12가지 AB 테스트 사례" href="/12-ab-test-cases" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/design/12-ab-test-cases/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>당장 활용하는 12가지 AB 테스트 사례</h3>
<p class="post-excerpt">Booking.com, 넷플릭스, Etsy 등, 직관적이고 어렵지 않은 난이도의 AB 테스트 사례 12가지를 보고 인사이트를 가져가세요.</p>
</div>
</div>
</a>
<div class="ads-container ads-container-mobile-feedcard rise-target">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7525347021497850" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6h+cl+f-1w+d1"
data-ad-client="ca-pub-7525347021497850"
data-ad-slot="9019438848"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<!-- 비동일 카테고리 -->
<a title="가볍고 밝은 싱글 몰트 위스키의 대표주자. 글렌그란트 12년" href="/glengrant-12" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/daily/glengrant-12/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>가볍고 밝은 싱글 몰트 위스키의 대표주자. 글렌그란트 12년</h3>
<p class="post-excerpt">가벼운 위스키는 자칫 특색 없고 심심한 술로 받아들여질 수 있습니다. 과연 글렌그란트 12년은 이 불신에서 자유로울 수 있을까요?</p>
</div>
</div>
</a>
<a title="사랑하거나 싫어하거나, 피트의 마술적 매력. 라프로익 10년" href="/laphroaig-10" class="post-list-item rise-target sequential-rise-target">
<div class="post-thumbnail">
<div class="img-source" style="background-image: url('/assets/images/daily/laphroaig-10/00.jpg')"></div>
</div>
<div class="post-description">
<div class="post-intro">
<h3>사랑하거나 싫어하거나, 피트의 마술적 매력. 라프로익 10년</h3>
<p class="post-excerpt">피트로 유명한 아일라의 싱글 몰트 위스키 중에서도 라프로익은 강렬한 개성으로 손에 꼽힙니다. 10년에 불과한 숙성 기간에도 충분히 짜릿합니다.</p>
</div>
</div>
</a>
<div class="ads-container ads-container-relative-feedcard rise-target third-position">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7525347021497850" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6h+cl+f-1w+d1"
data-ad-client="ca-pub-7525347021497850"
data-ad-slot="9019438848"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</section>
<script src="/assets/post-share.js"></script>
<script>document.getElementById('btn-article').classList.remove('op75');
document.getElementById('btn-article').classList.add('nav-item-act');</script>
</div>
<footer id="footer" class="">
<section>
<div class="link-group"><a id="home-page" href='/' title="Main">매거진 입맛</a></div>
<div class="link-group">
<p class="group-title">Category</p>
<a href="/article" title="매거진 입맛 • 프로덕트 디자인">프로덕트 디자인</a>
<a href="/review" title="매거진 입맛 • 마시다">마시다</a>
<a href="/read" title="매거진 입맛 • 읽다">읽다</a>
</div>
<div class="link-group">
<p class="group-title">Social</p>
<a rel="noreferrer" id="fb-link" href="https://www.facebook.com/magepmat" title="Facebook" target="_blank">Facebook</a>
<a rel="noreferrer" id="insta-link" href="https://www.instagram.com/mag_epmat/" title="Instagram" target="_blank">Instagram</a>
<a rel="noreferrer" id="rss-link" href="/feed.xml" title="RSS" target="_blank">RSS</a>
</div>
<div class="link-group">
<p class="group-title">Contact</p>
<a id="mail-link" href="mailto:[email protected]" title="Email">Email</a>
<a href="https://www.linkedin.com/in/junhwanlee" target="_blank" rel="noopener noreferrer">LinkedIn</a>
<a href="https://www.rocketpunch.com/@junhwanlee" target="_blank" rel="noopener noreferrer">Rocketpunch</a>
</div>
<div class="link-group">
<p class="group-title">Request</p>
<a href="https://forms.gle/wvj73q8MWBv2j44h7" target="_blank" rel="noopener noreferrer">뉴스레터 구독</a>
<a href="https://forms.gle/26d5yuzwQB3D44zm7" target="_blank" rel="noopener noreferrer">주제 제안</a>
</div>
</section>
</footer>
</body>
<script src="/assets/scroll-animation.js"></script>
</html>