I have the following situation: I have to implement a form for a web app with several file upload inputs, that need a rather large block of text next to them (as in the screenshot below). The problem is that this box repeats itself several times (three, to be more precise) on the same page, and it leads to a bulky and really unfriendly layout.

enter image description here

Moreover, the files that need to be uploaded don’t have a fixed number, and also need additional details to be inserted (as below), which leads to an even uglier and unfriendlier layout.

enter image description here

What I’ve tried so far, beside the above layout, are the two versions below:

  • a collapsible text block:

enter image description here enter image description here enter image description here

  • a right-side text block:

enter image description here enter image description here

Obviously, none of them is nice, but I really can’t find a better way to do it. So, my question is: how can I possibly construct this form in a way that is both user-friendly and aesthetically pleasant?

I should probably also mention that I’m not a designer (so if anybody gets offended by the way it looks, please accept my apologies—I mean it!), but I’m stuck with implementing it from scratch. And no, I can’t hire one. (And I’m using Bootstrap, if it matters.)

  • 1
    It's interesting how file 1 is mandatory but the user can upload file 2 if file 1 is not present. I think that is confusing.
    – Igor-G
    Nov 13, 2013 at 10:52
  • That’s just a mockup; the actual text is different.
    – Alex
    Nov 13, 2013 at 11:02
  • Oh ok, that makes sense :)
    – Igor-G
    Nov 13, 2013 at 11:13
  • So is the instructional text the same for each repeating block? What elements are used to separate the blocks (headers, etc.) to give sense to users? Nov 13, 2013 at 12:00
  • @AlexeyKolchenko No, the instructional text is different for each block, and each block is a grey box—immagine that in my second example, the one with the text on the right, there are two different blocks, each one with its own “instructions” set and each one with its own file upload slots.
    – Alex
    Nov 13, 2013 at 12:05

2 Answers 2


The issue is too much information on the page. To solve it you should provide to user only relevant information for current task only. So the idea is to isolate each task. This allows to focus user on a current task and reduce noise which is caused by non-relevant information.

You could implement such separation with tabs or accordion. Probably there could be better implementation, still idea remains the same.
enter image description here

  • I’m having trouble with the layout of the single block (file upload slots vs. instructions text) and never even thought about the whole ensemble before, but your suggestion for it is really interesting. Thanks!
    – Alex
    Nov 13, 2013 at 14:19
  • @Alex, sorry, I've misinterpreted the question. Presenting each file upload slot in a row increases readability, as it's habitual reading pattern (left to right, by row). Nov 13, 2013 at 18:12

So you have (lets call them) "spaces". Every space needs a block of text (some sort of explanation), a file upload and a short description field describing the uploaded file. Further your logic: at least one field has to be provided with a file and its description. So far correct?

If so try to cluster your content into your spaces. One space containing its file-upload + its file-description + its block of text. And for your logic: Highlight or mark those spaces that still need a file (which would be all spaces in case no file was provided).

I gave it a try here: enter image description here

  • Every space needs a fixed explanation—some upload instructions, if you will—that needs to be there, and each uploaded file has two additional fields that need to be compiled by the user—the drop down menu and the “Short description” input field. And also, in each space (I called them blocks), several files can be inputed, each with its own two additional fields.
    – Alex
    Nov 13, 2013 at 11:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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