4

My website will have a feature that allows users to submit/upload pictures and blogs for a competition. This is done on my competition page.

In terms of good UX design, is it better to have the upload form open in a new page or in a pop-up box?

I was thinking I can either have an upload button to open it in a pop-up box, or I can have an upload link which takes the user to a separate page to upload their files. Or maybe there might be another way to design it?

Theman
  • 221
  • 1
  • 4

6 Answers6

1

Consider a third option: expand in-line.

Since the whole point of the page is about submissions (if I read your question right) it makes sense to have that exist as a primary action on the page and expand to accommodate whatever interaction is required.

plainclothes
  • 21,323
  • 4
  • 47
  • 89
0

If you take a user to a new page, user may loose context of where they were on the original form page after you take them back post upload action.

Using a modal (for more complex upload sub flow, multiple files, etc..) or an in-page (single file) upload functionality is highly desired.

Igorek
  • 1,813
  • 13
  • 21
  • Model isn't ideal for mobile devices. – Midas Oct 29 '15 at 15:14
  • 1
    Agree, but in responsive world a modal can translate into a drawer (an off canvas sliding panel). The point is, if you have a complex sub flow where you may need to upload several files and perhaps fill out some other form fields - an in-page experience may get too complex for the user to understand and follow. – Igorek Oct 29 '15 at 15:19
  • Fair - the OP needs more detail on how complex the upload is. – Midas Oct 29 '15 at 15:27
0

Pop-up box will provide the most flexibility for UX design. You can find several pop-up box file uploaders online that can be custom configured on your website or design your own.

Quantumeye
  • 1
  • 1
  • 1
    Welcome to the site, @Quantumeye. Can you clarify why you think a "pop-up box will provide the most flexibility"? Also, why is that flexibility a good or bad thing? – Graham Herrli Oct 29 '15 at 16:13
0

I think you should use popup for upload section as it light weight and help data transfer process faster then inline. Most of the web applications prefer popup like File "Filepicker"

https://www.filepicker.com

Regards, Tushar

tushar1981
  • 21
  • 3
0

I think you should identify who your users are and what devices they are using.

Modals can take up 100% on mobile and if you set the modal's container to overflow:scroll, you should be OK.

However, make sure your calendar widget works when used on mobile in a fixed container.

Crafting Demon
  • 1
  • 1
0

Think you can go with the same way its done on stack exchange with an area to drop the image to upload

enter image description here

Blue Ocean
  • 10,679
  • 4
  • 35
  • 71