The problem with automatically focusing the first input and what to do instead

This content originally appeared on Adam Silver and was authored by Adam Silver

In 2009 I was working on the Argos checkout flow.

We were considering focusing the first input when the page loads. The idea was to save users a click (never a good sign). Back then we had to use JS, but now we have the HTML5 autofocus attribute.

Either way, automatically focusing the first input causes 5 specific problems that degrade UX.

Here they are:

Problem #1: it makes the page jump unexpectedly

When any normal web page loads, focus remains at the top.

With autofocus, focus jumps suddenly to the first input.

But this is disorientating and may cause users to think something has gone wrong.

Problem #2: it stops users scrolling with the keyboard

Users often scroll a web page after page load by pressing ↑ and ↓.

With autofocus, the keys are ignored because the input is focused.

This makes the interface feel broken.

Problem #3: it stops users going back with the keyboard

Some users navigate back by keyboard using #+← for example.

With autofocus, the shortcut is ignored because the input is focused.

This slows users down.

Problem #4: it’s unexpected for screen reader users

When a web page loads, a screen reader announces the page title.

With autofocus, the input’s label is announced instead.

This is disorientating and causes users to lose context.

Problem #5: it works badly on mobile

On mobile, focusing an input usually opens the keyboard.

With autofocus this doesn’t happen. On Android, for example, the input is focused but the user has to tap again to open the keyboard.

This makes the interface feel broken.

Just let users focus the first input

Good design puts users in control.

This content originally appeared on Adam Silver and was authored by Adam Silver

Print Share Comment Cite Upload Translate Updates

APA

Adam Silver | Sciencx (2023-06-04T00:00:00+00:00) The problem with automatically focusing the first input and what to do instead. Retrieved from https://www.scien.cx/2023/06/04/the-problem-with-automatically-focusing-the-first-input-and-what-to-do-instead/

MLA

" » The problem with automatically focusing the first input and what to do instead." Adam Silver | Sciencx - Sunday June 4, 2023, https://www.scien.cx/2023/06/04/the-problem-with-automatically-focusing-the-first-input-and-what-to-do-instead/

HARVARD

Adam Silver | Sciencx Sunday June 4, 2023 » The problem with automatically focusing the first input and what to do instead., viewed ,<https://www.scien.cx/2023/06/04/the-problem-with-automatically-focusing-the-first-input-and-what-to-do-instead/>

VANCOUVER

Adam Silver | Sciencx - » The problem with automatically focusing the first input and what to do instead. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/06/04/the-problem-with-automatically-focusing-the-first-input-and-what-to-do-instead/

CHICAGO

" » The problem with automatically focusing the first input and what to do instead." Adam Silver | Sciencx - Accessed . https://www.scien.cx/2023/06/04/the-problem-with-automatically-focusing-the-first-input-and-what-to-do-instead/

IEEE

" » The problem with automatically focusing the first input and what to do instead." Adam Silver | Sciencx [Online]. Available: https://www.scien.cx/2023/06/04/the-problem-with-automatically-focusing-the-first-input-and-what-to-do-instead/. [Accessed: ]

rf:citation

» The problem with automatically focusing the first input and what to do instead | Adam Silver | Sciencx | https://www.scien.cx/2023/06/04/the-problem-with-automatically-focusing-the-first-input-and-what-to-do-instead/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.