diff options
| author | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
|---|---|---|
| committer | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
| commit | dcfb172704f3afb68a30425029ec834be2883274 (patch) | |
| tree | 02ac480745db802d7af03f3213a0c568322170e3 /build/cut-your-forms-in-half/index.html | |
| parent | e146f8a64c793c337999ce316b16ebe5fe6f2dab (diff) | |
More content porting, on-going markdown changes for lowdown support
Diffstat (limited to 'build/cut-your-forms-in-half/index.html')
| -rw-r--r-- | build/cut-your-forms-in-half/index.html | 58 |
1 files changed, 38 insertions, 20 deletions
diff --git a/build/cut-your-forms-in-half/index.html b/build/cut-your-forms-in-half/index.html index 5b6dab1..018a6f1 100644 --- a/build/cut-your-forms-in-half/index.html +++ b/build/cut-your-forms-in-half/index.html @@ -1,48 +1,66 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Cut Your Forms in Half</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Cut Your Forms in Half</h1> +<h1 id="cut-your-forms-in-half">Cut Your Forms in Half</h1> + <p>2019-05-09</p> -<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> + +<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>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="/public/images/cut-forms.webp" alt="Great West Life form update"> -</p> -<h3>Breaking things down</h3> + +<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> + +<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 & password field (with the optional <code>show password</code> this becomes redundant)</li> +<li>Removed the overkill “retype” email & password field (with the optional <code>show password</code> this becomes redundant)</li> <li>Minor position changes for optional subscription sign up and input field descriptions</li> <li>Removed <code>recovery email</code> - - 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>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>Helpful Micro improvements</h2> -<p>You don't need to be extreme when gutting form fields - just be practical.</p> + +<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>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>checkbox</code> or <code>radio</code> inputs</li> <li>Avoid <code>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>Further reading</h2> + +<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> |