Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.)

share|improve this question
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 '13 at 10:52
    
That’s just a mockup; the actual text is different. –  Alex Nov 13 '13 at 11:02
    
Oh ok, that makes sense :) –  Igor-G Nov 13 '13 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? –  Alexey Kolchenko Nov 13 '13 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 '13 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

share|improve this answer
    
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 '13 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). –  Alexey Kolchenko Nov 13 '13 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

share|improve this answer
    
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 '13 at 11:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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