Is it better to break a responsive screen into 2 steps?
Having a long form like this attached image, Is it bad for UX or is it better to break into 2 steps?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityI believe it is better to break this into several steps when going for a mobile or responsive approach. People on the phone might not be able to fill the whole page in one go and giving them several steps might help on finalising the form. The reason being is that the forum is rather large and also keep in mind that every-time the user has to input something the keypad will take u half the screen.
From the form it seems that you're expecting users to attach photos/sketches/pdfs which I doubt will be present on a phone (unless sycned).
It depends.
In general long forms where long = lots of form fields is a bad idea and should be avoided. Splitting a form into separate pages may help in that situation.
But in your case, you're using the term long to refer to vertical height of the page. Remember that people are just fine scrolling--ESPECIALLY on touch devices. As such, I see no benefit to splitting your example into multiple pages. That's just more taps, more page loads and it's usually always easier to just scroll.
I consider that is better to divide the screen in two steps or three, this is a very important for our users to navigate to the app. If they bored, simply they go back or close the site because the UX isn't the better. You take a look some mobile apps and inspire you in how design a web mobile app. For example, in the facebook's apps wizard we have various pages for filling data and we can tap a button for the next page that is the same information that facebook need for complete the wizard(do you can look the wizard of Facebook Messenger or Facebook Groups). I consider that your design(attached up) could be better for bring the information that do you need.
You should consider doing some user testing on two designs: one like this and one with steps. You could get valuable feedback from testing multiple designs.
If you split the form up, your sections should be very clear and distinct. In looking at your form, I can't clearly distinguish different sections. There's an "about your project"... but what category would the "shipping/budget" be? And are the photos supposed to be about your project? You'll just want to make those super clear. I'm imagining if the person is hitting this page they already have enough context to understand these things, though :)
A/B testing and Usability testing will give you the correct answer. Forms are super tricky. I am dealing with a huge/unfortunately necessary long form and I've realised A/B testing and Usability testing is the only way to find out.