5

I designed the login form input fields stacked on an landscape tablet app, because that's the usability recommendation I know for forms. It's easier on the user's eyes.

But the client is asking to have it side by side, because it's easier to hit with the thumbs. It does make sense, but still worried about the eye movement effort. I mean, in my case, it's only two fields, so it's not the end of the world. But if I have to design a longer form in the future. Should it be stacked or side by side?

Does anyone know of any research on form design for tablets on landscape?

  • Even if it is more convenient to touch the left field with the left thumb and the right field with the right thumb, you still have to take your hand(s) off holding the tablet so you can then type into the field - unless people type with their thumbs too. – JonW Apr 13 '15 at 10:36
  • @JonW that's a good point! – Livia Thimotheo Apr 13 '15 at 10:43
  • ux.stackexchange.com/a/37627/11858 I'd say stacked is better – Slartibartfast Apr 13 '15 at 14:34
3

Regarding designing a longer form

The problem with two columns forms is users would be confused by the two column layout and interact differently needing them to more time to get the task done. To quote this article

One of the problems with form fields in multiple columns is that your users are likely to interpret the fields inconsistently.

Here you’ll see 5 different ways to interpret how the form fields relate when they are arranged in a standard two column layout.

enter image description here

However with a single column layout, users just scan from top to bottom and hence can move through the form really quickly and fill the details. To reference this article which talks about the issues with single column vs multi column forms

We have forms for our city reviews, accommodation ads, etc. At the beginning, we sketched these forms in one column, but in the final design, we tried 2 columns because it was nicer from the design point of view.

The problem was that the second column of the form, had required fields. So, what happened was that the user, after filling the first column and seeing the “Publish” button, was not realising that a second column needed to be filled too. We started to receive daily emails like: “Hey! I can’t publish on your site, it keeps saying me there are fields I have to fill”. It’s important to say that we were actually pointing with a red coloured sentence where the required fills were, but many users were still not seeing them.

The reason because was hard for the users to publish content this way is obvious if you check out the image bellow. This is the path the user had to follow before and after we fixed the problem:

enter image description here

Regarding the login form

Since the login form has only two fields, you can get away with potentially using a two column layout since users would be accustomed to knowing the flow and know the first field is usually the Username\email and the second field is the password and hence there would be little confusion about the sequence of the flow.

The reasoning behind this assumption is that studies have shown that two column layouts are fine for specific use cases such as first name and last name or Country and state fields or date fields. To quote this article from Luke Wroblewski

There are some exception cases where the ’single column’ rule can be broken. Users expect to see names (first and last name), dates (year, month and day) and time (hour and minute) written on a single line.

That said, if you look at most form designs, they follow a stacked approach because a stacked approach would allow users to quickly scan the form and fill it up as the below login form examples show.

enter image description here

enter image description here

enter image description here


In conclusion, I would suggested going with a stacked form approach though if you decide to go with a two column approach for the login form, you should be fine. That said, You should make the call between the user quickly filling up the form and space optimization on the page.

That said, irrespective of what layout you go for, I strongly recommend reading this article on label positioning (and this smashing magazine article as well)as that would also define how your users interact with your form.

1

Having inputs on the right side of the tablet that are easy to hit with the thumbs is almost irrelevant, or a at least a pretty low level concern. Users will typically rush through forms to get them over with, and having inputs scattered around the page will take away from the discoverability of inputs and their labels. Left aligned inputs and a scrollable page will almost certainly be your answer here. The inputs and their labels will be more discoverable, and you will run into fewer instances of a user missing a field.

What is more important to consider than accessibility of the fields with the users thumbs is the flow-through of the form. By that I mean pay attention to the micro-interaction related to moving form field to field as a user completes the form in order. Make sure that as a user completes an input, he/she is tabbed automatically to the next relevant input, and ultimately, upon reaching the end, he/she is able to submit from the keyboard interface on their tablet.

In summary: If the user needs to bounce around from input to input, you haven't developed the right form for the use-case, the order of inputs should accommodate the user-story. Inputs which are not left-aligned can lead to non-discoverability since users are generally rushing through forms.The inputs should be minimized to only those that are required and should be in a logical order. Auto-tab to the next input and ultimately to the submit button.

O yeah... almost forgot: Test, iterate, test, then repeat as much as you are able.

  • +1 this answer provides the right set of factors to consider – tohster Apr 22 '15 at 5:33
0

Using landscape tablet gives you width of ~700px, and if you want to display input fields then two column layout will be best because displaying stacked input fields will display very long and more than two will be very hoch poch on tablets of small width.

Displaying two input field in one row will be best for tablet landscape mode.

  • Why not wire/proto them both in landscape & portrait and ask for user/stakeholder feedback? – DarrylGodden Apr 21 '15 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.