~uglyduck/uglyduck.srht.site

ref: 494dcd504bd6ebb68b59e8a04057b0a087570d38 uglyduck.srht.site/_site/cut-your-forms-in-half/index.html -rw-r--r-- 6.0 KiB
494dcd50 — Bradley Taunt tweaking overall design - still very much a WIP 6 months ago
                                                                                
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
<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>
    
      Cut Your Forms in Half &middot; Ugly Duck
    
  </title>
  <meta name="description" content="A personal guideline I follow is to always gut half the elements on a form">
  <link rel="shortcut icon" href="/favicon.png">
  <link rel="alternate" type="application/atom+xml" title="Ugly Duck" href="/feed.xml">
  <link rel="stylesheet" href="/style.css">
</head>


  <body>
    <header role="banner">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

</header>

    <main id="main" role="main">
      <header>
        <h1>Cut Your Forms in Half</h1>
      </header>
      <hr>
      <article class="">
        <p><em>Posted on <time datetime="2019-05-08T20:00:00-04:00">May 8, 2019</time></em></p>
        <hr>
        <p><em>Building web forms can sometimes feel like a boring or daunting task</em>. Don’t pass this dread on to your users - rip out as many of your form fields as possible.</p>

<p>Web forms tend to get a bad rep, mainly because so many horrible design choices are made without the user experience set at the forefront. Often times clients demand that they <strong>need</strong> those twenty input fields or else how will they collect critical information from their users? Normally when I’m approached with such a statement I simply ask them:</p>

<blockquote>
  <p>“How many form fields would you be willing to fill out for an emergency situation?”</p>
</blockquote>

<p>“My form isn’t for emergencies though”, they might reply. In that case ask them why they feel it acceptable to waste their users’ time just because it isn’t urgent. Time is valuable.</p>

<h2 id="fixing-a-form-in-the-wild">Fixing a form in the wild</h2>

<p>Let’s use a real-world form off the <a href="https://www.greatwestlife.com">Great West Life Insurance</a> website as an example (left is original, right is updated):</p>

<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/cut-forms.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/cut-forms.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/cut-forms.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/cut-forms.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp 1200w" sizes="100vw" alt="Great West Life form update" width="1623" height="2881" crossorigin="anonymous" /></p>

<h3 id="breaking-things-down">Breaking things down</h3>

<p>So what exactly have we changed?</p>

<ul>
  <li>Combined first and last name fields into a single input</li>
  <li>Removed the overkill “retype” email &amp; password field (with the optional <code class="language-plaintext highlighter-rouge">show password</code> this becomes redundant)</li>
  <li>Minor position changes for optional subscription sign up and input field descriptions</li>
  <li>Removed <code class="language-plaintext highlighter-rouge">recovery email</code>
    <ul>
      <li>This is something that should be prompted to the user after successful registration - don’t bog them down before they even sign up</li>
    </ul>
  </li>
</ul>

<h2 id="helpful-micro-improvements">Helpful Micro improvements</h2>

<p>You don’t need to be extreme when gutting form fields - just be practical.</p>

<ul>
  <li>Don’t use “first” and “last” names as separate inputs, instead use something like “Full Name”</li>
  <li>Make complex questions use preset answers via <code class="language-plaintext highlighter-rouge">checkbox</code> or <code class="language-plaintext highlighter-rouge">radio</code> inputs</li>
  <li>Avoid <code class="language-plaintext highlighter-rouge">select</code> items whenever possible (these are clunky and most times unnecessary)</li>
  <li>Include easy to understand, real-time error prompts</li>
</ul>

<h2 id="further-reading">Further reading</h2>

<ul>
  <li>Great place to deep-dive into UX form design: <a href="https://uxmovement.com/category/forms/">UX Movement</a></li>
</ul>

      </article>
      <br>
      <footer role="contentinfo" id="menu">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </small>
    <hr>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>
    
  </body>
</html>