Interface to add content and multiple files

Question

I have a modal to add Activities,so the user can add all content by typing it and/or select files to attach.

See below:

My problem is: Maybe the user just wanna type a very long description and the textearea's height gonna be too small and the My documents Session will be useless. So I see two options:

• The height of description textarea increase by its content but the SAVE button gonna be far away.

• Description textarea with fixed height but with scrollbars that I think that is a bad approach for this situation.

I though to put a duplicated button 'add activity' near the description field but sounds weird to have multiple buttons to the same action so close.

What do you think that is a good solution for this case?

Thanks

Answer 1

The issues listed in the original question can be eliminated by separating the new content that's being created (the activity) from the existing content (existing documents).

The scrollbars on the description and exiting attachment region allow their content to grow.

Answer 2

You're going to have a lot of issues with this. Even if you manage to design it for a typical desktop monitor, how will you handle tablets and phones? You'll need to come up with a very creative responsive design.

To get around the long file name, simply truncate the name to X characters (the display only, not the actual file name). A mouseover event will display the full file name if needed.

You're also going to run into issues with the total modal window height. What happens when the user uploads 100 documents? Your height will dynamically change.

I'd suggest not using a modal at all. Simply create a new page. You'll free yourself from these limitations.

Answer 3

As far as I understand the mockup you provided - it's quite similar to the email composing form. There is a subject (Task), content (Description) and attachments (Selected Documents). "Add activity" might act a bit like the Send button (is it the "Save" button you mentioned?).

It is unclear why the height of the Description text area is your main concern. What about the "My Documents" list? How does it relate to "Selected Documents"? It consumes lots of space - are you sure about it? Does it need to be a matrix?

Consider the width of the text area as an important factor too. Currently lines are very long - which makes them hard to read.

If you check how "New message" form in Gmail looks like - you will find that scroll within a modal is not necessarily a bad solution. All options are visible and accesible at a glance. Body text area is narrow, keeping the lines around 75 characters long - which is just right. "Send" button sticks to the bottom of the screen and is always visible. Gmail does not display the list of available attachments unless you ask for them :-)