larlet-fr-david-cache/cache/7fe9e2c3bafffac17d376f359ab9c323/index.md

title: A Checklist for Designing Mobile Input Fields
url: http://www.nngroup.com/articles/mobile-input-checklist/
hash_url: 7fe9e2c3bafffac17d376f359ab9c323

<p>Whether you're designing web pages, web-based applications (e.g., SaaS), or native mobile apps, one of the basic building blocks is the humble text-input field: a box where the user can enter some text. Uses of this widget are plenty and not the topic of this article. We should point out that there are many issues in application design relating to workflow and other big-picture questions that are important for good application user experience. (These topics are discussed in our full-day <a href="/courses/application-ux/">Application Design course</a>.)</p>

<p>In this article, we focus on the nitty-gritty of input fields. Each of these issues may seem minor, but we repeatedly see these usability guidelines violated — particularly in mobile user interfaces, where <a href="/articles/does-user-annoyance-matter/">even the smallest annoyance grows</a> from a molehill into a mountain in terms of its ability to delay users and prevent them completing tasks with your design.</p>

<p>Here's how an input field should look:</p>

<p><img alt="" height="87" src="//s3.amazonaws.com/media.nngroup.com/media/editor/2015/05/14/inputfield.png" width="200"/></p>

<p><span>Here's a checklist of 14 guidelines to follow for mobile input field UX:</span></p>

<table border="1" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td><strong>Should it be there at all</strong></td>
			<td>
			<ol>
				<li>Is this field absolutely necessary?</li>
			</ol>
			</td>
		</tr>
		<tr>
			<td><strong>Description</strong></td>
			<td>
			<ol start="2">
				<li>Is the label above it? (Not inside, not below)</li>
				<li>Is the field marked as required (*) or optional?</li>
				<li>Have you removed any <a href="/articles/form-design-placeholders/">placeholder</a> from inside the field?</li>
			</ol>
			</td>
		</tr>
		<tr>
			<td><strong>Visibility</strong></td>
			<td>
			<ol start="5">
				<li>Is the field big enough so that most possible field values are visible?</li>
				<li>Is the field visible in both orientations when the keyboard is displayed?</li>
			</ol>
			</td>
		</tr>
		<tr>
			<td><strong>Filling it in for the user</strong></td>
			<td>
			<ol start="7">
				<li>Do you have any good defaults for this field?
				<ul>
					<li>Any history available?</li>
					<li>Frequently used values?</li>
				</ul>
				</li>
				<li>Can you use the phone features (camera, GPS, voice, contacts ) to populate it?</li>
				<li>Can you compute it for the user based on other info (e.g., state based on zip code, coupon field)?</li>
			</ol>
			</td>
		</tr>
		<tr>
			<td><strong>Typing</strong></td>
			<td>
			<ol start="10">
				<li>Do you support copy &amp; paste into the field?</li>
				<li>What is the right keyboard for this field?</li>
				<li>Can you make suggestions/autocomplete based on the first letters typed?
				<ul>
					<li>Do not autocorrect for names, addresses and email addresses.</li>
				</ul>
				</li>
				<li>Do you allow typos or abbreviations?</li>
				<li>Do you allow users to enter it in whatever format they like? (e.g., phone numbers credit cards)
				<ul>
					<li>You can autoformat it for them.</li>
				</ul>
				</li>
			</ol>
			</td>
		</tr>
	</tbody>
</table>

<p>Go through your design and complete the checklist for every single input field. Yes, this is work, but better you suffer than the users suffer.</p>

<p>Ideally, you'll have 100% checklist compliance for 100% of the input fields in your site or app. Anything less, and you do have a substandard user experience.</p>

<p>Pragmatically, you may not have resources to deliver 100% on these UX requirements. In that case, prioritize the fields so that the ones that are used the most or are the most critical for task completion get the highest scores.</p>